Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. neue Visualisierung "webui" (alternative zu vis & vis-2)

NEWS

  • Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar
    BluefoxB
    Bluefox
    12
    2
    273

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.0k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.7k

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

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

Scheduled Pinned Locked Moved Visualisierung
1.1k Posts 21 Posters 347.8k Views 18 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Blockmove

    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>
    
    
    jogibear9988J Offline
    jogibear9988J Offline
    jogibear9988
    wrote on last edited by
    #89

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

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

    Check my ioBroker webui - a vis alternative
    see: https://github.com/iobroker-community-adapters/ioBroker.webui

    1 Reply Last reply
    0
    • B Blockmove

      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>
      
      
      jogibear9988J Offline
      jogibear9988J Offline
      jogibear9988
      wrote on last edited by jogibear9988
      #90

      @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

      Check my ioBroker webui - a vis alternative
      see: https://github.com/iobroker-community-adapters/ioBroker.webui

      B 2 Replies Last reply
      0
      • jogibear9988J 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 Offline
        B Offline
        Blockmove
        wrote on last edited by
        #91

        @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 😜

        The difference beetween Man and Boys:
        The price of their toys 😀

        1 Reply Last reply
        0
        • jogibear9988J 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 Offline
          B Offline
          Blockmove
          wrote on last edited by
          #92

          @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.

          The difference beetween Man and Boys:
          The price of their toys 😀

          jogibear9988J 1 Reply Last reply
          0
          • B Blockmove

            @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.

            jogibear9988J Offline
            jogibear9988J Offline
            jogibear9988
            wrote on last edited by jogibear9988
            #93

            @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

            Check my ioBroker webui - a vis alternative
            see: https://github.com/iobroker-community-adapters/ioBroker.webui

            1 Reply Last reply
            1
            • jogibear9988J Offline
              jogibear9988J Offline
              jogibear9988
              wrote on last edited by
              #94

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

              Check my ioBroker webui - a vis alternative
              see: https://github.com/iobroker-community-adapters/ioBroker.webui

              B 1 Reply Last reply
              1
              • jogibear9988J jogibear9988

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

                B Offline
                B Offline
                Blockmove
                wrote on last edited by
                #95

                @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.

                The difference beetween Man and Boys:
                The price of their toys 😀

                1 Reply Last reply
                0
                • jogibear9988J Offline
                  jogibear9988J Offline
                  jogibear9988
                  wrote on last edited by
                  #96

                  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.

                  Check my ioBroker webui - a vis alternative
                  see: https://github.com/iobroker-community-adapters/ioBroker.webui

                  jogibear9988J 1 Reply Last reply
                  1
                  • jogibear9988J jogibear9988

                    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.

                    jogibear9988J Offline
                    jogibear9988J Offline
                    jogibear9988
                    wrote on last edited by
                    #97

                    @jogibear9988

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

                    Check my ioBroker webui - a vis alternative
                    see: https://github.com/iobroker-community-adapters/ioBroker.webui

                    1 Reply Last reply
                    0
                    • B Offline
                      B Offline
                      Blockmove
                      wrote on last edited by
                      #98

                      Hier mal mein erstes "vorzeigbares" CustomControl

                      CustomC0ntrol1.png
                      pdRaumHzgChart.control

                      Ich hab für jeden Raum ein echart mit Kurven für Soll-, Isttemperatur und Ventilstellung.
                      Über dem Chart wollte ich einfach die aktuellen Werte angezeigt bekommen.

                      EChart und Werte werden einfach als Property übergeben

                      CustomControl2.png

                      Hat man sich mal etwas reingefuchst, dann ist man mit webui extrem flexibel

                      The difference beetween Man and Boys:
                      The price of their toys 😀

                      jogibear9988J 1 Reply Last reply
                      1
                      • B Blockmove

                        Hier mal mein erstes "vorzeigbares" CustomControl

                        CustomC0ntrol1.png
                        pdRaumHzgChart.control

                        Ich hab für jeden Raum ein echart mit Kurven für Soll-, Isttemperatur und Ventilstellung.
                        Über dem Chart wollte ich einfach die aktuellen Werte angezeigt bekommen.

                        EChart und Werte werden einfach als Property übergeben

                        CustomControl2.png

                        Hat man sich mal etwas reingefuchst, dann ist man mit webui extrem flexibel

                        jogibear9988J Offline
                        jogibear9988J Offline
                        jogibear9988
                        wrote on last edited by jogibear9988
                        #99

                        @blockmove

                        Ich hab auch meine chart webcomponente mal in ein custom control gewrappt:
                        2e46942e-3109-4c2d-ade8-2199f4e67907-image.png

                        beispiel ist auf dem demo server. Dafür musst du für die signale nicht extra ein echart anlegen, kann aber auch lange nicht so viel

                        Check my ioBroker webui - a vis alternative
                        see: https://github.com/iobroker-community-adapters/ioBroker.webui

                        B 1 Reply Last reply
                        0
                        • jogibear9988J jogibear9988

                          @blockmove

                          Ich hab auch meine chart webcomponente mal in ein custom control gewrappt:
                          2e46942e-3109-4c2d-ade8-2199f4e67907-image.png

                          beispiel ist auf dem demo server. Dafür musst du für die signale nicht extra ein echart anlegen, kann aber auch lange nicht so viel

                          B Offline
                          B Offline
                          Blockmove
                          wrote on last edited by
                          #100

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

                          @blockmove

                          Ich hab auch meine chart webcomponente mal in ein custom control gewrappt:
                          2e46942e-3109-4c2d-ade8-2199f4e67907-image.png

                          beispiel ist auf dem demo server. Dafür musst du für die signale nicht extra ein echart anlegen, kann aber auch lange nicht so viel

                          Hab mir gerade dein Beispiel angeschaut.
                          Dafür findet sich bestimmt ne Verwendung. So ne Art Kachel wie bei iQontrol Visu.
                          Die echart hatte ich schon fertig.
                          So langsam beginnt der Umzug von vis zu webui.
                          Bis jetzt läuft es entspannter als meine Versuche mit der vis-2 😀

                          The difference beetween Man and Boys:
                          The price of their toys 😀

                          1 Reply Last reply
                          0
                          • jogibear9988J Offline
                            jogibear9988J Offline
                            jogibear9988
                            wrote on last edited by
                            #101

                            Hab eine neue Komponente gefunden welche man im designer nutzen kann:
                            https://github.com/smontanus/dial-gauge

                            ae7bc989-439e-4a36-85ab-9d93160ae496-image.png

                            Beispiel gibts hier: http://129.159.205.3:8082/webui/index.html (im screen chart)

                            Check my ioBroker webui - a vis alternative
                            see: https://github.com/iobroker-community-adapters/ioBroker.webui

                            1 Reply Last reply
                            1
                            • jogibear9988J Offline
                              jogibear9988J Offline
                              jogibear9988
                              wrote on last edited by
                              #102

                              Neue UI für das Refactoring von Signalen.
                              Damit kann man Signale in Scripts&Bindings auf einmal ändern wenn sie mehrmals verwendet sind.

                              9f15a9e3-a273-4a05-8cea-434dc02187ff-image.png

                              Check my ioBroker webui - a vis alternative
                              see: https://github.com/iobroker-community-adapters/ioBroker.webui

                              B 1 Reply Last reply
                              1
                              • jogibear9988J jogibear9988

                                Neue UI für das Refactoring von Signalen.
                                Damit kann man Signale in Scripts&Bindings auf einmal ändern wenn sie mehrmals verwendet sind.

                                9f15a9e3-a273-4a05-8cea-434dc02187ff-image.png

                                B Offline
                                B Offline
                                Blockmove
                                wrote on last edited by
                                #103

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

                                Neue UI für das Refactoring von Signalen.
                                Damit kann man Signale in Scripts&Bindings auf einmal ändern wenn sie mehrmals verwendet sind.

                                Hab gerade die neue Version installiert. Schöne Sache mit dem Refactoring!

                                The difference beetween Man and Boys:
                                The price of their toys 😀

                                1 Reply Last reply
                                0
                                • B Offline
                                  B Offline
                                  Blockmove
                                  wrote on last edited by
                                  #104

                                  @jogibear9988

                                  Hallo Jochen,
                                  mir ist ne Kleinigkeit aufgefallen:
                                  Wenn ich in der ioBroker Übersicht auf webui klicke, dann lande ich nicht auf der Runtime, sondern auch im Editor.

                                  Uebersicht.png

                                  Schönes Sonntag

                                  VG
                                  Dieter

                                  The difference beetween Man and Boys:
                                  The price of their toys 😀

                                  jogibear9988J 1 Reply Last reply
                                  0
                                  • B Blockmove

                                    @jogibear9988

                                    Hallo Jochen,
                                    mir ist ne Kleinigkeit aufgefallen:
                                    Wenn ich in der ioBroker Übersicht auf webui klicke, dann lande ich nicht auf der Runtime, sondern auch im Editor.

                                    Uebersicht.png

                                    Schönes Sonntag

                                    VG
                                    Dieter

                                    jogibear9988J Offline
                                    jogibear9988J Offline
                                    jogibear9988
                                    wrote on last edited by
                                    #105

                                    @blockmove
                                    sollte gefixt sein

                                    Check my ioBroker webui - a vis alternative
                                    see: https://github.com/iobroker-community-adapters/ioBroker.webui

                                    B 1 Reply Last reply
                                    1
                                    • jogibear9988J Offline
                                      jogibear9988J Offline
                                      jogibear9988
                                      wrote on last edited by
                                      #106

                                      Der refactor service, kann nun auch noch für text content benutzt werden.
                                      D.h. wenn ihr mehrere elemente mit dem gleichen text im content oder value selektiert, könnt ihr diesen damit auch refactorn.
                                      Wenn es da noch andere sinvolle möglichkeiten gibt, einfach melden.

                                      2ad460cb-aae6-4501-98d7-948b6f2e4fca-image.png

                                      Achso, um das refactoring anzuwenden, einfach "Enter" in der Textbox mit dem Wert drücken den Ihr ändern wollt.

                                      Check my ioBroker webui - a vis alternative
                                      see: https://github.com/iobroker-community-adapters/ioBroker.webui

                                      jogibear9988J 1 Reply Last reply
                                      0
                                      • jogibear9988J jogibear9988

                                        Der refactor service, kann nun auch noch für text content benutzt werden.
                                        D.h. wenn ihr mehrere elemente mit dem gleichen text im content oder value selektiert, könnt ihr diesen damit auch refactorn.
                                        Wenn es da noch andere sinvolle möglichkeiten gibt, einfach melden.

                                        2ad460cb-aae6-4501-98d7-948b6f2e4fca-image.png

                                        Achso, um das refactoring anzuwenden, einfach "Enter" in der Textbox mit dem Wert drücken den Ihr ändern wollt.

                                        jogibear9988J Offline
                                        jogibear9988J Offline
                                        jogibear9988
                                        wrote on last edited by
                                        #107

                                        @jogibear9988
                                        vlt würde das refactoring generell für alle attribute werte sinn machen? braucht das jemand?

                                        Check my ioBroker webui - a vis alternative
                                        see: https://github.com/iobroker-community-adapters/ioBroker.webui

                                        1 Reply Last reply
                                        0
                                        • jogibear9988J Offline
                                          jogibear9988J Offline
                                          jogibear9988
                                          wrote on last edited by
                                          #108

                                          So, nun gibt es auch eine (wenn auch noch recht simple), UI für die historic bindings...

                                          12a6efa8-1ea0-40f2-aa12-7a9f204e0473-image.png

                                          Was ihr da einstellen könnt, am besten in den verschiedenen history adapter nachlesen:
                                          https://github.com/ioBroker/ioBroker.influxdb#access-values-from-javascript-adapter

                                          Check my ioBroker webui - a vis alternative
                                          see: https://github.com/iobroker-community-adapters/ioBroker.webui

                                          1 Reply Last reply
                                          1
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          193

                                          Online

                                          32.4k

                                          Users

                                          81.3k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe