Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. VIS eigenes Widget erstellen

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    VIS eigenes Widget erstellen

    This topic has been deleted. Only users with topic management privileges can see it.
    • MartinK.
      MartinK. last edited by MartinK.

      @CrunkFX Das ist wirklich eine sehr gute Arbeit! Vielen Dank nochmals 👍 👍 ... Wenn du nochmals ganz viel Zeit hast, dann könnte man ja auch noch die Jalousie Buttons mit aufnehmen... Und dann haben wir ja auch alles 🤗 ... aber das ist sicherlich nicht so einfach, in dem Shutter Button sind ja drei Bewegungszustände vorhanden... 🤔

      CrunkFX 1 Reply Last reply Reply Quote 1
      • CrunkFX
        CrunkFX Forum Testing @MartinK. last edited by

        @martink Ja das lässt sich aber machen. Ich werde das beizeiten hinzufügen. Dimmer hab ich auch noch auf der Liste stehen.

        MartinK. 1 Reply Last reply Reply Quote 1
        • MartinK.
          MartinK. @CrunkFX last edited by

          @crunkfx ....MEEEGA MEEGA MEEGA !!! 😁 🤝

          1 Reply Last reply Reply Quote 0
          • MartinK.
            MartinK. @CrunkFX last edited by

            @crunkfx sagte in VIS eigenes Widget erstellen:

            EDIT

            Falls möglich benutzt bitte die Hintergründe als PNG. Bei vielen Elementen kann es mit Base64 zu Problemen kommen. Die Assets findet ihr hier: https://github.com/CrunkFX/IOBrokerCustomFiles/tree/master/Images

            Nur mal so interessehalber : 🤔 Was mir gerade beim nutzen der Meeeegageilen "Schaltwidgets" aufgefallen ist (habe brav den kodierten Base64 String durch PNG ersetzt) - wenn ich sie mit der iobroker iOS App nutze, (über eine VPN Verbindung) beim Schalten - dann sieht man eine kurzes "switchen" wenn die PNG von On auf Off geändert wird... Wenn ich das gleiche "Schaltwidget" als Base64 kodiert lasse - dann geht es so schnell das man das "switchen" der Schaltfläche nicht sieht... 🤔 ..... Normalerweise müsste es doch eher umgekehrt sein, das dass decodieren der Daten länger andauern müsste ??? Oder ? 🙃

            CrunkFX 1 Reply Last reply Reply Quote 0
            • CrunkFX
              CrunkFX Forum Testing @MartinK. last edited by

              @martink Ich vermute mal, das der Base64 String direkt mit an die App übertragen wird. Die png´s werden zumindest beim IPhone nur geladen wenn sie gebraucht werden. Wenn du also mit Base64 keine Probleme hast kannst du das gerne weiter nutzen. Die kommenden Widgets werden genauso geliefert.

              MartinK. 1 Reply Last reply Reply Quote 0
              • MartinK.
                MartinK. @CrunkFX last edited by MartinK.

                @crunkfx Coole Sache!! 🙂 👍 ... wie gesagt - sobald ich im Heimnetz bin und es dann mit der iOS ioBroker App teste geht alles ohne diesen "switch" Effekt 😉 ....

                EDIT:
                Doch, im Heimnetz ist dieser Effekt mit den PNG's auch - ist mir nur vorher nicht aufgefallen 😉

                1 Reply Last reply Reply Quote 0
                • MartinK.
                  MartinK. last edited by

                  Hallo zusammen, ich missbrauche diesen Post nochmal kurz für eine allgemeine VIS Frage ...🙆‍♂️ und zwar habe immer das Phänomen, das in der iOS iobroker App die View scroll Position von der vorher aufgerufenen View angezeigt wird. Gibt es eine Möglichkeit das so einzustellen, das beim aufrufen der View diese immer der obersten Position angezeigt wird? Ich habe mich da schon mit allen "Hintergrund" Einstellungen beschäftigt, aber es ändert sich nichts , egal ob ich center-top / oder center-center / ....usw anklicke ??? Des weiteren kann ich z.B. Die View in der App z.B nach rechts verschieben, und sehe dann natürlich einen weißen Bereich in dem nichts ist.. Wie kann ich es denn fixen, das sich die Vis - View auch in dem vorgegebenen Rahmen (375 x Höhe) aufhält, und ich nicht über diese Begrenzung hinaus "wischen" kann ?? 🙂

                  CrunkFX 1 Reply Last reply Reply Quote 0
                  • CrunkFX
                    CrunkFX Forum Testing @MartinK. last edited by

                    @martink @da_Woody Ich habe nun angefangen ein paar Shelly Controls zu bauen. Die ersten sind fertig.

                    Test-Link: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

                    Dimmer
                    f970f4dc-efd1-4346-8bed-ca4422443c9c-image.png

                    Beim Dimmer gibt´s leider durch einen vermeindlichen Bug im HTML Widget eine Besonderheit. Neben den Einstellungen in der GroupControl muss hier auch im HTML vom Slider der Datenpunkt gesetzt werden:
                    2c2277d8-d304-4e92-a7fb-79c664ea799f-image.png f0fb01d8-80fb-4b68-8c9a-a95d7747f7bf-image.png 75c13992-7e04-44a0-b5a4-70a9fba52024-image.png

                    Sollte machbar sein.

                    Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Dimmer

                    Shutter
                    61cad1b9-f169-424c-89aa-b391b4af4db1-image.png

                    Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Shutter

                    Sensor
                    5878c4c0-57f0-4758-a777-4207e176d5e7-image.png

                    Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Sensor

                    da_Woody MartinK. Glasfaser sigi234 5 Replies Last reply Reply Quote 4
                    • da_Woody
                      da_Woody @CrunkFX last edited by

                      @crunkfx du bist der wahnsinn! schau ich mir 100% an! muss aber erst meine brokerprobs lösen. hab beschlossen den ioBroker heute neu zu insten... 😵

                      1 Reply Last reply Reply Quote 0
                      • MartinK.
                        MartinK. @CrunkFX last edited by

                        @crunkfx sagte in VIS eigenes Widget erstellen:

                        @martink @da_Woody Ich habe nun angefangen ein paar Shelly Controls zu bauen. Die ersten sind fertig.

                        Test-Link: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

                        Dimmer
                        f970f4dc-efd1-4346-8bed-ca4422443c9c-image.png

                        Beim Dimmer gibt´s leider durch einen vermeindlichen Bug im HTML Widget eine Besonderheit. Neben den Einstellungen in der GroupControl muss hier auch im HTML vom Slider der Datenpunkt gesetzt werden:
                        2c2277d8-d304-4e92-a7fb-79c664ea799f-image.png f0fb01d8-80fb-4b68-8c9a-a95d7747f7bf-image.png 75c13992-7e04-44a0-b5a4-70a9fba52024-image.png

                        Sollte machbar sein.

                        Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Dimmer

                        Shutter
                        61cad1b9-f169-424c-89aa-b391b4af4db1-image.png

                        Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Shutter

                        Sensor
                        5878c4c0-57f0-4758-a777-4207e176d5e7-image.png

                        Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Sensor

                        Suuuper! Vielen Dank ! 👍 👍

                        MartinK. 1 Reply Last reply Reply Quote 0
                        • MartinK.
                          MartinK. @MartinK. last edited by MartinK.

                          @martink sagte in VIS eigenes Widget erstellen:

                          @crunkfx sagte in VIS eigenes Widget erstellen:

                          @martink @da_Woody Ich habe nun angefangen ein paar Shelly Controls zu bauen. Die ersten sind fertig.

                          Test-Link: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

                          Dimmer
                          f970f4dc-efd1-4346-8bed-ca4422443c9c-image.png

                          Beim Dimmer gibt´s leider durch einen vermeindlichen Bug im HTML Widget eine Besonderheit. Neben den Einstellungen in der GroupControl muss hier auch im HTML vom Slider der Datenpunkt gesetzt werden:
                          2c2277d8-d304-4e92-a7fb-79c664ea799f-image.png f0fb01d8-80fb-4b68-8c9a-a95d7747f7bf-image.png 75c13992-7e04-44a0-b5a4-70a9fba52024-image.png

                          Sollte machbar sein.

                          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Dimmer

                          Shutter
                          61cad1b9-f169-424c-89aa-b391b4af4db1-image.png

                          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Shutter

                          @CrunkFX Also bei der Shutter Gruppe scheint noch irgendwo ein Fehler zu sein..
                          Wenn der Code als Widget importiert wird dann wird zwar die Gruppe erzeugt, aber das Widget nicht angezeigt ? 🤔

                          Bildschirmfoto 2021-01-24 um 19.24.11.png

                          CrunkFX 1 Reply Last reply Reply Quote 0
                          • Glasfaser
                            Glasfaser @CrunkFX last edited by

                            @crunkfx

                            Coole Widget´s die du erstellst 👍

                            1 Reply Last reply Reply Quote 1
                            • CrunkFX
                              CrunkFX Forum Testing @MartinK. last edited by

                              @martink Setzt mal bitte die Werte top und left auf 0
                              d7f1b124-ad6b-4fe1-8560-fa479f2df76a-image.png
                              @Glasfaser Danke 🤠

                              MartinK. Glasfaser 2 Replies Last reply Reply Quote 0
                              • MartinK.
                                MartinK. @CrunkFX last edited by

                                @crunkfx sagte in VIS eigenes Widget erstellen:

                                @martink Setzt mal bitte die Werte top und left auf 0
                                d7f1b124-ad6b-4fe1-8560-fa479f2df76a-image.png
                                @Glasfaser Danke 🤠

                                Alles klar ! Jetzt sieht man es 😉 ... Kann man die Größenänderung auch irgendwie so fixieren, das sich das "Widget" nicht so zerteilt wenn man die Größe ändert ? 😬

                                Bildschirmfoto 2021-01-24 um 19.44.58.png

                                CrunkFX 1 Reply Last reply Reply Quote 0
                                • CrunkFX
                                  CrunkFX Forum Testing @MartinK. last edited by

                                  @martink Halt mal beim Größe ändern Shift gedrückt

                                  MartinK. 1 Reply Last reply Reply Quote 0
                                  • Glasfaser
                                    Glasfaser @CrunkFX last edited by

                                    @crunkfx sagte in VIS eigenes Widget erstellen:

                                    @Glasfaser Danke

                                    Wofür Danke , wegen den % in der Gruppe , im anderen Thread !?

                                    1 Reply Last reply Reply Quote 0
                                    • MartinK.
                                      MartinK. @CrunkFX last edited by

                                      @crunkfx sagte in VIS eigenes Widget erstellen:

                                      @martink Halt mal beim Größe ändern Shift gedrückt

                                      Alles klar 😉

                                      1 Reply Last reply Reply Quote 0
                                      • sigi234
                                        sigi234 Forum Testing Most Active @CrunkFX last edited by sigi234

                                        @crunkfx

                                        Die Shelly Widgets gehen auch für Hue usw...

                                        Screenshot (3224).png

                                        1 Reply Last reply Reply Quote 1
                                        • MartinK.
                                          MartinK. @CrunkFX last edited by MartinK.

                                          @crunkfx sagte in VIS eigenes Widget erstellen:

                                          @martink @da_Woody Ich habe nun angefangen ein paar Shelly Controls zu bauen. Die ersten sind fertig.

                                          Shutter
                                          61cad1b9-f169-424c-89aa-b391b4af4db1-image.png

                                          Vielleicht kannst Du ja auch nochmal so ein schmales Shutter Widget bauen.. (für den Smartphone Nutzung) 🙂

                                          Bildschirmfoto 2021-01-24 um 23.21.39.png

                                          Das würde dann besser in die Reihe passen 😀

                                          Bildschirmfoto 2021-01-24 um 23.25.23.png

                                          MartinK. 1 Reply Last reply Reply Quote 0
                                          • MartinK.
                                            MartinK. @MartinK. last edited by MartinK.

                                            @martink sagte in VIS eigenes Widget erstellen:

                                            @crunkfx sagte in VIS eigenes Widget erstellen:

                                            @martink @da_Woody Ich habe nun angefangen ein paar Shelly Controls zu bauen. Die ersten sind fertig.

                                            Shutter
                                            61cad1b9-f169-424c-89aa-b391b4af4db1-image.png

                                            Vielleicht kannst Du ja auch nochmal so ein schmales Shutter Widget bauen.. (für den Smartphone Nutzung) 🙂

                                            @CrunkFX also ich habe die Shutter Gruppe mal auseinander gepflückt, und musste auch feststellen, das es ja eigentlich fast nicht zu realisieren ist, ein Widget mit nur einem Butten für Auf / Pause / Zu .... zu erstellen... 😉 bei deiner Gruppe wurde es ja mit dem "Blub" Widget gelöst! 🙂 super idee! 😀

                                            EDIT: Aber vielleicht fällt Dir ja doch noch eine Möglichkeit ein das zu realisieren 😁 😁 😁 👍

                                            CrunkFX 1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            516
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            7
                                            88
                                            9030
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo