In einem meiner Videos habt ihr kurz mein Home Assistant-Energy-Dashboard gesehen, aber eher so am Rande, das ich im SolarEdge-Design selber erstellt habe.
Ich habe daraufhin superviele Fragen bekommen, wo es her ist und wie man das selber machen kann. Nachdem ich nun durch einen Zufall Kontakt zu SolarEdge herstellen konnte, kann ich es euch heute endlich zeigen.
Hier ist das Video verlinkt, in dem ich alles genau erkläre:
Ich fänd es klasse, wenn wir in diesem Beitrag hier eure Dashboards sammeln und zeigen könnten, die ihr aus meiner Idee heraus gebaut und entwickelt habt. Postet also gerne eure Ideen und Resultate hier. Gerne aber auch Fragen oder Ergänzungen. Ich bin super gespannt, wie ihr meine Idee weiterentwickelt!
Hier ist die Kurzfassung dazu (für Fortgeschrittene User). Eine ausführlichere Version mit Codeschnipseln habe ich in meinem Blog-Beitrag, außerdem könnt ihr dort auch die Grafiken kostenlos bekommen, die ich in meinem Dashboard verwende:
Das Dashboard selbst baut ihr mit der Bildelemente-Karte, die ihr in der Größe frei gestalten könnt. Die Grafiken werden als Hintergrundbild eingebunden, darüber legt ihr Labels, Icons oder ganze Blöcke.
Variante 1: Statisches Dashboard mit Labels
Die einfachste Variante: Ihr legt ein Hintergrundbild mit euren Energieflüssen an (z. B. Tag- und Nacht-Version) und positioniert Entitäten genau auf die Bubbles.
- Hintergrundgrafik in den
www-Ordner hochladen. - In der Bildelemente-Karte die Grafik als Hintergrundbild wählen.
- Mit Zustandslabel die Entitäten (z. B. PV-Leistung, Batteriestand) einfügen.
- Über Top und Left in Prozent die Position anpassen, bis die Labels mittig sitzen.
Variante 2: Icons & Zustände mit Symbolen
Hier wird’s dynamischer: Statt nur Zahlen könnt ihr auch Icons einblenden, die sich je nach Zustand ändern – perfekt für Ladezustand, Einspeisung oder Wärmepumpe.
- Wieder Hintergrundgrafik (Tag/Nacht) einfügen.
- Mit Konditional-Elementen Bedingungen definieren (z. B. „Batterie lädt gerade“).
- Über Symbol Icons platzieren.
- Symbol aus dem Katalog wählen.
Variante 3: Bubbles ein- und ausblenden
Noch übersichtlicher wird es, wenn Bubbles nur angezeigt werden, wenn Werte aktiv sind – so bleibt das Dashboard klarer.
- Hintergrundgrafiken für Tag und Nacht vorbereiten.
- Mit Konditional-Elementen Blöcke nur dann einblenden, wenn Bedingungen erfüllt sind (z. B. „Batterie lädt“).
- Innerhalb des Blocks Labels, Icons und Bilder kombinieren.
- Optional Tag/Nacht-Grafiken in verschachtelten, zusätzlichen Konditional-Blöcken einfügen, um den Modus zu berücksichtigen.
Variante 4: Nonplusultra mit Themes & Darkmode
Das Highlight: Ein vollständig themenfähiges Dashboard, bei dem sich Farben und Icons automatisch an Hell- und Dunkelmodus anpassen.
- Nur die Pfeile per Konditional-Bild einblenden – Bubbles erstellt ihr als Icons direkt in Home Assistant.
- Mit mehreren übereinanderliegenden Symbolen (Kreise) die Bubble nachbauen. Skalieren Ist über den Stil „Transform“ möglich.
- Zustandslabel für Messwerte einfügen.
- Ein eigenes Theme anlegen, in dem Farbvariablen für Hell- und Dunkelmodus definiert sind.
- Icons und Texte greifen automatisch auf die Variablen zurück → perfekte Anpassung im Darkmode.
