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

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

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

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

    Könnte mir freundlicherweise jemand mal sein Skript posten, um nur eingeschaltene Geräte (Lichter) wie hier in dem Beispiel anzeigen zu lassen:

    iconList.gif

    Besten Dank!

    ScroungerS 1 Antwort Letzte Antwort
    0
    • B BobBruni

      Könnte mir freundlicherweise jemand mal sein Skript posten, um nur eingeschaltene Geräte (Lichter) wie hier in dem Beispiel anzeigen zu lassen:

      iconList.gif

      Besten Dank!

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

      @BobBruni

      Hier mein Skript dazu, wo ich genau die obere view realisiert habe. Evtl. hilft dir das weiter.

      // Prüfen ob irgendwelche Lichter in der Wohnung an sind ****************************************************************************************************
      let lichterSelector = `[id=${myDevices.Licht.getId()}.*.An]`;
      let alleLichter = $(lichterSelector);
      
      // Fehlermeldung ausgeben, wenn selector kein result liefert
      if (alleLichter.length === 0) {
          console.error(`no result for selector '${lichterSelector}'`)
      }
      
      let dimmerSelector = `[id=${myDevices.Licht.getId()}.*.Dimmer]`;
      let alleDimmer = $(dimmerSelector);
      
      // Fehlermeldung ausgeben, wenn selector kein result liefert
      if (alleDimmer.length === 0) {
          console.error(`no result for selector '${dimmerSelector}'`)
      }
      
      // Trigger
      alleLichter.on(lichterAnCheck);
      alleDimmer.on(lichterAnCheck);
      
      function lichterAnCheck() {
          try {
              let lichterAnListe = [];
              let lichterAnIdListe = [];
              let anyLightsOn = false;
      
              let lichterAnVisIconList = [];
              let subTextStyle = 'style="height: 26px; margin-top: 4px; margin-bottom: 4px;"'
      
              // alle Lichter durchlaufen und prüfen
              for (var i = 0; i <= alleLichter.length - 1; i++) {
                  let lichtId = alleLichter[i];
                  let lichtIdSplitted = lichtId.split(".");
      
                  if (getState(lichtId).val === true) {
                      let lichtName = (`${lichtIdSplitted[lichtIdSplitted.length - 3]} ${lichtIdSplitted[lichtIdSplitted.length - 2]}`)
                          .replace("Licht", "").replace("ue", "ü").replace("Main", "").trim();
      
                      lichterAnListe.push(lichtName);
                      lichterAnIdListe.push(lichtId);
                      anyLightsOn = true;
      
                      lichterAnVisIconList.push(
                          {
                              text: '<div style="height: 4px;"></div>',
                              subText: `<div ${subTextStyle}>${lichtName.replace(' ', '<br>')}</div>`,
                              objectId: lichtId,
                              listType: 'buttonToggle',
                              image: '/vis.0/myImages/light_bulb_off.png',
                              imageActive: '/vis.0/myImages/light_bulb_on.png',
                              showValueLabel: false,
                          }
                      )
                  }
              }
      
      
              // alle Dimmer durchlaufen und prüfen
              for (var i = 0; i <= alleDimmer.length - 1; i++) {
                  let dimmerId = alleDimmer[i];
                  let dimmerIdSplitted = dimmerId.split(".");
      
                  if (getState(dimmerId).val > 0) {
                      let dimmerName = (`${dimmerIdSplitted[dimmerIdSplitted.length - 3]} ${dimmerIdSplitted[dimmerIdSplitted.length - 2]}`)
                          .replace("Licht", "").replace("ue", "ü").replace("Main", "").trim();
      
                      lichterAnListe.push(dimmerName);
                      lichterAnIdListe.push(dimmerId);
                      anyLightsOn = true;
      
                      lichterAnVisIconList.push(
                          {
                              subText: `<div ${subTextStyle}>${dimmerName.replace(' ', '<br>')}</div>`,
                              objectId: dimmerId,
                              listType: 'buttonToggleValueFalse',
                              image: '/vis.0/myImages/light_bulb_off.png',
                              imageActive: '/vis.0/myImages/light_bulb_on.png',
                              buttonToggleValueTrue: 50,
                              buttonToggleValueFalse: 0,
                              valueAppendix: " %",
                              showValueLabel: false,
                          }
                      )
                  }
              }
      
              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
                      }
                  )
              }
      
              myDevices.Licht.Vis.iconListJson.setState(JSON.stringify(lichterAnVisIconList), true);
      
          } catch (err) {
              console.error(`[lichterAnCheck] error: ${err.message}`);
              console.error(`[lichterAnCheck] stack: ${err.stack}`);
          }
      };
      
      // Bei JS Start prüfen
      lichterAnCheck()
      

      <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 tobasiumT 2 Antworten 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!

        sigi234S Online
        sigi234S Online
        sigi234
        Forum Testing Most Active
        schrieb am zuletzt editiert von
        #33

        @Scrounger

        Hallo, kann ich wo einstellen das der Wert anders angezeigt wird?

        Also statt true/false - ein/aus oder eben eigener Text

        Screenshot (2361)_LI.jpg

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

        ScroungerS 1 Antwort Letzte Antwort
        0
        • sigi234S sigi234

          @Scrounger

          Hallo, kann ich wo einstellen das der Wert anders angezeigt wird?

          Also statt true/false - ein/aus oder eben eigener Text

          Screenshot (2361)_LI.jpg

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

          @sigi234
          Könntest den Wert ausblenden und als zweiten Text Binding verwenden und entsprechend damit formatieren

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

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

          sigi234S 1 Antwort Letzte Antwort
          0
          • ScroungerS Scrounger

            @sigi234
            Könntest den Wert ausblenden und als zweiten Text Binding verwenden und entsprechend damit formatieren

            sigi234S Online
            sigi234S Online
            sigi234
            Forum Testing Most Active
            schrieb am zuletzt editiert von sigi234
            #35

            @Scrounger sagte in Material Design Widgets: IconList Widget:

            @sigi234
            Könntest den Wert ausblenden und als zweiten Text Binding verwenden und entsprechend damit formatieren

            Ja dachte ich mir bekomme aber wieder true angezeigt.......dieses bindings begreife ich einfach nicht.

            Übrigens der Adapter Gartenbewässerung ist Cool, wäre ein Projekte für dich. ( so wie das Wetter von mir)

            https://forum.iobroker.net/topic/32213/test-adapter-gartenbewässerung-v0-0-x

            Ich sende dir mal mein Projekt:
            Habe Dummy DP eingebaut , da ich keinen Garten habe.:grinning:

            Bei Sonnenaufgang usw. bekomme ich das Datum auch nicht Richtig formatiert? Ist aber vom DP so.

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

            ScroungerS 1 Antwort Letzte Antwort
            0
            • sigi234S sigi234

              @Scrounger sagte in Material Design Widgets: IconList Widget:

              @sigi234
              Könntest den Wert ausblenden und als zweiten Text Binding verwenden und entsprechend damit formatieren

              Ja dachte ich mir bekomme aber wieder true angezeigt.......dieses bindings begreife ich einfach nicht.

              Übrigens der Adapter Gartenbewässerung ist Cool, wäre ein Projekte für dich. ( so wie das Wetter von mir)

              https://forum.iobroker.net/topic/32213/test-adapter-gartenbewässerung-v0-0-x

              Ich sende dir mal mein Projekt:
              Habe Dummy DP eingebaut , da ich keinen Garten habe.:grinning:

              Bei Sonnenaufgang usw. bekomme ich das Datum auch nicht Richtig formatiert? Ist aber vom DP so.

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

              @sigi234 sagte in Material Design Widgets: IconList Widget:

              Ja dachte ich mir bekomme aber wieder true angezeigt.......dieses bindings begreife ich einfach nicht.

              Hier ein Binding wie true / false in text umgewandelt wird:

              {a:0_userdata.0.MDW.Buttons.bool; (a === 'true') ? 'aktiv' : 'deaktiviert'}
              

              Übrigens der Adapter Gartenbewässerung ist Cool, wäre ein Projekte für dich. ( so wie das Wetter von mir)

              Ja aber erst wenn ich selber ne Gartenbewässerung habe ;-)

              <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
              1
              • M Offline
                M Offline
                michihorn
                schrieb am zuletzt editiert von Scrounger
                #37

                Hallöchen lieber Scounger, ich habe mal etwas mit den Widget experimentiert. Inbesondere die Icon List.
                Ich möchte gerne Markissen fahren die einen State 0 oder 100 erwarten.
                Unbenannt4.JPG
                In der markierten Zeile sollte 0 oder 100 stehen, je nach aktuellen Status. Wie könnte ich in der Zeile zwischen 0 und 100 hin und her switchen?

                Unbenannt.JPG
                hier betrifft es die Markissen
                Gruß
                Michael

                Edit: Verschoben, da Frage Widget Einstellung betrifft

                D ScroungerS 2 Antworten Letzte Antwort
                0
                • M michihorn

                  Hallöchen lieber Scounger, ich habe mal etwas mit den Widget experimentiert. Inbesondere die Icon List.
                  Ich möchte gerne Markissen fahren die einen State 0 oder 100 erwarten.
                  Unbenannt4.JPG
                  In der markierten Zeile sollte 0 oder 100 stehen, je nach aktuellen Status. Wie könnte ich in der Zeile zwischen 0 und 100 hin und her switchen?

                  Unbenannt.JPG
                  hier betrifft es die Markissen
                  Gruß
                  Michael

                  Edit: Verschoben, da Frage Widget Einstellung betrifft

                  D Offline
                  D Offline
                  dos1973
                  schrieb am zuletzt editiert von Scrounger
                  #38

                  @michihorn

                  Versuch mal mit einem Button „Toggle“
                  Du hast State.

                  Edit: Verschoben, da Frage Widget Einstellung betrifft

                  M 1 Antwort Letzte Antwort
                  0
                  • D dos1973

                    @michihorn

                    Versuch mal mit einem Button „Toggle“
                    Du hast State.

                    Edit: Verschoben, da Frage Widget Einstellung betrifft

                    M Offline
                    M Offline
                    michihorn
                    schrieb am zuletzt editiert von Scrounger
                    #39

                    @dos1973 Ich habe beides Probiert, leider ohne Erfolg

                    Edit: Verschoben, da Frage Widget Einstellung betrifft

                    1 Antwort Letzte Antwort
                    0
                    • M michihorn

                      Hallöchen lieber Scounger, ich habe mal etwas mit den Widget experimentiert. Inbesondere die Icon List.
                      Ich möchte gerne Markissen fahren die einen State 0 oder 100 erwarten.
                      Unbenannt4.JPG
                      In der markierten Zeile sollte 0 oder 100 stehen, je nach aktuellen Status. Wie könnte ich in der Zeile zwischen 0 und 100 hin und her switchen?

                      Unbenannt.JPG
                      hier betrifft es die Markissen
                      Gruß
                      Michael

                      Edit: Verschoben, da Frage Widget Einstellung betrifft

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

                      @michihorn sagte in Test Adapter Material Design Widgets v0.3.x:

                      In der markierten Zeile sollte 0 oder 100 stehen, je nach aktuellen Status. Wie könnte ich in der Zeile zwischen 0 und 100 hin und her switchen?

                      Musst Button Toggle Wert nehmen und dann die beiden werte entsprechend eintragen:

                      79fece18-f429-404d-814b-c4ec98ad5090-grafik.png

                      1fafc8a6-488e-4718-8aa7-05388a8e270a-grafik.png

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

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

                      M 1 Antwort Letzte Antwort
                      0
                      • ScroungerS Scrounger

                        @BobBruni

                        Hier mein Skript dazu, wo ich genau die obere view realisiert habe. Evtl. hilft dir das weiter.

                        // Prüfen ob irgendwelche Lichter in der Wohnung an sind ****************************************************************************************************
                        let lichterSelector = `[id=${myDevices.Licht.getId()}.*.An]`;
                        let alleLichter = $(lichterSelector);
                        
                        // Fehlermeldung ausgeben, wenn selector kein result liefert
                        if (alleLichter.length === 0) {
                            console.error(`no result for selector '${lichterSelector}'`)
                        }
                        
                        let dimmerSelector = `[id=${myDevices.Licht.getId()}.*.Dimmer]`;
                        let alleDimmer = $(dimmerSelector);
                        
                        // Fehlermeldung ausgeben, wenn selector kein result liefert
                        if (alleDimmer.length === 0) {
                            console.error(`no result for selector '${dimmerSelector}'`)
                        }
                        
                        // Trigger
                        alleLichter.on(lichterAnCheck);
                        alleDimmer.on(lichterAnCheck);
                        
                        function lichterAnCheck() {
                            try {
                                let lichterAnListe = [];
                                let lichterAnIdListe = [];
                                let anyLightsOn = false;
                        
                                let lichterAnVisIconList = [];
                                let subTextStyle = 'style="height: 26px; margin-top: 4px; margin-bottom: 4px;"'
                        
                                // alle Lichter durchlaufen und prüfen
                                for (var i = 0; i <= alleLichter.length - 1; i++) {
                                    let lichtId = alleLichter[i];
                                    let lichtIdSplitted = lichtId.split(".");
                        
                                    if (getState(lichtId).val === true) {
                                        let lichtName = (`${lichtIdSplitted[lichtIdSplitted.length - 3]} ${lichtIdSplitted[lichtIdSplitted.length - 2]}`)
                                            .replace("Licht", "").replace("ue", "ü").replace("Main", "").trim();
                        
                                        lichterAnListe.push(lichtName);
                                        lichterAnIdListe.push(lichtId);
                                        anyLightsOn = true;
                        
                                        lichterAnVisIconList.push(
                                            {
                                                text: '<div style="height: 4px;"></div>',
                                                subText: `<div ${subTextStyle}>${lichtName.replace(' ', '<br>')}</div>`,
                                                objectId: lichtId,
                                                listType: 'buttonToggle',
                                                image: '/vis.0/myImages/light_bulb_off.png',
                                                imageActive: '/vis.0/myImages/light_bulb_on.png',
                                                showValueLabel: false,
                                            }
                                        )
                                    }
                                }
                        
                        
                                // alle Dimmer durchlaufen und prüfen
                                for (var i = 0; i <= alleDimmer.length - 1; i++) {
                                    let dimmerId = alleDimmer[i];
                                    let dimmerIdSplitted = dimmerId.split(".");
                        
                                    if (getState(dimmerId).val > 0) {
                                        let dimmerName = (`${dimmerIdSplitted[dimmerIdSplitted.length - 3]} ${dimmerIdSplitted[dimmerIdSplitted.length - 2]}`)
                                            .replace("Licht", "").replace("ue", "ü").replace("Main", "").trim();
                        
                                        lichterAnListe.push(dimmerName);
                                        lichterAnIdListe.push(dimmerId);
                                        anyLightsOn = true;
                        
                                        lichterAnVisIconList.push(
                                            {
                                                subText: `<div ${subTextStyle}>${dimmerName.replace(' ', '<br>')}</div>`,
                                                objectId: dimmerId,
                                                listType: 'buttonToggleValueFalse',
                                                image: '/vis.0/myImages/light_bulb_off.png',
                                                imageActive: '/vis.0/myImages/light_bulb_on.png',
                                                buttonToggleValueTrue: 50,
                                                buttonToggleValueFalse: 0,
                                                valueAppendix: " %",
                                                showValueLabel: false,
                                            }
                                        )
                                    }
                                }
                        
                                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
                                        }
                                    )
                                }
                        
                                myDevices.Licht.Vis.iconListJson.setState(JSON.stringify(lichterAnVisIconList), true);
                        
                            } catch (err) {
                                console.error(`[lichterAnCheck] error: ${err.message}`);
                                console.error(`[lichterAnCheck] stack: ${err.stack}`);
                            }
                        };
                        
                        // Bei JS Start prüfen
                        lichterAnCheck()
                        
                        B Offline
                        B Offline
                        BobBruni
                        schrieb am zuletzt editiert von BobBruni
                        #41

                        @Scrounger said in Material Design Widgets: IconList Widget:

                        @BobBruni

                        Hier mein Skript dazu, wo ich genau die obere view realisiert habe. Evtl. hilft dir das weiter.

                        Vielen Dank! Ich schau mal, ob ich damit klar komme...

                        Ein fertiges Widget, dieser Art, ist nicht zufällig geplant? :stuck_out_tongue_winking_eye:

                        1 Antwort Letzte Antwort
                        0
                        • D Offline
                          D Offline
                          dos1973
                          schrieb am zuletzt editiert von
                          #42

                          Hi,

                          ich würde mich auch gerne via Blockly und dynamischen icon List versuchen wollen.

                          so würde ich es gerne haben wollen, Aber an den json versuchen scheitere ich.

                          Könnte mir jemand ein Beispiel json erstellen, was so aussieht.
                          der Text kommt aus einen DP. die grünen Haken sind auch in Abhängigkeit zu einem DP (state), und das ganz soll eine Navigation sein.

                          width:280px
                          high: 120px

                          Bildschirmfoto 2020-05-08 um 21.35.47.png

                          Danke schön für die Mühe und Hilfe

                          1 Antwort Letzte Antwort
                          0
                          • AxelF1977A Offline
                            AxelF1977A Offline
                            AxelF1977
                            schrieb am zuletzt editiert von AxelF1977
                            #43

                            @Scrounger ich arbeite bei meinen VIEWS mit Transparenz. Kann das mit eingefügt werden? Ich hätte die einzelnen Kacheln gerne mit transparenz

                            240f79b8-75e0-4294-b292-9ce005f2bfa8-image.png

                            Gibt es da einen Trick oder kann ich das in einer neuen Version eingefügt werden, unter dem Feld der Hintergrundfarbe z.B.?

                            Es gibt zwar eine entsprechende CSS Klasse, die kann ich aber nicht auf die einzelnen Kacheln anwenden. Oder habe ich im Script was übersehen?

                            .mdui-vis4-bg { background-color: rgba(38, 50, 56, .7) !important; }
                            

                            ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

                            ScroungerS 1 Antwort Letzte Antwort
                            0
                            • AxelF1977A AxelF1977

                              @Scrounger ich arbeite bei meinen VIEWS mit Transparenz. Kann das mit eingefügt werden? Ich hätte die einzelnen Kacheln gerne mit transparenz

                              240f79b8-75e0-4294-b292-9ce005f2bfa8-image.png

                              Gibt es da einen Trick oder kann ich das in einer neuen Version eingefügt werden, unter dem Feld der Hintergrundfarbe z.B.?

                              Es gibt zwar eine entsprechende CSS Klasse, die kann ich aber nicht auf die einzelnen Kacheln anwenden. Oder habe ich im Script was übersehen?

                              .mdui-vis4-bg { background-color: rgba(38, 50, 56, .7) !important; }
                              
                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              schrieb am zuletzt editiert von
                              #44

                              @AxelF1977
                              Bei Hintergrundfarbe transparent eingeben

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

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

                              AxelF1977A 1 Antwort Letzte Antwort
                              0
                              • ScroungerS Scrounger

                                @AxelF1977
                                Bei Hintergrundfarbe transparent eingeben

                                AxelF1977A Offline
                                AxelF1977A Offline
                                AxelF1977
                                schrieb am zuletzt editiert von
                                #45

                                @Scrounger sagte in Material Design Widgets: IconList Widget:

                                @AxelF1977
                                Bei Hintergrundfarbe transparent eingeben

                                Geht auch none. Aber dann ist da kein Hintergrund. Gebe ich #ffffff ein, ist er weiß pro Kachel. Dann soll das aber noch eine Transparenz haben. Ohne dass das auch auf die Schrift oder die Icon angewendet wird

                                ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

                                Chris TailorC 1 Antwort Letzte Antwort
                                0
                                • AxelF1977A AxelF1977

                                  @Scrounger sagte in Material Design Widgets: IconList Widget:

                                  @AxelF1977
                                  Bei Hintergrundfarbe transparent eingeben

                                  Geht auch none. Aber dann ist da kein Hintergrund. Gebe ich #ffffff ein, ist er weiß pro Kachel. Dann soll das aber noch eine Transparenz haben. Ohne dass das auch auf die Schrift oder die Icon angewendet wird

                                  Chris TailorC Offline
                                  Chris TailorC Offline
                                  Chris Tailor
                                  schrieb am zuletzt editiert von
                                  #46

                                  @AxelF1977 du kannst auch noch den Alphakanal mit angeben, also z.B. #ffffff20, somit kannst du die Transparenz steuern.

                                  AxelF1977A 1 Antwort Letzte Antwort
                                  1
                                  • Chris TailorC Chris Tailor

                                    @AxelF1977 du kannst auch noch den Alphakanal mit angeben, also z.B. #ffffff20, somit kannst du die Transparenz steuern.

                                    AxelF1977A Offline
                                    AxelF1977A Offline
                                    AxelF1977
                                    schrieb am zuletzt editiert von
                                    #47

                                    @Chris-Tailor sagte in Material Design Widgets: IconList Widget:

                                    @AxelF1977 du kannst auch noch den Alphakanal mit angeben, also z.B. #ffffff20, somit kannst du die Transparenz steuern.

                                    Sehr gut, danke. Habe es zwar schon probiert es so zu machen

                                    #263238 0.6
                                    #263238 .6
                                    

                                    Aber auf die Idee bin ich nicht gekommen. Kannte ich noch nicht. Es kann so einfach sein

                                    Funktioniert

                                    ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

                                    ScroungerS 1 Antwort Letzte Antwort
                                    0
                                    • AxelF1977A AxelF1977

                                      @Chris-Tailor sagte in Material Design Widgets: IconList Widget:

                                      @AxelF1977 du kannst auch noch den Alphakanal mit angeben, also z.B. #ffffff20, somit kannst du die Transparenz steuern.

                                      Sehr gut, danke. Habe es zwar schon probiert es so zu machen

                                      #263238 0.6
                                      #263238 .6
                                      

                                      Aber auf die Idee bin ich nicht gekommen. Kannte ich noch nicht. Es kann so einfach sein

                                      Funktioniert

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

                                      @AxelF1977
                                      Du kannst auch rgba verwenden:
                                      https://www.w3schools.com/cssref/func_rgba.asp

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

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

                                      AxelF1977A 1 Antwort Letzte Antwort
                                      0
                                      • ScroungerS Scrounger

                                        @AxelF1977
                                        Du kannst auch rgba verwenden:
                                        https://www.w3schools.com/cssref/func_rgba.asp

                                        AxelF1977A Offline
                                        AxelF1977A Offline
                                        AxelF1977
                                        schrieb am zuletzt editiert von
                                        #49

                                        @Scrounger sehr gut, Danke, so kann ich direkt den Schnippsel aus meinem CSS verwenden.

                                        Klappt.

                                        ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

                                        1 Antwort Letzte Antwort
                                        0
                                        • ScroungerS Scrounger

                                          @BobBruni

                                          Hier mein Skript dazu, wo ich genau die obere view realisiert habe. Evtl. hilft dir das weiter.

                                          // Prüfen ob irgendwelche Lichter in der Wohnung an sind ****************************************************************************************************
                                          let lichterSelector = `[id=${myDevices.Licht.getId()}.*.An]`;
                                          let alleLichter = $(lichterSelector);
                                          
                                          // Fehlermeldung ausgeben, wenn selector kein result liefert
                                          if (alleLichter.length === 0) {
                                              console.error(`no result for selector '${lichterSelector}'`)
                                          }
                                          
                                          let dimmerSelector = `[id=${myDevices.Licht.getId()}.*.Dimmer]`;
                                          let alleDimmer = $(dimmerSelector);
                                          
                                          // Fehlermeldung ausgeben, wenn selector kein result liefert
                                          if (alleDimmer.length === 0) {
                                              console.error(`no result for selector '${dimmerSelector}'`)
                                          }
                                          
                                          // Trigger
                                          alleLichter.on(lichterAnCheck);
                                          alleDimmer.on(lichterAnCheck);
                                          
                                          function lichterAnCheck() {
                                              try {
                                                  let lichterAnListe = [];
                                                  let lichterAnIdListe = [];
                                                  let anyLightsOn = false;
                                          
                                                  let lichterAnVisIconList = [];
                                                  let subTextStyle = 'style="height: 26px; margin-top: 4px; margin-bottom: 4px;"'
                                          
                                                  // alle Lichter durchlaufen und prüfen
                                                  for (var i = 0; i <= alleLichter.length - 1; i++) {
                                                      let lichtId = alleLichter[i];
                                                      let lichtIdSplitted = lichtId.split(".");
                                          
                                                      if (getState(lichtId).val === true) {
                                                          let lichtName = (`${lichtIdSplitted[lichtIdSplitted.length - 3]} ${lichtIdSplitted[lichtIdSplitted.length - 2]}`)
                                                              .replace("Licht", "").replace("ue", "ü").replace("Main", "").trim();
                                          
                                                          lichterAnListe.push(lichtName);
                                                          lichterAnIdListe.push(lichtId);
                                                          anyLightsOn = true;
                                          
                                                          lichterAnVisIconList.push(
                                                              {
                                                                  text: '<div style="height: 4px;"></div>',
                                                                  subText: `<div ${subTextStyle}>${lichtName.replace(' ', '<br>')}</div>`,
                                                                  objectId: lichtId,
                                                                  listType: 'buttonToggle',
                                                                  image: '/vis.0/myImages/light_bulb_off.png',
                                                                  imageActive: '/vis.0/myImages/light_bulb_on.png',
                                                                  showValueLabel: false,
                                                              }
                                                          )
                                                      }
                                                  }
                                          
                                          
                                                  // alle Dimmer durchlaufen und prüfen
                                                  for (var i = 0; i <= alleDimmer.length - 1; i++) {
                                                      let dimmerId = alleDimmer[i];
                                                      let dimmerIdSplitted = dimmerId.split(".");
                                          
                                                      if (getState(dimmerId).val > 0) {
                                                          let dimmerName = (`${dimmerIdSplitted[dimmerIdSplitted.length - 3]} ${dimmerIdSplitted[dimmerIdSplitted.length - 2]}`)
                                                              .replace("Licht", "").replace("ue", "ü").replace("Main", "").trim();
                                          
                                                          lichterAnListe.push(dimmerName);
                                                          lichterAnIdListe.push(dimmerId);
                                                          anyLightsOn = true;
                                          
                                                          lichterAnVisIconList.push(
                                                              {
                                                                  subText: `<div ${subTextStyle}>${dimmerName.replace(' ', '<br>')}</div>`,
                                                                  objectId: dimmerId,
                                                                  listType: 'buttonToggleValueFalse',
                                                                  image: '/vis.0/myImages/light_bulb_off.png',
                                                                  imageActive: '/vis.0/myImages/light_bulb_on.png',
                                                                  buttonToggleValueTrue: 50,
                                                                  buttonToggleValueFalse: 0,
                                                                  valueAppendix: " %",
                                                                  showValueLabel: false,
                                                              }
                                                          )
                                                      }
                                                  }
                                          
                                                  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
                                                          }
                                                      )
                                                  }
                                          
                                                  myDevices.Licht.Vis.iconListJson.setState(JSON.stringify(lichterAnVisIconList), true);
                                          
                                              } catch (err) {
                                                  console.error(`[lichterAnCheck] error: ${err.message}`);
                                                  console.error(`[lichterAnCheck] stack: ${err.stack}`);
                                              }
                                          };
                                          
                                          // Bei JS Start prüfen
                                          lichterAnCheck()
                                          
                                          tobasiumT Offline
                                          tobasiumT Offline
                                          tobasium
                                          schrieb am zuletzt editiert von
                                          #50

                                          @Scrounger Kannst du erklären wie man das Script genau nutzt stehe etwas auf dem Schlauch. Sehe auch keine Datenpunkte. Verstehe noch nicht wo ich hier genau ansetze. Wo muss das skript genau eingefügt werden.
                                          Eingabemethode für Listendaten habe ich aktuell über den Editor realisiert.
                                          Vielen Dank vorab.

                                          ScroungerS 2 Antworten Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          639

                                          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