5. Etagenstatus mit Button-Card in einer Übersichtskarte anzeigen

Zuerst legst du in deinem Dashboard (im YAML-Modus) eine neue View an:

views:
  - title: Übersicht
    path: uebersicht
    icon: mdi:home-analytics
    cards:
      # Hier kommen später die Button-Karten rein

Beispiel-Button für Etage 1

Innerhalb dieser Übersicht-View fügst du nun folgenden Code als button-card ein:

type: custom:button-card
entity: binary_sensor.fensterkontakt_etage_1
name: Etage 1 – Fensterstatus
show_state: true
icon: mdi:window-closed
state:
  - value: "on"
    color: red
    icon: mdi:window-open
    name: Fenster offen
  - value: "off"
    color: green
    icon: mdi:window-closed
    name: Fenster zu
tap_action:
  action: navigate
  navigation_path: /ha-floorplan/erdgeschoss

entity:
Das ist die Template-Entität, die du vorher in Kapitel 3 erstellt hast. Sie zeigt dir an, ob im 1. Stock (Etage 1) irgendein Fenster offen ist. Sobald eins offen ist, steht der Status auf „on“.

state:
Je nachdem, ob ein Fenster offen oder geschlossen ist, ändert sich die Anzeige:

• on → Die Karte wird rot, zeigt ein offenes Fenster-Icon und den Text „Fenster offen“

• off → Die Karte wird grün, das Icon zeigt ein geschlossenes Fenster und der Text sagt „Fenster zu“

tap_action → navigate:
Wenn du auf die Karte tippst, wirst du direkt zur passenden Grundriss-Ansicht der Etage weitergeleitet – also zur SVG-Ansicht vom 1. Stock.

Der Navigation-Pfad muss exakt zu dem passen, was du bei der passenden View (in views: ) angegeben hast.

Beispiel:

views:
  - title: Erdgeschoss
    path: erdgeschoss

Dann musst du in der Button-Card schreiben:

navigation_path: /erdgeschoss

Oder, wenn du z. B. folgendes verwendet hast:

views:
  - title: Erdgeschoss
    path: ha-floorplan

Dann wäre dein Pfad:

navigation_path: /ha-floorplan

Du kannst auch einfach in deinem Browser die URL kopieren, während du im gewünschten Grundriss bist.

Beispiel:

http://IP-Adresse/ha-floorplan/erdgeschoss
→ navigation_path: /ha-floorplan/erdgeschoss