Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. neue Visualisierung "webui" (alternative zu vis & vis-2)

NEWS

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

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

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.1k

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
1.1k Beiträge 21 Kommentatoren 351.2k Aufrufe 19 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • TimKT TimK

    Hallo

    ich muss mal eine Frage zu den Bindings stellen.
    Irgendwo habe ich da etwas nicht verstanden.

    <input type="checkbox" bind-prop:checked="=0_userdata.0.Test"> 
    

    das funktioniert bei mir.

    Weil ich viele davon brauche, möchte ich daraus ein Control bauen

    <div>
        <input type="checkbox" bind-prop:checked="?this.signal"><span>Test</span>
    </div>
    

    so habe ich es dann eingebunden:

    <webui-button bind-prop: signal="0_userdata.0.Test"></webui-button>
    

    das wird aber leider nicht verbunden.

    Ich habe auf den Testseiten ja gesehen, das das bei Euch funktioniert.

    Ich habe mein Problem mal auf dem Testserver nachgebaut:
    der Screen heist dort: checkbox_Test.
    und das Control heist TimCheckbox

    liebe Grüße aus Hamburg

    jogibear9988J Offline
    jogibear9988J Offline
    jogibear9988
    schrieb am zuletzt editiert von jogibear9988
    #901

    @timk said in neue Visualisierung "webui" (alternative zu vis & vis-2):

    Hallo

    ich muss mal eine Frage zu den Bindings stellen.
    Irgendwo habe ich da etwas nicht verstanden.

    <input type="checkbox" bind-prop:checked="=0_userdata.0.Test"> 
    

    das funktioniert bei mir.

    Weil ich viele davon brauche, möchte ich daraus ein Control bauen

    <div>
        <input type="checkbox" bind-prop:checked="?this.signal"><span>Test</span>
    </div>
    

    so habe ich es dann eingebunden:

    <webui-button bind-prop: signal="0_userdata.0.Test"></webui-button>
    

    das wird aber leider nicht verbunden.

    Ich habe auf den Testseiten ja gesehen, das das bei Euch funktioniert.

    Ich habe mein Problem mal auf dem Testserver nachgebaut:
    der Screen heist dort: checkbox_Test.
    und das Control heist TimCheckbox

    liebe Grüße aus Hamburg

    Hab dein Beispiel gefixt, und noch ein 2tes dazu.

    Problem ist "bind-...." sind spezielle Bindings von WebUI, da gehört kein "this." dazu. In Custom Controls kannst du aber noch Bindings von meiner Custom Control Library machen, das sind die in "[[...]]". Die haben nix mit WebUI zu tun, sind auch nix spezielles für ioBroker, da muss man this verwenden da der code zwischen den Klammern eine Javascript Expression ist, man kann aber auch nicht auf IOB Objekte zugreifen....

    bei bind-... bedeutet ? zugriff auf das Signal in der Property und ?? zugriff auf den Property Wert

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

    1 Antwort Letzte Antwort
    0
    • jogibear9988J Offline
      jogibear9988J Offline
      jogibear9988
      schrieb am zuletzt editiert von
      #902

      Ich hab aus deinem jetzt 2 beispiele gemacht:

      b91f28e9-13c6-43e4-822b-f9fe1eac0c4c-image.png

      Deine Checkbox, bekommt den Wert eines IOB Objektes übergeben via bind-... die mit -two bekommt den Siganal Namen übergeben.

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

      TimKT 1 Antwort Letzte Antwort
      0
      • jogibear9988J jogibear9988

        Ich hab aus deinem jetzt 2 beispiele gemacht:

        b91f28e9-13c6-43e4-822b-f9fe1eac0c4c-image.png

        Deine Checkbox, bekommt den Wert eines IOB Objektes übergeben via bind-... die mit -two bekommt den Siganal Namen übergeben.

        TimKT Offline
        TimKT Offline
        TimK
        schrieb am zuletzt editiert von
        #903

        @jogibear9988 Dankeschön für die schnelle Antwort.

        und was muss ich noch ändern, damit das Signal in beide Richtungen übertragen wird?

        3e34ea4c-54e2-48e7-907f-74e0fcf99047-image.png

        es gibt noch viel zu lernen.

        jogibear9988J 1 Antwort Letzte Antwort
        0
        • TimKT TimK

          @jogibear9988 Dankeschön für die schnelle Antwort.

          und was muss ich noch ändern, damit das Signal in beide Richtungen übertragen wird?

          3e34ea4c-54e2-48e7-907f-74e0fcf99047-image.png

          es gibt noch viel zu lernen.

          jogibear9988J Offline
          jogibear9988J Offline
          jogibear9988
          schrieb am zuletzt editiert von jogibear9988
          #904

          @timk

          Innerhalb der custom controls:

          956703ed-ba99-4f9e-95ca-fd45c58b38cb-image.png

          dadurch wird dem binding dann ein "=" vorangestellt:

          03471296-3111-4a3b-b857-52cb8a7bc815-image.png

          1428f90f-8c50-4139-9aa4-d651517bab2f-image.png

          falls du ein anderes event als "changed" nutzen willst musst das auch noch angeben.
          ea286ff2-b616-488d-ae7a-729ad672ae2e-image.png

          Bei einer checkbox passt natürlich changed. Bei z.B. einer text inputbox kann es schon sinnvoll sein unterschiedliche events zu nutzen, je nach anforderung. Bspw. keydown, dann wird der wert bei jedem tastendurch geschrieben. Je nachdem was man will

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

          TimKT 1 Antwort Letzte Antwort
          0
          • jogibear9988J jogibear9988

            @timk

            Innerhalb der custom controls:

            956703ed-ba99-4f9e-95ca-fd45c58b38cb-image.png

            dadurch wird dem binding dann ein "=" vorangestellt:

            03471296-3111-4a3b-b857-52cb8a7bc815-image.png

            1428f90f-8c50-4139-9aa4-d651517bab2f-image.png

            falls du ein anderes event als "changed" nutzen willst musst das auch noch angeben.
            ea286ff2-b616-488d-ae7a-729ad672ae2e-image.png

            Bei einer checkbox passt natürlich changed. Bei z.B. einer text inputbox kann es schon sinnvoll sein unterschiedliche events zu nutzen, je nach anforderung. Bspw. keydown, dann wird der wert bei jedem tastendurch geschrieben. Je nachdem was man will

            TimKT Offline
            TimKT Offline
            TimK
            schrieb am zuletzt editiert von
            #905

            @jogibear9988 OK, ich glaub jetzt hab ich es verstanden.
            Danke und aller größte Achtung vor dem was Du hier gezaubert hast.

            1 Antwort Letzte Antwort
            0
            • Smilie108S Offline
              Smilie108S Offline
              Smilie108
              schrieb am zuletzt editiert von
              #906

              @jogibear9988 bin grad am überlegen das auch in einem erweiterten umfeld zu verwenden. Dazu aber eine frage ;) hast du schon mal eine Benutzerverwaltung gemacht ? Sprich festlegung ( verschiedene Ebenen ) wer was ändern darf und wer nur schauen darf oder kann / muss man das mit js regeln ?
              Mfg tom

              jogibear9988J 1 Antwort Letzte Antwort
              0
              • Smilie108S Smilie108

                @jogibear9988 bin grad am überlegen das auch in einem erweiterten umfeld zu verwenden. Dazu aber eine frage ;) hast du schon mal eine Benutzerverwaltung gemacht ? Sprich festlegung ( verschiedene Ebenen ) wer was ändern darf und wer nur schauen darf oder kann / muss man das mit js regeln ?
                Mfg tom

                jogibear9988J Offline
                jogibear9988J Offline
                jogibear9988
                schrieb am zuletzt editiert von
                #907

                @smilie108

                Ich hatte mir überlegt das einzubauen, bin aber noch nicht dazu gekommen.

                Ich hab ja in der Visu die ich für die Firma gebaut habe auch eine eingebaut.

                Geht es dir um runtime rechte, oder während dem editieren?

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

                Smilie108S 1 Antwort Letzte Antwort
                0
                • jogibear9988J jogibear9988

                  @smilie108

                  Ich hatte mir überlegt das einzubauen, bin aber noch nicht dazu gekommen.

                  Ich hab ja in der Visu die ich für die Firma gebaut habe auch eine eingebaut.

                  Geht es dir um runtime rechte, oder während dem editieren?

                  Smilie108S Offline
                  Smilie108S Offline
                  Smilie108
                  schrieb am zuletzt editiert von
                  #908

                  @jogibear9988 runtime rechte // bin grad dabie eventuel das als " Instandhaltervisu " zu testen dazu benötigt man aber verschiedene berechtigungen für sollwerte ändern usw Editor mache zb nur ich aber den könnte man ja mit iob mitteln sperren ;)
                  ( wie hast du das mit der anbindung zu s7 / Knx / gemacht ?)
                  Mfg tom

                  1 Antwort Letzte Antwort
                  0
                  • jogibear9988J Offline
                    jogibear9988J Offline
                    jogibear9988
                    schrieb am zuletzt editiert von
                    #909

                    So, nun gibts mal wieder ne neue version.

                    Hab an den overlays für transformierte elemente gearbeitet, diese funktionieren nun auch bei allen möglichen transformationen...

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

                    1 Antwort Letzte Antwort
                    2
                    • jogibear9988J Offline
                      jogibear9988J Offline
                      jogibear9988
                      schrieb am zuletzt editiert von
                      #910

                      Und wieder wurde am designer bisschen was verbessert:

                      RotationExtension funktioniert nun richtig,
                      der TransformOrigin kann verschoben werden,
                      Verschieben von gedrehten Elementen....

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

                      Smilie108S 1 Antwort Letzte Antwort
                      0
                      • jogibear9988J jogibear9988

                        Und wieder wurde am designer bisschen was verbessert:

                        RotationExtension funktioniert nun richtig,
                        der TransformOrigin kann verschoben werden,
                        Verschieben von gedrehten Elementen....

                        Smilie108S Offline
                        Smilie108S Offline
                        Smilie108
                        schrieb am zuletzt editiert von
                        #911

                        @jogibear9988 Hi mal ne frage
                        Hast du eigentlich sowas wie eine benutzerverwaltung schonmal mit dem gemacht / verwendet ?
                        werde sonst damit mal anfangen da ich das brauchen würde ;)
                        Mfg Tom

                        jogibear9988J 1 Antwort Letzte Antwort
                        0
                        • Smilie108S Smilie108

                          @jogibear9988 Hi mal ne frage
                          Hast du eigentlich sowas wie eine benutzerverwaltung schonmal mit dem gemacht / verwendet ?
                          werde sonst damit mal anfangen da ich das brauchen würde ;)
                          Mfg Tom

                          jogibear9988J Offline
                          jogibear9988J Offline
                          jogibear9988
                          schrieb am zuletzt editiert von
                          #912

                          @smilie108
                          ich wollte mal was bauen, bin aber noch nicht dazu gekommen.
                          kommt darauf an wie sicher das sein muss, je nach dem ist es mehr oder weniger arbeit.

                          In dem System in der firma hab ich sie gebaut, und da ist diese im backend & im frontend.
                          Wenn es in webui nur darum geht, das man was bestimmtes nicht dürfen soll, mit der browser console aber trotzdem alles kann dann ist es nicht so schwer.
                          Wenn es aber vom backend kommen soll und wirklich sicher, dann muss es im endeffekt schon in iobroker rein. Und da gibts ja was, aber in wie weit man die von einer eigenen visu aus nutzen kann...

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

                          1 Antwort Letzte Antwort
                          1
                          • jogibear9988J Offline
                            jogibear9988J Offline
                            jogibear9988
                            schrieb am zuletzt editiert von
                            #913

                            Bei uns in der Firma sieht das so aus:

                            Es gibt 3 Tabellen: Rechte, Gruppen und User.
                            (und dann noch ref Tabellen um rechte zu gruppen, und user zu gruppen zuzuordnen)

                            Signalen und Menüeinträgen und Schaltflächen kann man Rechte zuweisen. Wenn der User dann ein einer Gruppe ist die das recht hat, darf er die gewünschte operation, wobei die rechte die Signale zu beschreiben im Backend geprüft werden.

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

                            Smilie108S 1 Antwort Letzte Antwort
                            1
                            • jogibear9988J Offline
                              jogibear9988J Offline
                              jogibear9988
                              schrieb am zuletzt editiert von
                              #914
                              • Die overlays für Margin & Padding werden nun nur noch angezeigt, wenn das Margin oder das Padding Tool aktiv ist.
                                siehe: 1c5787c5-15c1-4c95-b699-219560c93e54-image.png
                              • Die Margin oder Padding Werte können dann über die Pfeil Tasten geändert werden.
                              • Die overlays sehen etwas schöner aus:
                                8adbd8c0-0566-4dc8-82f5-bd3e678c4024-image.png
                              • Bindings haben nun ein "WriteBackSignal", damit kann man bei einem komplexen Binding auf mehrere Signale, den berechneten wert in ein Signal zurückschreiben:
                                7724c5da-93d7-49ae-9bb8-9144cc580bf6-image.png

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

                              1 Antwort Letzte Antwort
                              0
                              • jogibear9988J jogibear9988

                                Bei uns in der Firma sieht das so aus:

                                Es gibt 3 Tabellen: Rechte, Gruppen und User.
                                (und dann noch ref Tabellen um rechte zu gruppen, und user zu gruppen zuzuordnen)

                                Signalen und Menüeinträgen und Schaltflächen kann man Rechte zuweisen. Wenn der User dann ein einer Gruppe ist die das recht hat, darf er die gewünschte operation, wobei die rechte die Signale zu beschreiben im Backend geprüft werden.

                                Smilie108S Offline
                                Smilie108S Offline
                                Smilie108
                                schrieb am zuletzt editiert von
                                #915

                                @jogibear9988 mhm kannst du mir sagen wo das mit den rechten bei den schaltflächen hast bzw kannst du mir ein Bsp. schicken ?
                                Apropos kann es sein das STRG-C usw nicht mehr gehen ?

                                Mfg Scönen Sonntag

                                jogibear9988J 2 Antworten Letzte Antwort
                                0
                                • Smilie108S Smilie108

                                  @jogibear9988 mhm kannst du mir sagen wo das mit den rechten bei den schaltflächen hast bzw kannst du mir ein Bsp. schicken ?
                                  Apropos kann es sein das STRG-C usw nicht mehr gehen ?

                                  Mfg Scönen Sonntag

                                  jogibear9988J Offline
                                  jogibear9988J Offline
                                  jogibear9988
                                  schrieb am zuletzt editiert von
                                  #916

                                  @smilie108

                                  hab doch gesagt bei uns in der Firma, in unserer Visu, nicht in iobroker WebUI.

                                  Problem ist ja das ich für webUi keine Userverwaltung implementiert habe.

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

                                  Smilie108S 1 Antwort Letzte Antwort
                                  0
                                  • Smilie108S Smilie108

                                    @jogibear9988 mhm kannst du mir sagen wo das mit den rechten bei den schaltflächen hast bzw kannst du mir ein Bsp. schicken ?
                                    Apropos kann es sein das STRG-C usw nicht mehr gehen ?

                                    Mfg Scönen Sonntag

                                    jogibear9988J Offline
                                    jogibear9988J Offline
                                    jogibear9988
                                    schrieb am zuletzt editiert von
                                    #917

                                    @smilie108 said in neue Visualisierung "webui" (alternative zu vis & vis-2):

                                    Apropos kann es sein das STRG-C usw nicht mehr gehen ?

                                    Mfg Scönen Sonntag

                                    ist mir heute auch schon aufgefallen, schau ich heute abend nach.
                                    Hab das was gefixt, das unter MacOS CMD und windows Ctrl genutzt wird, hab da glaub was falsch gemacht.

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

                                    1 Antwort Letzte Antwort
                                    0
                                    • jogibear9988J jogibear9988

                                      @smilie108

                                      hab doch gesagt bei uns in der Firma, in unserer Visu, nicht in iobroker WebUI.

                                      Problem ist ja das ich für webUi keine Userverwaltung implementiert habe.

                                      Smilie108S Offline
                                      Smilie108S Offline
                                      Smilie108
                                      schrieb am zuletzt editiert von
                                      #918

                                      @jogibear9988 ok ;) passt dachte du verwendest dort auch webui ;)

                                      1 Antwort Letzte Antwort
                                      0
                                      • Smilie108S Offline
                                        Smilie108S Offline
                                        Smilie108
                                        schrieb am zuletzt editiert von
                                        #919

                                        @jogibear9988 hi kann es sein das es da noch was ned ganz passt ? kann nicht sagen warum aber im chrom get der code edito in firefox nicht.

                                        B 1 Antwort Letzte Antwort
                                        0
                                        • Smilie108S Smilie108

                                          @jogibear9988 hi kann es sein das es da noch was ned ganz passt ? kann nicht sagen warum aber im chrom get der code edito in firefox nicht.

                                          B Offline
                                          B Offline
                                          Blockmove
                                          schrieb am zuletzt editiert von
                                          #920

                                          @smilie108 said in neue Visualisierung "webui" (alternative zu vis & vis-2):

                                          @jogibear9988 hi kann es sein das es da noch was ned ganz passt ? kann nicht sagen warum aber im chrom get der code edito in firefox nicht.

                                          Gerade getestet ... Ist bei mir auch so.
                                          Firefox geht's nicht, Edge / Chrome funktioniert.

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

                                          jogibear9988J 2 Antworten Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          553

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe