Flot-Diagramme im NodeRed Dashboard

[mickym]

So nachdem ich nun ca. 2 Wochen an meinem Projekt gearbeitet habe, wollte ich Euch mal das Ergebnis präsentieren, etwas zur Motivation erzählen und dann sieht man ja, ob es nützlich für Euch ist oder nicht. Ich werde wohl das alles auf mehrere Posts ausweiten und versuche mit Screenshots das Ganze zu dokumentieren.

Auch werde ich mal wieder meine Einschätzung zu verschiedenen Themen und Tools rund um den iobroker zum Besten geben. Es haben mich wieder mal verschiedene Dinge am iobroker begeistert, weil es einfach wirklich ein sehr offenes und flexibles System ist und man eben auch andere Tools wunderbar einbinden kann und nicht so starr auf die Fähigkeiten eines Systems alleine angewiesen ist.

Thema ist wie gesagt, wie binde ich Flot Diagramme in das NodeRed Dashboard ein, warum mache ich das - warum arbeite ich überhaupt mit Node Red oder nutze andere Tools zur Darstellung.

Nochmal zur grundsätzlichen Einschätzung, eine der großen Stärken des iobrokers ist die Objektdatenbank und wie man mit Datenbanksystemen die States bzw. die Historie durch Speicherung der Werte von Datenpunkten problemlos und kinderleicht realisieren kann.
Zusammen mit Node-Red als Logikmaschine ist das in meinen Augen die bester Kombi, die es auf dem Markt der frei verfügbaren Software für die Hausautomation gibt. Das liegt natürlich auch an der fantastischen Community.

Im Rahmen des Projektes musste ich mich notgedrungener Weise auch bisschen mit HTML beschäftigen. Javascript ist sowieso die Basis für alles. Die eigentliche Logik bilde ich im Node Red ab, aber manchmal ist es einfach einfacher auch mal ein paar Function Nodes in Javascript zu schreiben.

Insofern bin ich auch grundsätzlich bei allen die in Javascript entwicklen und werde auch immer besser, nur Blockly kann ich leider nichts abgewinnen, das ist für mich einfach nicht intuitiv und bei weitem nicht so übersichtlich und da werde ich mich auch nicht mehr mit anfreunden, weil es keinen Mehrwert für mich bietet.

Aber - und das ist wichtig - iobroker ist so flexibel, dass Node Red genauso als Logikmaschine zusammen mit iobroker funktioniert, sodass man Blockly und reine Javascripts nicht benötigt. Das wird leider von vielen nicht so gesehen - aber egal .
Nun zur Historienverwaltung - in meinen Augen auch eine Riesenstärke des iobrokers. Mit ein paar Mausklicks ist eine relationale Datenbank angebunden, um Daten aufzeichnen zu können.

Die meisten scheinen sich wohl gerade Grafana und InfluxDB zu nutzen. Ich habe mich bewußt gegen diesen Trend entschieden, auch wenn

• Grafana vielleicht mehr Features zur Diagramm Darstellung bietet
• keine Ahnung was weitere Vorteile sind, ...

desweiteren baue ich weiter auf MySQL als Datenbanksystem, anstelle von influxDB. Vielleicht ist influxDB schneller oder schlanker oder man bekommt Performanceprobleme - keine Ahnung - aber

• MySQL läßt sich mit dem SQL Adapter super einbinden,
• gibt grafische Tools unter Windows (wie HeidiSQL um Daten direkt zu manipulieren) ohne SQL Profi zu sein.
• gibt AddIns für Excel um Daten ohne Dateiexport direkt zu importieren
• kann auch von NodeRed direkt genutzt werden, um Daten zu speichern und abzulegen.

So nun komme ich zu den FLOT-Diagrammen und warum ich die so fantastisch finde. Im Gegensatz zu Grafana wird nicht ein eigenes Dashboard benötigt, sondern die Diagramme werden "On-The-Fly" generiert und gerendert. Es wird im Prinzip ABSOLUT nichts zu einem Diagramm gespeichert oder anders ausgedrückt, alle Erscheinungsparameter dieser Diagramme sind in der URL enthalten. Das eröffnet erstaunliche Möglichkeiten.

Bislang hatte ich ja im Dashboard nur die enthaltenen Charts verwendet. Die sind zwar ganz schön, aber da gibts natürlich einen gravierenden Nachteil:

Wenn man keine Balkendiagramme zur Visualisierung von Momentanzuständen verwendet, dann ist ohne Datenbank wieder alles weg.
Heute mal wieder alles auf Anfang, weil ich zwischenzeitlich im NodeRed das Projekt gewechselt habe:

CPU Last ist nur deshalb so hoch, weil der Timeshift gerade läuft - der fliegt auch wieder runter.

Selbst wenn man dann die Daten in einer DB hat, ist es glaub ziemlich mühselig, dass alles wieder einzulesen. Hier gibts entsprechende Doku.

Etwas besser verhält es sich wenn man Zustände selbst in Datenpunkten festhält, dann kann man diese natürlich auch mit den NodeRed hauseigenen Mitteln mit Balkendiagrammen schön darstellen.

[mickym]

Nachdem ich die MySQL Datenbank installiert hatte, gibt es über den Schraubenschlüssel - wirklich easy die Möglichkeit den iobroker Datenpunkte in der Datenbank protokollieren zu lassen.
Dabei ist es egal, welche Datenpunkte man nimmt, ob selbst angelegte oder von einem Adapter angelegte Datenpunkte nimmt.

Ich lasse zum Test erst mal nur 2 Datenpunkte mitloggen - folglich habe ich auch nur 2 Kurven.
Ich weiß also noch nicht, wie sich das alles mal auf die Performance bzw. Resourcenbedarf auswirkt.

Im Moment werden also nur 2 Datenpunkte zum Stromverbrauch einer 6er Steckdosenleiste geloggt, wobei der 1 Datenpunkt kontinuerlich den Verbrauch innerhalb einer Stunde aufsummiert und ein anderer einen Datenpunkt pro vollendeter Stunde protokolliert. Also die 1. Kurve ist quasi eine ZickZack Kurve, die zu jeder Stunde auf 0 gesetzt wird.

Bei der Konfiguration der Historie zu den Datenpunkten empfiehlt es sich immer den Datentyp anzugeben - obwohl bei mir auch das automatisch funktioniert.

Toll ist, dass man im iobroker gleich die Tabelle mit den gespeicherten Daten sieht:

und auch als Diagramm kann man es sich schon im iobroker anschauen

Im Datenbanksystem sieht man das der iobroker ein paar Tabellen anlegt, sowohl zu Verwaltung als auch pro Datentyp eine Tabelle mit einer internen ID, die im Prinzip zugehörige Datenpunkte zur einer Datenreihe identifiziert:

So sehen die Punkte dann in der Datenbank aus:

... und wie gesagt über AddIns kann man sich das dann leicht in Excel holen um weitere Auswertungen zu machen, wenn man will.

[frankyboy73]

@mickym Hi, es geht los. Freut mich. Ich werde mal versuchen es bei mir nachzubauen.
Bin schon gespannt wie es hier weitergeht.
Danke.

[mickym]

@frankyboy73 Jo ich bin eigentlich ganz stolz, was ich geschafft habe - lass Dich mal überraschen.

[frankyboy73]

@mickym Dafür brauche ich erstmal den SQL Adapter + MySQL und den Flot Adapter, richtig? Oder reicht SQL Lite?

[mickym]

Ich habe einfach apt install mysql glaub gemacht. Ich hatte das zwar glaub mal alles dokumentiert, aber das weiß ich nimmer so genau. Du musst Dich ja dann in der Datenbank anmelden und einen Benutzer erstellen.

Ich hab mich damals ziemlich nach dem Video gerichtet: https://haus-automatisierung.com/software/iobroker/2018/05/10/iobroker-tutorial-reihe-part-10-mysql-logging-und-graphen.html

Allerdings weiß ich nimmer ob ich den Client installiert habe. Vielleicht zu Beginn aber dann habe ich alle in Windows über

https://mariadb.com/kb/en/heidisql/ gemacht.

Dann brauchst Du im iobroker den SQL Adapter und den FLOT Adapter.

Es läuft jedenfalls ein normaler mySQL Service:

systemctl status mysql
● mariadb.service - MariaDB 10.3.27 database server
   Loaded: loaded (/lib/systemd/system/mariadb.service; enabled; vendor preset: enabled)
   Active: active (running) since Sat 2021-03-20 19:42:29 CET; 2 days ago
     Docs: man:mysqld(8)
           https://mariadb.com/kb/en/library/systemd/
  Process: 667 ExecStartPre=/usr/bin/install -m 755 -o mysql -g root -d /var/run/mysqld (code=exited, status=0/SUCCESS)
  Process: 682 ExecStartPre=/bin/sh -c systemctl unset-environment _WSREP_START_POSITION (code=exited, status=0/SUCCESS)
  Process: 690 ExecStartPre=/bin/sh -c [ ! -e /usr/bin/galera_recovery ] && VAR= ||   VAR=`cd /usr/bin/..; /usr/bin/galera_recovery`; [ $? -eq 0 ]   && systemctl set-environ
  Process: 858 ExecStartPost=/bin/sh -c systemctl unset-environment _WSREP_START_POSITION (code=exited, status=0/SUCCESS)
  Process: 860 ExecStartPost=/etc/mysql/debian-start (code=exited, status=0/SUCCESS)
 Main PID: 759 (mysqld)
   Status: "Taking your SQL requests now..."
    Tasks: 33 (limit: 4915)
   CGroup: /system.slice/mariadb.service
           └─759 /usr/sbin/mysqld

Ich habe auch einen eigenen Benutzer für den iobroker dann angelegt - damit der nicht als Datenbank - root arbeitet.

Aber ich finde leider nicht mehr, wo und ob ich das dokumentiert habe.

Der Adapter unterstützt mehrere Datenbanksysteme

aber ist wohl nicht SQLite ;), das ich benutzt habe.

[frankyboy73]

@mickym Ah, ok, das Video von haus-automatisierung kenne ich. Habe mich vor ein paar Tagen schon mal etwas Informiert. Der erklärt das ganz gut und zeigt auch wie man nen Iobroker Benutzer anlegt und MySQL installiert und in Iobroker einbindet. Dann hangel ich mich da mal durch. Danke für die Tipps.

[mickym]

So nun kommen wir zur Flot Seite:

Das wunderbare und wir werden das später sehen ist, dass alle Informationen zur Konfiguration der Charts in der URL gespeichert sind. Der Flot Adapter bereitet also unseren Chart auf, nur anhand der Angaben, die wir in der URL mitgeben, was das für Vorteile gegenüber komplexeren Systemen mit eigenen Dashboards hat werden wir noch sehen:

Im Prinzip gibt es bei den Flot Adapter nicht soviel zu konfigurieren - gerne auch noch mal das Video von M. Kleine anschauen, das ich vorher gepostet habe, der zeigt das auch nochmal.

Die Menüs sind schnell erklärt.

1. Voreinstellungen. Damit kann ich mir quasi Charts oder Templates abspeichern. Aber wie gesagt es wird nur die Konfiguration in Form von URLs abgespeichert - die man im mittleren Bereich sieht. Diese werde dann als Datenpunkte unter flot.0 abgespeichert.
2. Eingangsdaten. Das ist da Menü, in dem man die Datenreihen konfiguriert - also die Linien. Die Quelle sind Datenpunkte, die man mit dem Schraubenschlüssel vorher im iobroker konfiguriert hat, siehe vorheriges Posting. Nur diese werden auch angeboten. Ansonsten kann man noch etwas zum Erscheinungsbild der Datenreihen hier konfigurieren. Die x/y Achsen, die Farbe der Linien, die Dicke usw. Wenn man mehrere Linien in einem Chart darstellen will, konfiguriert man das alles unter Eingangsdaten. Ich habe hier halt meine 2 stehen.
3. Markierungen. Hier kann ich halt statische Linien - min/max oder auch aus einem Datenpunkt Linien im Chart darstellen. Also horizintale Linien, die sich über den gesamten Chart erstrecken. Auch diese Linien können aber über Datenpunkte und somit dynamisch im Chart dargestellt werden.
4. Zeit: Hier konfiguriere ich ob der Chart halt immer aktuell weiter läuft, in welchem Zeitraum oder ob man statisch feste Zeiträume konfigurieren will.
5. Optionen. So das ist eigentlich am Anfang das WICHTIGSTE Menü, gerade um dann die Flot Charts auch vernüftig im Node Red Dashboard betreiben zu können.

Die wichtigste Option ist Kein Rahmen auf Ja. Wer sich das ausgedacht hat, der bekommt von mir Haue - hat mich mindestens eine halbe Stunde Zeit gekostet, dieser Switch.
Diese Option hat nämlich sogar nichts mit einem Rahmen zu tun

Normaler weise würde man ja denken, dass KEIN Rahmen dann über Rahmenfarbe, -breite etc. verändert werden kann. Diese Einstellung hat aber einfach nichts mit einem Rahmen zu tun. Fensterhintergrund - ich kann hier über den Colorpicker einstellen was ich will - ändert sich NICHTS: Sobald man also den kein Rahmen nicht auf JA setzt bekommt man einen UNVERÄNDERBAREN HINTERGRUND in hell.

Das fand ich nun - für die Integration in das Node-Red Dashboard nicht wirklich prikelnd. - Wenn man das helle Thema im Node-Red Dashboard eingestellt hat, dann mag das noch angehen, aber beim dunklen Thema schaut das - ausser man steht auf solche Kontraste nicht besonders gut aus.

Um zum Beispiel die Hintergrundfarbe genau zu treffen, die Deine Kacheln im NodeRed Dashboard haben - einfach das Broweserdebugfenster öffnen und schauen, wie auf welche Farben die Kacheln gesetzt sind.

Wenn Du, also im NR Dashboard das dunkle Farbschema nutzt dann ist die Hintergrundfarbe: #3333333.

Wie man sieht ist das der Wert der Variablen: --nr-dashboard-groupBackgroundColor

[mickym]

So weiter gehts ...

Hat man also den Hintergrund etc. entsprechend dem Design seines Node Red Dashboards eingestellt und auch die Beschriftung etc lesbar gemacht - dann ist man was die Optik betrifft schon fertig.

Das Node Red Dashboad orientiert sich stilistisch übrigens vollständig nach dem Material Design. Deswegen schaut auch alles so Google/Android like aus. Das reicht von den Schriften, Icons und auch den Designelementen wir die Striche für Navigation - Punkte etc.

Es ist ausserdem mit seinem Kacheldesign vollständig responsive und passt sich deshalb auch automatisch den Geräten mit verschiedenen Auflösungen an. Die Entwickler der iobroker Gemeinde, die hier Adapter oder Projekte entwickelt haben um das Material Design zu implementieren, wissen wovon ich spreche.

Gut das Node Red Dashboard arbeitet also hauptsächlich wie das Google/Andriod Design und man ist mit den Kachel einerseits sehr flexibel, was die Gestaltungsmöglichkeiten betrifft auch wieder eingeschränkt. Hier hat natürlich VIS seine Vorteile , ist aber bezüglich der Auflösung und der Plazierung der Widgets sehr statisch. Ich finde beides gut und man kann auch beide Systeme gut miteinander kombinieren. Im Node Red Dashboard habe ich halt wesentlich schneller eine Bedienung und eine Steuerung zur Hand. Ich lege die Bedienelemente ja bereits im Flow an. Im Vis plaziere ich erst die Elemente und überlege meist dann, wie ich die Informationen da hineinbekomme.

[mickym]

Gut nun wie schaut nun die Integration der Flot Diagramme in das Node Red aus:

Ich muss einfach sagen hervorragend.

Ich habe jetzt mal alles mit dem dunklen NR Dashboard Thema erstellt:

Ich finde die Kachel rechts unten unterscheidet sich nicht vom übrigen Design.

Schriften werden nicht gut skaliert - auf diese sollte man dann ggf. verzichten bzw. muss die Charts anpassen.

Die Skalierung der Charts in den Kacheln (wie gesagt bis auf die Schriften) ist auch hervorragend:

und auch zusammen mit anderen Design Elementen in einer Kachel kann sich das in meinen Augen durchaus sehen lassen:

Auch bei der übrigen Integration gibt es nichts zu beanstanden:

1. Ich kann - falls vorhanden - über das Stiftsymbole den Chart direkt editieren und lande in dem Flot-Adapter
2. Ich kann zoomen oder den Chart horizontal verschieben und wieder resetten

[mickym]

Nun zur technischen Implementierung:

Die ist verblüffend easy. Man speichert sich einfach den Chart in einem eigenen Datenpunkt ab - gerendert wird dynamisch - das ist das tolle an der Geschichte.

Über den iobroker In Node - wird bei Änderungen in dem Datenpunkt natürlich alle Charts aufeinmal aktualisiert.

Man braucht neben der iobroker-IN Node lediglich 2 weitere Nodes als Minimalkonfiguration. Die template-Node (nicht die vom Dashboard), da ich komischerweise keine Syntax erwischt habe - die mir die URL in der dashboard-Template Node erstellt hat und dann aber für die Darstellung selbst noch die dashboard Template Node. Die ist aber völlig leer.

Die normale template Node schickt dann über msg.template das HTML-Gedöns an die template Node in das Dashboard.

Also hier sieht manden ganzen Flow - für alle 6 Diagramme, wobei 2 Datenpunkte mit unterschiedlichen Vorlagen getriggert werden können. Die jeweils aktuellst bestimmt dann natürlich das Aussehen der Charts:

Das wichtigste ist nun der Inhalt der template Vorlage und das ist das Inline-Fenster und das ist das ganze Geheimnis:

[
    {
        "id": "428a3ed6.68983",
        "type": "template",
        "z": "2c7d577a.9b4378",
        "name": "",
        "field": "template",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<iframe\n   src={{payload}}\n   width=\"100%\" \n   height=\"100%\"\n   frameborder=0\" ></iframe> \n",
        "output": "str",
        "x": 2240,
        "y": 2200,
        "wires": [
            [
                "71d35dc5.213464",
                "7c4f149a.c9ab1c",
                "19aa27ab.b9cc88",
                "42ff924e.f2278c",
                "210227a.3f679d8"
            ]
        ]
    }
]

Also eigentlich ist das Geheimnis nur dieses kurze HTML Fragement:

<iframe
   src={{payload}}
   width="100%" 
   height="100%"
   frameborder=0" ></iframe> 

Durch die Source als Payload lädt das inline Fenster die komplette URL in das Inline Fenster.
Die Skalierung auf 100% ist dynamisch und passt sich deshalb immer automatisch der Kachelgröße an und das der letzte Paramer bewirkt, dass kein Rahmen gezeichnet wird - der die Intergration stört (in meinen Augen). Allerdings der Firefox scheint diesen Parameter zu ignorieren.

[mickym]

So nun wird sich er eine oder andere fragen, wieso ich denn 2 Wochen gebraucht habe, um das zu realisieren.

Nun zuerst muss ich mir einiges immer wieder an Wissen aneignen und dann hatte ich ja noch eine grandiose Idee - warum sowas auch mit Grafana in meinen Augen nicht so einfach zu realisieren ist.

Nehmen wir mal an, wir haben einen Chart mit sagen wir mal 10 Datenreihen, sagen wir mal, alles die Ventilstellung von 10 Heizkörpern. Das sind 10 Linien in einem Chart oder 10 Charts mit 1 Linie, Datenreihe oder 5 Charts mit 2 Datenreihen usw.

Dann dachte ich mir wieviel cooler wäre es, wenn ich diese Charts in meinem Dashboard dynamisch aus- und einblenden könnte und zwar ohne, dass ich meine GUI verlassen muss und dann mit dem FLOT-Adapter die Änderungen vornehmen muss, dann die veränderte URL wieder in einen Datenpunkt kopieren. Das heißt ich habe zumindest ein bisschen die Bedienerfunktionalität des FLOT-Adapters im NodeRed Dashboard via Flow nach implementiert und das hat schon seine Zeit gedauert, weil ich einfach kein HTML Spezialist bin und mich mühsam zusammensuchen musste, wie man style Elemente und verschiedene andere Dinge realisiert.

Herausgekommen ist eigentlich eine Art Template, wie man diese Flow Charts manipulieren kann und nun liegt es natürlich bei Euch eigene Bedienelemente zu entwerfen, um die Charts dynamisch verändern zu können.

Ich habe das nur relativ "Quick & Dirty" implementiert und dabei kann ich weder Bugs ausschließen noch habe ich besonderen Wert auf das Aussehen gelegt, sondern einfach die URL analysiert und die Informationen quasi zum Test zugänglich gemacht.

Das heißt mit der Steuerung kann man keine neuen Datenreihen erstellen, sondern nur vorhandene Charts verändern, in dem man Informationen aus - oder einblendet bzw. das Aussehen verändert.

Es sind auch 2 Bugs drin, deren Behebung ich nicht in der Lage bin - da gibts wohl auch Probleme im Node Red.

Den Flow zur Implementierung mit Anleitung gibts dann zum Schluß - erst mal kommt eine Bedienungsanleitung.

Wie gesagt, dass ganze funktioniert auch im alpha-Status - insbesondere wenn man das häufig abspeichert - kann es dann doch zu Fehlinterpretationen kommen - insofern ist ein Datenpunkt, wo der Chart im Orginal abgespeichert bliebt auch hilfreich - ich werde an dem Flow auch so gut wie nichts mehr machen. Jeder Programmierer weiß, dass Vermeidung von Fehleingaben etc. aufwändig sind. Es geht nur darum zu zeigen, welche Veränderungen dynamisch möglich sind.

[mickym]

So was ich also gemacht habe, ist einfach den bestehenden Chart mit der URL zu nehmen und in seine Bestandteile zu zerlegen und dann selbständig wieder eine URL aufzubauen, die dann wenn alles gut ging auch vom Flot-Adapter wieder entsprechend interpretiert und dargestellt werden kann.

So meine Node Red Steuerung (in schön vom großen IPad schaut so aus:

Auf dem PC schaut es nicht ganz so dolle aus, da halt die Scrollbalken angezeigt werden - aber wie gesagt, dass ist auch nicht für Endanwender gedacht.

[mickym]

@mickym So nun ein kurze Erklärung zu der Steuerung.
In der Chart Vorschau sieht man zu Beginn, wie der Chart aussieht, wie aus dem darunter stehenden Datenpunkt gerendert wird.

Mit Neuladen wird er nochmal neu eingelesen mit Speichern kann er entweder überschrieben oder in einem neuen Datenpunkt gespeichert werden. Auch hier - wie gesagt keine Plausibilitätsprüfungen. Wer hier Schmarrn eingibt erntet auch Schmarn in seinem System.

So die Flot Charts bestehen im Wesentlichen aus den Hauptparametern - die das generelle Erscheinungsbild festlegen. Im Originaladapter unter Optionen und den Parametern für jede Datenreihelinie.

Grundsätzlich kann man jeden Parameter in dem Formular einfach ändern, wenn man weiß was der Parameter bedeutet bzw. welche Werte man eingeben muss (wie gesagt quick and dirty): Wenn man die Bedeutung vom Original nicht kennt, kann sie oft erahnen. Also wenn halt die Legende oben links, oben rechts, unten rechts, unten links stehen kann, dann wird das halt mit north-west also nw, ne, sw, se entsprechend abgekürzt.

Grundsätzlich kann an in die oberen Felder alles eintragen und mit Rückgängig wird der vorherige Zustand wiederhergestellt.

Allerdings nicht, wenn man Farben bei den allgemeinen Charteinstellungen über den Color-Picker auswählt - die werden sofort übernommen (warum auch immer - gegen diesen Bug bin ich machtlos). Auf der anderen Seite Farben bei den Linien Datenreihen zu ändern, kann komischerweise immer rückgängig gemacht werden. Ich weiß nicht was das ist.

Dann kann, wenn man Parameter kennt, die aber nicht in der aktuellen URL (Chart) enthalten sind, die nachträglich einfügen. Dazu gibt man diese Parameter in der Form - Schlüssel=Wert, Schlüssel2=Wert2 usw. ein. Auch hier gibts einen Bug, dass diese Änderungen bei den Datenreihen sofort übernommen werden.

Will man die Colorpicker verwenden - so gibt es bei den Datenreihen, sowieso nur die Farbe der Linie - bei den Charteinstellungen halt die Elemente, die auch im Adapter angeboten werden:

Die Datenreihen/Linien im Chart kann man dynamisch ein- und ausblenden. Das muss man halt in dem Flow analysieren wie ich das gemacht habe und kann dann ja eine eigene Steuerung abbilden.

Ich habs halt so gemacht, dass man die Datenreihe in der Mitte erst auswählt und man dann mit - oder + aus- bzw. einblendet. Man kann auch mehrere Linien aufeinmal selektieren, hab das aber nicht getestet. Eine Linie bleibt jedoch immer eingeblendet. Der Flotadapter kann keinen leeren Chart anzeigen:
Der Status der Linie wird in der Auswahlbox mit angezeigt.

Die Funktion Dashboard Schema verwenden - kann man dazu verwenden, dass die Farben entsprechend im Chart gematcht werden - kann man natürlich auch wieder ändern.

Beispiele von Standardschem Dunkel > Hell und Hell > Dunkel:

Dunkel > Hell:

so schaut es dann vor der Anwendung auf den Chart aus:

und wenn man dann die Farben mit dem Knopf Dashboard Schema verwenden anschaut - sieht es so aus:

und das Ganze noch in umgekehrter Richtung Hell > Dunkel:

Vor Anwendung der Farben auf den Chart:

nach Übernahme der Schemafarben:

Das kann man dann natürlich auch in 2 verschiedenen Datenpunkten abspeichern und so ein Wechsel von Tag- auf Nachtdesign ermöglichen.

Wie gesagt - es wird nur die URL verändert, solange das alles auch nach Übernehmen nicht abgespeichert wird, sind das temporäre Zustände und bleiben so dynamisch veränderbar.

Beispiel Charthintergrundfarbe dynamisch ändern:

mit Übernehmen sind das dann so aus:

So ich hoffe ich konnte zeigen, dass man die FLOT-Charts gut in das Node Red Dashboard integrieren kann und man sogar für die eigene Steuerung die Charts dynamisch darstellen kann. Das stelle ich mir bei komlexeren Systemen wesentlich schwieriger vor.

[mickym]

So nun komme ich langsam zum Abschluß. Wer also meinen Node-Red Flow zum dynamischen Anpassung der Flot Charts nutzen will, solle vor dem Importieren folgendes beachten:

1. Am Besten man erstellt einen Tab
   

"Flot Chart bearbeiten" mit genau demselben Namen, damit die Steuerelemente beim Import des Flows einigermaßen geordnet erscheinen. Bei mir sah das gut aus, nur die Spacer muss man nachträglich hinzufügen.

Ich nutze die Seite ohne sie im Navigationsmenü anzuzeigen. Man kann die Seite einfach aufrufen indem man den In-Node mit einer Out-Node eines eigenen Flows verbindet. Die Seite wird immer mit ca. 3-4 s Verzögerung angezeigt solange braucht der Flow bis er die URL interpretiert hat. Das ist die Zeit die der Flow Adapter seinen Kreisel dreht.

Der Flow ist relativ komplex und nutzt auch ein bisschen Javascript in den function Nodes (manchmal kam ich auch nicht ohne aus. )

Aber was in meinen Augen sehr leerreich ist, wie man Tabellen und Standard HTML Elemente in den Template Nodes nutzen kann und diese auch wieder nutzen kann, ob sie dann als msg.payload weiter zu verarbeiten. Habe jedenfalls viel gelernt dabei.

Falls Fragen sind gerne - und wie gesagt Nutzung auf eigenes Risiko.

und hier der Flow:

flot-diagramme.json

Am Besten als Datei abspeichern und als Ganzes importieren.

[frankyboy73]

@mickym Wow, super Anleitung. Wenn einem jemand sagt wie es geht ist es gar nicht so schwierig. Erste Erfolge stellen sich schon ein. Danke

Ich hab das nur nicht verstanden wie ich die Charts in einen Datenpunkt schreiben kann, den ich dann per Input Node auslese. Ich habe erst mal zum testen die Url per Injekt Node abgefeuert. Das klappt schon mal.

[mickym]

@frankyboy73 sagte in Flot-Diagramme im NodeRed Dashboard:

@mickym Wow, super Anleitung. Wenn einem jemand sagt wie es geht ist es gar nicht so schwierig. Erste Erfolge stellen sich schon ein. Danke

Na freut mich, dann hat sich die Arbeit schon gelohnt. Mit dem Stift sieht man nur leicht in Deinem Screenshot bearbeitest Du Dein Chart wieder direkt im FLOT Adapter. Ansonsten würde ich die Achsen-Beschriftungen noch hell machen.

Die URL habe ich einfach in einen selbst erstellten Datenpunkt unter 0_userdata.0 in einen Zeichenkettendatenpunkt manuell kopiert. Die Daten werden ja dynamisch gerendert - in der URL ist ja nur die Konfiguration des Charts - wie ich das dann auch mit meinem Flow auslese.

Falls Du was änderst musst Du halt die URL wieder manuell in den Datenpunkt kopieren - ausser Du nutzt mein Flow - aber sicherer ist es die URL aus dem FLOT Adapter zu kopieren.

Leider kann man die URL nicht direkt auslesen, weil unser iobrokerList Nodes - eigentlich ANY Object Type auslesen können sollten aber mit dem Datenpunkt vom Typ Chart geht das auch in ANY Einstellung nicht. Ich will aber @apollon77 nicht mit einem weiteren Issue quälen.

Hier siehst Du in den Raw-Daten wie der Chart abgespeichert ist:

{
  "common": {
    "name": "AV Stromverbrauch"
  },
  "type": "chart",
  "native": {
    "url": "l%5B0%5D%5Bid%5D=0_userdata.0.stromverbrauch.allnet4176.AV-wz_steckdosen.hour_before&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=minmax&l%5B0%5D%5Bcolor%5D=%230eb8c0&l%5B0%5D%5Bthickness%5D=3&l%5B0%5D%5Bshadowsize%5D=3&l%5B0%5D%5Bname%5D=AV+Verbrauch+letzte+Stunde&l%5B0%5D%5Bxmove%5D=0&l%5B0%5D%5BafterComma%5D=0&l%5B0%5D%5Bdashes%5D=false&l%5B0%5D%5BdashLength%5D=10&l%5B0%5D%5BspaceLength%5D=10&l%5B0%5D%5Bmultiplicator%5D=1&l%5B0%5D%5Bmin%5D=0&l%5B0%5D%5Bfill%5D=0.3&l%5B1%5D%5Bid%5D=0_userdata.0.stromverbrauch.allnet4176.AV-wz_steckdosen.hour&l%5B1%5D%5Boffset%5D=0&l%5B1%5D%5Baggregate%5D=minmax&l%5B1%5D%5Bcolor%5D=%231f77b4&l%5B1%5D%5Bthickness%5D=3&l%5B1%5D%5Bshadowsize%5D=3&l%5B1%5D%5Bname%5D=AV+Verbrauch+aktuelle+Stunde&l%5B1%5D%5Bxmove%5D=0&l%5B1%5D%5Bfill%5D=0.3&l%5B1%5D%5Byaxe%5D=off&l%5B1%5D%5Bxaxe%5D=off&l%5B1%5D%5BcommonYAxis%5D=1&l%5B1%5D%5BignoreNull%5D=&l%5B1%5D%5BafterComma%5D=2&l%5B1%5D%5Bdashes%5D=false&l%5B1%5D%5BdashLength%5D=10&l%5B1%5D%5BspaceLength%5D=10&l%5B1%5D%5Bmultiplicator%5D=1&timeType=relative&relativeEnd=today&range=4320&live=1800&aggregateType=count&aggregateSpan=300&hoverDetail=false&useComma=true&zoom=true&noedit=true&animation=0&border_color=%23000000&legend=nw&barColor=%23000000&noBorder=noborder&window_bg=%23333333&x_labels_color=%23ffffff&y_labels_color=%23ffffff&border_width=0&timeFormat=%25H%3A%25M+%25d.%25m.%25y&titleColor=%23ffffff&legBgOpacity=1&legBg=%23ffffff&start=2021-03-17&end=2021-03-18&title=AV+Verbrauch&titlePos=top%3A35%3Bleft%3A50&titleSize=16"
  },
  "from": "system.adapter.web.0",
  "user": "system.user.admin",
  "ts": 1616061364592,
  "_id": "flot.0.AV_Stromverbrauch",
  "acl": {
    "object": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  }
}

also unter native.url

Im Normalfall wirst Du aber einfach den Link

aus dem Flot Adapter rauskopieren und in Deinen selbsterstellten Datenpunkt reinkopieren.

[mickym]

@frankyboy73 sagte in Flot-Diagramme im NodeRed Dashboard:

Ich hab das nur nicht verstanden wie ich die Charts in einen Datenpunkt schreiben kann, den ich dann per Input Node auslese. Ich habe erst mal zum testen die Url per Injekt Node abgefeuert. Das klappt schon mal.

Und auch nochmal ob Misvverständnisse zu vermeiden - der Chart selbst wird nie wegespeichert - der erstellt sich immer aus den Daten in Deiner Datenbank und der FLOT Definition. Es liegt also in Deinen Einstellungen zu Deinen Datenpunkten wie lange die Daten gespeichert werden und ob Du daraus wieder den Chart für einen bestimmten Zeitpunkt generieren willst oder nicht.

[frankyboy73]

@mickym Ah, ok. Ich hatte die URL in nen Datenpunkt kopiert aber es wurde mir nicht angezeigt. Nach einiger Zeit war es dann doch. Kann es sein das mir das im Datenpunkt erst nach der ersten aktualisierung angezeigt wird.
Und ja, ich werde den Chart noch bearbeiten, war nur mein erster Test, ob ich das überhaupt angezeigt bekomme.
Vielen Dank, für die Erklärung und die Hinweise.

[mickym]

@frankyboy73 Na dann solltest Deine iobroker In Node so einstellen, dass sie beim Start schon was schickt.