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

  • Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar
    BluefoxB
    Bluefox
    11
    2
    211

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    7.9k

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

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.7k 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.
  • Smilie108S Smilie108

    @blockmove
    Hi ja jetzt kenne ich es soweit versthe ich das nun auch aber leider schon wieder ein Problem

    Hab jetzt das ganze soweit das ich die Auswahlbouten laufne habe
    würde aber jetzt auch noch gerne ein input date verknüpfen am liebsten auch noch so das der default auf den aktuellen tag geht.
    aber egal wie ich es drhe und wende ich bekomme es nicht hin gibts da irgendaas spezielles wenn men so ein input verwendet oder geht das auch mit setsignal ?

    sorry das ich soviel fragen stelle. Möchte das aber versthen lernen da ich mir noch so einiges vorstellen kann aber dazu muss ich wissen wie es geht sonst lerne ich ja nichts 😉

    Danke im voraus
    Ps hab das aktuelle wie ich es verknüpft habe in die test reingespielt

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

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

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

    jogibear9988J 1 Reply Last reply
    0
    • 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
      wrote on last edited by
      #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 Reply Last reply
      0
      • W Offline
        W Offline
        Worlik
        wrote on last edited by
        #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 Replies 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
          #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
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          80

                                          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