Visualisierung mit Node Red erstellen

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

[Damrak2022]

@mickym Sorry, ich versuche das nun gerade zu rücken