Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  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.8k

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

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

Visualisierung (Dashboard) gestalten & strukturieren

Geplant Angeheftet Gesperrt Verschoben Node-Red
node-red
45 Beiträge 8 Kommentatoren 19.4k Aufrufe 8 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • AphofisA Aphofis

    @mickym
    Hi, sag mal ist es möglich das du deine Flows exportieren kannst damit man sich das mal angucken kann wie es aufgebaut ist damit ich das mal verstehe und mir vllt ein wenig abgucken kann

    Das wäre sehr nett!

    mickymM Online
    mickymM Online
    mickym
    Most Active
    schrieb am zuletzt editiert von mickym
    #28

    @Aphofis Das ist etwas zu unspezifisch. Ich habe ca. 20 Flows - und die sind isoliert nicht hilfreich. Schau mal hier habe ich einen Flow gemacht - den hat der TE dann entsprechend angepasst um eine RGB Steuerung zu machen. https://forum.iobroker.net/topic/31010/gelöst-shelly-rgbw-steuern/9

    Sag doch einfach mal konkret was Du machen möchtest und dann können wir Schritt für Schritt vorgehen-.

    Um Dir einfach zu zeigen dass es einfach keinen Sinn macht - Dir die Flows zu exportieren - weil Du einfach andere Geräte und Datenpunkte Du hast - zeige ich Dir einfach 2 Bildausschnitte aus meinen Szenen und Logik - gleichzeitig siehst Du aber auch wieviele andere Flows ich noch habe. Da muss jeder auch sein eigenes System finden.

    screen.png

    Außerdem muss man ja einiges verstehen. Zum Beispiel die Szene mit dem Home Office - die Du oben siehst. Da kommt als ein Input ein Status, ob ich im Home Office bin oder nicht. Das habe ich einfach so festgelegt, dass wenn die FritzBox erkennt, dass mein Geschäftsnotebook on ist, dann ist der Status on. Da ich (war noch vor Corona) in der Regel tagsüber nicht daheim war - sondern im Büro und nicht im HomeOffice war die Heizung immer auf Auto - und Temperatur gesenkt. Wenn ich nun mein Notebook eingeschaltet habe, dann wurde die Heizung auf manuell und Comfort-Temperatur eingestellt. Du musst da einfach ein bisschen Fantasie entwickeln ;)

    oder mit der Display Automatik: Ich habe einfach ein Monitor am Raspberry - der mir das Übersichtsbild von unten zeigt. Der Monitor soll aber nicht laufen, wenn niemand im Zimmer ist - also habe ich einen Flow gebastelt, der den Monitor in Abhängigkeit vom Bewegungsmelder steuert und wie Du siehst ist das easy.
    Die Node Büro Präsenz liefert true oder false - je nachdem ob Bewegung erkannt wird. Dann lasse ich die Nachricht durch oder nicht - je nachdem ob ich will dass der Monitor automatisch gesteuert werden soll. Dann bissi Übersetzungsarbeit und dann wird mit der roten Node ein Betriebssystembefehl abgesetzt (vcgencmd display_power=0 oder 1).

    screen.png

    Im Übrigen kannst Du Dir auch ein Thema erst mal vornehmen. Ich habe zum Beispiel mit der Heizung gestartet - kann aber auch Licht sein. Der Schnelligkeit wegen habe ich auch das Node-Red Dashboard verwendet und nicht vis - da fange ich erst mit an.

    Ein paar Screenshots siehst Du ja hier unten auf der Seite - einmal die Übersicht - dann die Heizungssteuerung.
    https://forum.iobroker.net/topic/33095/visualisierung-dashboard-gestalten-strukturieren/4

    Auch die Übersichtsgrafik - muss halt jeder wissen was er will. Bei Licht habe ich das halt so gelöst, dass ich mit einem Blick sehe ob irgendwo Licht brennt und wenn die Birne bei Wohnung brennt - schalte ich halt so mit einem Druck das LIcht in der ganzen Wohnung aus. ;)

    Und last not least - manchmal macht das System auch mal nicht was ich will ;)

    Noch ein Nachtrag:

    Du bist doch hier schon ein alter Hase und hast ja einige Blocklies am Laufen. Nimm Dir halt mal eins vor und versuche es dann in Node-Red umzusetzen. So könntest Du ja Deine Aquariumsteuerung nehmen und in einem eigenen Flow implementieren. ;)

    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 Antwort Letzte Antwort
    0
    • mickymM mickym

      Ansonsten solltest Du Dir halt nur aus funktionalen Gründen überlegen - ob so eine Startseite nur zum Navigieren nötig ist.
      Dafür hast ja Dein Menü.

      In meiner Startseite versuche ich halt mir schnell einen Überblick zu schaffen - das ist aber optisch im Moment nicht die schönste Lösung:

      screen.png

      Ansonsten ist halt schwierig in dem Dashboard mit den Kacheln die immer optisch gleich zu machen. Bei der Heizung ging es noch - aber in den Räumen mit unterscheidlichen Lampen und Geräten wird es schwierig - aber wie gesagt da bin ich gerade dabei mich nun in die VIS einzuarbeiten.

      screen.png

      Bissi aufwendiger ist meine Wetterseite:

      https://forum.iobroker.net/topic/44684/wetter-api-s-mit-nodered-abrufen/21

      10c38315-69a0-476c-b533-74544cad4038-image.png

      Aber wie gesagt - lass doch Deine VIS - mit dem NodeRed Adapter kannst Du doch Datenpunkte auch für VUS zur Verfügung stellen.

      N Offline
      N Offline
      nicobauer
      schrieb am zuletzt editiert von
      #29

      @mickym
      Mir gefällt deine Übersichtsseite und hat mich inspiriert, mir auch so eine zu bauen.
      Ich hab ein paar Fragen, mit welchen Node du verwendet hast.
      Unter "An- und Abwesenheit" hast du da den Text UI genutzt oder den button. Beim Button Node ist es mir gelungen, dass ich ein ICON verwenden konnte und auch das Einfärben, aber dann wurde auch der Text eingefärbt und die Reihenfolge war erst ICON und dann Text.
      Leider ist für mich der Hilfetext beim node nicht hilfreich.

      mickymM 1 Antwort Letzte Antwort
      0
      • N nicobauer

        @mickym
        Mir gefällt deine Übersichtsseite und hat mich inspiriert, mir auch so eine zu bauen.
        Ich hab ein paar Fragen, mit welchen Node du verwendet hast.
        Unter "An- und Abwesenheit" hast du da den Text UI genutzt oder den button. Beim Button Node ist es mir gelungen, dass ich ein ICON verwenden konnte und auch das Einfärben, aber dann wurde auch der Text eingefärbt und die Reihenfolge war erst ICON und dann Text.
        Leider ist für mich der Hilfetext beim node nicht hilfreich.

        mickymM Online
        mickymM Online
        mickym
        Most Active
        schrieb am zuletzt editiert von mickym
        #30

        @nicobauer Man kann das grundsätzlich mit Buttons und mit Text machen. Hier habe ich Text genommen. Du meinst das Haus oder?

        d1fc0c49-c79a-479e-bc2a-9bba34ff8cdf-image.png

        4c78c74b-8f39-480d-8ca8-b542537d0f5a-image.png

        Die Parameter msg.icon und msg.color initiiere ich dann über Change Node - je nach Status

        Nochmal in schön zum Rauskopieren:

        <font color="{{msg.color}}"><i class="fa fa-{{msg.icon}} fa-2x"></i></font>
        

        und hier noch die Change Node davor:

        2bad7601-5ebf-4720-aa77-ccf3ee501655-image.png

        Wenn ich nicht da bin, ist das Haus dann grau. ;)

        5e08e34d-44a4-42ca-9379-f4872c777d3a-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.

        N 1 Antwort Letzte Antwort
        1
        • mickymM mickym

          @nicobauer Man kann das grundsätzlich mit Buttons und mit Text machen. Hier habe ich Text genommen. Du meinst das Haus oder?

          d1fc0c49-c79a-479e-bc2a-9bba34ff8cdf-image.png

          4c78c74b-8f39-480d-8ca8-b542537d0f5a-image.png

          Die Parameter msg.icon und msg.color initiiere ich dann über Change Node - je nach Status

          Nochmal in schön zum Rauskopieren:

          <font color="{{msg.color}}"><i class="fa fa-{{msg.icon}} fa-2x"></i></font>
          

          und hier noch die Change Node davor:

          2bad7601-5ebf-4720-aa77-ccf3ee501655-image.png

          Wenn ich nicht da bin, ist das Haus dann grau. ;)

          5e08e34d-44a4-42ca-9379-f4872c777d3a-image.png

          N Offline
          N Offline
          nicobauer
          schrieb am zuletzt editiert von
          #31

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

          <font color="{{msg.color}}"><i class="fa fa-{{msg.icon}} fa-2x"></i></font>

          Danke für deine schnelle Antwort.
          Das hilft mir sehr. Dann baue ich an meinem Dashboard mal weiter.

          mickymM 1 Antwort Letzte Antwort
          0
          • N nicobauer

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

            <font color="{{msg.color}}"><i class="fa fa-{{msg.icon}} fa-2x"></i></font>

            Danke für deine schnelle Antwort.
            Das hilft mir sehr. Dann baue ich an meinem Dashboard mal weiter.

            mickymM Online
            mickymM Online
            mickym
            Most Active
            schrieb am zuletzt editiert von mickym
            #32

            @nicobauer Ansonsten wenn Du mit den Einträgen/Icons was Schalten willst - dann nimmst Du nicht den Button-Node oder den Text Node - sondern die Switch Node. Da kannst Du Icon und Farbe direkt festlegen:

            b38a2d05-2c9e-4d0c-9f27-75d7c5143983-image.png

            Ist eigentlich die universeller Lösung - da Du damit auch Status anzeigen lassen kannst und wenn man drauf klickt kann man das ignorieren. Ansonsten kann man dann ja neben Schalten auch ein Popup anzeigen lassen - da sind der Fantasie keine Grenzen gesetzt. ;)

            Nun kennst Du beide Möglichkeiten. ;)

            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 Antwort Letzte Antwort
            0
            • mickymM mickym

              @nicobauer Ansonsten wenn Du mit den Einträgen/Icons was Schalten willst - dann nimmst Du nicht den Button-Node oder den Text Node - sondern die Switch Node. Da kannst Du Icon und Farbe direkt festlegen:

              b38a2d05-2c9e-4d0c-9f27-75d7c5143983-image.png

              Ist eigentlich die universeller Lösung - da Du damit auch Status anzeigen lassen kannst und wenn man drauf klickt kann man das ignorieren. Ansonsten kann man dann ja neben Schalten auch ein Popup anzeigen lassen - da sind der Fantasie keine Grenzen gesetzt. ;)

              Nun kennst Du beide Möglichkeiten. ;)

              T Offline
              T Offline
              tomily
              schrieb am zuletzt editiert von
              #33

              Hallo Ihr,

              passt evtl. gar nicht mehr so richtig hier rein, aber hat evtl. trotzdem noch jemand ne Idee:

              Ich verwende im Dashboard für Variablen einige Dropdown menüs.
              Seit dem Letzten Update hat es mir leider die Ansichten total verschoben und ich bekomme es nicht mehr hin.

              Die Bezeichnungen links (Betriesmodus, Tag -/NAcht, Beschattung usw.) sollen länger und lesbar sein. Das Auswahlfeld hingegen deutlich kleiner.

              Kann man das irgendwo anpassen?

              2da32d74-e8af-4c6d-8ff1-abccac9f666d-grafik.png

              4ea322c7-84fb-42fa-966b-2d07f3816b37-grafik.png

              mickymM 1 Antwort Letzte Antwort
              0
              • T tomily

                Hallo Ihr,

                passt evtl. gar nicht mehr so richtig hier rein, aber hat evtl. trotzdem noch jemand ne Idee:

                Ich verwende im Dashboard für Variablen einige Dropdown menüs.
                Seit dem Letzten Update hat es mir leider die Ansichten total verschoben und ich bekomme es nicht mehr hin.

                Die Bezeichnungen links (Betriesmodus, Tag -/NAcht, Beschattung usw.) sollen länger und lesbar sein. Das Auswahlfeld hingegen deutlich kleiner.

                Kann man das irgendwo anpassen?

                2da32d74-e8af-4c6d-8ff1-abccac9f666d-grafik.png

                4ea322c7-84fb-42fa-966b-2d07f3816b37-grafik.png

                mickymM Online
                mickymM Online
                mickym
                Most Active
                schrieb am zuletzt editiert von mickym
                #34

                @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

                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 T 2 Antworten Letzte Antwort
                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

                  N Offline
                  N Offline
                  nicobauer
                  schrieb am zuletzt editiert von
                  #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 Antworten Letzte Antwort
                  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
                    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            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
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              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
                                schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von
                                      #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 Antwort Letzte Antwort
                                      0
                                      Antworten
                                      • In einem neuen Thema antworten
                                      Anmelden zum Antworten
                                      • Älteste zuerst
                                      • Neuste zuerst
                                      • Meiste Stimmen


                                      Support us

                                      ioBroker
                                      Community Adapters
                                      Donate

                                      395

                                      Online

                                      32.4k

                                      Benutzer

                                      81.5k

                                      Themen

                                      1.3m

                                      Beiträge
                                      Community
                                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                      ioBroker Community 2014-2025
                                      logo
                                      • Anmelden

                                      • Du hast noch kein Konto? Registrieren

                                      • Anmelden oder registrieren, um zu suchen
                                      • Erster Beitrag
                                        Letzter Beitrag
                                      0
                                      • Home
                                      • Aktuell
                                      • Tags
                                      • Ungelesen 0
                                      • Kategorien
                                      • Unreplied
                                      • Beliebt
                                      • GitHub
                                      • Docu
                                      • Hilfe