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

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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
1.1k Beiträge 21 Kommentatoren 348.3k 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

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

    Hi,

    bevor ich anfange WebUi zu probieren eine Frage.

    Ist ein volles Responsive Design möglich? Auch ohne mega HTML Programmier Kenntnisse?

    Keine Ahnung wieviel Kenntnisse du dazu brauchst bzw hast.
    Aber heutzutage kann dir chat-gpt dabei viel helfen.
    Am besten du nutzt ein css grid, mit named areas und ordnest diese über mediaqueries je nach Auflösung an.

    wendy2702W Offline
    wendy2702W Offline
    wendy2702
    schrieb am zuletzt editiert von wendy2702
    #695

    @jogibear9988 keine Kenntnisse und anhand der Begriffe die du verwendet hast schon entschieden das der Adapter wohl nichts für mich ist.

    Edit: mein Beitrag hat sich mit deinem überschnitten.

    Schaue mir das morgen Abend im Hotel mal an.

    Danke!

    Bitte keine Fragen per PN, die gehören ins Forum!

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

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

      Der Vorteil bei meiner Visualiserung ist, das es einfach HTML & CSS ist, das versteht ChatGpt:

      71497fe5-2df5-4280-95a4-8b79a822f1de-image.png

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

      Smilie108S 1 Antwort Letzte Antwort
      0
      • jogibear9988J jogibear9988

        Der Vorteil bei meiner Visualiserung ist, das es einfach HTML & CSS ist, das versteht ChatGpt:

        71497fe5-2df5-4280-95a4-8b79a822f1de-image.png

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

        @jogibear9988
        Kannst du dir wenn du mal zeit hast am test unter smilie108 den sample 2 ansehen und mir sagen was ich machen muss das das javascript richtig ist ?

        Danke im voraus ;)

        jogibear9988J 1 Antwort Letzte Antwort
        0
        • Smilie108S Smilie108

          @jogibear9988
          Kannst du dir wenn du mal zeit hast am test unter smilie108 den sample 2 ansehen und mir sagen was ich machen muss das das javascript richtig ist ?

          Danke im voraus ;)

          jogibear9988J Offline
          jogibear9988J Offline
          jogibear9988
          schrieb am zuletzt editiert von
          #698

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

          @jogibear9988
          Kannst du dir wenn du mal zeit hast am test unter smilie108 den sample 2 ansehen und mir sagen was ich machen muss das das javascript richtig ist ?

          Danke im voraus ;)

          so sollte es gehen:

            /**
            
            * @param {BaseScreenViewerAndControl} instance
            
            */
            
            export function init(instance) {
            
                const toggleMenuButton = instance.shadowRoot.querySelector('.toggle-menu');
            
                const sidebar = instance.shadowRoot.querySelector('.sidebar');
            
                //debugger;
            
                toggleMenuButton.addEventListener('click', function() {
            
                  sidebar.classList.toggle('open');
            
                });
            
            }
          

          aber auch mit blockly:
          (nee okay, damit geht es nicht, da fehlt das toggle... da baue ich was, muss überlegen)

          4fd3fd66-31e2-43ae-9a95-1cdc21399852-image.png

          aber mit javascript direkt am event:
          162d90c3-75ec-4395-8637-4a8494da1cfc-image.png
          75e02448-d9d7-4410-a494-04ff01ae9aea-image.png

          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 said in neue Visualisierung "webui" (alternative zu vis):

            @jogibear9988
            Kannst du dir wenn du mal zeit hast am test unter smilie108 den sample 2 ansehen und mir sagen was ich machen muss das das javascript richtig ist ?

            Danke im voraus ;)

            so sollte es gehen:

              /**
              
              * @param {BaseScreenViewerAndControl} instance
              
              */
              
              export function init(instance) {
              
                  const toggleMenuButton = instance.shadowRoot.querySelector('.toggle-menu');
              
                  const sidebar = instance.shadowRoot.querySelector('.sidebar');
              
                  //debugger;
              
                  toggleMenuButton.addEventListener('click', function() {
              
                    sidebar.classList.toggle('open');
              
                  });
              
              }
            

            aber auch mit blockly:
            (nee okay, damit geht es nicht, da fehlt das toggle... da baue ich was, muss überlegen)

            4fd3fd66-31e2-43ae-9a95-1cdc21399852-image.png

            aber mit javascript direkt am event:
            162d90c3-75ec-4395-8637-4a8494da1cfc-image.png
            75e02448-d9d7-4410-a494-04ff01ae9aea-image.png

            jogibear9988J Offline
            jogibear9988J Offline
            jogibear9988
            schrieb am zuletzt editiert von
            #699

            @jogibear9988

            in den scripten gibt es noch 2 globale variablen IOB und RUNTIME, wenn du z.B. einen screen öffnen willst, signale steuern usw....

            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 den scripten gibt es noch 2 globale variablen IOB und RUNTIME, wenn du z.B. einen screen öffnen willst, signale steuern usw....

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

              @jogibear9988
              mhm bist du dir da sicher ? weil eigentlich sollte er dann das menue einfahren geht aber nicht. can es sein das das sidebar.classlist.toggle('open') nicht greift ?

              Sorry aber so manche verknüpfung ist mir noch nicht ganz klar ;

              Danke

              jogibear9988J 1 Antwort Letzte Antwort
              0
              • Smilie108S Smilie108

                @jogibear9988
                mhm bist du dir da sicher ? weil eigentlich sollte er dann das menue einfahren geht aber nicht. can es sein das das sidebar.classlist.toggle('open') nicht greift ?

                Sorry aber so manche verknüpfung ist mir noch nicht ganz klar ;

                Danke

                jogibear9988J Offline
                jogibear9988J Offline
                jogibear9988
                schrieb am zuletzt editiert von
                #701

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

                @jogibear9988
                mhm bist du dir da sicher ? weil eigentlich sollte er dann das menue einfahren geht aber nicht. can es sein das das sidebar.classlist.toggle('open') nicht greift ?

                Sorry aber so manche verknüpfung ist mir noch nicht ganz klar ;

                Danke

                ich bin sicher das das open mit dem code gesezt wird, was es bewirkt bin ich nicht sicher...
                Dein ganzer html code ist ja falsch, da ist body, html und ein script tag enthalten.

                ich räum mal auf...
                bei mir geht der click nun, wenn ich deine mediaquery anpasse (die größe darin).

                Eine Media query bezieht sich immer auf den ganzen browser, nicht auf die größe des kleinen designer fensters. Das ist html standard da kann ich nix machen.

                musst mal im sampe "responsive/simple" schauen, da hab ich ein beispiel für eine "container-query", die geht dann auch in dem designer fenster richtig.

                wenn du html&css code in webui kopierst, musst du es schon ein bisschen anpassen. body & html tags sollten raus, im css code musst dann auch die Verweise von body&html ändern (meist passt es wenn du diese durch :host ersetzt, aber das kann man nicht pauschal sagen.
                Hängt einfach damit zusammen, das jeder webui screen seinen content in einem shadowdom rendert, dadurch kannst du ja auch mehrere darstellen.

                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 said in neue Visualisierung "webui" (alternative zu vis):

                  @jogibear9988
                  mhm bist du dir da sicher ? weil eigentlich sollte er dann das menue einfahren geht aber nicht. can es sein das das sidebar.classlist.toggle('open') nicht greift ?

                  Sorry aber so manche verknüpfung ist mir noch nicht ganz klar ;

                  Danke

                  ich bin sicher das das open mit dem code gesezt wird, was es bewirkt bin ich nicht sicher...
                  Dein ganzer html code ist ja falsch, da ist body, html und ein script tag enthalten.

                  ich räum mal auf...
                  bei mir geht der click nun, wenn ich deine mediaquery anpasse (die größe darin).

                  Eine Media query bezieht sich immer auf den ganzen browser, nicht auf die größe des kleinen designer fensters. Das ist html standard da kann ich nix machen.

                  musst mal im sampe "responsive/simple" schauen, da hab ich ein beispiel für eine "container-query", die geht dann auch in dem designer fenster richtig.

                  wenn du html&css code in webui kopierst, musst du es schon ein bisschen anpassen. body & html tags sollten raus, im css code musst dann auch die Verweise von body&html ändern (meist passt es wenn du diese durch :host ersetzt, aber das kann man nicht pauschal sagen.
                  Hängt einfach damit zusammen, das jeder webui screen seinen content in einem shadowdom rendert, dadurch kannst du ja auch mehrere darstellen.

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

                  @jogibear9988
                  Ok danke für die informationen ;) habe das mal eben wie von dir oben beschrieben mit dem chatgpt probiert und dachte das passt dann schon
                  Sorry
                  Aber danke

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

                    bsw in deinem screen:

                    * {
                        container-type: inline-size;
                    }
                    

                    dadurch wird jedes element zu einem container für eine container query. sicher nicht gewollt, oder?

                    .dashboard {
                      height: 100vh;
                    }
                    

                    das element mit der klasse "dashboard" wird 100% der viewport höhe groß. ja kann man so machen, wenn man den screen nun aber in einen anderen packt, ist dieser 100% so groß wie das browser fenster.
                    Ich würde da einfach ":host {height: 100% }" schreiben. dann ist der screen so groß wie sein container, wenn er der äßerste ist passt das ja auch

                    ich hab mal noch mehr angepasst...

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

                    Smilie108S 1 Antwort Letzte Antwort
                    0
                    • jogibear9988J jogibear9988

                      bsw in deinem screen:

                      * {
                          container-type: inline-size;
                      }
                      

                      dadurch wird jedes element zu einem container für eine container query. sicher nicht gewollt, oder?

                      .dashboard {
                        height: 100vh;
                      }
                      

                      das element mit der klasse "dashboard" wird 100% der viewport höhe groß. ja kann man so machen, wenn man den screen nun aber in einen anderen packt, ist dieser 100% so groß wie das browser fenster.
                      Ich würde da einfach ":host {height: 100% }" schreiben. dann ist der screen so groß wie sein container, wenn er der äßerste ist passt das ja auch

                      ich hab mal noch mehr angepasst...

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

                      @jogibear9988 Danke

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

                        im moment ist drag/drop im projektbaum kaputt: https://github.com/mar10/wunderbaum/issues/82

                        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
                          #706

                          drag drop geht wieder

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

                          1 Antwort Letzte Antwort
                          0
                          • Smilie108S Smilie108

                            @jogibear9988 Danke

                            jogibear9988J Offline
                            jogibear9988J Offline
                            jogibear9988
                            schrieb am zuletzt editiert von
                            #707

                            @smilie108
                            hab mal ein beispiel mit funktionierendem menü gemacht: http://129.159.205.3:8082/webui/runtime.html#screenName=responsive/sample2/sample2

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

                            Smilie108S 2 Antworten Letzte Antwort
                            1
                            • B Offline
                              B Offline
                              Blockmove
                              schrieb am zuletzt editiert von
                              #708

                              So alles Notwendige meiner ioBroker-Funktionen habe ich nun auf webui umgezogen 😊
                              vis 1 ist deinstalliert.
                              Alles was jetzt noch fehlt ist Zeit 😒
                              @jogibear9988 nochmal herzlichen Dank für deine tolle Arbeit!
                              Der Einstieg war wegen meiner fehlenden HTML-Kenntnissen zwar steiniger als bei vis oder vis 2, aber für mich hat sich der Umstieg gelohnt.

                              Was ich die letzten Tage erst entdeckt habe, ist wie nützlich chatgpt bei html und css ist.

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

                              wendy2702W 1 Antwort Letzte Antwort
                              0
                              • B Blockmove

                                So alles Notwendige meiner ioBroker-Funktionen habe ich nun auf webui umgezogen 😊
                                vis 1 ist deinstalliert.
                                Alles was jetzt noch fehlt ist Zeit 😒
                                @jogibear9988 nochmal herzlichen Dank für deine tolle Arbeit!
                                Der Einstieg war wegen meiner fehlenden HTML-Kenntnissen zwar steiniger als bei vis oder vis 2, aber für mich hat sich der Umstieg gelohnt.

                                Was ich die letzten Tage erst entdeckt habe, ist wie nützlich chatgpt bei html und css ist.

                                wendy2702W Offline
                                wendy2702W Offline
                                wendy2702
                                schrieb am zuletzt editiert von
                                #709

                                @blockmove Kannst du mal Screenshots oder so zeigen?

                                Bin ja auch blutiger Anfänger mit WebUI und würde gerne mal sehen wie es aussehen könnte.

                                Bitte keine Fragen per PN, die gehören ins Forum!

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

                                Smilie108S 1 Antwort Letzte Antwort
                                0
                                • wendy2702W wendy2702

                                  @blockmove Kannst du mal Screenshots oder so zeigen?

                                  Bin ja auch blutiger Anfänger mit WebUI und würde gerne mal sehen wie es aussehen könnte.

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

                                  @wendy2702
                                  Hi etwas ist zb schon hier unter
                                  Screenshots sind hier:
                                  https://forum.iobroker.net/topic/72159/zeigt-her-eure-webui-visualisierung
                                  Das sind meine Anfänge und weiteres ;)

                                  1 Antwort Letzte Antwort
                                  1
                                  • jogibear9988J jogibear9988

                                    @smilie108
                                    hab mal ein beispiel mit funktionierendem menü gemacht: http://129.159.205.3:8082/webui/runtime.html#screenName=responsive/sample2/sample2

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

                                    @jogibear9988 DAAANNNKKEEE ;) wollte heute abend schon schauen wie das geht ;) aber ist eh einfacher als ich dachte
                                    Nochmals vielen Dank für all deine Bmühungen.

                                    1 Antwort Letzte Antwort
                                    0
                                    • jogibear9988J jogibear9988

                                      @smilie108
                                      hab mal ein beispiel mit funktionierendem menü gemacht: http://129.159.205.3:8082/webui/runtime.html#screenName=responsive/sample2/sample2

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

                                      @jogibear9988
                                      muss und oder kann ich denn die toggle funktion mit dem menu anklicken auch nchmal setzen damit er das menue wieder ausblendet ? geht das auch über ein set property?

                                      jogibear9988J 1 Antwort Letzte Antwort
                                      0
                                      • Smilie108S Smilie108

                                        @jogibear9988
                                        muss und oder kann ich denn die toggle funktion mit dem menu anklicken auch nchmal setzen damit er das menue wieder ausblendet ? geht das auch über ein set property?

                                        jogibear9988J Offline
                                        jogibear9988J Offline
                                        jogibear9988
                                        schrieb am zuletzt editiert von
                                        #713

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

                                        @jogibear9988
                                        muss und oder kann ich denn die toggle funktion mit dem menu anklicken auch nchmal setzen damit er das menue wieder ausblendet ? geht das auch über ein set property?

                                        hä? versteh die frage nicht....
                                        Das menü wird doch schon ein/ausgeblendet

                                        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 said in neue Visualisierung "webui" (alternative zu vis):

                                          @jogibear9988
                                          muss und oder kann ich denn die toggle funktion mit dem menu anklicken auch nchmal setzen damit er das menue wieder ausblendet ? geht das auch über ein set property?

                                          hä? versteh die frage nicht....
                                          Das menü wird doch schon ein/ausgeblendet

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

                                          @jogibear9988
                                          HI ne wenn du bei dir am test den link anklickst läd er zwar die seite aber menue bleibt offen

                                          jogibear9988J 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

                                          805

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          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