Ich wurde jetzt ein paar Mal gefragt, wie man sich ein Grundriss-Dashboard in Home Assistant baut. Also so ein Dashboard, auf dem du deinen tatsächlichen Wohnungsgrundriss siehst und dort direkt Lichter schalten, Rollläden steuern und Sensorwerte ablesen kannst. Das Ganze ist wahnsinnig praktisch, weil du auf einen Blick siehst, was gerade im Haus passiert. Ich habe mir drei verschiedene Methoden angeschaut und zeige dir hier, wie jede davon funktioniert.
Welche Methode passt zu dir?
Bevor es losgeht, kurz die Orientierung. Es gibt drei Wege zu einem Grundriss-Dashboard, und die unterscheiden sich ziemlich stark in Aufwand und Flexibilität.
Die picture-elements-Karte ist direkt in Home Assistant eingebaut. Du nimmst ein Bild deines Grundrisses und platzierst Icons darauf. Einfach, schnell, für die meisten Fälle absolut ausreichend.
Mit ha-floorplan wird es richtig mächtig. Statt eines Rasterbilds nutzt du eine SVG-Vektorgrafik, in der jeder Raum und jedes Gerät als benanntes Element existiert. Per CSS steuerst du Farben, Animationen, Hover-Effekte. Allerdings brauchst du dafür ein bisschen SVG- und CSS-Wissen.
Der Floorplan Generator ist ein kostenloses Browser-Tool, mit dem du deinen Grundriss direkt zeichnen und fertiges YAML exportieren kannst. Kein SVG-Editor nötig.
picture-elements: Der schnelle Einstieg
Die picture-elements-Karte ist eigentlich relativ simpel. Du brauchst ein Grundriss-Bild (PNG oder JPG), das du in den /config/www/-Ordner legst. In Home Assistant erreichst du die Datei dann unter /local/floorplan.png.
Die Basis sieht so aus:
type: picture-elements
image: /local/floorplan.png
elements: []Jetzt platzierst du Elemente auf dem Bild. Jedes Element bekommt top und left Werte in Prozent, die bestimmen, wo es auf dem Grundriss erscheint. Ein state-icon zeigt das passende Icon für eine Entity und lässt sich per Tap umschalten.
1type: picture-elements
2image: /local/floorplan.png
3elements:
4 # Wohnzimmer Deckenlampe
5 - type: state-icon
6 entity: light.wohnzimmer_decke
7 tap_action:
8 action: toggle
9 state_color: true
10 style:
11 top: 45%
12 left: 30%
13
14 # Küche Spots
15 - type: state-icon
16 entity: light.kueche_spots
17 tap_action:
18 action: toggle
19 state_color: true
20 style:
21 top: 25%
22 left: 65%
23
24 # Flur
25 - type: state-icon
26 entity: light.flur
27 tap_action:
28 action: toggle
29 state_color: true
30 style:
31 top: 60%
32 left: 50%Tausche die Entity-IDs gegen deine eigenen aus. Die Prozentwerte für top und left musst du an deinen Grundriss anpassen.
Sensoren und Labels auf dem Grundriss
Neben Icons kannst du auch Sensorwerte als Text direkt auf dem Plan anzeigen. Dafür gibt es state-label:
1 # Wohnzimmer Temperatur
2 - type: state-label
3 entity: sensor.wohnzimmer_temperatur
4 suffix: " °C"
5 style:
6 top: 50%
7 left: 30%
8 color: white
9 font-size: 14px
10 font-weight: bold
11 text-shadow: 0 0 4px rgba(0,0,0,0.5)
12
13 # Wohnzimmer Luftfeuchtigkeit
14 - type: state-label
15 entity: sensor.wohnzimmer_luftfeuchtigkeit
16 suffix: " %"
17 style:
18 top: 54%
19 left: 30%
20 color: white
21 font-size: 12px
22 text-shadow: 0 0 4px rgba(0,0,0,0.5)Der text-shadow sorgt dafür, dass der Text auch auf hellen Hintergründen lesbar bleibt. Funktioniert bei mir wirklich gut.
Rollläden und bedingte Elemente
Rollläden bindest du genauso ein wie Lichter. Dazu kannst du mit conditional Elemente nur dann anzeigen, wenn eine bestimmte Bedingung erfüllt ist, zum Beispiel ein Bewegungsmelder:
1 # Wohnzimmer Rollladen
2 - type: state-icon
3 entity: cover.wohnzimmer
4 tap_action:
5 action: toggle
6 style:
7 top: 35%
8 left: 15%
9
10 # Bewegungsmelder nur bei Bewegung anzeigen
11 - type: conditional
12 conditions:
13 - entity: binary_sensor.flur_bewegung
14 state: "on"
15 elements:
16 - type: icon
17 icon: mdi:motion-sensor
18 style:
19 top: 62%
20 left: 48%
21 color: "#FF9800"Du kannst auch eine Kamera direkt auf dem Grundriss einbetten. Per type: image mit camera_image wird der Live-Feed an der richtigen Stelle angezeigt.
Fensterkontakte und dynamische Bilder
Für Fensterkontakte und Türsensoren gibt es einen richtig coolen Trick: Mit state_image kannst du je nach Zustand ein anderes Bild anzeigen. Ein offenes Fenster zeigt ein anderes Icon als ein geschlossenes:
1 # Fenster mit zustandsabhängigem Bild
2 - type: image
3 entity: binary_sensor.fenster_wohnzimmer
4 state_image:
5 "on": /local/floorplan/fenster-offen.png
6 "off": /local/floorplan/fenster-zu.png
7 tap_action:
8 action: more-info
9 style:
10 top: 40%
11 left: 10%
12 width: 5%Das funktioniert genauso für Türen, Garagentore oder alles andere, was zwei Zustände hat. Du brauchst dafür zwei kleine PNG-Icons in /config/www/floorplan/.
Dazu noch ein Detail, das oft übersehen wird: state_color: true sorgt dafür, dass die Standard-Icons automatisch ihre Farbe wechseln. Ein Licht wird gelb wenn es an ist, ein Schalter grün. Das ist bei state-icon standardmäßig aktiv, aber bei älteren HA-Versionen muss man es explizit setzen.
Dark Mode für den Grundriss
Wenn du einen Dark Mode in Home Assistant nutzt, kannst du für die picture-elements-Karte ein separates Bild hinterlegen:
type: picture-elements
image: /local/floorplan-light.png
dark_mode_image: /local/floorplan-dark.png
elements:
# ... deine Elemente bleiben gleichHome Assistant wechselt dann automatisch zwischen den beiden Bildern, je nach Theme. Gerade auf OLED-Displays spart ein dunkler Grundriss einiges an Akku.
Das vollständige picture-elements Beispiel
Hier alles zusammen, damit du es direkt kopieren und anpassen kannst:
1type: picture-elements
2image: /local/floorplan.png
3elements:
4 # === Lichter ===
5 - type: state-icon
6 entity: light.wohnzimmer_decke
7 tap_action:
8 action: toggle
9 state_color: true
10 style:
11 top: 45%
12 left: 30%
13
14 - type: state-icon
15 entity: light.kueche_spots
16 tap_action:
17 action: toggle
18 state_color: true
19 style:
20 top: 25%
21 left: 65%
22
23 - type: state-icon
24 entity: light.schlafzimmer
25 tap_action:
26 action: toggle
27 state_color: true
28 style:
29 top: 75%
30 left: 80%
31
32 - type: state-icon
33 entity: light.flur
34 tap_action:
35 action: toggle
36 state_color: true
37 style:
38 top: 60%
39 left: 50%
40
41 # === Sensoren ===
42 - type: state-label
43 entity: sensor.wohnzimmer_temperatur
44 suffix: " °C"
45 style:
46 top: 50%
47 left: 30%
48 color: white
49 font-size: 14px
50 font-weight: bold
51 text-shadow: 0 0 4px rgba(0,0,0,0.5)
52
53 - type: state-label
54 entity: sensor.kueche_temperatur
55 suffix: " °C"
56 style:
57 top: 30%
58 left: 65%
59 color: white
60 font-size: 14px
61 font-weight: bold
62 text-shadow: 0 0 4px rgba(0,0,0,0.5)
63
64 # === Rollläden ===
65 - type: state-icon
66 entity: cover.wohnzimmer
67 tap_action:
68 action: toggle
69 style:
70 top: 35%
71 left: 15%
72
73 - type: state-icon
74 entity: cover.schlafzimmer
75 tap_action:
76 action: toggle
77 style:
78 top: 70%
79 left: 95%
80
81 # === Bewegungsmelder (bedingt) ===
82 - type: conditional
83 conditions:
84 - entity: binary_sensor.flur_bewegung
85 state: "on"
86 elements:
87 - type: icon
88 icon: mdi:motion-sensor
89 style:
90 top: 62%
91 left: 48%
92 color: "#FF9800"Koordinaten finden mit dem Image Map Generator
Die Prozentwerte für die Platzierung rauszufinden ist wahrscheinlich der nervigste Teil. Der Image Map Generator hilft dabei: Bild hochladen, auf die gewünschte Stelle klicken, Pixelwerte ablesen. Dann rechnest du um: left = X-Pixel / Bildbreite * 100 und top = Y-Pixel / Bildhöhe * 100. Ein paar Runden Trial-and-Error gehören trotzdem dazu.
ha-floorplan: Die Profi-Lösung mit SVG und CSS
Wenn dir picture-elements nicht reicht, ist ha-floorplan der nächste Schritt. Statt eines Bildes nutzt du ein SVG, in dem jeder Raum und jedes Gerät ein benanntes Element ist. Per Rules bindest du Home-Assistant-Entities an diese Elemente und per CSS bestimmst du, wie sie in verschiedenen Zuständen aussehen.
Die Installation läuft über HACS: Frontend durchsuchen, "ha-floorplan" suchen, herunterladen. Danach Browser-Cache leeren.
SVG-Grundriss erstellen
Das SVG erstellst du in Inkscape oder einem anderen SVG-Editor. Wichtig ist, dass du jedem Element eine sinnvolle ID gibst. Ein Rechteck für das Wohnzimmer bekommt die ID area-wohnzimmer, ein Kreis für eine Lampe die ID light-wohnzimmer. Speichere das SVG in /config/www/floorplan/grundriss.svg.
Ein Tipp: Vermeide Punkte in SVG-IDs. Statt light.wohnzimmer nimm light-wohnzimmer. Das spart dir Probleme beim CSS-Escaping.
CSS für zustandsbasiertes Styling
Das ist der Teil, der ha-floorplan richtig cool macht. Per CSS-Klassen bestimmst du, wie Elemente in verschiedenen Zuständen aussehen. Räume leuchten auf wenn ein Licht an ist, Bewegungsmelder pulsieren, Rollläden ändern die Farbe.
1/* /config/www/floorplan/grundriss.css */
2
3/* Räume */
4.room-on {
5 fill: rgba(240, 102, 91, 0.3);
6 transition: fill 0.3s ease;
7}
8
9.room-off {
10 fill: rgba(200, 200, 200, 0.1);
11 transition: fill 0.3s ease;
12}
13
14/* Lichter */
15.light-on {
16 fill: #FFD54F;
17 filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.6));
18}
19
20.light-off {
21 fill: #9E9E9E;
22 opacity: 0.5;
23}
24
25/* Rollläden */
26.cover-open {
27 fill: #4CAF50;
28}
29
30.cover-closed {
31 fill: #F44336;
32}
33
34/* Hover-Effekt */
35[id^="light"]:hover,
36[id^="cover"]:hover {
37 cursor: pointer;
38 opacity: 0.8;
39 filter: brightness(1.2);
40}
41
42/* Bewegungsmelder */
43.motion-on {
44 fill: #FF9800;
45 animation: pulse 2s infinite;
46}
47
48.motion-off {
49 fill: transparent;
50}
51
52@keyframes pulse {
53 0%, 100% { opacity: 1; }
54 50% { opacity: 0.4; }
55}
56
57/* Text-Labels */
58.label-temp {
59 font-family: 'Segoe UI', sans-serif;
60 font-size: 14px;
61 fill: #333;
62 font-weight: bold;
63}Der drop-shadow bei eingeschalteten Lichtern erzeugt einen Glow-Effekt, der tatsächlich richtig gut aussieht. Und die pulse-Animation beim Bewegungsmelder macht sofort klar, wo gerade Aktivität ist.
ha-floorplan Rules einrichten
Die Karten-Konfiguration verbindet alles. Per rules sagst du ha-floorplan, welche Entities auf welche SVG-Elemente reagieren sollen:
1type: custom:floorplan-card
2config:
3 image: /local/floorplan/grundriss.svg
4 stylesheet: /local/floorplan/grundriss.css
5 log_level: warn
6 defaults:
7 hover_action: hover-info
8 tap_action: more-info
9 rules:
10 # Lichter
11 - entities:
12 - light.wohnzimmer_decke
13 - light.kueche_spots
14 - light.schlafzimmer
15 - light.flur
16 state_action:
17 action: call-service
18 service: floorplan.class_set
19 service_data:
20 class: '${(entity.state === "on") ? "light-on" : "light-off"}'
21 tap_action:
22 action: call-service
23 service: homeassistant.toggle
24 haptic: light
25
26 # Räume farblich markieren
27 - entities:
28 - light.wohnzimmer_decke
29 element: area-wohnzimmer
30 state_action:
31 action: call-service
32 service: floorplan.class_set
33 service_data:
34 class: '${(entity.state === "on") ? "room-on" : "room-off"}'
35
36 - entities:
37 - light.kueche_spots
38 element: area-kueche
39 state_action:
40 action: call-service
41 service: floorplan.class_set
42 service_data:
43 class: '${(entity.state === "on") ? "room-on" : "room-off"}'
44
45 # Rollläden
46 - entities:
47 - cover.wohnzimmer
48 - cover.schlafzimmer
49 state_action:
50 action: call-service
51 service: floorplan.class_set
52 service_data:
53 class: '${(entity.state === "open") ? "cover-open" : "cover-closed"}'
54 tap_action:
55 action: call-service
56 service: homeassistant.toggle
57
58 # Bewegungsmelder
59 - entities:
60 - binary_sensor.flur_bewegung
61 state_action:
62 action: call-service
63 service: floorplan.class_set
64 service_data:
65 class: '${(entity.state === "on") ? "motion-on" : "motion-off"}'
66
67 # Temperaturen
68 - entities:
69 - sensor.wohnzimmer_temperatur
70 state_action:
71 action: call-service
72 service: floorplan.text_set
73 service_data:
74 element: label-temp-wohnzimmer
75 text: '${entity.state} °C'
76
77 - entities:
78 - sensor.kueche_temperatur
79 state_action:
80 action: call-service
81 service: floorplan.text_set
82 service_data:
83 element: label-temp-kueche
84 text: '${entity.state} °C'Der Dienst floorplan.class_set setzt CSS-Klassen je nach Entity-Zustand. floorplan.text_set schreibt Werte direkt in SVG-Text-Elemente. Das haptic: light gibt auf Mobilgeräten ein leichtes haptisches Feedback beim Antippen.
Floorplan Generator: Grundriss im Browser zeichnen
Wenn du weder ein Grundriss-Bild hast noch mit Inkscape arbeiten willst, gibt es den Floorplan Generator. Das Tool läuft direkt im Browser, braucht keinen Login und ist kostenlos. Du zeichnest deinen Grundriss mit Polygonen oder Rechtecken, benennst die Räume, platzierst Entities per Drag-and-Drop und exportierst am Ende fertiges YAML. Das kannst du dann direkt in Home Assistant einfügen.
Noch mehr Möglichkeiten mit custom:button-card
Wenn du es noch individueller willst, schau dir die custom:button-card aus HACS an. Die kannst du per type: custom:button-card als Element auf dem Grundriss platzieren. Damit sind komplett eigene Designs möglich, von individuellen Farben über eigene Icons bis hin zu Animationen pro Zustand. Für die meisten Grundriss-Dashboards ist das Overkill, aber wenn du zum Beispiel einen Raum als eigene gestylte Karte auf dem Plan anzeigen willst, ist die button-card der Weg.
ha-floorplan: Responsive SVGs für verschiedene Geräte
Ein Vorteil von ha-floorplan, der oft untergeht: Du kannst verschiedene SVGs für verschiedene Bildschirmgrößen laden. Auf dem Wandtablet ein detailliertes SVG mit allen Räumen, auf dem Handy eine vereinfachte Version:
1type: custom:floorplan-card
2config:
3 image:
4 sizes:
5 - min_width: 0
6 location: /local/floorplan/grundriss-mobile.svg
7 cache: true
8 - min_width: 1024
9 location: /local/floorplan/grundriss-desktop.svg
10 cache: true
11 stylesheet: /local/floorplan/grundriss.css
12 rules:
13 # ... gleiche Rules für beide SVGsDamit das funktioniert, müssen beide SVGs die gleichen Element-IDs haben. Nur die Darstellung (Größe, Layout, Detailgrad) unterscheidet sich.
Tipps für ein gutes Grundriss-Dashboard
Egal welche Methode du nutzt, ein paar Sachen gelten immer. Komprimiere deine Bilder, bevor du sie in Home Assistant hochlädst. TinyPNG macht das in Sekunden. Große Bilder bremsen das Dashboard spürbar aus, gerade auf Tablets.
Mehr als 30 bis 40 Elemente auf einem Grundriss werden unübersichtlich. Wenn du viele Geräte hast, mach lieber pro Etage eine eigene View. Bei ha-floorplan kannst du dafür auch SVG-Layer nutzen.
Für Wandtablets lohnt sich der Kiosk-Mode (gibt es als HACS-Erweiterung). Und denk an ausreichend große Tap-Targets, damit man mit dem Finger auch das richtige Element trifft. Mindestens 44x44 Pixel sollten es sein.
Wenn du ha-floorplan nutzt, aktiviere cache: true in der Image-Konfiguration. Das SVG wird dann nur einmal geladen und nicht bei jedem Dashboard-Aufruf neu geholt.
Welche Methode für wen?
Für Einsteiger ohne SVG-Erfahrung ist picture-elements der einfachste Weg. Ein Bild, ein paar Icons drauf, fertig. Wenn du ein richtig schickes Dashboard willst mit Animationen, Raum-Highlighting und dynamischen Farben, kommst du um ha-floorplan nicht herum. Und wenn du gar kein Grundriss-Bild hast, zeichne dir einen im Floorplan Generator und exportiere das YAML.
Ich persönlich nutze ha-floorplan auf meinem Wandtablet und picture-elements als schnelle Übersicht auf dem Handy. Beide Ansätze haben ihre Berechtigung. Welche Methode nutzt du, oder hast du dein Dashboard ganz anders aufgebaut?
