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.8k

  • 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.0k 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 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
                            • carsten04C carsten04

                              @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 Offline
                              Merlin123M Offline
                              Merlin123
                              schrieb am zuletzt editiert von
                              #63

                              @carsten04 Ah! Danke! Das hab ich übersehen.... Bei den meisten ist ja px eingestellt. Geht jetzt 🙂

                              Beta-Tester

                              1 Antwort Letzte Antwort
                              0
                              • carsten04C carsten04

                                @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 Offline
                                Merlin123M Offline
                                Merlin123
                                schrieb am zuletzt editiert von
                                #64

                                @carsten04 Das Widget hat ja quasi nen Hintergrund (wo auch der Headertext steht) und den "Button" mit dem Icon.
                                Ich habe gerade versucht den Hintergrund in dem grauen Verlauf zu lassen und den Button abhängig vom Wert des Objektes (true/false) zu färben.
                                Ich kann aber nur das ganze Widget färben, oder?

                                Beta-Tester

                                carsten04C 1 Antwort Letzte Antwort
                                0
                                • Merlin123M Merlin123

                                  @carsten04 Das Widget hat ja quasi nen Hintergrund (wo auch der Headertext steht) und den "Button" mit dem Icon.
                                  Ich habe gerade versucht den Hintergrund in dem grauen Verlauf zu lassen und den Button abhängig vom Wert des Objektes (true/false) zu färben.
                                  Ich kann aber nur das ganze Widget färben, oder?

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

                                  @merlin123 Der Rahmen ist immer farblich zum Inhalt abgestuft, es sei denn Du setzt Elevation auf 0, dann ist die Farbe für Rand und Inhalt identisch.

                                  Merlin123M 1 Antwort Letzte Antwort
                                  0
                                  • carsten04C carsten04

                                    @merlin123 Der Rahmen ist immer farblich zum Inhalt abgestuft, es sei denn Du setzt Elevation auf 0, dann ist die Farbe für Rand und Inhalt identisch.

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

                                    @carsten04 OK. Kannst es ja vielleicht mal als Idee für eine Erweiterung im Hinterkopf behalten, dass man die zwei Bereiche unterschiedlich färben kann. 🙂

                                    Beta-Tester

                                    carsten04C 1 Antwort Letzte Antwort
                                    0
                                    • Merlin123M Merlin123

                                      @carsten04 OK. Kannst es ja vielleicht mal als Idee für eine Erweiterung im Hinterkopf behalten, dass man die zwei Bereiche unterschiedlich färben kann. 🙂

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

                                      @merlin123 Du kannst jetzt Rahmen und Inhalt unterschiedlich einfärben, also auch die Rahmenfarbe beibehalten.

                                      vis-2-widget-button_constant-frame-color.gif

                                      Ich habe zusätzlich noch geringfügig angepasst und optimiert. Wenn Du testen möchtest, dann Widgets bitte komplett neu anlegen.

                                      Merlin123M M 2 Antworten Letzte Antwort
                                      0
                                      • carsten04C carsten04

                                        @merlin123 Du kannst jetzt Rahmen und Inhalt unterschiedlich einfärben, also auch die Rahmenfarbe beibehalten.

                                        vis-2-widget-button_constant-frame-color.gif

                                        Ich habe zusätzlich noch geringfügig angepasst und optimiert. Wenn Du testen möchtest, dann Widgets bitte komplett neu anlegen.

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

                                        @carsten04 Danke 🙂 Aber wie stell ich das ein? Finde das irgendwie nicht

                                        Beta-Tester

                                        carsten04C 1 Antwort Letzte Antwort
                                        0
                                        • Merlin123M Merlin123

                                          @carsten04 Danke 🙂 Aber wie stell ich das ein? Finde das irgendwie nicht

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

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

                                          @carsten04 Danke 🙂 Aber wie stell ich das ein? Finde das irgendwie nicht

                                          hier:

                                          99747781-2e74-4a58-98c6-860e2e2067e0-image.png

                                          und auch individuell für jeden Wert, falls vorhanden.

                                          Merlin123M 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

                                          582

                                          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