Visualisierung mit Node Red erstellen

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

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