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

  • Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar
    BluefoxB
    Bluefox
    11
    2
    227

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

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

Visualisierung (Dashboard) gestalten & strukturieren

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.
  • T tomily

    Hallo zusammen,

    nachdem meine Visualisierung durch die Hilfe dieses Forums nun funktionell in Ordnung ist, mache ich mich gerade an die optische Aufarbeitung.

    Ähnlich wie bei Gira oder anderen Visu Herstellern würde ich gerne eine Art "Startbildschirm" bauen. Quasi Kacheln mit Themen, die dann in andere Tabs verlinken. Geht das?

    Beispielsweise eine Kachel mit "Beschattung", welche beim klicken auf die entsprechende Seite verlinkt.
    Optisches Beispiel von "Giara Homeserver":
    031f007a-f711-406d-a73b-3bf1bcfecbce-grafik.png

    Mir würde es reichen entsprechende Icons einzubinden. Oder noch besser, Icons als Bilddateien anordnen und diese dann verlinken.

    Freue mich über euren Input.

    Grüße
    Tomily

    HomoranH Offline
    HomoranH Offline
    Homoran
    Global Moderator Administrators
    wrote on last edited by
    #3

    @tomily sagte in Visualisierung (Dashboard) gestalten & strukturieren:

    Mir würde es reichen entsprechende Icons einzubinden

    dazu gibt es die Navigation Icons

    kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

    Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

    der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

    F 1 Reply Last reply
    0
    • mickymM Offline
      mickymM Offline
      mickym
      Most Active
      wrote on last edited by mickym
      #4

      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.

      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.

      AphofisA N 2 Replies Last reply
      0
      • T Offline
        T Offline
        tomily
        wrote on last edited by
        #5

        Danke für die ausführlichen Antworten und sorry für meine späte Rückmeldung.
        Werde die Tips und die Buttons heute Abend gleich mal ausprobieren, sobald ich zuhause bin.

        Könnte als Absprung auf andere Seiten sehr hilfreich sein.

        Zum Thema Dashboard und Startseite....da hast du natürlich auch wieder recht. Funktionell ist das Dashboard TOP. Beim anpassen der grafischen Eigenschaften ist es dann doch recht verschlossen. Gerade wenn man unterschiedliche Displaygrößen hat, auf denen das Dashboard angezeigt wird. (Handy, iPad & Touchscreen an der Wand). Da sieht es überall unterschiedlich aus... Vielleicht muss ich mir die VIS auch nochmal anschauen. Von der bin ich aber erst auf das Dashboard gewechselt, weil es schnell zu einem optisch schönen Ergebnis kommt.

        Danke für deine Screenshots. Da ist echt einiges Los 🙂 Versuche es möglichst übersichtlich zu gestalten. Deshalb die Idee mit den Buttons auf der Startseite...vielleicht muss ich das nochmal überdenken.

        Bei siehts aktuell so aus:

        52aa56dc-30db-4186-b890-0fc3a6472e16-grafik.png

        26f3f264-3a2e-40cd-95f7-ba7cc5cdc782-grafik.png

        2ebb1a18-ee52-47f4-93d6-4dd6f46c4857-grafik.png

        82bd883c-2201-45e9-82a6-7632b7b5ca4f-grafik.png

        1 Reply Last reply
        0
        • HomoranH Homoran

          @tomily sagte in Visualisierung (Dashboard) gestalten & strukturieren:

          Mir würde es reichen entsprechende Icons einzubinden

          dazu gibt es die Navigation Icons

          F Offline
          F Offline
          frankyboy73
          wrote on last edited by
          #6

          @Homoran sagte in Visualisierung (Dashboard) gestalten & strukturieren:

          @tomily sagte in Visualisierung (Dashboard) gestalten & strukturieren:

          Mir würde es reichen entsprechende Icons einzubinden

          dazu gibt es die Navigation Icons

          Hi, wo finde ich die denn? Muss ich dafür was zusätzliches Installieren?

          Schöne Grüße Frank

          1 Reply Last reply
          0
          • D Offline
            D Offline
            dos1973
            wrote on last edited by
            #7

            links in der Leiste nach Navigation suchen...

            F 1 Reply Last reply
            0
            • D dos1973

              links in der Leiste nach Navigation suchen...

              F Offline
              F Offline
              frankyboy73
              wrote on last edited by
              #8

              @dos1973 sagte in Visualisierung (Dashboard) gestalten & strukturieren:

              links in der Leiste nach Navigation suchen...

              Hi, also bei mir finde ich nichts mit Navigation und wenn ich im Filter "Navi" eingebe wird mir nichts mehr angezeigt.
              Das einzige was ich gefunden habe ist ui-contol, damit kann ich dann per payload z.B. über Buttons die Tabs aufrufen.

              Schöne Grüße Frank

              1 Reply Last reply
              0
              • D Offline
                D Offline
                dos1973
                wrote on last edited by
                #9

                Du hats doch materialdesign widgets drauf, oder? Das menü icon links oben.
                Mach mal ein screenshot vom vis im editor.

                mickymM 1 Reply Last reply
                0
                • D dos1973

                  Du hats doch materialdesign widgets drauf, oder? Das menü icon links oben.
                  Mach mal ein screenshot vom vis im editor.

                  mickymM Offline
                  mickymM Offline
                  mickym
                  Most Active
                  wrote on last edited by
                  #10

                  @dos1973 ich glaube Du redest von VIS - hier ging es aber um node-RED und dessen dashboard. 😉

                  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
                  • D Offline
                    D Offline
                    dos1973
                    wrote on last edited by
                    #11

                    Sorry, hatte das übersehen. Dann bin ich raus.

                    1 Reply Last reply
                    0
                    • T Offline
                      T Offline
                      tomily
                      wrote on last edited by
                      #12

                      @mickym :
                      Zunächst mal vielen Dank. Das hat direkt funktioniert und sieht ganz gut aus.
                      Kommt lustiger weiße direkt sehr nah, an das Beispiel von Gira. Und ist tausende Euro günstiger 😃 Damit kann ich erst mal arbeiten und weiter experimentieren 🙂
                      Überlege auf die "Main" Seite nur Buttons zu plazieren.

                      Gibt es eine Übersicht mit den Icons? Da es ja sofort funkitoniert hat, gehe ich davon aus, dass man nichts nachinstallieren muss und die Icons bereits im Default dabei sind?

                      Hätte unabhängig vom Dashboard noch eine weitere Idee zum implementieren. Vermutlich müsste ich da einen neuen Thread auf machen?! Schreibe es euch aber trotzdem einfach mal:

                      Ich würde in die Beschattung gerne einen Button einbauen, der meine Lamellen der Jalousien schräg stellt, sodass Licht rein kommt. Dazu würde es genügend, die Jalousie um 1% hoch zu fahren.

                      Lässt sich folgendes von einem Button ausführen. Idee: Neuer Sollwert = (aktueller Wert) + 1 .
                      Dann würde die Jalousie immer um 1% hoch fahren, egal auf welchem Level sie gerade steht.

                      Freue mich auf euer Feedback.

                      Grüße und schönen Sonntag

                      mickymM 1 Reply Last reply
                      0
                      • T tomily

                        @mickym :
                        Zunächst mal vielen Dank. Das hat direkt funktioniert und sieht ganz gut aus.
                        Kommt lustiger weiße direkt sehr nah, an das Beispiel von Gira. Und ist tausende Euro günstiger 😃 Damit kann ich erst mal arbeiten und weiter experimentieren 🙂
                        Überlege auf die "Main" Seite nur Buttons zu plazieren.

                        Gibt es eine Übersicht mit den Icons? Da es ja sofort funkitoniert hat, gehe ich davon aus, dass man nichts nachinstallieren muss und die Icons bereits im Default dabei sind?

                        Hätte unabhängig vom Dashboard noch eine weitere Idee zum implementieren. Vermutlich müsste ich da einen neuen Thread auf machen?! Schreibe es euch aber trotzdem einfach mal:

                        Ich würde in die Beschattung gerne einen Button einbauen, der meine Lamellen der Jalousien schräg stellt, sodass Licht rein kommt. Dazu würde es genügend, die Jalousie um 1% hoch zu fahren.

                        Lässt sich folgendes von einem Button ausführen. Idee: Neuer Sollwert = (aktueller Wert) + 1 .
                        Dann würde die Jalousie immer um 1% hoch fahren, egal auf welchem Level sie gerade steht.

                        Freue mich auf euer Feedback.

                        Grüße und schönen Sonntag

                        mickymM Offline
                        mickymM Offline
                        mickym
                        Most Active
                        wrote on last edited by mickym
                        #13

                        @tomily
                        Du solltest Dir mal angewöhnen, die Node Hilfe im Info Register durchzulesen, wenn Du einen Node-Type angeklickt hast.
                        Wenn Du einen Button Node nur anklickst nicht in Deinen Flow ziehst und dann auf der info Seite schaust, dann siehst Du dort 3 Links zu den verfügbaren Icons. Wie man Größen etc. ändert musst Du halt bissi googlen.
                        Ich hatte die Awesome Icons - in dem Beispiel genutzt, das ich Dir geschickt habe. Bist halt etwas begrenzt mit den Icons. Wenn man da mehr willst - kommt man wahrscheinlich ohne Installation nicht aus.

                        Für Dein anderes Problem nimmst Du einfach keinen "iobroker-in" Node, um den aktuellen Status auzulesen. Sondern den iobroker-get node (der hat einen Eingang und Ausgang - über den Eingang wird getriggert, den Ausgang verarbeitest Du weiter), den Du hinter Deinen Button klemmst. Damit liest Du den aktuellen Wert genau dann aus, wenn Du den Button drückst.
                        Dann konvertierst in Zahl addierst/subtrahierst halt Deine 1 oder den Betrag, um den Du ändern möchtest, machst noch einen Switch rein, um den Rand auszuschliessen, also Wert größer 0 bevor Du den Wert wieder zurückschreibst.

                        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
                        • T Offline
                          T Offline
                          tomily
                          wrote on last edited by
                          #14

                          Mega! Wäre nicht auf die Idee gekommen, den GET NACH dem Buttonklick einzufügen.
                          Macht aber ja tatsächlich Sinn und funktioniert. Super geil bin Happy und bemerke, dass es am Basiswissen schon scheitert 😕

                          Die Hilfetexte werde ich mir definitiv anschauen!

                          DANKE

                          1 Reply Last reply
                          0
                          • T Offline
                            T Offline
                            tomily
                            wrote on last edited by
                            #15

                            Hi zusammen,

                            wollte mich nochmal für eure Hilfe bedanken.

                            Habe mich erst mal für eine Navigationsseite entschieden, die ich dann vom Tablet oder dem Touch an der Wand aufrufen kann:

                            1cc9f65e-6ce8-46db-9cf8-c870d0d4620d-grafik.png

                            mickymM 1 Reply Last reply
                            0
                            • T tomily

                              Hi zusammen,

                              wollte mich nochmal für eure Hilfe bedanken.

                              Habe mich erst mal für eine Navigationsseite entschieden, die ich dann vom Tablet oder dem Touch an der Wand aufrufen kann:

                              1cc9f65e-6ce8-46db-9cf8-c870d0d4620d-grafik.png

                              mickymM Offline
                              mickymM Offline
                              mickym
                              Most Active
                              wrote on last edited by
                              #16

                              @tomily Freut mich - schaut ja gar nicht so schlecht aus.

                              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
                              • T Offline
                                T Offline
                                tomily
                                wrote on last edited by
                                #17

                                Hallo zusammen,

                                ich hätte nochmal einen kurze Nachfrage zu diesem Thema. Vielleicht habt ihr das Thema ja noch abboniert 🙂

                                Ich würde gerne bei bestimmten Werten wie z.B. den Türen (oder beim Ping-Monitoring ) die Datum & Zeit angezeigt, an dem der Wert das letzte Mal verändert wurde.

                                Gibt es da ne recht einfache Möglichkeit? Ein Feld "Date last change" im Datenpunkt wäre cool, habe aber nix gefunden.

                                Geschlossen seit xxx am xxx wäre cool:
                                13ba1c3f-0e7d-429a-822c-687a91cb0b9d-grafik.png

                                Freue mich über Feedback.

                                Grüße Tom

                                M mickymM 2 Replies Last reply
                                0
                                • T tomily

                                  Hallo zusammen,

                                  ich hätte nochmal einen kurze Nachfrage zu diesem Thema. Vielleicht habt ihr das Thema ja noch abboniert 🙂

                                  Ich würde gerne bei bestimmten Werten wie z.B. den Türen (oder beim Ping-Monitoring ) die Datum & Zeit angezeigt, an dem der Wert das letzte Mal verändert wurde.

                                  Gibt es da ne recht einfache Möglichkeit? Ein Feld "Date last change" im Datenpunkt wäre cool, habe aber nix gefunden.

                                  Geschlossen seit xxx am xxx wäre cool:
                                  13ba1c3f-0e7d-429a-822c-687a91cb0b9d-grafik.png

                                  Freue mich über Feedback.

                                  Grüße Tom

                                  M Offline
                                  M Offline
                                  MiP
                                  wrote on last edited by
                                  #18

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

                                  Gibt es da ne recht einfache Möglichkeit? Ein Feld "Date last change" im Datenpunkt wäre cool, habe aber nix gefunden.

                                  Sollte bei den iventwo widgets gehen ganz unten im Editor bei den Widgeteinstellungen war das glaub ich zum Einstellen. kann nur im Moment nicht nachsehen. Kann ich aber gern am Abend machen.

                                  M 1 Reply Last reply
                                  0
                                  • M MiP

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

                                    Gibt es da ne recht einfache Möglichkeit? Ein Feld "Date last change" im Datenpunkt wäre cool, habe aber nix gefunden.

                                    Sollte bei den iventwo widgets gehen ganz unten im Editor bei den Widgeteinstellungen war das glaub ich zum Einstellen. kann nur im Moment nicht nachsehen. Kann ich aber gern am Abend machen.

                                    M Offline
                                    M Offline
                                    MiP
                                    wrote on last edited by
                                    #19

                                    @MiP kommando retour. Ich war jetzt gedanklich bei vis. Sorry

                                    1 Reply Last reply
                                    0
                                    • T Offline
                                      T Offline
                                      tomily
                                      wrote on last edited by
                                      #20

                                      Danke trotzdem fürs Antworten.
                                      Ich verwende ausschießlich das Node-Red Dasboard.

                                      Ich verwende auch den Historyadapter. Dort wird die letzte Aktivität mitgeloggt.
                                      Vielleicht wäre dies ein Option. Habe leider keinen Ansatz, wie ich die Zeit aus der Spalte Zeit in ein Textfeld beamen könnte.

                                      387feceb-d9ab-4a01-90a6-a27412ce4539-grafik.png

                                      1 Reply Last reply
                                      0
                                      • T tomily

                                        Hallo zusammen,

                                        ich hätte nochmal einen kurze Nachfrage zu diesem Thema. Vielleicht habt ihr das Thema ja noch abboniert 🙂

                                        Ich würde gerne bei bestimmten Werten wie z.B. den Türen (oder beim Ping-Monitoring ) die Datum & Zeit angezeigt, an dem der Wert das letzte Mal verändert wurde.

                                        Gibt es da ne recht einfache Möglichkeit? Ein Feld "Date last change" im Datenpunkt wäre cool, habe aber nix gefunden.

                                        Geschlossen seit xxx am xxx wäre cool:
                                        13ba1c3f-0e7d-429a-822c-687a91cb0b9d-grafik.png

                                        Freue mich über Feedback.

                                        Grüße Tom

                                        mickymM Offline
                                        mickymM Offline
                                        mickym
                                        Most Active
                                        wrote on last edited by mickym
                                        #21

                                        @tomily

                                        Ich melde mich mal wieder.

                                        Ich nutze einfach den moment-service um das Datum gleich formatiert zu bekommen.
                                        Mit Board-Mitteln ist das aber auch einfach - musst dann halt das Datum selbst formatieren.

                                        Mit Board-Mitteln nimmst einfach eine Change Node - ignorierst die Nachricht (msg.payload) und nimmst dann timestamp - als Nachricht für die msg.payload.

                                        screen.png

                                        Mit dem moment-Service - wie oben angesprochen - kannst Du es halt mit dem Moment- Service formatiert ausgeben:

                                        screen.png

                                        schaut dann bei mir so aus:

                                        screen.png

                                        Wenn Du nur Änderungen haben willst und keine Updates musst halt bei Deinem Input Node aufpassen, dass nur Changes eine Nachricht erzeugen oder Du schaltest eine rbe Node dazwischen!

                                        Und noch eine kleine Anmerkung zum Schluss: Manchmal gibt der iobroker nicht alle gewünschten Daten aus, es hindert Dich aber nichts daran, node-red zu nutzen, um sie zu erzeugen, wenn Du verstehst was ich meine. 😉

                                        Ach übrigens - wenn Du bei Deiner Input Node nicht nur den value ausliest - sondern das ganze Msg-Objekt, dann siehst Du auch den Timestamp der Message (ts) - local Time weiss ich nicht könnte lc sein. val entspricht natürlich dem Wert, den Du auch bekommst, wenn Du Value und nicht Objekt aus Deinem Input - Node extrahierst:

                                        screen.png

                                        Nun solltest Du also 3 Möglichkeiten haben, um zum gewünschten Ergebnis zu kommen.

                                        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
                                        • T Offline
                                          T Offline
                                          tomily
                                          wrote on last edited by
                                          #22

                                          Hey,

                                          erst mal SORRY für die späte Rückmeldung und DANKE für die ausführliche Antwort.

                                          Ich habe etwas gegoogelt und muss nochmal richtig blöd zurück fragen. Der moment-Service klingt gut, allerings habe ich es noch nicht ganz begriffen.

                                          Habe diesen Dienst laut google nach installiert, ist das so richtig?
                                          2b9dfbd1-9aea-4fee-a2d3-87dfc6f54e59-grafik.png

                                          In Node-Red selbst finde ich dies nicht als Node? Welchen Node-Typ hast du in deinem Screenshot?
                                          454d64be-f98a-40ae-a100-01c67d56f039-grafik.png

                                          Stehe vermutlich total auf dem Schlauch

                                          Grüße und vorab schönes Wochenende

                                          mickymM 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

                                          61

                                          Online

                                          32.4k

                                          Users

                                          81.3k

                                          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