Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Neuer Visualiserungsadapter für iobroker: webui

    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

    Neuer Visualiserungsadapter für iobroker: webui

    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      MarkusK @jogibear9988 last edited by

      @jogibear9988 Ich habe mich mal ein wenig mit WebUI beschäftigt. Es hat definitiv eine steile Lernkurve, wenn man keine CSS Kenntnisse hat. Ohne CSS ist man verloren. Hier liegt das Problem der Visualisierung, man muss erstmal das Konzept verstanden haben (ich bin mir ja noch nicht ganz sicher, ob ich auf dem Königsweg bin oder einfach nur rumfrickel) und man muss CSS, zumindest im Ansatz, verstanden haben. Beschäftigt man sich damit, ist das Konzept wirklich gut. Da ich mich gerne an einem Raster halte, muss ich zwangläufig einiges selbst an CSS schreiben. Das schöne, das Verhalten ist nachvollziehbar, was ich vor allem VIS-2 vermisse.
      Hilfreich wäre z.B. ein paar Vorlagen z.B. Kombinationen von ein und mehrspaltungen Design, dunklem Hintergrund (benutzt wahrscheinlich die Mehrheit) etc. Ich weis bis jetzt noch nicht an welcher Stelle ich den schwarzen Hintergrund richtig definieren muss, damit dieser überall verwendet wird. Ich habe es zwar irgendwie hingekommen, aber ich weis nicht ob es korrekt ist.

      :host {
      background-color: #000000;
      color: #ffffff;
      }

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

        @markusk

        gute vorlagen kann ich leider auch nicht machen, ich bin nicht wirklich designer. 🙂

        Wenn du styles willst die überall wirken (in allen screens) musst du die hier festlegen:

        d13eb14d-c572-41f6-8bbb-7b95b919776e-image.png

        und ja ":host" musst du verwenden um den hintergrund zu setzen. Jeder screen wird in einer webcomponente mit shadowdom gerendert, daher hat "body, html und :root" keine Auswirkung. Meist muss man wenn man css irgendwoher kopiert, einfach diese durch ":host" ersetzen.

        Im Moment soll ja der Beispielserver eine Austauschplatform sein.

        Aber wenn du eine Absolut positionierte View erstellst, sollte das ja schon ziemlich ähnlich zu vis funktionieren. Was ich nicht wirklich habe (im Moment), sind wirklich schöne vorgestylte Elemente, da hoffe ich auf community Hilfe, da design absolut nicht meines ist.

        Und man kann ja alle möglichen webcomponeten einsetzen.

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

          Eine Stylevorlage habe ich:

          Rechtsklick auf den Globalen Style:

          6243ee40-64ef-4538-b03b-a13628bfbacd-image.png

          Ist aber auch nur minimal. Und mehrspaltiges Design geht ja hiermit:
          6d243e07-95f3-44e2-ba31-977a5f70a68d-image.png

          Ja, der CSS Grid Editor soll noch mehr Funktionen bekommen. Bspw. Elemente auf mehrere Spalten/Zeilen vergrößern, Name Areas verwenden, ....
          Da hab ich noch viele offene Punkte. Die Frage ist nur wann komme ich dazu das zu verbessern 😉

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

            Schau mal in "responsive/simple", da ist ein grid definiert (das du im style leicht anpassen können solltest), und wenn dur dort dann ein element auf einen benannten bereich ziehst, wird das element so groß wie der bereich

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

              @jogibear9988 Mir gefällt es, alles "unter Kontrolle" zu haben und schreibe deshalb meine CCS und HTML zum größenteils selbst. Aber es hakt immer wieder mal an kleinen Dingen, wie z.B. Anzahl der Dezimalkommastellen. Ich suche ja immer gerne den besten Weg und falls ich keine finde, dann fummel ich es mir irgendwie hin.
              Aber wie bekomme ich jetzt die Nachkommastellen am besten hin?

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

                @Homoran
                @jogibear9988

                Brauchen wir zum webui wirklich 2 parallele Topics mit fast identem Titel (und langfristig) auch vergelichbarem Inhalt?

                Ich rege an diesen Thread entweder in

                https://forum.iobroker.net/topic/68819/neue-visualisierung-webui-alternative-zu-vis/739

                zu mergen oder zumindest hier zu schließen und auf den Hauptthread zu verweisen.

                (@Homoran - ist aber natürlich eine primär Entscheidung von @jogibear9988)

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

                  @markusk said in Neuer Visualiserungsadapter für iobroker: webui:

                  @jogibear9988 Mir gefällt es, alles "unter Kontrolle" zu haben und schreibe deshalb meine CCS und HTML zum größenteils selbst. Aber es hakt immer wieder mal an kleinen Dingen, wie z.B. Anzahl der Dezimalkommastellen. Ich suche ja immer gerne den besten Weg und falls ich keine finde, dann fummel ich es mir irgendwie hin.
                  Aber wie bekomme ich jetzt die Nachkommastellen am besten hin?

                  wo hast die nachkommastellen? Hat die deine variable schon? oder willst du einen int wert der keine nachkommastellen hat damit darstellen?
                  was ist mit dem "step" attribut eines number inputs?

                  oder vlt. suchst sowas: https://opensource.adobe.com/spectrum-web-components/components/number-field/

                  dazu musst du folgende pakete installieren:

                   @spectrum-web-components/number-field
                   @spectrum-web-components/theme
                  

                  und folgenden js code einfügen: (siehe auch bsp "spectrum" im beispielserver)

                  import '@spectrum-web-components/theme/sp-theme.js';
                  import '@spectrum-web-components/theme/src/themes.js';
                  import '@spectrum-web-components/number-field/sp-number-field.js';
                  1 Reply Last reply Reply Quote 0
                  • jogibear9988
                    jogibear9988 @mcm1957 last edited by

                    @mcm57

                    ja kann man wegen mir zumachen

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

                      @Homoran
                      siehe letztes posting

                      Homoran 1 Reply Last reply Reply Quote 0
                      • Homoran
                        Homoran Global Moderator Administrators @mcm1957 last edited by

                        @mcm57 done!

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

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        428
                        Online

                        31.9k
                        Users

                        80.1k
                        Topics

                        1.3m
                        Posts

                        5
                        18
                        2404
                        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