⚡ Power Flux Card für Home Assistant (Power Flow Card) - HACS

[jayjojayson]

Power Flux Card

Hi, heute möchte auch gerne hier mein neues Projekt vorstellen. Bei uns drüben im Forum habe ich es am Wochenende schon präsentiert, aber hier gibt es bestimmt auch einige, die auf der Suche nach einer schöner kompakten Power Flow Card sind. Ich bin jedenfalls schon länger auf der Suche, neben einer optisch ansprechenden Lösung für den Power Flow, eine Ansicht ganz ähnlich zu evcc zu erhalten. Das Ergebnis ist meine “kompakte Ansicht” – schlicht, funktional und übersichtlich. Probiert es gerne aus, ich denke einen Power Flow werden viele in irgendeiner Art und Weise realisiert haben oder in Zukunft wollen.

Premiere mit Smart-Live

Udo hat netterweise ein Video dazu erstellt, in dem er wie gewohnt detailliert auf alle Funktionen eingeht. Inzwischen sind auf Grund der vielen Nachfragen, schon einige neue Features dazugekommen bzw. wurden ergänzt und runden die Nutzung ab.

⚡ Power Flux Card für Home Assistant – Stromfluss im Dashboard visualisieren!

Die Power Flux Card ist eine erweiterte, animierte Energiefluss-Karte für Home Assistant. Sie visualisiert die Energieverteilung zwischen Solar, Netz, Batterie und Verbrauchern mit wunderschönen Neon-Effekten und verschiedenen Animationen.

Wenn euch die Card gefällt, würde ich mich sehr über einen Stern auf github freuen.

Funktionen

• Echtzeit-Animation: Visualisiert den Energiefluss mit bewegten Partikeln.
• Mehrere Quellen & Verbraucher: Unterstützt Solar, Netz, Batterie und bis zu 3 zusätzliche Verbraucher (z.B. E-Auto, Heizung, Pool).
• Kompakte Ansicht: Eine minimalistische Balkendiagramm-Ansicht (inspiriert von evcc).
• Anpassbares Aussehen:
  • Neon Glow: Leuchteffekte für aktive Stromleitungen.
  • Donut Chart: Optionales Donut-Diagramm um das Haus-Icon, das den Energiemix zeigt.
  • Kometenschweif / Gestrichelte Linien: Wählen Sie Ihren bevorzugten Animationsstil.
  • Zoom: Anpassbare Größe für Ihr Dashboard.
  • Benutzerdefinierte Farben: Definiere benutzerdefinierte Farben für jede Quelle und jeden Verbraucher über den Editor.
  • Hintergrundfarbe: Aktiviere einen leicht getönten Hintergrund für die Kreise in der Standard-Ansicht.
• Dynamische Animationsgeschwindigkeit: Partikelgeschwindigkeit und -dichte passen sich dem aktuellen Energiefluss an.
• Weitere Informationen: Klicke auf eine beliebige Quelle/Verbraucher, um detaillierte Informationen in einem More-Info-Dialog anzuzeigen.
• Netz-Import/Export: Unterstützt sowohl separate Import/Export-Entitäten als auch eine kombinierte Entität mit positiven/negativen Werten.
• Netz-zu-Batterie: Optionaler direkter Sensor für den Netz-zu-Batterie-Fluss, der die Standardberechnung umgeht.
• Sekundäre Sensoren: Optional können sekundäre Sensorwerte in den Hauptkreisen (z.B. Tagesertrag für Solar, aktuelle Lade-/Entladeleistung für Batterie) angezeigt werden.
• Lokalisierung: Vollständig übersetzt in Deutsch und Englisch.
• Visueller Editor: Einfache Konfiguration über die Home Assistant UI.

---

Installation

HACS (Empfohlen)

• Das github über den Link in Home Assistant einfügen.

  

• Das “Power Flux Card” sollte nun in HACS verfügbar sein. Klicke auf “INSTALLIEREN”.

• Die Ressource wird automatisch zu deiner Lovelace-Konfiguration hinzugefügt.

Manuelle Installation über HACS

HACS (manuell)

1. Stelle sicher, dass HACS installiert ist.
2. Füge dieses Repository als benutzerdefiniertes Repository in HACS hinzu.
3. Suche nach “Power Flux Card” und installieren Sie es.
4. Lade die Ressourcen neu, falls Sie dazu aufgefordert werden.

Manuelle Installation in HA

Manuelle Installation

1. Lade die Datei power-flux-card.js von der Releases-Seite herunter.
2. Lade sie in Ihren www/community/power-flux-card/-Ordner in Home Assistant hoch.
3. Füge die Ressource in Ihrer Dashboard-Konfiguration hinzu:
   • URL: /local/community/power-flux-card/power-flux-card.js
   • Typ: JavaScript Module

---

Konfiguration

Du kannst die Karte direkt über den visuellen Editor in Home Assistant konfigurieren.

Haupt-Entitäten:

• Solar: Erzeugung (W).
• Netz: Netzleistung (W). Positiv = Import, Negativ = Export (oder separate Entitäten).
• Batterie: Batterieleistung (W) und Ladestand (%).

Zusätzliche Verbraucher:

• Du kannst bis zu 3 individuelle Verbraucher (z.B. Auto, Heizung, Pool) mit eigenen Icons und Beschriftungen hinzufügen.

Optionen:

• Zoom: Passen Sie die Größe der Karte an.
• Neon Glow: Aktivieren/Deaktivieren des Leuchteffekts.
• Donut Chart: Zeigt den Energiemix als Ring um das Haus an.
• Kometenschweif / Gestrichelte Linie: Ändern Sie den Stil der Flussanimation.
• Farbige Werte, anpassbare Namen und Icon - standard icons sind animiert
• Kompakte Ansicht: Wechseln Sie zum Balkendiagramm-Layout (evcc look a like).

Wie immer ziemlich frei konfigurierbar.

---

---

GitHub - jayjojayson/power-flux-card: Power Flow Card - display your animated Power Flow...

[wiwowilli]

Sehr schöne Karte.

Schön wäre wenn man noch mehr zusätzliche Verbraucher hinzufügen könnte.

[Schwippser]

Gefällt mir … aber eine Frage hab ich.

Wie wird der Flow Solar >>> Batterie dargestellt?

Hintergrund: In der Praxis teilt das BMS - sprich: Teil der erzeugten PV wird im Haus verbraucht und der überschüssige Teil lädt die Batterie. Kann die Karte das darstellen?

[jayjojayson]

Hi, danke schön. Mehr zusätzliche Verbraucher sind in Planung. Aktuell funktionieren 3 und geplant sind 5, dann habe ich nicht wirklich mehr Platz, außer ich breche zu den Seiten hin aus.

@Schwippser ja das kann die Card darstellen. Eine pipe geht von Solar zum Haus und eine pipe geht von Solar zur Batterie, sieht man hier auf den Bilder nicht, weil Solar weil kein Überschuss vorhanden war.

Schaut gerne das Video, dort kann man die Card sozusagen live sehen und Udo von Smart-Live erklärt das auch gut.

[Jonas.DER]

Hi. Sehr schön deine Arbeit!

Ich habe mir die Karte am Wochenende installiert und ein bisschen damit rumgespielt.

Was ich mir wünschen würde, zusätzlich zum Strom, unterschiedliche Verbraucher (Gas, Wasser) mit den passenden Verbrauchseinheiten anzuzeigen. Im Moment wird ja nur “W” angezeigt auch wenn ein Sensor mit “L” konfiguriert ist. Sollte sowas mal geplant sein, könnte es evt. sinnvoll sein die Dezimalstellen separat einzustellen.

Weiter könnte es hilfreich sein in allen Kategorien unterschiedliche Sensoren angeben zu können.

Als Beispiel nutze ich bei meinen Akkus zum Be- und Entladen unterschiedliche Sensoren. Aufladung eines Akkus läuft über die Integration, Entladung über eine Messsteckdose.

Schön wäre auch, wenn mehr als nur ein Akku und eine Solaranlage konfiguriert werden könnte und der Energiefluss separat eingestellt werden kann. (Ich habe zwei BKW; Anker, EcoFlow AC-Ladung).

Zur Zeit nutze ich die Sunsynk Power Flow-Karte. Diese ist mir aber zu unverständlich und habe dort auch nicht alles, wie oben gewünscht, konfigurieren können. Kommt aber aus all den bisher getesteten Karten am nächsten.

Wüsche dir viel Erfolg und Ehrgeiz! Ich bleibe bei deiner Karte am Ball und freue mich auf deine nächsten Updates!

Halt uns auf dem Laufenden!

Gruß Jonas

[Joachim-xo]

@jayjojayson

Power Flux Card

Hallo @jayjojayson , habe gerade mal ausprobiert: Wallbox und Heizstab werden unten links und unten rechts nicht angezeigt, ist aber im Moment kein Energiefluß. Der negative Wert vom Netz zur PV irritiert mich. Alle Sensoren sind mehrfach geprüft und entsprechend den Vorgaben eingetragen:

[papzt]

Hallo, ich habe Probleme mit bei der Karte diese mit der Solar Edge Modbus TCP Integration in Betrieb zu nehmen, hat dies bereits jemand gemacht ? und könnte mir sagen welche Entitäten hier verwendet wurden ?

[anon49628496]

(Beitrag vom Verfasser gelöscht)

[papzt]

Kannst du mir deine Eingestellten Entitäten zur Verfügung stellen ?

[anon49628496]

(Beitrag vom Verfasser gelöscht)

[papzt]

ich hab es hinbekommen

[Myrmidon]

Sehr schöne Karte, ist schon eingebaut.

Könnte man noch das Haus ergänzen um:

secondary_house: sensor…..

Gruß

Myrmidon

[jayjojayson]

Hi, sorry hatte privat die letzten Tage wenig Zeit bzw. andere Sorgen. Danke für euer Feedback, freut einen immer zu lesen. Dann versuche ich mal die Reihe abzuarbeiten.

@Jonas.DER Danke. Die Card ist als Power Flow Card zu sehen und das soll sie auch bleiben. Dein Änderungswunsch z.B. Gas oder Wasser darzustellen, würde eine komplett andere Berechnung benötigen und die Darstellung müsste komplett umgeschrieben werden. Das ist ein riesen Aufwand mit den svg pipes. Sorry, aber das hat nichts mit meiner Flow Card zu tun, muss ich leider so sagen. Hier sollen Watt-Ströme dargestellt werden, keine anderen Verbraucher.

Ich sitze aktuell schon ein paar Tage an der neuen Version und komme hoffentlich die Woche zum Abschluss. Dort können dann zwei zusätzliche Verbraucher definiert werden. Die Ausweitung mehrere Solaranlagen oder Batterien anzulegen behalte ich mir vor, ist aber aktuell noch nicht geplant. Dafür müssen auch neue pipe gezeichnet werden und die Card müsste sich nach oben erweitern. Mal schauen, bin da am überlegen.

Zum neuen Update schreibe ich dann nochmal ausführlicher und werde auch ein paar Bilder für verschiedene Flowmöglichkeiten zeigen.

@Joachim-xo Ich habe das auch geändert. Wenn die PV Leistung bei 0W liegt, dann wird zukünftig der Export vom Haus zum Grid/Netz erfolgen. Nur wenn Solarleistung anliegt erfolgt dann wieder die Animation von PV zu Grid.

@Myrmidon Danke. Wird im neuen Release enthalten sein, dass man auch beim Gesamtverbrauch einen zweiten Sensor hinterlegen kann. Außerdem gibt es noch die Möglichkeit die Farbe für alle “zweiten” Sensoren anzupassen.

[jayjojayson]

Guten Morgen, das Wochenende ist schon wieder vorbei, aber ich habe es noch geschafft.
Der neue Release v_2.5 ist zum Download bereit und es gibt viele Neuerungen für euch. Die Card wurde ordentlich erweitert und es hat mich einige Nerven gekostet bei der Implementierung der Neuerungen die bestehenden Querverweise zu beachten. Jetzt sollte aber alles korrekt funktionieren.

Ihr könnt nun die Batterieladung auch über den Hausverbrauch umleiten! Somit habt ihr zwei Möglichkeiten der Darstellung, entweder von Solar zur Batterie oder von Solar über Hausverbrauch zur Batterie. Außerdem können optional zwei neue zusätzliche Verbraucher angelegt und die Farben der secondary Entitäten angepasst werden.

Es besteht jetzt die Möglichkeit, z.B. nur den oberen oder unteren Teil der Card zu nutzen. Das ist praktisch, wenn man ein Teil Flow darstellen möchte, z.B. die Zusammensetzung der Poolpumpen oder die Darstellung unterschiedlicher PV Anlagen usw.. Im zweiten Bild habe ich mal meine drei PV Anlagen so zusammengefasst.

Man kann dann auch unten eine oder mehrere Batterien hinzufügen. Bei einer oder zwei Batterien könnte man den Verbraucher E-Auto für das Grid nutzen und so auch den Bezug aus dem Netz darstellen. Jeder kann also kreativ werden und die Bubbles zweckentfremden. Hier mal ein Beispiel für dreimal Solar zum Haus (addierte Solargesamtleitung) und von dort Ladung in die Batterie (geht bei mir, weil ich einen Sensor für Batterieladung und -entladung habe). Es hängt also auch immer ein wenig von den eigenen Sensoren ab.

Die Kompakte Ansicht hat einen weiteren Schalter im Card Editor erhalten, womit ihr die Details unten einblenden könnt. (alle Farben sind frei einstellbar, nur Textfarbe der Details bleibt grau). Damit sollte auch die Kompakte Ansicht attraktiver sein, weil man jetzt immer alle Daten auf einen Blick hat (die in / out Werte passen sich an, könnte also auch Netzexport, Batterieladung oder Entladung in der Auflistung auftauchen)

so schaut es bei mir auf dem Dashboard aus:

Hier nochmal alle Neuerungen im Detail:

• Option zur Auswahl von Icon, Text und sekundärer Entität für Hausverbrauch hinzugefügt
• Farbauswahl für alle sekundären Entitäten hinzugefügt
• Option zur Anzeige von zwei zusätzl. Verbrauchern (4+5)
• Option zur Anzeige in kW statt W (falls deine Sensoren kW anzeigen)
• Option zur Umleitung der Batterieladung über den Hausverbrauch
• Option zur Anzeige der Batterie Leistung statt des Ladezustands (SoC)
• Option für mehr Details in der Kompakt-Ansicht
• Verbesserungen im CSS
• Beispiele für die Verwendung von card_mod in der README.md hinzugefügt

Card_Mod Support:

Über Card_Mod könnt ihr jetzt die Pipes nach belieben anpassen, dazu hier ein kleines einfaches Beispiel bei dem die Pipe unter 30w für Solar nicht mehr angezeigt wird. Hier könnt ihr also kreativ werden und z.B. die Solar-Pipe ausblenden, wenn jemand klingelt oder wenn die Leistung unter einen bestimmten Bereich fällt (bei 0 ist sie nicht sichtbar, bei 0.1 ganz leicht und bei 1 vollständig)

type: custom:power-flux-card
entities:
  solar: sensor.solar_power
  grid: sensor.grid_power
  house: sensor.house_power
card_mod:
  style: |
    :host {
      --pipe-solar-opacity: {{ 1 if (states('sensor.solar_power') | float(0)) >= 30 else 0 }};
    }

Weitere card_mod Bespiele findet ihr bei mir im github:
https://github.com/jayjojayson/power-flux-card/blob/main/docs/README-de.md#verf%C3%BCgbare-css-variablen

---

---

[stephan1908]

Hallo jayjojayson,

genau so was hab ich gesucht. Vielen Dank schon mal.

Aber ich hab noch Fragen, vll find ich die Einstellungen auch nur nicht:

aktuell hab ich es so hinbekommen:

Ist es möglich, den export auch gelb darzustellen, wie in evcc und das Icon (Pfeil nach rechts) zu ändern?

[wiwowilli]

Tolle Karte. Sehr gut gemacht. Ich bin Begeistert.

[mag2000]

Ich finde die Karte auch super!

Eine Frage hätte ich @jayjojayson , wie bekommt man mehrere PV Quellen angezeigt (so wie in deinem Bild)? Man kann ja nur eine Entität auswählen.

Edit: ok, man verwendet einfach andere Icons für Netz und Batterie und dann geht es (da war was mit Wald und Bäumen ). Nur die Flussrichtung bei Batterie bekomme ich nicht hin.

[anon49628496]

(Beitrag vom Verfasser gelöscht)

[jayjojayson]

Hi, vielen Dank, freut mich wirklich, wenn die Card gut ankommt. Ich denke inzwischen ist sie sehr individuell einstellbar und ich werde mich bemühen, sie weiter auszubauen.

@stephan1908 Wenn ich das jetzt richtig verstanden, würde du gerne im der Balkenansicht die Aufteilung für export noch darstellen, nicht nur über die Klammer unten, richtig? Ich werde mal sehen, sollte aber machbar sein. Der Aufbau ist ziemlich kompliziert, aber ich gebe mir Mühe.

Ansonsten können die Farben soweit schon frei gesetzt werden, habe mir das aber gerade mal für den Export angeschaut. Dort kann aktuell nur die Farbe für den Export an sich bestimmt werden, aber noch nicht die Icon Farbe. Das werde ich mit dem nächsten Release auf jeden Fall ändern.

Hier ich mal etwas zusammengeklickt und aktuell über card_mod noch das export icon und die Klammer angepasst,

type: custom:power-flux-card
entities:
  solar: sensor.total_solar_power_kombiniert
  grid: sensor.total_power
  battery_soc: sensor.victron_system_battery_soc
  battery: sensor.vrm_battery_power_batt_1024
  consumer_1: ""
  consumer_2: sensor.werkstattheizung_leistung
  consumer_3: sensor.poolverbrauch_summe_watt
  house: sensor.total_power_kombiniert
  grid_export: sensor.skimmerpumpe_shelly_plug_switch_0_power
hide_inactive_flows: true
use_colored_values: true
hide_labels: true
show_donut_border: true
show_comet_tail: false
show_tinted_background: true
zoom: 0.85
show_flow_rates: true
hide_consumer_icons: false
show_neon_glow: true
show_label_solar: true
compact_view: true
visibility:
  - condition: numeric_state
    entity: sensor.growatt_outpowerwatt
    above: 20
show_dashed_line: true
grid_options:
  columns: full
color_solar: "#4ac332"
color_battery: "#319dd3"
color_grid: "#9f240f"
compact_details: true
color_text_house: "#dedede"
color_export: "#e5ce38"
color_house: "#a6a6a6"
color_icon_solar: "#a6a6a6"
color_icon_battery: "#a6a6a6"
color_icon_grid: "#a6a6a6"
card_mod:
  style: |
    :host {
      --icon-primary-color: rgb(166,166,166) !important; 
      --export-color: rgb(166,166,166) !important;
    }

@mag2000 ja probiert in Ruhe aus, es gibt wirklich viele Möglichkeiten.
Wenn du so wie im Bild mehrere PV darstellen möchtest, musst du einfach die “Entitäten” für Grid, Batterie und Consumer zweckentfremenden. Also einfach z.B. bei Grid die zweite PV hinterlegen usw. Ich habe dir hier mal ein Beispiel angefügt, wie ich es bei mir aktuell nutze.

Bei der Batterie Bubble steht leider noch ein Minus als Vorzeichen, kann mit Helper in HA ändern, aber ich will das in der Card gelöst bekommen. Mit card_mod kann man hier für die Batterie-Bubble dann auch das Grau bei 0 Watt Leistung erzielen.

type: custom:power-flux-card
entities:
  grid: sensor.opendtu_a8067c_ac_power
  battery_soc: ""
  house: sensor.total_solar_power_kombiniert
  grid_export: ""
  battery: sensor.batterie_neo800_total_ausgangsleistung
  solar: sensor.growatt_outpowerwatt_final
  battery_charge: ""
  battery_discharge: ""
  secondary_house: sensor.erzeugzung_taglich_kombination_solaranlagen
  secondary_solar: sensor.growatt_todaygenerateenergy
  secondary_grid: sensor.opendtu_a8067c_yield_day
  secondary_battery: sensor.batterie_neo800_total_energie_heute
hide_inactive_flows: true
zoom: 0.9
show_dashed_line: false
show_comet_tail: true
invert_battery: true
battery_charge_via_house: true
show_flow_rate_battery: false
battery_icon: mdi:solar-panel
show_flow_rate_solar: false
solar_icon: mdi:solar-panel-large
grid_icon: mdi:solar-panel
show_donut_border: true
color_secondary_house: "#d9d9d9"
color_solar: "#c1841a"
color_grid: "#dace49"
color_battery: "#e1d984"
show_label_battery: false
battery_unit_kw: false
battery_show_power: true
show_tinted_background: true
show_flow_rate_grid: false
color_house: "#666666"
color_secondary_battery: "#878787"
color_text_battery: "#878787"
card_mod:
  style: |
    .bubble.tinted.battery {
      {% if states('sensor.batterie_neo800_total_energie_heute') | float > 0 %}        
        --neon-green: yellow !important;
      {% else %}
        --neon-green: grey !important;
      {% endif %}
    }
    :host {
      {% if states('sensor.batterie_neo800_total_energie_heute') | float > 0 %}        
        --neon-green: yellow !important;
      {% else %}
        --icon-primary-color: grey !important;
      {% endif %}
    }

@anon49628496 war schneller. Batterie umkehren kannst du unten in den Batterie Settings über den Schalter vornehmen.

[stephan1908]

Cool, danke für deine Antwort.

Mit den Farben passt’s so auch schon gut für mich. Ich meinte nicht die Farbe von dem Export Icon, sondern das Icon, also so ein Transmission Tower mit dem Pfeil wär cool, oder frei konfigurierbar.