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. 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.5k

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
1.1k Beiträge 21 Kommentatoren 349.8k Aufrufe 18 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.
  • 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
    schrieb am zuletzt editiert von Scrounger
    #757

    @jogibear9988
    Erstmal vielen Dank für den tollen Adapter :+1:

    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 Antwort Letzte Antwort
    1
    • ScroungerS Scrounger

      @jogibear9988
      Erstmal vielen Dank für den tollen Adapter :+1:

      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
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      0
      • jogibear9988J Offline
        jogibear9988J Offline
        jogibear9988
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    0
                    • jogibear9988J Offline
                      jogibear9988J Offline
                      jogibear9988
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #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 Antworten Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                            0
                            • jogibear9988J jogibear9988

                              @smilie108

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

                              jogibear9988J Offline
                              jogibear9988J Offline
                              jogibear9988
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              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
                                schrieb am zuletzt editiert von
                                #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 Antworten Letzte Antwort
                                0
                                • Smilie108S Smilie108

                                  @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 Offline
                                  jogibear9988J Offline
                                  jogibear9988
                                  schrieb am zuletzt editiert von
                                  #772

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

                                  @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 ;)

                                  ja, das feature ist leider in firefox so nicht nutzbar... vlt. wird der bug ja irgendwann gefixt.

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

                                  1 Antwort Letzte Antwort
                                  0
                                  • Smilie108S Smilie108

                                    @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 Offline
                                    jogibear9988J Offline
                                    jogibear9988
                                    schrieb am zuletzt editiert von
                                    #773

                                    @smilie108

                                    auch firefox arbeitet heftig mit google zusammen, sonst hätten die so gut wie kein geld ;-)
                                    Hat schon gründe warum google dort die default suche ist. Und es gibt ja noch andere "chromium" browser, ohne das ganzen google tracking. Aber firefox ist ebn lichtjahre hinterher (und auch um welten langsamer)

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

                                    Smilie108S 1 Antwort Letzte Antwort
                                    0
                                    • jogibear9988J jogibear9988

                                      @smilie108

                                      auch firefox arbeitet heftig mit google zusammen, sonst hätten die so gut wie kein geld ;-)
                                      Hat schon gründe warum google dort die default suche ist. Und es gibt ja noch andere "chromium" browser, ohne das ganzen google tracking. Aber firefox ist ebn lichtjahre hinterher (und auch um welten langsamer)

                                      Smilie108S Offline
                                      Smilie108S Offline
                                      Smilie108
                                      schrieb am zuletzt editiert von
                                      #774

                                      @jogibear9988 jap das mag sein aber ich bin in der beziehung etwas naja "stur" habe mir firefox so eingerichtet das es auf allen rechnern und allen pc die ich verwende gelich ist und sich auch gegenseitig updated wenn ich was änder das ganze zu übersiedeln oder überhaupt 2gleisig zu machen ist ein heiden aufwand und bin bis jetzt mit firefox eigentlich immer sehr gut unterwegs gewesen.
                                      Wie soll ich das sagen bin halt eingefahren naja dann is es halt so wenn ich das fenster normal undock mache dann geht es ja auch ;) ( ohne den Menuepunkt ;)

                                      1 Antwort Letzte Antwort
                                      1
                                      • jogibear9988J Offline
                                        jogibear9988J Offline
                                        jogibear9988
                                        schrieb am zuletzt editiert von
                                        #775

                                        So, hab mal wieder ein bisschen was gemacht.

                                        Das Text Edit Werkzeug sollte nun gehn (ja kann im moment nur Fett/Kursiv/Italic), aber da kann man nun leicht mehr einbauen. Vorher war es fast nicht nutzbar.

                                        Auch texte editieren durch Doppelklick sollte nun besser Funktionieren.

                                        Und sonst wie immer, hier und da ein kleiner fix. Bspw. werden gedrehte Container nun richtig ausgegraut...

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

                                        Smilie108S 1 Antwort Letzte Antwort
                                        2
                                        • jogibear9988J jogibear9988

                                          So, hab mal wieder ein bisschen was gemacht.

                                          Das Text Edit Werkzeug sollte nun gehn (ja kann im moment nur Fett/Kursiv/Italic), aber da kann man nun leicht mehr einbauen. Vorher war es fast nicht nutzbar.

                                          Auch texte editieren durch Doppelklick sollte nun besser Funktionieren.

                                          Und sonst wie immer, hier und da ein kleiner fix. Bspw. werden gedrehte Container nun richtig ausgegraut...

                                          Smilie108S Offline
                                          Smilie108S Offline
                                          Smilie108
                                          schrieb am zuletzt editiert von
                                          #776

                                          @jogibear9988 Danke für deinen einsatz

                                          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

                                          319

                                          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