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
    11
    2
    227

  • 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.7k 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.
  • 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
                          • jogibear9988J jogibear9988

                            @blockmove
                            sollte gefixt sein

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

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

                            @blockmove
                            sollte gefixt sein

                            Funktioniert ... Vielen Dank!

                            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
                              #110

                              @jogibear9988

                              Hallo Jochen,

                              mal eine Idee:
                              Als Einsteiger tu ich mich noch manchmal mit der Bedienung schwer.
                              Und zwar ganz banale Dinge wie z.B.: Bei welchem Element passiert was bei Rechtsklick.
                              Ich musste neulich nochmal deine Youtube-Videos anschauen, weil ich nicht gefunden hab, wo ich Javascript erstellen kann. Wäre es möglich solche Elemente irgendwie zu kennzeichnen (farbiger Rahmen oder Ähnliches)?

                              VG
                              Dieter

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

                              jogibear9988J 1 Reply Last reply
                              0
                              • B Blockmove

                                @jogibear9988

                                Hallo Jochen,

                                mal eine Idee:
                                Als Einsteiger tu ich mich noch manchmal mit der Bedienung schwer.
                                Und zwar ganz banale Dinge wie z.B.: Bei welchem Element passiert was bei Rechtsklick.
                                Ich musste neulich nochmal deine Youtube-Videos anschauen, weil ich nicht gefunden hab, wo ich Javascript erstellen kann. Wäre es möglich solche Elemente irgendwie zu kennzeichnen (farbiger Rahmen oder Ähnliches)?

                                VG
                                Dieter

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

                                @blockmove
                                möglich ist alles, nur was ist intuitiv. Ich kann es meist schwer nachvollziehen, da ich das ganze entworfen habe, und mir es einfach klar ist.

                                Farbiger rahmen würde mir jetzt nicht wirklich gefallen, wie sähe das z.b., dann im script editor aus?
                                Und ist das intuitiv?

                                Vlt. ist das ganze rechtsklick zeugs auch nicht wirklich gut und man sollte es anders lösen?

                                Wo hab ich den rechtsklicks?

                                • projekt explorer -> dort finde ich passt es, ist ja auch in visualstudio so
                                • event button -> unintuitiv, buttons haben eig. kein rechtsklick, gute idee dazu?
                                • script editor, script element -> fraglich... gute idee dazu?
                                • script editor, property grid -> ebenso fraglich, gute idee dazu?
                                • designer -> finde ich dort schon intuitiv
                                • designer, propertygrid auf das kleine rechteck -> intuitiv?? kein plan, ideen?

                                mehr rechtsklicks gibts glaube nicht...

                                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
                                  möglich ist alles, nur was ist intuitiv. Ich kann es meist schwer nachvollziehen, da ich das ganze entworfen habe, und mir es einfach klar ist.

                                  Farbiger rahmen würde mir jetzt nicht wirklich gefallen, wie sähe das z.b., dann im script editor aus?
                                  Und ist das intuitiv?

                                  Vlt. ist das ganze rechtsklick zeugs auch nicht wirklich gut und man sollte es anders lösen?

                                  Wo hab ich den rechtsklicks?

                                  • projekt explorer -> dort finde ich passt es, ist ja auch in visualstudio so
                                  • event button -> unintuitiv, buttons haben eig. kein rechtsklick, gute idee dazu?
                                  • script editor, script element -> fraglich... gute idee dazu?
                                  • script editor, property grid -> ebenso fraglich, gute idee dazu?
                                  • designer -> finde ich dort schon intuitiv
                                  • designer, propertygrid auf das kleine rechteck -> intuitiv?? kein plan, ideen?

                                  mehr rechtsklicks gibts glaube nicht...

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

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

                                  @blockmove
                                  möglich ist alles, nur was ist intuitiv. Ich kann es meist schwer nachvollziehen, da ich das ganze entworfen habe, und mir es einfach klar ist.

                                  Farbiger rahmen würde mir jetzt nicht wirklich gefallen, wie sähe das z.b., dann im script editor aus?
                                  Und ist das intuitiv?

                                  Vlt. ist das ganze rechtsklick zeugs auch nicht wirklich gut und man sollte es anders lösen?

                                  Wo hab ich den rechtsklicks?

                                  • projekt explorer -> dort finde ich passt es, ist ja auch in visualstudio so
                                  • event button -> unintuitiv, buttons haben eig. kein rechtsklick, gute idee dazu?
                                  • script editor, script element -> fraglich... gute idee dazu?
                                  • script editor, property grid -> ebenso fraglich, gute idee dazu?
                                  • designer -> finde ich dort schon intuitiv
                                  • designer, propertygrid auf das kleine rechteck -> intuitiv?? kein plan, ideen?

                                  mehr rechtsklicks gibts glaube nicht...

                                  event button: Du hast dort ja auch noch die Funktion javascript.
                                  Event.png

                                  Vielleicht könnte man da auch das Add JS-Handler unterbringen.

                                  Im Zweifelsfall lieber nen extra Button hinzufügen. Die meisten haben doch mittlerweile sowieso mind. Full-HD.

                                  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
                                    möglich ist alles, nur was ist intuitiv. Ich kann es meist schwer nachvollziehen, da ich das ganze entworfen habe, und mir es einfach klar ist.

                                    Farbiger rahmen würde mir jetzt nicht wirklich gefallen, wie sähe das z.b., dann im script editor aus?
                                    Und ist das intuitiv?

                                    Vlt. ist das ganze rechtsklick zeugs auch nicht wirklich gut und man sollte es anders lösen?

                                    Wo hab ich den rechtsklicks?

                                    • projekt explorer -> dort finde ich passt es, ist ja auch in visualstudio so
                                    • event button -> unintuitiv, buttons haben eig. kein rechtsklick, gute idee dazu?
                                    • script editor, script element -> fraglich... gute idee dazu?
                                    • script editor, property grid -> ebenso fraglich, gute idee dazu?
                                    • designer -> finde ich dort schon intuitiv
                                    • designer, propertygrid auf das kleine rechteck -> intuitiv?? kein plan, ideen?

                                    mehr rechtsklicks gibts glaube nicht...

                                    event button: Du hast dort ja auch noch die Funktion javascript.
                                    Event.png

                                    Vielleicht könnte man da auch das Add JS-Handler unterbringen.

                                    Im Zweifelsfall lieber nen extra Button hinzufügen. Die meisten haben doch mittlerweile sowieso mind. Full-HD.

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

                                    @blockmove
                                    ja die funktion javascript hatte ich bevor man ganzen javascript ranhängen konnte. Bin nicht sicher ob man die noch braucht...

                                    Denke auch, extra buttons machen mehr sinn. Oder der button click öffnet das menü ob man ein simples script oder javascript möchte.

                                    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
                                      ja die funktion javascript hatte ich bevor man ganzen javascript ranhängen konnte. Bin nicht sicher ob man die noch braucht...

                                      Denke auch, extra buttons machen mehr sinn. Oder der button click öffnet das menü ob man ein simples script oder javascript möchte.

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

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

                                      @blockmove

                                      Oder der button click öffnet das menü ob man ein simples script oder javascript möchte.

                                      Die Idee finde ich gut. Ist ja ähnlich wie bei ioBroker Script. Da kommt auch die Abfrage welche Art (Javascript, Truescript, Blockly).

                                      Die Javascript-Integration ist übrigends echt eine klasse Sache in webui. Validierung von Eingaben und all solche Dinge machen wirklich vieles einfacher.

                                      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

                                        Oder der button click öffnet das menü ob man ein simples script oder javascript möchte.

                                        Die Idee finde ich gut. Ist ja ähnlich wie bei ioBroker Script. Da kommt auch die Abfrage welche Art (Javascript, Truescript, Blockly).

                                        Die Javascript-Integration ist übrigends echt eine klasse Sache in webui. Validierung von Eingaben und all solche Dinge machen wirklich vieles einfacher.

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

                                        @blockmove
                                        mein ziel war eigentlich, das man das meiste mit der integrierten scriptsprache erledigen kann 😉

                                        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
                                          mein ziel war eigentlich, das man das meiste mit der integrierten scriptsprache erledigen kann 😉

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

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

                                          @blockmove
                                          mein ziel war eigentlich, das man das meiste mit der integrierten scriptsprache erledigen kann 😉

                                          Naja für jede Aufgabe das geeignete Werkzeug 😀
                                          Ist auch nicht anders als bei Blockly und JavaScript.

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

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          58

                                          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