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

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    • Save The Date: ioBroker@Smart Living Forum Solingen, 14.06.

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

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

      @blockmove

      916f2f7b-b9f2-4202-89b1-ef858372e4ca-image.png

      hier kannst ja globale styles definieren. Diese sind in jedem Screen nutzbar.

      1 Reply Last reply Reply Quote 1
      • B
        Blockmove last edited by

        Hallo Jochen,

        was ich gerade vermisse ist eine einfache Funktion zum Kopieren / Duplizieren von Screens.
        Export -> Umbenennen -> Import funktioniert zwar.
        Eine integrierte Funktion wäre etwas komfortabler.

        VG
        Dieter

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

          @blockmove
          habs implementiert, kann es aber gerade nicht testen.

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

            @jogibear9988 said in neue Visualiserung "webui" im stable repository:

            @blockmove
            habs implementiert, kann es aber gerade nicht testen.

            Sobald die Version im ioBroker verfügbar ist, kann ich testen.

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

              @blockmove

              da hängt im moment der build bei github: https://github.com/iobroker-community-adapters/ioBroker.webui/actions/runs/7002950960

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

                @blockmove
                so, nun sollte sie verfügbar sein

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

                  @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                  @blockmove
                  so, nun sollte sie verfügbar sein

                  Bis jetzt noch nicht. Aber ich glaube, dass iobroker auch nur 2mal täglich aktualisiert.
                  Ich schau heut Abend nochmal danach.

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

                    @blockmove

                    so kanst es forcen:
                    63fee131-9f69-4b36-bf88-2ae87e8f8087-image.png

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

                      @jogibear9988

                      Das mit dem Benutzerdefiniert kannte ich bislang nicht.
                      Vielen Dank!

                      Hab gerade die Kopierfunktion probiert und es hat funktioniert 👍

                      Vielen Dank Jochen!

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

                        Hallo Jochen,

                        was mir gerade bei der Version 0.16.5 auffällt:
                        Wenn ich ein CustomControl nun aufrufe, ist vor dem jeweiligen Property-Namen nach bind-prop: ein "-" Zeichen.
                        Das war bei der vorherigen Versionen nicht der Fall.

                        <webui-p-d-raum-hzg-chart bind-prop:-isttemperatur="alias.0.EG.AzDieter.Isttemperatur" bind-prop:-solltemperatur="alias.0.EG.AzDieter.Solltemperatur" bind-prop:-ventilstellung="alias.0.EG.AzDieter.Ventilstellung" e-chart="http://ctrl01.fritz.box:8082/echarts/index.html?preset=echarts.0.Heizung.EgAzDieter" class="RaumHzgChart" echart="http://ctrl01.fritz.box:8082/echarts/index.html?preset=echarts.0.Heizung.EgAzDieter" bind-prop:isttemperatur="alias.0.EG.AzDieter.Isttemperatur" bind-prop:solltemperatur="alias.0.EG.AzDieter.Solltemperatur" bind-prop:ventilstellung="alias.0.EG.AzDieter.Ventilstellung"></webui-p-d-raum-hzg-chart>
                        
                        
                        jogibear9988 3 Replies Last reply Reply Quote 0
                        • jogibear9988
                          jogibear9988 @Blockmove last edited by

                          @blockmove
                          jo sieht falsch aus....

                          ich schaue. baue gerade noch den property editor um, daher dauert es n bisschen

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

                            @blockmove
                            wann passiert das, ich hab gerade ein objekt per dragdrop auf den screen gezogen, da passt das...

                            wann passiert das? drag drop? dialog?, ...

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

                              @blockmove
                              starten deine Properties mit einem großbuchstaben? das ist eig. nicht erlaubt. HTML kann keine groß kleinschreibung in attributen, und ich mache aus diesem case aBbccDdd das: a-bbcc-ddd,
                              d.h. wenn deine property mit einem großbuchstaben startet, kommt zuerst ein "-", aber als html attribut wird das nicht gehen.
                              ich baue ein das properties mit einem kleinbuchstaben beginnen müssen

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

                                @jogibear9988

                                @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                                @blockmove
                                starten deine Properties mit einem großbuchstaben? das ist eig. nicht erlaubt. HTML kann keine groß kleinschreibung in attributen, und ich mache aus diesem case aBbccDdd das: a-bbcc-ddd,
                                d.h. wenn deine property mit einem großbuchstaben startet, kommt zuerst ein "-", aber als html attribut wird das nicht gehen.
                                ich baue ein das properties mit einem kleinbuchstaben beginnen müssen

                                Stimmt das waren Properties mit Großbuchstaben.
                                Ich schreibe es mal um.
                                Tja und so sind meine mangelnden HTML-Kenntnisse wenigstens zu was gut 😜

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

                                  @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                                  @blockmove
                                  starten deine Properties mit einem großbuchstaben? das ist eig. nicht erlaubt. HTML kann keine groß kleinschreibung in attributen, und ich mache aus diesem case aBbccDdd das: a-bbcc-ddd,
                                  d.h. wenn deine property mit einem großbuchstaben startet, kommt zuerst ein "-", aber als html attribut wird das nicht gehen.
                                  ich baue ein das properties mit einem kleinbuchstaben beginnen müssen

                                  So, ich hab jetzt auf Kleinbuchstaben umgestellt und der Spuk ist vorbei.
                                  Irgendwie gefällt mir dieses Ersetzen aBbccDdd -> a-bbcc-ddd nicht so wirklich.
                                  Konsquente Kleinschreibung und das "-"Zeichen zur besseren Lesbarkeit fände ich irgendwie besser.
                                  Ganz besonders wenn man direkt im HTML-Code ändert, fände ich das sinnvoller.
                                  Aber das ist nur meine Meinung. Ich will dir nicht in die Entwicklung reinreden.

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

                                    @blockmove

                                    das rührt daher das es alle webcomponenten libs so machen (bspw polymer, lit, ...). Und properties in htmlelementen enthalten überlicherweise keine "-", sonst kann man diese in javascript auch nicht direkt verwenden, sonderen muss sie mit object['property-name'] abfragen. D.h. ich mache es so, wie es alle, bzw. die größten libs machen

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

                                      Auch in data- attributen in html wird da sso gemacht: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

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

                                        @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                                        Auch in data- attributen in html wird da sso gemacht: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

                                        Vielen Dank für die Info.
                                        Tja, irgendwie hat‘s schon seinen Grund warum ich mich vor HTML solange gedrückt hab 😵
                                        Selbst bei vermeintlich einfachen Dingen stößt man auf Fallstricke. Aber aktuell ist das ja, so zumindest mein Eindruck, bei keiner Visu im ioBroker-Umfeld anders.

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

                                          Chart Web Komponente für WebUi (oder andere webseiten)

                                          Hab eine neue webkomponente gebaut, welche chart.js wrappt und die man in webui nutzen kann:
                                          https://github.com/node-projects/chart-js-webcomponent

                                          Sieht dann so aus:

                                          454bc801-795e-408e-b3b5-82b601f29c72-image.png

                                          Man kann übder das Data attribute daten vorgeben, oder ein historic binding dranbauen. Für die Historic Bindings Properties gibts leider noch keine UI.

                                          sieht in html so aus:

                                           <node-projects-chart-js bind-prop:data='{"signal":"signal.name.welches.aufgezeichnet.wird","expression":"__0.map(x =&gt; [x.val, x.ts])","historic":{"returnNewestEntries":true,"instance":"history.0"}}' style="width:427px;height:168px;"></node-projects-chart-js>
                                          

                                          die formula im bindings editor:

                                          5d3a2dda-0fe7-4b3f-9675-c3fd752e0e11-image.png

                                          ist das wichtige, die wandelt die iobroker daten so wie das widget sie versteht.

                                          An der komponente kann man sicher noch einige properties dazubauen. Dies ist ein erster entwurf, die ist auch nicht iobroker spezifisch. Man kann das ganze auch in einem webui control wrappen.

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

                                            @jogibear9988

                                            In der live demo: http://129.159.205.3:8082/webui/index.html gibts auch einen Beispiel screen: chart

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.0k
                                            Online

                                            31.6k
                                            Users

                                            79.4k
                                            Topics

                                            1.3m
                                            Posts

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