Bevor wir mit dem Erstellen des Dashboards beginnen, müssen einige wichtige Zusatzfunktionen in Home Assistant installiert werden. Diese Erweiterungen machen das Dashboard nicht nur schöner, sondern ermöglichen auch spezielle Funktionen wie SVG-Visualisierungen und dynamische Karten.

Über den HACS (Home Assistant Community Store) installierst du folgende Komponenten:

  • Mushroom
    Für moderne, elegante Karten und einheitliches Design

  • button-card
    Ermöglicht individuell gestaltete Buttons mit voller Kontrolle über Stil und Verhalten

  • card-mod
    Damit lassen sich fast alle Karten mit zusätzlichem CSS individuell anpassen

  • ha-floorplan
    Wichtig für die Einbindung und Steuerung von SVG-Dateien (z. B. Grundrisse, Fensterstatus)

  • Decluttering Card
    Spart viel Schreibarbeit durch wiederverwendbare Kartenvorlagen

Diese Add-ons findest du direkt in HACS, wenn du in Suchleiste die Erweiterung eingibst. Sie sollten alle installiert und aktiviert sein, bevor du mit dem Aufbau des Dashboards beginnst (siehe Abbildung).

Abbildung 1

Eine SVG-Datei (Scalable Vector Graphic) ist die Grundlage für die spätere visuelle Darstellung im Dashboard. Sie eignet sich besonders gut, weil man darin einzelne Bereiche wie Fenster, Räume oder Etagen exakt definieren und später gezielt ansprechen möchte.

Um eine passende SVG-Datei zu erstellen, gibt es zwei Möglichkeiten:

  1. Vorhandenen Grundriss digital nachzeichnen
    Falls du schon einen Grundriss als Bild (z. B. PNG oder PDF) hast, kannst du ihn in einem Programm wie Inkscape öffnen und die Räume, Fenster usw. als Vektorelemente nachzeichnen. Dabei ist es wichtig, jedem relevanten Objekt eine eindeutige ID zu geben, z. B. fenster_c003_ost.

  2. Grundriss komplett selbst zeichnen
    Alternativ kannst du direkt in Inkscape einen einfachen Grundriss erstellen – ideal für kleinere Projekte oder wenn kein Plan vorhanden ist. Auch hier müssen die Fenster und Räume als einzelne Objekte mit individuellen IDs angelegt werden.

Damit Räume später farblich markiert werden können (z. B. wenn ein Fenster offen ist), empfiehlt es sich, für jeden Raum ein Rechteck zu zeichnen. Dieses Rechteck sollte ebenfalls eine eindeutige ID bekommen, etwa raum_c003. Dadurch lässt sich später gezielt die Hintergrundfarbe ändern, wenn ein bestimmter Zustand erkannt wird.


Zuletzt geändert: Sonntag, 29. Juni 2025, 15:58