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

donate donate
  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.7k

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
1.1k Beiträge 21 Kommentatoren 351.2k Aufrufe 19 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.
  • 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
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      0
      • jogibear9988J jogibear9988

        @worlik

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

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

            @worlik

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

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

                @worlik

                Hab gerade zum test mal auch noch ne color font eingebunden

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

                                    @blockmove

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

                                    B Offline
                                    B Offline
                                    Blockmove
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von Blockmove
                                      #287

                                      Falscher Text

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

                                      1 Antwort Letzte Antwort
                                      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
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        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
                                          schrieb am zuletzt editiert von
                                          #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 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

                                          993

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          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