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.

Farbige Icons je nach Sensor-Wert in Home Assistant

Alles, was man nun tun muss, ist in HACS die Frontend-Erweiterung hinzuzufügen. Der Auor der Erweiterung weist explizit darauf hin, dass es für einige Funktionen nötig sein kann, manuell in der configuration.yaml folgenden Code zu ergänzen:

frontend:
  extra_module_url:
    - /local/card-mod.js

Hierdurch wird das benötigte JavaScript zusätzlich eingebunden. Beachte dabei aber, dass der Pfad natürlich korrekt sein muss, was je nach individuellen Einstellungen abweichend vom Beispiel sein kann. Bei mir lautet der Pfad (aufgrund meiner Einstellungen) beispielsweise: /local/community/lovelace-card-mod/card-mod.js

Sobald du über HACS installiert und in der configuration.yaml den genannten Code ergänzt hast, solltest du die YAML-Dateien manuell neu laden und in deinem Browser einen „Hard-Refresh“ machen (bei Chrome ist die Tastenkombination hierfür STRG + SHIFT + R). Anderenfalls kann es sein, dass der Browser noch mit „altem“ Code arbeitet und deine Anpassungen nicht funktionieren! Ebenso kann natürlich ein Neustart von Home Assistant helfen!

Im GitHub-Repository zu der Erweiterung sind zahlreiche Beispiele gegeben, die die Funktionsweise erklären.

Ich zeige im folgenden an einer echten Anpassungen an meinem Dashboard, wie ich die Erweiterung bislang nutze:

Da die PV-Anlage endlich auf dem Dach ist, möchte ich natürlich einfach sehen können, wie es um die aktuell produzierte Strommenge steht. Im Energie-Dashboard kann ich ja die Tageswerte sehen, ich würde aber gerne zwischendurch einfach sehen können, wie viel Strom reinkommt.

Mein Wechselrichter bietet hierfür über die entsprechende Integration eine Entität sensor.rct_power_storage_all_generators_power. Diese Entität gibt die aktuell produzierte Strommenge wider!

Farbige Icons im Home Assistant Dashboard

Je nach produzierter Strommenge, möchte ich nun, dass das Icon eine andere Farbe hat. Liegt die produzierte Strommenge über der üblichen Dauerlast, soll das Icon grün sein, ansonsten rot. Im Screenshot siehst du, dass das Icon bei einer produzierten Strommenge von knapp 61 W rot ist!

Der Code hierfür sieht nun wie folgt aus:

cards:
      - type: entities
        state_color: true
        entities:
        - entity: sensor.rct_power_storage_all_generators_power
          card_mod:
              style: |
                :host {
                  {% if ( states.sensor.rct_power_storage_all_generators_power.state | float < 350 ) %}
                  --card-mod-icon-color: red;
                  {% else %}
                  --card-mod-icon-color: green;
                  {% endif %}
                  }

Ich ergänze eine Lovelace-Card vom Typ Entities und füge hier, wie üblich, die zuvor genannte Entität hinzu. Darauf folgt dann das neue card_mod mit einer If-Else-Abfrage für den Zustand der Entität.

Liegt die Stromproduktion unter 350 W, soll die Farbe des Icons rot sein. Liegt sie drüber, soll es grün sein.

Wie du siehst, spreche ich mit –card-mod-icon-color einen konkreten Zustand an. Die Liste der veränderbaren Zustände ist gigantisch und vermutlich hilft dir ein Blick in die zahlreichen Beispiele, was alles möglich ist!

Erneut keine Raketenwissenschaft – aber in meinen Augen wieder eine nette und einfache Funktionserweiterung des Smarthomes mit Home Assistant! 😉

Dieser Beitrag ist Teil einer kleinen Beitrags-Serie rund um den hass.io Home Assistant.

Nichts mehr zu Home Assistant verpassen!

Follow Home Assistant
( 124 Followers )
X

Follow Home Assistant

E-mail : *
* Ich stimme der Datenschutzerklärung zu!

Werbung*
Angebot
Aqara Bewegungsmelder, Benötigt Aqara Hub,...
Aqara Bewegungsmelder, Benötigt Aqara Hub,...*
Sprachsteuerung: Kompatibel mit Apple HomeKit und Alexa für freies Sprechen; Breiterer Erkennungsbereich: Bis zu 22 6 m bei 170° Betrachtungswinkel
26,99 EUR −8,00 EUR 18,99 EUR
Angebot
Shelly Plus H&T Wireless Luftfeuchtigkeit und Temperatur...
Shelly Plus H&T Wireless Luftfeuchtigkeit und Temperatur...*
Shelly Plus H&T WLAN Temperatur- und Feuchtigkeitssensor mit Display
35,59 EUR
Aqara Tür- und Fenstersensor, Erfordert Aqara Hub,...
Aqara Tür- und Fenstersensor, Erfordert Aqara Hub,...*
Sprachsteuerung: Kompatibel mit Apple Home Kit, Alexa für freies Sprechen
16,59 EUR

*= Preis inkl. MwSt., ggf. zzgl. Versandkosten. Letzte Aktualisierung vor 60 Minuten / Affiliate Links / Bilder von der Amazon Product Advertising API. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.

Foto des Autors
Autor
Olli
Ca. Mitte 30, seit Windows 3.1 Fan von Computern, Gadgets, Handys und allem, was sich irgendwie programmieren lässt. Ich mag es gerne individuell und möglichst einfach, probiere aber auch gerne neue Dinge sofort aus. :)

Schreibe einen Kommentar

Die folgenden im Rahmen der DSGVO notwendigen Bedingungen müssen gelesen und akzeptiert werden:
Durch Abschicken des Formulares wird dein Name, E-Mail-Adresse und eingegebene Text in der Datenbank gespeichert. Für weitere Informationen wirf bitte einen Blick in die Datenschutzerklärung.