Skip to content
  • Home
  • 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

Community Forum

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

NEWS

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

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

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

Material Design Widgets: IconList Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
134 Beiträge 26 Kommentatoren 21.6k Aufrufe 29 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.
  • 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
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
        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
          schrieb am zuletzt editiert von
          #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 Antworten Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #15

                  @liv-in-sky

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

                  <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                  <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                  liv-in-skyL 1 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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.

                      <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                      <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                      liv-in-skyL 1 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von Scrounger
                          #19

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

                          <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                          <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                          liv-in-skyL 1 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            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
                              schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                              0
                              • Uwe ClementU Offline
                                Uwe ClementU Offline
                                Uwe Clement
                                schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von 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.

                                  <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                  <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                  Uwe ClementU 1 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    1
                                    • B Offline
                                      B Offline
                                      BobBruni
                                      schrieb am zuletzt editiert von BobBruni
                                      #25

                                      Hallo Scrounger,

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

                                      Besten Dank!

                                      1 Antwort Letzte Antwort
                                      0
                                      • Uwe ClementU Offline
                                        Uwe ClementU Offline
                                        Uwe Clement
                                        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                        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
                                          schrieb am zuletzt editiert von 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.

                                          <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                          <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                          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

                                          736

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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