Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

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

Community Forum

  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.2k 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.
  • jogibear9988J jogibear9988

    @mage
    Das meta tag wird nix bringen, da das ganze html in einer webkomponente enthalten ist. brauchst du das denn? wenn ja kann ich noch was einbauen das man meta tags übergeben kann, oder html welches direkt in die runtime page eingebaut wird.

    es gibt einen javascript fehler in der chrome console, da popperjs nicht geladen werden kann. d.h. die teile von bootstrap die popper nutzen gehen nicht (kp, was von bootstrap das nutzt). Und das sollte gehen wenn es hinzufügst.

    ich würde den main content in einen extra screen packen und dann die screens umschalten, dann ist es für dich später vlt übersichtlicher (hab ich in meinem video zum menü erklärt). Kannst aber auch alles in einen screen packen und den content dann ein u. ausblenden...

    M Offline
    M Offline
    MaGe
    schrieb am zuletzt editiert von
    #54

    @jogibear9988

    Den meta tag benötige ich nicht unbedingt. Funktioniert auch so wie es soll.
    Das Paket @popperjs/core habe ich hinzugefügt.
    Danke nochmal für die Erklärung.

    Am WE werde ich mir das mit dem content nochmal anschauen und an der Struktur arbeiten.

    1 Antwort Letzte Antwort
    0
    • jogibear9988J jogibear9988

      Es gibt wieder eine Live Demo der WebUI, darin könnt Ihr rumspielen und probieren...

      http://129.159.205.3:8082/webui/index.html

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

      @jogibear9988 said in neue Visualiserung "webui" im stable repository:

      Es gibt wieder eine Live Demo der WebUI, darin könnt Ihr rumspielen und probieren...

      http://129.159.205.3:8082/webui/index.html

      Deine Visu hat nen schönen Vorteil für mich:
      Ich muss mich wieder mit HTML und CSS beschäftigen.
      Davor hab ich mich lang gedrückt 😊

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

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

        Neue Funktion: Upload von "addtional files".

        Damit könnt Ihr zusätzliche Dateien hochladen welche Ihr in eurer Visu verwenden wollt:

        7e5f5dd1-0e79-4ec0-95e3-13863260baf7-image.png

        Bspw. könnt Ihr ein SweetHome3D Projekt hochladen und dieses dann über die SweetHome3d Komponente anzeigen:

        f112c92d-6a4e-434b-8fd4-10b9400aca16-image.png

        Bsp. gibts hier: http://129.159.205.3:8082/webui/index.html

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

        1 Antwort Letzte Antwort
        0
        • B Offline
          B Offline
          Blockmove
          schrieb am zuletzt editiert von
          #57

          Hallo Jochen,

          ich hab in einem Control ein Event angelegt.
          Möchte ich nun das Event mit Remove Item entfernen, so funktioniert das nicht.

          RemoveItem.png

          webui: 0.15.1
          Node.js: 18.17.1
          Browser: Firefox

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

          jogibear9988J 2 Antworten Letzte Antwort
          0
          • B Blockmove

            Hallo Jochen,

            ich hab in einem Control ein Event angelegt.
            Möchte ich nun das Event mit Remove Item entfernen, so funktioniert das nicht.

            RemoveItem.png

            webui: 0.15.1
            Node.js: 18.17.1
            Browser: Firefox

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

            @blockmove

            Ist ein Script, welches du auf ein Event anlegst. 🙂

            Ja hast recht, ist durch die umstellung auf "Wunderbaum" kaputt gegangen. Fixe ich später, bzw. morgen.
            Zur Not kannst es im Moment mit umschalten auf den HTML Quellcode löschen

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

            B 1 Antwort Letzte Antwort
            0
            • jogibear9988J jogibear9988

              @blockmove

              Ist ein Script, welches du auf ein Event anlegst. 🙂

              Ja hast recht, ist durch die umstellung auf "Wunderbaum" kaputt gegangen. Fixe ich später, bzw. morgen.
              Zur Not kannst es im Moment mit umschalten auf den HTML Quellcode löschen

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

              @jogibear9988 said in neue Visualiserung "webui" im stable repository:

              @blockmove

              Ist ein Script, welches du auf ein Event anlegst. 🙂

              Ja hast recht, ist durch die umstellung auf "Wunderbaum" kaputt gegangen. Fixe ich später, bzw. morgen.
              Zur Not kannst es im Moment mit umschalten auf den HTML Quellcode löschen

              Das Editieren in der Split-View bzw. Code-View finde ich klasse in deiner webui!

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

              1 Antwort Letzte Antwort
              0
              • B Blockmove

                Hallo Jochen,

                ich hab in einem Control ein Event angelegt.
                Möchte ich nun das Event mit Remove Item entfernen, so funktioniert das nicht.

                RemoveItem.png

                webui: 0.15.1
                Node.js: 18.17.1
                Browser: Firefox

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

                @blockmove

                das im scripteditor ist gefixt

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

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

                  gibt noch einen neuen abschnitt im solution explorer: "global/font declaration style"
                  afb50a33-aa8c-420a-b17d-e88419616271-image.png

                  damit könnt ihr bspw. font declarations einfügen welche im root style hinzugefügt werden. denn custom fonts können nicht im shadowdom geladen werden.

                  dadurch könnt ihr über die "additionalFiles" auch eigene schriften einbinden. beispiel im live system das hier verlinkt ist.

                  7208b849-c116-4c3f-825c-b97737f50154-image.png

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

                  1 Antwort Letzte Antwort
                  0
                  • B Offline
                    B Offline
                    Blockmove
                    schrieb am zuletzt editiert von
                    #62

                    Hallo Jochen,
                    ich bastel gerade mein erstes CustomControl.
                    Dank deinem Video ist es auch recht einfach.
                    Einen Feature-Request hätte ich dazu:
                    Könntest du bitte die Reihenfolge der Properties änderbar machen.
                    Properties.png
                    Vielleicht "einfach" vor den del-Button einen Button für auf und ab?

                    Vielen Dank und Schönes Wochenende!

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

                    jogibear9988J 1 Antwort Letzte Antwort
                    0
                    • B Blockmove

                      Hallo Jochen,
                      ich bastel gerade mein erstes CustomControl.
                      Dank deinem Video ist es auch recht einfach.
                      Einen Feature-Request hätte ich dazu:
                      Könntest du bitte die Reihenfolge der Properties änderbar machen.
                      Properties.png
                      Vielleicht "einfach" vor den del-Button einen Button für auf und ab?

                      Vielen Dank und Schönes Wochenende!

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

                      @blockmove

                      schau ich mir an. Vlt. übernehm ich einfach das gleiche wie beim script editor.
                      Da kannst die Einträge per Drag/Drop verschieben

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

                      B 1 Antwort Letzte Antwort
                      0
                      • jogibear9988J jogibear9988

                        @blockmove

                        schau ich mir an. Vlt. übernehm ich einfach das gleiche wie beim script editor.
                        Da kannst die Einträge per Drag/Drop verschieben

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

                        @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                        @blockmove

                        schau ich mir an. Vlt. übernehm ich einfach das gleiche wie beim script editor.
                        Da kannst die Einträge per Drag/Drop verschieben

                        Drag und Drop geht natürlich genauso. Dann ist das Bedienkonzept einheitlich.
                        Die CustomControls sind auf jeden Fall richtig praktisch!

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

                        jogibear9988J 2 Antworten Letzte Antwort
                        0
                        • B Blockmove

                          @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                          @blockmove

                          schau ich mir an. Vlt. übernehm ich einfach das gleiche wie beim script editor.
                          Da kannst die Einträge per Drag/Drop verschieben

                          Drag und Drop geht natürlich genauso. Dann ist das Bedienkonzept einheitlich.
                          Die CustomControls sind auf jeden Fall richtig praktisch!

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

                          @blockmove
                          sind ja eigentlich auch nur webcomponenten. Das was man dort erstellt kann man auch ganz leicht als alleinstehende komponente veröffentlichen.

                          Was wir noch fehlt sind ein paar gescheite Standard Controls wie sie Vis mit ausliefert.

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

                          1 Antwort Letzte Antwort
                          0
                          • B Blockmove

                            @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                            @blockmove

                            schau ich mir an. Vlt. übernehm ich einfach das gleiche wie beim script editor.
                            Da kannst die Einträge per Drag/Drop verschieben

                            Drag und Drop geht natürlich genauso. Dann ist das Bedienkonzept einheitlich.
                            Die CustomControls sind auf jeden Fall richtig praktisch!

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

                            @blockmove
                            wenn etwas gebaut hast was auch für andre was ist, kannsts ja hier veröffentlichen 🙂

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

                            B 1 Antwort Letzte Antwort
                            0
                            • B Offline
                              B Offline
                              Blockmove
                              schrieb am zuletzt editiert von
                              #67

                              Hallo Jochen,

                              vielleicht stell ich mich zu blöd an, aber ich bekomme es einfach nicht gebacken.
                              Ich möchte einfach in einem CustomControl in einer Zeile die Werte von 3 Properties ausgeben.
                              Also so:
                              Solltemperatur 22.5°C Isttemperatur 20°C Ventilstellung 50%

                              Sowas muss doch eigentlich auch einfach ohne grid, flex oder Ähnliches gehen?

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

                              jogibear9988J 2 Antworten Letzte Antwort
                              0
                              • B Blockmove

                                Hallo Jochen,

                                vielleicht stell ich mich zu blöd an, aber ich bekomme es einfach nicht gebacken.
                                Ich möchte einfach in einem CustomControl in einer Zeile die Werte von 3 Properties ausgeben.
                                Also so:
                                Solltemperatur 22.5°C Isttemperatur 20°C Ventilstellung 50%

                                Sowas muss doch eigentlich auch einfach ohne grid, flex oder Ähnliches gehen?

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

                                @blockmove

                                So? test-control.control

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

                                jogibear9988J 1 Antwort Letzte Antwort
                                0
                                • jogibear9988J jogibear9988

                                  @blockmove
                                  wenn etwas gebaut hast was auch für andre was ist, kannsts ja hier veröffentlichen 🙂

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

                                  @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                                  @blockmove
                                  wenn etwas gebaut hast was auch für andre was ist, kannsts ja hier veröffentlichen 🙂

                                  Dazu muss ich meine HTML-Kenntnisse erstmal auf Vordermann bringen.
                                  Aber ich arbeite daran und aktuell finde ich auch etwas Zeit dazu.

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

                                  1 Antwort Letzte Antwort
                                  0
                                  • B Blockmove

                                    Hallo Jochen,

                                    vielleicht stell ich mich zu blöd an, aber ich bekomme es einfach nicht gebacken.
                                    Ich möchte einfach in einem CustomControl in einer Zeile die Werte von 3 Properties ausgeben.
                                    Also so:
                                    Solltemperatur 22.5°C Isttemperatur 20°C Ventilstellung 50%

                                    Sowas muss doch eigentlich auch einfach ohne grid, flex oder Ähnliches gehen?

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

                                    @blockmove
                                    hat mein beispiel geklappt? bzw war das das was du wolltest?

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

                                    B 1 Antwort Letzte Antwort
                                    0
                                    • jogibear9988J jogibear9988

                                      @blockmove

                                      So? test-control.control

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

                                      @jogibear9988

                                      in der komponente, wird die property von außen in das span element eingebunden. Wenn die property jedoch nicht gesetzt ist, steht "undefined" als text im control das kannst du so fixen:

                                      7d0498e7-30c5-4da4-8255-90be1d60524c-image.png
                                      (siehe formula)

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

                                      1 Antwort Letzte Antwort
                                      1
                                      • jogibear9988J jogibear9988

                                        @blockmove
                                        hat mein beispiel geklappt? bzw war das das was du wolltest?

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

                                        @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                                        @blockmove
                                        hat mein beispiel geklappt? bzw war das das was du wolltest?

                                        Danke Jochen,
                                        es hat funktioniert und war genau das wonach ich gesucht hatte.
                                        Eigentlich total simpel mit dem span-Element ... Wenn man es weiß. 👍
                                        Als vis-Umsteiger mit schlechten HTML-/CSS-Kentnissen sind es manchmal die einfachen Aufgaben, die schwierig sind.
                                        Irgendwie wär da ein Manual oder Wiki nicht verkehrt.
                                        Vielleicht auch ein weiteres Youtube Video.

                                        Schönen Sonntag und Viele Grüße
                                        Dieter

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

                                        jogibear9988J 1 Antwort Letzte Antwort
                                        0
                                        • B Blockmove

                                          @jogibear9988 said in neue Visualiserung "webui" im stable repository:

                                          @blockmove
                                          hat mein beispiel geklappt? bzw war das das was du wolltest?

                                          Danke Jochen,
                                          es hat funktioniert und war genau das wonach ich gesucht hatte.
                                          Eigentlich total simpel mit dem span-Element ... Wenn man es weiß. 👍
                                          Als vis-Umsteiger mit schlechten HTML-/CSS-Kentnissen sind es manchmal die einfachen Aufgaben, die schwierig sind.
                                          Irgendwie wär da ein Manual oder Wiki nicht verkehrt.
                                          Vielleicht auch ein weiteres Youtube Video.

                                          Schönen Sonntag und Viele Grüße
                                          Dieter

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

                                          @blockmove

                                          Ja bin da auf rückmeldung angewiesen was nicht klar bzw. einfach ist, da ich als entwickler dann nicht wirklich den blick dafür habe (für mich ist das meiste selbstverständlich).
                                          Zu HTML/CSS mach ich natürlich keine, dazu gibts ja zuhauf im Internet 🙂
                                          Und die helfen bei meiner webui ja schon viel weiter.

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

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          526

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