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 goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

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

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

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

      trashschedule

      mhm eigentlich schade das die sachen alle oder fast alle ical vorraussetzen mag keinen apfel schade 😉
      Und österreichischer müllkalender is auch keiner drinn 😉
      naja dann mach ich es mit meinem kalender 😉

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

        @smilie108 wieso Apfel?

        Ich bekomme den Kalender z.b. von Nextcloud

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

          @wendy2702
          ach ja ganz vergessen nextcloud kann ja ical 😉 An das dachte ich nicht mehr. Danke für die gedächtnissauffrischung stimmt als doch wieder instalieren 😉
          Nextcloud server hab ich ja 😉

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

            @smilie108 Google Kalender sollte auch gehen

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

              @wendy2702 grins hab ich auch nicht mache alles über meinen eigenen server 😉 hab da einen in frankfurt stehen der die ganze Fammilie versorgt 😉 und noch ein paar andere sachen macht 😉

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

                @smilie108 so ähnlich habe ich es auch.

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

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

                  Ich hab jetzt nicht die richtigen styles zusammenkopiert, will nur zeigen, du solltest zusammenfassen was sinn macht, wenn du bei 4 items in dem kalender die gleicehn styles setzt, macht es sinn die in eine gemeinsame klasse zu packen, und dem element mehrere klassen zuzuweisen.

                  Vielen Dank für deine Tipps. 👍 Klar sind da noch ganz viele Optimierungsmöglichkeiten drin.
                  Mir war / ist erstmal die Funktionalität und eine einigermassen saubere Trennung zwischen html und css wichtig.
                  Dinge wie Animationen oder responsive Design stehen da hinten an. Naja typisch SPS-Programmierer eben 😉

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

                    @blockmove

                    vlt in den screenshot thread?

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

                      die adobe spectrum webcomponents kann man auch mit der webui nutzen, gibt ein demo view "spectrum". Man muss aber noch bischen javascript extra laden, mal schauen was ich da noch machen kann.

                      siehe auch: https://forum.iobroker.net/topic/67622/neuer-visualiserungsadapter-für-iobroker-webui/15?_=1708357755724

                      https://opensource.adobe.com/spectrum-web-components/index.html

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

                        @jogibear9988
                        kann es sein das ich da was falsch habe ? habe dir unter smilie108 das sample 2 aktualisiert
                        Darin ist unten eine wired combo mit einem select
                        im edito /preview funktioniert es das er das selectet in die iob varibel schreibt in der Runtime passiert nichts.
                        Außerdem werden bei mir im editor die wigets in der Split view und im desinger garnicht angezeit im preview sind sie da.
                        Weis im moment nicht woran es liegt Aber was interesant ist wenn ich die combo in den screen uebrschit kopiere geht es ohne probleme.
                        Weis im moment nicht wo ich suche soll bekomme auch kein meldung.

                        Danke im voraus

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

                          @smilie108

                          Hab gerade dein sample2 im Designer auf dem iPad aufgemacht und gleich nen Error loading Screen bekommen.

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

                            @smilie108

                            so, sollte nun gehen.

                            Problem war, ich prüfe ob es ein "LIT" element ist, um den event namen zu bauen, aber LIT ist in der Runtime erst später geladen, daher ist es zum zeitpunkt wo ich die Bindings anwende noch kein "LIT" element. Nun prüfe ich das später nochmals und wende das binding dann nochmal an.

                            Und an deinem screen hab ich ein paar sachen gelöscht, damit ich die controls sehe, hab aber nicht analysiert was du da vor hast.

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

                              @jogibear9988 😉 Danke jetzt gehts
                              Bin grad nochmal dabei alles umzugestalten ist momentan ein experiment 😉 sorry
                              bin grad dabei zu schauen in wie weit ich das ganze handy kompatible bekomme ohne auf den comfort bei einem großen display zu verlieren. Alles lässt sich nicht einfach scalen 😉 zwecks lesbarkeit am handy
                              mal sehen 😉 wenn ich das soweit habe folgen nochmals infos danke nochmal

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

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

                                @jogibear9988 😉 Danke jetzt gehts
                                Bin grad nochmal dabei alles umzugestalten ist momentan ein experiment 😉 sorry
                                bin grad dabei zu schauen in wie weit ich das ganze handy kompatible bekomme ohne auf den comfort bei einem großen display zu verlieren. Alles lässt sich nicht einfach scalen 😉 zwecks lesbarkeit am handy
                                mal sehen 😉 wenn ich das soweit habe folgen nochmals infos danke nochmal

                                Schau dir mal die html-Einheiten an. Schriftgrößen, margin oder padding kann man auch in em anstelle px angeben. Packt man die Elemente in ein grid, dann ist die Einteilung fr oft nützlich.

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

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

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

                                  @jogibear9988 😉 Danke jetzt gehts
                                  Bin grad nochmal dabei alles umzugestalten ist momentan ein experiment 😉 sorry
                                  bin grad dabei zu schauen in wie weit ich das ganze handy kompatible bekomme ohne auf den comfort bei einem großen display zu verlieren. Alles lässt sich nicht einfach scalen 😉 zwecks lesbarkeit am handy
                                  mal sehen 😉 wenn ich das soweit habe folgen nochmals infos danke nochmal

                                  Schau dir mal die html-Einheiten an. Schriftgrößen, margin oder padding kann man auch in em anstelle px angeben. Packt man die Elemente in ein grid, dann ist die Einteilung fr oft nützlich.

                                  da gibts mittlerweile echt viele:

                                  https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

                                  und für container queries gibts auch nochmal welche:

                                  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

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

                                    @jogibear9988

                                    Ja es gibt wirklich jede Menge.
                                    Gehört halt zu dem Umfeld von responsive Design.
                                    Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
                                    Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

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

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

                                      @jogibear9988

                                      Ja es gibt wirklich jede Menge.
                                      Gehört halt zu dem Umfeld von responsive Design.
                                      Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
                                      Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

                                      Container queries machen das ganze echt noch mal interessant. Da kannst du dann deine schriftgröße abhängig von deiner containergröße machen.
                                      (siehe bsp screen containerFontSize)

                                      B Scrounger 3 Replies Last reply Reply Quote 0
                                      • B
                                        Blockmove @jogibear9988 last edited by

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

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

                                        @jogibear9988

                                        Ja es gibt wirklich jede Menge.
                                        Gehört halt zu dem Umfeld von responsive Design.
                                        Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
                                        Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

                                        Container queries machen das ganze echt noch mal interessant. Da kannst du dann deine schriftgröße abhängig von deiner containergröße machen.
                                        (siehe bsp screen containerFontSize)

                                        Die Designer brauchen ja auch ne Daseinsberechtigung 😀
                                        Ist wie mit den Juristen … Wären Gesetze einfach und verständlich, bräuchte man auch keine mehr.

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

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

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

                                          @jogibear9988

                                          Ja es gibt wirklich jede Menge.
                                          Gehört halt zu dem Umfeld von responsive Design.
                                          Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
                                          Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

                                          Container queries machen das ganze echt noch mal interessant. Da kannst du dann deine schriftgröße abhängig von deiner containergröße machen.
                                          (siehe bsp screen containerFontSize)

                                          Hab ich mir jetzt auch mal angeschaut. Auch ne interessante Möglichkeit.
                                          Wenn man die Visu auf verschiedenen Geräten nutzt, erlebt man halt immer wieder Überraschungen.
                                          Highend-Smatphones sind da besonders lustig. Hohe Auflösungen und kleine Bildschirme. Da ist oft ne Schrift kaum mehr lesbar. Ich persönlich hab das Thema bei mir erstmal hinten angestellt. Auf meinen Tablets und auf dem Desktop funktioniert es.
                                          @Smilie108
                                          Wie sieht das mit deinen schönen grafischen Darstellungen aus?
                                          Funktioniert das alles auf verschiedenen Geräten?

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

                                            @blockmove
                                            Hi naja eingeschränkt hatte jetzt mal fast alles von vis2 umgezogen ohne Rücksicht auf das responsiv.
                                            Bin jetzt grad dabei das ganze entweder in einem 2.ten baum für handydarstellung zu Optimieren oder das bestehende reponsiv fähig machen.
                                            ABER Die graphiken usw kann man teilweise nicht einfach shrinken oder so weil damit unleserlich wird.
                                            Es gibt auch noch die option auf dem handy zu schieben usw aber unterwegs insteresieren mich eigentlich ja nur harte fakten und weniger die Graphik.
                                            Zuhause auf dem Tablet bzw rechner ist das was anderes 😉 Da soll es auch gut ausschauen.
                                            Mal sehen wie ich das alles unter einen hut bringe.
                                            mfg Tom

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            626
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

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