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

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

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

Material Design Widgets: IconList Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
134 Beiträge 26 Kommentatoren 21.5k 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.
  • I Offline
    I Offline
    Idefix01
    schrieb am zuletzt editiert von
    #70

    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 Antwort Letzte Antwort
    0
    • F Offline
      F Offline
      Frank1604
      schrieb am zuletzt editiert von
      #71

      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?

      ScroungerS 1 Antwort Letzte Antwort
      0
      • F Frank1604

        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?

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        schrieb am zuletzt editiert von
        #72

        @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!

        <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
        • ScroungerS Scrounger

          IconList Widget

          iconList.gif

          Sämtliche Fragen zu Einstellungen (VIS Editor, Bedienung, JSON strings, etc.) des Widgets hier stellen

          Das ist sicher besser für die Übersichtlichkeit und Dokumentation.

          • Dokumentation
          • Online Beispiel

          Themen zu anderen Widgets findest du hier!

          B Offline
          B Offline
          BobBruni
          schrieb am zuletzt editiert von
          #73

          @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 :grinning:

          iconList.gif

          Besten Dank!

          ScroungerS B 2 Antworten Letzte Antwort
          1
          • B BobBruni

            @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 :grinning:

            iconList.gif

            Besten Dank!

            ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            schrieb am zuletzt editiert von
            #74

            @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 :grinning:

            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.

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

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

            B 1 Antwort Letzte Antwort
            0
            • ScroungerS Scrounger

              @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 :grinning:

              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 Offline
              B Offline
              BobBruni
              schrieb am zuletzt editiert von
              #75

              @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?

              ScroungerS D 2 Antworten Letzte Antwort
              0
              • B BobBruni

                @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?

                ScroungerS Offline
                ScroungerS Offline
                Scrounger
                Developer
                schrieb am zuletzt editiert von
                #76

                @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.

                <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
                2
                • tobasiumT Offline
                  tobasiumT Offline
                  tobasium
                  schrieb am zuletzt editiert von tobasium
                  #77

                  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 Antwort Letzte Antwort
                  0
                  • tobasiumT 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 Offline
                    D Offline
                    dos1973
                    schrieb am zuletzt editiert von
                    #78

                    @tobasium

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

                    tobasiumT 1 Antwort Letzte Antwort
                    0
                    • D dos1973

                      @tobasium

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

                      tobasiumT Offline
                      tobasiumT Offline
                      tobasium
                      schrieb am zuletzt editiert von tobasium
                      #79

                      @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 Antwort Letzte Antwort
                      0
                      • G Offline
                        G Offline
                        gender
                        schrieb am zuletzt editiert von
                        #80

                        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?

                        GlasfaserG 1 Antwort Letzte Antwort
                        0
                        • G gender

                          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?

                          GlasfaserG Online
                          GlasfaserG Online
                          Glasfaser
                          schrieb am zuletzt editiert von Glasfaser
                          #81

                          @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 )

                          Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                          G 1 Antwort Letzte Antwort
                          0
                          • G Offline
                            G Offline
                            gender
                            schrieb am zuletzt editiert von
                            #82

                            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 Antwort Letzte Antwort
                            0
                            • B BobBruni

                              @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 :grinning:

                              iconList.gif

                              Besten Dank!

                              B Offline
                              B Offline
                              BobBruni
                              schrieb am zuletzt editiert von
                              #83

                              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 :grinning:

                              Besten Dank!

                              1 Antwort Letzte Antwort
                              0
                              • GlasfaserG 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 Offline
                                G Offline
                                gender
                                schrieb am zuletzt editiert von gender
                                #84

                                @glasfaser
                                Ich habe nochmal nachgedacht und erst JETZT deine Antwort überhaupt verstanden.

                                Ich habe in der Zwischenzeit aber auch auf github rausgefunden, dass man den List-Element ja ein Tag "buttonNavView" geben kann. War genau das, was ich gesucht habe. Trotzdem Danke.

                                1 Antwort Letzte Antwort
                                0
                                • K Offline
                                  K Offline
                                  Kunibert
                                  schrieb am zuletzt editiert von
                                  #85

                                  Hallo zusammen,

                                  wenn ich die Beispiele mit HTML Widgets versuche im List-Element zu nutzen bekomme ich die HTML-Elemente nicht angezeigt. Im Screenshot z. B. das Ergebnis, wenn ich das Beispiel von der Doku-Seite importiere. Die Listeneinträge sind vorhanden, die HTML-Schalter jedoch nicht.
                                  Und ich kann von Elementen wie z. B. dem Slider (aber auch allen anderen) keinen HTML-Export ausführen. Das Feld "HTML-Widget exportieren" ist nicht vorhanden.
                                  Ich setze die 0.51 beta ein.

                                  40c2d2e0-27dd-421a-bce3-075e6a5a91e5-image.png
                                  d6c0c13c-a9e4-4fa3-94aa-3c397989d8be-image.png

                                  Hat jemand eine Idee, wie ich die HTML-Widgets im Listenelement nutzen kann?

                                  Liebe Grüße und einen schönen Sonntag
                                  David

                                  K 1 Antwort Letzte Antwort
                                  0
                                  • K Kunibert

                                    Hallo zusammen,

                                    wenn ich die Beispiele mit HTML Widgets versuche im List-Element zu nutzen bekomme ich die HTML-Elemente nicht angezeigt. Im Screenshot z. B. das Ergebnis, wenn ich das Beispiel von der Doku-Seite importiere. Die Listeneinträge sind vorhanden, die HTML-Schalter jedoch nicht.
                                    Und ich kann von Elementen wie z. B. dem Slider (aber auch allen anderen) keinen HTML-Export ausführen. Das Feld "HTML-Widget exportieren" ist nicht vorhanden.
                                    Ich setze die 0.51 beta ein.

                                    40c2d2e0-27dd-421a-bce3-075e6a5a91e5-image.png
                                    d6c0c13c-a9e4-4fa3-94aa-3c397989d8be-image.png

                                    Hat jemand eine Idee, wie ich die HTML-Widgets im Listenelement nutzen kann?

                                    Liebe Grüße und einen schönen Sonntag
                                    David

                                    K Offline
                                    K Offline
                                    Kunibert
                                    schrieb am zuletzt editiert von
                                    #86

                                    Ok - nach langem herumprobieren wohl selbst gelöst :-). VIS neu gestartet, im Materialadapter alles resettet und nun scheint es zu laufen. Sorry!

                                    1 Antwort Letzte Antwort
                                    0
                                    • B Offline
                                      B Offline
                                      BamBam89
                                      schrieb am zuletzt editiert von
                                      #87

                                      Hallo zusammen,

                                      ich hoffe das ich hier richtig bin :-)
                                      Wie ja schon an einigen anderen Stellen hier im Forum erwähnt, bin ich derzeit dabei mir eine Cocktailautomaten zu bauen.
                                      Im Groben ist das Skript (Blockly) fertig und es funktioniert soweit alles.

                                      Nun möchte ich mich an die Visualisierung machen und bin auf das IconList Widget gestoßen.
                                      Ich muss dazu sagen, das ich sehr unbedarft bin, was z.B. JSON angeht. Was nicht heißt, das ich mich dazu nicht einarbeiten würde, sollte dieses Widget hier für meinen Anwendungsfall funktionieren.
                                      Was möchte ich gerne umsetzen?!

                                      Derzeit sieht der Cocktailautomat 28 Zutaten vor. Alle Zutaten werden über Pumpen ausgegeben und zwar so lange, bis ein bestimmtes Gewicht im Glas erreicht ist. Vor der Ausgabe wird noch überprüft ob die Füllmengen der Flaschen ausreichen um den ausgewählten Cocktail überhaupt herzustellen.

                                      Mein Wunsch wäre nun eine dynamische Liste, die ich z.B. nach der Hauptzutat Filtern kann (Wodka, Rum etc). Aus dieser Ansicht soll dann auch die Ausgabe gestartet werden können.
                                      Ich weiß nur leider überhaupt nicht wo ich hier ansetzten müsste. Was genau muss ich denn nun erstellen und wo einfügen... Ich muss zugeben, aus der Doku werde ich nicht so richtig schlau...
                                      Hier hoffe ich ein wenig auf eure Unterstützung.

                                      Wenn o.g. Sache läuft, dann hätte ich gerne noch einen weiteren Wunsch. Allerdings weiß ich nicht ob so etwas überhaupt umsetzbar ist.
                                      Es könnte ja durchaus vorkommen, das man eine von den 28 Zutaten nicht im Haus hat und leer ist. Sagen wir mal Wodka ist leer und auch kein Nachschub vorhanden.
                                      Nun wäre es natürlich toll, das die Liste nur noch die Cocktails anzeigt, in welchen auch KEIN Wodka vorhanden ist.

                                      Vielen Dank
                                      Gruß Christian

                                      B 1 Antwort Letzte Antwort
                                      0
                                      • B BamBam89

                                        Hallo zusammen,

                                        ich hoffe das ich hier richtig bin :-)
                                        Wie ja schon an einigen anderen Stellen hier im Forum erwähnt, bin ich derzeit dabei mir eine Cocktailautomaten zu bauen.
                                        Im Groben ist das Skript (Blockly) fertig und es funktioniert soweit alles.

                                        Nun möchte ich mich an die Visualisierung machen und bin auf das IconList Widget gestoßen.
                                        Ich muss dazu sagen, das ich sehr unbedarft bin, was z.B. JSON angeht. Was nicht heißt, das ich mich dazu nicht einarbeiten würde, sollte dieses Widget hier für meinen Anwendungsfall funktionieren.
                                        Was möchte ich gerne umsetzen?!

                                        Derzeit sieht der Cocktailautomat 28 Zutaten vor. Alle Zutaten werden über Pumpen ausgegeben und zwar so lange, bis ein bestimmtes Gewicht im Glas erreicht ist. Vor der Ausgabe wird noch überprüft ob die Füllmengen der Flaschen ausreichen um den ausgewählten Cocktail überhaupt herzustellen.

                                        Mein Wunsch wäre nun eine dynamische Liste, die ich z.B. nach der Hauptzutat Filtern kann (Wodka, Rum etc). Aus dieser Ansicht soll dann auch die Ausgabe gestartet werden können.
                                        Ich weiß nur leider überhaupt nicht wo ich hier ansetzten müsste. Was genau muss ich denn nun erstellen und wo einfügen... Ich muss zugeben, aus der Doku werde ich nicht so richtig schlau...
                                        Hier hoffe ich ein wenig auf eure Unterstützung.

                                        Wenn o.g. Sache läuft, dann hätte ich gerne noch einen weiteren Wunsch. Allerdings weiß ich nicht ob so etwas überhaupt umsetzbar ist.
                                        Es könnte ja durchaus vorkommen, das man eine von den 28 Zutaten nicht im Haus hat und leer ist. Sagen wir mal Wodka ist leer und auch kein Nachschub vorhanden.
                                        Nun wäre es natürlich toll, das die Liste nur noch die Cocktails anzeigt, in welchen auch KEIN Wodka vorhanden ist.

                                        Vielen Dank
                                        Gruß Christian

                                        B Offline
                                        B Offline
                                        BamBam89
                                        schrieb am zuletzt editiert von
                                        #88

                                        Ich bin nun ein wenig weiter. Ich hoffe da kann man drauf aufbauen...

                                        Ich habe nun einen Datenpunkt mit folgendem Inhalt erstellt (Der Inhalt ist statisch):

                                        [
                                                {
                                                    "image": "/vis.0/main/Bilder Cocktails Beschreibungen/PlantersPunch_Beschreibung.png",
                                                    "listType": "buttonToggle",
                                                    "objectId": "0_userdata.0.Cocktails.Alkoholfrei.Ananascocktail",
                                                    "background": "linear-gradient(0deg, grey, white)",
                                                    "Wodka": "X"
                                                },
                                                {
                                                    "image": "/vis.0/main/Symbole/Falsche_voll_2.png",
                                                    "listType": "buttonToggle",
                                                    "objectId": "0_userdata.0.Cocktails.Alkoholfrei.Babyface",
                                                    "background": "linear-gradient(0deg, grey, white)"
                                                },
                                                {
                                                    "image": "/vis.0/main/Bilder Cocktails Beschreibungen/PlantersPunch_Beschreibung.png",
                                                    "listType": "buttonToggle",
                                                    "background": "linear-gradient(0deg, grey, white)"
                                                },
                                                {
                                                    "image": "/vis.0/main/Symbole/Falsche_voll_2.png",
                                                    "listType": "buttonToggle",
                                                    "background": "linear-gradient(0deg, grey, white)"
                                                },
                                        

                                        und bekomme dadurch folgendes Ergebnis:

                                        74e2da59-cd15-4be3-b717-8cf7736b5961-image.png

                                        Nun wollte ich mich daran machen, die Liste zu sortieren, stoße da aber an eine Grenze.
                                        Ich hab ein Select Widget eingefügt, bei welchem ich aktuell Wodka auswählen kann.
                                        Wie man oben in der Tabelle sieht gibt es einen Cocktail bei dem bei Wodka ein X ist.
                                        Dieses X wird mir, wenn ich im Select Widget Wodka auswähle auch in einen Datenpunkt geschrieben.
                                        Aber wie bekomme ich denn nun die Tabelle/die IconList danach sortiert? Wo muss ich denn hier die Verknüpfung herstellen?

                                        Gruß Christian

                                        Gruß Christian

                                        ScroungerS 2 Antworten Letzte Antwort
                                        0
                                        • B BamBam89

                                          Ich bin nun ein wenig weiter. Ich hoffe da kann man drauf aufbauen...

                                          Ich habe nun einen Datenpunkt mit folgendem Inhalt erstellt (Der Inhalt ist statisch):

                                          [
                                                  {
                                                      "image": "/vis.0/main/Bilder Cocktails Beschreibungen/PlantersPunch_Beschreibung.png",
                                                      "listType": "buttonToggle",
                                                      "objectId": "0_userdata.0.Cocktails.Alkoholfrei.Ananascocktail",
                                                      "background": "linear-gradient(0deg, grey, white)",
                                                      "Wodka": "X"
                                                  },
                                                  {
                                                      "image": "/vis.0/main/Symbole/Falsche_voll_2.png",
                                                      "listType": "buttonToggle",
                                                      "objectId": "0_userdata.0.Cocktails.Alkoholfrei.Babyface",
                                                      "background": "linear-gradient(0deg, grey, white)"
                                                  },
                                                  {
                                                      "image": "/vis.0/main/Bilder Cocktails Beschreibungen/PlantersPunch_Beschreibung.png",
                                                      "listType": "buttonToggle",
                                                      "background": "linear-gradient(0deg, grey, white)"
                                                  },
                                                  {
                                                      "image": "/vis.0/main/Symbole/Falsche_voll_2.png",
                                                      "listType": "buttonToggle",
                                                      "background": "linear-gradient(0deg, grey, white)"
                                                  },
                                          

                                          und bekomme dadurch folgendes Ergebnis:

                                          74e2da59-cd15-4be3-b717-8cf7736b5961-image.png

                                          Nun wollte ich mich daran machen, die Liste zu sortieren, stoße da aber an eine Grenze.
                                          Ich hab ein Select Widget eingefügt, bei welchem ich aktuell Wodka auswählen kann.
                                          Wie man oben in der Tabelle sieht gibt es einen Cocktail bei dem bei Wodka ein X ist.
                                          Dieses X wird mir, wenn ich im Select Widget Wodka auswähle auch in einen Datenpunkt geschrieben.
                                          Aber wie bekomme ich denn nun die Tabelle/die IconList danach sortiert? Wo muss ich denn hier die Verknüpfung herstellen?

                                          Gruß Christian

                                          Gruß Christian

                                          ScroungerS Offline
                                          ScroungerS Offline
                                          Scrounger
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #89

                                          @bambam89 sagte in Material Design Widgets: IconList Widget:

                                          Aber wie bekomme ich denn nun die Tabelle/die IconList danach sortiert? Wo muss ich denn hier die Verknüpfung herstellen?

                                          Das geht nur per Skript, eine direkte Verknüpfung funktioniert nicht.
                                          Du brauchst einen DP für das Select Widget. Dann musst du auf Veränderungen des DP per Skript hören. Wenn sich dieser verändert kannst du per skript dein json filtern, sortieren, etc. und anschließend den DP des iconlist mit dem aktualisierten json string schreiben.

                                          Schau dir mal das AdapterStatus Skript an, dort hab ich genau diese Methode verwendet:
                                          https://forum.iobroker.net/topic/30661/material-design-widgets-adapter-status

                                          <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

                                          689

                                          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