✘ 为什么我想使温度显示现代化
在我的家助理仪表板上,我直接在房子的地图上显示温度。
这很方便:我立即看到每个房间的温度,而不需要打开另一页。
直到现在,我使用元素。 州级 徽章. 结果清晰可见,温度大致显示在圆形徽章中。
但我想要的东西在视觉上更轻,更适合计划,也显示湿度。
这个想法不是改变我的传感器或重做我的整个仪表板。 我只是想以不同的方式提供相同的信息。
我的旧显示器与状态徽章
我最初的配置非常简单:每个传感器一个元素,定位在具有属性的平面上。 顶部 顶部 以及 左 左.
请注意,这些卡片包含在一张卡片中。 类型:图片元素 将军 将军
以下是我用于客厅的代码:
类型: state-badge entity: sensor.temperature_salon_temperature 样式:顶部: 98% 左: 22% 字体大小 : 40px text-align: center font-weight:粗体颜色:透明
这个展览正在做这项工作。 温度是可见的,每个徽章都在飞机上占有一席之地。
但徽章占据了重要的视觉位置,其黑暗背景和单元显示在一个单独的插入。

我选的卡片
对于这个新显示器,我使用了这个项目。 家电 卡 从 斯凯罗特 号 或(尼科拉斯59 号 HACF)。
这个名字大多让人想起家中的洗衣机,冰箱和其他设备。 但就我而言,我感兴趣的是房间的情绪图: custom:appliance-room-climate-card.
对于新的仪表,我还向您提供了HACF论坛上信息的链接:
HACF围绕地图和新仪表的讨论.
我将使用格式的一小部分可能性。 标准 计 :

在家里,目的是只保留在温度和湿度方面有用的信息,而不需要为每个房间添加一张完整的大地图。
安装在家庭助理
与 HACS 安装
要安装卡,最简单的方法是通过HACS。
在HACS中,搜索 动画设备& 能源卡, 然后下载项目(版本高于v1.52.0)

下载完成后,重新加载 Home Assistant 页面。 在电脑上,你可以使用 Ctrl + F5 强制浏览器重新加载。
如果项目没有出现在搜索中,您可以手动添加它:
- 打开HACS。
- 用三个点打开菜单。
- 转到自定义存储库。
- 下面加上存款地址。
- 选择仪表板卡的类别,称为
仪表 板 仪表 板在项目文件中。 - 然后在HACS中搜索项目并下载它。
https://github.com/skyrotter/ha-appliance-electromenager-cards
请记住在安装后重新加载浏览器。
✘ HACS-free 替代方案
该项目还提供手动安装。
在这种情况下,必须恢复文件。 Ha-appliance-electromenager-cards.js 显示在文件中 迪斯 特 在存储库中,然后将其复制到文件夹中 /config/www/ 家助理
然后需要在仪表板的参数中添加资源:
- 地址:
/local/ha-appliance-electromenager-cards.js - 类型 : JavaScript 模块
它是HACS的替代品。 没有必要同时进行两个安装。
我的新显示屏:一个圆圈和一个仪表
为了将标准整合到我的计划中,我使用了两个重叠的元素:
- 背景中的圆形图像。
- 上面的温度和湿度图。
圆圈允许显示器略微脱离装饰,而不会完全隐藏房间。
然后,仪表显示值和彩色弧线。
在我的新捕获中,温度出现在中心,湿度在下面。 结果比我的旧徽章轻,同时提供额外的信息。

《 ⚪ the circle in the background 》
我首先添加了作为背景的图像:
类型:图片: /local/house/circlebleu.png 样式:顶部: 60% 左: 42% 宽度 : 120px 变换:translate(-50)%, -50%不透明性: 0.5
在这个例子中,我的文件被调用。 Circlebleu.png.
这是我的档案,但每个人都可以定制。 还有其他三种颜色。
![]() |
![]() |
![]() |
![]() |
它被放置在文件夹中 /config/www/house/, 对应于地址 /local/house/circlebleu.png 在仪表板上使用。
此文件是从您侧面期望的图像:它不是卡片自动提供的元素。 您可以通过调整路径来使用自己的圆形背景。
我保留了宽度 120px 的 和不透明 0.5. 我想要一个可见的背景,但不是隐藏飞机的不透明光盘。
✘ 温度和湿度图
然后将地图添加到同一个位置:
类型: custom:appliance-room-climate-card 图标: '' entity_temperature_temperature_salon_temperature entity_humidity: sensor.temperature_salon_humidity temperature_unit: c 语言:fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false show_graph: false animations: false透明:真名: 变体:gauge show_trend: false style: top: 60% 左: 42% 宽度 : 130px 插图_size: 120
这一次,例子是关于公平。 因此,这些实体与文章开头显示的两个室外温度不同。
我使用以下两个实体:
温度_salon_temperature为了温度温度_salon_humidity为了水分。
⚙✘ 我 选择 的 设置
规格中的演示
此演示文稿使用以下参数选择:
变体:gauge
正是这个设置,我用它来获得值周围的弧线显示。
自愿变亮的显示
就房子而言,我不需要完整的地图可以提供的所有信息。
因此,我停用了几个要素:
show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false show_trend: false show_trend: false show_trend: false show_trend: false
因此,我保留了这种观点的基本要素:快速阅读温度和湿度。
我也使用这些设置:
透明:真名: " 图标 " : 动画:false
在我的设置中,我不想要任何额外的房间名称或图标,我禁用动画。
计数在计划上的位置已经提供了背景。 我不需要重复『沙龙』。
飞机上的定位
圆圈和地图使用完全相同的坐标:
顶部: 60% 左: 42%
这样就可以把它们放在同一个地方。 我在宽度上玩了一点,但每个人都需要适应他们的屏幕。
这些尺寸与我的计划和显示相对应。 它们将根据您的仪表板上的可用空间进行调整。
这两个区块将被插入列表中。 要素: 我的名片 图片 元素, 而不是旧的徽章。
因此,这些不是要在仪表板上其他地方添加的两个独立地图。
我的新显示器的完整代码
为了在配置中将两个元素放在同一个位置,这里是我用于客厅的完整块。
图像首先声明,然后是测量器:
类型:图片: /local/house/circlebleu.png 样式:顶部: 60% 左: 42% 宽度 : 120px 变换:translate(-50)%, -50%不透明性: 0.5 - 类型: custom:appliance-room-climate-card 图标: '' entity_temperature_temperature_salon_temperature entity_humidity: sensor.temperature_salon_humidity temperature_unit: c 语言:fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false show_graph: false animations: false透明:真名: 变体:gauge show_trend: false style: top: 60% 左: 42% 宽度 : 130px 插图_size: 120
为了在另一个房间重现这个显示,我通过改变实体和坐标来获取这两个元素。
我只是确保保持相同的价值观。 顶部 顶部 以及 左 左 底部和同一块的尺码。
奖金:我使用decluttering_templates
在这一点上,我的新显示器有两个元素:背景圆圈和仪表。
对于单个部件,将两个块直接保留在仪表板中并不不方便。
但是为了在几个房间里重现这个显示,我每次都必须复制代码的很大一部分。
在我想改变演示文稿的那一天,有必要采取每个块,并有可能忘记一个块。
所以我将此显示分组到一个可重用的模板中 整洁卡.
什么是decluttering_templates?
原理很简单:一旦我定义了显示器的结构,然后通过传递一些变量来重用它。
就我而言,结构始终保持不变:
- 背景中的圆圈。
- 上面的温度和湿度计。
- 相同的选项以保持光显示。
从房间到房间的变化是传感器,飞机上的位置以及圆圈的大小,颜色或不透明度。
因此,我将模板中定义的演示文稿与通话时提供的每个项目的特定信息分开。
先决条件:decluttering-card
此部分假设自定义卡 整洁卡 已安装在 Home Assistant 中。
注意不要混淆这两个名字:
Decluttering _templates :这是我宣布我的模型的部分。类型: custom:decluttering-card是在我的仪表板中调用这些模板之一的元素。
模板不替换温度图。 它只是重复使用其配置,将其与我的背景图像相关联。
我将两个元素组合在一个模板中的技巧
这是我与你分享这个蒙太奇的小把戏。
通常,一个整洁模板描述一张带有的卡片。 卡 :, 或单个计划元素与 元素:.
这并不意味着不可能将几个元素组合在一起,但必须经过包含它们的结构。
在我的情况下,我需要两个元素:圆的图像和温度图。
所以我不能直接把两个街区放在下面。 元素:. 我需要一些可以包含两者的东西。
这就是我使用一个小的分流。 类型: 条件.
有条件的... 无条件的!
通常,一个元素 条件 条件 仅在满足某些条件时才用于显示项目。
但最重要的是,它有一些非常实用的东西来满足我的需求:一个列表。 要素:, 我可以在其中放置几个元素。
简化形式的分组原则如下:
元素:类型:条件条件: [] 元素: - 类型:图像 # 我的背景圆圈 - type: custom:appliance-room-climate-card # 我的温度和湿度计
与 条件: [ ], 我没有定义任何要满足的条件:在我的集会中,小组仍然显示。
, 条件 条件 所以我不用它来管理一个条件。 它作为一个容器,把我的两个元素结合在一起。
这就是所有的诡计:只有一个。 元素: 为了整洁,但里面有两个元素!
在使用时,只有一个呼叫 custom:decluttering-card 然后就足以显示圆圈并一起测量。
✘我把模板放在哪里
我把标架放进去 Decluttering _templates : 在仪表板YAML配置的根,在相同的级别。 意见:.
因此,不应将其添加到清单中。 要素: 的计划。
如果你已经有了一节 Decluttering _templates :, 添加模板 temperature_gauge : 在里面,在你的其他模板旁边。
为了做出这个改变,我要去。 RAW 配置编辑器.

我的表的完整模板
以下是我使用的完整代码:
decluttering_templates: gauge_temperature: default: - width : 120 - opacite_background: 0.5 - color_circle:蓝色元素:类型:条件条件: [] 样式:位置:绝对顶部: [[top]] 左: [[左]'宽度:calc([[width]]]px + 10px)高度:calc([[width]]]px + 10px)transform: translate(-50)%, -50%元素: - type: 图像: '/local/house/circle[[color_circle]].png' 样式: 位置:绝对顶部: 50% 左: 50% 宽度 : [[width]px' opacity: "[opacite_fond]]" 转换:translate(-50)%, -50%Z-index: 0 - 类型: custom:appliance-room-climate-card 图标: '' entity_temperature : [[[temperature]]' entity_humidity: [[wet]]' temperature_unit: c 语言:fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false show_graph: false animations: false透明:真名: " " 变体:gauge show_trend: false illustration_size: [[width]' 样式: position: absolute top: 50% 左: 50% 宽度:calc([[[width]]]px + 10px 变换:translate(-50)%, -50%Z-index: 1
我定位组,然后我叠加元素
平面上的位置定义在容器上,坐标传输到模板:
顶部: [[top]] 左: [[左]
这些坐标移动整个:圆圈和仪表仍然相关。
在组中,我关注具有相同属性的两个元素:
位置:绝对顶部: 50% 左: 50% 变换:translate(-50)%, -50%)
这就是允许它们叠加的原因。
我坚持这一点,因为我在测试中遇到了问题:没有这种内部定位,圆圈和地图显示在另一个上面,而不是叠加。
最后,我定义 Z-index: 0 在圆圈和 Z-index: 1 在指标上,以保持信息背后的背景。
用于管理大小的单个变量
我选择只保留一个大小变量: 宽度 宽度.
它的值是一个没有单位的数字,例如:
宽度: 120
这一点很重要,因为参数 插图_size 这张卡在这里期望一个值像 120, 不是 120px 的 :
插图_size : [Width]
因此,对于CSS属性,我直接在模板中添加单元:
宽度 : [width]px
对于卡片及其容器,我保持的宽度大于10像素:
宽度:calc([[width]]px + 10px)
的值 120, 所以我的底线测量 120px 的 宽和地图 130px 的.
我不再需要单独填写两个宽度。
小心,在调用模板时,你必须写信。 宽度 : 120, 不添加 PX 和 PX.
选择圆圈的颜色
为了改变背景的颜色,我设置了变量。 Color_circle 的.
图像路径是用这个值构造的:
图片: "/local/house/circle[[color_circle]].png"
与 Color_circle:蓝色, 模板使用:
/local/house/circlebleu.png
与 Color_circle:橙色, 它使用:
/local/house/cercleorange.png
因此,我可以从上述四个基金中选择:
蓝色 蓝色米 色 米色绿色 绿色橙 色 橙
当然,您必须将相应的文件放在文件夹中。 /config/www/house/, 保留这些名字。
此变量仅更改背景图像。 它不会改变仪表拱门的颜色。
默认值
区块 The Block 默认值 : 定义当我在调用中没有指定它们时使用的值:
默认值: - 宽度 : 120 - opacite_background: 0.5 color_circle:蓝色
如果我不要求任何特别的东西,然后我得到一个蓝色的圆圈。 120px 的 宽,与不透明 0.5.
我可以将这些值替换为特定部分,而无需更改通用模型。
另一方面,温度和湿度实体和坐标 顶部 顶部 以及 左 左 必须填入此模板中的每个调用。
呼唤我的起居室
在列表中 要素: 我的名片 图片 元素, 我现在用这个电话替换两个旧街区:
- type: custom:decluttering-card 模板: jauge_temperature 变量: - temperature: sensor.temperature_salon_temperature_temperature_salon_temperature: sensor.temperature_salon_humidity - top: 60% 左: 47% 宽度: 120-color_circle:蓝色
但是由于我使用默认值,我可以通过以下方式简化:
- type: custom:decluttering-card 模板: jauge_temperature 变量: - temperature: sensor.temperature_salon_temperature_temperature_salon_temperature: sensor.temperature_salon_humidity - top: 60% 左: 47%
在这里,我使用展览的传感器,我把小组放在 60% 从上面和 47% 从左边,我选择橙色背景。
宽度保持在 120. 我将其留在示例中以显示在哪里更改它,但我可以删除此行,因为它已经是默认值。
不透明性也是如此:由于它没有出现在此调用中,模板保留 0.5.

我在其他房间重复使用显示器
要添加另一个计数,我只重复这个小调用块。
我替换两个实体和坐标,然后在必要时调整宽度,颜色或不透明度。
例如,如果我想要一个更小的显示器,我可以使用:
宽度: 80
如果我想让背景更加谨慎:
opacite_fond : 0.3
这些行必须在列表中输入 变量 : 相关呼吁。
我不再需要复制地图或图像的整个布局。
如果我想修改所有仪表通用的选项,我会在模板中而不是在每个房间中进行。
这尤其是我正在寻找的:一个更容易维护的配置,而不会失去适应每个显示器的可能性。
✅我从这个变化中获得了什么
最后,我保留了我已经喜欢的操作:在房子的平面上,温度仍然直接可见。
但现在我有一个更轻的演示,湿度在同一个地方。
多亏了模板,我可以在几个房间中重现这个显示,而不会乘以相同的配置块。
的 小型 转移 条件 条件 允许我保持圆圈并测量在一起,对每件作品进行一次呼叫。
结论 结论
我没有改变我的传感器或仪表板的原理。
我只是用仪表替换了我的旧徽章,添加了一个谨慎的背景,并将其归类为可重用的模型。
结果在视觉上更适合我,并且配置仍然更易于进化。
对我来说,这是使现有仪表板现代化的好方法:改进演示文稿,而无需重新开始。


































