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

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

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

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

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

Scheduled Pinned Locked Moved Visualisierung
1.1k Posts 21 Posters 347.8k 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.
  • jogibear9988J jogibear9988

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

    First of all - thank you for a very nice project (and please do not attack me for using English in this part of the forum).
    Making any visualization "close to pure HTML" is, for me, a "hit or miss" (for me - more than "great").
    I keep my fingers crossed and try to explore the possibilities of webui.
    And a question from a "webui beginner" - what is the approach to showing/hiding elements depending on the values ​​of variables/points or expressions?
    I am currently try to working on showing the operating status of the home heating system using webui. And depending on the selected configuration, certain elements should appear (or hide) on the screen (e.g. subsequent heating circuits).

    you could create a binding on the css property display, and set it none or your desired value.
    Or you could bind the visibility css property.

    look in: http://129.159.205.3:8082/webui/index.html at page "visibilitysample"
    769fe1d1-6679-474e-9340-b20bb91443e7-image.png

    M Offline
    M Offline
    mguc
    wrote on last edited by
    #681

    @jogibear9988 Thank you very much for your quick reply.

    1 Reply Last reply
    0
    • Smilie108S Smilie108

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

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

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

      @jogibear9988
      Hi habe ein anderes Problem bekommen.
      Seit 1.0.36 funktioniert bei den input feldern teilweise die vorschau nicht mehr.

      Kann ich bestätigen, ist bei mir auch so.

      sollte gefixt sein

      Is das build schon fertig ? latest bring noch 1.0.43

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

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

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

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

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

      @jogibear9988
      Hi habe ein anderes Problem bekommen.
      Seit 1.0.36 funktioniert bei den input feldern teilweise die vorschau nicht mehr.

      Kann ich bestätigen, ist bei mir auch so.

      sollte gefixt sein

      Is das build schon fertig ? latest bring noch 1.0.43

      github hat über 1h gebraucht

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

      Smilie108S 1 Reply Last reply
      1
      • jogibear9988J jogibear9988

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

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

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

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

        @jogibear9988
        Hi habe ein anderes Problem bekommen.
        Seit 1.0.36 funktioniert bei den input feldern teilweise die vorschau nicht mehr.

        Kann ich bestätigen, ist bei mir auch so.

        sollte gefixt sein

        Is das build schon fertig ? latest bring noch 1.0.43

        github hat über 1h gebraucht

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

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

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

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

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

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

        @jogibear9988
        Hi habe ein anderes Problem bekommen.
        Seit 1.0.36 funktioniert bei den input feldern teilweise die vorschau nicht mehr.

        Kann ich bestätigen, ist bei mir auch so.

        sollte gefixt sein

        Is das build schon fertig ? latest bring noch 1.0.43

        github hat über 1h gebraucht

        Jepp sorry jetzt gerade gegangen 😉 und jetzt gehts wieder
        Danke Jochen

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mguc
          wrote on last edited by
          #684

          The "rename" option is missing in the menu for folders - as is the case with screens.
          a18b17e1-82cd-42c8-8f83-695fcfdc748d-image.png

          jogibear9988J 1 Reply Last reply
          0
          • M mguc

            The "rename" option is missing in the menu for folders - as is the case with screens.
            a18b17e1-82cd-42c8-8f83-695fcfdc748d-image.png

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

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

            The "rename" option is missing in the menu for folders - as is the case with screens.
            a18b17e1-82cd-42c8-8f83-695fcfdc748d-image.png

            yeah, not yet implemented.
            will do

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

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

              seems ioBroker at the moment has no api to rename a folder.
              There is first a update on iob side needed

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

              1 Reply Last reply
              0
              • jogibear9988J jogibear9988

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

                The "rename" option is missing in the menu for folders - as is the case with screens.
                a18b17e1-82cd-42c8-8f83-695fcfdc748d-image.png

                yeah, not yet implemented.
                will do

                XsevX Offline
                XsevX Offline
                Xsev
                wrote on last edited by
                #687

                @jogibear9988 Hallo, ich würde mal gerne wissen, ob es schon Erfahrungswerte gibt bei dieser Visualisierung, in Bezug auf "Energiesettings" bei Tablets. Genauer gesagt, wie verhält sich webui beim ausschalten des Monitors. In Vis führt das auf manchen Geräten immer zum nervigen reconnect. Ich würde mir eine Visualisierung wünschen, welche die Seite behält und nur die Daten auf der Seite aktualisiert ohne komplett neu laden zu müssen. Kannst du diesbezüglich etwas sagen?

                jogibear9988J B 2 Replies Last reply
                0
                • XsevX Xsev

                  @jogibear9988 Hallo, ich würde mal gerne wissen, ob es schon Erfahrungswerte gibt bei dieser Visualisierung, in Bezug auf "Energiesettings" bei Tablets. Genauer gesagt, wie verhält sich webui beim ausschalten des Monitors. In Vis führt das auf manchen Geräten immer zum nervigen reconnect. Ich würde mir eine Visualisierung wünschen, welche die Seite behält und nur die Daten auf der Seite aktualisiert ohne komplett neu laden zu müssen. Kannst du diesbezüglich etwas sagen?

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

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

                  @jogibear9988 Hallo, ich würde mal gerne wissen, ob es schon Erfahrungswerte gibt bei dieser Visualisierung, in Bezug auf "Energiesettings" bei Tablets. Genauer gesagt, wie verhält sich webui beim ausschalten des Monitors. In Vis führt das auf manchen Geräten immer zum nervigen reconnect. Ich würde mir eine Visualisierung wünschen, welche die Seite behält und nur die Daten auf der Seite aktualisiert ohne komplett neu laden zu müssen. Kannst du diesbezüglich etwas sagen?

                  Also ich habe keinen reload implementiert. Ich hoffe das sie sich weiter aktualisiert. Ich nutze den socketclient von IOB zur kommunikation, hoffe der hat ein reconnect drinnen. Aber wenn etwas nicht geht, dann schau ich es mir an.
                  Ich könnte mir vorstellen das ich mir vlt. die abonnierten Signale merken muss, aber vlt. gehts ja auch

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

                  XsevX 1 Reply Last reply
                  0
                  • jogibear9988J jogibear9988

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

                    @jogibear9988 Hallo, ich würde mal gerne wissen, ob es schon Erfahrungswerte gibt bei dieser Visualisierung, in Bezug auf "Energiesettings" bei Tablets. Genauer gesagt, wie verhält sich webui beim ausschalten des Monitors. In Vis führt das auf manchen Geräten immer zum nervigen reconnect. Ich würde mir eine Visualisierung wünschen, welche die Seite behält und nur die Daten auf der Seite aktualisiert ohne komplett neu laden zu müssen. Kannst du diesbezüglich etwas sagen?

                    Also ich habe keinen reload implementiert. Ich hoffe das sie sich weiter aktualisiert. Ich nutze den socketclient von IOB zur kommunikation, hoffe der hat ein reconnect drinnen. Aber wenn etwas nicht geht, dann schau ich es mir an.
                    Ich könnte mir vorstellen das ich mir vlt. die abonnierten Signale merken muss, aber vlt. gehts ja auch

                    XsevX Offline
                    XsevX Offline
                    Xsev
                    wrote on last edited by
                    #689

                    @jogibear9988 Danke für deine Info.

                    1 Reply Last reply
                    0
                    • XsevX Xsev

                      @jogibear9988 Hallo, ich würde mal gerne wissen, ob es schon Erfahrungswerte gibt bei dieser Visualisierung, in Bezug auf "Energiesettings" bei Tablets. Genauer gesagt, wie verhält sich webui beim ausschalten des Monitors. In Vis führt das auf manchen Geräten immer zum nervigen reconnect. Ich würde mir eine Visualisierung wünschen, welche die Seite behält und nur die Daten auf der Seite aktualisiert ohne komplett neu laden zu müssen. Kannst du diesbezüglich etwas sagen?

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

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

                      @jogibear9988 Hallo, ich würde mal gerne wissen, ob es schon Erfahrungswerte gibt bei dieser Visualisierung, in Bezug auf "Energiesettings" bei Tablets. Genauer gesagt, wie verhält sich webui beim ausschalten des Monitors. In Vis führt das auf manchen Geräten immer zum nervigen reconnect. Ich würde mir eine Visualisierung wünschen, welche die Seite behält und nur die Daten auf der Seite aktualisiert ohne komplett neu laden zu müssen. Kannst du diesbezüglich etwas sagen?

                      Ein Reload mit Countdown wie bei vis ist mir bei webui noch nicht untergekommen.
                      Ich hab einige Seiten mit Daten die sich häufiger aktualisieren und damit ist mir so ein Verhalten wie bei vis nocht nicht aufgefallen. Ob es aber immer funktioniert, will ich nicht mit Sicherheit sagen. Zumindest unter Android und Fullybrowser funktioniert das Aufwecken.

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

                      XsevX 1 Reply Last reply
                      0
                      • B Blockmove

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

                        @jogibear9988 Hallo, ich würde mal gerne wissen, ob es schon Erfahrungswerte gibt bei dieser Visualisierung, in Bezug auf "Energiesettings" bei Tablets. Genauer gesagt, wie verhält sich webui beim ausschalten des Monitors. In Vis führt das auf manchen Geräten immer zum nervigen reconnect. Ich würde mir eine Visualisierung wünschen, welche die Seite behält und nur die Daten auf der Seite aktualisiert ohne komplett neu laden zu müssen. Kannst du diesbezüglich etwas sagen?

                        Ein Reload mit Countdown wie bei vis ist mir bei webui noch nicht untergekommen.
                        Ich hab einige Seiten mit Daten die sich häufiger aktualisieren und damit ist mir so ein Verhalten wie bei vis nocht nicht aufgefallen. Ob es aber immer funktioniert, will ich nicht mit Sicherheit sagen. Zumindest unter Android und Fullybrowser funktioniert das Aufwecken.

                        XsevX Offline
                        XsevX Offline
                        Xsev
                        wrote on last edited by Xsev
                        #691

                        @blockmove

                        Zumindest unter Android und Fullybrowser funktioniert das Aufwecken.

                        Das wäre spitze, dass auch meine Combi. Danke für deine Info!

                        1 Reply Last reply
                        0
                        • wendy2702W Online
                          wendy2702W Online
                          wendy2702
                          wrote on last edited by
                          #692

                          Hi,

                          bevor ich anfange WebUi zu probieren eine Frage.

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

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

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

                          jogibear9988J 2 Replies Last reply
                          0
                          • wendy2702W wendy2702

                            Hi,

                            bevor ich anfange WebUi zu probieren eine Frage.

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

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

                            @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.

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

                            wendy2702W 1 Reply Last reply
                            0
                            • wendy2702W wendy2702

                              Hi,

                              bevor ich anfange WebUi zu probieren eine Frage.

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

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

                              @wendy2702

                              hab mal das bsp übernommen:

                              https://www.youtube.com/watch?v=68O6eOGAGqA

                              http://129.159.205.3:8082/webui/index.html
                              unter "responsive/sample1"

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

                              1 Reply Last reply
                              0
                              • 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 Online
                                wendy2702W Online
                                wendy2702
                                wrote on last edited by 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 Reply Last reply
                                0
                                • jogibear9988J Offline
                                  jogibear9988J Offline
                                  jogibear9988
                                  wrote on last edited by
                                  #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 Reply Last reply
                                  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
                                    wrote on last edited by
                                    #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 Reply Last reply
                                    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
                                      wrote on last edited by
                                      #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 Reply Last reply
                                      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
                                        wrote on last edited by
                                        #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 Reply Last reply
                                        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
                                          wrote on last edited by
                                          #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 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

                                          325

                                          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