Visualisierung mit Node Red erstellen

[mickym]

@damrak2022 Na da hast halt oben noch ein TableNode - die irgendwo rumhängt.

Lösch halt mal eine und wenn es die Table im Flow ist machst Du das mit CTRL + Z wieder rückgängig. Wenn nicht dann ist diese Dummy Node einfach weg.

[Damrak2022]

@mickym Ah, okay danke. Jetzt geht alles

[mickym]

@damrak2022 Die Frage ist nicht ob alles geht - da war ich mir eigentlich sicher - wichtiger ist, dass du verstehst - damit Du das in Zukunft ohne mich machen kannst.

[Damrak2022]

@mickym Ich komme in kleinen Schritten voran

[mickym]

@damrak2022 Gut dann weisst Du also wie die Übersetzung funktioniert und was in JSONATA precate Queries sind.

https://docs.jsonata.org/predicate

[Damrak2022]

@mickym Ich lese das gerade und versuche es zu verstehen

[mickym]

@damrak2022 Also ich merke schon - Du tust noch schwer, es mit eigenen Worten zu erklären. Ich werde es einmal versuchen - aber das nächste mal - werde ich das nicht mehr machen. Wie gesagt, es geht mir nicht darum hier auf Anforderungen fertige Lösungen vorzustellen. Ich bin nämlich selbst noch oft am Rumprobieren, weil das JSONATA nicht so einfach ist - zumindest bei den fortgeschritteneren Tasks.

So schauen wir uns also die einzelnen Nodes an - hier mal der gesamte Flow -

Das heißt wenn wir uns die 1 Change Node setze msg.payload anschauen - müssen wir sehen was geht in die Node rein bzw. kommt aus der Inject Node raus debug 19 - und was kommt raus - debug 20:

1. Change Node setze msg. payload:
   In die Node kommt also die payload mit einem Objekt (s. debug 19) und den 4 Eigenschaften: ok, license, data,prices

da uns nur die Eigenschaft prices interessiert schmeissen wir die anderen Eigenschaften weg und setzen die neue payload nur noch auf das Objekt prices:

Das heißt raus aus dieser Change Node kommt nur noch das Object prices - siehe debug 20:

Deswegen gibt es hier keine Eigenschaft mehr prices mehr, sondern die ganze Eigenschaft payload des Nachrichtenobjektes enthält das objekt prices.

2. Dieses Objekt (s. debug 20) geht nun in die split Node. Diese zerlegt nun jede Objekteigenschaft in einzelne Nachrichten, so dass diese einzeln bearbeitet werden können.

Die debug Node - enthält nun alle Eigenschaften als eigene Nachrichtenobjekte - wobei die Objekteigenschaft in topic kopiert wird, der Wert dieser Objekteigenschaften in die payload. - Zusammengehörige Inhalte wurde farblich zusammengehörig markiert:

3. So ich hab mal die debug Nodes 21 und 22 zur Ausgabe des kompletten Nachrichten Objektes umgestellt.

Im Prinzip wird die payload der Einzelnnachrichten durch die Übersetzungstabelle nicht geändert, sondern nur dem Nachrichtenobjekt hinzugefügt.

Die einzelnen Nachrichten bekommen also die gesamte Übersetzungstabelle mit in das Nachrichtenobjekt zusätzlich als Eigenschaft mit.

Das heißt dem Nachrichtenobjekt wird nur eine Eigenschaft hinzugefügt. (s. debug Node 22).

Schauen wir also mal das Nachrichtenobjekt der debug Node 22 genauer an - bevor die in diese in der ID übersetzen Node verarbeitet wird.

Die eigentliche ID befindet sich also in der topic Eigenschaft des Nachrichtenobjektes und diese wird nun als Wert in der Eigenschaft id einer Liste von Objekten gesucht.

4. ID übersetzen
   Die Abfrage in JSONATA mit den precate Queries ist nämlich mit einem Einzeiler ziemlich genial:

Das Ergebnis dieser Query - wird in einer neuen Eigenschaft des payload objektes mit Namen name gespeichert.

Wir haben ja gesehen, das die translation wie folgt aufgebaut ist:

Die precate Query - kann somit 2 Dinge auf einmal - schauen wir erst mal den gesamten Einzeiler an:

translation_table[id=$$.topic] ? translation_table[id=$$.topic].Tankstelle : "unbekannte ID"

Über das $$.topic .- sagen wir JSONATA suche - von der Wurzel des Nachrichtenobjektes die aktuelle topic Eigenschaft.

Die eigentliche precate Query ist nun:

translation_table[id=$$.topic]

findet diese Abfrage also ein Objekt dessen id der aktuellen msg.topic Eigenschaft entspricht, wird das eigentliche Objekt zurückgegeben bzw. ist das wahr - und somit wird dieses Objekt nochmal abgefragt und es soll nun anstelle ID der Wert der Eigenschaft Tankstelle zurückgegeben werden.

translation_table[id=$$.topic].Tankstelle

wir das Objekt hingegen nicht gefunden, da es kein Objekt mit der id Eigenschaft ergibt die gleich dem msg.topic ist, dann soll "unbekannte ID" zurückgegeben werden.

Anschließend löschen wir wieder die translation_table aus dem Nachrichtenobjekt, da wir es nicht mehr brauchen.

5. Wenn wir uns also den Output der ID übersetzen node anschauen - siehe debug 23 - dann sehen wir immer noch für jedes Objekt eine Einzelnachricht mit einer neuen Eigenschaft name im payload Objekt.

für die Nachrichten, deren msg.topic Eigenschaften in der Translation gefunden wurde - enthält die Eigenschaft name den Wert der Tankstelle aus der Übersetzungstabellen, ansonsten eben unbekannte ID

6. Nun filtern wir alle unbekannten IDs mit der switch Node raus - lassen also nur die durch des payload.name NICHT "unbekannte ID" ist.

Schauen wir uns alle Nachrichten an - dann enthält die debug Node 23 noch alle Nachrichten - debug Node 24 nur noch die, deren name nicht unbekannte ID heisst.

7. Entsprechend werden nun die geschlossenen Tankstellen herausgefiltert, die den status geschlossen haben da diese eh keine Preise enthalten.

8. Jetzt machen wir noch die Währung an die Preise.

Stringverkettungen macht man auch im JSONATA

Hier wieder wie es in die Node formatiere Preise eingeht (debug 25) und wie es rauskommt (debug 26)

9. Die JOIN Node macht nun aus den Einzelnachrichten (debug #26) wieder ein Array (debug #27) - weil dies von der Table Node so erwartet wird - also eine Liste mit Objekten.

Da wir aufgrund der Filterung nicht wissen, wir groß das Array sein wird - habe ich mal gesagt - mach ein Array nach 1 Sekunde - bei größeren Arrays - aber unbekannter Anzahl - warte ich also lieber länger.

Aus den Einzelnachricht wird also wieder eine mit einem Array/Liste aus Einzelobjekten.

Die debug Node #26 enthält noch die Einzelnachrichten und die JOIN Node fasst alle innerhalb einer Sekunde eintreffenden Nachrichten in einer - und in diesem Fall in einem Array zusammen.

10. Die Table Node ist dann Standard und erhält den Inhalt entsprechend debug #27;

So das wars - so ich hoffe Du kannst das nächstes Mal alleine. Und falls noch Fragen sind - dann bitte mit Angabe zur Step- Nummer.

[Damrak2022]

@mickym Ich habe mir den Flow von Dir jetzt mal auf einem neuen Flow als Übungsflow exakt so angelegt, damit ich das zusammen mit Deiner sehr ausführlichen Anleitung - danke dafür - beim nächsten Mal hoffentlich so nachvollziehen kann.

[mickym]

@damrak2022 sagte in Visualisierung mit Node Red erstellen:

@mickym Ich habe mir den Flow von Dir jetzt mal auf einem neuen Flow als Übungsflow exakt so angelegt, damit ich das zusammen mit Deiner sehr ausführlichen Anleitung - danke dafür - beim nächsten Mal hoffentlich so nachvollziehen kann.

[Damrak2022]

@mickym Habe ich das hier zu kompliziert gemacht, oder ist das so okay?
Wie bekomme ich unten den Text weg und wie kann ich hinter die Zahlen das "%" Zeichen setzen?

Meine Einstellungen sind so gesetzt:

2. Frage von mir ist wie ich bei den Dashboards wieder die Übersicht reinbekomme, die ich idiotischweise gelöscht habe. Du hast zwar geschrieben, ie müsse noch irgendwo sein, aber ich habe sie nicht gefunden, da ich mir gerne so eine Startseite bauen würde, welche mich auf die einzelnen Bereiche verlinkt.

[mickym]

@damrak2022 Nein passt schon - geht doch nicht einfacher - Ein - und Ausgang

zu 2: Nein Du bekommst Deine Übersicht nicht mehr - aber die Nodes die in der Übersicht waren, sollten ja noch irgendwo sein. Du musst die Übersicht komplett neu erstellen und die Nodes wieder diesem Tab zuordnen. Was weg ist, ist weg - zumindest wenn Du Deploy drückst. Solange Du noch nicht Deploy gedrückt hast, kann man die Änderungen mit CTRL+Z stückweise wieder rückgängig machen.

[Damrak2022]

@mickym Okay, danke

[Damrak2022]

@mickym Hallo Micky, lass Dir Zeit mit der Antwort, denn ich bin gerade ziemlich genervt, weil das wieder nicht klappt und fahre erstmal etwas spazieren.
Ich lese meinen Datenpunkt direkt im ioBroker bei Pegelalarm aus:

Warum werde die Werte mir nicht dargestellt. Die sind doch im iobroker in vorhanden? Welche Node muss da noch dazwischen?

[mickym]

@damrak2022 Ich hatte Dir schon mal gesagt, dass die Table Node nur Objekt-Arrays akzeptiert (hast Du das nicht verstanden, nachdem ich Dir den letzten Flow bis ins letzte erklärt habe? ) und keine Datenpunkte braucht. Hast Du mal geschaut, was wir bei den Tankstellen in die Table-Node geschrieben haben - sicherlich keine einfachen Zahlenwerte. Das sind doch keine Objekte die aus den Datenpunkten rauskommen. Mach doch eine Debug-Node hinter Deine iobroker-IN Nodes. Siehst Du da eine Eigenschaft height - die Du in die Table einträgst - die gibts in Node Red nicht - sie ist wenn max. der Bestandteil im String der msg.topic. Du verinnerlichst die Theorie hier nicht.

Wenn Du nur 2. Punkte ausgibst - da rentiert sich doch keine Tabelle - am einfachsten sind doch 2 Textnodes - warum muss das denn unbedingt eine Tabelle sein. Das macht doch keinen Sinn???? Ich hab Dir schon gesagt, dass Tabellen kompliziert sind und bei 2 Datenpunkten finde ich es einfach ...

Es macht aber eigentlich keinen Sinn - weil ich keine Lust habe - jetzt einzelne Werte auszutauschen - dann kannst Dich gerne in Tabulator einlesen oder Dir mal die Beispielflows zur table Node anzuschauen. Deswegen muss immer alles gesendet werden. Hör einfach mit den Tabellen auf - solange Du nicht 10 oder mehr Werte hast.

Ich mach Dir zwar nochmal einen Flow mit 2 Werten - aber das ist wirklich doof - warum nicht 2 TextNodes?

Es kann so einfach sein:

Um das mit der Tabelle hinzubekommen sind einige Verrenkungen nötig. So hier die Table und die Text Nodes - der Aufwand steht in keinem Verhältnis:

Spoiler

[
   {
       "id": "0b8d8a08c99d37ce",
       "type": "inject",
       "z": "53d8621916dd6725",
       "name": "",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Osthafen",
       "payload": "147",
       "payloadType": "num",
       "x": 150,
       "y": 2580,
       "wires": [
           [
               "660ae2a0a1577cbc"
           ]
       ]
   },
   {
       "id": "b00c5ab69343b67c",
       "type": "inject",
       "z": "53d8621916dd6725",
       "name": "",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Konstanz",
       "payload": "314",
       "payloadType": "num",
       "x": 150,
       "y": 2540,
       "wires": [
           [
               "408c6edf9592c67e"
           ]
       ]
   },
   {
       "id": "408c6edf9592c67e",
       "type": "ui_text",
       "z": "53d8621916dd6725",
       "group": "90c59dd2a6f32bf8",
       "order": 0,
       "width": 0,
       "height": 0,
       "name": "",
       "label": "{{msg.topic}}",
       "format": "{{msg.payload}}",
       "layout": "row-spread",
       "className": "",
       "x": 370,
       "y": 2540,
       "wires": []
   },
   {
       "id": "660ae2a0a1577cbc",
       "type": "ui_text",
       "z": "53d8621916dd6725",
       "group": "90c59dd2a6f32bf8",
       "order": 0,
       "width": 0,
       "height": 0,
       "name": "",
       "label": "{{msg.topic}}",
       "format": "{{msg.payload}}",
       "layout": "row-spread",
       "className": "",
       "x": 370,
       "y": 2580,
       "wires": []
   },
   {
       "id": "1292d82056d0c266",
       "type": "inject",
       "z": "53d8621916dd6725",
       "name": "",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Osthafen",
       "payload": "147",
       "payloadType": "num",
       "x": 150,
       "y": 2740,
       "wires": [
           [
               "f9e76f4367b29629"
           ]
       ]
   },
   {
       "id": "d7c797de79386194",
       "type": "inject",
       "z": "53d8621916dd6725",
       "name": "",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Konstanz",
       "payload": "314",
       "payloadType": "num",
       "x": 150,
       "y": 2700,
       "wires": [
           [
               "10564b4fce9d20a2"
           ]
       ]
   },
   {
       "id": "10564b4fce9d20a2",
       "type": "change",
       "z": "53d8621916dd6725",
       "name": "",
       "rules": [
           {
               "t": "move",
               "p": "payload",
               "pt": "msg",
               "to": "payload.Pegel",
               "tot": "msg"
           },
           {
               "t": "set",
               "p": "payload.Hafen",
               "pt": "msg",
               "to": "Konstanz",
               "tot": "str"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 350,
       "y": 2700,
       "wires": [
           [
               "31606a69142fcbca"
           ]
       ]
   },
   {
       "id": "f9e76f4367b29629",
       "type": "change",
       "z": "53d8621916dd6725",
       "name": "",
       "rules": [
           {
               "t": "move",
               "p": "payload",
               "pt": "msg",
               "to": "payload.Pegel",
               "tot": "msg"
           },
           {
               "t": "set",
               "p": "payload.Hafen",
               "pt": "msg",
               "to": "Osthafen",
               "tot": "str"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 350,
       "y": 2740,
       "wires": [
           [
               "31606a69142fcbca"
           ]
       ]
   },
   {
       "id": "31606a69142fcbca",
       "type": "join",
       "z": "53d8621916dd6725",
       "name": "",
       "mode": "custom",
       "build": "object",
       "property": "payload",
       "propertyType": "msg",
       "key": "payload.Hafen",
       "joiner": "\\n",
       "joinerType": "str",
       "accumulate": true,
       "timeout": "",
       "count": "1",
       "reduceRight": false,
       "reduceExp": "",
       "reduceInit": "",
       "reduceInitType": "",
       "reduceFixup": "",
       "x": 550,
       "y": 2720,
       "wires": [
           [
               "1ef8b202b9d8e23a"
           ]
       ]
   },
   {
       "id": "1ef8b202b9d8e23a",
       "type": "split",
       "z": "53d8621916dd6725",
       "name": "",
       "splt": "\\n",
       "spltType": "str",
       "arraySplt": 1,
       "arraySpltType": "len",
       "stream": false,
       "addname": "",
       "x": 690,
       "y": 2720,
       "wires": [
           [
               "7010156ab9ed07ab"
           ]
       ]
   },
   {
       "id": "7010156ab9ed07ab",
       "type": "join",
       "z": "53d8621916dd6725",
       "name": "",
       "mode": "custom",
       "build": "array",
       "property": "payload",
       "propertyType": "msg",
       "key": "topic",
       "joiner": "\\n",
       "joinerType": "str",
       "accumulate": false,
       "timeout": "",
       "count": "2",
       "reduceRight": false,
       "reduceExp": "",
       "reduceInit": "",
       "reduceInitType": "",
       "reduceFixup": "",
       "x": 830,
       "y": 2720,
       "wires": [
           [
               "24ef7a60f294bd8f"
           ]
       ]
   },
   {
       "id": "24ef7a60f294bd8f",
       "type": "ui_table",
       "z": "53d8621916dd6725",
       "group": "cce10362a261a42e",
       "name": "",
       "order": 2,
       "width": 0,
       "height": 0,
       "columns": [
           {
               "field": "Hafen",
               "title": "Hafen",
               "width": "",
               "align": "left",
               "formatter": "plaintext",
               "formatterParams": {
                   "target": "_blank"
               }
           },
           {
               "field": "Pegel",
               "title": "Pegel",
               "width": "",
               "align": "left",
               "formatter": "plaintext",
               "formatterParams": {
                   "target": "_blank"
               }
           }
       ],
       "outputs": 0,
       "cts": false,
       "x": 970,
       "y": 2720,
       "wires": []
   },
   {
       "id": "29055c34d03df8f9",
       "type": "comment",
       "z": "53d8621916dd6725",
       "name": "Ausgabe als Text",
       "info": "",
       "x": 140,
       "y": 2480,
       "wires": []
   },
   {
       "id": "4e40b69157b57af1",
       "type": "comment",
       "z": "53d8621916dd6725",
       "name": "Ausgabe in Table",
       "info": "",
       "x": 140,
       "y": 2660,
       "wires": []
   },
   {
       "id": "90c59dd2a6f32bf8",
       "type": "ui_group",
       "name": "Pegelstände",
       "tab": "379a501f.53b59",
       "order": 4,
       "disp": true,
       "width": "6",
       "collapse": false,
       "className": ""
   },
   {
       "id": "cce10362a261a42e",
       "type": "ui_group",
       "name": "Table Node Demo",
       "tab": "379a501f.53b59",
       "order": 3,
       "disp": true,
       "width": "6",
       "collapse": false,
       "className": ""
   },
   {
       "id": "379a501f.53b59",
       "type": "ui_tab",
       "name": "ui-table command",
       "icon": "fa-table",
       "disabled": false,
       "hidden": false
   }
]

[Damrak2022]

@mickym Danke Micky. Nein die Tabelle würde insgesamt aus 10 Werten bestehen.
Ich habe diese Dashboards alle schon in Grafana, suche mir aber einen Wolf um rauszufinden, wie ich eine Grafana Tabelle in Node Red einbinde.
Wenn ich das hinbekommen würde, wäre ich grundsätzlich erstmal fertig und mir würde nur noch der Fernzugriff fehlen.

[mickym]

@damrak2022 Hast Du denn die URLs für Grafana - Du kannst die entweder als ganze Seiten einbinden oder halt wieder in eine Gruppe.

[Damrak2022]

@mickym Ja, jedes Dashboard hat eine eigene Url. In meiner Visualisierung würde ich einen Tab anlegen mit dem Namen "Grafana" und darunter die einzelnen Gruppen wo das jeweilige Dashboard rein soll.

[mickym]

@damrak2022 Du kannst auch eine Gruppe nehmen und die URLs dynamisch zur Anzeige bringen.

Nein keine HTTP in Node - die nutzt man nur - wenn Du NodeRed als Webserver benutzen willst.

Wie hast Du es denn bislang in VIS eingebunden - zeig das mal.

[Damrak2022]

@mickym Du meinst die

[mickym]

@damrak2022 Nein - zeig mal wie Du es in VIS eingebunden hast.