Bubble Card Icon nach Status einfärben

Einleitung
Die Anpassung von Icons in Smart-Home-Anwendungen ist nicht nur eine Frage der Ästhetik, sondern auch der Benutzerfreundlichkeit. Durch die visuelle Darstellung von Statusänderungen kann der Benutzer schnell erkennen, ob ein Gerät aktiv ist oder ob es eine bestimmte Aktion ausführt. In diesem Artikel wird erläutert, wie man das Icon einer Bubble Card in Home Assistant basierend auf dem Status eines Sensors einfärben kann.

Problem
Ein Benutzer möchte das Icon einer Bubble Card einfärben, abhängig davon, ob der Stromverbrauch über oder unter null liegt. Der ursprüngliche Versuch, dies über CSS zu realisieren, war nicht erfolgreich. Die Herausforderung besteht darin, den Status des Sensors korrekt auszuwerten und die entsprechenden Farben zuzuweisen.

Lösung
Die Lösung besteht darin, die custom:button-card oder custom:bubble-card zu verwenden, um den Status des Sensors auszuwerten und das Icon entsprechend einzufärben. Beide Karten bieten die Möglichkeit, auf bestimmte Werte zu reagieren und die Darstellung dynamisch anzupassen.

Verwendung der custom:button-card

Hier ist ein Beispiel, wie du die custom:button-card konfigurieren kannst, um das Icon basierend auf dem Stromfluss zu ändern:

type: custom:button-card
entity: sensor.total_power
name: Stromfluss
icon: mdi:flash
show_state: true
state:
  - value: 0
    operator: ">"
    icon: mdi:flash
    color: red
  - value: 0
    operator: <
    icon: mdi:flash
    color: green
styles:
  icon:
    - width: 40px
  card:
    - padding: 10px

Verwendung der custom:bubble-card

Alternativ kannst du die custom:bubble-card verwenden, um das Icon ebenfalls dynamisch einzufärben:

type: custom:bubble-card
card_type: button
entity: sensor.total_power
icon: mdi:transmission-tower
name: Netzfluss
button_type: state
styles: |
  .bubble-icon {
    color: ${parseFloat(hass.states['sensor.total_power'].state) > 0 ? 'red' : parseFloat(hass.states['sensor.total_power'].state) < 0 ? 'green' : 'grey'} !important;
  }

Schritte zur Umsetzung
1. Stelle sicher, dass die custom:button-card oder custom:bubble-card in deiner Home Assistant-Installation verfügbar ist.
2. Füge den entsprechenden YAML-Code in deine Lovelace-Konfiguration ein.
3. Speichere die Änderungen und lade die Benutzeroberfläche neu, um die Anpassungen zu sehen.

Hintergrundwissen
Die custom:button-card und custom:bubble-card sind benutzerdefinierte Karten für Home Assistant, die erweiterte Anpassungsmöglichkeiten bieten. Sie ermöglichen es, den Status von Entitäten zu überwachen und die Darstellung dynamisch zu ändern. CSS kann verwendet werden, um spezifische Stile anzuwenden, basierend auf den Werten der Entitäten.

Typische Fehler, die bei der Implementierung auftreten können, sind:
- Falsche Entitätsnamen oder Schreibfehler.
- Ungültige CSS-Syntax, die dazu führen kann, dass die Stile nicht angewendet werden.
- Fehlende Abhängigkeiten oder nicht installierte benutzerdefinierte Karten.

Zusätzliche Infos

Hinweise & Best Practices
- Teste die Konfiguration in einer sicheren Umgebung, bevor du sie in der Produktionsumgebung anwendest.
- Halte die Home Assistant-Installation und die benutzerdefinierten Karten auf dem neuesten Stand, um von Verbesserungen und Fehlerbehebungen zu profitieren.
- Nutze die Dokumentation der benutzerdefinierten Karten, um weitere Anpassungsmöglichkeiten zu entdecken.