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)

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 jogibear9988

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

    @jogibear9988
    so ganz klein ist das Projekt jetzt nicht mehr habe inzwischen 19 screens plus ein paar popups 😉

    schau mal rein, wenn man die spans in den svgs und die rects außerhalb entfernt siehts gut aus

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

    @jogibear9988
    grad geschaut
    ja sieht gut aus aber zb ganz unten im code das habe ich schon öfter bemerkt gibt es das rec jetzt zb 8x ( zeile 297)

    jogibear9988J 2 Replies Last reply
    0
    • Smilie108S Smilie108

      @jogibear9988
      grad geschaut
      ja sieht gut aus aber zb ganz unten im code das habe ich schon öfter bemerkt gibt es das rec jetzt zb 8x ( zeile 297)

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

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

      @jogibear9988
      grad geschaut
      ja sieht gut aus aber zb ganz unten im code das habe ich schon öfter bemerkt gibt es das rec jetzt zb 8x ( zeile 297)

      Ja, vlt kannst du ja an einem einfachen beispiel nachstellen wie das passiert, dann kann ich das fixen

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

      1 Reply Last reply
      1
      • Smilie108S Smilie108

        @jogibear9988
        grad geschaut
        ja sieht gut aus aber zb ganz unten im code das habe ich schon öfter bemerkt gibt es das rec jetzt zb 8x ( zeile 297)

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

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

        @jogibear9988
        grad geschaut
        ja sieht gut aus aber zb ganz unten im code das habe ich schon öfter bemerkt gibt es das rec jetzt zb 8x ( zeile 297)

        Und vlt. kannst ja mal Screenshots deiner webUi hier posten (https://forum.iobroker.net/topic/72159/zeigt-her-eure-webui-visualisierung), dann kann man mal zeigen was damit möglich ist.

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

        Smilie108S 1 Reply Last reply
        1
        • jogibear9988J jogibear9988

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

          @jogibear9988
          grad geschaut
          ja sieht gut aus aber zb ganz unten im code das habe ich schon öfter bemerkt gibt es das rec jetzt zb 8x ( zeile 297)

          Und vlt. kannst ja mal Screenshots deiner webUi hier posten (https://forum.iobroker.net/topic/72159/zeigt-her-eure-webui-visualisierung), dann kann man mal zeigen was damit möglich ist.

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

          @jogibear9988 wenn ich die seite wieder richtig habe gerne 😉

          jogibear9988J 1 Reply Last reply
          0
          • Smilie108S Smilie108

            @jogibear9988 wenn ich die seite wieder richtig habe gerne 😉

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

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

            @jogibear9988 wenn ich die seite wieder richtig habe gerne 😉

            ich hab sie doch schon gefixt auf dem server 🙂

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

            Smilie108S 1 Reply Last reply
            1
            • jogibear9988J jogibear9988

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

              @jogibear9988 wenn ich die seite wieder richtig habe gerne 😉

              ich hab sie doch schon gefixt auf dem server 🙂

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

              @jogibear9988
              japp möchte aber grad noch ein paar Komentare im code einfügen
              <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

              jogibear9988J B 3 Replies Last reply
              0
              • Smilie108S Smilie108

                @jogibear9988
                japp möchte aber grad noch ein paar Komentare im code einfügen
                <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

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

                @smilie108

                wrap dir doch das zusammenghörige in div's.
                Einfach mehrere elemente mit "shift" anklicken, und dann rechte maustaste, "wrap in -> div"

                Am besten klicks du auch auf die SVGs mit deinen rechtecken (nicht auf das rect element selbst), und sagst "to back" dann kannst deine textblöcke usw. wieder anklicken: d3a75a7c-c4a8-4ef2-a392-ddf30883a679-image.png
                weil die dann nicht mehr dahinter sitzen.

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

                1 Reply Last reply
                0
                • Smilie108S Smilie108

                  @jogibear9988
                  japp möchte aber grad noch ein paar Komentare im code einfügen
                  <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

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

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

                  @jogibear9988
                  japp möchte aber grad noch ein paar Komentare im code einfügen
                  <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

                  Du kannst ja auch Teile wie z.B. deine Werteanzeigen (OG Bad Temperatur) in eigene SubScreens auslagern.
                  Macht die Sache gleich modularer übersichtlicher. Es muss ja nicht immer ein eigenes Control sein.

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

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

                    Achso, wisst ihr eigentlich:

                    • Wenn elemente übereinander liegen, mit Alt+Klick erreicht Ihr die darunter? (Oder Rechtsklick, items below)
                    • 2f7b0661-54b6-4bba-aa92-056587c41163-image.png damit könnt Ihr, Items sperren, dann kann man nicht auf sie klicken, Items ausblenden oder Items zur Runtime Zeit ausblenden?

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

                    1 Reply Last reply
                    0
                    • B Blockmove

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

                      @jogibear9988
                      japp möchte aber grad noch ein paar Komentare im code einfügen
                      <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

                      Du kannst ja auch Teile wie z.B. deine Werteanzeigen (OG Bad Temperatur) in eigene SubScreens auslagern.
                      Macht die Sache gleich modularer übersichtlicher. Es muss ja nicht immer ein eigenes Control sein.

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

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

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

                      @jogibear9988
                      japp möchte aber grad noch ein paar Komentare im code einfügen
                      <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

                      Du kannst ja auch Teile wie z.B. deine Werteanzeigen (OG Bad Temperatur) in eigene SubScreens auslagern.
                      Macht die Sache gleich modularer übersichtlicher. Es muss ja nicht immer ein eigenes Control sein.

                      Zumindest würde ich z.b. unten die Controls in 5 Divs packen ce469509-7610-450e-be4e-3d4bf5a69590-image.png
                      Und diese dann wieder in ein div welches ein CSS grid mit 2 Zeilen und 4 Spalten enthält.

                      Aber ja, für das "grid" fehlt einfach auch noch guter Designer support

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

                      Smilie108S B 2 Replies Last reply
                      0
                      • jogibear9988J jogibear9988

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

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

                        @jogibear9988
                        japp möchte aber grad noch ein paar Komentare im code einfügen
                        <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

                        Du kannst ja auch Teile wie z.B. deine Werteanzeigen (OG Bad Temperatur) in eigene SubScreens auslagern.
                        Macht die Sache gleich modularer übersichtlicher. Es muss ja nicht immer ein eigenes Control sein.

                        Zumindest würde ich z.b. unten die Controls in 5 Divs packen ce469509-7610-450e-be4e-3d4bf5a69590-image.png
                        Und diese dann wieder in ein div welches ein CSS grid mit 2 Zeilen und 4 Spalten enthält.

                        Aber ja, für das "grid" fehlt einfach auch noch guter Designer support

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

                        @jogibear9988
                        So hab mal die screenshot raufgeladen

                        jogibear9988J 1 Reply Last reply
                        0
                        • Smilie108S Smilie108

                          @jogibear9988
                          japp möchte aber grad noch ein paar Komentare im code einfügen
                          <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

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

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

                          @jogibear9988
                          japp möchte aber grad noch ein paar Komentare im code einfügen
                          <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

                          in deinem css brauchst eig auch nur das:

                          @keyframes strokeFullFBH {
                              0% {
                                  stroke-dashoffset: 100;
                              }
                          
                              100% {
                                  stroke-dashoffset: 0;
                              }
                          }
                          
                          .fbh {
                              animation: calc((102 - var(--speed)) * 0.3s) linear 0s infinite normal none running strokeFullFBH;
                              animation-play-state: var(--status);
                          }
                          

                          du kannst ja bei jedem control die variable "speed" an ein anderes objekt hängen (status natürlich auch)

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

                          jogibear9988J Smilie108S 2 Replies Last reply
                          0
                          • jogibear9988J jogibear9988

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

                            @jogibear9988
                            japp möchte aber grad noch ein paar Komentare im code einfügen
                            <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

                            in deinem css brauchst eig auch nur das:

                            @keyframes strokeFullFBH {
                                0% {
                                    stroke-dashoffset: 100;
                                }
                            
                                100% {
                                    stroke-dashoffset: 0;
                                }
                            }
                            
                            .fbh {
                                animation: calc((102 - var(--speed)) * 0.3s) linear 0s infinite normal none running strokeFullFBH;
                                animation-play-state: var(--status);
                            }
                            

                            du kannst ja bei jedem control die variable "speed" an ein anderes objekt hängen (status natürlich auch)

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

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

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

                            @jogibear9988
                            japp möchte aber grad noch ein paar Komentare im code einfügen
                            <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

                            in deinem css brauchst eig auch nur das:

                            @keyframes strokeFullFBH {
                                0% {
                                    stroke-dashoffset: 100;
                                }
                            
                                100% {
                                    stroke-dashoffset: 0;
                                }
                            }
                            
                            .fbh {
                                animation: calc((102 - var(--speed)) * 0.3s) linear 0s infinite normal none running strokeFullFBH;
                                animation-play-state: var(--status);
                            }
                            

                            du kannst ja bei jedem control die variable "speed" an ein anderes objekt hängen (status natürlich auch)

                            und reverse kannst dann direkt beim einen objekt in den style schreiben

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

                            1 Reply Last reply
                            0
                            • jogibear9988J jogibear9988

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

                              @jogibear9988
                              japp möchte aber grad noch ein paar Komentare im code einfügen
                              <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

                              in deinem css brauchst eig auch nur das:

                              @keyframes strokeFullFBH {
                                  0% {
                                      stroke-dashoffset: 100;
                                  }
                              
                                  100% {
                                      stroke-dashoffset: 0;
                                  }
                              }
                              
                              .fbh {
                                  animation: calc((102 - var(--speed)) * 0.3s) linear 0s infinite normal none running strokeFullFBH;
                                  animation-play-state: var(--status);
                              }
                              

                              du kannst ja bei jedem control die variable "speed" an ein anderes objekt hängen (status natürlich auch)

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

                              @jogibear9988

                              das ist durchaus möglich hatte das nur so aus der anleitung von den movable svgs und ( hate es unter vis schon so laufen 😉 paste and copy 😉

                              jogibear9988J 1 Reply Last reply
                              0
                              • Smilie108S Smilie108

                                @jogibear9988

                                das ist durchaus möglich hatte das nur so aus der anleitung von den movable svgs und ( hate es unter vis schon so laufen 😉 paste and copy 😉

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

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

                                @jogibear9988

                                das ist durchaus möglich hatte das nur so aus der anleitung von den movable svgs und ( hate es unter vis schon so laufen 😉 paste and copy 😉

                                klar, optimieren kann man immer noch. Bin nur ein freund von weniger css & code, ist ja meist übersichtlicher

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

                                1 Reply Last reply
                                0
                                • Smilie108S Smilie108

                                  @jogibear9988
                                  So hab mal die screenshot raufgeladen

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

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

                                  @jogibear9988
                                  So hab mal die screenshot raufgeladen

                                  danke

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

                                  Smilie108S 2 Replies Last reply
                                  0
                                  • jogibear9988J jogibear9988

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

                                    @jogibear9988
                                    So hab mal die screenshot raufgeladen

                                    danke

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

                                    @jogibear9988 solltest vileicht im 1ten post verlinken 😉

                                    1 Reply Last reply
                                    0
                                    • jogibear9988J jogibear9988

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

                                      @jogibear9988
                                      So hab mal die screenshot raufgeladen

                                      danke

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

                                      @jogibear9988
                                      Habe gestern den ganzen abend damit verbracht alles auf das auschwenkbare menue umzustellen 😉
                                      das geht jetzt auch ganz gut

                                      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
                                        japp möchte aber grad noch ein paar Komentare im code einfügen
                                        <!-- Aktueller Tag --> zb dann finde ich selber die sachen schneller wieder bei sovielen zeilen wird das etwas unübersichtlich

                                        Du kannst ja auch Teile wie z.B. deine Werteanzeigen (OG Bad Temperatur) in eigene SubScreens auslagern.
                                        Macht die Sache gleich modularer übersichtlicher. Es muss ja nicht immer ein eigenes Control sein.

                                        Zumindest würde ich z.b. unten die Controls in 5 Divs packen ce469509-7610-450e-be4e-3d4bf5a69590-image.png
                                        Und diese dann wieder in ein div welches ein CSS grid mit 2 Zeilen und 4 Spalten enthält.

                                        Aber ja, für das "grid" fehlt einfach auch noch guter Designer support

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

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

                                        Aber ja, für das "grid" fehlt einfach auch noch guter Designer support

                                        Ich nehm grid recht oft.
                                        Die bestehenden Möglichkeiten des Designers hab ich dazu noch nie genutzt.
                                        Ich mach das immer im Quellcode und da ist die Splitview und das direkte Editieren im HTML- und CSS-Code einfach nur klasse.

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

                                        jogibear9988J 1 Reply Last reply
                                        0
                                        • B Blockmove

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

                                          Aber ja, für das "grid" fehlt einfach auch noch guter Designer support

                                          Ich nehm grid recht oft.
                                          Die bestehenden Möglichkeiten des Designers hab ich dazu noch nie genutzt.
                                          Ich mach das immer im Quellcode und da ist die Splitview und das direkte Editieren im HTML- und CSS-Code einfach nur klasse.

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

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

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

                                          Aber ja, für das "grid" fehlt einfach auch noch guter Designer support

                                          Ich nehm grid recht oft.
                                          Die bestehenden Möglichkeiten des Designers hab ich dazu noch nie genutzt.

                                          ==> die sind ja auch bescheiden.

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

                                          Smilie108S B 2 Replies 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

                                          634

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          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