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. Visualisierung
  4. neue Visualisierung "webui" (alternative zu vis & vis-2)

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

neue Visualisierung "webui" (alternative zu vis & vis-2)

Scheduled Pinned Locked Moved Visualisierung
1.1k Posts 21 Posters 347.9k Views 18 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.
  • B Blockmove

    @jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

    @blockmove said in neue Visualisierung "webui" (alternative zu vis):

    @jogibear9988

    Ja es gibt wirklich jede Menge.
    Gehört halt zu dem Umfeld von responsive Design.
    Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
    Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

    Container queries machen das ganze echt noch mal interessant. Da kannst du dann deine schriftgröße abhängig von deiner containergröße machen.
    (siehe bsp screen containerFontSize)

    Hab ich mir jetzt auch mal angeschaut. Auch ne interessante Möglichkeit.
    Wenn man die Visu auf verschiedenen Geräten nutzt, erlebt man halt immer wieder Überraschungen.
    Highend-Smatphones sind da besonders lustig. Hohe Auflösungen und kleine Bildschirme. Da ist oft ne Schrift kaum mehr lesbar. Ich persönlich hab das Thema bei mir erstmal hinten angestellt. Auf meinen Tablets und auf dem Desktop funktioniert es.
    @Smilie108
    Wie sieht das mit deinen schönen grafischen Darstellungen aus?
    Funktioniert das alles auf verschiedenen Geräten?

    Smilie108S Offline
    Smilie108S Offline
    Smilie108
    wrote on last edited by
    #752

    @blockmove
    Hi naja eingeschränkt hatte jetzt mal fast alles von vis2 umgezogen ohne Rücksicht auf das responsiv.
    Bin jetzt grad dabei das ganze entweder in einem 2.ten baum für handydarstellung zu Optimieren oder das bestehende reponsiv fähig machen.
    ABER Die graphiken usw kann man teilweise nicht einfach shrinken oder so weil damit unleserlich wird.
    Es gibt auch noch die option auf dem handy zu schieben usw aber unterwegs insteresieren mich eigentlich ja nur harte fakten und weniger die Graphik.
    Zuhause auf dem Tablet bzw rechner ist das was anderes 😉 Da soll es auch gut ausschauen.
    Mal sehen wie ich das alles unter einen hut bringe.
    mfg Tom

    B 1 Reply Last reply
    0
    • Smilie108S Smilie108

      @blockmove
      Hi naja eingeschränkt hatte jetzt mal fast alles von vis2 umgezogen ohne Rücksicht auf das responsiv.
      Bin jetzt grad dabei das ganze entweder in einem 2.ten baum für handydarstellung zu Optimieren oder das bestehende reponsiv fähig machen.
      ABER Die graphiken usw kann man teilweise nicht einfach shrinken oder so weil damit unleserlich wird.
      Es gibt auch noch die option auf dem handy zu schieben usw aber unterwegs insteresieren mich eigentlich ja nur harte fakten und weniger die Graphik.
      Zuhause auf dem Tablet bzw rechner ist das was anderes 😉 Da soll es auch gut ausschauen.
      Mal sehen wie ich das alles unter einen hut bringe.
      mfg Tom

      B Offline
      B Offline
      Blockmove
      wrote on last edited by
      #753

      @smilie108

      Ich komme immer mehr zum Schluß, dass für mich ein 2. Baum für Handy weniger Aufwand ist als zu versuchen komplett auf responsive Design zu setzen.

      The difference beetween Man and Boys:
      The price of their toys 😀

      Smilie108S 1 Reply Last reply
      1
      • B Blockmove

        @smilie108

        Ich komme immer mehr zum Schluß, dass für mich ein 2. Baum für Handy weniger Aufwand ist als zu versuchen komplett auf responsive Design zu setzen.

        Smilie108S Offline
        Smilie108S Offline
        Smilie108
        wrote on last edited by
        #754

        @blockmove Denke inzwischen auch das dies ein der bessere weg ist

        B 1 Reply Last reply
        0
        • Smilie108S Smilie108

          @blockmove Denke inzwischen auch das dies ein der bessere weg ist

          B Offline
          B Offline
          Blockmove
          wrote on last edited by
          #755

          @smilie108 said in neue Visualisierung "webui" (alternative zu vis):

          @blockmove Denke inzwischen auch das dies ein der bessere weg ist

          Der bessere Weg vielleicht nicht …. Aber der einfachere.
          Ich hab bis jetzt ganz wenig absolute px-Positionen verwendet.
          Wenn ich mal Zeit hab, dann muss ich mir da mal echart in der Hinsicht genauer anschauen.

          The difference beetween Man and Boys:
          The price of their toys 😀

          1 Reply Last reply
          0
          • jogibear9988J jogibear9988

            Ich hab jetzt nicht die richtigen styles zusammenkopiert, will nur zeigen, du solltest zusammenfassen was sinn macht, wenn du bei 4 items in dem kalender die gleicehn styles setzt, macht es sinn die in eine gemeinsame klasse zu packen, und dem element mehrere klassen zuzuweisen.

            B Offline
            B Offline
            Blockmove
            wrote on last edited by
            #756

            @jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

            Ich hab jetzt nicht die richtigen styles zusammenkopiert, will nur zeigen, du solltest zusammenfassen was sinn macht, wenn du bei 4 items in dem kalender die gleicehn styles setzt, macht es sinn die in eine gemeinsame klasse zu packen, und dem element mehrere klassen zuzuweisen.

            Ich hab jetzt mal deinen Vorschlag umgesetzt und das css verschlankt.
            Auf dem Server liegt nun eine akutalisierte Variante.

            Hast du dir schon mal Gedanken gemacht über ein ui für bind-class?

            Viele Grüße und schönes WE!

            The difference beetween Man and Boys:
            The price of their toys 😀

            1 Reply Last reply
            0
            • jogibear9988J jogibear9988

              @blockmove said in neue Visualisierung "webui" (alternative zu vis):

              @jogibear9988

              Ja es gibt wirklich jede Menge.
              Gehört halt zu dem Umfeld von responsive Design.
              Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
              Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

              Container queries machen das ganze echt noch mal interessant. Da kannst du dann deine schriftgröße abhängig von deiner containergröße machen.
              (siehe bsp screen containerFontSize)

              ScroungerS Offline
              ScroungerS Offline
              Scrounger
              Developer
              wrote on last edited by Scrounger
              #757

              @jogibear9988
              Erstmal vielen Dank für den tollen Adapter 👍

              Bin fleißig seit beginn an mitzulesen, komme aber erst jetzt wirklich dazu mich damit mal zu beschäftigen und hab gleich mal ein paar Fragen:

              Ich würde genre die material-components-web (npm) verwenden, vor allem wegen der TopAppBar. Bekomme allerdings folgende Fehlermeldung - der scheint die Dateiendung nicht zu verwenden:
              8a4230fa-9e28-498b-92a3-68e5f7bafb70-grafik.png

              Wie kann ich nach dem Laden der runtime auf ein Element per Javascript zugreifen?
              Timeout, DOMContentLoaded, etc funktioniert nicht.
              Hab ein kleines Beispiel erstellt in deiner Demo erstellt scrounger/javascript_test

              <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

              <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

              jogibear9988J 1 Reply Last reply
              1
              • ScroungerS Scrounger

                @jogibear9988
                Erstmal vielen Dank für den tollen Adapter 👍

                Bin fleißig seit beginn an mitzulesen, komme aber erst jetzt wirklich dazu mich damit mal zu beschäftigen und hab gleich mal ein paar Fragen:

                Ich würde genre die material-components-web (npm) verwenden, vor allem wegen der TopAppBar. Bekomme allerdings folgende Fehlermeldung - der scheint die Dateiendung nicht zu verwenden:
                8a4230fa-9e28-498b-92a3-68e5f7bafb70-grafik.png

                Wie kann ich nach dem Laden der runtime auf ein Element per Javascript zugreifen?
                Timeout, DOMContentLoaded, etc funktioniert nicht.
                Hab ein kleines Beispiel erstellt in deiner Demo erstellt scrounger/javascript_test

                jogibear9988J Offline
                jogibear9988J Offline
                jogibear9988
                wrote on last edited by
                #758

                @scrounger said in neue Visualisierung "webui" (alternative zu vis):

                TopAppBar

                hab dir es angepasst...

                kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

                wenn dem npm package die Dateiendungen fehlen ist das fehlerhaft und muss dort gefixt werden.

                Check my ioBroker webui - a vis alternative
                see: https://github.com/iobroker-community-adapters/ioBroker.webui

                ScroungerS 1 Reply Last reply
                0
                • jogibear9988J Offline
                  jogibear9988J Offline
                  jogibear9988
                  wrote on last edited by
                  #759

                  hab ein issue dazu erstellt: https://github.com/material-components/material-components-web/issues/8174

                  Check my ioBroker webui - a vis alternative
                  see: https://github.com/iobroker-community-adapters/ioBroker.webui

                  1 Reply Last reply
                  1
                  • jogibear9988J jogibear9988

                    @scrounger said in neue Visualisierung "webui" (alternative zu vis):

                    TopAppBar

                    hab dir es angepasst...

                    kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

                    wenn dem npm package die Dateiendungen fehlen ist das fehlerhaft und muss dort gefixt werden.

                    ScroungerS Offline
                    ScroungerS Offline
                    Scrounger
                    Developer
                    wrote on last edited by
                    #760

                    @jogibear9988 sagte in neue Visualisierung "webui" (alternative zu vis):

                    kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

                    Bin ein Stück weiter, mdc laden geht schon, muss aber anders aufgerufen werden, siehe mein Beispiel scrounger/topAppBar in deiner Demo. Der navigation drawer geht jetzt auch schon.

                    Was ich aber nicht hinbekomme ist, dass die Icons geladen werden. Hast du ne idee?

                    <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                    <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                    jogibear9988J 1 Reply Last reply
                    0
                    • ScroungerS Scrounger

                      @jogibear9988 sagte in neue Visualisierung "webui" (alternative zu vis):

                      kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

                      Bin ein Stück weiter, mdc laden geht schon, muss aber anders aufgerufen werden, siehe mein Beispiel scrounger/topAppBar in deiner Demo. Der navigation drawer geht jetzt auch schon.

                      Was ich aber nicht hinbekomme ist, dass die Icons geladen werden. Hast du ne idee?

                      jogibear9988J Offline
                      jogibear9988J Offline
                      jogibear9988
                      wrote on last edited by
                      #761

                      @scrounger said in neue Visualisierung "webui" (alternative zu vis):

                      @jogibear9988 sagte in neue Visualisierung "webui" (alternative zu vis):

                      kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

                      Bin ein Stück weiter, mdc laden geht schon, muss aber anders aufgerufen werden, siehe mein Beispiel scrounger/topAppBar in deiner Demo. Der navigation drawer geht jetzt auch schon.

                      Was ich aber nicht hinbekomme ist, dass die Icons geladen werden. Hast du ne idee?

                      das script geht schon nicht, "mdc is not defined". Kp warum das so ist. Glaube fast das das package auf unpkg so nicht funktioniert.

                      Check my ioBroker webui - a vis alternative
                      see: https://github.com/iobroker-community-adapters/ioBroker.webui

                      ScroungerS 1 Reply Last reply
                      0
                      • jogibear9988J jogibear9988

                        @scrounger said in neue Visualisierung "webui" (alternative zu vis):

                        @jogibear9988 sagte in neue Visualisierung "webui" (alternative zu vis):

                        kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

                        Bin ein Stück weiter, mdc laden geht schon, muss aber anders aufgerufen werden, siehe mein Beispiel scrounger/topAppBar in deiner Demo. Der navigation drawer geht jetzt auch schon.

                        Was ich aber nicht hinbekomme ist, dass die Icons geladen werden. Hast du ne idee?

                        das script geht schon nicht, "mdc is not defined". Kp warum das so ist. Glaube fast das das package auf unpkg so nicht funktioniert.

                        ScroungerS Offline
                        ScroungerS Offline
                        Scrounger
                        Developer
                        wrote on last edited by Scrounger
                        #762

                        @jogibear9988
                        Also in der Runtime kommt die Fehlermeldung mdc is not defined nicht.

                        Im Designer Preview kommt die Fehlermeldung.
                        Wenn ich noch const mdc = require('material-components-web'); verwende, da gehts auch im Designer Preview, allerdings meckert er dann in der Runtime mit error parsing javascript - screenviewer - scrounger/topAppBar ReferenceError: require is not defined

                        Das package von unpkg funktioniert bei mir an anderer Stelle einwandfrei.

                        <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                        <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                        jogibear9988J 1 Reply Last reply
                        0
                        • ScroungerS Scrounger

                          @jogibear9988
                          Also in der Runtime kommt die Fehlermeldung mdc is not defined nicht.

                          Im Designer Preview kommt die Fehlermeldung.
                          Wenn ich noch const mdc = require('material-components-web'); verwende, da gehts auch im Designer Preview, allerdings meckert er dann in der Runtime mit error parsing javascript - screenviewer - scrounger/topAppBar ReferenceError: require is not defined

                          Das package von unpkg funktioniert bei mir an anderer Stelle einwandfrei.

                          jogibear9988J Offline
                          jogibear9988J Offline
                          jogibear9988
                          wrote on last edited by
                          #763

                          @scrounger

                          require kannst nicht nutzen...

                          Dann hängt das ganze mit "monaco" editor zusammen, der vscode editor den ich im designer nutze.
                          Der definiert ein require, dadurch wird das paket falsch geladen.
                          Ich hoffe das es bald ein ESM paket von monaco gibt, aber der issue ist schon ewig offen...

                          Check my ioBroker webui - a vis alternative
                          see: https://github.com/iobroker-community-adapters/ioBroker.webui

                          ScroungerS 1 Reply Last reply
                          0
                          • jogibear9988J jogibear9988

                            @scrounger

                            require kannst nicht nutzen...

                            Dann hängt das ganze mit "monaco" editor zusammen, der vscode editor den ich im designer nutze.
                            Der definiert ein require, dadurch wird das paket falsch geladen.
                            Ich hoffe das es bald ein ESM paket von monaco gibt, aber der issue ist schon ewig offen...

                            ScroungerS Offline
                            ScroungerS Offline
                            Scrounger
                            Developer
                            wrote on last edited by
                            #764

                            @jogibear9988
                            Kann ich irgendwie per Javascript prüfen ob ich im Designer oder runtime bin?

                            Wie bzw wo kann man globale Skripte anlegen - unter 'global/script' geht kein Fenster auf?

                            Wie kann ich im globalen Script auf die Dom lemente zu greifen?

                            <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                            <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                            jogibear9988J 1 Reply Last reply
                            0
                            • ScroungerS Scrounger

                              @jogibear9988
                              Kann ich irgendwie per Javascript prüfen ob ich im Designer oder runtime bin?

                              Wie bzw wo kann man globale Skripte anlegen - unter 'global/script' geht kein Fenster auf?

                              Wie kann ich im globalen Script auf die Dom lemente zu greifen?

                              jogibear9988J Offline
                              jogibear9988J Offline
                              jogibear9988
                              wrote on last edited by
                              #765

                              @scrounger said in neue Visualisierung "webui" (alternative zu vis):

                              @jogibear9988
                              Kann ich irgendwie per Javascript prüfen ob ich im Designer oder runtime bin?
                              --> im moment nicht, wozu brauchst das?

                              Wie bzw wo kann man globale Skripte anlegen - unter 'global/script' geht kein Fenster auf?
                              --> ist noch nicht umgesetzt, hab ich mal voreillig reingebaut

                              Wie kann ich im globalen Script auf die Dom lemente zu greifen?
                              --> wozu aus einem globalen script, dafür sind die scripte der views. Du kannst das schon dann musst aber die ganzen elemente & shadowdoms durchlaufen

                              Check my ioBroker webui - a vis alternative
                              see: https://github.com/iobroker-community-adapters/ioBroker.webui

                              1 Reply Last reply
                              0
                              • jogibear9988J Offline
                                jogibear9988J Offline
                                jogibear9988
                                wrote on last edited by
                                #766

                                Im designer könnt ihr nun fenster in ein extra browser fenster "abdocken":

                                c5df5255-6b3e-412e-acca-299810f92fd5-image.png

                                Braucht bestimmt noch bisschen feinschliff, aber vlt. kann es ja schon jemand gebrauchen

                                Check my ioBroker webui - a vis alternative
                                see: https://github.com/iobroker-community-adapters/ioBroker.webui

                                Smilie108S 1 Reply Last reply
                                0
                                • jogibear9988J jogibear9988

                                  Im designer könnt ihr nun fenster in ein extra browser fenster "abdocken":

                                  c5df5255-6b3e-412e-acca-299810f92fd5-image.png

                                  Braucht bestimmt noch bisschen feinschliff, aber vlt. kann es ja schon jemand gebrauchen

                                  Smilie108S Offline
                                  Smilie108S Offline
                                  Smilie108
                                  wrote on last edited by
                                  #767

                                  @jogibear9988
                                  Bei mir kommt wenn ich das mache
                                  Error occured, check console
                                  NotFoundError: Node.removeChild: The node to be removed is not a child of this node und ein leeres fenster 😉

                                  jogibear9988J 2 Replies Last reply
                                  0
                                  • Smilie108S Smilie108

                                    @jogibear9988
                                    Bei mir kommt wenn ich das mache
                                    Error occured, check console
                                    NotFoundError: Node.removeChild: The node to be removed is not a child of this node und ein leeres fenster 😉

                                    jogibear9988J Offline
                                    jogibear9988J Offline
                                    jogibear9988
                                    wrote on last edited by
                                    #768

                                    @smilie108 said in neue Visualisierung "webui" (alternative zu vis):

                                    @jogibear9988
                                    Bei mir kommt wenn ich das mache
                                    Error occured, check console
                                    NotFoundError: Node.removeChild: The node to be removed is not a child of this node und ein leeres fenster 😉

                                    ein fehler kommt bei mir auch noch, nach dem schaue ich noch,
                                    aber das abdocken geht:

                                    936463e1-5b54-49cd-88d6-14de5bde673c-image.png

                                    Check my ioBroker webui - a vis alternative
                                    see: https://github.com/iobroker-community-adapters/ioBroker.webui

                                    1 Reply Last reply
                                    0
                                    • Smilie108S Smilie108

                                      @jogibear9988
                                      Bei mir kommt wenn ich das mache
                                      Error occured, check console
                                      NotFoundError: Node.removeChild: The node to be removed is not a child of this node und ein leeres fenster 😉

                                      jogibear9988J Offline
                                      jogibear9988J Offline
                                      jogibear9988
                                      wrote on last edited by jogibear9988
                                      #769

                                      @smilie108

                                      welcher browser? firefox geht bei mir auch nicht ;-). chrome & safari läuft

                                      Check my ioBroker webui - a vis alternative
                                      see: https://github.com/iobroker-community-adapters/ioBroker.webui

                                      jogibear9988J 1 Reply Last reply
                                      0
                                      • jogibear9988J jogibear9988

                                        @smilie108

                                        welcher browser? firefox geht bei mir auch nicht ;-). chrome & safari läuft

                                        jogibear9988J Offline
                                        jogibear9988J Offline
                                        jogibear9988
                                        wrote on last edited by
                                        #770

                                        @jogibear9988

                                        in firefox ist das wohl ein bug:

                                        https://bugzilla.mozilla.org/show_bug.cgi?id=1712007
                                        https://bugzilla.mozilla.org/show_bug.cgi?id=1502814

                                        Check my ioBroker webui - a vis alternative
                                        see: https://github.com/iobroker-community-adapters/ioBroker.webui

                                        Smilie108S 1 Reply Last reply
                                        0
                                        • jogibear9988J jogibear9988

                                          @jogibear9988

                                          in firefox ist das wohl ein bug:

                                          https://bugzilla.mozilla.org/show_bug.cgi?id=1712007
                                          https://bugzilla.mozilla.org/show_bug.cgi?id=1502814

                                          Smilie108S Offline
                                          Smilie108S Offline
                                          Smilie108
                                          wrote on last edited by
                                          #771

                                          @jogibear9988 jop arbeite nur mit firefox chrom mag ich nicht kommt von google sorry 😉 und safari is mac mag ich auc nicht ist apple sorry 😉

                                          jogibear9988J 2 Replies 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

                                          639

                                          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