Fehler und Warnungen im Home Assistant Dashboard richtig anzeigen

Dashboards und Visualisierungen

Fehler und Warnungen im Home Assistant Dashboard richtig anzeigen

In diesem Quick Tipp zeige ich Euch, wie ihr in nur 3 Schritten Fehler und Warnungen sowie Informationen in Eurem Smarthome auf Eurem Home Assistant Dashboard ansprechend und auffällig integrieren könnt.

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.

→ In einem Folge-Video zeige ich vier erweiterte Methoden, wie du Warnungen noch eleganter ins Dashboard integrierst – auch ganz ohne card-mod: 4 smarte Tricks fürs Dashboard – damit du nie mehr etwas übersiehst