Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: IconList Widget

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Material Design Widgets: IconList Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • Scrounger
      Scrounger Developer @micklafisch last edited by

      @micklafisch

      Kommentier mal die Zeilen 88-120 komplett aus:

              // let anyLightsOnState = myDevices.Licht.LichterAn.getState();
              // if (anyLightsOnState.val != anyLightsOn) {
              //     myDevices.Licht.LichterAn.setState(anyLightsOn, true);
              // }
      
              // if (lichterAnListe.length > 0) {
              //     let result = lichterAnListe.sort().join(", ");
              //     result = result.replaceAt(result.lastIndexOf(","), " und");
      
              //     let anyLightsOnStringState = myDevices.Licht.LichterAnText.getState();
              //     if (anyLightsOnStringState.val != result) {
              //         log("folgende Lichter sind an: " + result);
              //         myDevices.Licht.LichterAnText.setState(result, true);
              //         myDevices.Licht.LichterAnId.setState(lichterAnIdListe.join(", "), true);
              //     }
              // } else {
              //     myDevices.Licht.LichterAnText.setState("", true);
              //     myDevices.Licht.LichterAnId.setState("", true);
              // }
      
              // if (lichterAnVisIconList.length > 0) {
              //     lichterAnVisIconList.unshift(
              //         {
              //             subText: `<div ${subTextStyle}>alle Lichter<br>ausschalten</div>`,
              //             objectId: myDevices.Licht.AlleLichterAusschalten.getId(),
              //             listType: 'buttonState',
              //             buttonStateValue: true,
              //             showValueLabel: false,
              //             image: 'lightbulb-multiple-off',
              //             lockEnabled: true
              //         }
              //     )
              // }
      
      M 1 Reply Last reply Reply Quote 0
      • M
        micklafisch @Scrounger last edited by

        @Scrounger
        jetzt erscheint im Log

        javascript.0	2020-06-29 08:40:21.693	error	(17560) script.js.common.test_LichteranView: [lichterAnCheck] stack: TypeError: Cannot read property 'iconListJson' of undefined at lichterAnCheck (script.js.common.test_LichteranView:202:29)
        javascript.0	2020-06-29 08:40:21.692	error	(17560) script.js.common.test_LichteranView: [lichterAnCheck] error: Cannot read property 'iconListJson' of undefined
        

        Soll es für den Eintrag in Zeile 123 "myDevices.Licht.Vis.iconListJson.setState" ein Datenpunkt geben? Ich sehe keine Definition dafür im Skript. Das "myDevices" ist ja nur eine Variable aus dem Linkeddevices Adapter.

        Scrounger 1 Reply Last reply Reply Quote 0
        • Scrounger
          Scrounger Developer @micklafisch last edited by

          @micklafisch

          Diesen Datenpunkt musst du dir selbst anlegen. Hier wird dann letztendlich der json string gespeichert, den du dann im iconList Widget als Objekt ID angibst.

          M 1 Reply Last reply Reply Quote 0
          • M
            micklafisch @Scrounger last edited by

            @Scrounger
            es ist ja nicht so als hätte ich das nicht im Vorfeld probiert. Ich will ja nicht nerven, aber kannst du die Zeile näher erläutern?

            4c7f990c-a75f-4b0f-a054-66c27c5c1ce6-image.png

            Ich habe versucht einen eigenen Datenpunkt zu hinterlegen, aber das schlägt fehl.

            7b4aefb8-e0f5-49f9-859b-77c3d9012af0-image.png

            javascript.0	2020-06-30 08:34:59.486	error	(28794) SyntaxError: Invalid or unexpected token
            javascript.0	2020-06-30 08:34:59.486	error	(28794) ^
            javascript.0	2020-06-30 08:34:59.486	error	(28794) 0_userdata.0.vis.iconlist.setState(JSON.stringify(lichterAnVisIconList), true);
            javascript.0	2020-06-30 08:34:59.486	error	at script.js.common.test_LichteranView:124
            javascript.0	2020-06-30 08:34:59.486	error	(28794) script.js.common.test_LichteranView compile failed:
            

            Auch habe ich versucht den Datenpunkt unterhalb des linkeddevices in dem Objektbaum "Licht" zu erzeugen und zu verwenden. Aber auch das funktioniert nicht.

            Scrounger 1 Reply Last reply Reply Quote 0
            • Scrounger
              Scrounger Developer @micklafisch last edited by

              @micklafisch sagte in Material Design Widgets: IconList Widget:

              Ich habe versucht einen eigenen Datenpunkt zu hinterlegen, aber das schlägt fehl.

              7b4aefb8-e0f5-49f9-859b-77c3d9012af0-image.png

              wert für einen eigenen datenpunkt muss so gesetzt werden:

              setState('0_userdata.0.vis.iconlist', JSON.stringify(lichterAnVisIconList), true)
              
              M 1 Reply Last reply Reply Quote 0
              • M
                micklafisch @Scrounger last edited by

                @Scrounger

                Juhu, jetzt hab ichs. Ich habe alle meine Versuche gelöscht und nochmal von vorne angefangen. Dazu habe ich mich für eine Stunde eingeschlossen, diesen Thread hier erneut komplett gelesen und bin dann Schritt für Schritt alles durchgegangen.

                Jetzt läuft das ganze bei mir! Danke @Scrounger für deine Hilfe!

                1 Reply Last reply Reply Quote 0
                • I
                  Idefix01 last edited by

                  Hallöchen,

                  ich habe eine Enerieanzeige über Material Design Widget. In diesem sind auch Bilder (im Script) enthalten. Kann es sein das Bilder über Script aufgerufen nicht über die App iobroker.vis (Tablet) anzeigbar sind? Bilder die ich so integriert habe lassen sich alle anzeigen.

                  1 Reply Last reply Reply Quote 0
                  • F
                    Frank1604 last edited by

                    Huhu,

                    ich nutze die iconlist als Titelliste in meiner Sonosview. Im Prinzip war das die einzige Option, da ich die Titel dynamisch als JSON im Datenpunkt vorliegen habe und die anderen Listwidgets das nicht unterstützen.

                    Aussehen tut das dann so:
                    titelliste.JPG
                    Ich fülle die Liste wie gesagt dynamisch, jeweils beim Wechsel des Raumes. Dazu erzeuge ich die Listenelemente nach diesem Schema:

                                for (let entry of titleRawList) {
                                    title_list.push({
                                        "background": "#535353",
                                        "buttonBackgroundActiveColor": "#737373",
                                        "text": entry.title,
                                        "subText": entry.artist,
                                        "image": "music-note",
                                        "imageColor": "#c3c3c3",
                                        "imageActiveColor": "#5ad902",
                                        "listType": "buttonState",
                                        "objectId": 'datenpunkte.0.sonos.visplayer.titleselect',
                                        "buttonStateValue": entry.uri,
                                        "showValueLabel": "false",
                                        "lockEnabled": "false"
                                    });
                                    title_uris.push(entry.uri);
                                }
                    

                    Die Objektid ist dabei immer die gleiche, dadurch wird das Item des aktuellen Titels auch active. Das funktioniert wunderbar, ich kann auch die Titel setzen durch Klick auf das jeweiligen Item, alles perfekt.

                    Problematisch wird das Ganze nur wenn es zu viele Einträge gibt. Je mehr Titel in der Playliste, desto träger wird das. Ich habe Playlisten die um die 100 Titel enthalten, da wird es dann richtig langsam.

                    Das Laden der Liste geht eigentlich noch, allerdings hängt das Setzte des active-Status extrem lange. Sprich alle Elemente sind da, aber wenn sich der active-Status ändert (nächster Titel) dann gibt es eine Kunstpause. Das Vis hängt komplett. Bei kleineren Listen sind das nur ein paar Sekunden bei der großen kann das durchaus mal eine Minute sein.

                    Woran könnte das liegen oder was kann ich anders machen?

                    Scrounger 1 Reply Last reply Reply Quote 0
                    • Scrounger
                      Scrounger Developer @Frank1604 last edited by

                      @Frank1604 sagte in Material Design Widgets: IconList Widget:

                      Das Laden der Liste geht eigentlich noch, allerdings hängt das Setzte des active-Status extrem lange. Sprich alle Elemente sind da, aber wenn sich der active-Status ändert (nächster Titel) dann gibt es eine Kunstpause. Das Vis hängt komplett. Bei kleineren Listen sind das nur ein paar Sekunden bei der großen kann das durchaus mal eine Minute sein.

                      Fehler ist in der nächsten Version behoben. @Frank1604 thx nochmals fürs testen!

                      1 Reply Last reply Reply Quote 0
                      • B
                        BobBruni @Scrounger last edited by

                        @Scrounger wäre es denkbar, dass du hierfür ein eigenes Widget erstellst?
                        Das würde allen helfen die, wie ich, kein Plan von Javascript haben 😀

                        iconList.gif

                        Besten Dank!

                        Scrounger B 2 Replies Last reply Reply Quote 1
                        • Scrounger
                          Scrounger Developer @BobBruni last edited by

                          @BobBruni sagte in Material Design Widgets: IconList Widget:

                          @Scrounger wäre es denkbar, dass du hierfür ein eigenes Widget erstellst?
                          Das würde allen helfen die, wie ich, kein Plan von Javascript haben 😀

                          Sorry, no chance. Ich erstelle nur Basis Widgets, die dann entsprechend universell genutzt werden können. Das ist viel zu speziell. Vorallem müsste dann die verschiedenen Hardware (Homematic, Ikea, Hue, etc.) berücksichtigt werden.

                          Denke das das obige Beispiel mit Hilfe des Forums nicht all zu komplex ist. Alternativ kann man sich das mit weniger Funktion auch per Editor zusammen klicken.

                          B 1 Reply Last reply Reply Quote 0
                          • B
                            BobBruni @Scrounger last edited by

                            @Scrounger said in Material Design Widgets: IconList Widget:

                            Alternativ kann man sich das mit weniger Funktion auch per Editor zusammen klicken.

                            Wenn es für jedes Listenelement die Option "Bedingung für Sichtbarkeit" geben würde, könnte man es sich mit dem Editor zusammen klicken... Oder gibt es eine andere Möglichkeit?

                            Scrounger D 2 Replies Last reply Reply Quote 0
                            • Scrounger
                              Scrounger Developer @BobBruni last edited by

                              @BobBruni sagte in Material Design Widgets: IconList Widget:

                              Wenn es für jedes Listenelement die Option "Bedingung für Sichtbarkeit" geben würde, könnte man es sich mit dem Editor zusammen klicken... Oder gibt es eine andere Möglichkeit?

                              Schreib nen issue auf github, dann werd ich es einbauen.

                              1 Reply Last reply Reply Quote 2
                              • tobasium
                                tobasium last edited by tobasium

                                Hallo Zusammen,

                                bei mir sind die Dropdowns in allen views im Hintergrund.

                                Jemand ein Tipp wo ich den Fehler habe?

                                Vielen Dank.

                                unifiview.jpg

                                D 1 Reply Last reply Reply Quote 0
                                • D
                                  dos1973 @tobasium last edited by

                                  @tobasium

                                  Im Hintergrund bedeutet im Regelfall der z-Index ist zu niedrig.

                                  tobasium 1 Reply Last reply Reply Quote 0
                                  • tobasium
                                    tobasium @dos1973 last edited by tobasium

                                    @dos1973 das hatte ich auch gedacht. Aber ich hab den wert hoch gesetzt. Oder gibt es hier mehr als 1 Z-index

                                    Fehler gefunden meine komplette view war hier drüber

                                    1 Reply Last reply Reply Quote 0
                                    • G
                                      gender last edited by

                                      Hi,
                                      ich benutze die Icon-List, um die Temperaturen und Fensterstellungen (auf/zu) aller Räume darzustellen.
                                      Es wäre praktisch, wenn man durch einen Klick auf eine Kachel zu einer anderen View kommen könnte (den Kacheln in der Icon-List also einen Link geben).
                                      Man kann die Icons ja grundsätzlich "anklicken", ist aber wohl ja eher für "an/aus" gedacht.

                                      In meinem Anwendungsfall wäre aber eine verlinkte View nützlicher.
                                      Wäre das möglich?

                                      Glasfaser 1 Reply Last reply Reply Quote 0
                                      • Glasfaser
                                        Glasfaser @gender last edited by Glasfaser

                                        @gender sagte in Material Design Widgets: IconList Widget:

                                        zu einer anderen View kommen
                                        (den Kacheln in der Icon-List also einen Link geben).

                                        Du kannst doch Werte angeben 0-.... je nach View ...... und das damit das view in widget 8 steuern.
                                        ( Funktion wie bei TopAppBar )

                                        G 1 Reply Last reply Reply Quote 0
                                        • G
                                          gender last edited by

                                          hmm, verstehe ich nicht ganz.
                                          Ich habe ja jetzt eine Iconlist, und der Inhalt dieser Iconlist wird als JSON-String in einem Skript generiert.
                                          Die Kombination mit dem widget8 geht glaube ich nicht mit dem "Iconlist-Widget"

                                          1 Reply Last reply Reply Quote 0
                                          • B
                                            BobBruni @BobBruni last edited by

                                            Hallo Zusammen,

                                            ich versuche mich gerade an dem dynamischen Widget um mir eingeschaltene Lichter, wie im Eingangspost, anzeigen zu lassen.

                                            Hierzu habe ich ein bestehendes "Lichter-zählen-Script" etwas abgespeckt.
                                            Dieses läuft zumindest schon mal und erstellt mir eine Liste mit den Lichternamen in einem Datenpunkt.
                                            4f67253c-01d8-476b-b5bf-1a0ef42d8cd2-image.png

                                            Nachdem ich in Javascript leider überhaupt nicht fit bin, bräuchte ich Unterstützung bei der Umsetzung damit das IconList Widget damit auch was anfangen kann. Hier mal mein Skript:

                                            /* Status Zahl Lichter
                                            
                                            zählt die Lichter in allen Räumen und meldet die Eingeschalteten namentlich
                                            Daten kommen vom Gewerk "Licht"
                                            */
                                            const logging = true;
                                            
                                            const idText = 'javascript.0.Vis.IconListLicht';
                                            
                                            // Ab hier nix mehr ändern
                                            
                                            createState(idText, { // Anzahl der brennenden Lichter und deren Namen als Variable unter Javascript.0 anlegen
                                                type: 'string',
                                                name: 'Eingeschaltete Lichter',
                                                desc: 'Namen der eingeschalteten Lichter',
                                                def: ' ',
                                                role: 'value'
                                            });
                                            
                                            // HM Schalter, HM Dimmer und Hue Schalter im Gewerk Licht
                                            const hmSTATE = $('channel[state.id=*.STATE](functions=Licht)');
                                            const hmLEVEL = $('channel[state.id=*.LEVEL](functions=Licht)');
                                            //const hueon   = $('state[id=*.on](functions=Licht)[role=switch.light]');
                                            const shelly  = $('state[id=*.Switch](functions=Licht)');
                                            
                                            var textLichterAn;
                                            	
                                            function checkLicht(id, vorn, hinten) {
                                                var name = getObject(id).common.name;
                                                var devicename = name.substring(vorn, name.indexOf(hinten)); //Zeichen vorn, State hinten aus Text entfernen
                                                if (getState(id).val) { // wenn Zustand != false / 0, dann wird die Anzahl der Lichter hochgezählt
                                                    textLichterAn.push(devicename); 
                                                }
                                                
                                            }
                                            
                                            function checkDevices() {
                                                // Setzt die Zähler vor dem Durchlauf aller Elemente *.STATE im Gewerk Licht auf 0
                                                textLichterAn = [];
                                                hmSTATE.each(function(id, i) { // Schleife für jedes gefundenen Element *.STATE im Gewerk Licht
                                            	    checkLicht(id, 0, '.STATE');
                                                });
                                                
                                                shelly.each(function(id, i) { // Schleife für jedes gefundenen Element *.Switch im Gewerk Licht
                                            	    checkLicht(id, 0, '.Switch');
                                                });
                                            
                                                /*hueon.each(function(id, i) { // Schleife für jedes gefundenen Element *.on im Gewerk Licht
                                            	    checkLicht(id, 6, '.on');
                                                });*/
                                            
                                                hmLEVEL.each(function(id, i) { // Schleife für jedes gefundenen Element *.LEVEL im Gewerk Licht
                                            	    checkLicht(id, 0, '.LEVEL');
                                                });
                                                
                                                // Array mit Lichternamen sortieren
                                                textLichterAn.sort();
                                                // Schleife ist durchlaufen. Im Log wird der aktuelle Status (Anzahl, davon an) ausgegeben
                                                if (logging) log("Text: " + textLichterAn);
                                                // die ermittelten Werte werden als javascript.0. Variable in ioBroker gespeichert (z.B. für die Verarbeitung in VIS)
                                                //setState(idText, textLichterAn.join(',<br>')); // Schreibt die aktuelle Namen der eingeschalteten Lichter
                                                setState(idText, textLichterAn.join(', ')); // Schreibt die aktuelle Namen der eingeschalteten Lichter
                                            }
                                            // Trigger
                                            hmSTATE.on(function(obj) { // bei Zustandänderung *.STATE im Gewerk Licht
                                                if (logging) log('Auslösender Schalter: ' + obj.id + ': ' + obj.state.val); // Info im Log, welcher Zustand sich geändert hat
                                                checkDevices();
                                            });
                                            shelly.on(function(obj) { // bei Zustandänderung *.Switch von Shellys im Gewerk Licht
                                                if (logging) log('Auslösender Shelly: ' + obj.id + ': ' + obj.state.val); // Info im Log, welcher Zustand sich geändert hat
                                                checkDevices();
                                            });
                                            /*hueon.on(function(obj) { // bei Zustandänderung *.on von HUE Lampen im Gewerk Licht
                                                if (logging) log('Auslösende HUE: ' + obj.id + ': ' + obj.state.val); // Info im Log, welcher Zustand sich geändert hat
                                                checkDevices();
                                            });*/
                                            hmLEVEL.on(function(obj) { // bei Zustandänderung *.LEVEL im Gewerk Licht
                                                if (logging) log('Auslösender Dimmer: ' + obj.id + ': ' + obj.state.val); // Info im Log, welcher Zustand sich geändert hat
                                                checkDevices();
                                            });
                                            
                                            // Skriptstart
                                            setTimeout(function() {
                                                if (logging) log('Auslöser Skriptstart');
                                                checkDevices();
                                            }, 500);
                                            
                                            
                                            

                                            Vielleicht kann mir jemand weiterhelfen 😀

                                            Besten Dank!

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            830
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            26
                                            134
                                            15434
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo