Integration eines E3/DC Hauskraftwerks in ioBroker (inkl. Visualisierung)

Visualisierung mit iobroker.vis

Die ioBroker-eigene Visualisierungsoberfläche Vis ist ein sehr mächtiges Werkzeug. Im Grunde sind bereits mit überschaubaren Kenntnissen in HTML und CSS der grafischen Darstellung verschiedenster Werte keine Grenzen mehr gesetzt.
Aus diesem Grund möchte ich an dieser Stelle betonen, dass dieses Tutorial kein Grundkurs in „Visualisierung mit Vis“ oder „HTML und CSS“ ist. Vielmehr möchte ich meine Visualisierung auf diesem Wege teilen und Hinweise dazu geben was ggf. angepasst werden muss, damit alles funktioniert.

Damit eine problemlose Integration meiner Widgets in ein bestehendes Projekt möglich ist, habe ich zur Vorbereitung alles was zur Visualisierung des S10 Hauskraftwerks gehört aus meinem eigenen Projekt heraus gelöst und mit einem möglichst schlichten Design versehen. Außerdem habe ich die Anzeige der Echtzeit-Werte (ähnlich der Darstellung im E3DC-Portal) von der Anzeige der historischen Daten (Diagramme) getrennt und werde die Integration in zwei separaten Teilen erläutern.

Hinweis: Die verwendeten Icons stammen aus dem Material-Design-Icon-Set (Link ) welches sich einfach über den ioBroker Admin wie ein Adapter installieren lässt. Wem das nicht zu sagt, der kann die Bilder natürlich einfach über den Vis-Editor ersetzen.

Teil 1: Visualisierung der Echtzeitdaten

Im ersten Teil werde ich ausschließlich auf die Ansicht der Echtzeitdaten eingehen, die in ähnlicher Form ja auch im E3DC-Portal zu sehen ist:

Um die betreffenden Widgets in die eigene View zu bekommen ist nicht viel zu tun. Mit wenigen Klicks und dem Code aus dem Download lassen sich die Widgets einfach in Vis importieren. Dazu am besten, sofern noch nicht geschehen, eine neue View anlegen und einen dunklen Hintergrund festlegen. Dann auf der Registerkarte „Widgets“ im Vis-Editor auf den Button „Widgets importieren“ klicken und meinen Export einfügen. Das Ganze Bestätigen und die Widgets erscheinen auf der Arbeitsfläche.

Da der Export der Widgets sehr umfangreich ist, habe ich den Code dazu in eine Datei ausgelagert. Hier kannst du sie herunterladen:

Hinweis: Die Grafik, die in der Visualisierung für das E3DC-Gerät verwendet wurde, stammt nicht von mir, weshalb ich sie auch nicht zum Download anbieten kann. Für den persönlichen Gebrauch werdet Ihr aber sicher schnell in der Google-Bildersuche fündig…

Wenn die Konfiguration der Modbus-Register mit meinem Export erledigt worden ist, sollten alle verwendeten Datenpunkte sofort passen und die View bei Aufruf sofort funktionieren. Für Anpassungen können die Widgets anschließend natürlich auch einzeln ausgewählt und die Eigenschaften (z.B. Schriftart und Farbe) entsprechend bearbeitet werden. Fertig.

Teil 2: Visualisierung der historischen Daten

Im zweiten Teil wird es jetzt etwas komplizierter. Es geht um die Visualisierung des aktuellen Tagesverlaufs, also der historischen Daten. Dazu habe ich, mit Hilfe des Flot-Adapters, insgesamt sechs verschiedene Mini-Diagramme erstellt, die in Vis mit iFrame-Widgets integriert werden.

Info zur Funktionsweise des Flot-Adapters: Mit der Installation des Adapters wird gleichzeitig ein Web-Editor installiert, über den Diagramme einfach erstellt oder angepasst werden können. Der Editor ist im ioBroker in der Regel über folgenden Link zu erreichen: http://[IP oder Hostname]:8082/flot/edit.html. Nach der Konfiguration eines Diagramms erhält man innerhalb des Editors eine (recht lange) URL über die sich das Diagramm dann im Browser aufrufen lässt. Die URL enthält dabei alle im Editor konfigurierten Einstellungen. Mehr Infos

Die URLs zu den Diagrammen müssen natürlich auf die eigene Umgebung angepasst werden. Dazu müssen wir im ersten Teil jeder URL lediglich den Hostnamen bzw. die IP-Adresse des ioBroker-Hosts ersetzen. Anschließend sollten sich die einzelnen Mini-Diagramme durch Aufruf der URL auch ohne Vis im Browser anzeigen lassen. Etwa so:

Hinweis: Die Diagramme haben immer in der oberen rechten Ecke des Browserfensters ein „editieren“-Symbol. Aufgrund des dunklen Hintergrunds ist dieses aber nicht zu erkennen. Man findet es aber, wenn man mit der Maus über die rechte obere Ecke im Browserfenster wandert. Klickt man es, öffnet sich das Diagramm im Flot-Editor und man kann es nach belieben editieren.

Im folgenden nun einmal die einzelnen URLs der vorkonfigurierten Mini-Diagramme. Diese sind im Widget-Export bereits enthalten und müssen nach dem Import wie oben beschrieben angepasst werden:

Solarproduktion

http://[IP oder Hostname]:8082/flot/index.html?range=1440&zoom=false&axeX=lines&axeY=inside&width=305&hoverDetail=false&height=145&aggregate=onchange&chartType=step&live=60&instance=sql.0&l%5B0%5D%5Bid%5D=modbus.0.holdingRegisters.40068_PV_Leistung&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=max&l%5B0%5D%5Bcolor%5D=%23ffff00&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=0&l%5B0%5D%5Bsmoothing%5D=2&l%5B0%5D%5BafterComma%5D=0&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5Bmax%5D=7000&l%5B0%5D%5BchartType%5D=line&l%5B0%5D%5Byaxe%5D=right&l%5B0%5D%5Bxaxe%5D=off&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5BignoreNull%5D=0&aggregateType=step&aggregateSpan=300&relativeEnd=today&timeType=relative&start=2017-05-25&end=2017-05-25&noBorder=noborder&window_bg=%23000000&x_labels_color=%23ffffff&y_labels_color=%23ffffff&border_color=%23ffffff&grid_color=%23ffffff&border_width=1px&timeFormat=%25H%3A%25M&useComma=false&noedit=false&animation=0&_vis_refts%5B%5D=1495738014151&_vis_refts%5B%5D=1495738366651&_vis_refts%5B%5D=1495739375702

Speicher – Laden

http://[IP oder Hostname]:8082/flot/index.html?range=1440&zoom=false&axeX=lines&axeY=inside&width=305&hoverDetail=false&height=145&aggregate=onchange&chartType=step&live=60&instance=sql.0&l%5B0%5D%5Bid%5D=modbus.0.holdingRegisters.40070_Batterie_Leistung&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=max&l%5B0%5D%5Bcolor%5D=%2300ff00&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=0&l%5B0%5D%5Bsmoothing%5D=2&l%5B0%5D%5BafterComma%5D=0&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5Bmax%5D=2500&l%5B0%5D%5BchartType%5D=line&l%5B0%5D%5Bxaxe%5D=off&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5BignoreNull%5D=0&l%5B0%5D%5Bfill%5D=0&l%5B1%5D%5Bid%5D=modbus.0.holdingRegisters.40083_Batterie_SOC&l%5B1%5D%5Binstance%5D=sql.0&l%5B1%5D%5Boffset%5D=0&l%5B1%5D%5Baggregate%5D=max&l%5B1%5D%5Bcolor%5D=%23006400&l%5B1%5D%5Bmin%5D=0&l%5B1%5D%5Bmax%5D=100&l%5B1%5D%5Bthickness%5D=2&l%5B1%5D%5Bshadowsize%5D=0&l%5B1%5D%5BignoreNull%5D=0&l%5B1%5D%5BafterComma%5D=0&l%5B1%5D%5Bsmoothing%5D=2&l%5B1%5D%5Bxaxe%5D=off&l%5B1%5D%5BchartType%5D=line&l%5B1%5D%5Bfill%5D=0.2&l%5B1%5D%5Byaxe%5D=off&aggregateType=step&aggregateSpan=300&relativeEnd=today&timeType=relative&start=2017-05-25&end=2017-05-25&noBorder=noborder&window_bg=%23000000&x_labels_color=%23ffffff&y_labels_color=%23ffffff&border_color=%23ffffff&grid_color=%23ffffff&border_width=1px&timeFormat=%25H%3A%25M&useComma=false&noedit=true&animation=0&_vis_refts%5B%5D=1495736903190&_vis_refts%5B%5D=1495738070564&_vis_refts%5B%5D=1495738366651&_vis_refts%5B%5D=1495739890210

Speicher – Entladen

http://[IP oder Hostname]:8082/flot/index.html?range=1440&zoom=false&axeX=lines&axeY=inside&width=305&hoverDetail=false&height=145&aggregate=onchange&chartType=step&live=60&instance=sql.0&l%5B0%5D%5Bid%5D=modbus.0.holdingRegisters.40070_Batterie_Leistung&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=max&l%5B0%5D%5Bcolor%5D=%2300ff00&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=0&l%5B0%5D%5Bsmoothing%5D=2&l%5B0%5D%5BafterComma%5D=0&l%5B0%5D%5Bmin%5D=-2500&l%5B0%5D%5Bmax%5D=0&l%5B0%5D%5BchartType%5D=line&l%5B0%5D%5Bxaxe%5D=off&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5BignoreNull%5D=0&l%5B0%5D%5Bfill%5D=0&aggregateType=step&aggregateSpan=300&relativeEnd=today&timeType=relative&start=2017-05-25&end=2017-05-25&noBorder=noborder&window_bg=%23000000&x_labels_color=%23ffffff&y_labels_color=%23ffffff&border_color=%23ffffff&grid_color=%23ffffff&border_width=1px&timeFormat=%25H%3A%25M&useComma=false&noedit=false&animation=0&_vis_refts%5B%5D=1495738070564&_vis_refts%5B%5D=1495738366651&_vis_refts%5B%5D=1495739890210

Stromnetz – Bezug

http://[IP oder Hostname]:8082/flot/index.html?range=1440&zoom=false&axeX=lines&axeY=inside&width=305&hoverDetail=false&height=145&aggregate=onchange&chartType=step&live=60&instance=sql.0&l%5B0%5D%5Bid%5D=modbus.0.holdingRegisters.40074_Netz_Leistung&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=max&l%5B0%5D%5Bcolor%5D=%230000ff&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=0&l%5B0%5D%5Bsmoothing%5D=2&l%5B0%5D%5BafterComma%5D=0&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5Bmax%5D=7000&l%5B0%5D%5BchartType%5D=line&l%5B0%5D%5Byaxe%5D=right&l%5B0%5D%5Bxaxe%5D=off&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5BignoreNull%5D=0&aggregateType=step&aggregateSpan=300&relativeEnd=today&timeType=relative&start=2017-05-25&end=2017-05-25&noBorder=noborder&window_bg=%23000000&x_labels_color=%23ffffff&y_labels_color=%23ffffff&border_color=%23ffffff&grid_color=%23ffffff&border_width=1px&timeFormat=%25H%3A%25M&useComma=false&noedit=false&animation=0&_vis_refts%5B%5D=1495738014151&_vis_refts%5B%5D=1495738366651&_vis_refts%5B%5D=1495739086599&_vis_refts%5B%5D=1495739375703&_vis_refts%5B%5D=1495739890210

Stromnetz – Einspeisung

http://[IP oder Hostname]:8082/flot/index.html?range=1440&zoom=false&axeX=lines&axeY=inside&width=305&hoverDetail=false&height=145&aggregate=onchange&chartType=step&live=60&instance=sql.0&l%5B0%5D%5Bid%5D=modbus.0.holdingRegisters.40074_Netz_Leistung&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=max&l%5B0%5D%5Bcolor%5D=%230000ff&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=0&l%5B0%5D%5Bsmoothing%5D=2&l%5B0%5D%5BafterComma%5D=0&l%5B0%5D%5Bmin%5D=-7000&l%5B0%5D%5Bmax%5D=0&l%5B0%5D%5BchartType%5D=line&l%5B0%5D%5Bxaxe%5D=off&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5BignoreNull%5D=0&aggregateType=step&aggregateSpan=300&relativeEnd=today&timeType=relative&start=2017-05-25&end=2017-05-25&noBorder=noborder&window_bg=%23000000&x_labels_color=%23ffffff&y_labels_color=%23ffffff&border_color=%23ffffff&grid_color=%23ffffff&border_width=1px&timeFormat=%25H%3A%25M&useComma=false&noedit=false&animation=0&_vis_refts%5B%5D=1495736903190&_vis_refts%5B%5D=1495738070564&_vis_refts%5B%5D=1495738366651&_vis_refts%5B%5D=1495739086599&_vis_refts%5B%5D=1495739890210

Hausverbrauch

http://[IP oder Hostname]:8082/flot/index.html?range=1440&zoom=false&axeX=lines&axeY=inside&width=305&hoverDetail=false&height=145&aggregate=onchange&chartType=step&live=60&instance=sql.0&l%5B0%5D%5Bid%5D=modbus.0.holdingRegisters.40072_Hausverbrauch_Leistung&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=max&l%5B0%5D%5Bcolor%5D=%23ff0000&l%5B0%5D%5Bthickness%5D=2&l%5B0%5D%5Bshadowsize%5D=0&l%5B0%5D%5Bsmoothing%5D=2&l%5B0%5D%5BafterComma%5D=0&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5Bmax%5D=7000&l%5B0%5D%5BchartType%5D=line&l%5B0%5D%5Bxaxe%5D=off&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5BignoreNull%5D=0&l%5B0%5D%5Bfill%5D=0&aggregateType=step&aggregateSpan=300&relativeEnd=today&timeType=relative&start=2017-05-25&end=2017-05-25&noBorder=noborder&window_bg=%23000000&x_labels_color=%23ffffff&y_labels_color=%23ffffff&border_color=%23ffffff&grid_color=%23ffffff&border_width=1px&timeFormat=%25H%3A%25M&useComma=false&noedit=false&animation=0&_vis_refts%5B%5D=1495738070564&_vis_refts%5B%5D=1495738366651&_vis_refts%5B%5D=1495739086599&_vis_refts%5B%5D=1495739890210

Da der Export der Widgets sehr umfangreich ist, habe ich den Code dazu in eine Datei ausgelagert. Hier kannst du sie herunterladen:

Gesamte View importieren

Natürlich ist es auch möglich eine komplette View in ein eigenes Projekt zu übernehmen. Zu diesem Zweck habe ich auch einen Export der entsprechenden View, so wie sie im Titelbild zu sehen ist, gemacht:

Die View kann, ähnlich wie die Widgets, einfach über den Vis-Editor importiert werden. Dazu in der Registerkarte „Views“ auf „View importieren“ klicken und den Code einfügen.

Da der Export der View sehr umfangreich ist, habe ich den Code dazu in eine Datei ausgelagert. Hier kannst du sie herunterladen:

Nun sollte hoffentlich alles soweit klar sein. 🙂 Viel Spaß mit der Visualisierung und den Daten deines Hauskraftwerks in ioBroker. Bei Fragen nutze gerne die Kommentarfunktion auf der ersten Seite oder schaue mal im ioBroker-Forum vorbei.

MfG,
André

About the author: André

André
Familienvater und bekennender Technik-Nerd. Beruflich unterwegs als Fachinformatiker für Systemintegration bei einem deutschen IT-Dienstleister. In der Freizeit begeisterter "Home-Automatisierer" bzw. "Smarthome-Bastler" und (zumindest bei schönem Wetter) gerne mit der Familie in verschiedenen Outdooraktivitäten unterwegs.

21
Hinterlasse einen Kommentar

avatar
10000
7 Kommentare
14 Antworten
1 Abonnenten
 
Meiste Antworten
Beliebtester Kommentar
9 Kommentatoren
KevinEikeManuelHartimanRoman Letzte Kommentatoren
  Abonnieren  
Benachrichtige mich zu:
Kevin
Gast
Kevin

ausführliche Anleitung , konnte alles wie beschrieben machen, jedoch verbindet sich der modbusadapter 1sekunde danach wird die Verbindung wieder getrennt ohne eine wert zu übertragen, wo könnte da der Fehler sein?

Eike
Gast
Eike

Hallo, das klingt sehr gut. Ich möchte an das E3/DC eine Wallbox zum Laden eines E-Autos (logisch) anschliessen, die nur den überschüssigen PV-Strom (und ggf. Strom aus der Batterie) verwendet, aber keinen Netzstrom. Die E3/DC Wallbox, die das kann, geht bei uns aus baulichen Gründen nicht. Jetzt bin ich auf die KEBA p30 x-Series gekommen, die zumindest modbus UDP spricht. Das E3/DC leider nur modbus TCP. Jetzt ist die Idee, mittels ioBroker zwischen E3/DC und KEBA Wallbox zu vermitteln. Klappt es, dass die Wallbox per modbus UDP eine Anfrage an ioBroker stellt, der die Werte per modbus TCP aus dem… Mehr lesen »

Manuel
Gast
Manuel

Hi, erstmal vielen Dank für die gute Anleitung und die Integration in IoBroker. Gibt es eigentlich die Möglichkeit auch die verschiedenen Temperaturen mithilfe des Modbus auszulesen?

Roman
Gast
Roman

Hi, ich bekommen in den nächsten Wochen ein e3/de Hauskraftwerk. Diesen wollte ich in VIS anzeigen lassen. Hab soweit alles (soweit wie möglich) vorbereitet. Jetzt bin ich bei der Visualisierung angekommen. Ich wollte dein Widgets importieren. Ich bekomm bei Export1 die Fehlermeldung „Invalid JSON SyntaxError: JSON.parse Error: Unterminated string constant at position:2364“ und bei Export 2 „Invalid JSON SyntaxError: JSON.parse Error: Unterminated string constant at position:1730“. Was mach ich falsch? Kann es sein, dass ich erst das HK haben muss damit ich das Widget einfügen kann?
Gruß Roman

Dom
Gast
Dom

Hallo André,
Bin auch gerade dabei meinen S10E in Iobroker einzubinden. Hast du noch den Register Eintrag für die 70% Abregelung?
Ich möchte gerne auf Basis der Abregelung per Iobroker und Homematic diverse Aktionen starten – vor allem, meine Klimaanlage einschalten wenn die Abregelung aktiv wird…

Grüße
Dom

Ralph
Gast
Ralph

Hallo Andre, klasse Anleitung – vielen Dank. Allerdings komme ich mit den angegebenen PW nicht auf den DL Deiner Exports. Gibt es da ein neues? Merci, gute Nacht.

Malmara
Gast
Malmara

wow… ich habe noch kein E3DC aber kann es kaum noch erwarten 🙂
Kann man auch Daten zu E3DC senden? z.B. starte das laden der Batterie etc…?