Visualisierung mit Node Red erstellen

[mickym]

@damrak2022 Gut dann kannst Du dieses Ergebnis ja nun in die beiden Datenpunkte schreiben. Wobei eigentlich brauchst das eigentlich nicht in die datenpunkte schreiben. Die kannst eigentlich löschen und kannst das Ergebnis auch direkt im Dashboard ausgeben.

Also lösche die iobroker OUT nodes und die beiden Datenpunkte.

[Damrak2022]

@mickym Habe ich versucht. In allen Datenpunkten bei den Shellys bei Switch den Haken bei "bestätigt" gesetzt und Wert schreiben geklickt. In den Datenpunkten ist allerdings noch nichts zu sehen.

[mickym]

@damrak2022 Doch steht doch true drin - aber wie gesagt lösch die Datenpunkte wieder und auch die iobroker OUT Nodes - wir geben es direkt im Dashboard aus.

[Damrak2022]

@mickym Gelöscht

[mickym]

@damrak2022 Dann hängst Du nun hinter beide JOIN Nodes eine Switch Node - mit jeweils einem true und einem false Ausgang.

Wir werden dann im Dashboard folgendes ausgeben:

[Damrak2022]

@mickym Habe ich

[mickym]

@damrak2022 Damit Du auch was Blinkendes ausgeben kannst, habe ich Dir mal ein CSS für das Dashboard definiert.

Diese Node lässt Du einfach in dem Flow ohne zu verkabeln:
Du nimmst eine Template Node (eine Dashboard Template Node also eine blaue keine rote) und definierst CSS Styles für Dein gesamtes Dashboard:

Der Code ist folgender:

<style>
    .blink {
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
    }

    @keyframes blink-animation {
        to {
            visibility: hidden;
        }
    }

    @-webkit-keyframes blink-animation {
        to {
            visibility: hidden;
        }
    }
</style>

[DJMarc75]

Eure Screenshots werden immer opulenter .... tut in den Augen weh

[Damrak2022]

@mickym Habe ich

[mickym]

@djmarc75 sagte in Visualisierung mit Node Red erstellen:

Eure Screenshots werden immer opulenter .... tut in den Augen weh

Den Code habe ich Dir ja rauskopiert - wichtig ist , dass Du es zur head Section hinzufügst.

[DJMarc75]

@mickym sagte in Visualisierung mit Node Red erstellen:

Den Code habe ich Dir ja rauskopiert - wichtig ist , dass Du es zur head Section hinzufügst<

NeeNeee... ich bin nicht der @Damrak2022

[mickym]

@djmarc75 Oh sorry - was war denn besonders schlimm?

[mickym]

@damrak2022 sagte in Visualisierung mit Node Red erstellen:

@mickym Habe ich

So hier nun 4 Nodes zum Importieren:

Spoiler

[
   {
       "id": "0bdac8e0b723321f",
       "type": "ui_text",
       "z": "289f539dcc33814e",
       "group": "57f13d6f733e5c9d",
       "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": 4810,
       "y": 3580,
       "wires": []
   },
   {
       "id": "74613a1c6b1796d5",
       "type": "change",
       "z": "289f539dcc33814e",
       "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": 4600,
       "y": 3620,
       "wires": [
           [
               "0bdac8e0b723321f"
           ]
       ]
   },
   {
       "id": "78418a884e260024",
       "type": "change",
       "z": "289f539dcc33814e",
       "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": 4600,
       "y": 3580,
       "wires": [
           [
               "0bdac8e0b723321f"
           ]
       ]
   },
   {
       "id": "f299d7aacac950dd",
       "type": "ui_text",
       "z": "289f539dcc33814e",
       "group": "57f13d6f733e5c9d",
       "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": 4790,
       "y": 3740,
       "wires": []
   },
   {
       "id": "f3224b0e423b4e97",
       "type": "change",
       "z": "289f539dcc33814e",
       "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": 4610,
       "y": 3740,
       "wires": [
           [
               "f299d7aacac950dd"
           ]
       ]
   },
   {
       "id": "c965c4c4045df923",
       "type": "change",
       "z": "289f539dcc33814e",
       "name": "Not Ready",
       "rules": [
           {
               "t": "set",
               "p": "icon",
               "pt": "msg",
               "to": "thumbs-o-down",
               "tot": "str"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 4590,
       "y": 3700,
       "wires": [
           [
               "f299d7aacac950dd"
           ]
       ]
   },
   {
       "id": "57f13d6f733e5c9d",
       "type": "ui_group",
       "name": "Test",
       "tab": "20b3095113f94d70",
       "order": 2,
       "disp": true,
       "width": "6",
       "collapse": false,
       "className": ""
   },
   {
       "id": "20b3095113f94d70",
       "type": "ui_tab",
       "name": "Home",
       "icon": "dashboard",
       "order": 1,
       "disabled": false,
       "hidden": false
   }
]

Die oberen Nodes gibst Du für die Überwachung an für Geräte die immer eingeschaltet sein sollen, die unteren, die ausgeschaltet werden sollten, wenn Du die Wohnung verlässt.

[DJMarc75]

@mickym Na nix, aber die Screenshots der Nodes werden immer größer und erschlagen den Bildschirm schon fast... aber alles gut...
weiter im Kontext

[Damrak2022]

@mickym Erledigt

[mickym]

@damrak2022 Na dann solltest Du es ja nun testen können.

[Damrak2022]

@mickym Das sieht gerade merkwürdig aus

[mickym]

@damrak2022 Hast Du denn alles richtig verkabelt?

[Damrak2022]

@mickym Denke schon, habe die Kabel gerade auch mal getauscht - sieht aber genauso aus.flows.json

[mickym]

@damrak2022 Du kannst doch nicht alles durcheinander mischen. Du musst das doch getrennt halten. Du brauchst doch switch Nodes für jede Gruppe. - Ich dachte soweit solltest Du den Flow verstehen. Und natürlich verkehrt zugeordnet. Oben ist bei Dir doch wenn alles bereits zum Weggehen ist - also ist Ready am False Ausgang. Du musst schon bissi überlegen, was wir nun die letzten beiden Tage gemacht haben.

So sieht es dann fertig aus mit Animation: