＃1

仪表卡

由于受欢迎的请求，我创建了一个样本卡，以更好地在接口上显示传感器信息。这不是它的第一个善良，因为我在过去已经做过类似的事情之后我看到的：仪表图表

这张卡的最重要的是，这是独立的，没有额外的JavaScript库使用大多数CSS。另一个重要的事情是它允许使用参数自定义缩放，以允许与堆栈卡一起使用它。

它基于代码https://github.com/johnrbell/gauge_css.。

@cogneato.使用这个向我展示一个非常酷的资源监视器（类似于我的系统标签），我印象深刻，所以我也决定在这里分享。

衡量严重程度
仪表堆栈

你可以找到代码这里

指示

上述仓库也发现了说明。

  1. 下载仪表卡
  2. 将文件放在您的配置/ www.文件夹
  3. 包括您的卡代码UI-Lovelace.yaml.
资源： -  URL：/local/gauge-card.js?v=1类型：js

注意：更新代码以避免在所有浏览器中避免清除缓存时，您可以更改v = 1到更高的数字

  1. 在您的卡中写入配置UI-Lovelace.yaml.
- type:水平堆叠卡:- type:自定义:仪表卡标题:温度实体:传感器。random_temperature min: -20 max: 35 - type: custom:gauge card title: Oil entity: sensor。My_oil_sensor严重性:红色:50绿色:0琥珀色:40
  1. 重新加载您的Lovelace选项卡（无需重新启动家庭助理或其他内容），您应该看到卡片。19463331伟德国际

常问问题：https://github.com/ciotlosm/custom-lovelace#faq.

给我买咖啡如果您喜欢这张牌，希望表达您的感激之情。

50喜欢
Lovelace：双压力卡
仪表图表
Lovelace - 仪表在图片元素卡中
Lovelace yaml迁移 - 自定义元素不存在
＃2

我只是用过@ciotlosm.使用系统监视器组件提供的传感器的规格卡。超级简单。
//www.sz-tiancheng.com/components/sensor.systemmonitor/

图像

5喜欢
＃3

谢谢你分享这个

＃4

share

如果你点击测量图像(就像你在旧的前端点击数值)，你会得到一段时间的历史趋势吗?

＃5

刚刚为我的惠普墨水水平实施了这一点，看起来非常棒。还试图点击卡，但没有发生任何事情，所以看起来没有历史。

＃6

没有配置为这样工作，但可以添加。你可以在这里提出一个功能请求:https://github.com/ciotlosm/custom-lovelace/issues.

@bramus.^^

＃7

感谢您分享此卡。这是很不错的。
有没有办法阻止它在盒子外“传播”?
我在Chrome和Safari检查，拱门有时会在其盒子外扩展

＃8

只需使用“scale：”参数来缩放它

＃9

@ciotlosm.
第一次歉意。应该读取文档。
感谢您的帮助。

＃10

@bramus.@Phileep.您可以更新您的规格卡，看看现在是否显示了在点击中的预期。

＃11

伟大的插件谢谢！

可以使其显示单击时显示历史记录或属性的详细信息？

＃12

@g0g0更新并再试一次

1就像
＃13.

不确定它是否在卡/ js文件中，但找到了这一点：
在Nginx代理19463331伟德国际背后运行家庭助手。现在远离其他位置作为家，我在卡上获得以下错误：

https://domain.name.com/local/gauge-card.js:7:1未捕获的syntaxerror：意外的令牌<

该卡显示它找不到自定义元素仪表卡。它正在工作https://domain.name.com.内部但是当我在家庭网络之外时，我会收到关于令牌的错误。

在我的configuration.yaml.我已经设置了base_url.作为domain.name.com.。

＃14

确保清除缓存，并且可以在资源中更新URL在结束时具有v = 2

/local/gauge-card.js?v=2

还要确保使用“RAW”版本以获取下载：https://raw.githubusercontent.com/ciotlosm/custom-lovelace/master/gauge-card/gauge-card.js.

1就像
＃15

？v = 2是诀窍：least_smile：

在我的iPhone上，我会看到另一个错误：

https://domain.name.com/local/gauge-card.js?v=2:2:14 typearror：没有呼叫类构造函数新|
＃16

确保你有javascript_version：最新在你的前端：块内configuration.yaml.

在新的FAQ部分增加了更多的信息:https://github.com/ciotlosm/custom-lovelace#faq.

1就像
＃17

我已经喜欢这些卡，但是......哇......我爱他们现在。不错的工作!

1就像
＃18

获取“自定义元素不存在：仪表卡。”错误。我确保我使用了原始格式，也有javascript_version：最新在我的configuration.yaml中。我也附加v = 2。这是我的配置。

  • 类型：水平堆栈
    牌：
    • 类型：自定义：仪表卡
      标题：办公室温度
      实体：sensor.office_multisensor_temperature.
＃19

您的控制台中有任何JS错误吗？你使用的是什么浏览器？

＃20

我尝试过Firefox和Chrome。