Nachdem du deine SVG-Datei und die dazugehörige CSS-Datei erstellt hast, müssen beide an den richtigen Ort gespeichert werden, damit Home Assistant sie später verwenden kann.

Wenn du Home Assistant OS auf einem Raspberry Pi betreibst, speicherst du eigene Dateien im sogenannten config-Verzeichnis. Dieses Verzeichnis erreichst du über den File Editor oder Studio Code Server in Home Assistant.

Erstelle im Ordner /config einen Unterordner namens www und darin einen weiteren Ordner namens floorplan. Der vollständige Pfad sieht dann so aus:

/config/www/floorplan/

In diesem Ordner speicherst du deine beiden Dateien:

  • floorplan.css
  • grundriss.svg (oder wie du deine SVG benannt hast)

Sobald die Dateien dort liegen, kannst du im Dashboard darauf zugreifen. 

Hier ist ein Beispiel für den Inhalt der CSS-Datei:

/* Grundfarbe für alle Räume */
[id^="raum_"] {
  fill: lightgray;
  fill-opacity: 0.3;
  stroke: none;
}

/* Fenster offen = rot eingefärbt */
#raum_C009_10.fenster_offen {
  fill: red !important;
  fill-opacity: 0.5;
}

/* Hintergrundfarbe des Plans */
body, svg {
  background-color: white !important;
}

Diese CSS-Datei sorgt später dafür, dass die SVG farblich angepasst wird. Sie legt z. B. fest, dass alle Räume mit einer ID, die mit raum_ beginnt, eine neutrale hellgraue Grundfarbe bekommen.

Wenn ein Fenster geöffnet ist, kann Home Assistant dem betroffenen Raum eine zusätzliche CSS-Klasse wie fenster_offen zuweisen. In der CSS-Datei ist dann definiert, dass dieser Raum rot eingefärbt wird.

Die Zeile #raum_C009_10.fenster_offen ist nur ein Beispiel. Du kannst hier natürlich alle Räume aufführen, die du in deiner SVG-Datei mit eindeutiger ID als Rechteck definiert hast. 

Beispiel:

#raum_C001.fenster_offen { ... }
#raum_C002.fenster_offen { ... }
#raum_EG_links.fenster_offen { ... }

Wichtig ist, dass die ID im CSS mit der ID im SVG übereinstimmt.


Zuletzt geändert: Sonntag, 29. Juni 2025, 16:04