Zeigt her eure Dashboards!

[Riot]

Pixelgenaues Wandpanel-Dashboard mit dynamischen Farb-Feedbacks

Hallo zusammen,

ich möchte euch heute mein Dashboard vorstellen, das ich primär für unser fest installiertes Wandpanel (Wallpanel) konzipiert und optimiert habe. Ziel war eine Benutzeroberfläche, die komplett ohne Scrollen auskommt, auf einen Blick alle wichtigen Hauszustände liefert und sich wie ein echtes, integriertes Gerät anfühlt.

Die Kern-Features des Dashboards:

• UI/UX Steuerung: Das Dashboard läuft im vollen kiosk_mode (Seitenleisten und Header für das Tablet-Profil sind komplett ausgeblendet). Der Wechsel zwischen Ansichten erfolgt flüssig per swipe_nav.

• Pixelgenaues Grid: Basis ist ein striktes custom:grid-layout. Jede Fläche und Karte wurde haarklein mittels view_layout verschoben und exakt auf die Bildschirmauflösung fixiert.

• Dynamische Zustände per Farbe: Fast jedes Element nutzt Jinja-Templates für ein direktes, visuelles Feedback:

  • Heizung: Die Hauptkarte wird orange, wenn das System heizt. In den Sub-Karten gleicht ein Template ab, ob die Ist-Temperatur aktiv unter der Soll-Temperatur liegt, und färbt das Icon-Feld entsprechend ein.

  • Batteriewarnungen: Ein globaler Farbsensor steuert die Hauptkarte (sensor.zustand_batterie_farbe). Im Pop-up selbst schlagen die Icons je nach Ladestand vollautomatisch von Grün über Orange bis Rot um.

  • Smarte Abfall-Anzeige: Eine custom:button-card, die per JavaScript die nächsten zwei Termine ausliest und das Tonnen-Icon passend zur Abfallart (Bio = Braun, Papier = Blau etc.) einfärbt.

• Pop-up-Konzept: Um die Hauptseite nicht zu überladen, öffnen die Haupt-Buttons (Lampen, Steckdosen, Kameras, Heizung) schlanke custom:bubble-card Pop-ups mit Detailreglern und Verbrauchswerten (Watt / kWh).

  Hauptansicht

  

  Lampen

  

  Steckdosen

  

  Batterien

  

  Heizung

  

  Kameras

  

  Pflanzen

  

Ergänzung: Per Swipe geht es direkt weiter zum Energie-Dashboard. Dieses ist im Vergleich etwas schlanker aufgebaut, liefert aber durch einige individualisierte Sensoren und Farbanpassungen alle wichtigen Verbrauchsdaten auf einen Blick.

Insgesamt steckt in dem gesamten Dashboard-Code mittlerweile echt extrem viel Arbeit (das gesamte YAML hat 3.405 Zeilen!). Wer Interesse an dem Code oder bestimmten Teilen davon hat, kann sich gerne melden, dann teile ich den gerne!