Anpassung einer Markdown-Karte für Unwetterwarnungen in Home Assistant

Einleitung
In Smart-Home-Anwendungen ist die Anzeige von relevanten Informationen in einem kompakten Format entscheidend. Insbesondere bei Unwetterwarnungen ist es wichtig, die Informationen schnell und übersichtlich darzustellen. Dieser Artikel behandelt die Anpassung einer Markdown-Karte in Home Assistant, um Unwetterwarnungen effizient anzuzeigen.

Problem
Ein Benutzer möchte eine Markdown-Karte erstellen, die Unwetterwarnungen anzeigt. Der bestehende Code zeigt zwar die Warnungen an, jedoch sind Anpassungen erforderlich, um nur die wichtigsten Informationen darzustellen. Insbesondere sollen die Warnstufen in einem benutzerfreundlicheren Format angezeigt werden, und die Karte soll sich dynamisch an die Länge des Textes anpassen.

Lösung
Die Lösung besteht darin, den bestehenden Code so zu modifizieren, dass die Warnstufen in einem klaren Format angezeigt werden. Zudem wird sichergestellt, dass die Karte sich dynamisch anpasst, je nach Länge des Textes. Der folgende Code zeigt die angepasste Version:

type: markdown
content: >-
  {% set current_count = state_attr("sensor.stadt_pforzheim_aktuelle_warnstufe", "warning_count") %}
  {% set advance_count = state_attr("sensor.stadt_pforzheim_vorwarnstufe", "warning_count") %}

  {% if ((current_count == 0 or current_count == None) and (advance_count == 0 or advance_count == None)) %}
    **<font color=#44739e>Keine Warnungen</font>**
  {% else %}
    {% for i in range(current_count) %}
      {% set headline = state_attr("sensor.stadt_pforzheim_aktuelle_warnstufe", "warning_" ~ loop.index ~ "_headline") %}
      {% set description = state_attr("sensor.stadt_pforzheim_aktuelle_warnstufe", "warning_" ~ loop.index ~ "_description") %}
      {% set level = state_attr("sensor.stadt_pforzheim_aktuelle_warnstufe", "warning_" ~ loop.index ~ "_level") %}
      {% set time_start = state_attr("sensor.stadt_pforzheim_aktuelle_warnstufe", "warning_" ~ loop.index ~ "_start") | as_timestamp %}
      {% set weekday_start = time_start | timestamp_custom("%w", True) | int %}
      {% set time_end = state_attr("sensor.stadt_pforzheim_aktuelle_warnstufe", "warning_" ~ loop.index ~ "_end") | as_timestamp %}
      {% set weekday_end = time_end | timestamp_custom("%w", True) | int %}
  **<font color=red><font size=4>{{ headline }}</font>** 

  *<font color=yellow><font size=5>{{
  ['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'][weekday_start-1]
  ~ ", " ~ time_start | timestamp_custom("%H:%M") ~ " - " ~
  ['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'][weekday_end-1]
  ~ ", " ~ time_end | timestamp_custom("%H:%M") }}</font>*
      Warnstufe {{ level }}
      {% if not loop.last %}
  ***
      {% endif %}
    {% endfor %}
    {% for i in range(advance_count) %}
      {% set headline = state_attr("sensor.stadt_pforzheim_vorwarnstufe", "warning_" ~ loop.index ~ "_headline") %}
      {% set description = state_attr("sensor.stadt_pforzheim_vorwarnstufe", "warning_" ~ loop.index ~ "_description") %}
      {% set level = state_attr("sensor.stadt_pforzheim_vorwarnstufe", "warning_" ~ loop.index ~ "_level") %}
      {% set time_start = state_attr("sensor.stadt_pforzheim_vorwarnstufe", "warning_" ~ loop.index ~ "_start") | as_timestamp %}
      {% set weekday_start = time_start | timestamp_custom("%w", True) | int %}
      {% set time_end = state_attr("sensor.stadt_pforzheim_vorwarnstufe", "warning_" ~ loop.index ~ "_end") | as_timestamp %}
      {% set weekday_end = time_end | timestamp_custom("%w", True) | int %}
  **<font color=#fdd835>{{ headline }}</font>**

  *<font color=gray>{{
  ['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'][weekday_start-1]
  ~ ", " ~ time_start | timestamp_custom("%H:%M") ~ " - " ~
  ['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'][weekday_end-1]
  ~ ", " ~ time_end | timestamp_custom("%H:%M") }}</font>*
      Warnstufe {{ level }}
      {% if not loop.last %}
  ***
      {% endif %}
    {% endfor %}
  {% endif %} 
grid_options:
  columns: 12
  rows: 3
visibility:
  - condition: numeric_state
    entity: sensor.stadt_pforzheim_aktuelle_warnstufe
    above: 0

Schritte zur Umsetzung
1. Öffne die Konfiguration deiner Home Assistant-Instanz.
2. Navigiere zu dem Dashboard, in dem die Markdown-Karte angezeigt werden soll.
3. Füge die angepasste YAML-Konfiguration in die Markdown-Karte ein.
4. Speichere die Änderungen und lade das Dashboard neu, um die Anpassungen zu sehen.

Hintergrundwissen
Markdown-Karten in Home Assistant ermöglichen die Anzeige von Text und Informationen in einem flexiblen Format. Die Verwendung von Jinja2-Templates erlaubt es, dynamische Inhalte basierend auf Sensorwerten anzuzeigen. Es ist wichtig, die Attribute der Sensoren korrekt zu referenzieren, um die gewünschten Informationen darzustellen.

Zusätzliche Infos

Hinweise & Best Practices
- Teste die Anpassungen in einer sicheren Umgebung, bevor du sie in einer produktiven Umgebung anwendest.
- Achte darauf, dass die Sensoren korrekt konfiguriert sind und die benötigten Attribute bereitstellen.
- Halte die Markdown-Karte so einfach wie möglich, um die Lesbarkeit zu gewährleisten.
- Berücksichtige die Verwendung von CSS für weitergehende Anpassungen, wenn die Standardoptionen nicht ausreichen.