Fehler und Warnungen im Home Assistant Dashboard richtig anzeigen

ACHTUNG: Nur für Kurze Zeit bis Mitte Januar 2025 gibt es nicht nur 50 Euro sondern 100 Euro für dich und mich bei Tibber als Prämie! Schau einfach ans Ende dieses Artikels wenn Du herausfinden willst, ob ein dynamischer Stromtarif etwas für Dich sein könnte.
― Joachim

Zum Aktivieren des Videos musst Du auf das Bild klicken. Ich möchte Dich darauf hinweisen, dass durch die Aktivierung Daten an YouTube übermittelt werden.

Schon wieder vergessen die Pflanzen zu giessen? Die Mülltonne läuft über, das E-Auto ist leer? Und beim Kühlschrank bleibt die Tür manchmal offen? Und das obwohl ihr alle Daten irgendwo in Eurem Smarthome habt? Ich zeige Euch in drei Schritten wie ihr supereinfach eine solche Darstellung in Eurer Home Assistant Dashboard integrieren könnt und damit Warnungen in Eurem Smarthome nie mehr überseht:

Voraussetzungen

Für diesen Tipp müsst ihr die Erweiterung card-mod aus dem Home Assistant Community Store (HACS) installieren. Das geht ganz einfach über den Eintrag HACS in der Seitenleiste. In der Liste der Erweiterungen sucht ihr nach card-mod und klickt dann zweimal auf Herunterladen. Danach muss die Home Assistant Oberfläche neu geladen werden, klick also auf Neu laden und schon ist die Erweiterung aktiv.

CSS Style anpassen

Mit der Erweiterung könnt ihr die Darstellung Eurer Dashboard Elemente verändern. Um beispielsweise eine rote Warnung mit weißer Schrift statt einer neutralen Karte anzuzeigen, könnt ihr folgendes YAML Snippet bei Eurer Karte ergänzen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


card_mod:
  style: |
    ha-card {
      background-color: rgba(255,10,10,1);
      --primary-color: white;
      --paper-item-icon-color: white;
      --primary-text-color: white;
      --switch-checked-track-color: white;
      --switch-checked-button-color: white;
    }    

Die hier verwendeten CSS-Variablen (Erkennbar am “–” Präfix) ermöglichen die Anpassung an Home Assistant-spezifische Elemente, wie Icons oder Schalterfarben, ohne tiefgreifendes CSS-Wissen.

Bedingte Anzeige aktivieren

Die Karten sollen natürlich nur anzeigt werden, wenn tatsächlich ein Fehler oder eine Warnung vorliegt. Nutzt also einen entity-filter und definierte eine Bedingung. Hier im Beispiel soll die Temperatur des Kühlschranks nur angezeigt werden, wenn sie über 8°C liegt.

1
2
3
4
5
6


type: entity-filter
entities:
  - entity: sensor.kuhlschrank
    conditions:
      - condition: numeric_state
        above: 8

Die vollständige Definition sieht dann so aus und umfasst die Entities mit den Conditions und natürlich unserem card-mod style:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


type: entity-filter
show_empty: false
entities:
  - entity: sensor.kuhlschrank
    conditions:
      - condition: numeric_state
        above: 8
conditions:
  - condition: state
    state: null
card:
  type: entities
  card_mod:
    style: |
      ha-card {
        background-color: rgba(255,10,10,1);
        --primary-color: white;
        --paper-item-icon-color: white;
        --primary-text-color: white;
        --switch-checked-track-color: white;
        --switch-checked-button-color: white;
      }      

Komplexeres Beispiel

Ihr könnt natürlich mehrere Entities zusammenfassen, wenn sie mit der gleichen Farbe dargestellt werden sollen und trotzdem unabhängig voneinander Bedingungen für die Anzeige definieren, so wie hier im Beispiel:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


type: entity-filter
entities:
  - entity: sensor.basilikum
    conditions:
      - condition: numeric_state
        below: 50
  - entity: input_boolean.mull_rausstellen
    conditions:
      - condition: state
        state: "on"
conditions:
  - condition: state
    state: null
card:
  type: entities
  card_mod:
    style: |
      ha-card {
        background-color: rgba(3,169,244,1);
        --primary-color: white;
        --paper-item-icon-color: white;
        --primary-text-color: white;
        --switch-checked-track-color: white;
        --switch-checked-button-color: white;
      }        

Farbliche Hierarchie und kombinierte Bedingungen

Ein übersichtliches Dashboard lebt von einer klaren Hierarchie, die wichtige Informationen hervorhebt und gleichzeitig die Übersichtlichkeit bewahrt. Ich empfehle dir, Warnungen und Fehler in deinem Home Assistant Dashboard farblich zu strukturieren:

Rot für kritische Fehler (z.B. Kühlschranktemperatur zu hoch).
Orange für Warnungen (z.B. niedriger Batteriestand).
Blau für informative Hinweise (z.B. Müll rausstellen).

Mit dieser Hierarchie kannst du die Dringlichkeit einer Situation auf einen Blick erkennen.

Beispiel: Drei Gruppen mit verschiedenen Warnstufen

Hier ist ein Beispiel für ein Dashboard, das Fehler, Warnungen und Hinweise kombiniert:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49


type: vertical-stack
cards:
  - type: entity-filter
    show_empty: false
    entities:
      - entity: sensor.kuehlschrank
        conditions:
          - condition: numeric_state
            above: 8
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            background-color: rgba(255,10,10,1); /* Rot */
            --primary-color: white;
          }          

  - type: entity-filter
    show_empty: false
    entities:
      - entity: sensor.batterie_sensor
        conditions:
          - condition: numeric_state
            below: 20
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            background-color: rgba(255,165,0,1); /* Orange */
            --primary-color: white;
          }          

  - type: entity-filter
    show_empty: false
    entities:
      - entity: input_boolean.muell_rausstellen
        conditions:
          - condition: state
            state: "on"
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            background-color: rgba(3,169,244,1); /* Blau */
            --primary-color: white;
          }          

So überseht ihr hoffentlich nie wieder etwas!

Ausblick

Erfasst Du in Deinem Smarthome schon alle für Dich relevanten Messwerte und Informationen? Wie sieht es mit der Windgeschwindigkeit aus? In meinem Artikel Windmessgeräte mit ESPHome in Home Assistant integrieren zeige ich Dir wie einfach das möglich ist.

Habt ihr schon einen dynamischen Stromtarif? Tibber ist einer der ersten Anbieter, die solch einen Tarif in Deutschland realisiert haben. Ich selbst bin seit Oktober 2022 dort Kunde, und das ist für mich eine durchweg sehr positive Erfahrung. Zum einen bietet Tibber eine übersichtlich strukturierte, moderne App, in der ihr jederzeit den vollen Überblick über euren Stromtarif und eure Kosten habt. Zum anderen sind die Kosten sehr transparent: Tibber berechnet euch nur das, was der Strom an der Börse momentan tatsächlich kostet (zuzüglich der regulären Netzentgelte, etc.), und verlangt darüber hinaus lediglich eine Servicegebühr von 3,99 Euro im Monat.

Wenn Tibber für euch eine Option ist, würde ich mich freuen, wenn ihr euren Stromvertrag über meinen Einladungslink abschließt. Damit bekommt ihr und ich jeweils 100 Euro für den Tibber Store, wo ihr verschiedene IoT-Hardware für euer Smart Home kaufen könnt. Wenn ihr schon Tibber-Kunde seid und keinen Einladungslink verwendet habt, könnt ihr das noch 14 Tage lang nachholen. Auch hier freue ich mich, wenn ihr den Code vkccaupl verwendet.

Habt ihr Fragen oder seid noch unsicher? Dann zögert nicht, mich persönlich dazu anzusprechen. Ich helfe Euch rauszufinden, ob Tibber die richtige Wahl für Euch ist. Und wenn es doch nichts für Euch ist, ihr könnt Tibber jederzeit monatlich kündigen!

Vielen Dank für Eure Unterstützung! Sie ermöglicht es mir, die Zeit zu nehmen um weiterhin Videos für Euch zu erstellen.

― Joachim