Hintergrund abhängig vom Wert des Sensors ändern

Dashboard/Cards/Frontend
1

Ich habe versucht bei meinem Dashboard eine card-mod Karte mit einem Sensor zu verbinden und möchte den Hintergrund der Card abhängig vom Wert farblich verändern, aber ich bekomme die farbliche Änderung des Hintergrundes einfach nicht hin.
Iconsänderung, Textfarbe ändern alles funktioniert aber der Hintergrund kann nur in einer Farbe dargestellt werden und ändert sich nicht auf Grund des Dateninhaltes.
Ich möchte mir die Feuchtigkeit im Keller anzeigen lassen und dabei die Farbe der Dashboardcard wie folgt einrichten:
bis 60% - grün
von 61 bis 75 % - gelb
ab 76 % rot
Folgende Bedingung habe ich eingefügt. - Funktioniert als Templatetest in Homeassistant.

green
{% elif (int(states('sensor.feuchtigkeit_keller'))) | int >60  and (int(states('sensor.feuchtigkeit_keller'))) | int <=75  %}
yellow
{% elif (int(states('sensor.feuchtigkeit_keller'))) | int >75 %}
red
{% endif %}

so schaut der Yaml Code in meiner Dashboard Card aus:

entity: sensor.feuchtigkeit_keller
card_mod:
  style: |
    :host {
      {% if (int(states('sensor.feuchtigkeit_keller'))) | <=60 %}
       background: green;
       {% elif (int(states('sensor.feuchtigkeit_keller'))) | int >60  and         (int(states('sensor.feuchtigkeit_keller'))) | int <=75  %}
       background: yellow;
       {% elif (int(states('sensor.feuchtigkeit_keller'))) | int >75 %}
       background: red;
       {% endif %}

aber der Hintergrund bleibt unverändert WEISS.
Was mache ich da falsch??

2

Hast du mal versucht ob das überhaupt funktioniert?

card_mod:
  style: |
    :host {
      background: red;
    }
3

Mein Tipp, nutze immer ChatGPT um Deinen Code gegenzuprüfen. Nahm gleich 3 Änderungen vor

  1. Verwendung einer Variable: Um den Wert des Sensors nur einmal zu laden, habe ich eine Variable humidity verwendet.
  2. Korrekte Operatoren: Die Operatoren | und int wurden korrigiert und richtig formatiert.
  3. Hintergrundfarbe: Der CSS-Eigenschaftsname ist background-color statt background.

Das alleine brachte aber noch nicht die Lösung. :host geht nicht - hab etwas probiert

type: entity
entity: sensor.feuchtigkeit_keller
card_mod:
  style: |
    {% set humidity = states('sensor.feuchtigkeit_keller') | int %}
    ha-card {
      {% if humidity <= 60 %}
        background-color: green;
      {% elif humidity > 60 and humidity <= 75 %}
        background-color: yellow;
      {% elif humidity > 75 %}
        background-color: red;
      {% endif %}
    }
4

Vielen Dank - perfekt. Jetzt funktioniert es so wie ich es wollte.

Aber wie setzt du ChatGPT ein. Ich habe mit ChatGPT noch überhaupt keine Erfahrung und auch nicht damit gearbeitet. Kannst du mir da bitte ein bisschen weiterhelfen?

5

Ich nutze in ChatGPT einen der individuellen GPT’s “HomeAssistant Helper” oder bei Datenbanken relevanten Fragen auch gerne “SQL Expert”.

In Deinem Fall habe ich dann Dein Script hineinkopiert und gesagt “improve”. Sehr oft nehme ich danach auf dem PC das Tool Winmerge und vergleiche vorher und nachher und versuche zu verstehen und die nächsten Schritte hängen dann davon ab was ich will. ChatGPT liefert selten gleich beim ersten Mal den richtigen Code und man muß dann probieren. Je mehr Erfahrung Du hast, je besser erkennst Du Unregelmäßigkeiten und kannst direkt nachfragen. Manchmal nehme ich ein Stück Code heraus und bitte um extra Erklärung und um ein Beispiel. Manchmal ist es auch sinnvoll eine neue Session aufzumachen wenn die letzte in die falsche Richtung ging. Damit verhinderst Du, daß er seine Antworten auf die vorigen Kommentare bezieht was ja sonst eher gewünscht ist.

Jetzt der beste Tipp: Einfach anfangen und eigene Erfahrungen sammlen :wink:

Gutes Gelingen!

PS: Denk an den Datenschutz, den es bei ChatGPT nur bedingt gibt. Wenn Du Interna hast, die keiner kennen soll, würde ich die vorher mit Suchen und Ersetzen umbenennen.

6

OK, vielen Dank für die Anleitung. Werde mich mal ein bisschen mit diesem Thema beschäftigen.