Visualisierung mit Node Red erstellen

[Damrak2022]

@mickym Moment

[Damrak2022]

@damrak2022 Labels sind raus.

[Damrak2022]

@mickym sagte in Visualisierung mit Node Red erstellen:

m Dashboard immer eine Label Node und eine Node mit dem Value getrennt.

Was meinst Du damit?

[Damrak2022]

@damrak2022 Das stimmt doch nicht, oder

[mickym]

@mickym Ok - das musst Du halt selbst anpassen. Die Gruppe ist bei mir 6 Einheiten breit.
Die Node mit dem Label - Überwachte Geräte 4 x 1 und der Status 2 x 1 und bei Ready to Go das Gleiche.

Nein Du machst eine Gruppe 6 Einheiten breit.

Wenn Du auf das Layout deiner Testtab Seite anschaust, dann schaut das so aus:

[Damrak2022]

@mickym Okay, ich schaue mir das Layout an

[mickym]

@damrak2022 sagte in Visualisierung mit Node Red erstellen:

@mickym Okay, ich schaue mir das Layout an

Ansonsten hier nochmal alles zum Import - mit Deiner Testtab Seite:

Spoiler

[
   {
       "id": "9c84a501ed4c87c3",
       "type": "switch",
       "z": "ba3b2e30dc8fe655",
       "name": "",
       "property": "payload",
       "propertyType": "msg",
       "rules": [
           {
               "t": "false"
           },
           {
               "t": "true"
           }
       ],
       "checkall": "true",
       "repair": false,
       "outputs": 2,
       "x": 830,
       "y": 280,
       "wires": [
           [
               "538258582cc670b4"
           ],
           [
               "4eb3852997ae1f8a"
           ]
       ]
   },
   {
       "id": "58cb99a19a0ff7e4",
       "type": "ui_text",
       "z": "ba3b2e30dc8fe655",
       "group": "f8c09969e01446fb",
       "order": 7,
       "width": "2",
       "height": "1",
       "name": "Status ready to go?",
       "label": "",
       "format": "<font color=\"{{msg.color}}\"><i class=\"fa fa-{{msg.icon}} fa-2x\"></i></font>",
       "layout": "row-spread",
       "className": "",
       "x": 1230,
       "y": 260,
       "wires": []
   },
   {
       "id": "538258582cc670b4",
       "type": "change",
       "z": "ba3b2e30dc8fe655",
       "name": "Ready",
       "rules": [
           {
               "t": "set",
               "p": "icon",
               "pt": "msg",
               "to": "thumbs-up",
               "tot": "str"
           },
           {
               "t": "set",
               "p": "color",
               "pt": "msg",
               "to": "green",
               "tot": "str"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 1010,
       "y": 240,
       "wires": [
           [
               "58cb99a19a0ff7e4"
           ]
       ]
   },
   {
       "id": "4eb3852997ae1f8a",
       "type": "change",
       "z": "ba3b2e30dc8fe655",
       "name": "Not Ready",
       "rules": [
           {
               "t": "set",
               "p": "icon",
               "pt": "msg",
               "to": "thumbs-o-down",
               "tot": "str"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 1030,
       "y": 280,
       "wires": [
           [
               "58cb99a19a0ff7e4"
           ]
       ]
   },
   {
       "id": "b94dab76e77fc884",
       "type": "switch",
       "z": "ba3b2e30dc8fe655",
       "name": "",
       "property": "payload",
       "propertyType": "msg",
       "rules": [
           {
               "t": "false"
           },
           {
               "t": "true"
           }
       ],
       "checkall": "true",
       "repair": false,
       "outputs": 2,
       "x": 830,
       "y": 340,
       "wires": [
           [
               "c191ae81989bbd1f"
           ],
           [
               "1e83244f30c91f5d"
           ]
       ]
   },
   {
       "id": "54aaa0ca0da2b7c2",
       "type": "ui_text",
       "z": "ba3b2e30dc8fe655",
       "group": "f8c09969e01446fb",
       "order": 5,
       "width": "2",
       "height": "1",
       "name": "Status überwachte Geräte",
       "label": "",
       "format": "<font color=\"{{msg.color}}\"><i class=\"fa fa-{{msg.icon}} fa-2x\"></i></font>",
       "layout": "row-spread",
       "className": "",
       "x": 1230,
       "y": 320,
       "wires": []
   },
   {
       "id": "c191ae81989bbd1f",
       "type": "change",
       "z": "ba3b2e30dc8fe655",
       "name": "Warnung",
       "rules": [
           {
               "t": "set",
               "p": "icon",
               "pt": "msg",
               "to": "warning",
               "tot": "str"
           },
           {
               "t": "set",
               "p": "color",
               "pt": "msg",
               "to": "yellow",
               "tot": "str"
           },
           {
               "t": "set",
               "p": "className",
               "pt": "msg",
               "to": "blink",
               "tot": "str"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 1020,
       "y": 320,
       "wires": [
           [
               "54aaa0ca0da2b7c2"
           ]
       ]
   },
   {
       "id": "1e83244f30c91f5d",
       "type": "change",
       "z": "ba3b2e30dc8fe655",
       "name": "Alles OK",
       "rules": [
           {
               "t": "set",
               "p": "icon",
               "pt": "msg",
               "to": "check-circle",
               "tot": "str"
           },
           {
               "t": "set",
               "p": "color",
               "pt": "msg",
               "to": "green",
               "tot": "str"
           },
           {
               "t": "set",
               "p": "className",
               "pt": "msg",
               "to": "",
               "tot": "str"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 1020,
       "y": 360,
       "wires": [
           [
               "54aaa0ca0da2b7c2"
           ]
       ]
   },
   {
       "id": "2d4a599c13429ec2",
       "type": "ui_text",
       "z": "ba3b2e30dc8fe655",
       "group": "f8c09969e01446fb",
       "order": 4,
       "width": "4",
       "height": "1",
       "name": "",
       "label": "Überwachte Geräte",
       "format": "{{msg.payload}}",
       "layout": "row-spread",
       "className": "",
       "x": 1210,
       "y": 160,
       "wires": []
   },
   {
       "id": "158bf46937c0d128",
       "type": "ui_text",
       "z": "ba3b2e30dc8fe655",
       "group": "f8c09969e01446fb",
       "order": 6,
       "width": "4",
       "height": "1",
       "name": "",
       "label": "Ready to go?",
       "format": "{{msg.payload}}",
       "layout": "row-spread",
       "className": "",
       "x": 1210,
       "y": 120,
       "wires": []
   },
   {
       "id": "f8c09969e01446fb",
       "type": "ui_group",
       "name": "Testansicht",
       "tab": "0c3299b0a882cc5f",
       "order": 1,
       "disp": true,
       "width": "6",
       "collapse": false,
       "className": ""
   },
   {
       "id": "0c3299b0a882cc5f",
       "type": "ui_tab",
       "name": "Testtab",
       "icon": "dashboard",
       "order": 19,
       "disabled": false,
       "hidden": false
   }
]

Die Nodes, die das Icon enthalten sind 2 Einheiten breit. Die ganze Gruppe ist 6 Einheiten breit:

Die Label Nodes die nicht verkabelt sind - sind 4 Einheiten breit

Die ganze Gruppe 6 Einheiten.

[Damrak2022]

@mickym Ich habe das von Dir importiert und auch die Größen kontrolliert. Bei mir sieht das dann so aus:

Nachdem ich die ungenutzten Node gelöscht habe sieht es so aus:

[mickym]

@damrak2022 Lösch bitte alle TextNodes und die Testtab Seite aus Deinem Dashboard komplett. Und mach nochmal einen komplett neuen Import - mit meinen Nodes, die ich gerade gepostet habe. Du hast inzwischen auf Deiner Testtab seite nun 8 Nodes. Also alle Text nodes löschen und die komplette Testtab Seite mit allen Gruppen löschen und dann meine Nodes nochmal importieren.

[mickym]

@damrak2022 sagte in Visualisierung mit Node Red erstellen:

@mickym Ich habe das von Dir importiert und auch die Größen kontrolliert. Bei mir sieht das dann so aus:

Nachdem ich die ungenutzten Node gelöscht habe sieht es so aus:

Lösch alles weg - Deine Gruppe darf nur 6 Einheiten breit sein - sonst musst selbst alles anpassen

[Damrak2022]

@mickym Okay, mache ich. Dann haben wir für heute auch genug gemacht. Ist ja schließlich Weihnachtszeit

[mickym]

@damrak2022 sagte in Visualisierung mit Node Red erstellen:

@mickym Okay, mache ich. Dann haben wir für heute auch genug gemacht. Ist ja schließlich Weihnachtszeit

Wir wären ja auch längst fertig. - Ausserdem ist Weihnachten schon vorbei. - Das Argument zieht erst nächstes Jahr wieder. Das bei Dir solche Kästen kommen, das liegt an Deiner individuellen Anpassung des Dashboards - da passt halt dann die Hintergrundfarbe nicht- aber das hast Du selbst mit der Anpassung der Farben zu verantworten.

[Damrak2022]

@mickym Heute habe ich keine Lust mehr. Nachdem ich den Testat im Dashboard komplett gelöscht, habe, sowie alle Nodes die nirgends zugewiesen waren, habe ich Deinen Flow neu importiert und lande erneut bei dieser Ansicht:

Ich probiere das später erneut, bzw. nochmal, aber im Moment kann ich es nicht nachvollziehen.

[mickym]

@damrak2022 Ja das passt schon. - Es sollte ja nun in den kleinen Kästen das Icon auftauchen, wenn Du das nun mit der JOIN Node verkabelst.

Aber ich denke - das wir da besser lassen mit dem Blinken und Du lieber eine Text Node über die komplette Breite nimmst. Das mit dem Blinken funktioniert dann halt nicht über CSS, weil sonst halt alle einschließlich des Labels blinkt. Also mach das einfach mit Standardmitteln.

Das kostet nur unnütze Zeit. Und das jetzt über Template Node und ordentliches HTML zu machen, das rentiert hier nicht. Wie gesagt lass das mit dem Blinken und mache es einfach über 2 Text Nodes - dann kannst auch die Template Node wieder löschen. Das passt halt einfach nicht mit Deinen Dashboard Einstellungen zusammen. Also mach hier lieber ohne CSS Klassen.

[Damrak2022]

@mickym Ein Icon tauch bei mir nicht auf
Die template Node habe ich gelöscht.

[mickym]

Mach einfach wieder 2 ganz normale Text Nodes mit länge 6 hinten dran ohne die Change Nodes davor und da lassen wird dann nur das Ergebnis der JOIN Node ausgeben. Die beiden TextNodes mit dem Label löschst Du auch, so wie Du es bislang immer gemacht hast. Es wird auch erst was ausgegeben, wenn die Geräte sich melden.

[Damrak2022]

@mickym Okay

[mickym]

@damrak2022 Also einfach so:

wie Du es bislang auch immer gemacht hast.

Die Texte kannst du mittels change Node davor immer noch anpassen. Aber es geht erst mal darum das Ergebnis der Auswertung anzuzeigen.

oder mach switch NOdes hinten dran, auch wenn Du nichts schaltest - da kannst Du Farbe und Icons direkt festlegen.

[Damrak2022]

@mickym

Ich habe einmal zwei Geräte über das Dashboard bei Steckdosen geschaltet, aber hier wird nichts angezeigt:

[mickym]

@damrak2022 Nun überprüfe mit Debug Nodes.

Wie gesagt Du kannst switch Node anstelle von Text Nodes verwenden. Du musst nur bei den Geräten für die Abwesenheit true und false vertauschen: