Interaktive Grundrisse in Home Assistant sind eine tolle Sache, aber der Weg dahin war bisher ziemlich mühsam. Inkscape öffnen, SVG-Koordinaten per Hand raussuchen, alles irgendwie zusammenpuzzeln. Ich habe mir das selbst über die Zeit immer wieder angeschaut und entschieden, dass es da eine bessere Lösung geben muss. Herausgekommen ist ein kostenloser, browserbasierter Floorplan Generator, der den kompletten Workflow übernimmt, vom ersten Raum bis zum fertigen Export für Home Assistant.
Was der Floorplan Generator macht
Das Tool läuft direkt im Browser, du brauchst nichts zu installieren. Wenn du die Seite öffnest, startest du entweder mit einer der vorkonfigurierten Vorlagen oder komplett mit einer leeren Fläche. Zur Auswahl stehen eine Zweizimmerwohnung, ein Einfamilienhaus, ein Reihenhaus im Erdgeschoss und ein Studioapartment. Du kannst aber auch einen eigenen Grundriss als Bild hochladen und als Hintergrund verwenden oder ein bestehendes Projekt importieren und weiterbearbeiten.
Das Ziel ist dabei immer dasselbe: du zeichnest deinen Grundriss, weist Home Assistant Entities zu und exportierst das Ganze in einem Format, das du direkt in dein Dashboard einbauen kannst.
Räume zeichnen und einrichten
Die Werkzeugleiste oben gibt dir alles, was du zum Zeichnen brauchst. Mit dem Rechteckwerkzeug ziehst du einfach einen neuen Raum auf, gibst ihm einen Namen, eine Farbe und optional noch einen Bodenbelag wie Teppich oder Fliesen. Das Polygonwerkzeug ist für Räume gedacht, die nicht rechteckig sind, also zum Beispiel ein L-förmiger Flur. Du klickst einfach Punkt für Punkt und schließt die Form am Ende.
Bestehende Räume lassen sich mit dem Eckenwerkzeug nachträglich anpassen. Du klickst den Raum an, entsperrst ihn, und kannst dann einzelne Ecken verschieben. Standardmäßig sind alle Räume gesperrt, damit du beim Navigieren nichts aus Versehen verschibst. Das lässt sich oben in der Leiste ein- und ausschalten.
Rückgängig machen geht per Strg+Z, Wiederherstellen per Strg+Y. Funktioniert für eine bestimmte Anzahl an Schritten, danach ist Schluss.
Mehrere Etagen, Design und Shortcuts
Wenn du ein Haus mit mehreren Etagen abbilden willst, klickst du oben auf das Plus und legst eine neue Etage an. Du kannst zwischen den Etagen wechseln, sie benennen und auch wieder löschen. Jede Etage ist unabhängig voneinander.
Das Design lässt sich ebenfalls oben anpassen. Es gibt ein paar vorbereitete Stile, die sich unkompliziert wechseln lassen, entweder gleich am Anfang oder auch erst ganz am Ende. Das Grid im Hintergrund hilft beim sauberen Ausrichten der Räume, du kannst es ein- und ausblenden und auch das Snapping daran aktivieren.
Auf der linken Seite findest du Geräte-Icons, also Lichter, Schlösser, Waschbecken, Betten und so weiter. Die ziehst du einfach per Drag-and-Drop in die Räume. Oder du klickst das Icon an und wechselst dann mit V zum Auswahlwerkzeug, bevor du es platzierst.
Home Assistant Entities zuweisen
Sobald du ein Gerät im Grundriss platziert hast, klickst du es an und trägst die Entity ID aus Home Assistant ein. Die findest du in Home Assistant unter Einstellungen, dann Geräte und Dienste, dann Entitäten. Beim jeweiligen Gerät auf das Zahnrad klicken, und die ID ist sichtbar.
Neben der Entity ID kannst du noch einen Anzeigenamen vergeben, ein anderes Icon auswählen und eine Animation festlegen. Zur Auswahl stehen zum Beispiel Rotate oder Bounce. Die Animationen sind später im Dashboard sichtbar, wenn du das ha-floorplan Export-Format verwendest. Du kannst auch die Aktion definieren, die beim Klick auf das Gerät ausgelöst wird, für eine Lampe bietet sich Toggle an.
Export: Picture Elements oder ha-floorplan
Wenn der Grundriss fertig ist, klickst du oben auf Exportieren. Du hast dann zwei Möglichkeiten.
Picture Elements ist der einfachere Weg. Du bekommst eine ZIP-Datei mit einer PNG und einer YAML-Datei. Die PNG lädst du in Home Assistant unter config/www/floorplan/ hoch, den YAML-Code fügst du als manuelle Karte in dein Dashboard ein. Fertig. Der Nachteil: Animationen gibt es keine, die Geräte lassen sich zwar schalten, aber es bleibt optisch eher schlicht.
ha-floorplan sieht besser aus. Dafür brauchst du die ha-floorplan Integration aus HACS. Der Export enthält eine SVG-Datei, eine YAML-Datei und eine CSS-Datei. Alle drei lädst du ebenfalls nach config/www/floorplan/ hoch, dann fügst du den YAML-Code aus der beiliegenden Anleitung als manuelle Karte ein. Mit diesem Format laufen dann die Animationen, du siehst Hover-Effekte auf den Möbelstücken, und die Geräte reagieren visuell auf Statuswechsel.
Die Anleitung für beide Varianten liegt direkt in der ZIP-Datei drin, du findest sie aber auch unter alles-automatisch.de/tools/floorplan/anleitung.
Dateien hochladen und Cache-Probleme lösen
Das Hochladen geht am einfachsten über den File Editor in Home Assistant. Dort navigierst du zu www, legst einen Ordner namens floorplan an und lädst die Dateien einzeln hoch. Mehrere Dateien auf einmal hochladen geht leider noch nicht, das ist etwas umständlich, aber machbar.
Nach dem Einbauen der Karte kann es passieren, dass Home Assistant noch eine veraltete Ansicht anzeigt. Das liegt am Browser-Cache. Wenn das bei dir auftritt, öffne einfach die Entwicklertools im Browser, Rechtsklick irgendwo auf der Seite und dann Untersuchen. Dann Shift+Strg+R oder auf dem Mac Shift+Cmd+R für einen Hard Reload ohne Cache. Danach sollte die aktuelle Version des Grundrisses erscheinen.
So geht es weiter
Ich habe einige Zeit in dieses Tool gesteckt und hoffe, dass es dir den Einstieg in interaktive Grundrisse wirklich einfacher macht. Wenn dir irgendwas fehlt, etwas nicht funktioniert oder du Ideen für Erweiterungen hast, schreib mir das gerne in die Kommentare. Und wenn du Beispiele für fertige Grundrisse sehen willst, schau mal unter alles-automatisch.de/tools/floorplan/beispiele vorbei.
Nutzt du ha-floorplan schon länger oder steigst du gerade erst damit ein? Was sind die Dinge, die dir dabei bisher am meisten Kopfzerbrechen gemacht haben?
