Anpassung der Header-Card für Temperaturanzeigen in Home Assistant

Die Verwendung von Home Assistant zur Überwachung und Steuerung von Smart-Home-Geräten bietet unzählige Anpassungsmöglichkeiten. Eine häufige Anforderung besteht darin, bestimmte Informationen visuell hervorzuheben, um wichtige Statusmeldungen schnell erkennen zu können. Dieser Artikel erklärt, wie Sie den Namen und den Status einer Entität in einer Header-Card rot darstellen können, wenn bestimmte Bedingungen erfüllt sind, z.B. bei einer übermäßigen Temperaturanzeige im Serverschrank.

Problemstellung

Das ursprüngliche Problem besteht darin, dass der Benutzer die Header-Card für seinen Serverschrank so anpassen möchte, dass nicht nur das Temperatur-Icon rot eingefärbt wird, wenn die Temperatur über 30 Grad Celsius steigt, sondern auch der Name und der Zustand der Entität (z.B. „Temp · 32,5°C“). Die Herausforderung liegt in der Implementierung der benutzerdefinierten Stile innerhalb der Home Assistant Benutzeroberfläche.

Hintergründe

Home Assistant nutzt YAML (YAML Ain't Markup Language) zur Konfiguration und zur Anpassung von Benutzeroberflächen. Mit der Erweiterung card_mod können Sie das Erscheinungsbild von Karten in Home Assistant anpassen. Die Anpassungen erfolgen über CSS-ähnliche Stile, welche die Darstellung der Icons und Texte auf Grundlage von Bedingungen dynamisch verändern.

Wichtige Begriffe

Best Practices

1. Bedienkomfort: Verwenden Sie klare Bedingungen zur Statusänderung, damit Benutzer sofort erkennen können, welches Gerät ein Problem aufweist.
2. Visuelle Konsistenz: Halten Sie die Farbwahl und Symbolik konsistent in der gesamten Benutzeroberfläche, um Verwirrung zu vermeiden.
3. Testen: Testen Sie Ihre Änderungen in einer sicheren Umgebung, bevor Sie sie in Ihrer Produktionsumgebung ausrollen.

Lösungsschritte

1. Anpassen der Header-Card für das Icon

Um das Icon rot darzustellen, wenn die Temperatur über 30 Grad liegt, verwenden Sie den folgenden Code:

card_mod:
  style:
    hui-heading-badge:nth-child(1):
      hui-entity-heading-badge$: |
        ha-state-icon {
          {% set temp = states('sensor.sonoff_temperaturfuehler_serverschrank_temperature') | float(0) %}
          {% if temp >= 30 %}
             color: red !important;
          {% else %}
             color: blue !important;
          {% endif %}
        }

2. Anpassen der Darstellung des Status

Um den Text des Status ebenfalls rot zu färben, verwenden Sie den folgenden Code:

        state-display {
          {% set temp = states('sensor.sonoff_temperaturfuehler_serverschrank_temperature') | float(0) %}
          {% if temp >= 30 %}
             color: red !important;
          {% else %}
             color: blue !important;
          {% endif %}
        }

3. Gesamtintegration

In der Gesamtintegration der Header-Card sollte der Code in etwa wie folgt strukturiert sein:

type: heading
icon: phu:desktop-computer
heading: Serverraum
heading_style: title
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.sonoff_temperaturfuehler_serverschrank_temperature
    name: Temp
    state_content:
      - name
      - state
  - type: entity
    show_state: true
    show_icon: true
    entity: switch.shellysteckdoseluefterserverschrank
    name: Lüfter
    state_content:
      - name
      - state
    tap_action:
      action: toggle
card_mod:
  style:
    hui-heading-badge:nth-child(1):
      hui-entity-heading-badge$: |
        ha-state-icon {
          {% set temp = states('sensor.sonoff_temperaturfuehler_serverschrank_temperature') | float(0) %}
          {% if temp >= 30 %}
             color: red !important;
          {% else %}
             color: blue !important;
          {% endif %}
        }
        state-display {
          {% set temp = states('sensor.sonoff_temperaturfuehler_serverschrank_temperature') | float(0) %}
          {% if temp >= 30 %}
             color: red !important;
          {% else %}
             color: blue !important;
          {% endif %}
        }

Alternativen

• Benachrichtigungen: Neben der visuellen Darstellung können auch Benachrichtigungen konfiguriert werden, die beim Erreichen bestimmter Temperaturgrenzen versendet werden.
• Automatisierungen: Integrieren Sie Automatisierungen in Home Assistant, um Geräte automatisch zu steuern, z.B. das Einschalten eines Lüfters, wenn die Temperatur einen bestimmten Wert überschreitet.

Stolperfallen

• Syntaxfehler: YAML ist empfindlich bezüglich der Einrückungen. Ein falscher Abstand kann zu Fehlermeldungen führen.
• Card-Mod Installiert: Stellen Sie sicher, dass das card_mod-Plugin installiert ist, da ohne diese Erweiterung keine CSS-Anpassungen vorgenommen werden können.
• Koexistenz von Addons: Achten Sie darauf, dass andere Custom Cards nicht in Konflikt mit card_mod stehen.

Fazit

Die Anpassung von Header-Cards in Home Assistant kann die Benutzeroberfläche erheblich verbessern, indem kritische Informationen klar hervorgehoben werden. Indem Sie CSS-ähnliche Stile verwenden, können Sie Icons und Texte dynamisch an Änderungen in den Sensordaten anpassen. Mit einem klar strukturierten Ansatz sichern Sie sich eine ansprechende und informative Benutzeroberfläche.