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 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.jsHierdurch 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!
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.
Ähnliche Beiträge:
Werbung*
