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

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

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

    @blockmove

    es hat ja aber nicht jede property den '...' button. Das ist ja im moment nur bei Signalen so. Aber man kann ja auf jede Property ein complex value hängen.

    Hmmm ... Dann vielleicht nen eigenen Button dafür. Du weißt ja, dass mir ein Klick auf einen ganz normalen Text nicht so gut gefällt.
    Ich hab's halt einfach gern, wenn ich sehe wo Bedienelemente sind. Die verborgenden Schaltflächen hasse ich auch bei manchen Anlagenvisualisierungen bei uns in der Firma.

    Ja, verstehe ich. Wenn du das system entwirfst, fällt dir gar nicht mehr auf welche funktionen man nicht findet. Macht am besten für solche Ideen auch issues auf, sonst vergesse ich es.

    Das ist dann aber ein issue bei webui, nicht im designer.

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

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

    @blockmove said in neue Visualisierung "webui" (alternative zu vis):
    Macht am besten für solche Ideen auch issues auf, sonst vergesse ich es.

    erledigt ... Genauso wie die Spende.

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

    1 Antwort Letzte Antwort
    0
    • Smilie108S Offline
      Smilie108S Offline
      Smilie108
      schrieb am zuletzt editiert von
      #259

      @jogibear9988 oder @Blockmove
      Kann mir einer von euch sagen wie ich einen wert per js schreiben kann ?
      um genau zu sein will ich im costumcontrol 4 Knöpfe machen die je nach knopf einen anderen wert in eine im control.prop angelege variabel schreiben können.
      Wie gesagt mein js ist sehr begrenzt lerne jeden tag dazu aber irgendwie geht das nicht o wie ich das kannte mit document.getElementById("timerangeselector").defaultValue = "day";

      verwechsel ich da was ? bring es auch mit simplscript nicht hin weil ich nicht ganz versteh. Würde das setelementproperty verwenden aber weis nicht genau was ich da alles einfüllen soll.

      Für jede hilfe dankbar

      jogibear9988J B 2 Antworten Letzte Antwort
      0
      • Smilie108S Smilie108

        @jogibear9988 oder @Blockmove
        Kann mir einer von euch sagen wie ich einen wert per js schreiben kann ?
        um genau zu sein will ich im costumcontrol 4 Knöpfe machen die je nach knopf einen anderen wert in eine im control.prop angelege variabel schreiben können.
        Wie gesagt mein js ist sehr begrenzt lerne jeden tag dazu aber irgendwie geht das nicht o wie ich das kannte mit document.getElementById("timerangeselector").defaultValue = "day";

        verwechsel ich da was ? bring es auch mit simplscript nicht hin weil ich nicht ganz versteh. Würde das setelementproperty verwenden aber weis nicht genau was ich da alles einfüllen soll.

        Für jede hilfe dankbar

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

        @smilie108

        willst du innerhalb des CustomControls auf einen property des CustomControls schreiben?

        wenn ja, du bekommst die instanz des customcontrols in der property "instance" in jedem event übergeben:

            import { iobrokerHandler } from "/webui/dist/frontend/common/IobrokerHandler.js";
            import { Runtime } from "/webui/dist/frontend/common/Runtime.js";
        
            /**
            * aaa - 'click' event of <div>
            * @param {PointerEvent} event
            * @param {Element} eventRaisingElement
            * @param {ShadowRoot} shadowRoot
            * @param {HTMLElement} instance
            */
            export function aaa(event, eventRaisingElement, shadowRoot, instance) {
                instance.property. = 'wert'
            }
        

        ausserhalb des customcontrols:
        du musst dein element im "shadowRoot" suchen, jedes custom control, odr jeder screen hat einen gekapselten DOM (shadowdom), daher findest du über document nichts.

            export function aaa(event, eventRaisingElement, shadowRoot, instance) {
                let ctl = shadowRoot.getElementById('aa');
                ctl.prop = 'wert'
            }
        

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

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

          du kannst auch immer in jedes script:

          debugger;
          

          reinschreiben, dann hält der chrome debugger dort an (wenn du die dev tools offen hast)

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

          1 Antwort Letzte Antwort
          0
          • Smilie108S Smilie108

            @jogibear9988 oder @Blockmove
            Kann mir einer von euch sagen wie ich einen wert per js schreiben kann ?
            um genau zu sein will ich im costumcontrol 4 Knöpfe machen die je nach knopf einen anderen wert in eine im control.prop angelege variabel schreiben können.
            Wie gesagt mein js ist sehr begrenzt lerne jeden tag dazu aber irgendwie geht das nicht o wie ich das kannte mit document.getElementById("timerangeselector").defaultValue = "day";

            verwechsel ich da was ? bring es auch mit simplscript nicht hin weil ich nicht ganz versteh. Würde das setelementproperty verwenden aber weis nicht genau was ich da alles einfüllen soll.

            Für jede hilfe dankbar

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

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

            @jogibear9988 oder @Blockmove
            Kann mir einer von euch sagen wie ich einen wert per js schreiben kann ?
            um genau zu sein will ich im costumcontrol 4 Knöpfe machen die je nach knopf einen anderen wert in eine im control.prop angelege variabel schreiben können.
            Wie gesagt mein js ist sehr begrenzt lerne jeden tag dazu aber irgendwie geht das nicht o wie ich das kannte mit document.getElementById("timerangeselector").defaultValue = "day";

            verwechsel ich da was ? bring es auch mit simplscript nicht hin weil ich nicht ganz versteh. Würde das setelementproperty verwenden aber weis nicht genau was ich da alles einfüllen soll.

            Für jede hilfe dankbar

            Hallo smilie108,
            irgendwie ist mir nicht so ganz klar, was du möchtest.
            Einfach mit 4 Buttons Werte auf ein Property schreiben geht doch mit SimpleScript und complex bindings problemlos.
            Hab dir mal auf Jochens Demoseite ein control (smilebutton) und einen screen (smilescreen) gelegt.
            Oder sehe ich das irgendwie zu einfach?

            Gruß
            Dieter

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

            1 Antwort Letzte Antwort
            1
            • Smilie108S Offline
              Smilie108S Offline
              Smilie108
              schrieb am zuletzt editiert von
              #263

              @Blockmove
              Lach genau sowas brauch ich nur das ich dann strings hinschreibe ;)
              Wie kommst du auf das was in dem signalwert oben drin steht drauf.
              Bei den sachen happerts bei mir noch
              DANKE

              B 1 Antwort Letzte Antwort
              0
              • Smilie108S Smilie108

                @Blockmove
                Lach genau sowas brauch ich nur das ich dann strings hinschreibe ;)
                Wie kommst du auf das was in dem signalwert oben drin steht drauf.
                Bei den sachen happerts bei mir noch
                DANKE

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

                @smilie108

                Kennst du das Youtube-Video von Jochen zu dem Thema?
                Bei den Complex Bindings musst Du nen Rechtsklick auf den Text "signal" SetSignalValue machen.
                ComplexBinding.png

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

                Smilie108S 1 Antwort Letzte Antwort
                0
                • B Blockmove

                  @smilie108

                  Kennst du das Youtube-Video von Jochen zu dem Thema?
                  Bei den Complex Bindings musst Du nen Rechtsklick auf den Text "signal" SetSignalValue machen.
                  ComplexBinding.png

                  Smilie108S Offline
                  Smilie108S Offline
                  Smilie108
                  schrieb am zuletzt editiert von
                  #265

                  @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 2 Antworten Letzte Antwort
                  0
                  • 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
                    schrieb am zuletzt editiert von
                    #266

                    @smilie108

                    Für das Date-Inputfeld könntest du ein Twoway-Binding für die Property verwenden. Mit einem Datum habe ich aber auch noch nie in einem Control gearbeitet

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

                    1 Antwort Letzte Antwort
                    0
                    • 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
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          995

                                          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