干货!最新版HA根据实体状态改变图标颜色的方法
本帖最后由 399310471 于 2023-1-13 21:11 编辑再走了不少弯路以后,我终于搞定了
请直接往下拉看
另外说一个代码小白可以参考的方法,在配置卡片的效果时,如果不会写,可以找chatgpt给他一个模板,然后说出你的需求,它可以帮你改颜色,改动画,做条件判断的状态。不过可能你需要事先进行一些对话引导他使用CSS格式和HA能用的YAML格式。CHATGPT的知识库截止时间为2021年11月,可能对于写组件的配置文件并不好用。
从2019年10月之后,就一直没有再折腾过HA
最近年底闲暇下来,把HA的重新捡起来,想升级一下。为了安全起见,现在虚拟机中新建了2023.1最新版本的HA,再一步步移植配置文件。
在移植的过程中,发现之前写的根据实体状态改变图标颜色的代码失效了。
找遍了论坛和官方的文档也没有找到相关的描述,想问问各位大佬,如何根据实体状态改变图标颜色。
比如:
我有一个开关,当状态为on 时,图标颜色为绿色
当状态为off时,图标颜色变为红色。
先谢谢各位。
用卡片button card :
举个例子:
type: custom:button-card
entity: light.cuco_sl4a_cef9_light#我的实体
show_state: true
aspect_ratio: 1/1
icon: hue:gradient-lightstrip
name: 书房灯
color: rgb(255,255,255)
color_type: card
tap_action:
action: toggle
state:
- value: 'on'
styles:
icon:
- color: rgb(255,165,0)
- value: 'off'
styles:
card:
- background-color: null
icon:
- color: rgb(255,255,255)
styles:
card:
- border-radius: 9% 可以使用 card_mod
type: entities
card_mod:
style: |
ha-card {
color: red;
}
entities:
- sensor.hacs
- sensor.state
- sensor.state_2
- sensor.state_3
- sensor.state_4
title: 传感器
card_mod可以使用或修改css 你在card_mod上面做一下if判断实体状态 修改颜色 unniversary 发表于 2023-1-12 00:01
用卡片button card :
举个例子:
type: custom:button-card
不知道是不是因为button card模组 在最新版的ha中有颜色相关的更新,我这里尝试了4个小时只有card_mod可以改变卡片图标的颜色感谢大哥 本帖最后由 399310471 于 2023-1-12 15:31 编辑
gmshiwoge 发表于 2023-1-12 08:54
可以使用 card_mod
type: entities
card_mod:
card_mod改变图标颜色可以,但是也有问题,区间取色例如 0-25为绿色 25-50黄色 50-75 橙色 75-100红色的这种写法不起作用,也不知道哪里有问题。
entities:
- entity: sensor.computer_cpu_usage
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set state = states(config.entity).state %}
{% if state <= 50 %}
green;
{% elif state > 50 and state <= 100 %}
yellow;
{% else %}
red;
{% endif %}
}
不能改变我的实体的颜色,这HA改的 真心没有以前方便 你是用button-card卡片的话 下面配置可以修改图标 卡片 名称 状态颜色 大小圆角
icon: >
[[[ return (entity.state === 'on' || entity.state === 'home') ?
'mdi:lightbulb-on' : 'mdi:lightbulb'; ]]]
hold_action:
repeat: 800
action: more-info
haptic: selection
tap_action:
action: toggle
haptic: homeassistant
styles:
icon:
- width: 2vw
- top: 0%
- color: >
[[[ return (entity.state === 'on' || entity.state === 'home') ?
'rgba(255, 255, 255, 1)' : 'rgba(47, 47, 47, 1)'; ]]]
card:
- width: 18.7vw
- height: 7vw
- background-size: 110% 100%
- background-image: >
[[[ return (entity.state === 'on' || entity.state === 'home') ?
'url("/local/image/light_1_1.png")' :
'url("/local/image/light_2_1.png")'; ]]]
- opacity: 1
- borderRadius: 2vw
name:
- font-weight: bold
- font-size: 15px
- padding-bottom: 6px
- color: >
[[[ return (entity.state === 'on' || entity.state === 'home') ?
'rgba(255, 255, 255, 1)' : 'rgba(56, 56, 56, 1.0)'; ]]]
你用card_mod 写
rgba(255, 255, 255, 1)或者#000000 不行?
gmshiwoge 发表于 2023-1-13 08:44
你是用button-card卡片的话 下面配置可以修改图标 卡片 名称 状态颜色 大小圆角
你昨天说的是正确的只是我愚钝漏下了一些细节,抱歉
你这次代码我也会尝试。非常感谢 card_mod:
style: |
ha-card {
{% if states('sensor.mikrotikyun_xing_shi_chang') == 'unavailable' %}
animation: blink 1s linear infinite;
{% else %}
background: linear-gradient(to right, #00ff00, #90ee90, #ffffff);
background-size:200% auto;
animation:gradient 10s ease infinite;
{% endif %}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes blink {
0% {
background-color: #ff0000;
}
49% {
background-color: #ff0000;
}
50% {
background-color: #ffffff;
}
100% {
background-color: #ffffff;
}
}
上面的在卡片实体下添加后,做到的效果时,当设备状态为 不可用时,红色闪烁提示
当状态为其他(正常运行)时,绿色渐变色滚动 我让CHATGPT帮我写一个 js卡片 他搞不掂我需求是在lovelace配置一个实体id 卡片显示这个实体的图标CHATGPT写完配置上去各种报错 gmshiwoge 发表于 2023-1-14 09:05
我让CHATGPT帮我写一个 js卡片 他搞不掂我需求是在lovelace配置一个实体id 卡片显示这个实体的图标CHAT ...
你要对他进行一部分的训练,一开始我用他会写出一些不支持的函数或者格式(因为他的知识库截止到2021年11月)。你要对它进行一些纠正。
页:
[1]
2