Hallo zusammen, es ist noch so leer hier!
ich möchte euch mein aktuelles Home-Assistant-Dashboard vorstellen. Es heißt bei mir einfach Homi und ist über längere Zeit aus dem Rounded-Bubble-Design und verschiedenen Custom Cards entstanden. Mein Ziel war kein möglichst spektakuläres Dashboard, sondern eine Oberfläche, die im Alltag schnell verständlich ist, auf Desktop und Tablet funktioniert und sich später noch vernünftig pflegen lässt.
Der aktuelle Aufbau
Das Dashboard besteht aktuell aus 12 Ansichten und 115 Decluttering-Templates. Dazu kommen zwei eigene Navbar-Templates für Desktop und Tablet.
Neben der Startseite gibt es Raumansichten für Wohnen, Küche, Bad, Flur und Terrasse. Weitere Ansichten bündeln größere Themen wie Kaffeemaschine, 3D-Drucker, Energieverbrauch, Homelab, Batterien und Wetter. Ich gehe deshalb nicht auf jede Ansicht einzeln ein – wichtiger ist das gemeinsame System dahinter.
Fast alle Ansichten verwenden das Sections-Layout. Nur die Wetterseite nutzt wegen ihres besonderen Aufbaus ein eigenes Grid-Layout. Die normale Reihenfolge ist meistens:
- kompakte Topbar mit den wichtigsten Werten,
- Uhr beziehungsweise aktive Timer,
- mehrere thematische Kartengruppen,
- Detail-Popups,
- responsive Navigation am unteren Rand.
Optisch nutze ich dunkle blau-violette Flächen, große Rundungen, kompakte Schrift und möglichst wenig Schatten. Farben haben dabei meistens eine Bedeutung: Grün steht beispielsweise für aktiv oder in Ordnung, Orange für eine Warnung und Rot für einen kritischen Zustand.
Die wichtigsten Bausteine
Das Grundgerüst bilden vor allem diese Custom Cards:
- Decluttering Card für wiederverwendbare Templates
- Button Card für frei gestaltete Status-, Geräte- und Gruppenkarten
- Bubble Card für Popups
- Auto Entities für automatisch gefilterte Listen
- Navbar Card für die Navigation auf Desktop und Tablet
Dazu kommen an passenden Stellen spezialisierte Karten, beispielsweise ApexCharts, die Energieverbrauchskarte oder Horseshoe-Anzeigen. Ich versuche aber nicht, jede Funktion mit der Button Card nachzubauen. Wenn eine native oder spezialisierte Karte eine Aufgabe besser löst, wird sie in das vorhandene Design eingebettet.
Warum so viele Templates?
115 Templates klingen zunächst nach sehr viel. Tatsächlich machen sie das Dashboard aber erst wartbar. Die Templates enthalten das Aussehen und die Logik, jedoch keine fest eingebauten Geräte. Die konkreten Entitäten werden erst in der jeweiligen Ansicht als Variablen übergeben.
Dadurch kann ich dieselbe Licht-, Status- oder Timerkarte in mehreren Räumen einsetzen. Ändere ich später Höhe, Schrift oder Farben eines gemeinsamen Templates, wird die Änderung überall übernommen.
Ein Beispiel ist die Statusgruppe auf der Startseite. Sie fasst eingeschaltete Lichter, offene Rollläden, den Sicherheitsstatus und kritische Batterien in vier kleinen Kacheln zusammen:
type: custom:decluttering-card
template: homi_group_home_status_overview
variables:
- sensor_angeschaltete_lichter: sensor.dashboard_lichter_aktiv
- sensor_offene_rollos: sensor.dashboard_rolllaeden_offen
- sensor_status_sicherheit: sensor.dashboard_sicherheitsstatus
- sensor_batterien_kritisch: sensor.dashboard_batterien_kritisch
Die hier gezeigten Entitäten sind absichtlich fiktiv.
Kartengruppen statt einzelner Sensorlisten
In den Ansichten versuche ich, zusammengehörende Dinge als eine visuelle Gruppe darzustellen. Eine Gruppe besitzt einen gemeinsamen Header und darunter zwei oder mehrere kompakte Kacheln. So bleiben beispielsweise Beleuchtung, Raumklima, Geräte, Sicherheit oder Steckdosen klar voneinander getrennt.
Die Beleuchtungsgruppe der Küche wird in der Ansicht nur noch mit zwei Entitäten aufgerufen:
type: custom:decluttering-card
template: homi_group_kueche_lights
variables:
- light_deckenlicht: light.kueche_deckenlicht_beispiel
- light_lichterkette: light.kueche_led_beispiel
Das Template baut daraus den Gruppenrahmen und zwei homi_tile_light-Kacheln. Tippen schaltet das Licht, ein längerer Druck öffnet die Detailansicht und die Kachel zeigt auch die Helligkeit an. Die eigentliche Ansicht bleibt dadurch sehr kurz.
Dasselbe Prinzip verwende ich unter anderem für den Kühlschrank, Rauchmelder, die Kaffeemaschine, den 3D-Drucker und meine Homelab-Systeme. Gerade bei komplexeren Geräten ist die Hauptkarte bewusst reduziert. Weitere Messwerte und Steuerungen liegen in einem Popup, statt die Übersicht zu überladen.
Timer, Popups und dynamische Listen
Timer sind bei mir eigene wiederverwendbare Kacheln mit Live-Countdown. Auf einigen Seiten ersetzen kompakte Timerkarten die Uhr, solange ein Timer aktiv ist. Eine Gruppe mit zwei Lüftungstimern sieht im Aufruf beispielsweise so aus:
type: custom:decluttering-card
template: homi_group_bad_timers
variables:
- timer_duschen: timer.bad_lueftung_duschen_beispiel
- timer_toilette: timer.bad_lueftung_toilette_beispiel
Für Details nutze ich Bubble-Card-Popups. Dort landen zum Beispiel Lichtsteuerungen, offene Kontakte oder Aktionen für virtuelle Maschinen. Gefährlichere Aktionen wie Neustart oder Herunterfahren haben zusätzlich einen Bestätigungsdialog.
Dynamische Listen werden mit Auto Entities erzeugt. Das nutze ich vor allem bei Batterien, eingeschalteten Lichtern und offenen Kontakten. Dadurch zeigt das Dashboard nur die Einträge, die gerade wirklich relevant sind, ohne dass ich jede Karte von Hand ein- und ausblenden muss.
Responsive Nutzung
Das Dashboard ist nicht nur für einen Bildschirm gebaut. Die Sections ordnen sich abhängig von der verfügbaren Breite neu an. Zusätzlich gibt es zwei Navbar-Varianten: eine für Desktop und eine für Tablet. Auch einzelne Karten können über Sichtbarkeitsregeln nur auf bestimmten Displaygrößen erscheinen.
Die Oberfläche bleibt dadurch auf dem großen Monitor übersichtlich, ohne auf dem Tablet zu einer unlesbaren Miniaturansicht zu werden.
Mein Fazit
Der Aufbau hat anfangs mehr Arbeit gemacht als ein Dashboard aus einzelnen Standardkarten. Inzwischen zahlt sich das Template-System aber aus: Neue Räume oder Geräte lassen sich aus vorhandenen Kartenfamilien zusammensetzen und gemeinsame Änderungen müssen nur an einer Stelle erfolgen.
Für mich ist Homi inzwischen ein guter Mittelweg aus Optik, Bedienbarkeit und Wartbarkeit. Es ist weiterhin ein laufendes Projekt, aber die grundlegende Struktur steht: kompakte Übersichten, wiederverwendbare Templates und Details nur dort, wo man sie wirklich braucht.
Falls Interesse besteht, kann ich einzelne Kartenfamilien oder Templates später noch genauer zeigen.
Highlights:
richtig gut gemacht und vielen Dank auch für die sehr informative Darstellung und Beshreibung 
