Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Visualisierung mit Node Red erstellen

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Visualisierung mit Node Red erstellen

    This topic has been deleted. Only users with topic management privileges can see it.
    • mickym
      mickym Most Active @Damrak2022 last edited by 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:
      0e8f23e9-ae5c-42f4-807f-6e2576d3008d-image.png
      7beae6a1-2b44-4c2f-b335-d8e500d5f310-image.png

      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>
      
      Damrak2022 1 Reply Last reply Reply Quote 0
      • DJMarc75
        DJMarc75 last edited by

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

        mickym 1 Reply Last reply Reply Quote 0
        • Damrak2022
          Damrak2022 @mickym last edited by

          @mickym Habe ich

          mickym 1 Reply Last reply Reply Quote 0
          • mickym
            mickym Most Active @DJMarc75 last edited by

            @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 1 Reply Last reply Reply Quote 0
            • DJMarc75
              DJMarc75 @mickym last edited by

              @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 1 Reply Last reply Reply Quote 0
              • mickym
                mickym Most Active @DJMarc75 last edited by

                @djmarc75 Oh sorry - was war denn besonders schlimm?

                DJMarc75 1 Reply Last reply Reply Quote 0
                • mickym
                  mickym Most Active @Damrak2022 last edited by mickym

                  @damrak2022 sagte in Visualisierung mit Node Red erstellen:

                  @mickym Habe ich

                  So hier nun 4 Nodes zum Importieren:

                  [
                     {
                         "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
                     }
                  ]
                  

                  f0dad5a8-d7e2-4292-a384-d293eb3ce5e8-image.png

                  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.

                  Damrak2022 2 Replies Last reply Reply Quote 0
                  • DJMarc75
                    DJMarc75 @mickym last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • Damrak2022
                      Damrak2022 @mickym last edited by

                      @mickym Erledigt

                      mickym 1 Reply Last reply Reply Quote 0
                      • mickym
                        mickym Most Active @Damrak2022 last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • Damrak2022
                          Damrak2022 @mickym last edited by

                          @mickym Das sieht gerade merkwürdig aus
                          Bildschirm­foto 2022-12-27 um 22.54.01.png

                          mickym 1 Reply Last reply Reply Quote 0
                          • mickym
                            mickym Most Active @Damrak2022 last edited by

                            @damrak2022 Hast Du denn alles richtig verkabelt?

                            Damrak2022 1 Reply Last reply Reply Quote 0
                            • Damrak2022
                              Damrak2022 @mickym last edited by Damrak2022

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

                              mickym 1 Reply Last reply Reply Quote 0
                              • mickym
                                mickym Most Active @Damrak2022 last edited by 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:

                                Überwachte Geräte.gif

                                Damrak2022 1 Reply Last reply Reply Quote 0
                                • Damrak2022
                                  Damrak2022 @mickym last edited by

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

                                  mickym 1 Reply Last reply Reply Quote 0
                                  • mickym
                                    mickym Most Active @Damrak2022 last edited by

                                    @damrak2022 sagte in Visualisierung mit Node Red erstellen:

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

                                    5869d4c8-cf96-437b-8570-1e6328f75fd7-image.png

                                    Also scheint mir, dass Du nicht ganz verstanden hast, was wir gemacht haben. Jedenfalls sollte nun eine Warnung erscheinen, wenn eins der Geräte ausgeschaltet ist, das immer angeschaltet sein sollte und umgekehrt ist der Daumen erst nach oben, wenn alle Geräte ausgeschaltet sind bevor Du die Wohnung verlässt.

                                    Damrak2022 1 Reply Last reply Reply Quote 0
                                    • Damrak2022
                                      Damrak2022 @mickym last edited by

                                      @mickym Irgendwo scheine ich was verdreht zu haben, denn wenn ich nach Deinem Screenshot verkabelt, klappt es noch nicht

                                      mickym 1 Reply Last reply Reply Quote 0
                                      • mickym
                                        mickym Most Active @Damrak2022 last edited by

                                        @damrak2022 Nicht rumprobieren - logisch denken. 😉 - Oben haben wir dass Ready ist, wenn das Ergebnis false ist. Nicht ready wenn true rauskommt. Bei true ist ja noch ein Gerät eingeschaltet.

                                        Unten ist es umgekehrt. Es ist alles in Ordnung wenn true und Warnung wenn false. Schreib Dir halt nochmal auf, was wir mit ODER und UND verknüpft haben und was Sinn der Sache ist.

                                        Damrak2022 1 Reply Last reply Reply Quote 0
                                        • Damrak2022
                                          Damrak2022 @mickym last edited by

                                          @mickym Ja, allerdings habe ich true und false jetzt scho so oft von oben nach unten gewechselt, das ich mir das nochmal ganz in Ruhe anschauen muss.

                                          mickym 1 Reply Last reply Reply Quote 0
                                          • mickym
                                            mickym Most Active @Damrak2022 last edited by mickym

                                            @damrak2022 Nochmal hänge eine Debug Node an die letzte JOIN Node und schau was rauskommt. - Poste den Flow. Wenn Du nicht durchblickst musst Du Schritt für Schritt durchgehen.

                                            Damrak2022 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            836
                                            Online

                                            31.9k
                                            Users

                                            80.2k
                                            Topics

                                            1.3m
                                            Posts

                                            4
                                            4845
                                            2325005
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo