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 Klasse! Danke fürs Blockly.

@ullij Ich habe eine Version im Branch develop erstellt, kann im Moment aber nur eingeschränkt testen. Bei mir sieht's gut aus. Falls Du es ausprobieren möchtest:

Im Expertenmodus im Adapter-Installationsdialog unter "Custom" folgende Adresse verwenden:
https://github.com/MyHomeMyData/ioBroker.flexcharts/tree/develop

@merlin123 sagte in Test Adapter flexcharts - Stapeldiagramme und mehr:

Farben für die einzelnen Sachen als Variable am Anfang deklarieren...

Ja, auch eine gute Idee. Man könnte auch in der Konstante IDS für jeden Chart-Typ eigene Farben vorsehen und im Skript passend zuweisen.

Es soll ja aber eigentlich eine Vorlage sein und auch zu eigenen Experimenten anregen. Deshalb werde ich es jetzt erstmal so lassen. Du kannst natürlich gerne Weiterentwicklungen in der Diskussion posten.

@flatlander Freut mich. Was war die Frage??

@maddm Es gibt beide Möglichkeiten. Einfacher ist vermutlich, 2 Skripte zu verwenden. Der Adapter ruft ein Skript mit einer bestimmten "Message" auf, die lautet per Default "flexcharts". Über die URL kann man aber eine eigene "Message" verwenden. Meine Empfehlung ist deshalb, zwei Skripte zu erstellen:

• im ersten Skript steht onMessage('my_script_1', ...) { ... }, im zweiten Skript steht onMessage('my_script_2', ...) { ... }
• Die beiden URLs lauten dann http://localhost:8082/flexcharts/echarts.html?source=script&message=my_script_1 und http://localhost:8082/flexcharts/echarts.html?source=script&message=my_script_2

Alternativ kannst Du ein einziges Skript verwenden, beide Charts implementierten und das gewünschte Chart über die Parameter in der URL auswählen:

• Für "chart1": http://localhost:8082/flexcharts/echarts.html?source=script&httpparams={"chart":"chart1"} bzw. für "chart2": http://localhost:8082/flexcharts/echarts.html?source=script&httpparams={"chart":"chart2"}
• Im Skript wertest Du die httpparams aus und generierst das gewünschte Chart. Ist aber vielleicht schwierigen nachzuvollziehen.

@flatlander In der Datei vx3_... stehen nur die Datenpunkte, die vom Standardwert abweichen, also z.B. eine andere Länge haben. Alle anderen Datenpunkte stehen im generischen File Open3Edatapoints.py. Das bringt Dich aber vermutlich auch nicht weiter.
Würde empfehlen, Deine Frage(n) im Viessmann-Forum oder in open3e unter Discussions zu stellen. Vielleicht hat bereits ein anderer User das Problem gelöst.

@maddm Das ist mir grade auch nicht klar, ob bzw. wie das geht.
Was Du machen könntest: Statt normalem Balkendiagramm ein Stapeldiagramm machen und dabei den Wert "Gesamt" weglassen. Der ergibt sich im Stapeldiagramm ja automatisch aus der Summe der Einzelwerte. Damit macht er im Pie-Chart auch keine Probleme mehr.

@flatlander Der beste Ort für Infos und Diskussionen ist das open3e-Projekt. Darauf basiert ja e3oncan-Adapter. Interessant ist auch das Viessmann-Forum, allerdings ziemlich unübersichtlich.

Der Datenpunkt 535 enthält kumulierte Energiewerte. Da ist natürlich die Frage, wann die auf Null waren. Ich habe schon erlebt, dass kumulierte Werte nach einem SW-Update durch Viessmann plötzlich wieder Null waren.
Kannst Du zumindest die Änderungen zwischen 535 und E380-Werten in Einklang bringen?
Ich benutze 535 nicht, kann deshalb nichts konkretes dazu sagen.

@maddm Ich habe die Version (0.4.0) inzwischen released. Sollte jetzt im normalen Repository verfügbar sein. Die Verwendung ist im Readme beschrieben.
Freue mich über Feedback und Verbesserungsvorschläge.

@tobi-5 Super, danke. Mit Vis-1 scheint es nicht zu gehen. Muss jetzt erstmal Vis-2 installieren.

@tobi-5 Danke für Deine Rückmeldung. Im ZIP-File sehe ich etliche Bilddateien, aber die Datei HeatPump ist leider leer, Größe ist 0. Würdest Du da bitte nochmal schauen?

@maddm Alles gut. Ist ja nicht dringend. Freue mich auf Dein Rückmeldung.

@maddm Ich habe eine Implementierung der dynamischen Funktion erstellt. Ist im Branch develop verfügbar.

Wäre klasse, wenn Du das ausprobieren könntest. Am besten nicht nur mit dem Chart, das die neue Funktionalität nutzt, sondern auch mit allen anderen. Ich musste bei der Auswertung der übergebenen Daten ändern, deshalb ist ein Test der Abwärtskompatibilität sehr wichtig.

Deine Callback-Funktion musst Du natürlich anpassen, um die onEvent-Funktion zu übergeben. Möchte das hier aber gar nicht weiter erklären, sondern auf das Readme verweisen. Würde mich nämlich interessieren, ob man das versteht. Die relevanten Infos stehen im Kapitel "Using event driven functions to create dynamically changing charts".

Habe auch ein kleines Video erstellt:
77455d6f-64dc-4526-991c-9317b0867b4d-dynamic_charts_with_flexcharts.mkv dynamic_charts_with_flexcharts.mkv

@tobi-5 Vielen Dank für die tolle Rückmeldung

Das Diagnose-Bild sieht super aus Ja, ich habe das mal von der Anlage abfotografiert und aufbereitet.
Wäre super, wenn Du Deine Version als View zur Verfügung stellen könntest. Am besten als neuen Beitrag unter Discussions.

Viele Grüße, Jürgen

@maddm Das Pie-Chart wird nicht dargestellt, weil es die Kategorie "2012" in Deinen Daten nicht gibt. Wenn Du das so änderst, erscheint das Chart:

      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@2024-04} ({d}%)'
        },
        encode: {
          itemName: 'Datum',
          value: '2024-04',
          tooltip: '2024-04'
        }
      }

Jetzt kommt die schlechte Nachricht: Der Inhalt des Charts wird nicht angepasst, wenn man die Maus über das Liniendiagramm bewegt. Das Konzept von flexcharts gibt das zwar her, bisher habe ich aber keine Schnittstelle implementiert, um das hier notwendige dynamische Verhalten zu konfigurieren.
Ich werde ein Issue anlegen und schauen, ob ich das sinnvoll implementieren kann.
Hab noch einen Punkt vergessen: Schau Dir mal im Readme das Kapitel zu Funktionen (Using functions within definition of chart) an. Das musst Du in Dein Skript einbauen, sonst funktioniert es nicht.

Quick & dirty hab ich's mal ausprobiert. Sieht so aus: