Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: IconList Widget

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    16
    1
    1.9k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    913

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Material Design Widgets: IconList Widget

Scheduled Pinned Locked Moved Visualisierung
vis
134 Posts 26 Posters 23.3k Views 29 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • sigi234S sigi234

    @liv-in-sky sagte in Material Design Widgets: IconList Widget:

    @Scrounger gibt es einen trick, wie ich das mit dem master machen muss - habe einfach über git installiert, da kommt aber 0.2.66

    Installieren aus eigener Url, Verwahrungsort latest

    liv-in-skyL Offline
    liv-in-skyL Offline
    liv-in-sky
    wrote on last edited by liv-in-sky
    #10

    @sigi234 habe ich gemacht - das meinte ich mit "über git" installiert ("katze")

    nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

    sigi234S 1 Reply Last reply
    0
    • liv-in-skyL liv-in-sky

      @sigi234 habe ich gemacht - das meinte ich mit "über git" installiert ("katze")

      sigi234S Online
      sigi234S Online
      sigi234
      Forum Testing Most Active
      wrote on last edited by
      #11

      @liv-in-sky sagte in Material Design Widgets: IconList Widget:

      @sigi234 habe ich gemacht - das meinte ich mit "über git" installiert ("katze")

      Was zeigt das an?

      Screenshot (2061)_LI.jpg

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

      liv-in-skyL 2 Replies Last reply
      0
      • sigi234S sigi234

        @liv-in-sky sagte in Material Design Widgets: IconList Widget:

        @sigi234 habe ich gemacht - das meinte ich mit "über git" installiert ("katze")

        Was zeigt das an?

        Screenshot (2061)_LI.jpg

        liv-in-skyL Offline
        liv-in-skyL Offline
        liv-in-sky
        wrote on last edited by
        #12

        @sigi234

        Image 7.png

        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

        1 Reply Last reply
        0
        • sigi234S sigi234

          @liv-in-sky sagte in Material Design Widgets: IconList Widget:

          @sigi234 habe ich gemacht - das meinte ich mit "über git" installiert ("katze")

          Was zeigt das an?

          Screenshot (2061)_LI.jpg

          liv-in-skyL Offline
          liv-in-skyL Offline
          liv-in-sky
          wrote on last edited by
          #13

          @sigi234 @Scrounger

          installation hat jetzt geklappt

          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

          1 Reply Last reply
          0
          • ScroungerS Scrounger

            @liv-in-sky sagte in Material Design Widgets: IconList Widget:

            @Scrounger hi

            kann ich eigentlich durch das json einer einzigen "kachel" eine andere hintergrundfarbe geben - abhängig von einem wert in meinem script

            Hab es implementiert, teste mal den aktuellen master -> v0.2.68.
            Kann jetzt über die property background für jedes einzelne Item gesetzt werden, siehe doku:
            https://github.com/Scrounger/ioBroker.vis-materialdesign#iconlist

            liv-in-skyL Offline
            liv-in-skyL Offline
            liv-in-sky
            wrote on last edited by
            #14

            @Scrounger hab mal ein wenig getestet - kann es sein, dass es jetzt kein allgemein gültiges background color mehr gibt und ich für jedes extra eines im json einstellen muss ? oder stell ich mich nur an ?

            Image 8.png

            nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

            ScroungerS 1 Reply Last reply
            0
            • liv-in-skyL liv-in-sky

              @Scrounger hab mal ein wenig getestet - kann es sein, dass es jetzt kein allgemein gültiges background color mehr gibt und ich für jedes extra eines im json einstellen muss ? oder stell ich mich nur an ?

              Image 8.png

              ScroungerS Offline
              ScroungerS Offline
              Scrounger
              Developer
              wrote on last edited by
              #15

              @liv-in-sky

              Ja das ist jetzt so. Hintergrund muss für jedes item gesetzt werden.

              liv-in-skyL 1 Reply Last reply
              0
              • ScroungerS Scrounger

                @liv-in-sky

                Ja das ist jetzt so. Hintergrund muss für jedes item gesetzt werden.

                liv-in-skyL Offline
                liv-in-skyL Offline
                liv-in-sky
                wrote on last edited by
                #16

                @Scrounger das bedeutet, nach dem adapter update wird bei den meisten usern der dunkle background verschwunden sein - es müssen alle scripte überarbeitet werden

                nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                ScroungerS 1 Reply Last reply
                0
                • liv-in-skyL liv-in-sky

                  @Scrounger das bedeutet, nach dem adapter update wird bei den meisten usern der dunkle background verschwunden sein - es müssen alle scripte überarbeitet werden

                  ScroungerS Offline
                  ScroungerS Offline
                  Scrounger
                  Developer
                  wrote on last edited by
                  #17

                  @liv-in-sky
                  Mhh ok, das ist natürlich ungünstig...
                  Da ich selber den weißen Hintergrund verwende, hatte ich das nicht auf dem Schirm.

                  Bau ich ein, dass man global den hintergrund festlegen kann und dann pro item überschreiben kann.

                  liv-in-skyL 1 Reply Last reply
                  0
                  • ScroungerS Scrounger

                    @liv-in-sky
                    Mhh ok, das ist natürlich ungünstig...
                    Da ich selber den weißen Hintergrund verwende, hatte ich das nicht auf dem Schirm.

                    Bau ich ein, dass man global den hintergrund festlegen kann und dann pro item überschreiben kann.

                    liv-in-skyL Offline
                    liv-in-skyL Offline
                    liv-in-sky
                    wrote on last edited by
                    #18

                    @Scrounger

                    global im widget und individell überschreibar durch json wäre wohl am besten - dann laufen alle scripte weiter

                    nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                    ScroungerS 1 Reply Last reply
                    0
                    • liv-in-skyL liv-in-sky

                      @Scrounger

                      global im widget und individell überschreibar durch json wäre wohl am besten - dann laufen alle scripte weiter

                      ScroungerS Offline
                      ScroungerS Offline
                      Scrounger
                      Developer
                      wrote on last edited by Scrounger
                      #19

                      @liv-in-sky
                      Hab es implementiert, aktuellen master von git bitte testen -> v0.2.69

                      liv-in-skyL 1 Reply Last reply
                      0
                      • ScroungerS Scrounger

                        @liv-in-sky
                        Hab es implementiert, aktuellen master von git bitte testen -> v0.2.69

                        liv-in-skyL Offline
                        liv-in-skyL Offline
                        liv-in-sky
                        wrote on last edited by
                        #20

                        @Scrounger danke dir

                        die alten widgets zeigen wieder dunkel an

                        der test mit den farbigen funktioniert auch - als standard sende ich einen leeren string im property - bei den kacheln wird dann der standard hintergrund des widgets angezeigt - bei bestimmten kachel wird ein farbwert übergeben und dieserr wird auch angewendet

                        mission gelungen

                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                        1 Reply Last reply
                        0
                        • ScroungerS Scrounger

                          @Uwe-Clement sagte in Material Design Widgets: Table Widget:

                          1. Frage wurde zwar schon oben gestellt, die Antwort darauf hat mir allerdings nicht geholfen: Wie schaffe ich es, dass die Überschriften aus dem JSON genommen werden (ich stelle das JSON per Datenpunkt bereit)

                          Geht nicht.

                          1. Ist es möglich in einer Zelle auch einen Button/Bild darzustellen und beim Klick irgendwas (Event) ausgelöst wird, z.B. mein Shelly geschalten wird. Kann ich bestenfalls eine function aufrufen?

                          Geht nicht. Nimm dafür besser das List Widget. Das kann man mit html tags auch zu einer Table machen. Und Funktionen wie button, checkbox, etc. kann das

                          Uwe ClementU Offline
                          Uwe ClementU Offline
                          Uwe Clement
                          wrote on last edited by Scrounger
                          #21

                          Wieder falsche Kategorie. Sorry. Konnte den Post nicht mehr löschen

                          @Scrounger Bisschen rumgemacht am Wochenende. Super klasse was Du hier machst. DANKE!

                          ee3a7cac-8ba8-45f7-8ce8-ed6f2f8fc29e-image.png

                          Habe mal meine Shellys visualisiert mit der Möglichkeit sie ein- und auszuschalten. Danke!

                          Zu 99% generisch/dynamisch. Kommt alles (Texte, Farben, Reihenfolge der Kacheln, Icons,...) aus den Datenpunkten, welche über Java Script dynamisch zusammengebaut werden. Sogar mit Sortierungsmöglichkeit der Kacheln. Natürlich viel von deinem DEMO abgeschaut!

                          Edit: verschoben, da Frage IconList Widget betrifft

                          1 Reply Last reply
                          0
                          • Uwe ClementU Offline
                            Uwe ClementU Offline
                            Uwe Clement
                            wrote on last edited by Scrounger
                            #22

                            Frage: Kann ich irgendwie Kacheln "freilassen", d.h. sagen die nächste Kachel soll in der nächsten Zeile dargestellt werden?

                            5562f58a-80dc-4700-8b58-e36367a8ff13-image.png

                            Möchte in meinem Beispiel keine Kacheln unterschiedlichsten Etagen in einer Zeile haben. Es würde die Welt nicht untergehen wenn dies nicht geht, aber eine Frage ist es mir wert.

                            DANKE!

                            Wenn es nicht geht, dann vermutlich als Workarround eine Kachel so formatieren, dass sie sich vom Hintergrund nicht unterscheidet....

                            Edit: verschoben, da Frage IconList Widget betrifft

                            ScroungerS 1 Reply Last reply
                            0
                            • Uwe ClementU Uwe Clement

                              Frage: Kann ich irgendwie Kacheln "freilassen", d.h. sagen die nächste Kachel soll in der nächsten Zeile dargestellt werden?

                              5562f58a-80dc-4700-8b58-e36367a8ff13-image.png

                              Möchte in meinem Beispiel keine Kacheln unterschiedlichsten Etagen in einer Zeile haben. Es würde die Welt nicht untergehen wenn dies nicht geht, aber eine Frage ist es mir wert.

                              DANKE!

                              Wenn es nicht geht, dann vermutlich als Workarround eine Kachel so formatieren, dass sie sich vom Hintergrund nicht unterscheidet....

                              Edit: verschoben, da Frage IconList Widget betrifft

                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              wrote on last edited by Scrounger
                              #23

                              @Uwe-Clement sagte in Material Design Widgets: IconList Widget:

                              Wieder falsche Kategorie. Sorry. Konnte den Post nicht mehr löschen

                              Kein Problem hast ja noch Welpenschutz ;-)
                              Am besten im Editor beim Widget wo du fragen hast auf Fragen & Antworten gehen, dann landest du direkt im entsprechenden Thema zum Wigdet.
                              2f780c13-3b0f-4c26-bd87-68c1d373283b-grafik.png

                              Ich versuche aber hier immer Ordnung zu halten und verschieb dann fleißig

                              geht, dann vermutlich als Workarround eine Kachel so formatieren, dass sie sich vom Hintergrund nicht unterscheidet....

                              Kannst du nur so realisieren.

                              Willst du dein Widget + Code vielleicht mit uns teilen?
                              Könntest z.B. hier
                              https://forum.iobroker.net/category/14/praktische-anwendungen-showcase
                              ein neues Thema eröffnen und uns deine Umsetzung (Widget + Skript) erläutern. Falls du Dich mit github auskennen solltest, dann bietet es sich an solche Umsetzung auf github inkl. Versionierung zu stellen.

                              Uwe ClementU 1 Reply Last reply
                              0
                              • ScroungerS Scrounger

                                @Uwe-Clement sagte in Material Design Widgets: IconList Widget:

                                Wieder falsche Kategorie. Sorry. Konnte den Post nicht mehr löschen

                                Kein Problem hast ja noch Welpenschutz ;-)
                                Am besten im Editor beim Widget wo du fragen hast auf Fragen & Antworten gehen, dann landest du direkt im entsprechenden Thema zum Wigdet.
                                2f780c13-3b0f-4c26-bd87-68c1d373283b-grafik.png

                                Ich versuche aber hier immer Ordnung zu halten und verschieb dann fleißig

                                geht, dann vermutlich als Workarround eine Kachel so formatieren, dass sie sich vom Hintergrund nicht unterscheidet....

                                Kannst du nur so realisieren.

                                Willst du dein Widget + Code vielleicht mit uns teilen?
                                Könntest z.B. hier
                                https://forum.iobroker.net/category/14/praktische-anwendungen-showcase
                                ein neues Thema eröffnen und uns deine Umsetzung (Widget + Skript) erläutern. Falls du Dich mit github auskennen solltest, dann bietet es sich an solche Umsetzung auf github inkl. Versionierung zu stellen.

                                Uwe ClementU Offline
                                Uwe ClementU Offline
                                Uwe Clement
                                wrote on last edited by
                                #24

                                @Scrounger Ja, ich teile gerne den Code. Ich werde noch das Finetuning fertigstellen und den Code dann einstellen. Danke Dir und viele Grüße!

                                1 Reply Last reply
                                1
                                • B Offline
                                  B Offline
                                  BobBruni
                                  wrote on last edited by BobBruni
                                  #25

                                  Hallo Scrounger,

                                  "Bedingung für Sichtbarkeit" für die einzelnen Listenelemente wäre genial!!!
                                  Könntest du das einbauen?

                                  Besten Dank!

                                  1 Reply Last reply
                                  0
                                  • Uwe ClementU Offline
                                    Uwe ClementU Offline
                                    Uwe Clement
                                    wrote on last edited by Uwe Clement
                                    #26

                                    @Scrounger Gibt es eine Möglichkeit pro Kachel mehr als einen Button darzustellen? Ich versuche das IconWidget - mit dem ich super Erfahrungen gemacht habe - irgendwie für die Rolladensteuerung zu nehmen.

                                    ScroungerS 1 Reply Last reply
                                    0
                                    • Uwe ClementU Uwe Clement

                                      @Scrounger Gibt es eine Möglichkeit pro Kachel mehr als einen Button darzustellen? Ich versuche das IconWidget - mit dem ich super Erfahrungen gemacht habe - irgendwie für die Rolladensteuerung zu nehmen.

                                      ScroungerS Offline
                                      ScroungerS Offline
                                      Scrounger
                                      Developer
                                      wrote on last edited by Scrounger
                                      #27

                                      @Uwe-Clement
                                      geht aktuell nicht. Schreib am besten nen issue auf github, damit wir es nicht vergessen.
                                      Aber das werde ich nur implementieren, wenn ich selber einen usecase habe, da zwei Buttons das entsprechend kompliziert machen.

                                      1 Reply Last reply
                                      0
                                      • FoodFighterF Offline
                                        FoodFighterF Offline
                                        FoodFighter
                                        wrote on last edited by
                                        #28

                                        Gibt es eine Möglichkeit Hintergrund-Bilder für die Buttons zu verwenden?

                                        Ich habe im Navigations-Menü überall die jquery-Buttos benutzt. Diese nutzen das im View-Reiter einstellbare Theme (in meinem Fall "Vader") und damit den entsprechenden Farbverlauf und so gefällt mir das auch sehr gut.
                                        Das machen die Materialdesign-Buttons jedoch leider nicht (Weder in er IconList, noch die "einzelnen" Buttons wie z.B. ButtonState) - diese nutzen eine feste Hintergrundfarbe statt eines Hintergrundbildes (Farbverlauf) aus dem eingestellten Theme.
                                        Das Farbverlauf-Background-Bild liegt unter
                                        /lib/css/themes/jquery-ui/vader/images/ui-bg_highlight-soft_35_adadad_1x100.png

                                        Eingebunden wird das dort über CSS folgendermaßen (ausgelesen über den Browser -> Webseite untersuchen);

                                        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
                                            border: 1px solid #ccc;
                                            background: #adadad url(images/ui-bg_highlight-soft_35_adadad_1x100.png) 50% 50% repeat-x;
                                            font-weight: normal;
                                            color: #333;
                                        }
                                        

                                        Bekommt man es irgendwie über CSS zurecht gefriemelt, dass die Materialdesign-Buttons aus der IconList auch dieses Hintergrund-Bild benutzen und nicht nur eine feste Hintergrundfarbe?
                                        Mit den gegebenen CSS-Einstellungen im vis-editor wird das Hintergrundbild leider nicht übernommen.

                                        Screenshot 2020-04-16 12.50.36.png

                                        ScroungerS 1 Reply Last reply
                                        0
                                        • FoodFighterF FoodFighter

                                          Gibt es eine Möglichkeit Hintergrund-Bilder für die Buttons zu verwenden?

                                          Ich habe im Navigations-Menü überall die jquery-Buttos benutzt. Diese nutzen das im View-Reiter einstellbare Theme (in meinem Fall "Vader") und damit den entsprechenden Farbverlauf und so gefällt mir das auch sehr gut.
                                          Das machen die Materialdesign-Buttons jedoch leider nicht (Weder in er IconList, noch die "einzelnen" Buttons wie z.B. ButtonState) - diese nutzen eine feste Hintergrundfarbe statt eines Hintergrundbildes (Farbverlauf) aus dem eingestellten Theme.
                                          Das Farbverlauf-Background-Bild liegt unter
                                          /lib/css/themes/jquery-ui/vader/images/ui-bg_highlight-soft_35_adadad_1x100.png

                                          Eingebunden wird das dort über CSS folgendermaßen (ausgelesen über den Browser -> Webseite untersuchen);

                                          .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
                                              border: 1px solid #ccc;
                                              background: #adadad url(images/ui-bg_highlight-soft_35_adadad_1x100.png) 50% 50% repeat-x;
                                              font-weight: normal;
                                              color: #333;
                                          }
                                          

                                          Bekommt man es irgendwie über CSS zurecht gefriemelt, dass die Materialdesign-Buttons aus der IconList auch dieses Hintergrund-Bild benutzen und nicht nur eine feste Hintergrundfarbe?
                                          Mit den gegebenen CSS-Einstellungen im vis-editor wird das Hintergrundbild leider nicht übernommen.

                                          Screenshot 2020-04-16 12.50.36.png

                                          ScroungerS Offline
                                          ScroungerS Offline
                                          Scrounger
                                          Developer
                                          wrote on last edited by
                                          #29

                                          @FoodFighter
                                          Für Farbverläufe braucht man kein Hintergrund Bild, kann man einfach als Hintergrundfarbe eintragen.
                                          f9fcc56a-676c-4787-bd18-33dba13e7522-grafik.png

                                          Mehr Infos zur Verwendung von Farbverläufen gibts hier:
                                          https://developer.mozilla.org/de/docs/Farbverläufe_in_CSS

                                          FoodFighterF 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          509

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe