Floorplan in Home Assistant einbauen

Grundriss zeichnen

Öffne den Floorplan-Editor. Du siehst ein leeres Canvas mit Raster.

Im Topbar: vier Tools. Auswählen für Klicks und Verschieben. Rechteck für viereckige Räume: klick und zieh. Polygon für freie Formen, Ecken einzeln setzen. Ecken, um die Eckpunkte eines schon gezeichneten Raums zu verschieben.

Tipp: Erst Außenwände, dann Innenwände. Räume dürfen sich Kanten teilen, der Editor klebt die Vertices nicht automatisch zusammen, aber Snap-to-Grid (10px) sorgt für saubere Übergänge.

Mehrere Etagen? Topbar → + Etage. Jede Etage hat ihre eigenen Räume und Geräte.

Geräte platzieren

Linke Sidebar: neun Entity-Typen. Klick auf einen Typ, eine Entity erscheint in der Canvas-Mitte. Mit dem Auswählen-Tool kannst du sie an die richtige Stelle ziehen.

In der rechten Sidebar kannst du dann anpassen:

• Entity-ID: deine echte HA-ID wie light.wohnzimmer_decke
• MDI-Icon: der Icon-Name ohne mdi:-Prefix, also ceiling-light, blinds, thermometer
• Animation: 10 Presets (Glow, Pulse, Slide, Fade, Bounce, Shake, Rotate, Breathe, Ripple, Keine), wird in ha-floorplan ausgeführt

Die Entity-IDs müssen exakt mit denen in deinem HA übereinstimmen, sonst klappt der Tap-to-Toggle nicht.

Export wählen

Topbar oben rechts → Exportieren. Zwei Modi:

Du kriegst ein ZIP. Drin: alle Dateien plus eine anleitung.html mit den Installation-Schritten, falls du diese Anleitung gerade verlierst.

In Home Assistant einbauen

1. Dateien hochladen. Per Samba, File Editor oder Studio Code Server nach /config/www/floorplan/ kopieren. Falls der Ordner nicht existiert: anlegen.
2. HACS-Setup (nur für ha-floorplan-Modus): HACS, Frontend, ha-floorplan suchen, installieren, HA neu starten. Für Picture-Elements überspringst du das.
3. Karte anlegen. Dashboard öffnen, Bearbeiten, "Karte hinzufügen", ganz unten "Manuell".
4. YAML einfügen. Inhalt von floorplan.yaml (oder picture-elements.yaml) reinkopieren. Speichern.

Fertig. Deine Räume und Geräte sind jetzt live auf dem Dashboard.

HACS vs. ohne HACS

Picture-Elements ist nativ in HA, kein HACS, keine Custom-Cards. Empfehlung wenn du grad startest.

ha-floorplan braucht entweder HACS oder ein manuelles Setup mit Custom Resource. Dafür Animationen, Hover-Effekte und klickbare Räume.

Manuelle Installation ohne HACS:

1. Lad die neueste ha-floorplan-Release herunter.
2. Entpack ha-floorplan.js nach /config/www/community/ha-floorplan/.
3. Einstellungen, Dashboards, 3-Punkt-Menü, Ressourcen, "Ressource hinzufügen".
4. URL: /local/community/ha-floorplan/ha-floorplan.js, Typ: JavaScript-Modul.
5. HA neu starten. Fertig.

Editor-Features im Überblick

Der Editor hat mehr als nur Zeichenwerkzeuge. Kurzer Überblick über die wichtigsten Features:

• 5 Themes. Topbar-Dropdown: Notion-Clean, Dark, Midnight, Nordic, Sunset. Das Theme ändert Raum-Farben, Hintergrund und Grid.
• Raum-Farben. Raum auswählen, rechte Sidebar: Theme-Presets oder eigene Farbe per Color-Picker.
• Hintergrund-Bild. Im Start-Dialog kannst du ein PNG/JPG hochladen (max. 10 MB). Es wird halbtransparent eingeblendet, du zeichnest drüber. Deckkraft und Sperrung in der rechten Sidebar.
• Undo/Redo. Topbar-Pfeile oder Cmd/Ctrl+Z / Cmd/Ctrl+Y. Bis zu 50 Schritte.
• Tastaturkürzel. Topbar-? öffnet die vollständige Liste. V/P/R/E für Tools, Delete zum Löschen, Space+Maus zum Verschieben des Canvas.
• Copy/Paste. Raum oder Entity auswählen, Cmd/Ctrl+C kopieren, Cmd/Ctrl+V einfügen. Das Duplikat erscheint 20px versetzt.
• Multi-Floor. Topbar + Etage-Button. Jede Etage ist unabhängig. Per Dropdown kannst du eine Etage kopieren.
• HA-Verbindung. Linke Sidebar → HA verbinden. Mit einem Long-Lived-Token werden deine echten Geräte geladen. Token bleibt nur im Browser-Tab.

Troubleshooting

Karte zeigt nur ein leeres Quadrat. Pfad in der YAML stimmt nicht. Prüf, ob die Dateien wirklich in /config/www/floorplan/ liegen und der Pfad im YAML matched.

Geräte reagieren nicht auf Klicks. Entity-ID falsch geschrieben. Geh in HA, Entwicklerwerkzeuge, Status, und kopier die ID 1:1.

Animationen laufen nicht (ha-floorplan). Die floorplan.css wurde nicht mit hochgeladen, oder der stylesheet-Pfad in der YAML zeigt ins Leere.

Mein Custom-Icon erscheint nicht. MDI-Icon-Name prüfen auf pictogrammers.com Tippfehler sind häufig.