Zwei Mushroom-Template Cards nebeneinander in Home Assistant

Einleitung
In der Smart-Home-Umgebung von Home Assistant ist es oft erforderlich, mehrere Sensoren oder Aktoren in einer übersichtlichen Benutzeroberfläche darzustellen. Eine gängige Anforderung ist das gleichzeitige Anzeigen mehrerer Fenster-Sensoren, wobei sich Icons und Farben dynamisch ändern, je nach Zustand des Sensors. Dieser Artikel beschreibt, wie Du zwei Mushroom-Template Cards nebeneinander anordnen kannst, um den Status von Fenstern anzuzeigen.

Problem
Ein Benutzer möchte zwei Mushroom-Template Cards für Fenster-Sensoren nebeneinander anordnen. Bei jedem Fenster soll sich sowohl das Icon als auch die Farbe ändern, abhängig davon, ob das Fenster geöffnet oder geschlossen ist. Die Herausforderung besteht darin, die korrekte YAML-Konfiguration zu erstellen, um dies zu erreichen.

Lösung
Um zwei Mushroom-Template Cards nebeneinander anzuzeigen, kannst Du die horizontal-stack-Karte verwenden. Diese ermöglicht es, mehrere Karten in einer horizontalen Anordnung darzustellen. Hier ist die vollständige YAML-Konfiguration für zwei Fenster-Sensoren:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Fenster Gäste WC
    secondary: >-
      {% if is_state('binary_sensor.hmip_swdo_0000d3c999216f' , 'on') %} 
      ... ist geöffnet
      {% else %}
      ... ist geschlossen
      {% endif %}
    icon: >-
      {% if is_state('binary_sensor.hmip_swdo_0000d3c999216f' , 'on') %} 
      mdi:window-open-variant
      {% else %}
      mdi:window-closed-variant
      {% endif %}
    entity: binary_sensor.hmip_swdo_0000d3c999216f
    icon_color: >-
      {% if is_state('binary_sensor.hmip_swdo_0000d3c999216f' , 'on') %} 
      yellow
      {% else %}
      purple
      {% endif %}
    hold_action:
      action: none
    double_tap_action:
      action: none
    tap_action:
      action: none
    fill_container: false
    multiline_secondary: false
    card_mod:
      style: |
        :host {
          --mush-icon-size: 70px;
        }

  - type: custom:mushroom-template-card
    primary: Fenster Büro
    secondary: >-
      {% if is_state('binary_sensor.fenster_buero' , 'on') %} 
      ... ist geöffnet
      {% else %}
      ... ist geschlossen
      {% endif %}
    icon: >-
      {% if is_state('binary_sensor.fenster_buero' , 'on') %} 
      mdi:window-open-variant
      {% else %}
      mdi:window-closed-variant
      {% endif %}
    entity: binary_sensor.fenster_buero
    icon_color: >-
      {% if is_state('binary_sensor.fenster_buero' , 'on') %} 
      yellow
      {% else %}
      purple
      {% endif %}
    hold_action:
      action: none
    double_tap_action:
      action: none
    tap_action:
      action: none
    fill_container: false
    multiline_secondary: false
    card_mod:
      style: |
        :host {
          --mush-icon-size: 70px;
        }

Schritte zur Umsetzung
1. Stelle sicher, dass die Mushroom-Karten und die horizontal-stack-Karten in Deiner Home Assistant-Installation verfügbar sind.
2. Füge die oben genannte YAML-Konfiguration in Deine Lovelace-Benutzeroberfläche ein.
3. Passe die entity-IDs an, um die richtigen Fenster-Sensoren zu referenzieren.
4. Speichere die Änderungen und lade die Benutzeroberfläche neu, um die Änderungen zu sehen.

Hintergrundwissen
- Mushroom-Template Cards: Diese Karten sind anpassbar und ermöglichen es, den Status von Entitäten visuell darzustellen. Sie unterstützen dynamische Inhalte durch Jinja2-Templates.
- horizontal-stack: Diese Karte ermöglicht es, mehrere Karten nebeneinander anzuzeigen, was die Benutzeroberfläche übersichtlicher gestaltet.
- Jinja2-Templates: Diese werden verwendet, um dynamische Inhalte basierend auf dem Zustand von Entitäten zu generieren.

Zusätzliche Infos

Hinweise & Best Practices
- Achte darauf, dass die Entität-IDs korrekt sind, um Fehler zu vermeiden.
- Teste die Konfiguration in einer sicheren Umgebung, bevor Du sie in einer produktiven Umgebung einsetzt.
- Überlege, ob Du die stack-in-card-Karte verwenden möchtest, um das Design weiter zu verbessern. Diese kann über HACS installiert werden und bietet zusätzliche Anpassungsmöglichkeiten.