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

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

      @blockmove Denke inzwischen auch das dies ein der bessere weg ist

      Der bessere Weg vielleicht nicht …. Aber der einfachere.
      Ich hab bis jetzt ganz wenig absolute px-Positionen verwendet.
      Wenn ich mal Zeit hab, dann muss ich mir da mal echart in der Hinsicht genauer anschauen.

      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.

        Ich hab jetzt mal deinen Vorschlag umgesetzt und das css verschlankt.
        Auf dem Server liegt nun eine akutalisierte Variante.

        Hast du dir schon mal Gedanken gemacht über ein ui für bind-class?

        Viele Grüße und schönes WE!

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

          @jogibear9988
          Erstmal vielen Dank für den tollen Adapter 👍

          Bin fleißig seit beginn an mitzulesen, komme aber erst jetzt wirklich dazu mich damit mal zu beschäftigen und hab gleich mal ein paar Fragen:

          Ich würde genre die material-components-web (npm) verwenden, vor allem wegen der TopAppBar. Bekomme allerdings folgende Fehlermeldung - der scheint die Dateiendung nicht zu verwenden:
          8a4230fa-9e28-498b-92a3-68e5f7bafb70-grafik.png

          Wie kann ich nach dem Laden der runtime auf ein Element per Javascript zugreifen?
          Timeout, DOMContentLoaded, etc funktioniert nicht.
          Hab ein kleines Beispiel erstellt in deiner Demo erstellt scrounger/javascript_test

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

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

            TopAppBar

            hab dir es angepasst...

            kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

            wenn dem npm package die Dateiendungen fehlen ist das fehlerhaft und muss dort gefixt werden.

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

              hab ein issue dazu erstellt: https://github.com/material-components/material-components-web/issues/8174

              jogibear9988 created this issue in material-components/material-components-web

              closed [ALL] NPM packages are missing file extensions in ES6 exports #8174

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

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

                kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

                Bin ein Stück weiter, mdc laden geht schon, muss aber anders aufgerufen werden, siehe mein Beispiel scrounger/topAppBar in deiner Demo. Der navigation drawer geht jetzt auch schon.

                Was ich aber nicht hinbekomme ist, dass die Icons geladen werden. Hast du ne idee?

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

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

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

                  kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

                  Bin ein Stück weiter, mdc laden geht schon, muss aber anders aufgerufen werden, siehe mein Beispiel scrounger/topAppBar in deiner Demo. Der navigation drawer geht jetzt auch schon.

                  Was ich aber nicht hinbekomme ist, dass die Icons geladen werden. Hast du ne idee?

                  das script geht schon nicht, "mdc is not defined". Kp warum das so ist. Glaube fast das das package auf unpkg so nicht funktioniert.

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

                    @jogibear9988
                    Also in der Runtime kommt die Fehlermeldung mdc is not defined nicht.

                    Im Designer Preview kommt die Fehlermeldung.
                    Wenn ich noch const mdc = require('material-components-web'); verwende, da gehts auch im Designer Preview, allerdings meckert er dann in der Runtime mit error parsing javascript - screenviewer - scrounger/topAppBar ReferenceError: require is not defined

                    Das package von unpkg funktioniert bei mir an anderer Stelle einwandfrei.

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

                      @scrounger

                      require kannst nicht nutzen...

                      Dann hängt das ganze mit "monaco" editor zusammen, der vscode editor den ich im designer nutze.
                      Der definiert ein require, dadurch wird das paket falsch geladen.
                      Ich hoffe das es bald ein ESM paket von monaco gibt, aber der issue ist schon ewig offen...

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

                        @jogibear9988
                        Kann ich irgendwie per Javascript prüfen ob ich im Designer oder runtime bin?

                        Wie bzw wo kann man globale Skripte anlegen - unter 'global/script' geht kein Fenster auf?

                        Wie kann ich im globalen Script auf die Dom lemente zu greifen?

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

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

                          @jogibear9988
                          Kann ich irgendwie per Javascript prüfen ob ich im Designer oder runtime bin?
                          --> im moment nicht, wozu brauchst das?

                          Wie bzw wo kann man globale Skripte anlegen - unter 'global/script' geht kein Fenster auf?
                          --> ist noch nicht umgesetzt, hab ich mal voreillig reingebaut

                          Wie kann ich im globalen Script auf die Dom lemente zu greifen?
                          --> wozu aus einem globalen script, dafür sind die scripte der views. Du kannst das schon dann musst aber die ganzen elemente & shadowdoms durchlaufen

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

                            Im designer könnt ihr nun fenster in ein extra browser fenster "abdocken":

                            c5df5255-6b3e-412e-acca-299810f92fd5-image.png

                            Braucht bestimmt noch bisschen feinschliff, aber vlt. kann es ja schon jemand gebrauchen

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

                              @jogibear9988
                              Bei mir kommt wenn ich das mache
                              Error occured, check console
                              NotFoundError: Node.removeChild: The node to be removed is not a child of this node und ein leeres fenster 😉

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

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

                                @jogibear9988
                                Bei mir kommt wenn ich das mache
                                Error occured, check console
                                NotFoundError: Node.removeChild: The node to be removed is not a child of this node und ein leeres fenster 😉

                                ein fehler kommt bei mir auch noch, nach dem schaue ich noch,
                                aber das abdocken geht:

                                936463e1-5b54-49cd-88d6-14de5bde673c-image.png

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

                                  @smilie108

                                  welcher browser? firefox geht bei mir auch nicht ;-). chrome & safari läuft

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

                                    @jogibear9988

                                    in firefox ist das wohl ein bug:

                                    https://bugzilla.mozilla.org/show_bug.cgi?id=1712007
                                    https://bugzilla.mozilla.org/show_bug.cgi?id=1502814

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

                                      @jogibear9988 jop arbeite nur mit firefox chrom mag ich nicht kommt von google sorry 😉 und safari is mac mag ich auc nicht ist apple sorry 😉

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

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

                                        @jogibear9988 jop arbeite nur mit firefox chrom mag ich nicht kommt von google sorry 😉 und safari is mac mag ich auc nicht ist apple sorry 😉

                                        ja, das feature ist leider in firefox so nicht nutzbar... vlt. wird der bug ja irgendwann gefixt.

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

                                          @smilie108

                                          auch firefox arbeitet heftig mit google zusammen, sonst hätten die so gut wie kein geld 😉
                                          Hat schon gründe warum google dort die default suche ist. Und es gibt ja noch andere "chromium" browser, ohne das ganzen google tracking. Aber firefox ist ebn lichtjahre hinterher (und auch um welten langsamer)

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

                                            @jogibear9988 jap das mag sein aber ich bin in der beziehung etwas naja "stur" habe mir firefox so eingerichtet das es auf allen rechnern und allen pc die ich verwende gelich ist und sich auch gegenseitig updated wenn ich was änder das ganze zu übersiedeln oder überhaupt 2gleisig zu machen ist ein heiden aufwand und bin bis jetzt mit firefox eigentlich immer sehr gut unterwegs gewesen.
                                            Wie soll ich das sagen bin halt eingefahren naja dann is es halt so wenn ich das fenster normal undock mache dann geht es ja auch 😉 ( ohne den Menuepunkt 😉

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            754
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

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