Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: Buttons Widget

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    16
    1
    1.9k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    900

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Material Design Widgets: Buttons Widget

Scheduled Pinned Locked Moved Visualisierung
vis
157 Posts 38 Posters 28.8k Views 40 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S skokarl

    @Scrounger sagte in Material Design Widgets: Buttons Widget:

    @skokarl
    Musst Image Größe und / oder Button Größe verändern.

    das würde ja heißen oben/unten funktioniert nur bei größeren Buttons ?

    I Offline
    I Offline
    intruder7
    wrote on last edited by
    #15

    @skokarl
    c68482a4-9a76-4aff-8a70-2ac197ffcaf0-image.png

    Probiere doch das Widget oben aus.

    S 1 Reply Last reply
    0
    • I intruder7

      @skokarl
      c68482a4-9a76-4aff-8a70-2ac197ffcaf0-image.png

      Probiere doch das Widget oben aus.

      S Offline
      S Offline
      skokarl
      wrote on last edited by
      #16

      @intruder7
      ja, Danke, mach ich.

      IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup

      1 Reply Last reply
      0
      • S skokarl

        @Scrounger sagte in Material Design Widgets: Buttons Widget:

        @skokarl
        Musst Image Größe und / oder Button Größe verändern.

        das würde ja heißen oben/unten funktioniert nur bei größeren Buttons ?

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        wrote on last edited by
        #17

        @skokarl
        Natürlich, aber der Button bietet je nach Größe nur einen bestimmten Platz. Wenn der schon durch das Bild belegt ist, ist halt kein Text zu sehen. Spiel doch einfach Mal mit der Bild Größe herum.

        1 Reply Last reply
        0
        • B Offline
          B Offline
          Besserso
          wrote on last edited by
          #18

          Um mir nur Werte anzeigen zu lassen, Baue ich gerade die Buttons nach, damit das Design gleich bleibt hätte ich gerne gewusst, welche genaue Farbe deine Standard Buttons haben. Tolle Arbeit und Gruß, Frank

          ScroungerS 1 Reply Last reply
          0
          • B Besserso

            Um mir nur Werte anzeigen zu lassen, Baue ich gerade die Buttons nach, damit das Design gleich bleibt hätte ich gerne gewusst, welche genaue Farbe deine Standard Buttons haben. Tolle Arbeit und Gruß, Frank

            ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            wrote on last edited by
            #19

            @Besserso sagte in Material Design Widgets: Buttons Widget:

            welche genaue Farbe deine Standard Buttons haben

            #44739e

            1 Reply Last reply
            0
            • ScroungerS Scrounger

              Button Widget | Button Vertical Widget | Icon Button Widget

              buttons.gif
              icon-button.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!

              T Offline
              T Offline
              thomas.heyn
              wrote on last edited by
              #20

              @Scrounger Ich würde gerne den Button State nutzen um einfach Tür Auf/Zu zu visualisieren, den Button einfügen und den Datenpunkt verknüpfen hab ich geschafft aber wie geht es dann weiter? Ich hätte gerne dass der Name der Tür im Button oder neben dem Button steht und je nach Status entweder "ZU" mit Hintergrund Grün oder "AUF" mit Hintergrund Rot visualisiert wird. Ich hab leider keine Ahnung von HTML oder CSS und komme an dieser Stelle einfach nicht weiter. Sorry falls es trivial ist. Thomas

              S ScroungerS 2 Replies Last reply
              0
              • T thomas.heyn

                @Scrounger Ich würde gerne den Button State nutzen um einfach Tür Auf/Zu zu visualisieren, den Button einfügen und den Datenpunkt verknüpfen hab ich geschafft aber wie geht es dann weiter? Ich hätte gerne dass der Name der Tür im Button oder neben dem Button steht und je nach Status entweder "ZU" mit Hintergrund Grün oder "AUF" mit Hintergrund Rot visualisiert wird. Ich hab leider keine Ahnung von HTML oder CSS und komme an dieser Stelle einfach nicht weiter. Sorry falls es trivial ist. Thomas

                S Offline
                S Offline
                skokarl
                wrote on last edited by
                #21

                @thomas-heyn

                nimm zwei html Widgets, mit Farbe und Text wie Du es möchtest.
                Schalte diese über Sichtbarkeit in Abhängigkeit von dem Datenpunkt sichtbar oder eben nicht.

                1.PNG

                IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup

                1 Reply Last reply
                0
                • T thomas.heyn

                  @Scrounger Ich würde gerne den Button State nutzen um einfach Tür Auf/Zu zu visualisieren, den Button einfügen und den Datenpunkt verknüpfen hab ich geschafft aber wie geht es dann weiter? Ich hätte gerne dass der Name der Tür im Button oder neben dem Button steht und je nach Status entweder "ZU" mit Hintergrund Grün oder "AUF" mit Hintergrund Rot visualisiert wird. Ich hab leider keine Ahnung von HTML oder CSS und komme an dieser Stelle einfach nicht weiter. Sorry falls es trivial ist. Thomas

                  ScroungerS Offline
                  ScroungerS Offline
                  Scrounger
                  Developer
                  wrote on last edited by
                  #22

                  @thomas-heyn
                  Oder nimm den toggle button, aktiviere die Option nur lesend und für den an/aus text verwende bindings. Hat den Vorteil das du die ganzen funktionen des buttons nutzen kannst.

                  S 1 Reply Last reply
                  0
                  • ScroungerS Scrounger

                    @thomas-heyn
                    Oder nimm den toggle button, aktiviere die Option nur lesend und für den an/aus text verwende bindings. Hat den Vorteil das du die ganzen funktionen des buttons nutzen kannst.

                    S Offline
                    S Offline
                    skokarl
                    wrote on last edited by
                    #23

                    @Scrounger sagte in Material Design Widgets: Buttons Widget:

                    @thomas-heyn
                    Oder nimm den toggle button, aktiviere die Option nur lesend und für den an/aus text verwende bindings. Hat den Vorteil das du die ganzen funktionen des buttons nutzen kannst.

                    jipp, aber er schrieb dass er von html und css keine Ahnung hat .... :grimacing:

                    IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup

                    ScroungerS 1 Reply Last reply
                    0
                    • S skokarl

                      @Scrounger sagte in Material Design Widgets: Buttons Widget:

                      @thomas-heyn
                      Oder nimm den toggle button, aktiviere die Option nur lesend und für den an/aus text verwende bindings. Hat den Vorteil das du die ganzen funktionen des buttons nutzen kannst.

                      jipp, aber er schrieb dass er von html und css keine Ahnung hat .... :grimacing:

                      ScroungerS Offline
                      ScroungerS Offline
                      Scrounger
                      Developer
                      wrote on last edited by
                      #24

                      @skokarl
                      Was hat denn binding mit html / css zu tun?

                      @thomas-heyn

                      geht ganz einfach nur mit dem Widget und ohne binding:

                      button_readonly.gif

                      anbei Widget zum importieren:

                      [{"tpl":"tplVis-materialdesign-Button-Toggle-vertical","data":{"oid":"0_userdata.0.BadFenster","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","buttonStyle":"outlined","toggleType":"boolean","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"50","iconPosition":"top","autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockFilterGrayscale":"30","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,"image":"/vis.0/main/window_closed.png","imageTrue":"/vis.0/main/window_open.png","iconHeight":"80","buttontext":"Bad<br>geschlossen","labelTrue":"Bad<br>offen","readOnly":true},"style":{"left":"421px","top":"263px","width":"146px","height":"150px"},"widgetSet":"materialdesign"}]
                      
                      sigi234S 1 Reply Last reply
                      0
                      • ScroungerS Scrounger

                        @skokarl
                        Was hat denn binding mit html / css zu tun?

                        @thomas-heyn

                        geht ganz einfach nur mit dem Widget und ohne binding:

                        button_readonly.gif

                        anbei Widget zum importieren:

                        [{"tpl":"tplVis-materialdesign-Button-Toggle-vertical","data":{"oid":"0_userdata.0.BadFenster","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","buttonStyle":"outlined","toggleType":"boolean","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"50","iconPosition":"top","autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockFilterGrayscale":"30","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,"image":"/vis.0/main/window_closed.png","imageTrue":"/vis.0/main/window_open.png","iconHeight":"80","buttontext":"Bad<br>geschlossen","labelTrue":"Bad<br>offen","readOnly":true},"style":{"left":"421px","top":"263px","width":"146px","height":"150px"},"widgetSet":"materialdesign"}]
                        
                        sigi234S Online
                        sigi234S Online
                        sigi234
                        Forum Testing Most Active
                        wrote on last edited by
                        #25

                        @Scrounger sagte in Material Design Widgets: Buttons Widget:

                        geht ganz einfach nur mit dem Widget und ohne binding:

                        Von wo hast du die Bilder?

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

                        ScroungerS 2 Replies Last reply
                        0
                        • sigi234S sigi234

                          @Scrounger sagte in Material Design Widgets: Buttons Widget:

                          geht ganz einfach nur mit dem Widget und ohne binding:

                          Von wo hast du die Bilder?

                          ScroungerS Offline
                          ScroungerS Offline
                          Scrounger
                          Developer
                          wrote on last edited by
                          #26

                          @sigi234
                          Internet ;-) und hab die offene variante bissle modifiziert. Kann ich heute Abend zur Verfügung stellen

                          1 Reply Last reply
                          1
                          • sigi234S sigi234

                            @Scrounger sagte in Material Design Widgets: Buttons Widget:

                            geht ganz einfach nur mit dem Widget und ohne binding:

                            Von wo hast du die Bilder?

                            ScroungerS Offline
                            ScroungerS Offline
                            Scrounger
                            Developer
                            wrote on last edited by Scrounger
                            #27

                            @sigi234
                            window_closed.png
                            window_open_2.png
                            window_open.png

                            D 1 Reply Last reply
                            2
                            • BostilB Offline
                              BostilB Offline
                              Bostil
                              wrote on last edited by
                              #28

                              @Scrounger Vielleicht kannst du hier auch helfen: Ich möchte eine Aufgabenliste in meiner VIS hinterlegen, wo man erstmal über dein Materialdesign-Input eine Aufgabe in einen Datenpunkt schreiben kann. Das klappt erstmal problemlos.

                              Allerdings würde ich auch nach Wochentagen drei mögliche Stati definieren wollen:

                              1. Ausgangswert: blank / nicht selektiert bzw. eben ohne Symbol, da inaktiv
                              2. Status: Vorgemerkt (Icon: bell) als Todo für einen bestimmten Wochentag
                              3. Status: Erledigt (Icon: check-bold)

                              Aktuell kann man nur mit true / false entsprechend zwei Stati anwählen. Hast du eine Idee, ob / wie man dies mit deinem schönen Widget hinbekommen könnte ?

                              Anmerkung 2020-03-22 133800_1.png

                              Anmerkung 2020-03-22 133819_2.png

                              ScroungerS 1 Reply Last reply
                              0
                              • BostilB Bostil

                                @Scrounger Vielleicht kannst du hier auch helfen: Ich möchte eine Aufgabenliste in meiner VIS hinterlegen, wo man erstmal über dein Materialdesign-Input eine Aufgabe in einen Datenpunkt schreiben kann. Das klappt erstmal problemlos.

                                Allerdings würde ich auch nach Wochentagen drei mögliche Stati definieren wollen:

                                1. Ausgangswert: blank / nicht selektiert bzw. eben ohne Symbol, da inaktiv
                                2. Status: Vorgemerkt (Icon: bell) als Todo für einen bestimmten Wochentag
                                3. Status: Erledigt (Icon: check-bold)

                                Aktuell kann man nur mit true / false entsprechend zwei Stati anwählen. Hast du eine Idee, ob / wie man dies mit deinem schönen Widget hinbekommen könnte ?

                                Anmerkung 2020-03-22 133800_1.png

                                Anmerkung 2020-03-22 133819_2.png

                                ScroungerS Offline
                                ScroungerS Offline
                                Scrounger
                                Developer
                                wrote on last edited by Scrounger
                                #29

                                @Bostil

                                Erstell einen Datenpunkt in den du per Skript den Pfad zum Bild hinterlegst. Beim Button als Image den Datenpunkt als Binding eintragen -> z.B. {meinDP.Bild}

                                Alternativ könntest du das auch mit IconList Widget realisieren, da kann man per json-string quasi allles dynamisch gestalten.

                                1 Reply Last reply
                                0
                                • BostilB Offline
                                  BostilB Offline
                                  Bostil
                                  wrote on last edited by
                                  #30

                                  @Scrounger sagte in Material Design Widgets: Buttons Widget:

                                  IconList Widget

                                  IconListWidget war definitiv DIE Idee - vielen Dank dir!

                                  1 Reply Last reply
                                  0
                                  • ScroungerS Scrounger

                                    @sigi234
                                    window_closed.png
                                    window_open_2.png
                                    window_open.png

                                    D Offline
                                    D Offline
                                    dos1973
                                    wrote on last edited by
                                    #31

                                    @Scrounger

                                    Gibt es die ggfs. Auch als gekippte Fenster?

                                    1 Reply Last reply
                                    0
                                    • BostilB Offline
                                      BostilB Offline
                                      Bostil
                                      wrote on last edited by
                                      #32

                                      Hallo @Scrounger, du siehst deine Widgets werden bei mir für Allerlei "misbraucht" :-)

                                      Der Button-Switch im Datum soll dafür dienen, um eine Objekt-ID zu steuern, über die dann die Sichtbarkeit eines Kalender auf dem Homescreen gesteuert werden soll. Leider verändert sich der Button nach dem Betätigen etwas, wo ich dich gerne fragen würde, ob du eine Idee hast, wie der Button einfach so bleiben kann, wie er auch im "ungedrückten" Zustand erscheint - siehe Beispiele unterhalb:

                                      Vor Betätigen der Schaltfläche:

                                      603f42c9-6dce-4cc3-9d57-fe7df4bbab7c-image.png

                                      Nach Betätigen der Schaltfläche:

                                      a7318f6b-4723-47cb-8aac-6afdad5729a3-image.png

                                      Konfiguration Button:

                                      d4e1225f-12d1-40df-941e-7d42abe7a5d0-image.png

                                      ScroungerS 1 Reply Last reply
                                      1
                                      • BostilB Bostil

                                        Hallo @Scrounger, du siehst deine Widgets werden bei mir für Allerlei "misbraucht" :-)

                                        Der Button-Switch im Datum soll dafür dienen, um eine Objekt-ID zu steuern, über die dann die Sichtbarkeit eines Kalender auf dem Homescreen gesteuert werden soll. Leider verändert sich der Button nach dem Betätigen etwas, wo ich dich gerne fragen würde, ob du eine Idee hast, wie der Button einfach so bleiben kann, wie er auch im "ungedrückten" Zustand erscheint - siehe Beispiele unterhalb:

                                        Vor Betätigen der Schaltfläche:

                                        603f42c9-6dce-4cc3-9d57-fe7df4bbab7c-image.png

                                        Nach Betätigen der Schaltfläche:

                                        a7318f6b-4723-47cb-8aac-6afdad5729a3-image.png

                                        Konfiguration Button:

                                        d4e1225f-12d1-40df-941e-7d42abe7a5d0-image.png

                                        ScroungerS Offline
                                        ScroungerS Offline
                                        Scrounger
                                        Developer
                                        wrote on last edited by Scrounger
                                        #33

                                        @Bostil
                                        Bei Farbe alle drei gleiche eintragen

                                        1 Reply Last reply
                                        0
                                        • BostilB Offline
                                          BostilB Offline
                                          Bostil
                                          wrote on last edited by
                                          #34

                                          Oh man ... also manchmal ...

                                          Vielen Dank (mal wieder) @Scrounger !!!

                                          ScroungerS 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          737

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe