Farbige Icons je nach Sensor-Wert in Home Assistant

Wenn man sich im Dashboard von Home Assistant Werte anzeigen lässt, scheinen einen diese zu interessieren. Wäre es dann nicht toll, wenn man die Werte in Abhängigkeit von ihrem Zustand farbig anders gestalten können, so dass man bereits anhand der Farbe eines Wertes erkennt, wie der Zustand grob ist (also beispielsweise gut oder schlecht)? Ich habe eine HACS- Frontenderweiterung gefunden, die einem genau solche Dinge erlaubt! Die Frontend-Erweiterung „card-mod“ erlaubt es einem über CSS nahezu alle Lovelace-Komponenten anzupassen und für dieses Anpassen können eigene Logiken (wie Vergleiche von Werten) genutzt werden. Alles, was man nun tun muss, ist in HACS…

Hallo Olli, danke für diese Lösung. Ich habe dein Beispiel aufgenommen, um meine Solarproduktion ebenfalls farbig darstellen zu lassen. Bei mir habe ich aber 4 Stufen eingebaut. Das Problem ist nun, das die Anzeigen nicht aktualisieren, das heißt beim unterschreiten der Marken wird nur nach einem erneuten Aufruf des „Dashboardes“ oder des Scriptes die neue Farbe korrekt angezeigt. Hast Du dafür vielleicht eine Lösung? Gruß Hartmut

Hi Hartmut, dazu fällt mir ad-hoc tatsächlich keine Lösung ein! VG Olli

Danke für die Antwort. Als schnelle Lösung hab ich ein Chrome AdOn - „Automatische Seitenaktualisierung“ installiert. Dadurch wird je nach Eiinstellung des Zeitfaktors die Seite aktualisiert. Über den Umweg klappt es erstmal.

Hallo Olli, ich habe eine Lösung gefunden. cards: - cards: - cards: - type: entity icon: mdi:alarm-light entity: sensor.solar_141_power name: GesamtErtrag state_color: orange show_header_toggle: orange card_mod: style: | ha-card { color: teal; } ha-card { {% if ( states.sensor.solar_141_power.state | float < 149 ) %} background: red; {% elif ( states.sensor.solar_141_power.state | float < 299 ) %} background: blue; {% elif ( states.sensor.solar_141_power.state | float < 399 ) %} background: yellow; {% elif ( states.sensor.solar_141_power.state | float < 499 ) %} background: pink; {% elif ( states.sensor.solar_141_power.state | float < 600 ) %} background: green; {% endif %} } - type: entity entity: sensor.ahoy_irradiation_1 - type: entity entity: sensor.ahoy_irradiation_2 type: custom:swipe-card type: horizontal-stack type: vertical-stack Damit nimmt der Background die Farbe an und durch das Einbinden der sensor.ahoy_irradiationen aktualisiert der Background entsprechend den eingestellten Werten. Gruß Hartmut