干货！最新版HA根据实体状态改变图标颜色的方法

399310471

再走了不少弯路以后，我终于搞定了
请直接往下拉看
另外说一个代码小白可以参考的方法，在配置卡片的效果时，如果不会写，可以找chatgpt给他一个模板，然后说出你的需求，它可以帮你改颜色，改动画，做条件判断的状态。不过可能你需要事先进行一些对话引导他使用CSS格式和HA能用的YAML格式。CHATGPT的知识库截止时间为2021年11月，可能对于写组件的配置文件并不好用。


从2019年10月之后，就一直没有再折腾过HA
最近年底闲暇下来，把HA的重新捡起来，想升级一下。为了安全起见，现在虚拟机中新建了2023.1最新版本的HA，再一步步移植配置文件。
在移植的过程中，发现之前写的根据实体状态改变图标颜色的代码失效了。
找遍了论坛和官方的文档也没有找到相关的描述，想问问各位大佬，如何根据实体状态改变图标颜色。
比如：
我有一个开关，当状态为on 时，图标颜色为绿色
当状态为off时，图标颜色变为红色。

先谢谢各位。

unniversary

用卡片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%

gmshiwoge

可以使用 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判断实体状态 修改颜色

399310471

unniversary 发表于 2023-1-12 00:01
用卡片button card ：
举个例子：
type: custom:button-card

不知道是不是因为button card模组 在最新版的ha中有颜色相关的更新，我这里尝试了4个小时  只有card_mod可以改变卡片图标的颜色  感谢大哥

399310471

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改的 真心没有以前方便

gmshiwoge

你是用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 不行？

399310471

gmshiwoge 发表于 2023-1-13 08:44
你是用button-card卡片的话 下面配置可以修改图标 卡片 名称 状态颜色 大小  圆角  

你昨天说的是正确的  只是我愚钝漏下了一些细节，抱歉
你这次代码我也会尝试。非常感谢

399310471

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;
    }
    }

复制代码

上面的在卡片实体下添加后，做到的效果时，当设备状态为 不可用时，红色闪烁提示
当状态为其他（正常运行）时，绿色渐变色滚动

gmshiwoge

我让CHATGPT帮我写一个 js卡片 他搞不掂  我需求是在lovelace配置一个实体id   卡片显示这个实体的图标CHATGPT写完配置上去各种报错

399310471

gmshiwoge 发表于 2023-1-14 09:05
我让CHATGPT帮我写一个 js卡片 他搞不掂  我需求是在lovelace配置一个实体id   卡片显示这个实体的图标CHAT ...

你要对他进行一部分的训练，一开始我用他会写出一些不支持的函数或者格式（因为他的知识库截止到2021年11月）。你要对它进行一些纠正。