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.
    • liv-in-sky
      liv-in-sky @jogibear9988 last edited by

      @jogibear9988

      bitte erklärung was unterschied zu anderen vis's bzw ziel des adapters ?
      warum fragen unter github - für was brauchen wir dann forum

      jogibear9988 1 Reply Last reply Reply Quote 2
      • jogibear9988
        jogibear9988 @liv-in-sky last edited by

        @liv-in-sky

        der unterschied ist, die Visualisierung ist relativ low level, d.h. man kann direkt den html code editieren. Aber sie ist dadurch auch sehr mächtig.

        ich schaue im Forum eben nur selten vorbei, daher ist für mich github der ehere Anhaltspunkt.

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

          Wer sich den Adapter Live anschauen und mal mit rumspielen will, läuft auf einer kostenlosen Oracle VM.

          Config UI:
          http://130.61.246.67:8082/webui/index.html
          Runtime:
          http://130.61.246.67:8082/webui/runtime.html

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

            Geteste Bibliotheken:

            @christianliebel/paint
            acb247c4-9a67-4bed-b70e-2e10bb28b47a-image.png

            @node-projects/wired-elements
            ec2b5e98-c5e6-4bc3-87a2-2bc651c62c38-image.png

            @node-projects/gauge.webcomponent
            55b33d2c-fa00-4630-8173-4911fcf9a63a-image.png

            @node-projects/input-knob
            b41ebaeb-18d4-4073-bd9d-b2b00341e4c8-image.png

            @node-projects/tab.webcomponent
            c7774edc-726d-4a08-9268-0c3af66d5367-image.png

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

              Ich würde ja gerne mal WEBUI ausprobieren, aber mir fehlt absolut der Einstieg. Ich bin aus der IT (Node.JS, Perl, Python, Bash, Powershell, VBS, SQL etc.) kann ich, aber auch HTML Grundkenntnisse sind vorhanden, aber ich bekomme den Einstieg nicht gebacken. Die Anfangshürde ist einfach zu groß. Es scheitert schon bei einer Checkbox. Die Videos habe ich gesehen, komme aber trotzdem nicht weiter. Gibt es irgendwo eine Hilfe für den Einstieg. Ohne, bleibt die Visualisierung nur etwas für Webentwickler.

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

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

                Ich würde ja gerne mal WEBUI ausprobieren, aber mir fehlt absolut der Einstieg. Ich bin aus der IT (Node.JS, Perl, Python, Bash, Powershell, VBS, SQL etc.) kann ich, aber auch HTML Grundkenntnisse sind vorhanden, aber ich bekomme den Einstieg nicht gebacken. Die Anfangshürde ist einfach zu groß. Es scheitert schon bei einer Checkbox. Die Videos habe ich gesehen, komme aber trotzdem nicht weiter. Gibt es irgendwo eine Hilfe für den Einstieg. Ohne, bleibt die Visualisierung nur etwas für Webentwickler.

                Mir fällt es echt schwer videos für Einsteiger zu machen, da ich das ganze entwickelt habe, ist für mich vieles einfach selbstverständlich.
                Das einfachste was man machen kann, ist links unten unter "objects" mal ein signal auf einen Screen zu ziehen, dann wird davon direkt ein Control mit Binding erzeugt:

                8704979d-f161-42ea-8ab0-a0e4e6111753-image.png

                M 1 Reply Last reply Reply Quote 0
                • 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

                                    806
                                    Online

                                    31.9k
                                    Users

                                    80.2k
                                    Topics

                                    1.3m
                                    Posts

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