Hintergrund abhängig vom Wert des Sensors ändern

Heli-wolf · 26. Juli 2024 um 17:11

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??

sirector · 27. Juli 2024 um 21:22

Hast du mal versucht ob das überhaupt funktioniert?

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

Bacardi · 28. Juli 2024 um 06:56

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

Verwendung einer Variable: Um den Wert des Sensors nur einmal zu laden, habe ich eine Variable humidity verwendet.
Korrekte Operatoren: Die Operatoren | und int wurden korrigiert und richtig formatiert.
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 %}
    }

Heli-wolf · 28. Juli 2024 um 09:01

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?

Bacardi · 28. Juli 2024 um 11:02

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

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.

Heli-wolf · 28. Juli 2024 um 14:32

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

newland · 19. Januar 2026 um 11:02

Hallo, finde den Tipp hier absolut super!
Konnte ihn bei mir auch erfolgreich umsetzen.

Frage dazu: kann man auch andere Parameter auslesen?
Ich habe z. B. hier

type: entity
entity: sensor.luxtronik_200401_0df_error_reason
attribute: timestamp

mit folgendem Wert:

Wenn das Datum sich verändert, würde ich gerne den Hintergrund oder die Schrift einfärben.

Bacardi · 19. Januar 2026 um 12:28

Als schnelles Beispiel: Hintergrund werde orange wenn Haustür sich in letzten 20 min änderte.

Mein binary_sensor.nuki_haustur1_locked → Dein sensor.luxtronik_200401_0df_error_reason

type: entity
entity: binary_sensor.nuki_haustur1_locked
attribute: timestamp
card_mod:
  style: |
    {% set aenderung_status = states.binary_sensor.nuki_haustur1_locked.last_changed %}
    {% set aenderung_innerhalb_letzter_min = 20 %}
    {% if (as_timestamp(now()) - as_timestamp(aenderung_status)) < aenderung_innerhalb_letzter_min * 60 %}
      ha-card {
        background-color: orange;
        font-weight: bold;
      }
    {% endif %}

Die Frage ist: Wie lange soll es eingefärbt sein?

Ich habe pragmatisch im Beispiel einen Zeitraum gesetzt. Das setzt voraus innerhalb dieses Zeitraum schaut man auch auf das Dashboard.
Man könnte auch sagen, Du mußt einen Schalter irgendwo tippen und erst dann wird die Farbe wieder normal.
Ich selbst lasse HA mir Mails schicken wenn ein wichtiges Gerät Fehler wirft. Farbliche Änderungen nutze ich auch aber die werden automatisch wieder normal wenn Zustand normal.

Mach bitte einen neuen Post auf wenn Du eine für Dich gültige Lösung finden möchtest.

newland · 19. Januar 2026 um 13:40

Die Einfärbung soll erst einmal dauerhaft bestehen bleiben. Will es jetzt nicht zu kompliziert machen. Ich kann ja, nachdem ich die Ursache überprüft habe, meine Parameter im Quellcode wieder anpassen.

Hab jetzt folgendes hinterlegt:

type: entity
entity: sensor.luxtronik_200401_0df_error_reason
attribute: timestamp
grid_options:
  columns: full
card_mod:
  style: >
    ha-card {

    { if state_attr('sensor.luxtronik_200401_0df_error_reason', "timestamp") =
    "2025-08-15 13:02:51+02:00" %}
      background-color: green;
       { % else % }
      background-color: yellow;
       { % endif % }
    }

Nur scheint er den Wert nicht richtig zu erkennen, weil der Hintergrund gelb wird.
In den DevTools liefert

{{state_attr('sensor.luxtronik_200401_0df_error_reason', "timestamp")}}

aber 2025-08-15 13:02:51+02:00.

Warum soll ich einen neuen Post machen? Soll man nicht lieber an bestehende Posts anknüpfen?

Edit: hab den Quellcode nochmals angepasst, weil ich eigentlich bemerken will, wenn der Fehlerspeicher einen neuen Eintrag erhält.
Funktioniert trotzdem nicht.

Bacardi · 19. Januar 2026 um 14:37

Mit “scheint” triffst Du auf den Punkt. Das dieser Jinja Code funktioniert ist eher eine Zufälligkeit der HA Engine.

= → == (nur so wird verglichen)
{ % → {% (kein Leezeichen dazwischen) und ebenso die abschließenden %}

Den Timestring als Vergleich zu nehmen hat Charme weil Du mußt den Code ändern nachdem Du den Fehler beseitigt hast, sonst wird es nie grün. Aber es ist etwas fragil weil Du unbeabsichtigt immer Code Fehler machen könntest.

Bei diesem allgemein formulierten Titel kann man debattieren …
Ich finde neuen Post besser aber soll der Eigentümer @Heli-wolf entscheiden

newland · 19. Januar 2026 um 14:40

Edit: inspiriert von folgender Seite habe ich jetzt eine Lösung gefunden:

card_mod:
  style: >
    ha-card { {% if state_attr('sensor.luxtronik_200401_0df_error_reason',
    'timestamp') == '2025-08-15 13:02:51+02:00' %} background-color: green; {%
    else %} background-color: yellow; {% endif %} .header .name { color: black;
    font-size: 20px; } .info .value { color: blue; font-size: 20px; }    
    .header .icon { color: red; } ha-card { --mdc-icon-size: 30px; }    .info
    .measurement { color: orange; font-size: 30px; } }

Warum es bei mir die Formatierung im Quellcode verschiebt, habe ich allerdings noch nicht verstanden.

newland · 19. Januar 2026 um 14:43

Ja, die Gefahr verstehe ich.
Aber wie sollte ich am besten vorgehen? Mir ist einfach wichtig, sofort zu sehen, wenn ich das Dashboard aufrufe, dass die Wärmepumpe einen Fehler produziert hat.
Das ist derzeit weder an der WP direkt, noch mit diversen Apps sofort ersichtlich. Und das ist ärgerlich.

Mit der o. g. Lösung sehe ich zumindest sofort, wenn der Hintergrund nicht mehr grün ist.
Wenn es natürlich eine elegantere Lösung gibt, ohne im Quellcode pfuschen zu müssen, immer her damit.

Bacardi · 19. Januar 2026 um 15:04

Vorstellbar wäre mit der Sichtbarkeit einer Karte auf der Startseite zu arbeiten.
Als Kriterium das Fehler code Attribut, daß Du vorher in Deinem Code verwendet hattest. Wie ist der wenn kein Fehler vorliegt?
Da die Sichtbarkeit eine Entrity verlangt, müßte man vorher einen Template Helfer anlegen als
{{state_attr('sensor.luxtronik_200401_0df_error_reason', "code") == 'was immer bei dem Sensor steht wenn kein Fehler vorliegt'}}
Dieser Helfer ergäbe true oder false.
Das wäre dann die Entity mit der Du die Sichtbarkeit der Karte auf der Startseite steuern könntest.
Wenn Du es einfach haben willst, brauchst Du dann nur wenig Card_mod arbeiten

card_mod:
  style: |
      ha-card {
        background-color: yellow;
      }

Wenn Fehler → dann gelbe Karte auf Startseite
Wenn kein Fehler → keine Karte auf Startseite

newland · 19. Januar 2026 um 16:16

Es liegt immer ein Fehler vor, weil die alten nicht gelöscht werden. Es wird lediglich ein neuer Fehler zusätzlich angezeigt. An der Wärmepumpe zeigt er mir die letzten 5 Fehler an. In HA zeigt er mir nur einen an. Keine Ahnung, ob man das ausweiten kann.
Ziel wäre, wenn ein neues Datum erscheint, dass dann eine Karte / Hintergrundfärbung o. ä. erscheint. Ich schau mir deinen Vorschlag mal in Ruhe an. Erstmal danke.

Bacardi · 19. Januar 2026 um 17:16

Ok, hier ein Vorschlag.

Lege Folgendes an:

Text Helfer input_text.letztes_fehlerdatum
Eine Automatisation

Zusammenfassung

alias: 1 forum timestamp change
description: "## Schreibt bei neuem Datum dieses in einen Texthelfer"
triggers:
  - trigger: state
    entity_id:
      - sensor.luxtronik_200401_0df_error_reason
    attribute: timestamp
conditions: []
actions:
  - action: input_text.set_value
    metadata: {}
    target:
      entity_id: input_text.letztes_fehlerdatum
    data:
      value: "  {{state_attr('sensor.luxtronik_200401_0df_error_reason', 'timestamp')}}"
mode: single

Auf Deiner Startseite eine custom:mushroom-template-card Karte mit folgendem Code

Zusammenfassung

type: custom:mushroom-template-card
primary: Letzter Fehler am
secondary: |
  {{ states('input_text.letztes_fehlerdatum') }}
icon: mdi:check-bold
entity: sensor.luxtronik_200401_0df_error_reason
vertical: true
tap_action:
  action: call-service
  service: input_text.set_value
  target:
    entity_id: input_text.letztes_fehlerdatum
  data:
    value: Erledigt
color: >
  {% if states('input_text.letztes_fehlerdatum') != 'Erledigt'
  %}
    red
  {% else %}
    green
  {% endif %}
features_position: bottom
visibility:
  - condition: state
    entity: input_text.letztes_fehlerdatum
    state_not: Erledigt
card_mod:
  style: |
    ha-card {
      {% if states('input_text.letztes_fehlerdatum') != 'Erledigt' %}
        background-color: yellow;
      {% endif %}
    }

Funktionsweise

Sobald ein neues Fehlerdatum gemeldet wird, wird dieses über die Automatisation in den Text Helfer gespeichert.
Dadurch wird auf der Startseite die Karte sichtbar mit gelbem Hintergrund

image296×163 3.55 KB
Du untersuchst den Fehler und abschließend klickst Du auf das Icon
Das Icon schreibt in den Text Helfer ‘Erledigt’
Das Icon wird wieder normal

image286×160 2.41 KB
Die Karte wird “unsichtbar”.

Wenn Du Dich wohler damit fühlst, kannst Du aus dem Kartencode auch

visibility:
  - condition: state
    entity: input_text.letztes_fehlerdatum
    state_not: Erledigt

entfernen. Dann ist die Karte immer sichtbar.

newland · 19. Januar 2026 um 21:48

Hört sich super an. Vielen Dank.

Muß ich mir am Wochenende mal in Ruhe anschauen.

newland · 23. Januar 2026 um 13:42

H

Hm, soweit hat alles geklappt. Bis auf das Anklicken. Da tut sich nichts.
Kann man das irgendwie nachvollziehen, ob der Eintrag gesetzt wird?
Oder woran der Fehler liegt?

Edit: hab’s gefunden. Da waren zuviele “input_text” enthalten. Die habe ich jetzt entfernt.

type: custom:mushroom-template-card
primary: Letzter Fehler am
secondary: |
  {{ states('input_text.letztes_fehlerdatum_wp') }}
icon: mdi:check-bold
entity: sensor.luxtronik_200401_0df_error_reason
vertical: true
tap_action:
  action: call-service
  service: input_text.set_value
  target:
    entity_id: input_text.letztes_fehlerdatum_wp
  data:
    value: Erledigt
color: |
  {% if states('input_text.letztes_fehlerdatum_wp') != 'Erledigt' %}
    red
  {% else %}
    green
  {% endif %}
features_position: bottom
card_mod:
  style: |
    ha-card {
      {% if states('input_text.letztes_fehlerdatum_wp') != 'Erledigt' %}
        background-color: yellow;
      {% endif %}
    }
grid_options:
  columns: full

alias: Wärmepumpe Fehlerdatum
description: "## Schreibt bei neuem Datum dieses in einen Texthelfer"
triggers:
  - trigger: state
    entity_id:
      - sensor.luxtronik_200401_0df_error_reason
    attribute: timestamp
conditions: []
actions:
  - action: input_text.set_value
    metadata: {}
    target:
      entity_id:
        - input_text.letztes_fehlerdatum_wp
    data:
      value: "  {{state_attr('sensor.luxtronik_200401_0df_error_reason', 'timestamp')}}"
mode: single

Jetzt läuft es. Danke.

Nur interessehalber: wie läuft das, wenn man sich per E-Mail bei Fehlermeldungen benachrichtigen lassen will? Ist das sehr aufwendig?

Bacardi · 23. Januar 2026 um 13:56

Das wirst Du nur herausfinden, wenn Du es probierst. Einmal eingerichtet, ist der Versand sehr leicht.

newland · 23. Januar 2026 um 14:06

Hm, will nicht zu viel belästigen. Aber kurze Frage: Kann man den Kartenhintergrund auch auf grün statt weiß setzen, wenn kein Fehler vorliegt?

card_mod:
  style: |
    ha-card {
      {% if states('input_text.letztes_fehlerdatum_wp') != 'überprüft' %}
        background-color: red;  
        {% else %}
        green
      {% endif %}
    }

Klappt so zumindest nicht.

Bacardi · 23. Januar 2026 um 14:41

Auch nicht, wenn Du den Befehl ausschreibst: background-color: green;?

Thema		Antworten	Aufrufe
Mal wieder: Hintergrund von Karten ändern Dashboard/Cards/Frontend	19	2893	2. November 2025
Textfarbe in Karte bei negativen Zahlen Allgemein	7	92	20. Mai 2026
Hintergrund Farbe von Mushroom Template Card Allgemein templating , yaml	9	236	27. Oktober 2025
Card-Mod: Icon Farbe anhand von Zustands-Wert ändern Dashboard/Cards/Frontend	88	17655	14. Februar 2026
Wie einfach eine Kachel-Farbe farblich anpassen? Dashboard/Cards/Frontend	7	118	16. März 2026

Hintergrund abhängig vom Wert des Sensors ändern

Lege Folgendes an:

Funktionsweise

Verwandte Themen