Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. neue Visualisierung "webui" (alternative zu vis & vis-2)

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      Blockmove last edited by

      @jogibear9988

      Hallo Jochen,
      deine webui ist extrem mächtig und vielseitig.
      Ich versuche mir da gerade einen Überblick zu verschaffen.
      Deine Videos erleichtern den Einstieg schon mal richtig.
      Gerne mehr davon.

      Eine Frage:
      Wie baut in webui am sinnvollsten eine Navigation zwischen den einzelnen Screens?
      In der ioBroker Vis habe ich da bisher immer "View in Widget" genutzt.
      Gibt es in webui etwas vergleichbares oder was ist hier Best Practice?

      Viele Grüße
      Dieter

      1 Reply Last reply Reply Quote 0
      • jogibear9988
        jogibear9988 last edited by jogibear9988

        @blockmove
        In der Webui kannst du einen Screen in einen anderen Screen ziehen, das ist jederzeit möglich. D.h. man macht sich am besten einen Menü Screen, und bindet den an der gleichen Stelle in jedem anderen Screen ein.

        Ich habe aber auch schon an einem Menü widget etwas gearbeitet. (iobroker-webui-hab-panel-like-menu ist auch bei webui dabei)
        444b5ba0-7282-45c7-8ddc-db52e8970813-image.png

        Werde am besten ein kurzes Video dazu machen. Morgen vlt.

        jogibear9988 1 Reply Last reply Reply Quote 1
        • jogibear9988
          jogibear9988 @jogibear9988 last edited by

          2 neue videos:

          WebUI Part5 - Menü erzeugen
          https://www.youtube.com/watch?v=4zt7Wf4qFQg

          WebUI Part6 - HabPanel like Menü
          https://www.youtube.com/watch?v=eZ-24TN8s4o

          Wal 1 Reply Last reply Reply Quote 1
          • B
            Blockmove last edited by

            @jogibear9988

            Hoo Jochen

            Ich arbeite gerne mit einem Raster.
            Im Editor gibt's auch den Button "Snap to grid".
            Aber wo stellt man die Grid-Abstände ein?

            Viele Grüße
            Dieter

            jogibear9988 1 Reply Last reply Reply Quote 0
            • jogibear9988
              jogibear9988 @Blockmove last edited by

              @blockmove
              So wie es aussieht im Moment noch gar nirgends. Baue ich was dafür ein.
              Im moment baue ich aber die webui um, so das JQuery und JQuery-FancyTree rausfliegen, und durch den nachfolger Wunderbaum ersetzt werden. (In der Designer Komponente hab ich das schon gemacht). Wenn das durch ist gibts eine neue Version, mit dem fix für "SnapToGrid" und einstellbarem raster.

              B 1 Reply Last reply Reply Quote 2
              • B
                Blockmove @jogibear9988 last edited by

                @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                @blockmove
                So wie es aussieht im Moment noch gar nirgends. Baue ich was dafür ein.
                Im moment baue ich aber die webui um, so das JQuery und JQuery-FancyTree rausfliegen, und durch den nachfolger Wunderbaum ersetzt werden. (In der Designer Komponente hab ich das schon gemacht). Wenn das durch ist gibts eine neue Version, mit dem fix für "SnapToGrid" und einstellbarem raster.

                Ok. ich dachte schon, dass ich was übersehen hätte.
                Bin gerade etwas am Testen.
                Mein bisheriger Eindruck:
                webui ist wirklich extrem flexibel und leistungsfähig.
                Der Einstieg ist nicht so einfach wie bei VIS. Man muss sich etwas mehr mit Web-Techniken beschäftigen.
                Ich denk mal, dass ich nicht auf VIS2 umsteige, sondern auf webui.

                jogibear9988 1 Reply Last reply Reply Quote 0
                • jogibear9988
                  jogibear9988 @Blockmove last edited by

                  @blockmove
                  Mein Ziel ist ja auch, möglichst nah am HTML Code zu sein. Man kann ja auch jederzeit direkt auf HTML umschalten, was editieren und zurück oder im Splitview damit arbeiten.
                  Es ist eher der Plan noch Assistenten einzubauen, aber da muss man schauen wie Zeit vorhanden ist, und vlt. arbeitet ja der ein oder andere mal am Projekt mit.

                  Was auf jeden Fall noch nach Verbessserung schreit ist der css grid support.

                  Keine Ahnung ob es komplexer oder einfacher als Vis ist, Ich habe Vis nie wirklich genutzt. Was in Vis sicher einfacher ist, es gibt dort weitaus mehr Komponenten die schon etwas Funktionalität kapseln, die gibt es bei mir sicher nicht, aber man kann ja externe webcomponenten einbinden, und ich hoffe das durch die community mit der zeit auch noch CustomControls entstehen die da vlt. was bieten.

                  Was z.B. in Vis2 einfacher ist, dort klicke ich einen View an, und sage er soll im Menü dargestellt werden. Das geht recht einfach. Aber dadurch habe ich auch schon eine spezielle Menükomponente welche nur für diesen zweck funktioniert. So was gibt es in meiner eben UI nicht. (zumindest nicht im Moment)

                  sigi234 B 2 Replies Last reply Reply Quote 0
                  • sigi234
                    sigi234 Forum Testing Most Active @jogibear9988 last edited by

                    @jogibear9988
                    Wird es die UI auch in Deutsch geben?

                    jogibear9988 1 Reply Last reply Reply Quote 0
                    • jogibear9988
                      jogibear9988 @sigi234 last edited by

                      @sigi234
                      ist von mir erst mal nicht geplant. (für die Design UI)
                      aber es ist ja auch nicht wirklich viel text in der UI außer ein paar Begriffen.

                      Für die Runtime wiederum habe ich mir schon gedanken gemacht, ob dort eine Sprachumschaltung nötig, bzw. sinnvoll ist. Ist aber noch nichts fertig und hat auch eher ne niedrige Priorität im Moment.
                      (Der Gedanke aber war, man wrappt jeden übersetzbaren Text in eine Komponente, "<t-t>", diese bietet dann auch live übersetzung durch z.B. Ctrl+Rechtsklick, und die Texte landen dann im ioBroker webui Verzeichnis als Json) z.Zt. muss man die Runtime in der Sprache Designen wie man Sie nutzen will.

                      1 Reply Last reply Reply Quote 1
                      • B
                        Blockmove @jogibear9988 last edited by

                        @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                        @blockmove

                        Was z.B. in Vis2 einfacher ist, dort klicke ich einen View an, und sage er soll im Menü dargestellt werden. Das geht recht einfach. Aber dadurch habe ich auch schon eine spezielle Menükomponente welche nur für diesen zweck funktioniert. So was gibt es in meiner eben UI nicht. (zumindest nicht im Moment)

                        Ich denke die Funktionalität, dass man einen Screen in einen anderen einbinden kann (wie in deinem Menu-Tutorial) reicht hier vollkommen aus. Die Screens sind ja bei webui sehr flexibel und bieten viele Möglichkeiten.
                        Es gibt eben verschiedene Möglichkeiten an das Ziel zu gelangen.

                        1 Reply Last reply Reply Quote 0
                        • Wal
                          Wal Developer @jogibear9988 last edited by

                          @jogibear9988 ,
                          danke für die neuen Videos.👍

                          1 Reply Last reply Reply Quote 0
                          • B
                            Blockmove last edited by

                            @jogibear9988

                            Hallo Jochen,
                            bei der ioBroker vis steht im Datenpunkt "vis.0.control.data" die zuletzt geöffnete View.
                            Wie kann ich die Funktion mit webui erreichen?
                            Kann beim Starten / Wechseln in einen Screen ein Event definiert werden, das den Screen-Name in einen DP schreibt?

                            Gruß
                            Dieter

                            jogibear9988 1 Reply Last reply Reply Quote 0
                            • jogibear9988
                              jogibear9988 @Blockmove last edited by

                              @blockmove
                              Das gibts schon:
                              webui.0.control.command & webui.0.control.data

                              uiChangeView sollte schon gehen (zum umschalten)
                              uiChangedView ist noch nicht genutzt (kommt noch)

                              jogibear9988 1 Reply Last reply Reply Quote 2
                              • jogibear9988
                                jogibear9988 @jogibear9988 last edited by

                                was mir dabei nicht klar ist, wie identifiziert vis einen client eindeutig?
                                ich erzeuge für jeden client eine ID, jedoch ist diese immer anderst wenn er neu connected. speichert vis diese? nutzt vis die ip? (diese ist ja bei mehreren browser fenstern auch nicht eindeutig).
                                hab mir das noch nicht wirklich angesehen. auch sollte ich vlt. statt signalen, messages benutzen, hab das gerade nur so gemacht weil es in vis auch so ist

                                B M 2 Replies Last reply Reply Quote 0
                                • B
                                  Blockmove @jogibear9988 last edited by

                                  @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                                  was mir dabei nicht klar ist, wie identifiziert vis einen client eindeutig?
                                  ich erzeuge für jeden client eine ID, jedoch ist diese immer anderst wenn er neu connected. speichert vis diese? nutzt vis die ip? (diese ist ja bei mehreren browser fenstern auch nicht eindeutig).
                                  hab mir das noch nicht wirklich angesehen. auch sollte ich vlt. statt signalen, messages benutzen, hab das gerade nur so gemacht weil es in vis auch so ist

                                  Eine Lösung auf Basis von IP / Hostname würde, denke ich, schon reichen.
                                  Startet jemand mehrere Browser oder öffnet mehrere Browserfenster, wird es schwierig.
                                  Wüsste jetzt auch nicht, wie man das umsetzt, so dass es zuverlässig funktioniert.

                                  jogibear9988 1 Reply Last reply Reply Quote 0
                                  • M
                                    MCU @jogibear9988 last edited by MCU

                                    @jogibear9988 WIe genau willst du es machen?

                                    Identifierzung vom Browser

                                    window.navigator
                                    window.navigator.userAgent
                                    

                                    Identifierzung von der aktuell geöffneten Seite

                                    window.location.href
                                    sessionStorage.setItem
                                    

                                    Manche hätten auch gerne die Fensterwerte

                                    window.innerWidth
                                    window.innerHeight
                                    
                                    1 Reply Last reply Reply Quote -1
                                    • B
                                      Blockmove last edited by

                                      Hallo Jochen,

                                      könntest du bitte die Beispiele aus deinen Videos exportieren und irgendwo online stellen.
                                      Würde vielleicht den Einstieg in webui erleichtern.

                                      Vielen Dank und Viele Grüße

                                      jogibear9988 1 Reply Last reply Reply Quote 0
                                      • jogibear9988
                                        jogibear9988 @Blockmove last edited by

                                        @blockmove
                                        I moment weiß der client seine IP nicht (glaube ich), oder gibts da ne browser API?
                                        Kann natürlich was mit ner session machen.
                                        Denke die Client IP müsste ich vom iobroker Server an den client senden.

                                        1 Reply Last reply Reply Quote 0
                                        • jogibear9988
                                          jogibear9988 @Blockmove last edited by

                                          @blockmove
                                          welche? hab da eig. fast alles schon wieder gelöscht.
                                          Denke das mit dem Menü Control macht sinn, der rest ist ja nur Bsp. gewesen

                                          Beispielcontrols gibts hier:
                                          https://github.com/iobroker-community-adapters/ioBroker.webui/tree/master/samples/controls

                                          Habe vor dort auch noch Bsp. Views einzuchecken, aber vlt. kann mir ja jemand welche erstellen. Bin echt kein Designer

                                          ice987 2 Replies Last reply Reply Quote 1
                                          • ice987
                                            ice987 @jogibear9988 last edited by ice987

                                            @jogibear9988

                                            gibt's beim Menü auch die Möglichkeit eine weitere Ebene als Untermenü zu definieren, jeweils aufklappbar wie z.b. bei "Beleuchtung" / "Haushalt"?:


                                            IMG_0330.jpeg

                                            jogibear9988 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.0k
                                            Online

                                            31.7k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            20
                                            1074
                                            261031
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo