Dynamische Icon-Anpassung basierend auf Temperaturwerten

Einleitung
In modernen Smart-Home-Systemen ist die visuelle Darstellung von Informationen entscheidend für die Benutzerfreundlichkeit. Eine dynamische Anpassung von Icons basierend auf Sensorwerten, wie beispielsweise der Temperatur, kann helfen, Informationen schnell und intuitiv zu vermitteln. In diesem Artikel wird erläutert, wie man Icons in Abhängigkeit von Temperaturwerten in einer Home Assistant-Umgebung anpassen kann.

Problem
Ein Benutzer möchte die Darstellung von Icons in seiner Smart-Home-Oberfläche ändern, abhängig von den Temperaturwerten, die von einem Temperatursensor erfasst werden. Die Anforderungen sind wie folgt:
- Über 20 °C: Daumen hoch in Grün
- Zwischen 15 °C und 20 °C: Daumen zur Seite in Gelb
- Unter 15 °C: Daumen runter in Rot

Lösung
Um die Icons dynamisch anzupassen, kann man die Template-Funktion von Home Assistant nutzen. Hierbei wird der aktuelle Temperaturwert aus dem Sensor ausgelesen und in einer Bedingung verwendet, um das entsprechende Icon und die Farbe festzulegen.

Icon-Anpassung

Die folgende Template-Logik kann verwendet werden, um das Icon basierend auf dem Temperaturwert zu bestimmen:

{% set temp = states('sensor.temperatur') | float %}
{% if temp > 20 %}
  mdi:thumb-up
{% elif temp >= 15 %}
  mdi:thumb-sideways
{% else %}
  mdi:thumb-down
{% endif %}

Farbänderung des Icons

Zusätzlich zur Icon-Anpassung kann auch die Farbe des Icons dynamisch geändert werden:

{% set temp = states('sensor.temperatur') | float %}
{% if temp > 20 %}
  green
{% elif temp >= 15 %}
  yellow
{% else %}
  red
{% endif %}

Verwendung der Mushroom Template Card

Um die oben genannten Templates in einer benutzerfreundlichen Karte darzustellen, empfiehlt sich die Verwendung der Mushroom Template Card. Hier ist ein Beispiel, wie die Konfiguration aussehen könnte:

type: custom:mushroom-template-card
primary: Karte
icon: |2-
    {% set temp = states('sensor.temperatur') | float %}
    {% if temp > 20 %}
      mdi:thumb-up
    {% elif temp >= 15 %}
      mdi:thumb-sideways
    {% else %}
      mdi:thumb-down
    {% endif %}
picture: ""
icon_color: |
  {% set temp = states('sensor.temperatur') | float %}
  {% if temp > 20 %}
    green
  {% elif temp >= 15 %}
    yellow
  {% else %}
    red
  {% endif %}
badge_icon: ""
badge_color: ""
layout: vertical

Schritte zur Umsetzung
1. Stelle sicher, dass der Temperatursensor korrekt in Home Assistant integriert ist und die Werte abgerufen werden können.
2. Füge die oben genannten Template-Logiken in die Konfiguration deiner Home Assistant-Instanz ein.
3. Implementiere die Mushroom Template Card in deinem Dashboard, um die dynamischen Icons anzuzeigen.

Hintergrundwissen
Home Assistant verwendet Jinja2-Templates, um dynamische Inhalte zu generieren. Die states()-Funktion ermöglicht den Zugriff auf den aktuellen Zustand von Entitäten, während die float-Konvertierung sicherstellt, dass die Temperaturwerte als Fließkommazahlen behandelt werden. Dies ist wichtig, um korrekte Vergleiche durchzuführen.

Zusätzliche Infos

Hinweise & Best Practices
- Teste die Templates in der Entwicklungsumgebung von Home Assistant, um sicherzustellen, dass sie wie gewünscht funktionieren.
- Achte darauf, dass die Icons und Farben in der Benutzeroberfläche gut sichtbar sind und den Benutzer nicht ablenken.
- Berücksichtige, dass die Verwendung von zu vielen dynamischen Elementen die Leistung der Benutzeroberfläche beeinträchtigen kann. Halte die Anzahl der dynamischen Elemente im Rahmen.