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: List 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
    1.9k

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

Material Design Widgets: List Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
103 Beiträge 31 Kommentatoren 16.2k Aufrufe 31 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.
  • F fuerst2626

    Hallo zusammen,
    ich setze iobroker gerade Mal ein paar Wochen ein und bin noch im Aufbau meiner Visualisierung.
    Die Ergebnisse können sich schon jetzt sehen lassen und ich bin schwer begeistert von der Arbeit einzelner hier! Es kommen natürlich auch die ersten offenen Fragen auf, wie z.B:

    Kann ich irgendwie die eigentliche Größe der "Schalter Grafik" anpassen?
    Ein anpassen der Spaltenhöhe, sowie Text und Symbolgröße bekomme ich hin.
    Bzgl. der "Schalter Grafik" finde ich jedoch keine Möglichkeit im Editor.
    Mein Ziel ist es die VIS ähnlich einem iOS Design zu kreieren. Dort sind die Schalter eher plump.

    Kann mir jemand einen Weg aufzeigen!?

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

    @fuerst2626 sagte in Material Design Widgets: List Widget:

    Kann ich irgendwie die eigentliche Größe der "Schalter Grafik" anpassen?

    Weiß zwar nicht genau was du mit Schlater Grafik meinst, aber beim List Widget kannst du die Größe des Images so einstellen:
    5d42f292-b86f-41c8-bd58-126063cb59ef-grafik.png

    Poste am besten Zukünftig immer einen screenshot mit, wo markiert ist was du ändern willst, dann können wir das besser verstehen.

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

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

    F 1 Antwort Letzte Antwort
    0
    • ScroungerS Scrounger

      @fuerst2626 sagte in Material Design Widgets: List Widget:

      Kann ich irgendwie die eigentliche Größe der "Schalter Grafik" anpassen?

      Weiß zwar nicht genau was du mit Schlater Grafik meinst, aber beim List Widget kannst du die Größe des Images so einstellen:
      5d42f292-b86f-41c8-bd58-126063cb59ef-grafik.png

      Poste am besten Zukünftig immer einen screenshot mit, wo markiert ist was du ändern willst, dann können wir das besser verstehen.

      F Offline
      F Offline
      fuerst2626
      schrieb am zuletzt editiert von Scrounger
      #42

      @Scrounger said in Material Design Widgets: List Widget:

      @fuerst2626 sagte in Material Design Widgets: List Widget:

      Kann ich irgendwie die eigentliche Größe der "Schalter Grafik" anpassen?

      Weiß zwar nicht genau was du mit Schlater Grafik meinst, aber beim List Widget kannst du die Größe des Images so einstellen:
      5d42f292-b86f-41c8-bd58-126063cb59ef-grafik.png

      Poste am besten Zukünftig immer einen screenshot mit, wo markiert ist was du ändern willst, dann können wir das besser verstehen.

      (/assets/uploads/files/1588343171854-bildschirmfoto-2019-03-22-um-14.03.41.png)

      Bildschirmfoto 2020-05-01 um 16.12.39.png Bildschirmfoto 2020-05-01 um 16.12.18.png

      Hallo,
      bei den Screenshots hier sieht man eigentlich gut was ich meine!
      Einmal steht der Wert des "Listenelement Bildhöhe" auf 100 einmal ohne Eintrag.
      Listen Element und Symbol links passt sich an.
      Die Schriftgröße der Beschriftung lässt sich auch anpassen, jedoch nicht das Schalter Symbol rechts.
      Dieses bleibt egal bei welcher Änderung in standard Größe.

      Hoffe ich konnte mit den Bildern mein "Problem" näher beschreiben!

      ScroungerS 1 Antwort Letzte Antwort
      0
      • F fuerst2626

        @Scrounger said in Material Design Widgets: List Widget:

        @fuerst2626 sagte in Material Design Widgets: List Widget:

        Kann ich irgendwie die eigentliche Größe der "Schalter Grafik" anpassen?

        Weiß zwar nicht genau was du mit Schlater Grafik meinst, aber beim List Widget kannst du die Größe des Images so einstellen:
        5d42f292-b86f-41c8-bd58-126063cb59ef-grafik.png

        Poste am besten Zukünftig immer einen screenshot mit, wo markiert ist was du ändern willst, dann können wir das besser verstehen.

        (/assets/uploads/files/1588343171854-bildschirmfoto-2019-03-22-um-14.03.41.png)

        Bildschirmfoto 2020-05-01 um 16.12.39.png Bildschirmfoto 2020-05-01 um 16.12.18.png

        Hallo,
        bei den Screenshots hier sieht man eigentlich gut was ich meine!
        Einmal steht der Wert des "Listenelement Bildhöhe" auf 100 einmal ohne Eintrag.
        Listen Element und Symbol links passt sich an.
        Die Schriftgröße der Beschriftung lässt sich auch anpassen, jedoch nicht das Schalter Symbol rechts.
        Dieses bleibt egal bei welcher Änderung in standard Größe.

        Hoffe ich konnte mit den Bildern mein "Problem" näher beschreiben!

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

        @fuerst2626 sagte in Material Design Widgets: List Widget:

        Dieses bleibt egal bei welcher Änderung in standard Größe.

        Hoffe ich konnte mit den Bildern mein "Problem" näher beschreiben!

        Jetzt kann ich dir folgen ;-)
        Nee das geht leider nicht, switch hat ne feste größe, ist so von der API vorgegeben.
        Mit css klasse überschreiben geht das bestimmt, habe ich aber selber noch nicht ausprobiert.

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

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

        F 1 Antwort Letzte Antwort
        0
        • ScroungerS Scrounger

          @fuerst2626 sagte in Material Design Widgets: List Widget:

          Dieses bleibt egal bei welcher Änderung in standard Größe.

          Hoffe ich konnte mit den Bildern mein "Problem" näher beschreiben!

          Jetzt kann ich dir folgen ;-)
          Nee das geht leider nicht, switch hat ne feste größe, ist so von der API vorgegeben.
          Mit css klasse überschreiben geht das bestimmt, habe ich aber selber noch nicht ausprobiert.

          F Offline
          F Offline
          fuerst2626
          schrieb am zuletzt editiert von
          #44

          @Scrounger

          Mit css bin ich nicht richtig fit, leider.
          Das wären Parameter wie width und height, richtig!?
          Ne Ahnung wo die Skripte liegen!?
          Oder geht das per JSON Injection (wenn ich das richtig verstehe) wie bei den anderen ListParametern?

          Gruss

          1 Antwort Letzte Antwort
          0
          • ScroungerS Scrounger

            @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

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

            @Scrounger Vielen dank, so klappt es.
            Ein Frage noch, ich möchte die Anwesenheit meiner Familie über TR-064 darstellen. Die States sind entweden true oder false.
            Ganz einfach so:
            Unbenannt.JPG
            Wenn "Da" grün, sonst Grau. Klappt irgendwie nicht.
            Michael

            Edit: Verschoben da Frage List Widget betrifft, bitte darauf achten die Fragen im Thema des entsprechenden Widgets zu stellen. Im Editor gibt es einen Link unte CSS Allgemein Fragen und Antowrten wo man direkt zum passenden Thema kommt!

            ScroungerS 1 Antwort Letzte Antwort
            0
            • M michihorn

              @Scrounger Vielen dank, so klappt es.
              Ein Frage noch, ich möchte die Anwesenheit meiner Familie über TR-064 darstellen. Die States sind entweden true oder false.
              Ganz einfach so:
              Unbenannt.JPG
              Wenn "Da" grün, sonst Grau. Klappt irgendwie nicht.
              Michael

              Edit: Verschoben da Frage List Widget betrifft, bitte darauf achten die Fragen im Thema des entsprechenden Widgets zu stellen. Im Editor gibt es einen Link unte CSS Allgemein Fragen und Antowrten wo man direkt zum passenden Thema kommt!

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

              @michihorn sagte in Material Design Widgets: IconList Widget:

              Ein Frage noch, ich möchte die Anwesenheit meiner Familie über TR-064 darstellen. Die States sind entweden true oder false.
              Wenn "Da" grün, sonst Grau. Klappt irgendwie nicht.

              Das ist doch das List Widget und nicht das IconList Widget?
              Bei beiden über option Hintergrund Farbe aktiv

              <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

                @michihorn sagte in Material Design Widgets: IconList Widget:

                Ein Frage noch, ich möchte die Anwesenheit meiner Familie über TR-064 darstellen. Die States sind entweden true oder false.
                Wenn "Da" grün, sonst Grau. Klappt irgendwie nicht.

                Das ist doch das List Widget und nicht das IconList Widget?
                Bei beiden über option Hintergrund Farbe aktiv

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

                @Scrounger Sorry bekomme ich nicht hin. Anbei die Kurzfassung des Widgets

                [{"tpl":"tplVis-materialdesign-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","listType":"buttonState","listItemDividerStyle":"standard","listLayout":"standard","vibrateOnMobilDevices":"50","listItemDataMethod":"inputPerEditor","countListItems":"1","listItemAlignment":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"listItemBackgroundActive":"#54ef52","oid0":"tr-064.0.devices.HUAWEI-Mate-20-lite-62384","label0":"ich","oid1":"tr-064.0.devices.HUAWEI-P20-lite-8150fc0af","label1":"sie","groupHeader0":"","groupHeader1":"","listItemBackground":"","dividers0":true,"dividers1":true},"style":{"left":"481px","top":"470px","width":"172px","height":"82px"},"widgetSet":"materialdesign"}]
                

                Gruß Michael

                Edit: Verschoben da Frage List Widget betrifft, bitte darauf achten die Fragen im Thema des entsprechenden Widgets zu stellen. Im Editor gibt es einen Link unte CSS Allgemein Fragen und Antowrten wo man direkt zum passenden Thema kommt!

                ScroungerS 1 Antwort Letzte Antwort
                0
                • M michihorn

                  @Scrounger Sorry bekomme ich nicht hin. Anbei die Kurzfassung des Widgets

                  [{"tpl":"tplVis-materialdesign-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","listType":"buttonState","listItemDividerStyle":"standard","listLayout":"standard","vibrateOnMobilDevices":"50","listItemDataMethod":"inputPerEditor","countListItems":"1","listItemAlignment":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"listItemBackgroundActive":"#54ef52","oid0":"tr-064.0.devices.HUAWEI-Mate-20-lite-62384","label0":"ich","oid1":"tr-064.0.devices.HUAWEI-P20-lite-8150fc0af","label1":"sie","groupHeader0":"","groupHeader1":"","listItemBackground":"","dividers0":true,"dividers1":true},"style":{"left":"481px","top":"470px","width":"172px","height":"82px"},"widgetSet":"materialdesign"}]
                  

                  Gruß Michael

                  Edit: Verschoben da Frage List Widget betrifft, bitte darauf achten die Fragen im Thema des entsprechenden Widgets zu stellen. Im Editor gibt es einen Link unte CSS Allgemein Fragen und Antowrten wo man direkt zum passenden Thema kommt!

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

                  @michihorn sagte in Material Design Widgets: List Widget:

                  @Scrounger Sorry bekomme ich nicht hin. Anbei die Kurzfassung des Widgets

                  Geht nur mit Button Toggle

                  <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
                  • S Offline
                    S Offline
                    sk8er-boi
                    schrieb am zuletzt editiert von
                    #49

                    Hallo Scrounger,
                    erstmal Hut ab, richtig gut was du da mit deinem Material Design Widget geschaffen hast.

                    Wäre es möglich, oder gehts vielleicht schon, das man in dem List Widget, das man nicht pro Liste sondern pro Listenelement den Typ auswählt ?
                    Dann könnte man eine gemischte Liste erstellen.

                    Und wäre es möglich in der Liste auch Numbers oder Strings (Temperaturen) anzeigen zu lassen ?
                    Und kann man ein Sliderelement in die Liste einbauen ?

                    Wenn nicht, wie würdest du es machen, dass optisch Statebuttons, Text und Sliders wie eine Liste aussehen.

                    Gruß Daniel

                    S ScroungerS 2 Antworten Letzte Antwort
                    0
                    • S sk8er-boi

                      Hallo Scrounger,
                      erstmal Hut ab, richtig gut was du da mit deinem Material Design Widget geschaffen hast.

                      Wäre es möglich, oder gehts vielleicht schon, das man in dem List Widget, das man nicht pro Liste sondern pro Listenelement den Typ auswählt ?
                      Dann könnte man eine gemischte Liste erstellen.

                      Und wäre es möglich in der Liste auch Numbers oder Strings (Temperaturen) anzeigen zu lassen ?
                      Und kann man ein Sliderelement in die Liste einbauen ?

                      Wenn nicht, wie würdest du es machen, dass optisch Statebuttons, Text und Sliders wie eine Liste aussehen.

                      Gruß Daniel

                      S Offline
                      S Offline
                      sk8er-boi
                      schrieb am zuletzt editiert von
                      #50

                      @sk8er-boi sagte in Material Design Widgets: List Widget:

                      Hallo Scrounger,
                      erstmal Hut ab, richtig gut was du da mit deinem Material Design Widget geschaffen hast.

                      Wäre es möglich, oder gehts vielleicht schon, das man in dem List Widget, das man nicht pro Liste sondern pro Listenelement den Typ auswählt ?
                      Dann könnte man eine gemischte Liste erstellen.

                      Und wäre es möglich in der Liste auch Numbers oder Strings (Temperaturen) anzeigen zu lassen ?
                      Und kann man ein Sliderelement in die Liste einbauen ?

                      Wenn nicht, wie würdest du es machen, dass optisch Statebuttons, Text und Sliders wie eine Liste aussehen.

                      Gruß Daniel

                      @Scrounger hast du hier eine Idee für mich ?

                      gruß Daniel

                      1 Antwort Letzte Antwort
                      0
                      • S sk8er-boi

                        Hallo Scrounger,
                        erstmal Hut ab, richtig gut was du da mit deinem Material Design Widget geschaffen hast.

                        Wäre es möglich, oder gehts vielleicht schon, das man in dem List Widget, das man nicht pro Liste sondern pro Listenelement den Typ auswählt ?
                        Dann könnte man eine gemischte Liste erstellen.

                        Und wäre es möglich in der Liste auch Numbers oder Strings (Temperaturen) anzeigen zu lassen ?
                        Und kann man ein Sliderelement in die Liste einbauen ?

                        Wenn nicht, wie würdest du es machen, dass optisch Statebuttons, Text und Sliders wie eine Liste aussehen.

                        Gruß Daniel

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

                        @sk8er-boi sagte in Material Design Widgets: List Widget:

                        Wäre es möglich, oder gehts vielleicht schon, das man in dem List Widget, das man nicht pro Liste sondern pro Listenelement den Typ auswählt ?
                        Dann könnte man eine gemischte Liste erstellen.

                        Steht schon auf der Todo Liste -> https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/56

                        Und wäre es möglich in der Liste auch Numbers oder Strings (Temperaturen) anzeigen zu lassen ?

                        Geht wenn man bindings verwendet

                        Und kann man ein Sliderelement in die Liste einbauen ?

                        Das wird es nicht geben, einfach slider drüber legen, bsp:
                        https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/48

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

                          Hallöchen
                          ich möchte in einem Widget die Daten meiner Raspberrymatic darstellen, leider hänge ich da etwas.
                          Unbenannt.JPG
                          Im linken Widget klappt es, aber nicht in "schön" im rechten klappt es gar nicht. Wie sollte ich vorgehen?
                          Linkes Widget:

                          [{"tpl":"tplVis-materialdesign-Icon-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","wrapItems":"true","listItemDataMethod":"inputPerEditor","countListItems":"1","vibrateOnMobilDevices":"50","listLayout":"card","itemLayout":"horizontal","buttonLayout":"full","autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockFilterGrayscale":"30","lockApplyOnlyOnImage":"true","listType0":"buttonState","showValueLabel0":"true","listType1":"text","showValueLabel1":"true","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"maxItemsperRow":"1","oid0":"hm-rega.0.39564","label0":"UpTime","valueAppendix0":"  UpTime","horizontalIconContainerWidth":"-1"},"style":{"left":"20px","top":"68px","width":"154px","height":"270px"},"widgetSet":"materialdesign"}]
                          

                          Rechtes Widget:

                          [{"tpl":"tplVis-materialdesign-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","listType":"buttonState","listItemDividerStyle":"padded","listLayout":"card","vibrateOnMobilDevices":"45","listItemDataMethod":"inputPerEditor","countListItems":"4","listItemAlignment":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"oid0":"hm-rega.0.39564","groupHeader0":"","label0":"Uptime","oid1":"hm-rega.0.31888","label1":"Duty Cycle","listImageHeight":"-3","listImage0":"/hm-rega.admin/homematic.png","listImageColor0":"","groupHeader1":"","groupHeader2":"","groupHeader3":"","dividers1":true,"oid3":"hm-rega.0.37205","rightTextWidth":"14","oid2":"javascript.0.ccu.cpuFrequency","label2":"CPU Frequenz","listImageActive0":"/hm-rega.admin/homematic.png","dividers0":true,"distanceBetweenTextAndImage":"10","colorCheckBox":"#df2a2a","listImageActive2":"/hm-rega.admin/homematic.png","dividers2":true,"label3":"CPU Temperatur","subLabel2":""},"style":{"left":"218px","top":"73px","width":"363px","height":"164px"},"widgetSet":"materialdesign"}]
                          

                          Für Unterstützung bin ich Dankbar
                          Michael

                          ScroungerS 1 Antwort Letzte Antwort
                          0
                          • O Offline
                            O Offline
                            oxident
                            schrieb am zuletzt editiert von
                            #53

                            Hi!
                            Ist es eigentlich möglich, dass das List Widget im "Button State"-Modus den aktuellen Wert (auch ohne Auswahl) anzeigt?
                            Ich wollte das Widget nutzen, um meine Klimaanlage zu steuern. Dies geschieht über einen DP der verschiedene Werte annehmen kann (z. B. AUTO oder COOL). Das kann ich mittels des Widgets auch wunderbar schalten und der gewählte Schaltzustand bleibt dann auch farblich hinterlegt.

                            Wenn ich das Widget aber erstmal anzeige, dann sieht es aus, als wäre kein Wert ausgewählt.

                            Ich habe bei allen Listenelementen die gleiche OID, nur mit jeweils unterschiedlichen Button State Werten eingetragen. Ist das ein Denkfehler?
                            Beim Select-Widget klappt das auch wunderbar ... ich möchte aber halt eine "aufgeklappte" Liste haben ;-)

                            [{"tpl":"tplVis-materialdesign-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","vibrateOnMobilDevices":"50","listType":"buttonState","listItemDividerStyle":"standard","listLayout":"card","listItemDataMethod":"inputPerEditor","countListItems":"4","listItemAlignment":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"oid0":"melcloud.0.devices.255156.control.mode","label0":"Automatik","listTypeButtonStateValue0":"8","oid1":"melcloud.0.devices.255156.control.mode","groupHeader1":"","label1":"Heizung","listTypeButtonStateValue1":"1","listItemBackgroundActive":"","listImage0":"","listImageColor0":"","listImageActiveColor0":"","oid2":"melcloud.0.devices.255156.control.mode","label2":"Kühlen","listTypeButtonStateValue2":"3","oid3":"melcloud.0.devices.255156.control.mode","label3":"Trocknen","listTypeButtonStateValue3":"2","oid4":"melcloud.0.devices.255156.control.mode","label4":"Lüftung","listTypeButtonStateValue4":"7"},"style":{"left":"489px","top":"152px"},"widgetSet":"materialdesign"}]
                            
                            1 Antwort Letzte Antwort
                            0
                            • M michihorn

                              Hallöchen
                              ich möchte in einem Widget die Daten meiner Raspberrymatic darstellen, leider hänge ich da etwas.
                              Unbenannt.JPG
                              Im linken Widget klappt es, aber nicht in "schön" im rechten klappt es gar nicht. Wie sollte ich vorgehen?
                              Linkes Widget:

                              [{"tpl":"tplVis-materialdesign-Icon-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","wrapItems":"true","listItemDataMethod":"inputPerEditor","countListItems":"1","vibrateOnMobilDevices":"50","listLayout":"card","itemLayout":"horizontal","buttonLayout":"full","autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockFilterGrayscale":"30","lockApplyOnlyOnImage":"true","listType0":"buttonState","showValueLabel0":"true","listType1":"text","showValueLabel1":"true","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"maxItemsperRow":"1","oid0":"hm-rega.0.39564","label0":"UpTime","valueAppendix0":"  UpTime","horizontalIconContainerWidth":"-1"},"style":{"left":"20px","top":"68px","width":"154px","height":"270px"},"widgetSet":"materialdesign"}]
                              

                              Rechtes Widget:

                              [{"tpl":"tplVis-materialdesign-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","listType":"buttonState","listItemDividerStyle":"padded","listLayout":"card","vibrateOnMobilDevices":"45","listItemDataMethod":"inputPerEditor","countListItems":"4","listItemAlignment":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"oid0":"hm-rega.0.39564","groupHeader0":"","label0":"Uptime","oid1":"hm-rega.0.31888","label1":"Duty Cycle","listImageHeight":"-3","listImage0":"/hm-rega.admin/homematic.png","listImageColor0":"","groupHeader1":"","groupHeader2":"","groupHeader3":"","dividers1":true,"oid3":"hm-rega.0.37205","rightTextWidth":"14","oid2":"javascript.0.ccu.cpuFrequency","label2":"CPU Frequenz","listImageActive0":"/hm-rega.admin/homematic.png","dividers0":true,"distanceBetweenTextAndImage":"10","colorCheckBox":"#df2a2a","listImageActive2":"/hm-rega.admin/homematic.png","dividers2":true,"label3":"CPU Temperatur","subLabel2":""},"style":{"left":"218px","top":"73px","width":"363px","height":"164px"},"widgetSet":"materialdesign"}]
                              

                              Für Unterstützung bin ich Dankbar
                              Michael

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

                              @michihorn sagte in Material Design Widgets: List Widget:

                              Hallöchen
                              ich möchte in einem Widget die Daten meiner Raspberrymatic darstellen, leider hänge ich da etwas.
                              Im linken Widget klappt es, aber nicht in "schön" im rechten klappt es gar nicht. Wie sollte ich vorgehen?
                              Linkes Widget:

                              Das ist das IconList Widget. Schau bitte zuerst mal in der Doku und hier
                              https://forum.iobroker.net/topic/30331/material-design-widgets-iconlist-widget

                              Rechtes Widget:

                              Hier musst du mit Bindings arbeiten, da das List Widget nicht automatisch den Wert anzeigt. Hab dein Beispiel mal erweitert:

                              [{"tpl":"tplVis-materialdesign-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","listType":"buttonState","listItemDividerStyle":"padded","listLayout":"card","vibrateOnMobilDevices":"45","listItemDataMethod":"inputPerEditor","countListItems":"4","listItemAlignment":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"oid0":"hm-rega.0.39564","groupHeader0":"","label0":"Uptime","oid1":"hm-rega.0.31888","label1":"Duty Cycle","listImageHeight":"","listImage0":"/hm-rega.admin/homematic.png","listImageColor0":"","groupHeader1":"","groupHeader2":"","groupHeader3":"","dividers1":true,"oid3":"hm-rega.0.37205","rightTextWidth":"150","oid2":"javascript.0.ccu.cpuFrequency","label2":"CPU Frequenz","listImageActive0":"/hm-rega.admin/homematic.png","dividers0":true,"distanceBetweenTextAndImage":"10","colorCheckBox":"#df2a2a","listImageActive2":"/hm-rega.admin/homematic.png","dividers2":true,"label3":"CPU Temperatur","subLabel2":"","subLabel0":"","rightSubLabel0":"","rightLabel0":"{hm-rega.0.39564}"},"style":{"left":"168px","top":"146px","width":"634px","height":"164px"},"widgetSet":"materialdesign"}]
                              

                              @oxident sagte in Material Design Widgets: List Widget:

                              Wenn ich das Widget aber erstmal anzeige, dann sieht es aus, als wäre kein Wert ausgewählt.

                              D.h. wenn du runtime neulädst? Wenn das der Fall ist sollte der Fehler in der nächsten Version behoben sein.

                              <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
                              • K Offline
                                K Offline
                                killroy2
                                schrieb am zuletzt editiert von
                                #55

                                Hallo

                                zum Problem:
                                ich habe eine Auswahl an 5 Einstellung, davon ist immer nur eine aktiv.
                                z.B. Lüftungsstufe Auto, Manuell Stufe 1-4
                                Unter Android hätte ich listView mit singleChoice oder eine RadioButton Group.

                                Was würde ich hier nehmen?

                                H 1 Antwort Letzte Antwort
                                0
                                • K killroy2

                                  Hallo

                                  zum Problem:
                                  ich habe eine Auswahl an 5 Einstellung, davon ist immer nur eine aktiv.
                                  z.B. Lüftungsstufe Auto, Manuell Stufe 1-4
                                  Unter Android hätte ich listView mit singleChoice oder eine RadioButton Group.

                                  Was würde ich hier nehmen?

                                  H Offline
                                  H Offline
                                  HansWurst
                                  schrieb am zuletzt editiert von
                                  #56

                                  Ich habe einen Datenpunkt angelegt, dessen Daten ich später per Skript ändern möchte. Testweise habe ich einfach den JSON string der Doku eingefügt.
                                  222.jpg

                                  Ich bekomme es aber einfach nicht hin, diesen Datenpunkt dem widget in vis zu übergeben. Geht das überhaupt? Im Feld für den JSON-String selbst kann ich das (verständlicher weise) nicht tun, aber komme ich irgendwie and die Struktur zu diesem Feld ran?
                                  111.jpg

                                  GlasfaserG 1 Antwort Letzte Antwort
                                  0
                                  • H HansWurst

                                    Ich habe einen Datenpunkt angelegt, dessen Daten ich später per Skript ändern möchte. Testweise habe ich einfach den JSON string der Doku eingefügt.
                                    222.jpg

                                    Ich bekomme es aber einfach nicht hin, diesen Datenpunkt dem widget in vis zu übergeben. Geht das überhaupt? Im Feld für den JSON-String selbst kann ich das (verständlicher weise) nicht tun, aber komme ich irgendwie and die Struktur zu diesem Feld ran?
                                    111.jpg

                                    GlasfaserG Offline
                                    GlasfaserG Offline
                                    Glasfaser
                                    schrieb am zuletzt editiert von
                                    #57

                                    @HansWurst
                                    Mit Binding ...

                                    {0_userdata.0.vis.MaterialDesignWidgets.Wetter.Aktuell.Bewolkung}
                                    

                                    11.JPG

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

                                    H 1 Antwort Letzte Antwort
                                    0
                                    • GlasfaserG Glasfaser

                                      @HansWurst
                                      Mit Binding ...

                                      {0_userdata.0.vis.MaterialDesignWidgets.Wetter.Aktuell.Bewolkung}
                                      

                                      11.JPG

                                      H Offline
                                      H Offline
                                      HansWurst
                                      schrieb am zuletzt editiert von HansWurst
                                      #58

                                      @Glasfaser Wow, gar so einfach hätte ich mir das jetzt auch nicht vorgestellt. Ich hatte nun schon gedacht, durch debuggen der Webseite auf die Lösung kommen zu müssen :)
                                      Danke für den Hinweis.

                                      Kannst du eine Seite empfehlen, auf der man sich zum Thema Binding einlesen kann? (die Web-basierten Programmiersprachen sind noch Neuland für mich) Wenn man danach googled, schaut es aus, als wäre Binding eher etwas spezifisches vom jeweiligen Projekt.

                                      1 Antwort Letzte Antwort
                                      0
                                      • S Offline
                                        S Offline
                                        sk8er-boi
                                        schrieb am zuletzt editiert von
                                        #59

                                        @Scrounger sagte in Material Design Widgets: List Widget:

                                        @sk8er-boi sagte in Material Design Widgets: List Widget:

                                        Wäre es möglich, oder gehts vielleicht schon, das man in dem List Widget, das man nicht pro Liste sondern pro Listenelement den Typ auswählt ?
                                        Dann könnte man eine gemischte Liste erstellen.

                                        Steht schon auf der Todo Liste -> https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/56

                                        Und wäre es möglich in der Liste auch Numbers oder Strings (Temperaturen) anzeigen zu lassen ?

                                        Geht wenn man bindings verwendet

                                        Und kann man ein Sliderelement in die Liste einbauen ?

                                        Das wird es nicht geben, einfach slider drüber legen, bsp:
                                        https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/48

                                        Wie funktioniert das mit den bindings

                                        ScroungerS 1 Antwort Letzte Antwort
                                        0
                                        • S sk8er-boi

                                          @Scrounger sagte in Material Design Widgets: List Widget:

                                          @sk8er-boi sagte in Material Design Widgets: List Widget:

                                          Wäre es möglich, oder gehts vielleicht schon, das man in dem List Widget, das man nicht pro Liste sondern pro Listenelement den Typ auswählt ?
                                          Dann könnte man eine gemischte Liste erstellen.

                                          Steht schon auf der Todo Liste -> https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/56

                                          Und wäre es möglich in der Liste auch Numbers oder Strings (Temperaturen) anzeigen zu lassen ?

                                          Geht wenn man bindings verwendet

                                          Und kann man ein Sliderelement in die Liste einbauen ?

                                          Das wird es nicht geben, einfach slider drüber legen, bsp:
                                          https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/48

                                          Wie funktioniert das mit den bindings

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

                                          @sk8er-boi
                                          Äh OK und was ist jetzt deine Frage? ;-)

                                          <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
                                          1
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          457

                                          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