Navigation

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

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Material Design Widgets: List Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      schmid_no1 last edited by

      @Scrounger
      Kann man das listen wideget scrollbar machen?

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

        @schmid_no1
        Du kannst jedes Widget scrollbar machen über overflow einstellungen:

        3113eee6-035a-4ca8-b1e8-17c79abc3b9a-grafik.png

        S 1 Reply Last reply Reply Quote 0
        • S
          schmid_no1 @Scrounger last edited by

          @Scrounger Danke

          1 Reply Last reply Reply Quote 0
          • C
            Conquest last edited by

            @Scrounger

            Hallo gibt es eine Möglichkeit die Farbe der Checkbox im List-Widget zu ändern? Und wo kann ich eine andere Schriftart auswählen?

            Vielen Dank schon mal für deine Hilfe und dem tollen Adapter.
            screenshot-192.168.178.46_8082-2020.04.22-20_31_01.png

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

              @Conquest

              rahmenfarbe:
              .mdc-checkbox__background {
              border-color: red !important;
              }

              select farbe:
              f884451c-e2c9-4b37-b38c-0b0eaaef45fe-grafik.png

              Schriftart:
              font tag verwenden:
              https://www.w3schools.com/css/css_font.asp

              C 1 Reply Last reply Reply Quote 1
              • C
                Conquest @Scrounger last edited by

                @Scrounger
                Funktioniert danke👍

                1 Reply Last reply Reply Quote 0
                • O
                  Oli last edited by

                  Hallo zusammen,

                  könnte mir vielleicht jemand ein Beispiel Script einstellen, wie ich es schaffe mir zB alle Lichter im Haus anzeigen zu lassen?

                  Uwe Clement 1 Reply Last reply Reply Quote 0
                  • Uwe Clement
                    Uwe Clement @Oli last edited by

                    @Oli
                    https://forum.iobroker.net/topic/32034/vis-materialdesign-iconlist-generische-steuerung-shellys/2

                    1 Reply Last reply Reply Quote 0
                    • F
                      fuerst2626 last edited by Scrounger

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

                      Scrounger 1 Reply Last reply Reply Quote 0
                      • Scrounger
                        Scrounger Developer @fuerst2626 last edited by 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 1 Reply Last reply Reply Quote 0
                        • F
                          fuerst2626 @Scrounger last edited by Scrounger

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

                          Scrounger 1 Reply Last reply Reply Quote 0
                          • Scrounger
                            Scrounger Developer @fuerst2626 last edited by 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 1 Reply Last reply Reply Quote 0
                            • F
                              fuerst2626 @Scrounger last edited by

                              @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 Reply Last reply Reply Quote 0
                              • M
                                michihorn @Scrounger last edited by Scrounger

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

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

                                  @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 1 Reply Last reply Reply Quote 0
                                  • M
                                    michihorn @Scrounger last edited by Scrounger

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

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

                                      @michihorn sagte in Material Design Widgets: List Widget:

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

                                      Geht nur mit Button Toggle

                                      1 Reply Last reply Reply Quote 0
                                      • S
                                        sk8er-boi last edited by

                                        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 Scrounger 2 Replies Last reply Reply Quote 0
                                        • S
                                          sk8er-boi @sk8er-boi last edited by

                                          @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 Reply Last reply Reply Quote 0
                                          • Scrounger
                                            Scrounger Developer @sk8er-boi last edited by

                                            @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

                                            Scrounger created this issue in Scrounger/ioBroker.vis-materialdesign

                                            closed [List] Optimierungen #56

                                            OMCastle created this issue in Scrounger/ioBroker.vis-materialdesign

                                            closed Dimmerfunktion in List anbieten #48

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            983
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

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