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

    • [erledigt] 15. 05. Wartungsarbeiten am ioBroker Forum

    • 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.
    • sigi234
      sigi234 Forum Testing Most Active @da_Woody last edited by

      @da_woody said in VIS eigenes Widget erstellen:

      @sigi234 said in VIS eigenes Widget erstellen:

      Für Heizung wäre noch was Super.

      für mich reicht da mein dawoody_spezial. ok automatisch steuern kann ich damit nicht, aber als anzeige langts.

      Jupp, ist ja alles änderbar.😀

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

        ...Wäre es auch irgendwie möglich, wenn man lange Gerätenamen implementieren möchte, das man zwei Textzeilen Untereinander schreiben kann, damit man die Schrift nicht so klein machen muss - damit es schön in das schwarze Feld passt , also quasi so wie im Original ?? 😬

        91c57089-0424-42d8-9ff0-0aca08f2644b-image.png

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

          Ich hab alle nochmal Final überarbeitet und ein paar neu hinzugefügt.
          Test-Link: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

          @da_Woody

          Switch mit Input
          ac11f831-51a3-4a69-8c0a-fcb90511e58f-image.png
          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch -w Input

          Power-Switch mit Input
          8ab2de98-351b-4764-a877-831a6e01ae70-image.png
          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch-Power -w Input

          DaWoody Spezial mit Input
          f1873e39-0ce2-4c1c-8592-26a98a835041-image.png
          Code:https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/DaWoody -w Input

          Thermostat
          @sigi234 Das ist das Standard Heizthermostat von Shelly. Vielleicht hast du ja noch Ideen um das weiter auszuschmücken.
          6566917a-3a63-4895-a062-9fee07319ea4-image.png
          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Thermostat

          Alle Links aus dem ersten Thread bleiben aktuell.

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

            @martink bf939a39-e718-4366-bee5-e492cce0043e-image.png Ja, dazu einfach im Editor das Textfeld größer ziehen. Dann wird eine Zeile tiefer geschrieben.

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

              @crunkfx gott.gif

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

                @crunkfx ^

                @crunkfx said in VIS eigenes Widget erstellen:

                @martink bf939a39-e718-4366-bee5-e492cce0043e-image.png Ja, dazu einfach im Editor das Textfeld größer ziehen. Dann wird eine Zeile tiefer geschrieben.

                Aaaaah! Alles klar ! 😉

                1 Reply Last reply Reply Quote 0
                • 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
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            798
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            7
                                            88
                                            8382
                                            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