Verwendung von Vertical-Stack und Bubble-Card in Home Assistant

Einleitung
Die Integration von Smart-Home-Geräten in eine benutzerfreundliche Oberfläche ist entscheidend für die Benutzererfahrung. Home Assistant bietet die Möglichkeit, verschiedene Karten zu kombinieren, um eine intuitive Steuerung zu ermöglichen. In diesem Artikel wird erläutert, wie man eine Vertical-Stack-Karte mit mehreren Bubble-Cards erstellt, um verschiedene Steckdosen über eine einzige Navigation zu steuern.

Problem
Ein Benutzer möchte eine Navigation einrichten, die es ermöglicht, mehrere Bubble-Cards für verschiedene Steckdosen (z. B. Waschmaschine, Trockner, Spülmaschine) in einem Vertical-Stack anzuzeigen. Bei dem Versuch, eine zweite Bubble-Card hinzuzufügen, tritt ein Fehler auf. Der Benutzer fragt sich, ob Bubble-Cards in einem Stapel kombiniert werden können und wo der Fehler liegt.

Lösung
Der Fehler liegt in der Konfiguration der zweiten Bubble-Card. Diese darf nicht als Pop-Up, sondern muss als Button konfiguriert werden. Die korrekte Konfiguration ermöglicht es, mehrere Geräte in einem Vertical-Stack anzuzeigen und zu steuern.

Hier ist ein Beispiel für die korrekte Konfiguration:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#steckdosen1"
    button_type: switch
    entity: switch.waschmaschine_tasmota
    name: Waschmaschine
    scrolling_effect: false
    show_icon: true
    force_icon: false
    show_name: true
    show_state: true
    show_last_changed: false
    show_attribute: false
    sub_button:
      - entity: sensor.waschmaschine_energy_power
        show_background: true
        state_background: true
    icon: mdi:power-plug
  - type: custom:bubble-card
    card_type: button
    entity: switch.trockner_tasmota
    name: Trockner
    scrolling_effect: true
    icon: mdi:power-plug
    show_state: true
    sub_button:
      - entity: sensor.trockner_energy_power
        show_background: true

Schritte zur Umsetzung
1. Öffne die Konfigurationsdatei deiner Home Assistant-Oberfläche.
2. Füge einen Vertical-Stack hinzu, falls noch nicht vorhanden.
3. Erstelle die erste Bubble-Card als Pop-Up für die Waschmaschine.
4. Füge die zweite Bubble-Card als Button für den Trockner hinzu.
5. Stelle sicher, dass die Konfiguration korrekt eingerückt ist, um Syntaxfehler zu vermeiden.
6. Speichere die Änderungen und lade die Benutzeroberfläche neu, um die Änderungen zu sehen.

Hintergrundwissen
- Vertical-Stack: Diese Karte ermöglicht es, mehrere Karten vertikal anzuordnen, was die Benutzeroberfläche übersichtlicher macht.
- Bubble-Card: Eine benutzerdefinierte Karte, die es ermöglicht, verschiedene Interaktionen (z. B. Schalter, Pop-Ups) für Smart-Home-Geräte zu erstellen.
- Pop-Up vs. Button: Pop-Ups sind interaktive Fenster, die zusätzliche Informationen oder Optionen anzeigen, während Buttons direkt Aktionen auslösen. Bei der Verwendung in einem Vertical-Stack ist es wichtig, die richtige Kartentypen zu wählen, um Fehler zu vermeiden.

Zusätzliche Infos

Hinweise & Best Practices
- Achte darauf, dass die Einrückungen in der YAML-Konfiguration korrekt sind, da dies zu Syntaxfehlern führen kann.
- Teste die Konfiguration nach jeder Änderung, um sicherzustellen, dass alles wie gewünscht funktioniert.
- Nutze die Home Assistant-Dokumentation für weitere Informationen zu benutzerdefinierten Karten und deren Konfiguration.
- Überlege, ob du alternative Karten wie die "Button-Card" verwenden möchtest, um unterschiedliche Benutzeroberflächen zu gestalten.