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

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, 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/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