Mein Home Assistant Dashboard sieht endlich genauso intelligent aus wie mein Zuhause
Ich habe nicht viele smarte Geräte in meinem Haus, aber die, die ich habe, waren schon immer intelligenter als ihre Steueroberflächen. Die Lichter reagieren auf Automatisierungen, mein 3D-Drucker meldet seinen Status an einen Server, der in einer VirtualBox-VM läuft, und meine Telefone protokollieren pflichtbewusst alle paar Minuten ihren Batteriestand.
Aber lange Zeit sah das Dashboard, das all dies zusammenführte, aus wie ein Einstellungsmenü aus dem Jahr 2010. Ich habe mein altes Android-Handy in ein Smart-Home-Dashboard umgewandelt, nur um zu erkennen, dass ich in meinem Versuch, mein Haus zu vernetzen, das Dashboard vernachlässigt hatte. Aber nach einigen Iterationen, Sackgassen und mehr YAML, als ich zugeben möchte, ist mein Home Assistant-Dashboard endlich auf dem neuesten Stand.
Ein gutes Dashboard beginnt mit dem Design, nicht mit den Geräten
Warum Layout und Benutzerfreundlichkeit wichtiger sind als das Hinzufügen eines weiteren Sensors
Das Lovelace-Kartensystem von Home Assistant ist großartig, aber es würde für meinen Zweck nicht ausreichen. Ich habe bewusst entschieden, Home Assistant völlig zu ignorieren, und ein Dashboard entworfen, das ich tatsächlich als eigenständiges Webprototyp haben wollte - eine dunkle Oberfläche, um meine Augen um 3 Uhr morgens nicht zu belasten, eine große Uhr, eine kleine Begrüßung, Batterieanzeigen für meine Pixel-Telefone, Lichtkarten, die leuchten, wenn sie eingeschaltet werden, einen Schalter für meine Klimaanlage mit Status des Stromverbrauchs, ein Wetter-Widget und ein Kalender-Panel, um alle anstehenden Aufgaben zu sehen.
Das Design durchlief mehrere ästhetische Phasen, bevor ich mich schließlich für eines entschieden habe. Ich begann mit einem sauberen, türkisfarbenen Kartenraster, hatte eine kurze Phase mit Serifenschriften und dunklen Luxus-Elementen (die schnell verworfen wurde, weil sie zu überladen waren), und schließlich ein Phosphor-Grün-Terminal-Look. Grün für gesunde Anzeigen, Bernstein für Warnungen, kaltes Blau für Daten und Rot für Fehler. Als das erledigt war, integrierte ich alles von meinen Deckenleuchten bis zu meinem 3D-Drucker in das Layout, und hatte ein einsatzbereites Design. Claude ist mein KI-Werkzeug der Wahl für UI-Design, und es ist überraschend gut darin, deine Vision zu verstehen und eine Benutzeroberfläche zu erstellen, die nicht sofort nach Stil-Coding schreit.
Da dieses Layout nun um feste Pixelspalten gebaut wurde und nicht auf mein Pixel 9a passen würde, habe ich beschlossen, anstatt die Anpassungsfähigkeit im Dashboard nachträglich einzubauen und dabei möglicherweise das gerade fertiggestellte Desktop-Layout zu beeinträchtigen, ein einfacheres, leichter zu bedienendes Dashboard für mein Telefon von Grund auf neu zu erstellen. Es ist ein einziger, randfüllender vertikaler Stapel mit allen Bedienelementen direkt oben, sodass ich keine zusätzlichen Bewegungen machen muss, um zu dem zu gelangen, was ich brauche. Das Desktop-Dashboard behält alle aufwendigen Informationen bei, und das Telefon-Dashboard zeigt mir nur, was ich sehen möchte.
Jetzt gab es nur noch ein Problem. Als Webentwickler kenne ich React, und Home Assistant spricht diese Sprache nicht.
Dann erinnerte mich Lovelace daran, wer das Sagen hatte
Eine Vision in die Realität umzusetzen, erfordert mehr Feinabstimmung, als man denkt
Das Dashboard-System von Home Assistant beschreibt alles in YAML unter Verwendung eingebauter Kartentypen sowie allem, was die Community erstellt hat. Man kann benutzerdefiniertes HTML und JavaScript einfügen und es dabei belassen (glaub mir, ich habe es versucht). Ein Ansatz mit HTML-Karten, der WebSocket-Verbindungen verwendet, um Live-Daten abzurufen, stieß ebenfalls auf CORS-Beschränkungen, da Fetch-Aufrufe innerhalb des iframes einer Karte immer wieder blockiert wurden.
Hier kamen die Mushroom Cards praktisch zum Einsatz. Dies ist eine von der Community erstellte Sammlung von Karten, die über HACS — den Home Assistant Community Store — verfügbar ist und kostenlos genutzt werden kann. Das Ziel von Mushroom ist einfach: Sie erhalten eine Reihe von sauberen, von Material UI inspirierten Karten, die Sie vollständig über den visuellen Editor konfigurieren können, ohne YAML zu benötigen.
Der Stack bestand schließlich aus Mushroom für die Kern-Entity-Karten, Button Card für alles, was benutzerdefinierte Layouts benötigt, Atomic Calendar Revive für das Kalenderpanel, Layout Card für das gesamte Raster und card-mod, um das Styling von allem nach meinem Willen zu verändern. Das Rastersystem von Layout Card gab mir eine Aufteilung in drei Spalten. Geräte und Lichter gestapelt auf der linken Seite, der Status meines 3D-Druckers in der Mitte und Wetter und Kalender auf der rechten Seite.
Ein Dashboard passt nicht auf jeden Bildschirm
Warum Telefone, Tablets und Desktop-Computer unterschiedliche Layouts für dasselbe Zuhause benötigen
Das mobile Dashboard war ein bisschen Kopfschmerzen. Es ist ein einzelner, randloser vertikaler Stapel, der nach dem neu geordnet ist, was ich unterwegs tatsächlich überprüfe: ein Uhrenkopf mit Statusanzeigen für Home Assistant, meinen 3D-Drucker, Lichtschalter, die smarte Steckdose, das vollständige Druckerpanel, Gerätebatterien, Wetter und eine abgespeckte siebentägige Ereignisliste anstelle des Monatsrasters auf dem Desktop.
Der Trick, der es funktionieren ließ, bestand darin, Mushroom vollständig aufzugeben und jeden Abschnitt über die JavaScript-Vorlagen von Button Card als reines HTML darzustellen. Das bedeutete echte, touchfreundliche Umschalt-Pills mit animierten Knöpfen, eine erweiterbare Energieverbrauchsanzeige auf dem Tapo-Stecker und am besten von allem die Outfit- und DM Mono-Schriften, die die Desktop-Version verloren hatte, wieder hereingeholt. Wenn Sie Ihr altes Android-Telefon als immer eingeschalteten Nachttischassistenten umfunktionieren, ist es wichtig, eine gut passende Steuerzentrale zu haben.
Glücklicherweise scheint Claude Code sehr begabt darin zu sein, YAML-Dashboards zu erstellen, und konnte mich bis zum Großteil des Endergebnisses bringen. Die einzigen Probleme, auf die es stieß, waren die Korrektur einiger Ausrichtungs- und Touch-Register-Probleme auf dem Telefon-Dashboard. Es erforderte, den DOM-Baum zu durchsuchen, um problematische Elemente zu identifizieren und zu beheben, aber sobald man Claude genügend Daten darüber gibt, was man möchte (oder wo der Fehler liegt), kann es ein perfekt funktionales und gut gestaltetes YAML-Dashboard liefern, ohne viel Aufwand.
Der YAML-Schmerz war absolut lohnenswert
Der Nutzen beim Aufbau eines Dashboards, das auf Ihr Zuhause zugeschnitten ist
Was ich jetzt habe, ist ein Dashboard, das das dahinterliegende Zuhause widerspiegelt. Auf dem Desktop sehe ich alle Informationen, die ich möchte, auf eine Weise, die weder zusammenkneifen noch präzises Klicken erfordert, um sie zu steuern. Auf meinem Handy zeigt das Dashboard nur, was ich brauche, und die zusätzlichen Informationen werden aus der Sicht gehalten, aber sind da, wenn ich sie brauche.
Die Lektion, die ich weitergeben würde, ist, rückwärts zu entwerfen, zweimal, wenn nötig. Gestalte das Dashboard, das du willst, ohne Einschränkungen, übersetze es in Lovelace, und wenn eine Bildschirmgröße dir Probleme macht, entwickle dafür, anstatt dich mit einem Kompromiss zufriedenzugeben. Mein Zuhause ist schon seit einer Weile smart, und jetzt verhält sich jeder Bildschirm, der es steuert, endlich so, als wüsste er das.