Ihr wolltet mein Home Assistant Dashboard – hier ist es

Viele von euch haben mich nach meinem SolarEdge-Style Dashboard gefragt, das ich in diesem Video kurz gezeigt habe.
In diesem Beitrag zeige ich euch, wie ihr ein eigenes Dashboard zur Visualisierung eurer Energieflüsse in Home Assistant erstellen könnt – von einfachen Varianten bis hin zum Nonplusultra mit Darkmode und Themes.

Das Dashboard zeigt euch auf einen Blick PV-Produktion, Netzeinspeisung, Batterieladung und Verbraucher wie Wärmepumpe oder Haushaltsgeräte – übersichtlich, grafisch und individuell angepasst.

Falls ihr mein Video dazu noch nicht kennt, schaut es euch unbedingt an!

---

Voraussetzungen

Bevor ihr loslegt, solltet ihr sicherstellen, dass eure Entitäten in Home Assistant verfügbar sind. Dazu gehören:

• PV-Anlage und ggf. Batterie (z. B. am Zähler abgegriffen via IOmeter Lesekopf, habe ich auch schon mal getestet)
• Verbraucher wie Wärmepumpe, Spülmaschine, Waschmaschine oder Trockner
• Saubere Benennung mit Labels für einfaches Wiederfinden
• File Editor Add-on in Home Assistant

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.

Schritt-für-Schritt:

1. Hintergrundgrafik in den www-Ordner hochladen.
2. In der Bildelemente-Karte die Grafik als Hintergrundbild wählen.
3. Mit Zustandslabel die Entitäten (z. B. PV-Leistung, Batteriestand) einfügen.
4. Über Top und Left in Prozent die Position anpassen, bis die Labels mittig sitzen.

type: state-label
entity: sensor.akt_solarenergie
style:
  top: 13%
  left: 29%

---

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.

Schritt-für-Schritt:

1. Wieder Hintergrundgrafik (Tag/Nacht) einfügen.
2. Mit Konditional-Elementen Bedingungen definieren (z. B. „Batterie lädt gerade“).
3. Über Symbol Icons platzieren.
4. Symbol aus dem Katalog wählen.

type: conditional
conditions:
  - condition: state
    entity: sensor.solaredge25_battery_status
    state: B_STATUS_DISCHARGE
elements:
  - type: icon
    icon: mdi:battery-minus
    style:
      left: 30.5%
      top: 87.5%
title: Batterie Entladen

---

Variante 3: Bubbles ein- und ausblenden

Noch übersichtlicher wird es, wenn Bubbles nur angezeigt werden, wenn Werte aktiv sind – so bleibt das Dashboard klarer.

Schritt-für-Schritt:

1. Hintergrundgrafiken für Tag und Nacht vorbereiten.
2. Mit Konditional-Elementen Blöcke nur dann einblenden, wenn Bedingungen erfüllt sind (z. B. „Batterie lädt“).
3. Innerhalb des Blocks Labels, Icons und Bilder kombinieren.
4. 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.

Schritt-für-Schritt:

1. Nur die Pfeile per Konditional-Bild einblenden – Bubbles erstellt ihr als Icons direkt in Home Assistant.
2. Mit mehreren übereinanderliegenden Symbolen (Kreise) die Bubble nachbauen. Skalieren Ist über den Stil „Transform“ möglich.
3. Zustandslabel für Messwerte einfügen.
4. Ein eigenes Theme anlegen, in dem Farbvariablen für Hell- und Dunkelmodus definiert sind.
5. Icons und Texte greifen automatisch auf die Variablen zurück → perfekte Anpassung im Darkmode.

type: icon
icon: mdi:circle
style:
  left: 65%
  top: 82%
  color: var(--solaredgeinfo)
  transform: translate(-50%, -50%) scale(1.65)

frontend:
  themes:
    SolarEdge:
      modes:
        dark:
          solaredgeback: "#1a2c5e"
          solaredgeshadow: "#4864a6"
          solaredgegelb: "#e2b362"
          solaredgegrun: "#5dc481"
          solaredgeinfo: "#31509a"
          solaredgeinfoback: "#1a2c5e"
        light:
          solaredgeback: "#ffffff"
          solaredgeshadow: "#ffffff"
          solaredgegelb: "#e2b362"
          solaredgegrun: "#5dc481"
          solaredgeinfo: "#4864a6"
          solaredgeinfoback: "#ddedfd"

---

Fazit

Mit diesen vier Varianten könnt ihr euer eigenes Energie-Flow-Dashboard in Home Assistant gestalten – vom einfachen Einstieg bis zur Profi-Version mit Themes. Je nach Setup und persönlichem Geschmack könnt ihr so PV-Erzeugung, Batterie, Netz und Verbraucher übersichtlich darstellen und euer Smart Home wie ein HEMS-System visualisieren.

Mehr gefällig?

In meinem Video habe ich noch ein paar weitere Ideen, zum Beispiel wie man mit einer vollständigen Blanko-Grafik und den skalierbaren Icons komplett auf die Grafik-Erstellung verzichten kann.

---

🎁 Download der Grafiken

Damit ihr direkt loslegen könnt, habe ich alle SolarEdge-Style Grafiken in mehreren Varianten vorbereitet.
👉 Einfach unten in die Liste eintragen, und ihr bekommt den kostenlosen Download per Mail.

Zeigt her eure Dashboards

Für einen weiteren Austausch mit der Home Assistant Community und als Showroom für eure Dashboards, die ihr aus diesem MAterial hier erstellt habt, habe ich einen Beitrag in der Community Smarthome eingerichtet. Schaut gerne auch dort vorbei und zeigt, wie euer Dashboard im SolarEdge-Style geworden ist – oder ob ihr etwas ganz anderes aus meinem Ansatz gezaubert habt:

https://community-smarthome.com/t/home-assistant-energy-dashboard-im-solaredge-style/9304