Lovelace Power Nexus Card (CustomCard)

Hallo zusammen!

Darf ich vorstellen: meine Power Nexus Card für Home Assistant!

Warum noch eine? Ich habe verschiedene Power-Flow-Karten ausprobiert, aber keine bot mir alle Möglichkeiten, die ich wollte. Meistens passten die grafischen Details nicht zu meinen Vorstellungen. Der GUI-Editor müßte auf Englisch und Deutsch funktionieren.

Reposity

Beschreibung

Die Power Nexus Card ist eine Custom Lovelace Card für Home Assistant zur Visualisierung von Energieflüssen. Im Zentrum steht ein frei definierbares Energiesystem mit einem zentralen Haus-Knoten (Nexus), um den beliebig viele Energiequellen und Verbraucher angeordnet werden.

  • Gesamter Karteninhalt individuell zoombar
  • Frei konfigurierbare Knoten (PV, Batterie, Netz, Verbraucher …)
  • Drei Grössenstufen (S / M / L) für die Knoten
  • Knotenposition und Knotenabstand frei wählbar
  • Knoten zu Gruppen zusammenfassbar
  • Frei anpassbare Flusslinien (Grösse, Richtung)
  • Dynamische Sichtbarkeit (Schwellwert-basiert) für Knoten und Flusslinien
  • Responsives Grid-Layout für Section Dashboards
  • Zusätzlicher „Buttonmodus" (optische Varianz) wählbar
  • Ladestände grafisch darstellbar
  • Wahl zwischen einer Gesamt-Entität oder zwei Einzel-Entitäten für Input und Output
  • GUI-Editor zur Konfiguration
  • Aktueller Sprachsupport: DE & EN

Installation

HACS

1. HACS → ⋮ Menü → **Custom repositories**

2. URL: `https://github.com/MankiesWorkshop/power-nexus-card\`

3. Typ: **Lovelace****Add**

4. Karte in HACS suchen und installieren

Manuell

1. `power-nexus-card.js` in dein `config/www/`-Verzeichnis kopieren

2. In der Lovelace-Ressourcenliste hinzufügen:

url: /local/power-nexus-card.js

type: module

Screenshot

Sehr schöner Ansatz mit der gesteigerten Flexibilität!

Sind die Flusslinie animiert und wenn ja, wie?

Ich habe das „Problem“: bei der Power-Flow-Card-Plus zwingen die „stroke-dashoffset-Animationen“ per CSS den Browser von meinem Wanddisplays die Vektorgrafik in jedem Frame permanent neu zu berechnen (CPU-Rendering).

Daraus resultiert eine ~ 10 Grad höhere CPU-Temperatur sowie ein gesteigerter Stromverbrauch. In dem Fall betrachte ich das nicht als unerheblich da es sich um eine 24/7 Anwendung handelt

Hallo Linos,

Die Flusslinien sind animiert. Ich hab mit der Performance/CPU Last hier noch keine Probleme bemerkt, aber die Temperaturen meines MiniPC jetzt auch nicht beobachtet.

Ich habs mir notiert und werde in der nächsten oder übernächsten Version eine Checkbox reinmachen animiert/starr (wobei dann die Richting anhand von Pfeilen angezeigt werden soll).

Grüsse

Mankie

Hallo Mankie,

bei meinem mini Pc (N250) macht das rund 5W (~40kWh/Jahr) aus und ein Kern war praktisch ausgelastet.

So habe ich es mir per custom button card gebaut :sweat_smile: Die Pfeile kann man auch noch etwas beruhigen, wenn man den Wert zum Richtungswechsel einstellen kann (Hysterese)

Oberhalb von der kWh-Tag-Tabelle könnte dann Nexus sitzen.

Vielleicht noch ein paar Ideen aus meiner Styling-Welt und meinen semantischen Emotionen​:sweat_smile:

  • Farben einstellen können per Variable (var- ), hex geht ja schon
  • Sekundär-Information (zB Batterie- SoC)
  • Primär / Sekundär- Text farblich trennen
  • Icon Farbe trennen von Primär / Sekundär- Text
  • Flusslinie Farbe getrennt einstellbar
  • dynamische Flusslinie Farbe per Leistungs-Wert
  • Icon Größe einstellbar

Ich persönlich verwende konstant 4 Signalfarben (Ambiente, Aktiv, Fertig, Warnung) und 3 Textfarben (primär, sekundär, mute) in meinem Dashboard.

→ vielleicht ist das eine oder andere noch eine Anregung für dich, auf dem Weg zur perfekten flowing Card :+1:

Hallo Linos,

Ein paar dieser Sachen (z.B. SOC) sind tatsächlich drin, nur leider auf meinen ersten Screenshots noch nicht drauf.

Aktuell stellst Du die Farbe pro Knoten ein und der Farbverlauf geht vom Start- zum Zielknoten.

Die Grösse ist generell in 3 Stufen anpassbar und insgesamt Zoom-fähig.

Sieht man halt alles nicht im Screenshot und teilweise steht es auch nicht im Text. Da hilft nur ausprobieren und Feedback geben :slight_smile:

Das mit der Leistungsaufnahme des PC interessiert mich generell aber auch mal. Ich schau mir das mal an, ob das hier auch signifikant steigt bei viel Animation.

Grüsse

Mankie

Spätestens wenn die Pfeile da sind (Animation false) dann probiere ich ganz bestimmt​:blush:.

So habe ich erstmal aus den Screenshots interpretiert…

→ soll auch nur als Inspiration/Feedback dienen.

Sowas hab ich tatsächlich schon länger gesucht, da mir die powerflow Card nicht flexibel genug in der Größe ist.

Lediglich bräuchte ich einen primärwert für den livestatus und einen sekundär für die tageswerte.

Ist dies möglich?

Hallo Linos,

  1. Was genau meinst Du mit Farben per Variablen einstellen? Hast Du für dDeine Signalfarben Helfer definiert, die man dann eintragen könnte?
  2. Dynamische Flusslinie Farbe per Leistungswert…interpretiere ich das richtig, dass die Flusslinie einfarbig sein soll, aber je nach Wert von grün (sehr wenig Leistung im Knoten) bis rot (sehr viel Leistung im Knoten) variieren soll? Dann müsste man aber definieren, wass “sehr viel” Leistung ist.

Grüße

Mankie

Hallo Mankie,

ich weiß leider nicht genau wie das heißt
hier meinte ich sowas zB

color = var(--glass-status-active)

das liegt dann so zB in den themes

themesXY:
  glass-status-active: "rgba(40,175,95,1)"

Ja genau, könnte zum hervorheben von zB “jetzt ist viel Überschuss” oder “jetzt schiebt die Wallbox richtig rein” genutzt werden (war eine Idee meiner Frau für unser Wanddisplay :sweat_smile:)
Hätte auch den Vorteil, dass man die Kreise um die Knoten herum farblich lösen könnte.

Als Beispiel könnte ich es mir so vorstellen zu konfigurieren

  • Alle Kreise-Knoten = statisch ambiente-color
  • Alle Flusslinien die gleiche Farbcodierung aber unterschiedliche Schwellwerte, Farbverlauf aus
    (<100W = mute-color; >=100W & <2000W = active1-color; >=2000 active2-color )

Hast du deine CPU-Temperatur schon mal ausgelesen mit und ohne Nexus auf dem Dashboard … würde mich auch interessieren, vielleicht ist die Animation ja garnicht so “schwer”

Hallo Zusammen,

Version 0.3.00 ist online mit zahlreichen neuer Features und diversen Bugfixes.

Unter anderem:

  • GUI-Editor vollständig aufgeräumt
  • Umschalter zwischen Watt und Kilowatt
  • Umschalter für Ladestandsanzeige zwischen Text, grafisch und beidem
  • Knoten-Farben individuell anpassbar
  • Schriftgrößen anpassbar
  • Zusatzentität hinzugefügt

Hier ein paar aktuelle Screenshots (bitte nicht vom englischen irritieren lassen - der Editor läuft auch mit deutschen Texten wenn Eure lokalen HA-Einstellungen auf deutsch stehen):

Bitte entschuldigt die Aufteilung der Screens auf mehrere Beiträge. Leider darf man nur 2 Bilder anhängen als Neuling. Eventuell könnte das ein Admin ja mal zusammenfassen…

**Flow-Animation**

flow-animation

**No-Animation**

noflow-animation

**Normal**

**Button-Mode**

**GUI-Editor**

**General-Settings**

**Node-Settings**

Hallo kaison91,

im aktuellen Release 0.3 ist eine Zusatzentität drin.

Probier das mal aus.

Grüße

Mankie

Hallo Linos,

ich habe mir die Leistungsaufnahme bzw. die CPU Auslastung mal angeschaut mit deaktivierter Animation (In Version 0.3 jetzt abschaltbar) und mit aktivierter Animation. Ich habe das zwar nur auf einem PC im Browser probiert (dafür aber 3 mal das Dashboard in 3 Chrome-Instanzen geöffnet), kann aber keinen Anstieg der CPU Last sehen.

Ab dem nächsten Release kannst Du zumindest in der YAML Konfiguration den Farbwert einzelner Elemente direkt auf eine Variable aus dem Theme zeigen lassen mit:

 icon_color: var(--primary-color)

Das geht aber erst ab Version 0.3.001.

Es sind im aktuellen Release übrigens ein paar Deiner Anmerkungen umgesetzt (wenn auch nicht alle).

Grüße

Mankie!

Hallo Mankie,

tolle Karte bisher, sehr viel potenzial und wirklich gut individuell einstellbar :+1:
Bleib dran, dass spricht sich rum!

Ich habe mir eben Release 0.3.00 installiert und nehme dich einfach mal mit, damit du noch ein Feedback bekommst.

  1. Installation ohne Probleme
  2. Allgemeine Einstellung selbsterklärend und gut mit in der Ecke “Power Nexus Card v0.3.00”
  3. Die eigenen Namen werden in den Knoten angezeigt ausser beim UI-Haupt-Knoten “Nexus”
  4. Im UI-Haupt-Knoten “Nexus” fehlt die Auswahl “Hintergrund-Transparent” → per bg_transparent: true kann man es setzen
  5. Im UI-Haupt-Knoten “Nexus” kann ich die Größe nicht einstellen → per size: M geht nicht → oder ist es gedacht, alle anderen auf size: L zu setzen, damit alle gleich → dann vill Platzmangel
  6. Alle Node-Icon liegen falsch → nichts gefunden zum einstellen
  7. Anzeige-Batterie-SoC Größe oder Position ändern
  8. Super gemacht mit den Verbindungen
  9. Ich bekomme “my_pv” nicht senkrecht über Haupt-Knoten “Nexus” → verschwindet dann mit Y= -2
  10. Im Layout vom Editor muss ich “Automatische Höhe” deaktivieren (steht sonst fest auf 1) und per Hand vergrößern
  11. Ausgrauen wenn inaktiv geht nicht oder ich check es nicht richtig → Flusslienien ausgrauen und statisch wenn inaktiv, wäre das möglich?

Hier noch mein Stand seit Installation …

type: custom:power-nexus-card
general:
  knoten_zoom: 0.8
  knoten_abstand: 190
  button_mode: false
  flow_speed_by_value: true
  soc_display: text
  full_watt_display: false
  flow_animation: true
  linien_staerke: 14
  knoten_name_farbe: "#ffffff"
home:
  name: my_home
  icon: mdi:home-outline
  color: "#466478"
  bg_transparent: false
  entity: sensor.energiespeichersystem_lasten_power
  bg_color: ""
  bg_opacity: 100
  icon_color: "#ffffff"
  power_color: "#ffffff"
  name_color: "#ffffff"
  name_size: 100
  icon_size: 80
  power_size: 100
nodes:
  - name: my_pv
    icon: mdi:solar-power-variant-outline
    color: "#466478"
    x: -1
    "y": -1
    size: M
    auto_hide: false
    hide_threshold: 0
    fade_hide_edges: false
    nexus_relevant: false
    aux_entity: ""
    aux_bg_color: "#000000"
    aux_bg_transparent: false
    bg_color: "#000000"
    bg_transparent: false
    icon_color: ""
    power_color: ""
    aux_color: ""
    soc_color: ""
    name_color: ""
    name_size: 100
    icon_size: 100
    power_size: 125
    aux_size: 100
    subtract_output: false
    soc_entity: ""
    connections:
      - target: home
    slot: 0
    invert_flow: true
    hide_mode: fade
    entity: sensor.energiespeichersystem_pv_gesamt_power
  - name: my_bat
    icon: mdi:battery-high
    color: "#466478"
    x: 1
    "y": 0
    size: M
    auto_hide: false
    hide_threshold: 0
    fade_hide_edges: false
    nexus_relevant: false
    aux_entity: ""
    aux_bg_color: "#000000"
    aux_bg_transparent: false
    bg_color: "#000000"
    bg_transparent: false
    icon_color: ""
    power_color: ""
    aux_color: ""
    soc_color: ""
    name_color: ""
    name_size: 100
    icon_size: 100
    power_size: 100
    aux_size: 100
    subtract_output: false
    soc_entity: sensor.energiespeichersystem_speicher_soc
    connections:
      - target: home
    slot: 1
    invert_flow: false
    hide_mode: hide
    entity: sensor.energiespeichersystem_speicher_power
  - name: my_grid
    icon: mdi:transmission-tower
    color: "#4fc3f7"
    size: M
    slot: 0
    invert_flow: true
    subtract_output: false
    auto_hide: false
    hide_mode: hide
    fade_hide_edges: false
    nexus_relevant: false
    aux_entity: ""
    aux_bg_color: "#000000"
    aux_bg_transparent: false
    bg_color: "#000000"
    bg_transparent: false
    icon_color: ""
    power_color: ""
    aux_color: ""
    soc_color: ""
    name_color: ""
    name_size: 100
    icon_size: 100
    power_size: 100
    aux_size: 100
    hide_threshold: 0
    soc_entity: ""
    entity: sensor.energiespeichersystem_netz_power
    entity2: ""
    connections:
      - target: home
    x: -1
    "y": 0
grid_options:
  rows: 6
  columns: 12

Beste Grüße

Hallo Linos,

  1. Super
  2. So solls sein
  3. Der “Nexus” grenzt sich im Editor ja etwas ab und ist immer als zentraler Knoten zu sehen. Angezeigt wird in der Karte ja Dein Name.
  4. Das soll tatsächlich nicht so sein…Du kannst zwar die Transparenz des Hintergrundes per Schieber einstellen, aber ich weiß nicht so recht, was besser ist: Alle Knoten (inkl. Nexus) Hintergrundtransparenz von 0-100% einstellbar oder nur AN/AUS…ist auf jeden Fall derzeit nicht konsistent
  5. Die Größe des Nexus hab ich immer als Large definiert (intern) weil das m.M.n. den zentralen Punkt und damit den eigentlichen Kartenzweck hervorhebt. Wenn man derzeit alle Knoten gleich groß haben will müßte man also tatsächlich alle auf Large stellen…ich schreib mir das mal auf fürs nächste Update - dann ist das auch für den Nexus einstellbar
  6. Kann ich aktuell bei mir nicht nachvollziehen…welchen Browser verwendest Du?
  7. vermerk ich mal für künftige Updates
  8. Danke :slight_smile:
  9. der Nexus ist immer: 0 ; 0 (das bedeutet eins nach oben wäre: X=0 und Y=-1)
  10. das ist mir schon aufgefallen…muss ich mal prüfen
  11. inaktiv bedeutet: Deine eingetragene Entität ist unter dem eingetragenem Schwellwert. Dann wird der Knoten entweder nur ausgegraut oder komplett ausgeblendet (je nach Deiner Wahl). “Auch Flusslinien” bedeutet hier nur, dass im Ausgegrauten Modus die Flusslinien verschwinden sollen. Hintergrund hier: ich habe verschiedene Geräte (Waschmaschine z.b.) die wegen Ihrer WIFI Verbindung immer ca. 2-3W ziehen. Die Flusslinien richten sich immer nach der Wattzahl (wegen angepasster Geschwindigkeit) - wenn ich also hier <4Watt einstelle, wird zwar ausgegraut, aber die Flusslinien laufen dennoch weiter (es werden ja 43 Watt gezogen)…und dieser Schalter läßt Dir die Wahl das dann zur Besseren Lesbarkeit auch noch wegzublenden wenn das Gerät nur im Standby ist bspw.

Jetzt noch eine Frage von mir: wie sieht Deine CPU Last mit Animation aus?

Grüße

Mankie

Hallo Mankie,

ich bin so frei und reiche noch meine persönliche Meinung dem Feedback nach :wink:
Diese zielt auf maximale Flexibilität, was glaube ich den Kern von Nexus treffen sollte.

Eigentlich würde es reichen die Transparenz per
bg_color: setzen zu können. Entweder per variable var(–primary-color) oder direkt rgba(0,0,0,0). - Wenn Checkbox/Slider dann in jeder Node, damit man per UI alle gleich einstellen könnte

Hier wäre ich dafür die Größe einstellen zu können → nicht nur eine Frage des Geschmacks, sondern auch falls der Platz mal knapp wird

Das war zu dem Zeitpunkt Safari

Ok, vielleicht hätte ich die Karte im Layout auch größer machen müssen

Ich verstehe deine Gedanken. Meine Gedanken, ich möchte auch die Verbindung „stumm“ sehen können wenn inaktiv → sonst habe ich frei schwebende Knoten ohne visuelle Zuordnung

Unmittelbar nach der Einrichtung war keine gestiegene Auslastung erkennbar durch das kurze Gastspiel (power-flow-card war sofort erkennbar). Voll eingerichtet müsste ich noch prüfen am Wanddisplay (Chromium). Aktuell ist die Karte deaktiviert, wegen dem Icon-Salat

Hallo zusammen,

das nächste Release ist online (V0.3.19)!

Changelog in der ReadMe im Github.

@Linos Zu Deinen Anmerkungen:

  • Die Transparenz ist im Editor nun einheitlich nur An- oder Abschaltbar. Wenn AUS, kann im YAML die BG-Color jeweils auch mit Alphakanal angegeben werden - übrigen auch weiterhin mit Angabe einer “- -var yxz”…ich denke mal das deckt alle Fälle ab
  • Die Größe des Nexus ist nun ebenfalls einstellbar (S/M/L)
  • Ich hatte Safari bisher nicht getestet…tatsächlich machte mein IPad hier grafische Probleme bei den Icons. Sollte jetzt eigentlich behoben sein.
  • Ich habe es nun so realisiert, dass wenn der Knoten unter seinen Schwellwert fällt und “Ausgegraut” sein soll, nun auch die Flusslinie ausgraut und still steht. Wenn der Knoten ausgeblendet wird, fällt natürlich auch die Flusslinie weg.
  • Die Sache mit dem “Automatische Höhe” bei Einfügen einer neuen Karte kann ich leider nicht beeinflussen. Das ist bei HA bei jeder anderen Karte ebenfalls per Standard aktiviert.

Grüße

Mankie

Hallo Mankie,

Hut ab vor deiner Arbeit - Danke !
Heute gibt es mal einen bunten Mix aus Feedback und persönlicher Meinung :slight_smile:
(Ich bin mir Bewusst das viel Arbeit dahinter steckt aber ich gebe es dir einfach mal mit)

Aktuell habe ich die V0.3.19 mit Safari:

  1. Flusslinie-Zusatzknoten fehlen random
  2. Wenn ich keine Namen angezeigt haben möchte, per " " → “Icons sprechen lassen” → dann kann es schwierig werden in der Übersicht. Sind da dann natürlich auch " "
  3. Wenn der Name “Ausgeblendet” ist, wie in 2. dann würde ich gerne das icon innerhalb vom Kreis in der höhe verschieben können → sieh Batterie, “Icon mit -313W” sehr gedrückt
  4. Icon ändern anhand von State zB Batterie-SoC oder Wärmepumpe on ↔ off
  5. Auswahl der Entitäten per UI-DropDown irgendwie komisch. "ich suche eine Entität aus der Liste raus → KLICK (Auswahl) → Liste schließt sich → andere Entität wurde dann aber ausgewählt . Per eintragen im Editor kein Problem
  6. Zusatz-Entität immer auf 6 Uhr(?) Überdeckt Flusslinie wenn Node “oben steht”. Vielleicht die position der Zusatz-Entität einstellbar machen per Winkel 0-360°

Habe die Karte jetzt auf das Wanddisplay “gelegt”. Temperatur steigt um gute 10K an


Aufbau:
ASUS NUC 14 (N250

  • Debian mit XFCE + Xorg
  • TouchKio (Electron)
  • Chromium WebView
  • Home Assistant Dashboard
  • Nexus

Laut “top”:

  • touchkio PID 1484 → 30–60 % CPU
  • zweiter touchkio Prozess → 10–30 % CPU
  • Xorg → 8–15 % CPU

Ich vermute:
→ Lovelace rerender→ Card recalculates layout→ Browser repaint→ GPU / CPU workload
Liegt wahrscheinlich an der genutzten Konstellation (bei Dir oder meinen Mac reagiert nichts auf die Karte)

Hallo Zusammen,

Version 0.4 ist online.

Changelog findet Ihr im Github

@Linos zu Deinen Punkten:

  1. Konnte ich nicht nachvollziehen, aber habe ein paar Änderungen vorgenommen, die das hoffentlich bei Dir ausbügeln
  2. Name des Knotens sollte sich jetzt einfach ausblenden lassen, dann kann im Editor der Name bleiben
  3. Iconposition ist jetzt vertikal verschiebbar
  4. Eine Änderung des Icons anhand des Status habe ich nicht integriert…hier gäbe es zu viele Möglichkeiten, anhand welcher Kriterien das passieren soll und in was sich das ändern soll…m.M.n. lässt sich der Knoten bei 0W - also Pumpe ist aus - ja ausgrauen…das zeigt den Status gut
  5. Das mit der Entitätsauswahl hab ich bei mir im Chrome auch nicht reproduzieren können. Hab aber auch hier ein paar Sachen verändert die alte Safari Befehle feixen sollte…mußt probieren
  6. Zusatzentität lässt sich nun kreisrum anordnen…auch wenn ich den Sinn hier nicht ganz nachvollziehen kann :slight_smile: Die Flusslinien sind bei transparentem Hintergrund der Zusatzentität immer sichbar…hier muss man um das zu verhindern eben eine Hintergrundfarbe auswählen…hier noch die Position der Zusatzentität zu berücksichtigen würde den grafischen Aufwand im Code (und damit auch der CPU) zu sehr erhöhen.

Ich habe außerdem noch ein paar allgemeine Performance-Änderungen vorgenommen. Check hier mal bitte, ob sich das auf deine CPU Last irgendwie ausgewirkt hat.

Grüße

Mankie