Bubble Card - State Funktion in Home Assistant

Einleitung
Die Verwendung von Home Assistant zur Automatisierung von Smart-Home-Geräten gewinnt zunehmend an Beliebtheit. Eine häufige Anforderung ist die Anpassung von Benutzeroberflächen, um den Status von Geräten klar und intuitiv darzustellen. In diesem Artikel wird erläutert, wie man eine Bubble Card erstellt, die den Status eines Lichtschalters anzeigt und den Text sowie das Icon entsprechend ändert.

Problem
Ein Benutzer möchte eine Bubble Card in Home Assistant erstellen, die als Schalter für das Wohnzimmerlicht fungiert. Das Ziel ist es, den Text des Schalters dynamisch zu ändern, je nachdem, ob das Licht ein- oder ausgeschaltet ist. Trotz der korrekten Funktionalität des Schalters ändert sich der Text nicht, was zu Verwirrung führt.

Lösung
Die Lösung besteht darin, die Bubble Card durch eine Button Card zu ersetzen, die eine flexiblere Anpassung der Anzeige ermöglicht. Die Button Card kann den Text und das Icon basierend auf dem Status des Lichts dynamisch ändern. Hier ist der angepasste Code:

yaml 
type: custom:button-card 
entity: light.pc_led_pv_led
show_state: false
tap_action: 
  action: toggle
layout: icon_name
  styles: card: 
    - border-radius: 55px 
    - background-color: > [[[ return entity.state === 'on' ? 'rgba(255, 200, 20, 0.9)' : 'rgba(200,200,200,0.3)'; ]]] 
    - transition: all 0.8s ease 
    - padding: 8px 0px 8px 10px 
  grid: 
    - grid-template-columns: 35px 1fr 
    - column-gap: 10px 
    - justify-content: start 
    - justify-items: start 
    icon: 
    - background: white 
    - border-radius: 55px 
    - padding: 2px 5px 2px 5px 
    - width: 30px - height: 30px 
    - color: | [[[ return entity.state === 'on' ? 'green' : 'grey'; ]]]
    name: 
    - justify-self: start 
    - font-size: 14px 
    - font-weight: bold name: > [[[ return entity.state === 'on' ? 'Licht ausschalten' : 'Licht einschalten'; ]]]

Schritte zur Umsetzung
1. Installiere die button-card-Ressource in Home Assistant, falls noch nicht geschehen.
2. Erstelle eine neue Karte in deinem Dashboard und wähle den Typ custom:button-card.
3. Füge den oben genannten YAML-Code in die Konfiguration der Karte ein.
4. Passe die entity-ID an, um auf dein spezifisches Licht zu verweisen.
5. Speichere die Änderungen und teste die Funktionalität der Karte.

Hintergrundwissen
Die Button Card in Home Assistant bietet eine Vielzahl von Anpassungsmöglichkeiten, die über die Standardkarten hinausgehen. Sie ermöglicht die Verwendung von JavaScript-ähnlichen Ausdrücken, um den Status von Entitäten zu überprüfen und die Darstellung dynamisch zu ändern. Dies ist besonders nützlich für Benutzeroberflächen, die eine klare und intuitive Interaktion erfordern.

Zusätzliche Infos

Hinweise & Best Practices
- Stelle sicher, dass die button-card-Ressource korrekt installiert und in deiner Lovelace-Konfiguration eingebunden ist.
- Teste die Karte nach der Implementierung, um sicherzustellen, dass alle Funktionen wie gewünscht arbeiten.
- Nutze die Möglichkeit, weitere Anpassungen vorzunehmen, um das Design an deine persönlichen Vorlieben anzupassen.
- Berücksichtige die Verwendung von Icons, die den Status visuell unterstützen, um die Benutzererfahrung zu verbessern.