Visualisierung mit Node Red erstellen

[Damrak2022]

@mickym Die Datei ist mit 5120kb zu groß

Hier habe ich Sie ja benannt:

[mickym]

@damrak2022 Die Datenpunkte bleiben ja konstant - wir machen das morgen zusammen. Sind ja nur 4 Datenpunkte - 2 mal den Namen und 2 mal den Preis. Ok?

[Damrak2022]

@mickym Ich habe Dir ja die Idas der 6 Tankstellen geschickt. Dann bis morgen und eine angenehme Nacht für Dich.

[mickym]

@damrak2022 sagte in Visualisierung mit Node Red erstellen:

@mickym Ich habe Dir ja die Idas der 6 Tankstellen geschickt. Dann bis morgen und eine angenehme Nacht für Dich.

Ja wenn die konstant bleiben - dann schau ich mal was ich machen kann.

[mickym]

@damrak2022 So der Flow ist fertig - musst halt nur noch die iobroker-In Node bzw. JSON Node dran hängen - ich habe halt nur die Daten über die Inject Node selektiert:

Die für Dich interessanten Tankstellen, selektierst Du in dem Du die Übersetzungstabelle nur die für Dich relevanten Tankstellen einpflegst. Es werden ausserdem alle geschlossenen Tankstellen herausgefiltert, da diese ja eh keine Preise liefern.

In der Übersetzungstabelle alle - habe ich mal alle Tankstellen eingepflegt, die Du unten dargestellt hast.
Ergebnis sieht so aus:

Spoiler

[
    {
        "id": "2dfbb2b81239ceb7",
        "type": "inject",
        "z": "53d8621916dd6725",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "{\"ok\":true,\"license\":\"CC BY 4.0 - https://creativecommons.tankerkoenig.de\",\"data\":\"MTS-K\",\"prices\":{\"a568458f-57f0-4e11-a099-aca55ec3b799\":{\"status\":\"closed\"},\"eb61cb0c-f9b6-4100-83f5-1accfe5759af\":{\"status\":\"open\",\"e5\":2.089,\"e10\":2.029,\"diesel\":2.209},\"05164f2f-4edc-4a03-9ec3-4898d05fbc9c\":{\"status\":\"closed\"},\"30d45fe3-08f4-40cd-82b0-b2c4f872b270\":{\"status\":\"closed\"},\"5d73b461-5646-4b7b-a98d-aa866b87fdd3\":{\"status\":\"open\",\"e5\":2.129,\"e10\":2.069,\"diesel\":2.209},\"7cb7ee38-945d-48df-89be-eb9a20fdcc52\":{\"status\":\"open\",\"e5\":2.099,\"e10\":2.039,\"diesel\":2.209},\"48cbfeb3-dfd2-4442-8911-97e13ce2e871\":{\"status\":\"closed\"}}}",
        "payloadType": "json",
        "x": 130,
        "y": 2200,
        "wires": [
            [
                "ee850b4b9132ebdf"
            ]
        ]
    },
    {
        "id": "ee850b4b9132ebdf",
        "type": "change",
        "z": "53d8621916dd6725",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "payload.prices",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 310,
        "y": 2200,
        "wires": [
            [
                "164d39fefa0fae81"
            ]
        ]
    },
    {
        "id": "164d39fefa0fae81",
        "type": "split",
        "z": "53d8621916dd6725",
        "name": "",
        "splt": "\\n",
        "spltType": "str",
        "arraySplt": 1,
        "arraySpltType": "len",
        "stream": false,
        "addname": "topic",
        "x": 490,
        "y": 2200,
        "wires": [
            [
                "8c5c8371f2e53d1e"
            ]
        ]
    },
    {
        "id": "8c5c8371f2e53d1e",
        "type": "change",
        "z": "53d8621916dd6725",
        "name": "Übersetzungstabelle (nur interessante)",
        "rules": [
            {
                "t": "set",
                "p": "translation_table",
                "pt": "msg",
                "to": "[{\"id\":\"5d73b461-5646-4b7b-a98d-aa866b87fdd3\",\"Tankstelle\":\"Aral, Siemensstraße\"},{\"id\":\"eb61cb0c-f9b6-4100-83f5-1accfe5759af\",\"Tankstelle\":\"Shell, Kennedyallee\"}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 730,
        "y": 2200,
        "wires": [
            [
                "9ae864ecb6d662b1"
            ]
        ]
    },
    {
        "id": "9ae864ecb6d662b1",
        "type": "change",
        "z": "53d8621916dd6725",
        "name": "ID übersetzen",
        "rules": [
            {
                "t": "set",
                "p": "payload.name",
                "pt": "msg",
                "to": "translation_table[id=$$.topic] ? translation_table[id=$$.topic].Tankstelle : \"unbekannte ID\"",
                "tot": "jsonata"
            },
            {
                "t": "delete",
                "p": "translation_table",
                "pt": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1000,
        "y": 2200,
        "wires": [
            [
                "a2d9e76e78407836"
            ]
        ]
    },
    {
        "id": "f3e148a2dbfd4105",
        "type": "join",
        "z": "53d8621916dd6725",
        "name": "",
        "mode": "custom",
        "build": "array",
        "property": "payload",
        "propertyType": "msg",
        "key": "payload.name",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "1",
        "count": "",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 1890,
        "y": 2200,
        "wires": [
            [
                "c18568e641d6f22a"
            ]
        ]
    },
    {
        "id": "6ec60bf72df05237",
        "type": "switch",
        "z": "53d8621916dd6725",
        "name": "Nur wenn Tankstelle offen",
        "property": "payload.status",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "open",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 1470,
        "y": 2200,
        "wires": [
            [
                "93dc4829579bf1f9"
            ]
        ]
    },
    {
        "id": "a2d9e76e78407836",
        "type": "switch",
        "z": "53d8621916dd6725",
        "name": "Keine unbekannte ID",
        "property": "payload.name",
        "propertyType": "msg",
        "rules": [
            {
                "t": "neq",
                "v": "unbekannte ID",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 1220,
        "y": 2200,
        "wires": [
            [
                "6ec60bf72df05237"
            ]
        ]
    },
    {
        "id": "c18568e641d6f22a",
        "type": "ui_table",
        "z": "53d8621916dd6725",
        "group": "cce10362a261a42e",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "columns": [
            {
                "field": "name",
                "title": "Tankstelle",
                "width": "",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "e5",
                "title": "Super E5",
                "width": "",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "outputs": 0,
        "cts": false,
        "x": 2030,
        "y": 2200,
        "wires": []
    },
    {
        "id": "a3b6de1ce40ec227",
        "type": "change",
        "z": "53d8621916dd6725",
        "name": "Übersetzungstabelle (alle)",
        "rules": [
            {
                "t": "set",
                "p": "translation_table",
                "pt": "msg",
                "to": "[{\"id\":\"5d73b461-5646-4b7b-a98d-aa866b87fdd3\",\"Tankstelle\":\"Aral, Siemensstraße\"},{\"id\":\"7cb7ee38-945d-48df-89be-eb9a20fdcc52\",\"Tankstelle\":\"Esso, Stresemannallee\"},{\"id\":\"05164f2f-4edc-4a03-9ec3-4898d05fbc9c\",\"Tankstelle\":\"Total, Goldsteinstraße\"},{\"id\":\"a568458f-57f0-4e11-a099-aca55ec3b799\",\"Tankstelle\":\"Aral, Lyoner Straße\"},{\"id\":\"eb61cb0c-f9b6-4100-83f5-1accfe5759af\",\"Tankstelle\":\"Shell, Kennedyallee\"},{\"id\":\"48cbfeb3-dfd2-4442-8911-97e13ce2e871\",\"Tankstelle\":\"Shell, Mörfelder Landstraße 377\"}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 710,
        "y": 2260,
        "wires": [
            []
        ]
    },
    {
        "id": "93dc4829579bf1f9",
        "type": "change",
        "z": "53d8621916dd6725",
        "name": "formatiere Preise",
        "rules": [
            {
                "t": "set",
                "p": "payload.e5",
                "pt": "msg",
                "to": "payload.e5 & \" €\"",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "payload.e10",
                "pt": "msg",
                "to": "payload.e10  & \" €\"",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "payload.diesel",
                "pt": "msg",
                "to": "payload.diesel  & \" €\"",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1710,
        "y": 2200,
        "wires": [
            [
                "f3e148a2dbfd4105"
            ]
        ]
    },
    {
        "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
    }
]

Ich empfehle Dir halt mal hinter jede Node mal eine Debug Node zu hängen, um zu lernen was jede Node macht.

[Damrak2022]

@mickym Vielen, vielen Dank, ich bekomm es gerade nicht hin, aber jetzt mache ich erstmal was anderes und dann wenn ich fit bin, werde ich mir das nochmal in Ruhe zu Gemüte führen.
Im Notfall melde ich mich.

[Damrak2022]

@mickym Ich habe Deine Rat mit der Debug Node befolgt, aber so ganz schlau bin ich nicht geworden.
Jetzt habe ich in der Node - Übersetzungstabelle nur interessante alle Tankstellen eingepflegt.

Bei Table habe ich noch nichts verändert, denn ich steh immer noch auf der Leitung

[mickym]

@damrak2022 An der Table musst ja nichts mehr einpflegen. Also dann erzähle mal wo Du noch Fragen hast und fang am Besten von links an.

Am Besten Du postest das/die Objekte bevor sie in eine Node gehen und dann was danach rauskommt.

[Damrak2022]

@mickym Na im Dashboard sieht es so aus

Mich irritiert das obere Feld, Das kann doch eigentlich weg, oder?
Und mir werden gerade nur 3 Tankstellen angezeigt, weil die anderen zu sind, Okay das ist auch klar.
Und die inject Node müsste ich durch eine iobroker in ersetzen und da den json Datenpunkt hinterlegen. Dann wäre ja doch alles korrekt

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