Visualisierung mit Node Red erstellen

[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.

[Damrak2022]

@mickym Da sieht es so aus, einmal im Editor einmal in der Runtime:

[mickym]

@damrak2022 Und was steht in dem Datenpunkt drin?

[Damrak2022]

@mickym Es gibt eine einzelne Seite für diese Grafik.
Da steht die Url drin:

Auf den anderen Seite wird das über ein View in widget 8 eingebunden. Ich möchte aber eigentlich nur die Url verknüpfen um es in Node Red einzubinden

[mickym]

@damrak2022 Nun Du kannst auch verschiedene URLs einspeisen. Das werde ich Dir mal zeigen:

Kopiere einfach mal verschiedene URLs als Strings in mehrere Inject Nodes.

[Damrak2022]

@mickym Okay, das dauert einen Moment

[Damrak2022]

@mickym So sieht das jetzt aus:

[mickym]

@damrak2022 So Du hast nun die Möglichkeit diese einzeln und statisch anzuzeigen.

Dafür brauchst Du dann lediglich eine template-Node und die keine Inject Nodes:

In die Template Node - gibst Du folgenden Code ein - mit "fix" Deiner URL von Grafana (als src=):

<iframe src="https://www.wetter.de/deutschland/regenradar-karte-deutschland-c49.html#m=4.72/51.34/11.06" width="100%" height="100%" frameborder=0"></iframe>

Diesen Code gibst Du direkt in die Template Node ein:

Ich hab da halt mal eine wetter.de seite eingebunden:

Dies bleibt fix.

Wenn Du ähnlich wie in vis verschiedene Dinge an einer Stelle anzeigen willst. Dann nimmst Du eine Template Node aus dem Dashboard und lässt diese leer.

Vornedran hängst Du eine template Node und gibst das als msg.template aus:

Damit kannst Du jetzt mit Inject Nodes das ausprobieren - später kannst Du auch solche Datenpunkte wie in vis über eine iobroker IN Node direkt auslesen:

Du kannst auch die URLs fix über eine DropDown Box auswählen

Spoiler

[
   {
       "id": "a6a4ccd388092ec2",
       "type": "ui_template",
       "z": "852fd8a7.d14008",
       "group": "de0e68e4.027ef8",
       "name": "iFrame statisch",
       "order": 4,
       "width": "10",
       "height": "9",
       "format": "<iframe src=\"https://www.wetter.de/deutschland/regenradar-karte-deutschland-c49.html#m=4.72/51.34/11.06\" width=\"100%\" height=\"100%\" frameborder=0\"></iframe>",
       "storeOutMessages": true,
       "fwdInMessages": true,
       "resendOnRefresh": true,
       "templateScope": "local",
       "className": "",
       "x": 740,
       "y": 2200,
       "wires": [
           []
       ]
   },
   {
       "id": "2f72348336f7b787",
       "type": "ui_template",
       "z": "852fd8a7.d14008",
       "group": "de0e68e4.027ef8",
       "name": "iFrame dynamisch",
       "order": 5,
       "width": "10",
       "height": "9",
       "format": "",
       "storeOutMessages": true,
       "fwdInMessages": true,
       "resendOnRefresh": true,
       "templateScope": "local",
       "className": "",
       "x": 750,
       "y": 2260,
       "wires": [
           []
       ]
   },
   {
       "id": "d70ade4ff31405b4",
       "type": "template",
       "z": "852fd8a7.d14008",
       "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": 540,
       "y": 2260,
       "wires": [
           [
               "2f72348336f7b787"
           ]
       ]
   },
   {
       "id": "5c28e3ab371a3d0b",
       "type": "inject",
       "z": "852fd8a7.d14008",
       "name": "",
       "props": [
           {
               "p": "payload"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "",
       "payload": "http://...",
       "payloadType": "str",
       "x": 350,
       "y": 2260,
       "wires": [
           [
               "d70ade4ff31405b4"
           ]
       ]
   },
   {
       "id": "de0e68e4.027ef8",
       "type": "ui_group",
       "name": "test8",
       "tab": "2ce144dc.d7472c",
       "order": 4,
       "disp": true,
       "width": "10",
       "collapse": false
   },
   {
       "id": "2ce144dc.d7472c",
       "type": "ui_tab",
       "name": "test",
       "icon": "dashboard",
       "order": 23,
       "disabled": false,
       "hidden": false
   }
]

[Damrak2022]

@mickym Danke, aber jetzt meine Frage zu dem was ich garnicht verstehe. Ich habe mir Deinen Spoiler importiert.
Dort sind nur inject node mit Template node und iframe dynamisch verbunden. Dann gibt es noch die iframe statisch node, welche aber nicht verbunden ist. Wenn ich nun die inject node abfeuere um mal Deine Worte zu gebrauchen wieso wird mir dann Dein Wetter Widget angezeigt. Das hat doch keinerlei Verbindung zu den anderen nodes?

Am liebsten würde ich meine Dashboards bei ein Dropdown Menü anzeigen lassen, welche ich im Tab Grafana / Gruppe Boards hinterlege.

[mickym]

@damrak2022 Die statische Node - ist dafür da immer den gleichen Inhalt anzeigen zu lassen. Die URL, die in der Template Node hinter src= steht musst Du halt durch eine Grafana URL ersetzen. Somit kannst Du halt viele fix anordnen.

Mit DropDown - wählst Du halt einen Chart und der sendet die entsprechende URL an die template Node:

Spoiler

[
   {
       "id": "ccd1e2dcc34070c2",
       "type": "ui_template",
       "z": "852fd8a7.d14008",
       "group": "de0e68e4.027ef8",
       "name": "dynamischer Chart",
       "order": 5,
       "width": "10",
       "height": 6,
       "format": "",
       "storeOutMessages": true,
       "fwdInMessages": true,
       "resendOnRefresh": true,
       "templateScope": "local",
       "className": "",
       "x": 650,
       "y": 2220,
       "wires": [
           []
       ]
   },
   {
       "id": "6a52be572b5c02ad",
       "type": "template",
       "z": "852fd8a7.d14008",
       "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": 420,
       "y": 2220,
       "wires": [
           [
               "ccd1e2dcc34070c2"
           ]
       ]
   },
   {
       "id": "b67a42e4ef17f676",
       "type": "ui_dropdown",
       "z": "852fd8a7.d14008",
       "name": "",
       "label": "",
       "tooltip": "",
       "place": "Bitte Graph auswählen",
       "group": "de0e68e4.027ef8",
       "order": 4,
       "width": 0,
       "height": 0,
       "passthru": true,
       "multiple": false,
       "options": [
           {
               "label": "Schritte - Kalorien",
               "value": "http://192.168.178.24:3000/d/Kalorien",
               "type": "str"
           },
           {
               "label": "Fettanteil",
               "value": "http://192.168.178.24:3000/d/Fett",
               "type": "str"
           }
       ],
       "payload": "",
       "topic": "topic",
       "topicType": "msg",
       "className": "",
       "x": 180,
       "y": 2220,
       "wires": [
           [
               "6a52be572b5c02ad"
           ]
       ]
   },
   {
       "id": "de0e68e4.027ef8",
       "type": "ui_group",
       "name": "test8",
       "tab": "2ce144dc.d7472c",
       "order": 5,
       "disp": true,
       "width": "10",
       "collapse": false
   },
   {
       "id": "2ce144dc.d7472c",
       "type": "ui_tab",
       "name": "test",
       "icon": "dashboard",
       "order": 23,
       "disabled": false,
       "hidden": false
   }
]

Die Dropdown-Liste musst halt mit den URLs füllen:

Links gibst halt die URL ein und rechts den Text den man mit der DropDown auswählt.

[Damrak2022]

@mickym Danke geht, ich musste das Board noch anpassen. Super

[mickym]

@damrak2022 Weißt Du ich kann Dir das nicht sagen - weil ich weder Grafana habe - noch sehe ich was Du wohin schickst.

Was schickst Du wohin - hast Du mal statisch eine Template Node probiert bevor Du dropdown machst - ich kann Dir zeigen, wie es geht das habe ich getan - wenn es bei Dir nicht geht - würde ich eher von Deinem Fehler ausgehen. Wenn Du meinst es ist zu eng - dann mach eine Riesengruppe - ich habe keine Ahnung.

[Damrak2022]

@mickym Geht alles. Super.
So ich bin jetzt weitgehendstes mit meiner Einbindung aller Daten fertig. Was mir fehlt ist der Fernzugriff. Allerdings habe ich kein DS Liter sondern eine richtige IP4
Hast Du Lust das als Abschluss noch irgendwann mit mir zu machen?

[mickym]

@damrak2022 Das hat eigentlich nichts mehr mit NodeRed zu tun. Ehrlich gesagt ist das auch sau schwierig das aus der Ferne zu machen. Was hast Du denn für einen Router - eine FritzBox?