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

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

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

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

      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

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

        @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

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

          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.

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

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

            jogibear9988 1 Reply Last reply Reply Quote 0
            • jogibear9988
              jogibear9988 @TimK last edited by 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

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

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

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

                  @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

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

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

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

                      @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 Reply Last reply Reply Quote 0
                      • jogibear9988
                        jogibear9988 last edited by

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

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

                          Und wieder wurde am designer bisschen was verbessert:

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

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

                            @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

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

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

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

                                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.

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

                                  • 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
                                  1 Reply Last reply Reply Quote 0
                                  • Smilie108
                                    Smilie108 @jogibear9988 last edited by

                                    @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

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

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

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

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

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

                                          @jogibear9988 ok 😉 passt dachte du verwendest dort auch webui 😉

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

                                            @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 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            638
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

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