Skip to content
  • 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
  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.2k

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
1.1k Beiträge 21 Kommentatoren 348.1k Aufrufe 18 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.
  • 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
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    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 Online
      Smilie108S Online
      Smilie108
      schrieb am zuletzt editiert von
      #606

      @jogibear9988 wenn ich die seite wieder richtig habe gerne 😉

      jogibear9988J 1 Antwort Letzte Antwort
      0
      • Smilie108S Smilie108

        @jogibear9988 wenn ich die seite wieder richtig habe gerne 😉

        jogibear9988J Offline
        jogibear9988J Offline
        jogibear9988
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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 Online
          Smilie108S Online
          Smilie108
          schrieb am zuletzt editiert von
          #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 Antworten Letzte Antwort
          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
            schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              0
              • jogibear9988J Offline
                jogibear9988J Offline
                jogibear9988
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #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 Antworten Letzte Antwort
                  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 Online
                    Smilie108S Online
                    Smilie108
                    schrieb am zuletzt editiert von
                    #613

                    @jogibear9988
                    So hab mal die screenshot raufgeladen

                    jogibear9988J 1 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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 Antworten Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        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 Online
                          Smilie108S Online
                          Smilie108
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            0
                            • Smilie108S Smilie108

                              @jogibear9988
                              So hab mal die screenshot raufgeladen

                              jogibear9988J Offline
                              jogibear9988J Offline
                              jogibear9988
                              schrieb am zuletzt editiert von
                              #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 Antworten Letzte Antwort
                              0
                              • jogibear9988J jogibear9988

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

                                @jogibear9988
                                So hab mal die screenshot raufgeladen

                                danke

                                Smilie108S Online
                                Smilie108S Online
                                Smilie108
                                schrieb am zuletzt editiert von
                                #619

                                @jogibear9988 solltest vileicht im 1ten post verlinken 😉

                                1 Antwort Letzte Antwort
                                0
                                • jogibear9988J jogibear9988

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

                                  @jogibear9988
                                  So hab mal die screenshot raufgeladen

                                  danke

                                  Smilie108S Online
                                  Smilie108S Online
                                  Smilie108
                                  schrieb am zuletzt editiert von
                                  #620

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

                                  1 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von
                                      #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 Antworten Letzte Antwort
                                      0
                                      • jogibear9988J jogibear9988

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

                                        Smilie108S Online
                                        Smilie108S Online
                                        Smilie108
                                        schrieb am zuletzt editiert von
                                        #623

                                        @jogibear9988 hob da eh grad an kaffe wieder geschickt 😉

                                        1 Antwort Letzte Antwort
                                        1
                                        • jogibear9988J jogibear9988

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

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

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

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

                                          Wenn du im Designer Grid mehr unterstützen willst, willst du es dann in den html- oder den css-Code packen?
                                          Was ich mir vorstellen könnte wäre vielleicht eine Art Addon für Grid. Du erstellst interaktiv ein css-Grid und kannst dann im Designer das grid bzw. das grid-item zuweisen. Wäre sowas wie ein modularer Ansatz und eine Ergänzung zum bestehenden Designer.

                                          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

                                          608

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          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
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe