Zum Inhalt springen
Alles Automatisch

← Zurück zum Editor

Floorplan in Home Assistant einbauen

Vom leeren Canvas bis zum funktionierenden Dashboard. In 15 Minuten. Ohne Vorkenntnisse.

1

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. Snap rastet auf das sichtbare Gitter und zieht Ecken, die nah an einer Ecke eines Nachbarraums liegen, exakt darauf. So passen angrenzende Räume ohne Nacharbeit zusammen.

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

2

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.

3

Export wählen

Topbar oben rechts → Exportieren. Zwei Modi:

ha-floorplan

SVG, YAML und CSS. Animationen, Hover-Effekte auf Entities, Raum-Beleuchtung bei eingeschaltetem Licht. Braucht HACS oder manuelles Setup. Mehr Wow-Effekt.

Picture-Elements

PNG und YAML. Native HA-Karte, keine HACS nötig. Statisches Bild mit gestylten State-Icons (runde Chips mit Schatten). Einfacher.

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

4

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 (ha-floorplan) oder picture-elements.yaml (Picture-Elements) reinkopieren. Speichern.

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

Geschafft!

Dein Floorplan ist jetzt auf dem Dashboard. Die folgenden Abschnitte sind Referenz-Material für später.

Vergleich

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 auf Entities und visuelles Raum-Glow bei eingeschaltetem Licht.

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.
Features

Editor-Features im Überblick

Der Editor hat mehr als nur Zeichenwerkzeuge. Hier die wichtigsten Features:

5 Themes

Notion-Clean, Dark, Midnight, Nordic, Sunset. Per Dropdown im Topbar.

Raum-Farben

Theme-Presets oder eigene Farbe per Color-Picker.

Hintergrund-Bild

PNG/JPG hochladen (max. 10 MB), halbtransparent drüberzeichnen.

Undo/Redo

Cmd/Ctrl+Z. Bis zu 50 Schritte zurück.

Tastaturkürzel

V/P/R/E für Tools, Delete, Space+Maus zum Panning.

Copy/Paste

Cmd/Ctrl+C/V. Duplikat erscheint 20px versetzt.

Multi-Floor

Unabhängige Etagen. Per Dropdown kopierbar.

Möbel & Deko

13 Typen mit Resize-Handles an Ecken und Kanten.

Bodenbeläge

Parkett, Fliesen, Teppich, Stein, Beton als SVG-Pattern.

Farbcodierte Entities

Lampen amber, Sensoren teal, Rollos blau, Mediaplayer violett.

HA-Verbindung

Long-Lived-Token, echte Geräte laden. Token bleibt im Browser-Tab.

Hilfe

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 auf Werkzeuge (bis 2026.7 Entwicklerwerkzeuge) → Zustände 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/library/mdi/. Tippfehler sind häufig.

Entities sind schwarz statt farbig

Die CSS-Variablen werden nicht geladen. Im ha-floorplan-Export müssen SVG, CSS und YAML zusammen in /config/www/floorplan/ liegen.

Bereit?

Editor öffnen, Grundriss zeichnen, exportieren. Komplett kostenlos.

Editor öffnen →Beispiele ansehen

Offene Fragen beantworten die FAQ. Wie sich der Generator von anderen Wegen zum Grundriss-Dashboard unterscheidet, zeigt der Vergleich.