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

  • 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.8k

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

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

    selection im split view text, selektiert nun auch im designer

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

      Simlere Binding Syntax mit expressions:

      Wenn Ihr in euerem Binding nun nur Variablen habt, und Expressions ohne ";" und ohne Zeilenumbruch, dann werden die bindings so ins HTML geschrieben:

       <div bind-content:html="a:a.b.cvar1;b:a.b.c.varb;a + ' ' + b">
      

      das heißt, auch die bindings mit expressions sollten in HTML lesbar sein.

      Nun ist noch die Frage, brauchen wir noch bindings im CSS editor? Hatte mit überlegt, z.b.: mit 2 klammern : ”{{bindingexpression}}" ein binding zu erzeugen.
      Wird sowas benötigt?
      Es geht ja auch jetzt schon, wenn ich CSS Variablen nutze, und die außerhalb an einem Control Binde.
      Ich könnte natürlich über die Expression auch einfach dynamisch eine CSS Variable erzeugen (dann könnte man das binding aber nur für einfache css werte nutzen), oder ich ersetze jedes mal wenn sich am binding was ändert immer wieder den ganzen style (ist sicher langsamer, aber merkt man es? aber dadurch wäre auch mehr möglich)

      Bsp:

       {
          width: calc({{a.b.c}} * 1px)
          height: {{a:c.d.e;a + 'px'}}
       }
      

      ginge mit Variante 1 und 2. Bei Variante1 würde ich das entsprechend so transformieren:

       {
          width: calc(var(--tmpVar1) * 1px);
          height: var(--tmpVar2);
       }
      

      das folgende:

       {
           {{v:a.b.c;'width : ' + v + 'px'}}
       }
      

      ginge nur mit Variante 2, die frage ist bräuchte man das? Also das Ihr dynamisch per binding nicht nur werte, sondern auch css properties hinzufügt.

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

      Smilie108S 1 Reply Last reply
      0
      • jogibear9988J jogibear9988

        Simlere Binding Syntax mit expressions:

        Wenn Ihr in euerem Binding nun nur Variablen habt, und Expressions ohne ";" und ohne Zeilenumbruch, dann werden die bindings so ins HTML geschrieben:

         <div bind-content:html="a:a.b.cvar1;b:a.b.c.varb;a + ' ' + b">
        

        das heißt, auch die bindings mit expressions sollten in HTML lesbar sein.

        Nun ist noch die Frage, brauchen wir noch bindings im CSS editor? Hatte mit überlegt, z.b.: mit 2 klammern : ”{{bindingexpression}}" ein binding zu erzeugen.
        Wird sowas benötigt?
        Es geht ja auch jetzt schon, wenn ich CSS Variablen nutze, und die außerhalb an einem Control Binde.
        Ich könnte natürlich über die Expression auch einfach dynamisch eine CSS Variable erzeugen (dann könnte man das binding aber nur für einfache css werte nutzen), oder ich ersetze jedes mal wenn sich am binding was ändert immer wieder den ganzen style (ist sicher langsamer, aber merkt man es? aber dadurch wäre auch mehr möglich)

        Bsp:

         {
            width: calc({{a.b.c}} * 1px)
            height: {{a:c.d.e;a + 'px'}}
         }
        

        ginge mit Variante 1 und 2. Bei Variante1 würde ich das entsprechend so transformieren:

         {
            width: calc(var(--tmpVar1) * 1px);
            height: var(--tmpVar2);
         }
        

        das folgende:

         {
             {{v:a.b.c;'width : ' + v + 'px'}}
         }
        

        ginge nur mit Variante 2, die frage ist bräuchte man das? Also das Ihr dynamisch per binding nicht nur werte, sondern auch css properties hinzufügt.

        Smilie108S Offline
        Smilie108S Offline
        Smilie108
        wrote on last edited by
        #529

        @jogibear9988 sagte in neue Visualisierung "webui" (alternative zu vis):

        hi jochen
        Habe mich inzwischen mit der mittleren variate angefreundet dann kannst du eh sogut wie alles machen ( mit namen muss mann halt ein wenig erfinderisch sein 😉 )
        mir langt das weis jetzt nicht ob das andere notwendig ist.

        Das was mir noch kopfzerbrechen macht aber ich glaube ich fange da mal wieder falsch an ist das ich zb einen navigationstree erstellen wollte ( eigene seite) und dann in dieser javascript verwenden wollte. ( Standart kopiert) das geht aber garnicht.

        z.b.
        https://github.com/gero1992/side-menu
        oder zb.:
        https://www.w3schools.com/howto/howto_js_treeview.asp

        aber da ich auch sonst noch genug zu tun habe habe ich das nach hinten verschoben 😉

        MFG und DANKE bis jeztt geht das eht inzwischen richtig gut wenn man mal etwas sich reingefuchst hat 😉

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

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

          https://github.com/gero1992/side-menu

          2 Probleme:

          • du musst das als NPM Paket hinzufügen: "@maksu/side-menu", da er aber eine alter version von lit-element nutzt, und aber eine neue version von lit-html installiert sein kann, gibts bei mir z.b. probleme, daher muss ich auch das npm paket "lit-element@latest" hinzufügen.
          • da er im NPM Paket nur auf "side-menu.js" verweist, muss man "side-menu-item.js" selber importieren. Das sollte er im Paket am besten fixen. (issue dazu: https://github.com/gero1992/side-menu/issues/2 (upvoten))

          e4fbccec-e9ad-4ea0-bb39-acfb1404ff1e-image.png

          jogibear9988 created this issue in gero1992/side-menu

          closed Import "side-menu-item.js" from "side-menu" #2

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

          1 Reply Last reply
          0
          • Smilie108S Smilie108

            @jogibear9988 sagte in neue Visualisierung "webui" (alternative zu vis):

            hi jochen
            Habe mich inzwischen mit der mittleren variate angefreundet dann kannst du eh sogut wie alles machen ( mit namen muss mann halt ein wenig erfinderisch sein 😉 )
            mir langt das weis jetzt nicht ob das andere notwendig ist.

            Das was mir noch kopfzerbrechen macht aber ich glaube ich fange da mal wieder falsch an ist das ich zb einen navigationstree erstellen wollte ( eigene seite) und dann in dieser javascript verwenden wollte. ( Standart kopiert) das geht aber garnicht.

            z.b.
            https://github.com/gero1992/side-menu
            oder zb.:
            https://www.w3schools.com/howto/howto_js_treeview.asp

            aber da ich auch sonst noch genug zu tun habe habe ich das nach hinten verschoben 😉

            MFG und DANKE bis jeztt geht das eht inzwischen richtig gut wenn man mal etwas sich reingefuchst hat 😉

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

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

            Habe mich inzwischen mit der mittleren variate angefreundet dann kannst du eh sogut wie alles machen ( mit namen muss mann halt ein wenig erfinderisch sein 😉 )
            mir langt das weis jetzt nicht ob das andere notwendig ist.

            Ich schließ mich da an.

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

              Hallo Jochen,

              ich habe gerade etwas "entdeckt".

              Ich habe bei mir einige Screens in einen Ordner "subscreen" verschoben.
              Will ich nun in der Splitview den Ordnernamen ändern, so wird die Änderung nicht übernommen.
              subscreen1.png
              In der Property wird Namen des Unterordners nicht übernommen.

              Wenn ich den Screename direkt in der Property ändere, dann funktioniert es.
              subscreen2.png

              Version: 1.0.19

              VG
              Dieter

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

              jogibear9988J 1 Reply Last reply
              0
              • H Do not disturb
                H Do not disturb
                Hansi1234
                wrote on last edited by
                #533

                Hi, ich konnte jetzt auf die schnelle nichts finden.
                Gibt es in webui so etwas wie ein circle Menü?
                Fhem hat sowas zb
                link

                jogibear9988J 1 Reply Last reply
                0
                • B Blockmove

                  Hallo Jochen,

                  ich habe gerade etwas "entdeckt".

                  Ich habe bei mir einige Screens in einen Ordner "subscreen" verschoben.
                  Will ich nun in der Splitview den Ordnernamen ändern, so wird die Änderung nicht übernommen.
                  subscreen1.png
                  In der Property wird Namen des Unterordners nicht übernommen.

                  Wenn ich den Screename direkt in der Property ändere, dann funktioniert es.
                  subscreen2.png

                  Version: 1.0.19

                  VG
                  Dieter

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

                  @blockmove said in neue Visualisierung "webui" (alternative zu vis):

                  Hallo Jochen,

                  ich habe gerade etwas "entdeckt".

                  Ich habe bei mir einige Screens in einen Ordner "subscreen" verschoben.
                  Will ich nun in der Splitview den Ordnernamen ändern, so wird die Änderung nicht übernommen.
                  subscreen1.png
                  In der Property wird Namen des Unterordners nicht übernommen.

                  Wenn ich den Screename direkt in der Property ändere, dann funktioniert es.
                  subscreen2.png

                  Version: 1.0.19

                  VG
                  Dieter

                  sollte gefixt sein, kamm durch mein umbau das man auch im split view im text elemente selektieren kann

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

                  1 Reply Last reply
                  0
                  • H Hansi1234

                    Hi, ich konnte jetzt auf die schnelle nichts finden.
                    Gibt es in webui so etwas wie ein circle Menü?
                    Fhem hat sowas zb
                    link

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

                    @hansi1234 said in neue Visualisierung "webui" (alternative zu vis):

                    Hi, ich konnte jetzt auf die schnelle nichts finden.
                    Gibt es in webui so etwas wie ein circle Menü?
                    Fhem hat sowas zb
                    link

                    bspw: https://www.fabiovitali.it/radial/

                    hab auch noch das gefunden: https://github.com/mmontoya/radial-menu
                    ist ne webcomponente, geht aber gerade nicht, stencil erzeugt keinen code den man direkt als esm im browser importieren kann

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

                      Screen "radialmenu" im testserver

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

                      H 1 Reply Last reply
                      1
                      • jogibear9988J jogibear9988

                        Screen "radialmenu" im testserver

                        H Do not disturb
                        H Do not disturb
                        Hansi1234
                        wrote on last edited by
                        #537

                        @jogibear9988 puh, ich muss hier Mal mein Dank für deine erbrachte Arbeit da lassen. Vielen Dank!!! 😊

                        1 Reply Last reply
                        1
                        • Smilie108S Offline
                          Smilie108S Offline
                          Smilie108
                          wrote on last edited by Smilie108
                          #538

                          @jogibear9988
                          Verständnissfrage
                          wenn ich Screenshot 2024-01-20 062324.png
                          Dann ist alles ok mit wert übertragung

                          Wenn ich aber
                          676039e9-2dcd-4848-bf5d-3fd80c6c13d0-grafik.png
                          mache dann löscht er beim speichern das two way binding
                          ist das ein bug ?
                          nach dem speichern und wieder öffen sieht es dann so aus
                          ec522054-594a-4266-9321-2a2695e59bc2-grafik.png

                          B jogibear9988J 2 Replies Last reply
                          0
                          • Smilie108S Smilie108

                            @jogibear9988
                            Verständnissfrage
                            wenn ich Screenshot 2024-01-20 062324.png
                            Dann ist alles ok mit wert übertragung

                            Wenn ich aber
                            676039e9-2dcd-4848-bf5d-3fd80c6c13d0-grafik.png
                            mache dann löscht er beim speichern das two way binding
                            ist das ein bug ?
                            nach dem speichern und wieder öffen sieht es dann so aus
                            ec522054-594a-4266-9321-2a2695e59bc2-grafik.png

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

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

                            @jogibear9988
                            Verständnissfrage

                            Wenn ich aber
                            676039e9-2dcd-4848-bf5d-3fd80c6c13d0-grafik.png
                            mache dann löscht er beim speichern das two way binding
                            ist das ein bug ?

                            Das Verhalten hab ich auch, allerdings nur wenn type ignore gewählt ist.
                            Wähle ich type number funktioniert das twoway-Binding.
                            Wenn du type ignore nimmst, dann bekommst du im ioBroker-Protokoll auch die Meldung 'State value to set for "0_userdata.0.Test.stateZahl" has to be type "number" but received type "string" '.

                            @jogibear9988
                            Vielleicht wäre es sinnvoll default das twoway-Bindung deaktiviert zu lassen und wenn man es anwählt muss zuätzlich der Typ gewählt werden.

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

                            jogibear9988J 1 Reply Last reply
                            0
                            • Smilie108S Smilie108

                              @jogibear9988
                              Verständnissfrage
                              wenn ich Screenshot 2024-01-20 062324.png
                              Dann ist alles ok mit wert übertragung

                              Wenn ich aber
                              676039e9-2dcd-4848-bf5d-3fd80c6c13d0-grafik.png
                              mache dann löscht er beim speichern das two way binding
                              ist das ein bug ?
                              nach dem speichern und wieder öffen sieht es dann so aus
                              ec522054-594a-4266-9321-2a2695e59bc2-grafik.png

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

                              @smilie108

                              ist schon ein bug, aber ist es das was du willst? Wenn es gelesen wird fügst du °C hinzu, wenn nu was eingegeben wird, willst du das °C nicht wegschneiden?

                              Ich fixe es aber

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

                              Smilie108S 1 Reply Last reply
                              0
                              • B Blockmove

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

                                @jogibear9988
                                Verständnissfrage

                                Wenn ich aber
                                676039e9-2dcd-4848-bf5d-3fd80c6c13d0-grafik.png
                                mache dann löscht er beim speichern das two way binding
                                ist das ein bug ?

                                Das Verhalten hab ich auch, allerdings nur wenn type ignore gewählt ist.
                                Wähle ich type number funktioniert das twoway-Binding.
                                Wenn du type ignore nimmst, dann bekommst du im ioBroker-Protokoll auch die Meldung 'State value to set for "0_userdata.0.Test.stateZahl" has to be type "number" but received type "string" '.

                                @jogibear9988
                                Vielleicht wäre es sinnvoll default das twoway-Bindung deaktiviert zu lassen und wenn man es anwählt muss zuätzlich der Typ gewählt werden.

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

                                @blockmove said in neue Visualisierung "webui" (alternative zu vis):

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

                                @jogibear9988
                                Verständnissfrage

                                Wenn ich aber
                                676039e9-2dcd-4848-bf5d-3fd80c6c13d0-grafik.png
                                mache dann löscht er beim speichern das two way binding
                                ist das ein bug ?

                                Das Verhalten hab ich auch, allerdings nur wenn type ignore gewählt ist.
                                Wähle ich type number funktioniert das twoway-Binding.
                                Wenn du type ignore nimmst, dann bekommst du im ioBroker-Protokoll auch die Meldung 'State value to set for "0_userdata.0.Test.stateZahl" has to be type "number" but received type "string" '.

                                @jogibear9988
                                Vielleicht wäre es sinnvoll default das twoway-Bindung deaktiviert zu lassen und wenn man es anwählt muss zuätzlich der Typ gewählt werden.

                                nö wieso, der typ ist ja oft egal

                                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 said in neue Visualisierung "webui" (alternative zu vis):

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

                                  @jogibear9988
                                  Verständnissfrage

                                  Wenn ich aber
                                  676039e9-2dcd-4848-bf5d-3fd80c6c13d0-grafik.png
                                  mache dann löscht er beim speichern das two way binding
                                  ist das ein bug ?

                                  Das Verhalten hab ich auch, allerdings nur wenn type ignore gewählt ist.
                                  Wähle ich type number funktioniert das twoway-Binding.
                                  Wenn du type ignore nimmst, dann bekommst du im ioBroker-Protokoll auch die Meldung 'State value to set for "0_userdata.0.Test.stateZahl" has to be type "number" but received type "string" '.

                                  @jogibear9988
                                  Vielleicht wäre es sinnvoll default das twoway-Bindung deaktiviert zu lassen und wenn man es anwählt muss zuätzlich der Typ gewählt werden.

                                  nö wieso, der typ ist ja oft egal

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

                                  @jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

                                  Vielleicht wäre es sinnvoll default das twoway-Bindung deaktiviert zu lassen und wenn man es anwählt muss zuätzlich der Typ gewählt werden.

                                  nö wieso, der typ ist ja oft egal

                                  Naja, da schlägt der SPS'ler in mir durch. Ich hab halt einfach gern Typsicherheit. 😊

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

                                  1 Reply Last reply
                                  0
                                  • jogibear9988J jogibear9988

                                    @smilie108

                                    ist schon ein bug, aber ist es das was du willst? Wenn es gelesen wird fügst du °C hinzu, wenn nu was eingegeben wird, willst du das °C nicht wegschneiden?

                                    Ich fixe es aber

                                    Smilie108S Offline
                                    Smilie108S Offline
                                    Smilie108
                                    wrote on last edited by
                                    #543

                                    @jogibear9988
                                    eigentlich schon reture als zahl nur wie das wegschneiden wieder geht bi ich noch nicht dahinter gekommen

                                    B Smilie108S 2 Replies Last reply
                                    0
                                    • Smilie108S Smilie108

                                      @jogibear9988
                                      eigentlich schon reture als zahl nur wie das wegschneiden wieder geht bi ich noch nicht dahinter gekommen

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

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

                                      @jogibear9988
                                      eigentlich schon reture als zahl nur wie das wegschneiden wieder geht bi ich noch nicht dahinter gekommen

                                      Wenn du nen Typ angibst brauchst du nix wegschneiden

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

                                      1 Reply Last reply
                                      1
                                      • Smilie108S Smilie108

                                        @jogibear9988
                                        eigentlich schon reture als zahl nur wie das wegschneiden wieder geht bi ich noch nicht dahinter gekommen

                                        Smilie108S Offline
                                        Smilie108S Offline
                                        Smilie108
                                        wrote on last edited by
                                        #545

                                        @smilie108
                                        am liebsten würde ich
                                        d03e0897-a938-4e3d-be6b-57c0e2d92301-grafik.png
                                        machen
                                        aber wie das geht leider nicht dann bekomme ich nur weises input feld

                                        jogibear9988J 2 Replies Last reply
                                        0
                                        • Smilie108S Smilie108

                                          @smilie108
                                          am liebsten würde ich
                                          d03e0897-a938-4e3d-be6b-57c0e2d92301-grafik.png
                                          machen
                                          aber wie das geht leider nicht dann bekomme ich nur weises input feld

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

                                          @smilie108

                                          hätte jetzt erwartet das das geht, ich probiere

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

                                          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

                                          332

                                          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