Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Skripten / Logik
  4. Node-Red
  5. Visualisierung (Dashboard) gestalten & strukturieren

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.1k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.8k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.1k

Visualisierung (Dashboard) gestalten & strukturieren

Scheduled Pinned Locked Moved Node-Red
node-red
45 Posts 8 Posters 19.2k Views 8 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • mickymM mickym

    @tomily Ich hab leider nichts gefunden. Mach doch mal ein Issue auf GitHub auf . Nachdem ChangeLog: https://github.com/node-red/node-red-dashboard/blob/master/CHANGELOG.md

    müssen da wohl Änderungen seit dashboard Version 2.23.1 erfolgt sein.

    Eine Lösung wäre aber Du machst ein Text-Label davor, verzichtest auf das Label in der Drop Down Box und verkürzt diese um die Einheiten. Das funktioniert soweit. Dafür musst Du bei der Größe von Auto auf fixe Größen umstellen:

    7dca98ea-8cc4-49e3-8268-096664f76cbe-image.png

    3f29d73f-f021-46fd-a18b-77aa9fe411f3-image.png

    Bei einer Standard 6er Breite in den Gruppen - hier mal das Beispiel wie es mit 2* 3x1 aussieht:

    screen.png

    N Offline
    N Offline
    nicobauer
    wrote on last edited by
    #35

    @mickym Du hast bei dir auf der Übersichtsseite in einer Spalte mehrere Überschriften wie An- und Abwesenheit und Heizung. Wie hast du das gemacht?
    Ich weiß wie ich die Überschriften erzeuge, die werden dann immer alle in einer Spalte angeordnet.
    Bildschirmfoto 2021-01-30 um 14.41.09.png

    mickymM 2 Replies Last reply
    0
    • N nicobauer

      @mickym Du hast bei dir auf der Übersichtsseite in einer Spalte mehrere Überschriften wie An- und Abwesenheit und Heizung. Wie hast du das gemacht?
      Ich weiß wie ich die Überschriften erzeuge, die werden dann immer alle in einer Spalte angeordnet.
      Bildschirmfoto 2021-01-30 um 14.41.09.png

      mickymM Online
      mickymM Online
      mickym
      Most Active
      wrote on last edited by mickym
      #36

      @nicobauer Nein, das ist nicht ganz richtig. Das Node Red Dashboard arbeitet mit dem sogenannten "Responsive Design". Das heißt es ordnet die Gruppen immer automatisch an. Das ist einerseits praktisch, aber nimmt Dir auch Einfluss. Ist also die Breite erreicht wird die nächste Gruppe immer unter der 1. Gruppe ganz links positioniert.

      Die Standardbreite von 6 Einheiten pro Gruppe sind deshalb praktisch, da sie genau dann auf eine Seite beim Handy im Hochformat passen.

      Diese Überschriften, die Du genannt hast, sind als nichts anderes als Deine Gruppennamen (Batteriestatus etc.).

      Das einzige Mal, dass ich eine Überschrift in einer Gruppe genutzt habe, ist bei Wetter. Ist aber trotzdem bisschen anders als bei der Gruppenüberschrift.
      Ein Beispiel ist "Barometer".
      Dafür kannst Du die Template Node verwenden:

      9dd179a1-c134-41ec-bbb9-eba1509c4194-image.png

      Wenn Du übrigens bei dem Tab im Dashboard auf den Knopf Layout gehst siehst Du Deine Gruppen und kannst dort ggf. verschieben:

      11e8946d-497b-460d-ab93-68a3d52fceef-image.png

      Darauf siehst Du aber ganz gut - welche ui-Nodes ich für was genommen habe. 😉

      Übrigens das mit dem responsive Design kannst Du ganz leicht testen, indem Du Dein Browserfenster zoomst - dann siehst Du dass immer, wie das Dashboard versucht wird die Breite dynamisch auszunutzen.

      Wenn Du also über 100% gehst, wirst Du sehen, dass sich Deine Batterstatus Gruppe irgendwann unter der Wettergruppe wiederfindet. 😉 Deswegen ist es meist sinnvoll die vorgegebene Breite auf 6 zu belassen - somit werden horizontale Scrollbalken vermieden.

      Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

      N 1 Reply Last reply
      0
      • N nicobauer

        @mickym Du hast bei dir auf der Übersichtsseite in einer Spalte mehrere Überschriften wie An- und Abwesenheit und Heizung. Wie hast du das gemacht?
        Ich weiß wie ich die Überschriften erzeuge, die werden dann immer alle in einer Spalte angeordnet.
        Bildschirmfoto 2021-01-30 um 14.41.09.png

        mickymM Online
        mickymM Online
        mickym
        Most Active
        wrote on last edited by mickym
        #37

        @nicobauer Generell musst Du Dir immer vor Augen halten, dass das NodeRed Dashboard Klasse ist, um schnell eine Visualisierung zu haben und damit Deine Geräte zu steuern.

        Zuviel Ansprüche an die Gestaltung darfst Du aber nur haben, wenn Du gut HTML programmieren kannst. Für alles andere ist vis eventuell besser geeignet.

        Aber es ist ja auch kein Problem zum Beispiel externe Seiten - wie vis aus dem NodeRed Dashboard aufzurufen, sodass man hier immer parallel fahren kann. 😉

        Im Moment schaut das alles noch doppelt gemoppelt aus. Hier der Grundriss ist der Aufruf von VIS in einem iframe des NodeRed Dashboards:

        Hier das Menü:

        58e86f18-79e0-4ff2-b604-de61a081132d-image.png

        und so kann dann VIS unter NodeRED aussehen. 😉

        7b8a0494-f5f9-483f-ba55-34497ede112f-image.png

        Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

        1 Reply Last reply
        0
        • mickymM mickym

          @nicobauer Nein, das ist nicht ganz richtig. Das Node Red Dashboard arbeitet mit dem sogenannten "Responsive Design". Das heißt es ordnet die Gruppen immer automatisch an. Das ist einerseits praktisch, aber nimmt Dir auch Einfluss. Ist also die Breite erreicht wird die nächste Gruppe immer unter der 1. Gruppe ganz links positioniert.

          Die Standardbreite von 6 Einheiten pro Gruppe sind deshalb praktisch, da sie genau dann auf eine Seite beim Handy im Hochformat passen.

          Diese Überschriften, die Du genannt hast, sind als nichts anderes als Deine Gruppennamen (Batteriestatus etc.).

          Das einzige Mal, dass ich eine Überschrift in einer Gruppe genutzt habe, ist bei Wetter. Ist aber trotzdem bisschen anders als bei der Gruppenüberschrift.
          Ein Beispiel ist "Barometer".
          Dafür kannst Du die Template Node verwenden:

          9dd179a1-c134-41ec-bbb9-eba1509c4194-image.png

          Wenn Du übrigens bei dem Tab im Dashboard auf den Knopf Layout gehst siehst Du Deine Gruppen und kannst dort ggf. verschieben:

          11e8946d-497b-460d-ab93-68a3d52fceef-image.png

          Darauf siehst Du aber ganz gut - welche ui-Nodes ich für was genommen habe. 😉

          Übrigens das mit dem responsive Design kannst Du ganz leicht testen, indem Du Dein Browserfenster zoomst - dann siehst Du dass immer, wie das Dashboard versucht wird die Breite dynamisch auszunutzen.

          Wenn Du also über 100% gehst, wirst Du sehen, dass sich Deine Batterstatus Gruppe irgendwann unter der Wettergruppe wiederfindet. 😉 Deswegen ist es meist sinnvoll die vorgegebene Breite auf 6 zu belassen - somit werden horizontale Scrollbalken vermieden.

          N Offline
          N Offline
          nicobauer
          wrote on last edited by
          #38

          @mickym said in Visualisierung (Dashboard) gestalten & strukturieren:

          Wenn Du übrigens bei dem Tab im Dashboard auf den Knopf Layout gehst siehst Du Deine Gruppen und kannst dort ggf. verschieben:

          11e8946d-497b-460d-ab93-68a3d52fceef-image.png

          Darauf siehst Du aber ganz gut - welche ui-Nodes ich für was genommen habe. 😉

          Übrigens das mit dem responsive Design kannst Du ganz leicht testen, indem Du Dein Browserfenster zoomst - dann siehst Du dass immer, wie das Dashboard versucht wird die Breite dynamisch auszunutzen.

          Wenn Du also über 100% gehst, wirst Du sehen, dass sich Deine Batterstatus Gruppe irgendwann unter der Wettergruppe wiederfindet. 😉 Deswegen ist es meist sinnvoll die vorgegebene Breite auf 6 zu belassen - somit werden horizontale Scrollbalken vermieden.

          Da war ich drin und hatte es nicht geschafft das zu verschieben. daher war meine Frage die du mir jetzt gut beantwortet hast.

          Erstmal reicht mir das Dashboard von node red.

          mickymM 1 Reply Last reply
          0
          • N nicobauer

            @mickym said in Visualisierung (Dashboard) gestalten & strukturieren:

            Wenn Du übrigens bei dem Tab im Dashboard auf den Knopf Layout gehst siehst Du Deine Gruppen und kannst dort ggf. verschieben:

            11e8946d-497b-460d-ab93-68a3d52fceef-image.png

            Darauf siehst Du aber ganz gut - welche ui-Nodes ich für was genommen habe. 😉

            Übrigens das mit dem responsive Design kannst Du ganz leicht testen, indem Du Dein Browserfenster zoomst - dann siehst Du dass immer, wie das Dashboard versucht wird die Breite dynamisch auszunutzen.

            Wenn Du also über 100% gehst, wirst Du sehen, dass sich Deine Batterstatus Gruppe irgendwann unter der Wettergruppe wiederfindet. 😉 Deswegen ist es meist sinnvoll die vorgegebene Breite auf 6 zu belassen - somit werden horizontale Scrollbalken vermieden.

            Da war ich drin und hatte es nicht geschafft das zu verschieben. daher war meine Frage die du mir jetzt gut beantwortet hast.

            Erstmal reicht mir das Dashboard von node red.

            mickymM Online
            mickymM Online
            mickym
            Most Active
            wrote on last edited by
            #39

            @nicobauer Die Gruppen kannst Du nicht in dem großen Layout Fenster verschieben, aber hier drin geht das schon:

            a9428099-b8fc-43ae-81d0-5521dfea31fe-image.png

            Klapp die Gruppen ein und dann kannst sie nach oben oder unten verschieben.

            Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

            1 Reply Last reply
            0
            • mickymM mickym

              @tomily Ich hab leider nichts gefunden. Mach doch mal ein Issue auf GitHub auf . Nachdem ChangeLog: https://github.com/node-red/node-red-dashboard/blob/master/CHANGELOG.md

              müssen da wohl Änderungen seit dashboard Version 2.23.1 erfolgt sein.

              Eine Lösung wäre aber Du machst ein Text-Label davor, verzichtest auf das Label in der Drop Down Box und verkürzt diese um die Einheiten. Das funktioniert soweit. Dafür musst Du bei der Größe von Auto auf fixe Größen umstellen:

              7dca98ea-8cc4-49e3-8268-096664f76cbe-image.png

              3f29d73f-f021-46fd-a18b-77aa9fe411f3-image.png

              Bei einer Standard 6er Breite in den Gruppen - hier mal das Beispiel wie es mit 2* 3x1 aussieht:

              screen.png

              T Offline
              T Offline
              tomily
              wrote on last edited by
              #40

              @mickym

              Hallo mickym,
              bitte entschuldige meine späte Antwort.

              Tatsächlich muss sich seit dem letzten Update etwas verändert haben. Werde das mal beobachten und ggf. ein Issu eröffnen.

              Ich ärgere mich etwas, dass ich auf deinen simplen, aber genialen Tipp nicht selbst gekommen bin.
              Natürlich ist es nicht so schön, aber der Workaround mit separaten Textfeldern funktioniert super und hilft mir für den ersten Moment.

              Die Ansicht sieht nun im Dashboard wieder schön aus 🙂

              DANKE und Grüße

              T 1 Reply Last reply
              0
              • T tomily

                @mickym

                Hallo mickym,
                bitte entschuldige meine späte Antwort.

                Tatsächlich muss sich seit dem letzten Update etwas verändert haben. Werde das mal beobachten und ggf. ein Issu eröffnen.

                Ich ärgere mich etwas, dass ich auf deinen simplen, aber genialen Tipp nicht selbst gekommen bin.
                Natürlich ist es nicht so schön, aber der Workaround mit separaten Textfeldern funktioniert super und hilft mir für den ersten Moment.

                Die Ansicht sieht nun im Dashboard wieder schön aus 🙂

                DANKE und Grüße

                T Offline
                T Offline
                tomily
                wrote on last edited by
                #41

                Hallo Leute,

                ich habe vor einigen Tagen schonmal zum Thema Dropdown-Menüs geschrieben.
                Hat jemand eine Idee, was sich seit kurzem geändert haben könnte?

                Ich betreibe seit sehr langer Zeit Betriebsmodis über die Dropdown-Auswahlliste. Dies hat tadellos funktioniert, sodass mir auch im Dropdown der Wert angezeigt wurde, wenn dieser an anderer Stelle geschaltet wurde. Also IN und OUTput.

                c86e0113-9265-44c2-ab4e-b0354a5b7aeb-grafik.png

                8151bb9c-ca2a-4079-8eee-679bbbfcb380-grafik.png

                Seit dem letzten Update geht allerdings nur noch das schalten. Mir werden die Zustände nicht mehr angezeigt.
                An den Variabeln und Datentypen hat sich nichts verändert. Es kommt der korrekte String an, wird nur nicht mehr verarbeitet:

                c35698dc-9b1f-480b-b47c-466c6b2134a2-grafik.png

                Hat noch jemand das Problem?

                mickymM 1 Reply Last reply
                0
                • T tomily

                  Hallo Leute,

                  ich habe vor einigen Tagen schonmal zum Thema Dropdown-Menüs geschrieben.
                  Hat jemand eine Idee, was sich seit kurzem geändert haben könnte?

                  Ich betreibe seit sehr langer Zeit Betriebsmodis über die Dropdown-Auswahlliste. Dies hat tadellos funktioniert, sodass mir auch im Dropdown der Wert angezeigt wurde, wenn dieser an anderer Stelle geschaltet wurde. Also IN und OUTput.

                  c86e0113-9265-44c2-ab4e-b0354a5b7aeb-grafik.png

                  8151bb9c-ca2a-4079-8eee-679bbbfcb380-grafik.png

                  Seit dem letzten Update geht allerdings nur noch das schalten. Mir werden die Zustände nicht mehr angezeigt.
                  An den Variabeln und Datentypen hat sich nichts verändert. Es kommt der korrekte String an, wird nur nicht mehr verarbeitet:

                  c35698dc-9b1f-480b-b47c-466c6b2134a2-grafik.png

                  Hat noch jemand das Problem?

                  mickymM Online
                  mickymM Online
                  mickym
                  Most Active
                  wrote on last edited by mickym
                  #42

                  @tomily es schaut so aus - als ob deine IN-Nodes nichts senden, sonst siehst Du was im status - zum Einen schau - ob Message at start drin steht und ob Du nicht bei IN (nur ACK === true) verwendest, Du aber ein command raussendest. Am Besten Du hängst eine Debug Node an Deine IN-Nodes und schaust, ob und was rauskommt.

                  Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                  T 1 Reply Last reply
                  0
                  • mickymM mickym

                    @tomily es schaut so aus - als ob deine IN-Nodes nichts senden, sonst siehst Du was im status - zum Einen schau - ob Message at start drin steht und ob Du nicht bei IN (nur ACK === true) verwendest, Du aber ein command raussendest. Am Besten Du hängst eine Debug Node an Deine IN-Nodes und schaust, ob und was rauskommt.

                    T Offline
                    T Offline
                    tomily
                    wrote on last edited by
                    #43

                    @mickym

                    Das hatte ich schon ausprobiert. Der IN-Node bringt die gewünschten Informationen. Nur danach passiert nichts mehr. Das DropDown-Node erkennt sogar den korrekten Wert am Input, zeigt es aber im Dashboard nicht mehr an.

                    f4f77921-57aa-4004-9d41-4f619530d549-grafik.png

                    An der Konfiguration aller Nodes hat sich nichts geändert, nur das Update.
                    Der Haken bei "Send only on then ack==true" war nicht gesetzt. Es bringt aber keinen Unterschied, wenn ich Ihn setze.

                    Das ist irgendwie komisch 🙂

                    mickymM 1 Reply Last reply
                    0
                    • T tomily

                      @mickym

                      Das hatte ich schon ausprobiert. Der IN-Node bringt die gewünschten Informationen. Nur danach passiert nichts mehr. Das DropDown-Node erkennt sogar den korrekten Wert am Input, zeigt es aber im Dashboard nicht mehr an.

                      f4f77921-57aa-4004-9d41-4f619530d549-grafik.png

                      An der Konfiguration aller Nodes hat sich nichts geändert, nur das Update.
                      Der Haken bei "Send only on then ack==true" war nicht gesetzt. Es bringt aber keinen Unterschied, wenn ich Ihn setze.

                      Das ist irgendwie komisch 🙂

                      mickymM Online
                      mickymM Online
                      mickym
                      Most Active
                      wrote on last edited by mickym
                      #44

                      @tomily
                      Ich habe 2 Nachrichten für Dich: 1 schlechte und 1 gute. Welche willst Du zuerst hören. Sowas hast Du sicher schon mal gehört. 😉 😉 😉

                      Nun dann erst zu Schlechten: 😞
                      Ja ich konnte das nachvollziehen - und ist leider wieder ein Bug in der dropbox-Node. 😞 - Ist schon ein Mist, was die Leute da gemacht haben. Kannst ja ein Issue auf GitHub eröffnen

                      Nun zur Guten: 🙂
                      Da ich es nachvollziehen konnte, habe ich auch einen easy Workaround gefunden.
                      Das Problem der Dropbox kannst Du lösen, in dem Du die Nachrichten durchschleifst:

                      935aa227-1614-485a-bacf-46c200a0b24c-image.png

                      Damit Du aber nun keine Endlosschleife erzeugst - und Dein System lahm legst, musst Du Deine in-Node unbedingt ebenfalls so konfigurieren, dass nur Änderungen durchkommen:

                      05fc3e3d-9dca-4ab2-baf5-cd0a64b166ad-image.png

                      Mit dieser Konfig geht es - habe es zumindest so in meinem Test hinbekommen.

                      Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                      T 1 Reply Last reply
                      0
                      • mickymM mickym

                        @tomily
                        Ich habe 2 Nachrichten für Dich: 1 schlechte und 1 gute. Welche willst Du zuerst hören. Sowas hast Du sicher schon mal gehört. 😉 😉 😉

                        Nun dann erst zu Schlechten: 😞
                        Ja ich konnte das nachvollziehen - und ist leider wieder ein Bug in der dropbox-Node. 😞 - Ist schon ein Mist, was die Leute da gemacht haben. Kannst ja ein Issue auf GitHub eröffnen

                        Nun zur Guten: 🙂
                        Da ich es nachvollziehen konnte, habe ich auch einen easy Workaround gefunden.
                        Das Problem der Dropbox kannst Du lösen, in dem Du die Nachrichten durchschleifst:

                        935aa227-1614-485a-bacf-46c200a0b24c-image.png

                        Damit Du aber nun keine Endlosschleife erzeugst - und Dein System lahm legst, musst Du Deine in-Node unbedingt ebenfalls so konfigurieren, dass nur Änderungen durchkommen:

                        05fc3e3d-9dca-4ab2-baf5-cd0a64b166ad-image.png

                        Mit dieser Konfig geht es - habe es zumindest so in meinem Test hinbekommen.

                        T Offline
                        T Offline
                        tomily
                        wrote on last edited by
                        #45

                        @mickym
                        Also ich fühle mich hier manchmal wie so ein super Dau, der das erste mal vor seinem Rechner hockt und nicht auf die einfachsten Ideen kommt.

                        Ich war so in meinem Tunnel, dass ich mit dem Durchschleifen imme rnur einen Loop erzeugt habe.
                        Dass ich auf "value changes" umschalten kann, habe ich dabei total übersehen.

                        Natürlich ist es nicht schön, dass die Node mit Bugs versehen wurde. Das war ja mit den Beschriftungsfenstern schon so. Aber immerhin hast du mirein weiteres Mal geholfen und zur Lösung verholfen.

                        Besten Dank 🙂

                        1 Reply Last reply
                        0
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        744

                        Online

                        32.4k

                        Users

                        81.4k

                        Topics

                        1.3m

                        Posts
                        Community
                        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                        ioBroker Community 2014-2025
                        logo
                        • Login

                        • Don't have an account? Register

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Recent
                        • Tags
                        • Unread 0
                        • Categories
                        • Unreplied
                        • Popular
                        • GitHub
                        • Docu
                        • Hilfe