Skip to content
  • 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
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. vis-2-widgets-collection

NEWS

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

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

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.1k

vis-2-widgets-collection

Geplant Angeheftet Gesperrt Verschoben Tester
301 Beiträge 31 Kommentatoren 70.1k Aufrufe 42 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.
  • carsten04C carsten04
    Aktuelle Version 1.8.1
    Veröffentlichungsdatum 30.06.2025
    Github Link https://github.com/Steiger04/ioBroker.vis-2-widgets-collection

    Hallo Alle,

    ich bin gerade dabei für die Vis 2 Widgets zu entwickeln. Der Adapter kann jetzt als npm-Package installiert werden und steht auch im Beta-Repo zur Verfügung:

    iobroker url iobroker.vis-2-widgets-collection@latest
    

    oder

    0da7ea0b-749d-40b9-9007-cdfc625725f1-image.png
    Danach dann unter Adapter im Admin eine Instanz anlegen.

    oder

    2e5a08f5-f1a8-4fef-92fd-84072a857911-image.png

    Z.Z. gibt es neun Widgets, nämlich State, ButtonGroup, RadioGroup, Slider, Switch, Checkbox, Select, Dialog und Gauge, mit denen man schon einige Anwendungsfälle abdecken kann. Mit der Zeit werden nach und nach weitere Widgets dazukommen.

    Zum Schluß noch ein kleiner Eindruck was man mit z.B. dem State-Widget schon machen kann und ein paar Einstellmöglichkeiten:

    vis-2-widget-collection.gif

    Einstellungen:
    0aa39fd9-23f4-4ecc-a297-fdf7a3953cd5-image.png

    354f8f63-0fb9-49dc-8b38-99e460172cf8-image.png

    8645e0ed-9528-4537-9bb9-0782a9bc721c-image.png

    Feedback bitte hier oder auf GitHub.

    Grüße
    Carsten

    rantanplanR Offline
    rantanplanR Offline
    rantanplan
    schrieb am zuletzt editiert von
    #43

    @carsten04 Hallo
    darf man auch Wünsche äußern?

    Wie wäre es mit einem Widget bei dem man in der Objekt Id einen JSON Datenpunkt angeben könnte.
    Und dann Werte einen Attributs zum Anzeigen und Ändern auswählen könnte.

    Grüße

    Rantanplan

    CCU3 / MS Server 2019(VM) / Scripten mit Blockly

    carsten04C 1 Antwort Letzte Antwort
    0
    • rantanplanR rantanplan

      @carsten04 Hallo
      darf man auch Wünsche äußern?

      Wie wäre es mit einem Widget bei dem man in der Objekt Id einen JSON Datenpunkt angeben könnte.
      Und dann Werte einen Attributs zum Anzeigen und Ändern auswählen könnte.

      Grüße

      carsten04C Online
      carsten04C Online
      carsten04
      Developer
      schrieb am zuletzt editiert von carsten04
      #44

      @rantanplan sagte in vis-2-widgets-collection:

      @carsten04 Hallo
      darf man auch Wünsche äußern?

      Wie wäre es mit einem Widget bei dem man in der Objekt Id einen JSON Datenpunkt angeben könnte.
      Und dann Werte einen Attributs zum Anzeigen und Ändern auswählen könnte.

      Grüße

      Kannst Du das noch etwas genauer beschreiben? Wie soll das Widget aussehen? Was willst Du genau erreichen?

      sigi234S 1 Antwort Letzte Antwort
      0
      • carsten04C Online
        carsten04C Online
        carsten04
        Developer
        schrieb am zuletzt editiert von carsten04
        #45

        Der Slider kann jetzt auch vertikal ausgerichtet werden:

        a52bc3de-3a73-458f-9f7c-b27e102d4afd-vis-2-widget-collection_slider.gif

        Aus meiner Sicht sollte es das beim Slider erst einmal gewesen sein. Wem noch etwas fehlt, oder Fehler auffallen, bitte hier oder auf GitHub posten.

        sigi234S 1 Antwort Letzte Antwort
        1
        • carsten04C carsten04

          @rantanplan sagte in vis-2-widgets-collection:

          @carsten04 Hallo
          darf man auch Wünsche äußern?

          Wie wäre es mit einem Widget bei dem man in der Objekt Id einen JSON Datenpunkt angeben könnte.
          Und dann Werte einen Attributs zum Anzeigen und Ändern auswählen könnte.

          Grüße

          Kannst Du das noch etwas genauer beschreiben? Wie soll das Widget aussehen? Was willst Du genau erreichen?

          sigi234S Online
          sigi234S Online
          sigi234
          Forum Testing Most Active
          schrieb am zuletzt editiert von
          #46

          @carsten04 sagte in vis-2-widgets-collection:

          @rantanplan sagte in vis-2-widgets-collection:

          @carsten04 Hallo
          darf man auch Wünsche äußern?

          Wie wäre es mit einem Widget bei dem man in der Objekt Id einen JSON Datenpunkt angeben könnte.
          Und dann Werte einen Attributs zum Anzeigen und Ändern auswählen könnte.

          Grüße

          Kannst Du das noch etwas genauer beschreiben? Wie soll das Widget aussehen? Was willst Du genau erreichen?

          Ich denke er meint das:

          @oli sagte in vis-2-widgets-collection:

          Ein vernünftiges Table Widget wie das vom alten Inventwo Adapter, wie @sigi234 schon geschrieben hat

          Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
          Immer Daten sichern!

          rantanplanR 1 Antwort Letzte Antwort
          0
          • carsten04C carsten04

            Der Slider kann jetzt auch vertikal ausgerichtet werden:

            a52bc3de-3a73-458f-9f7c-b27e102d4afd-vis-2-widget-collection_slider.gif

            Aus meiner Sicht sollte es das beim Slider erst einmal gewesen sein. Wem noch etwas fehlt, oder Fehler auffallen, bitte hier oder auf GitHub posten.

            sigi234S Online
            sigi234S Online
            sigi234
            Forum Testing Most Active
            schrieb am zuletzt editiert von sigi234
            #47

            @carsten04 sagte in vis-2-widgets-collection:

            Der Slider kann jetzt auch vertikal ausgerichtet werden:

            Aus meiner Sicht sollte es das beim Slider erst einmal gewesen sein. Wem noch etwas fehlt, oder Fehler auffallen, bitte hier oder auf GitHub posten.

            Cool, kannst du bitte noch folgendes einbauen:

            • Farbverlauf bei bestimmte Werte (zB. 0-20 grün, 20-50 orange, 50-100 rot)

            • Anzeige Skala Links/Rechts

            Möchte es für die Steuerung und Anzeige der Lautstärke verwenden.

            Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
            Immer Daten sichern!

            carsten04C 1 Antwort Letzte Antwort
            0
            • sigi234S sigi234

              @carsten04 sagte in vis-2-widgets-collection:

              @rantanplan sagte in vis-2-widgets-collection:

              @carsten04 Hallo
              darf man auch Wünsche äußern?

              Wie wäre es mit einem Widget bei dem man in der Objekt Id einen JSON Datenpunkt angeben könnte.
              Und dann Werte einen Attributs zum Anzeigen und Ändern auswählen könnte.

              Grüße

              Kannst Du das noch etwas genauer beschreiben? Wie soll das Widget aussehen? Was willst Du genau erreichen?

              Ich denke er meint das:

              @oli sagte in vis-2-widgets-collection:

              Ein vernünftiges Table Widget wie das vom alten Inventwo Adapter, wie @sigi234 schon geschrieben hat

              rantanplanR Offline
              rantanplanR Offline
              rantanplan
              schrieb am zuletzt editiert von
              #48

              Kannst Du das noch etwas genauer beschreiben? Wie soll das Widget aussehen? Was willst Du genau erreichen?

              Ich denke er meint das:

              @oli sagte in vis-2-widgets-collection:

              Ein vernünftiges Table Widget wie das vom alten Inventwo Adapter, wie @sigi234 schon geschrieben hat

              Nee, ein Table Widget meinte ich nicht. Da gibt es ja schon was.
              Und da kann man die Werte ja nur anzeigen und nicht ändern.

              Es sollte sowas wie ein Input Widget sein, das auf einen JSON Datenpunkt zeigt.
              In dem "JSON-Input-Widget" sollte man dann ein Attribut eingeben können dessen Wert angezeigt wird und auch direkt geändert werden kann.

              [
              	{
              		"id": 1,
              		"Wert-1": "ABC",
              		"Wert-2": "123"
              	},
              	{
              		"id": 2,
              		"Wert-1": "DEF",
              		"Wert-2": "456"
              	},
              	{
              		"id": 3,
              		"Wert-1": "GHI",
              		"Wert-2": "789"
              	},
              	{
              		"id": 4,
              		"Wert-1": "JKL",
              		"Wert-2": "000"
              	}
              ]
              

              Z.B. den Inhalt von ID3, Wert-1 von "GHI" in "XYZ" ändern.
              Ich hoffe ich habe mich verständlich ausgedrückt.

              Grüße

              Rantanplan

              CCU3 / MS Server 2019(VM) / Scripten mit Blockly

              1 Antwort Letzte Antwort
              0
              • sigi234S sigi234

                @carsten04 sagte in vis-2-widgets-collection:

                Der Slider kann jetzt auch vertikal ausgerichtet werden:

                Aus meiner Sicht sollte es das beim Slider erst einmal gewesen sein. Wem noch etwas fehlt, oder Fehler auffallen, bitte hier oder auf GitHub posten.

                Cool, kannst du bitte noch folgendes einbauen:

                • Farbverlauf bei bestimmte Werte (zB. 0-20 grün, 20-50 orange, 50-100 rot)

                • Anzeige Skala Links/Rechts

                Möchte es für die Steuerung und Anzeige der Lautstärke verwenden.

                carsten04C Online
                carsten04C Online
                carsten04
                Developer
                schrieb am zuletzt editiert von carsten04
                #49

                @sigi234 sagte in vis-2-widgets-collection:

                @carsten04 sagte in vis-2-widgets-collection:

                Der Slider kann jetzt auch vertikal ausgerichtet werden:

                Aus meiner Sicht sollte es das beim Slider erst einmal gewesen sein. Wem noch etwas fehlt, oder Fehler auffallen, bitte hier oder auf GitHub posten.

                Cool, kannst du bitte noch folgendes einbauen:

                • Farbverlauf bei bestimmte Werte (zB. 0-20 grün, 20-50 orange, 50-100 rot)

                • Anzeige Skala Links/Rechts

                Möchte es für die Steuerung und Anzeige der Lautstärke verwenden.

                Habe jetzt noch Labelposition und Markierungsposition ergänzt. Damit kannst Du die Skala sehr individuell einstellen.

                056cf1d7-fe1e-4a8a-ace8-d01bae529e52-image.png

                Bei den Farbverläufen geht über Werte schon z.B. folgendes:

                3861aa99-c8ae-49c1-9516-f1736fce9df0-vis-2-widget-collection_slider_2.gif

                Dabei wollte ich es erst einmal belassen. Vielleicht passt das ja schon bei Dir.

                1 Antwort Letzte Antwort
                1
                • carsten04C Online
                  carsten04C Online
                  carsten04
                  Developer
                  schrieb am zuletzt editiert von carsten04
                  #50

                  Ich habe noch ein Widget Button-Group hinzugefügt:

                  vis-2-widget-button_group.gif

                  Insgesamt hat sich noch einiges unter der Haube getan, so dass ihr, wenn ihr testen wollt und die Widgets schon auf einem Testsystem nutzt, die Widgets noch einmal neu anlegen müsst.

                  Zum grundsätzlichen Umgang mit den Widgets und der Idee dahinter noch ein paar Bemerkungen zum besseren Verständnis.

                  Die genutzen Attribute des jeweiligen Widgets folgen immer dem Prinzip "vom Allgemeinen ins Spezielle".

                  fe310a22-7ec8-40a6-88f8-56b943914dc1-image.png

                  Die Reihenfolge in der die Widget-Attribute überschrieben werden, ist also:

                  CSS -> Allgemein -> Button-Gruppe (Widget-Name) -> Wert[n] -> Aktiv (falls vorhanden)

                  Bei der Anlage eines Widgets empfiehlt es sich daher in dieser Reihenfolge die Attribute festzulegen.

                  Alle Widgets nutzen common.states des ausgewählten States, falls vorhanden. Die Idee hinter common.states ist, dass die Adapter bei der Anlage der States mögliche Werte schon mitgeben und diese dann von den Widgets über z.B. Wert[n] automatisch genutzt werden. Leider tun dies z.Z. noch nicht alle Adapter, es besteht aber immer die Möglichkeit Wert[n]-Attributgruppen in den Widgets händisch unter Allgemein -> Anzahl Werte anzulegen und entsprechend zu nutzen.

                  Wie geht es weiter (wird noch etwas dauern 🙄) : ich werde noch mindestens zwei Basis-Widgets hinzufügen (Switch und Radio-Group sind geplant) und dann die etwas komplexeren Widgets (zumindest Heizung und alle möglichen RGB-Spielarten) angehen.

                  Feedback ist hier oder auf GitHub sehr willkommen.

                  1 Antwort Letzte Antwort
                  1
                  • Merlin123M Offline
                    Merlin123M Offline
                    Merlin123
                    schrieb am zuletzt editiert von
                    #51

                    Muss ich die Icons alle manuell hochladen bzw. den Pfad manuell reinkopieren? Gibt ja Widgets, wo man direkt über den Material Icon Selector was auswählen kann. Finde ich recht praktisch.
                    Screenshot 2024-12-20 083958.png

                    Beta-Tester

                    carsten04C 2 Antworten Letzte Antwort
                    0
                    • Merlin123M Merlin123

                      Muss ich die Icons alle manuell hochladen bzw. den Pfad manuell reinkopieren? Gibt ja Widgets, wo man direkt über den Material Icon Selector was auswählen kann. Finde ich recht praktisch.
                      Screenshot 2024-12-20 083958.png

                      carsten04C Online
                      carsten04C Online
                      carsten04
                      Developer
                      schrieb am zuletzt editiert von
                      #52

                      @merlin123 Installiere Dir mal das inventwo Icon Set. Da hast Du in der Grundausstattung schon fast alles was Du brauchst und musst auch nicht mehr einzeln hochladen. Die Material Icon - Auswahl kommt noch.

                      Merlin123M 1 Antwort Letzte Antwort
                      0
                      • carsten04C carsten04

                        @merlin123 Installiere Dir mal das inventwo Icon Set. Da hast Du in der Grundausstattung schon fast alles was Du brauchst und musst auch nicht mehr einzeln hochladen. Die Material Icon - Auswahl kommt noch.

                        Merlin123M Offline
                        Merlin123M Offline
                        Merlin123
                        schrieb am zuletzt editiert von
                        #53

                        @carsten04 Die hab ich installiert. Aber wenn ich bei einem Deiner Widgets auf den Icon Selector gehe, werden die nicht direkt angezeigt (VIS2). Da muss ich mir den Pfad raussuchen und reinkopieren.
                        Oder geht das auch einfacher?

                        Beta-Tester

                        I 1 Antwort Letzte Antwort
                        0
                        • Merlin123M Merlin123

                          @carsten04 Die hab ich installiert. Aber wenn ich bei einem Deiner Widgets auf den Icon Selector gehe, werden die nicht direkt angezeigt (VIS2). Da muss ich mir den Pfad raussuchen und reinkopieren.
                          Oder geht das auch einfacher?

                          I Offline
                          I Offline
                          ioBrokerMike
                          schrieb am zuletzt editiert von ioBrokerMike
                          #54

                          @merlin123

                          Das geht einfacher.
                          Icon.png

                          Bin auch gerade am Testen.
                          Und was ich bis jetzt sehe gefällt mir. 👍

                          Mfg
                          IOBrokerMike

                          Achtung ! Sehkraft 25% | 60% , kein scherz
                          Systeme : GEEKOM MiniAir 11 | Linux : Trixie 13.0 | HMIP | CCU3 | SMA PV Anlage | Robonect Hx | Hydrawise | RTL_433

                          Merlin123M 1 Antwort Letzte Antwort
                          0
                          • I ioBrokerMike

                            @merlin123

                            Das geht einfacher.
                            Icon.png

                            Bin auch gerade am Testen.
                            Und was ich bis jetzt sehe gefällt mir. 👍

                            Merlin123M Offline
                            Merlin123M Offline
                            Merlin123
                            schrieb am zuletzt editiert von
                            #55

                            @iobrokermike Ah... Dank Dir.... Hatte nicht in der Ansicht nach unten gescrollt und nur meine hochgeladenen Bilder gesehen.... 😛

                            Beta-Tester

                            1 Antwort Letzte Antwort
                            0
                            • Merlin123M Merlin123

                              Muss ich die Icons alle manuell hochladen bzw. den Pfad manuell reinkopieren? Gibt ja Widgets, wo man direkt über den Material Icon Selector was auswählen kann. Finde ich recht praktisch.
                              Screenshot 2024-12-20 083958.png

                              carsten04C Online
                              carsten04C Online
                              carsten04
                              Developer
                              schrieb am zuletzt editiert von
                              #56

                              @merlin123 sagte in vis-2-widgets-collection:

                              Muss ich die Icons alle manuell hochladen bzw. den Pfad manuell reinkopieren? Gibt ja Widgets, wo man direkt über den Material Icon Selector was auswählen kann. Finde ich recht praktisch.
                              Screenshot 2024-12-20 083958.png

                              Du kannst jetzt auch die Material-Icons direkt auswählen.

                              Merlin123M 2 Antworten Letzte Antwort
                              1
                              • carsten04C carsten04

                                @merlin123 sagte in vis-2-widgets-collection:

                                Muss ich die Icons alle manuell hochladen bzw. den Pfad manuell reinkopieren? Gibt ja Widgets, wo man direkt über den Material Icon Selector was auswählen kann. Finde ich recht praktisch.
                                Screenshot 2024-12-20 083958.png

                                Du kannst jetzt auch die Material-Icons direkt auswählen.

                                Merlin123M Offline
                                Merlin123M Offline
                                Merlin123
                                schrieb am zuletzt editiert von
                                #57

                                @carsten04 Ah klasse! Muss ich morgen mal probieren 🙂

                                Beta-Tester

                                1 Antwort Letzte Antwort
                                0
                                • carsten04C carsten04

                                  @merlin123 sagte in vis-2-widgets-collection:

                                  Muss ich die Icons alle manuell hochladen bzw. den Pfad manuell reinkopieren? Gibt ja Widgets, wo man direkt über den Material Icon Selector was auswählen kann. Finde ich recht praktisch.
                                  Screenshot 2024-12-20 083958.png

                                  Du kannst jetzt auch die Material-Icons direkt auswählen.

                                  Merlin123M Offline
                                  Merlin123M Offline
                                  Merlin123
                                  schrieb am zuletzt editiert von
                                  #58

                                  @carsten04 Klappt! Danke 🙂

                                  Beta-Tester

                                  1 Antwort Letzte Antwort
                                  0
                                  • carsten04C Online
                                    carsten04C Online
                                    carsten04
                                    Developer
                                    schrieb am zuletzt editiert von
                                    #59

                                    Um auch Farbverläufe gut handeln zu können, habe ich für background noch einen passenden Picker spendiert. Bitte testen und hier oder auf GitHub Feedback geben.

                                    vis-2-widget-button_gradient-color.gif

                                    Merlin123M 1 Antwort Letzte Antwort
                                    0
                                    • Merlin123M Offline
                                      Merlin123M Offline
                                      Merlin123
                                      schrieb am zuletzt editiert von
                                      #60

                                      Hab mit dem Widget (und auch bei den VIS2 Meßgeräte Widgets) das Problem, dass die Ansicht im Editor nicht mit der in der Runtime übereinstimmt.
                                      Bei allen anderen Widgets stimmt es. Vielleicht hast Du ne Idee...

                                      Editor (Windows, Chrome):

                                      Screenshot 2024-12-23 191831.png

                                      Laptop (wie Editor):

                                      Screenshot 2024-12-23 191843.png

                                      Handy (Android, Chrome)

                                      WhatsApp Image 2024-12-23 at 19.20.44.jpeg

                                      Beta-Tester

                                      1 Antwort Letzte Antwort
                                      0
                                      • carsten04C carsten04

                                        Um auch Farbverläufe gut handeln zu können, habe ich für background noch einen passenden Picker spendiert. Bitte testen und hier oder auf GitHub Feedback geben.

                                        vis-2-widget-button_gradient-color.gif

                                        Merlin123M Offline
                                        Merlin123M Offline
                                        Merlin123
                                        schrieb am zuletzt editiert von
                                        #61

                                        @carsten04 Farbverlauf klappt 🙂

                                        Screenshot 2024-12-23 193109.png

                                        Beta-Tester

                                        carsten04C 1 Antwort Letzte Antwort
                                        0
                                        • Merlin123M Merlin123

                                          @carsten04 Farbverlauf klappt 🙂

                                          Screenshot 2024-12-23 193109.png

                                          carsten04C Online
                                          carsten04C Online
                                          carsten04
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #62

                                          @merlin123 Schau mal, ob Du alles auf PX beim Widget stehen hast. Default ist bei position relativ und bei width 100%. Wenn Du bei den verschiedenen Endgeräten unterschiedliche Auflösungen hast, dann führt das mit diesen Einstellungen auch zu unterschiedlichen Darstellungen.

                                          Wenn es so ähnlich aussieht,

                                          9b8c6dfd-a51a-47fc-857f-be9e29f26c41-image.png

                                          dann sollte sich auch die Darstellung nicht ändern.

                                          Merlin123M 2 Antworten Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          308

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe