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

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • 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
                        • jogibear9988
                          jogibear9988 @ice987 last edited by

                          @ice987
                          Das Menü control ist ja nur eine ganz simple Komponente, alles was im linken Teil angezeigt wird ist eben alles was im Slot "menu" ist. Wenn du da das HTML Element "details" verwendest solltest so etwas leicht bauen können.

                          Das Menü Control sollte etwas ganz simples sein, ohne großartige Logik. Es kann jederzeit eine komplexere Komponente genutzt werden.

                          <div slot="menu">
                               <details>
                                   <summary>BlaBla</summary>
                                   <button>button 1</button><br>
                                   <button>button 2</button>
                               </details>
                           </div>
                          
                          ice987 jogibear9988 2 Replies Last reply Reply Quote 0
                          • ice987
                            ice987 @jogibear9988 last edited by

                            @jogibear9988

                            Vielen Dank, das schaue ich mir mal an

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

                              @jogibear9988
                              Ich denke wenn jemand styling etwas drauf hat, bekommt er es mit details/summary genau so hin. Wenn man will das sich andere dann zuklappen braucht man vlt noch etwas JS Code.

                              Wir sollten mal überlegen ob wir hier vlt. noch einen Thread eröffnen wo Leute ihre Screens & Komponenten welche Sie gebaut haben hochladen können. Wie gesagt, ich bin kein Designer, technische Umsetzung kein problem, ein Design nachbauen => geht aber dauert, schön machen => kann ich nicht 🙂

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

                                @jogibear9988

                                wie kann ich die Beispieldateien *.control von github importieren?

                                Animation.gif

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

                                  Ausblick noch:

                                  Ich baue im Moment die webUi um, das Jquery und Jquery.FancyTree rausfliegen, da es dort ne nachfolgerkomponente "Wunderbaum" gibt.
                                  Wenn das umgesetzt ist, gibts ein Update. Dort ist z.B. auch schon die Rasterfunktionalität gefixt (also einstellbares Raster).
                                  Danach ist ein Update geplant, in dem Ich endlich eine Dialogkomponente einbauen will, so das man screens in einem Dialog öffnen kann, und dieser noch ein paar funktionen hat (Resize ja/nein, schließbar, Titelleiste, ...)
                                  Und dann ist noch in Planung Übersetzbarkeit Runtime & Benutzermanagement
                                  Und danach mal schauen was noch fehlt oder ob es issues gibt. An der Grundlegenden Designer Komponente wird sowieso immer weitergearbeitet, und darin gibts noch genug zu tun.

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

                                    @ice987
                                    Genau so geht es bei mir (gerade probiert).
                                    Öffne mal die Browser DevTools, steht ein fehler in der Console?
                                    Hast du die Dateien als "Raw" Runtergeladen?

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

                                      @jogibear9988

                                      WebuiHabpanelImageButton.control hab' ich runtergeladen.

                                      Fehler:

                                      VM454:7 Uncaught (in promise) SyntaxError: Unexpected token '<', "
                                      <!DOCTYPE "... is not valid JSON
                                          at JSON.parse (<anonymous>)
                                          at Object.action (IobrokerWebuiSolutionExplorer.js:515:48)
                                      action	@	IobrokerWebuiSolutionExplorer.js:515
                                      await in action (async)		
                                      (anonymous)	@	ContextMenu.js:186
                                      
                                      jogibear9988 1 Reply Last reply Reply Quote 0
                                      • jogibear9988
                                        jogibear9988 @ice987 last edited by

                                        @ice987
                                        Genau, du hast nicht die datei sondern eine html seite mit dem inhalt geladen.

                                        du musst hier klicken: 969e7628-021c-4fd0-9712-e73a230120f4-image.png

                                        Ich sollte vlt. noch eine error message ausgeben

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

                                          @jogibear9988

                                          so funktioniert es 👍

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

                                            Hallo Jochen,

                                            Hallo Jochen,
                                            mir ist gerade eine - sagen wir mal - Ungereimtheit aufgefallen:
                                            Ich ziehe aus dem Objektbaum z.B. ein Image auf die Property Icon.
                                            Nun macht es einen Unterschied, ob ich das Image über der Property direkt (also eben Icon) fallen lasse oder im anschließenden Textfeld. Über der Property wird der komplette Image-Pfad übernommen und beim Drop in das Textfeld nur der Image-Name. Ist ein etwas seltsames Verhalten 😕

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            889
                                            Online

                                            31.9k
                                            Users

                                            80.2k
                                            Topics

                                            1.3m
                                            Posts

                                            21
                                            1080
                                            295456
                                            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