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

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

  • 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.
  • ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    wrote on last edited by Scrounger
    #3

    Beispiele, wie ein dynamisch erzeugtes IconList Widget funktioniert findet ihr hier:

    • Adapter Status iconList_adapterStatus.gif

    • Skript Status Skript_Status.gif

    @g-polat
    Sowas kannst du per skript und json string realisieren.

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

      Beispiele, wie ein dynamisch erzeugtes IconList Widget funktioniert findet ihr hier:

      • Adapter Status iconList_adapterStatus.gif

      • Skript Status Skript_Status.gif

      @g-polat
      Sowas kannst du per skript und json string realisieren.

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

      @Scrounger hi

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

      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 2 Replies Last reply
      0
      • liv-in-skyL liv-in-sky

        @Scrounger hi

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

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

        @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

        Nee das geht aktuell nicht. Kann ich aber einbauen, gibt's dann in der nächsten Version.

        liv-in-skyL 1 Reply Last reply
        1
        • 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

          Nee das geht aktuell nicht. Kann ich aber einbauen, gibt's dann in der nächsten Version.

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

          @Scrounger ich baue gerade deine widgets in mein energie script ein (https://forum.iobroker.net/topic/29189/energieanzeige-kwh-über-html-tabelle-vis/281)

          mein problem ist, dort gibt es energieabnehmer ( das sind die meisten davon) aber es gibt auch welche die energie liefern - die müssen irgendwie richtig hervorgehoben 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

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

            @Scrounger hi

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

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

            @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 2 Replies 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
              #8

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

              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

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

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

                @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

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

                liv-in-skyL 1 Reply Last reply
                0
                • 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
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          696

                                          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