Motivation

Habt ihr auch schon mal die Möglichkeit vermisst, "richtige" Stapeldiagramme zu erzeugen? Oder andere spezielle Diagramme, die momentan mit ioBroker nicht möglich sind? Mit dem Adapter flexcharts ist das möglich. Ein Stapeldiagramm sieht dann z.B. so aus:

Der ECharts-Adapter ist klasse, hat aber durch das UI-Konzept Einschränkungen bzgl. der möglichen Diagramm-Typen.

Konzept

Mit dem flexcharts-Adapter ist es möglich, alle Diagrammtypen zu erzeugen, die Apache eCharts anbietet. Dazu übergibt man dem Adapter die komplette Definition des Charts (den Inhalt von options in den Beispielen als JSON-Objekt). Man kann das Chart also nicht per UI zusammen klicken (es gibt keine UI), sondern muss es per Javascript oder Blockly erstellen.

Der Adapter arbeitet als Web-Extension, benötigt also den Web-Adapter und ist per Default auf Port 8082 erreichbar. Das Verhalten steuert man über Parameter im http-Aufruf. Beispiel:

• Definition und Daten des Charts hat man im State 0_userdata.0.echarts.chart1 gespeichert
• Dann erzeugt der Aufruf http://localhost:8082/flexcharts/echarts.html?source=state&id=0_userdata.0.echarts.chart1 das entsprechende eChart. Diese Adresse kann man als iFrame z.B. in der vis oder in jarvis eintragen. Oder direkt in einem Browser-Tab. Statt localhost ggf. die Adresse der ioBroker-Rechners verwenden.
• Statt die Chart-Daten in einem State zu speichern, kann man sie direkt per Skript erzeugen und mit callback() an den Adapter übergeben.
• Ein Demo-Chart ist im Adapter hinterlegt, das ruft man auf mit http://localhost:8082/flexcharts/echarts.html?source=state&id=flexcharts.0.info.chart1

Details zu Installation und Verwendung sind im README beschrieben:
https://github.com/MyHomeMyData/ioBroker.flexcharts

Bitte ausprobieren

Adapter ist im Beta-Repo verfügbar. Link zum npm-Paket.
Ich freue mich auf eure Rückmeldungen!

Hinweis zu Versionen kleiner als 0.1.4

Falls jemand eine Version vor 0.1.4 installiert hat: Bitte einmal den Adapter (nicht nur die Instanz) komplett deinstallieren und neu installieren. Dadurch wird das Zusammenspiel mit dem Admin-Adapter aufgeräumt. Da der Adapter keine eigene Konfigurationsparameter hat, kann dabei nichts verloren gehen.

Viessmann E3 Serie einbinden

Der Adapter bindet die aktuellen Geräte der Viessmann E3 Serie (One Base), z.B. die Wärmepumpe Vitocal 250, PV-Anlage Vitocharge VX3 oder Gas-Therme Vitodens in ioBroker ein. Die Verbindung wird über den CAN-Bus hergestellt, ist also lokal ohne Internetanbindung verfügbar.

Als Basis habe ich das Projekt open3e verwendet, das eine ähnliche Funktionalität per Kommandozeile oder MQTT bereitstellt und in Python realisiert ist. An open3e habe ich von Anfang an mitgearbeitet. Weiterführende Infos gibt es im Wiki.

Der Adapter beherrscht sowohl einen "Lausch-Modus" ("Collect"), bei dem auf dem CAN-Bus zugehört wird, als auch einen aktiven Modus, bei dem über das Protokoll UDSonCAN aktiv Daten abgefragt oder geschrieben werden.
Der "Lausch-Modus" funktioniert bei vernetzten Viessmann-Geräten. Diese tauschen sehr viele Informationen über den CAN-Bus aus. Der Adapter dekodiert diese Daten und speichert sie in den Objektbaum.
Beide Modi können parallel genutzt werden.

Features

• Lauschen auf dem internen und externen Bus (incl. Energy Meter E380).
• Lesen und Dekodieren aller Datenpunkte der gemeinsamen Datenpunkliste. Device spezifische Datenpunkte werden per RawCodec verarbeitet.
• Schreiben aller für Datenpunkte, die auf einer editierbaren White-List stehen. Auch komplexe Datenpunkte können geschrieben werden, z.B. kann nur die Anfangszeit für die Zirkulationspumpe eines bestimmten Zeitraumes geändert werden.
• Scan der Devices bei der ersten Einrichtung des Adapters.
• Optional Festlegen des Gerätenamens für den Objektbaum.
• Datenpunkt-Scan aller erkannten Devices (entspricht Depict-Funktion von open3E).
• Auflisten und filtern der gerätespezifischen Datenpunkte.
• Die Daten aus beiden Quellen (collect und UDS) werden pro Device in einem Objektbaum gesammelt.
• Für jeden Datenpunkt stehen die Formate json, raw und tree parallel zur Verfügung.
• Individuelle Definition und Konfiguration zur einmaligen oder regelmäßigen Abfrage von Datenpunktlisten.

Reale oder virtuelle Geräte zum Testen

Um den Adapter testen zu können, benötigt man passenden Geräte, mit denen per CAN-Bus kommuniziert wird. Das können reale Viessmann-Geräte sein oder eine Simulation. Im Rahmen von open3e ist auch eine Virtualisierung der Viessmann CAN-Kommunikation entstanden. Ich habe einen Fork erzeugt, der auf den Test des Adapters abgestimmt ist, siehe hier. Dort ist auch beschrieben, wie man das installiert und einrichtet.
Die Simulation unterstützt keine Collect-Daten. Der "Lausch-Modus" kann damit also nicht getestet werden.

Installation

Installation ist über Github oder das ioBroker Beta-Repo möglich. Nach "e3oncan" oder "Viessmann" suchen.

Feedback

Ich freue ich mich auf euer Feedback! Natürlich beantworte ich auch gerne eure Fragen.

Ein paar Screenshots

• Die Positionierung center des Diagrammtitels überschreibt mir Elemente des Diagramms.

Man kann die Position der Legende verschieben mit legend: { top: '10%' }

Dann funktioniert 'center' für den Titel ohne Überschneidung.

Gruß, Jürgen

@delphinis Der adapter ist jetzt im Beta-Repo verfügbar. Funktioniert jetzt als Web-Extension, d.h. der Web-Adapter (web.0) muss installiert sein und flexcharts ist dann unter Port 8082 erreichbar. Außerdem muss ein flexcharts in der Adresse vorangestellt werden, also z.B.

http://localhost:8082/flexcharts/echarts.html?source=state&id=flexcharts.0.info.chart1

Das Readme ist entsprechend angepasst.

Freue mich auf Deine Rückmeldung.

@merlin123 Ja, genau so. Ist in der Doku nur für komplexere Anwendungsfälle beschrieben.

@merlin123 Sehr schön. Wenn es dann soweit funktioniert: Würdest Du bitte auch das Blockly posten? Ich würde gerne im Flexcharts Github ein Template einstellen für Blockly. Da ich davon sehr wenig Ahnung von habe, wäre das für mich eine tolle Basis.

@merlin123 Ja, genau so. Ist in der Doku nur für komplexere Anwendungsfälle beschrieben.

@merlin123 Das erreichst Du mit "dataZoom": [{"show": true,"start": 0,"end": 100}], oder "dataZoom": [{"show": true}],

@merlin123 Dich stören die Abstände links und rechts? Oder was ist das Problem?

@merlin123 Bei mir passt sich das Diagramm ins Fenster ein, auch bei Größenänderungen. Bitte einen Screenshot machen, so dass man das Problem sieht.

Übereinanderlegen geht mit barGap: https://echarts.apache.org/en/option.html#series-bar.barGap

@merlin123 Das Diagramm sollte sich automatisch auf die Seite bzw. ins iFrame einpassen. Tut es das nicht? Auf was für einem System arbeitest Du, welchen Browser verwendest Du?

Bitte mal das JSON posten.

Zum "Zusatzwunsch": Ich habe in Apache ECharts keine Möglichkeit gefunden, den Hintergrund pro Balken zu variieren. Vielleicht kannst Du eine zusätzliche Serie mit gestapelten Balken (evtl. als 100%-Darstellung) erzeugen und die hinter die Preis-Balken legen.

• Die Positionierung center des Diagrammtitels überschreibt mir Elemente des Diagramms.

Man kann die Position der Legende verschieben mit legend: { top: '10%' }

Dann funktioniert 'center' für den Titel ohne Überschneidung.

Gruß, Jürgen

@delphinis Ich fürchte, da bin ich überfragt. npm in der ioBroker-Umgebung zu nutzen ist keine gute Idee und kann das System beschädigen. Das musste ich auch schon lernen.

@mcm1957 ist hier schon der richtige Ansprechpartner.

Gruß, Jürgen

@neopholus Freut mich, dass Dir der Adapter gefällt!
JPG Export ist eine gute Idee, wird aber im Moment nicht unterstützt. Schaue ich mir am WE an, bin grade ohne Laptop unterwegs.
Grüße aus der Schweiz
Jürgen

@delphinis @David-G Der Adapter flexcharts ist im Beta-Repo als Version 0.1.6 verfügbar und läuft aus meiner Sicht stabil unter Linux und Windows. Der Adapter funktioniert als Web-Extension des Web-Adapters.

Wenn man die Daten ohnehin per Skript zusammenbauen muss, bietet sich das Konzept von flexcharts an.