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.
  • B Blockmove

    @smilie108
    Ich hab mal in dein Control auf Jochens Testsystem ein Eingabefeld hinzugefügt.
    Eingeben und Schreiben auf ioBroker sollte so funktionieren. Ob es den richtigen Wert der ioBroker-Variable anzeigt, kann ich dir nicht sagen. Habe es bei mir nicht getestet.

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

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

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

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

    B 1 Antwort Letzte Antwort
    0
    • W Offline
      W Offline
      Worlik
      schrieb am zuletzt editiert von
      #269

      @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 2 Antworten 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
        #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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          1.0k

                                          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