Kolor ikon zależnie od stanu

Zainspirowany nowym filmem @artur -a próbuję ustawić kartę tak aby zależnie od tego czy otwarte są okna czy zamknięte zmieniała kolor ikona. Tak wpisałem w karcie:

type: entities
style: |
  ha-card {
    icon_color: {% if state('binary_sensor.openclose_26') | int = on} 
                  green
               {% else %}
                  red
               {% endif %}
               ;
         }
entities:
  - entity: binary_sensor.openclose_26

ale niestety nie działa zmiana koloru ikon.
Czy ktoś z Was ma już może to w jakiś sposób rozwiązane?

@rafkan do zmiany koloru ikony spróbuj użyć --paper-item-icon-color:, który występuje w host. Przykład poniżej.

style: |
      :host {
        --paper-item-icon-color:
          {% if states('nazwa encji')|int < 50 %}
            blue
          {% else %}
            red
          {% endif %}
          ;
      }

@artur sensor ma stan on lub off, czyli wpis poniżej tak powinien wyglądać?

|int = on} 

jeżeli on/off to tak możesz

{% if is_state(‘encja’, ‘on’) %} a chyba też powinno zadziałać

{% if is_state(‘encja’) %}

Jeśli ktoś będzie szukał to zmiana koloru ikon ze zmiana stanu wygląda tak:

entities:
  - entity: nazwa_encji
style: |
  :host {
    --paper-item-icon-color:
      {% if is_state('nazwa_encji', 'on') %} red {% else %} green {% endif %};
  }
state_color: false
type: glance

Dzieki @artur

1 Like

Mam taki kod gdzie to mam wkleić bo w żaden sposób nie chce mi to zadziałać jako przycisk.

cards:
  - entity: script.rolety_podnoszenie
    hold_action:
      action: more-info
    icon: 'mdi:window-shutter-open'
    show_icon: true
    show_name: true
    show_state: false
    tap_action:
      action: toggle
    type: button
    icon_height: 50px
  - entity: script.rolety_opuszczanie
    hold_action:
      action: more-info
    icon: 'mdi:window-shutter'
    show_icon: true
    show_name: true
    show_state: false
    tap_action:
      action: toggle
    type: button
    icon_height: 50px
  - type: button
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    show_icon: true
    show_name: true
    show_state: false
    entity: script.brama_uchylanie
    icon_height: 50px
type: horizontal-stack

@Spatz nie za bardzo wiem co ma wspólnego Twój wpis z tym tematem, dlatego napisz jaki efekt chcesz osiągnąć, jaki pojawia się błąd?

Chce zmienić kolor ikon które zaznaczyłem
Google Photos
Są zawsze Białe i nigdy nie wiem czy faktycznie kliknolem.

@Spatz znam dwie metody, pierwsza to do ustawień karty dopisujesz:

 state_color: true

i gdy masz stan na “on” ikona jest koloru żółtego a gdy “off” białego.
Druga metoda to przykład z mojego postu - gdzie dobrowolnie ustawiasz sobie kolory stanów.

Widocznie z tymi kartami nie działają te komendy

Wykopalisko, ale nie napisałeś czy i jak rozwiązałeś problem.

To nie problem kart, tylko użytych w nich encji.
“Z automatu” zaszytą zmianę koloru mają encje z domen switch, binary_sensor (oraz wszystkie jego pochodne np. door) oraz light (tu jest wręcz cała paleta - bo w zależności od typu może być obrazowana jasność i/lub kolor), być może jakąś domenę pominąłem, ale zasadniczo we wszystkich pozostałych trzeba samodzielnie zadbać o kolor ikony.

Witam,
Utworzyłem nowy sensor dla drzwi tarasowych który ma 3 stany (otwarte, uchylone, zamknięte). Niestety poległem na zmianie koloru ikony gdy drzwi są otwarte. Czy ktoś byłby w stanie napisać co robię nie tak?

capture|690x291, 50%

Poniżej masz przykład zmiany ikony i koloru:

entities:
  - entity: binary_sensor.openclose_58
    name: Górny zamek w drzwiach
    state_color: false
    card_mod:
      style: |
        :host {
         --card-mod-icon: 
           {% if is_state('binary_sensor.openclose_58', 'on') %} 
             mdi:lock-open-variant-outline;
           {% else %}
             mdi:lock-outline;
           {% endif %}
         --card-mod-icon-color:
           {% if is_state('binary_sensor.openclose_58', 'off') %}
             green;
           {% else %}
             red;
           {% endif %}
        }
    secondary_info: last-changed
type: entities

oczywiście w miejsce “binary_sensor.openclose_58” podstaw Swoją encję oraz ikony które chcesz.

Dzięki za pomoc, wszystko działa.
Pozdrawiam

Próbuję ustawić kolor ikony zależnie od ilości tonera w drukarce w biurze. Konica Minolta Bizhub C224e podaje jako encję ilość tonera, ale coś mi nie idzie… przykład poniżej

entities:
  - entity: sensor.konica_minolta_bizhub_c224e_toner_cartridge_y
    name: Toner K
    state_color: true
    card_mod:
      style: |
        :host {
         --card-mod-icon: 
           {% if is_state('sensor.konica_minolta_bizhub_c224e_toner_cartridge_y', '< 10') %} 
             red;
           {% else %}
             blue;
           {% endif %}
        }
type: entities
state_color: false

Co jest nie tak?

Nie działa ponieważ zastosowałeś złą funkcję.
Poniższy kod powinien zadziałać:

card_mod:
   style: |
     :host {
         --paper-item-icon-color:
          {% if states('sensor.konica_minolta_bizhub_c224e_toner_cartridge_y') |int < 10 %}
                red
          {% else %}
                blue
          {% endif %}
              ;
           }

Wielkie dzięki, działa! A jak zrobić jak mam 4 tonery, żeby to była reguła dla wszystkich 4, bo tak nie dziala?

card_mod:
  style: |
    :host {
        --paper-item-icon-color:
         {% if states('entities') |int < 10 %}
               red
         {% else %}
               blue
         {% endif %}
             ;
          }
type: entities
entities:
  - entity: sensor.konica_minolta_bizhub_c224e_toner_cartridge_c
    secondary_info: last-updated
  - entity: sensor.konica_minolta_bizhub_c224e_toner_cartridge_m
    secondary_info: last-updated
  - entity: sensor.konica_minolta_bizhub_c224e_toner_cartridge_y
    secondary_info: last-updated
  - entity: sensor.konica_minolta_bizhub_c224e_toner_cartridge_k
    secondary_info: last-updated
title: Konica Minolta
state_color: true
show_header_toggle: false

Najprościej dla każdej encji osobny wpis lub spróbuj utwórzyć grupę z tych tonerów.

Ok, na jednej karcie nie potrafię tego zrobić, w stosie pionowym zrobiłem. Dzięki

Kilka przykładów kart drukarki, coś na pewno znajdziesz
https://community.home-assistant.io/t/ipp-printer-sensors-with-custom-button-card/250719

Moja karta . Screenshot - 07.08.2021 , 17_26_42