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 @Xsev last edited by

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

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

        @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 Reply Quote 0
        • wendy2702
          wendy2702 last edited by

          Hi,

          bevor ich anfange WebUi zu probieren eine Frage.

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

          jogibear9988 2 Replies Last reply Reply Quote 0
          • jogibear9988
            jogibear9988 @wendy2702 last edited by

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

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

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

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

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

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

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

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

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

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

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

                      @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

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

                        @jogibear9988

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

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

                          @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

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

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

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

                              @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 Reply Last reply Reply Quote 0
                              • jogibear9988
                                jogibear9988 last edited by

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

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

                                  @jogibear9988 Danke

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

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

                                    jogibear9988 created this issue in mar10/wunderbaum

                                    closed Drag/Drop of nodes does not work any more, in 0.8.0 it works #82

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

                                      drag drop geht wieder

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

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

                                        Smilie108 2 Replies Last reply Reply Quote 1
                                        • B
                                          Blockmove last edited by

                                          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.

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

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

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            933
                                            Online

                                            31.7k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            20
                                            1074
                                            260816
                                            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