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.
  • W Worlik

    @jogibear9988 Gibt es eigentlich einen offiziellen Weg, wie ich Schrift einbinden kann? Ich habe es jetzt über die "Additional Files" versucht und die Schrift dann im CSS so eingebunden:

    @font-face {
      font-family: 'Indie Flower';
      src: url('/webui.0.data/config/additionalfiles/IndieFlower.woff2') format('woff2'),
           url('/webui.0.data/config/additionalfiles/IndieFlower.woff') format('woff'),
           url('/webui.0.data/config/additionalfiles/IndieFlower.svg#IndieFlower') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    

    Leider scheint die Font nicht geladen zu werden und ich sehe gerade noch nicht so recht wieso. Hättest du einen Tipp?

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

    @worlik

    schriften müssen im style im html dokument sein, schau auf meinem server unter:

    91a00514-53d6-4933-a79d-f46dee9d8dd0-image.png

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

    1 Reply Last reply
    0
    • W Worlik

      @jogibear9988 Gibt es eigentlich einen offiziellen Weg, wie ich Schrift einbinden kann? Ich habe es jetzt über die "Additional Files" versucht und die Schrift dann im CSS so eingebunden:

      @font-face {
        font-family: 'Indie Flower';
        src: url('/webui.0.data/config/additionalfiles/IndieFlower.woff2') format('woff2'),
             url('/webui.0.data/config/additionalfiles/IndieFlower.woff') format('woff'),
             url('/webui.0.data/config/additionalfiles/IndieFlower.svg#IndieFlower') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
      

      Leider scheint die Font nicht geladen zu werden und ich sehe gerade noch nicht so recht wieso. Hättest du einen Tipp?

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

      @worlik

      leider kann man schriften nicht im css im shadowdom laden...

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

      W 1 Reply Last reply
      0
      • jogibear9988J jogibear9988

        @worlik

        leider kann man schriften nicht im css im shadowdom laden...

        W Offline
        W Offline
        Worlik
        wrote on last edited by
        #272

        @jogibear9988 340e463e-0b2d-4c11-ac32-8bca595fd575-image.png

        Habe alle Dateien gespeichert und auch einmal den gesamten Designer neu geladen. Weder in der Preview noch in der Runtime taucht die Font auf. Ich suche mal weiter nach der Ursache. Im Web-Inspektor des Browsers taucht sie leider im Bereich Netzwerk auch nicht auf. Hmm.

        jogibear9988J 1 Reply Last reply
        0
        • W Worlik

          @jogibear9988 340e463e-0b2d-4c11-ac32-8bca595fd575-image.png

          Habe alle Dateien gespeichert und auch einmal den gesamten Designer neu geladen. Weder in der Preview noch in der Runtime taucht die Font auf. Ich suche mal weiter nach der Ursache. Im Web-Inspektor des Browsers taucht sie leider im Bereich Netzwerk auch nicht auf. Hmm.

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

          @worlik

          schau hier: http://129.159.205.3:8082/webui/index.html
          sceen 'customfont'

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

          W 1 Reply Last reply
          0
          • jogibear9988J jogibear9988

            @worlik

            schau hier: http://129.159.205.3:8082/webui/index.html
            sceen 'customfont'

            W Offline
            W Offline
            Worlik
            wrote on last edited by
            #274

            @jogibear9988 Jetzt hast du im Testsystem auch Indie Flower... bin auf die Deklaration reingefallen. Hatte die Font für "body" gesetzt, um sie global zu haben. Aber das geht ja hier so gar nicht. Läuft. Danke dir. 🙂

            jogibear9988J 1 Reply Last reply
            0
            • W Worlik

              @jogibear9988 Jetzt hast du im Testsystem auch Indie Flower... bin auf die Deklaration reingefallen. Hatte die Font für "body" gesetzt, um sie global zu haben. Aber das geht ja hier so gar nicht. Läuft. Danke dir. 🙂

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

              @worlik

              Hab gerade zum test mal auch noch ne color font eingebunden

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

              jogibear9988J 1 Reply Last reply
              0
              • jogibear9988J jogibear9988

                @worlik

                Hab gerade zum test mal auch noch ne color font eingebunden

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

                @jogibear9988

                Die eine geht in Safari:

                774591cc-535f-47a5-98a1-c2c41593ac96-image.png

                die andere in chrome:

                89f8fc0b-9a6e-4f1f-8b96-cfac0d53bcf4-image.png

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

                jogibear9988J 1 Reply Last reply
                0
                • jogibear9988J jogibear9988

                  @jogibear9988

                  Die eine geht in Safari:

                  774591cc-535f-47a5-98a1-c2c41593ac96-image.png

                  die andere in chrome:

                  89f8fc0b-9a6e-4f1f-8b96-cfac0d53bcf4-image.png

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

                  @jogibear9988

                  in firefox gehn beide:

                  51cd6f9a-0427-4e1a-b8e8-828adec3a1e6-image.png

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

                  1 Reply Last reply
                  0
                  • jogibear9988J jogibear9988

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

                    @jogibear9988
                    Hallo Jochen,
                    wie erfolgt der Datenaustausch bei Datum? Number oder String?

                    Kein Plan im Moment wie das Date im IOB objekt gespeichert wird. Musst probieren. Wenn es as zahl gespeichert ist (ms seit 1.1.1970) dann kannst an "valueAsNumber" binden. Wenn es ein wirkliches date objekt ist, an "valueAsDate"

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

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

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

                    @jogibear9988
                    Hallo Jochen,
                    wie erfolgt der Datenaustausch bei Datum? Number oder String?

                    Kein Plan im Moment wie das Date im IOB objekt gespeichert wird. Musst probieren. Wenn es as zahl gespeichert ist (ms seit 1.1.1970) dann kannst an "valueAsNumber" binden. Wenn es ein wirkliches date objekt ist, an "valueAsDate"

                    Hallo Jochen,

                    schau dir das Thema Date bitte mal an.
                    Mir ist folgendes aufgefallen:
                    Ziehe ich aus dem Objectbaum ein ioBroker-Objekt vom Typ Numer mit der Rolle state in einen Screen, so wird ein Input mit twoway-Dinding erzeugt. Also völlig ok.
                    Ziehe ich hingegen aus dem Objektbaum ein ioBroker-Object vom Typ Number mit der Rolle date in einen Screen, wo wird ein Input mit readonly und oneway-Binding erzeugt.
                    Ist so natürlich nicht der Hit.
                    date_input.png

                    Github Issue

                    VG
                    Dieter

                    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):

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

                      @jogibear9988
                      Hallo Jochen,
                      wie erfolgt der Datenaustausch bei Datum? Number oder String?

                      Kein Plan im Moment wie das Date im IOB objekt gespeichert wird. Musst probieren. Wenn es as zahl gespeichert ist (ms seit 1.1.1970) dann kannst an "valueAsNumber" binden. Wenn es ein wirkliches date objekt ist, an "valueAsDate"

                      Hallo Jochen,

                      schau dir das Thema Date bitte mal an.
                      Mir ist folgendes aufgefallen:
                      Ziehe ich aus dem Objectbaum ein ioBroker-Objekt vom Typ Numer mit der Rolle state in einen Screen, so wird ein Input mit twoway-Dinding erzeugt. Also völlig ok.
                      Ziehe ich hingegen aus dem Objektbaum ein ioBroker-Object vom Typ Number mit der Rolle date in einen Screen, wo wird ein Input mit readonly und oneway-Binding erzeugt.
                      Ist so natürlich nicht der Hit.
                      date_input.png

                      Github Issue

                      VG
                      Dieter

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

                      @blockmove

                      ja ich glaube als ich das gebaut habe, gab es noch nicht die expressions für two way bindings. Wobei mir gestern ja auch aufgefallen ist, das ich die bei inputAsNumber vlt. gar nicht brauche.

                      Ich schau das ich das ändere. Bin gerade aber dran einen eigenen Javascript Bundler zu bauen, daher kann das noch ein paar Tage dauern.

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

                      B 1 Reply Last reply
                      1
                      • jogibear9988J jogibear9988

                        @blockmove

                        ja ich glaube als ich das gebaut habe, gab es noch nicht die expressions für two way bindings. Wobei mir gestern ja auch aufgefallen ist, das ich die bei inputAsNumber vlt. gar nicht brauche.

                        Ich schau das ich das ändere. Bin gerade aber dran einen eigenen Javascript Bundler zu bauen, daher kann das noch ein paar Tage dauern.

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

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

                        @blockmove

                        ja ich glaube als ich das gebaut habe, gab es noch nicht die expressions für two way bindings. Wobei mir gestern ja auch aufgefallen ist, das ich die bei inputAsNumber vlt. gar nicht brauche.

                        Ich schau das ich das ändere. Bin gerade aber dran einen eigenen Javascript Bundler zu bauen, daher kann das noch ein paar Tage dauern.

                        Bei einem Smarthome gehören natürlich Steuerungsaufgaben auf Basis von Datum, Uhrzeit und / oder Zeitraum bzw. Zeitdauer zur Basisfunktionalität. Dem entsprechend braucht man hier natürlich auch was bei der Visu.
                        Aber dummerweise gehört dies auch zu den komplexen Themen.
                        ioBroker legt Datum / Uhrzeit im üblichen Zahlenformat (ms ab 1.1.1970) ab.
                        Daher reicht InputAsNumber funktional.
                        Für die Anpassung passt du ja eine Formel für die Binding erstellt

                        new Date(__0).toISOString().split('.')[0]
                        

                        Für die twoway-Binding braucht man "eigentlich" nur dir Umkehrung.

                        Ich könnte mir vorstellen, dass das Handling von Datum / Uhrzeit auch nur über eine Handvoll von Formeln erfolgt.
                        Anwahl über ein DropDown. Damit wäre das ganze vielleicht vergleichsweise einfach umsetzbar.
                        InputasDate könnte dann vielleicht sogar entfallen.

                        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):

                          @blockmove

                          ja ich glaube als ich das gebaut habe, gab es noch nicht die expressions für two way bindings. Wobei mir gestern ja auch aufgefallen ist, das ich die bei inputAsNumber vlt. gar nicht brauche.

                          Ich schau das ich das ändere. Bin gerade aber dran einen eigenen Javascript Bundler zu bauen, daher kann das noch ein paar Tage dauern.

                          Bei einem Smarthome gehören natürlich Steuerungsaufgaben auf Basis von Datum, Uhrzeit und / oder Zeitraum bzw. Zeitdauer zur Basisfunktionalität. Dem entsprechend braucht man hier natürlich auch was bei der Visu.
                          Aber dummerweise gehört dies auch zu den komplexen Themen.
                          ioBroker legt Datum / Uhrzeit im üblichen Zahlenformat (ms ab 1.1.1970) ab.
                          Daher reicht InputAsNumber funktional.
                          Für die Anpassung passt du ja eine Formel für die Binding erstellt

                          new Date(__0).toISOString().split('.')[0]
                          

                          Für die twoway-Binding braucht man "eigentlich" nur dir Umkehrung.

                          Ich könnte mir vorstellen, dass das Handling von Datum / Uhrzeit auch nur über eine Handvoll von Formeln erfolgt.
                          Anwahl über ein DropDown. Damit wäre das ganze vielleicht vergleichsweise einfach umsetzbar.
                          InputasDate könnte dann vielleicht sogar entfallen.

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

                          @blockmove

                          denk wenn du 2way an inputAsNumber bindest brauchst gar keine formel (ungetestet)

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

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

                            bei uns in der firma hab ich an das input feld ne eigene propery hinzugefügt: valueUtc, da wir im backend alles als utc haben und das frontend umwandelt. So konnte man aber einfach nen utc value binden

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

                            Smilie108S 1 Reply Last reply
                            0
                            • jogibear9988J jogibear9988

                              bei uns in der firma hab ich an das input feld ne eigene propery hinzugefügt: valueUtc, da wir im backend alles als utc haben und das frontend umwandelt. So konnte man aber einfach nen utc value binden

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

                              @jogibear9988
                              Wollte nur sagen das das mit dem input time jetz auch geht als value brauch eh an timestamp. was ich noch nicht zum laufen gebracht habe ist das ich als default value den aktuellen tag reinbekomme wenn ich den screen aufrufe. Bin aber am noch am testen.

                              jogibear9988J 1 Reply Last reply
                              0
                              • Smilie108S Smilie108

                                @jogibear9988
                                Wollte nur sagen das das mit dem input time jetz auch geht als value brauch eh an timestamp. was ich noch nicht zum laufen gebracht habe ist das ich als default value den aktuellen tag reinbekomme wenn ich den screen aufrufe. Bin aber am noch am testen.

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

                                @smilie108

                                wenn du den value an ein objekt bindest, dann muss man entweder ein script beim öffen des screens ausführen (gibts noch keine möglichkeit, da geht gerade nur javascript, mach da aber sicher noch was), oder du machst es im backend und setzt dein objekt z.b. jeden tag auf den wert

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

                                1 Reply Last reply
                                0
                                • W Offline
                                  W Offline
                                  Worlik
                                  wrote on last edited by
                                  #285

                                  Hmm, eine Datumsauswahl im Webbrower ist bei einem Unixtimestamp jetzt doch aber eigentlich ziemlich simpel. Das kann jedes Standard input-Feld mit dem type="date" oder type="dateTime". Ich hatte das nur kurz ausprobiert, brauchte das aber für meine Visualisierung eigentlich gar nicht. Soweit ich weiß ging das relativ problemlos.

                                  B 1 Reply Last reply
                                  1
                                  • jogibear9988J jogibear9988

                                    @blockmove

                                    denk wenn du 2way an inputAsNumber bindest brauchst gar keine formel (ungetestet)

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

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

                                    @blockmove

                                    denk wenn du 2way an inputAsNumber bindest brauchst gar keine formel (ungetestet)

                                    Habs gerade getestet.
                                    Mit deiner Formel "new Date(__0).toISOString().split('.')[0]" gibt es Probleme mit der Uhrzeit. Geb ich ne 2 bei Stunde ein, kommt eine 1.
                                    Also wahrscheinlich ein Zeitzohnen-Thema.

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

                                    jogibear9988J 1 Reply Last reply
                                    0
                                    • W Worlik

                                      Hmm, eine Datumsauswahl im Webbrower ist bei einem Unixtimestamp jetzt doch aber eigentlich ziemlich simpel. Das kann jedes Standard input-Feld mit dem type="date" oder type="dateTime". Ich hatte das nur kurz ausprobiert, brauchte das aber für meine Visualisierung eigentlich gar nicht. Soweit ich weiß ging das relativ problemlos.

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

                                      Falscher Text

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

                                      1 Reply Last reply
                                      0
                                      • B Blockmove

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

                                        @blockmove

                                        denk wenn du 2way an inputAsNumber bindest brauchst gar keine formel (ungetestet)

                                        Habs gerade getestet.
                                        Mit deiner Formel "new Date(__0).toISOString().split('.')[0]" gibt es Probleme mit der Uhrzeit. Geb ich ne 2 bei Stunde ein, kommt eine 1.
                                        Also wahrscheinlich ein Zeitzohnen-Thema.

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

                                        @blockmove

                                        ja, toIsoString gibt UTC zurück.

                                        versuchs mal mit : .toLocaleString("lt")
                                        https://stackoverflow.com/a/69462557/579623

                                        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

                                          ja, toIsoString gibt UTC zurück.

                                          versuchs mal mit : .toLocaleString("lt")
                                          https://stackoverflow.com/a/69462557/579623

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

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

                                          @blockmove

                                          ja, toIsoString gibt UTC zurück.

                                          versuchs mal mit : .toLocaleString("lt")
                                          https://stackoverflow.com/a/69462557/579623

                                          Tja, so einfach ist es nicht.
                                          Ich hab das Inputfeld auf Typ datetime-local stehen.
                                          Das Format finde ich auch ganz gut so.

                                          Ein .toISOString erzeugt: 2023-01-01T00:00:00.028Z
                                          Ein .toLocaleString erzeugt: 1.1.2023, 01:00:00

                                          Mit dem Format von toLocaleString kommt nun das Inputfeld nicht klar.

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

                                          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

                                          303

                                          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