Grundriss-Steuerung in Home Assistant: Interaktives Smart Home Dashboard erstellen

Interaktiver Grundriss in Home Assistant mit Licht- und Rollladensteuerung

Mit einem interaktiven Grundriss in Home Assistant kannst du dein Smart Home besonders anschaulich und komfortabel steuern. Auf einem Bild deines Grundrisses werden Symbole für Lampen und Rollläden genau dort platziert, wo sie sich im Haus befinden. Durch Tippen auf die Symbole kannst du die Geräte direkt schalten. Die Icons zeigen dabei dynamisch den aktuellen Zustand an – zum Beispiel, ob ein Licht an oder aus ist oder ob ein Rollladen geöffnet oder geschlossen ist.

Diese Lösung ist besonders praktisch, weil du auf einen Blick siehst, was im Haus aktiv ist, und direkt eingreifen kannst. Das ist nicht nur für Einsteiger eine intuitive Steuerung, sondern bietet auch für fortgeschrittene Nutzer viele Möglichkeiten zur Individualisierung.

YAML-Code für den interaktiven Grundriss

Im folgenden YAML-Snippet siehst du, wie du ein picture-elements-Panel in Home Assistant einrichtest. Du benötigst ein eigenes Grundriss-Bild (zum Beispiel /local/floorplan.png) und musst die Entitäten (your_light_... und your_cover_...) durch die passenden Namen aus deiner Home Assistant-Installation ersetzen.

Der Code platziert verschiedene state-icon-Elemente auf dem Bild. Jedes Icon ist mit einer Entität verknüpft und kann durch Antippen geschaltet werden. Die Icons wechseln je nach Zustand automatisch (zum Beispiel von einer ausgeschalteten zu einer eingeschalteten Glühbirne).

1type: picture-elements
2image: /local/floorplan.png
3elements:
4  # Living Room Light
5  - type: state-icon
6    entity: light.your_light_livingroom
7    tap_action:
8      action: toggle
9    style:
10      top: 52%
11      left: 84%
12      transform: translate(-50%, -50%)
13    state_icon: |
14      ]]
15
16  # Dining Area Light
17  - type: state-icon
18    entity: light.your_light_dining
19    tap_action:
20      action: toggle
21    style:
22      top: 33%
23      left: 64%
24      transform: translate(-50%, -50%)
25    state_icon: |
26      ]]
27
28  # Hallway Light
29  - type: state-icon
30    entity: light.your_light_hallway
31    tap_action:
32      action: toggle
33    style:
34      top: 63%
35      left: 50%
36      transform: translate(-50%, -50%)
37    state_icon: |
38      ]]
39
40  # Office Cover
41  - type: state-icon
42    entity: cover.your_cover_office
43    tap_action:
44      action: toggle
45    style:
46      top: 83%
47      left: 84%
48      transform: translate(-50%, -50%)
49    state_icon: |
50      ]]

Die Platzierung der Symbole erfolgt über die top und left Werte in Prozent. Damit kannst du die Icons exakt auf deinem Grundriss positionieren. Die state_icon-Zeile sorgt dafür, dass je nach Zustand das passende Symbol angezeigt wird. Die tap_action schaltet das jeweilige Gerät um.

Symbolplatzierung auf dem Grundriss

Die im Code verwendeten Koordinaten sind Beispiele und können an deinen eigenen Grundriss angepasst werden. Um die passenden X/Y-Positionen für deine Symbole zu finden, kannst du den Image Map Generator verwenden. Damit klickst du einfach auf die gewünschte Stelle im Bild und erhältst die Prozentwerte für die Platzierung.

Ideen zur Erweiterung

Weitere Entitäten wie Temperatur, Fensterkontakte oder Bewegungssensoren kannst du genauso ergänzen. Mit custom:button-card sind noch individuellere Visualisierungen möglich. Setze state_color: true ein, um die Farbgebung automatisch an den Zustand anzupassen.

Wenn du keinen fertigen Grundriss hast, kannst du dir im Floorplan Generator direkt im Browser einen zeichnen und das YAML exportieren.

Für richtig mächtige Grundriss-Dashboards mit CSS-Animationen und zustandsbasiertem Styling gibt es ha-floorplan als HACS-Erweiterung. Einen ausführlichen Vergleich aller drei Methoden findest du im Grundriss-Dashboard Guide.

Nützliche Links

• Image Map Generator
• Floorplan Generator
• ha-floorplan (GitHub)
• Reddit Grundriss-Inspirationen