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

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

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.5k

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

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

Material Design Widgets: Buttons Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
157 Beiträge 38 Kommentatoren 26.7k Aufrufe 40 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.
  • ScroungerS Scrounger

    @schnutexxl

    Konnte es jetzt reproduzieren. Teste bitte die aktuelle Version von github. Wichtig Vis upload nach installation machen!

    S Offline
    S Offline
    Schnutexxl
    schrieb am zuletzt editiert von
    #144

    @scrounger

    Moin!

    Habe ich gemacht, sieht nun erstmal fein aus. Wenn es so bleibt, super und DANKE!
    :+1:

    1 Antwort Letzte Antwort
    0
    • ScroungerS Scrounger

      @schnutexxl sagte in Material Design Widgets: Buttons Widget:

      @scrounger
      Runtime neu starten hat nichts gebracht. Springt von rot sofort wieder in blau. Hier der

      Habs getestet, funktioniert wie es soll. Was steht in der Konsole zur Runtime (F12) wenn sich die Farbe ändert?

      @micklafisch sagte in Material Design Widgets: Buttons Widget:

      @scrounger
      ok verstehe. Ich ändere meine händischen Pfade wieder zurück auf ohne das "light".

      Daüfr kannst du den Button "use theme" verwenden, dann brauchst das nich händisch machen.

      Nur da scheinbar wegen dem Theme Editor das Binding nicht mehr funktioniert, wie kann ich dann elegant das bisherige Layout abbilden? Buttons sind weiß mit blauer Schrift und wenn aktiv dann blau mit weißer Schrift.

      Welcher Button - Button Toggle?
      Dann so z.B.:

      [{"tpl":"tplVis-materialdesign-Button-Toggle-vertical","data":{"oid":"0_userdata.0.bool","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":"text","toggleType":"boolean","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"50","buttontext":"Toggle","textFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text","textFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text","alignment":"center","mdwButtonPrimaryColor":"#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary","mdwButtonSecondaryColor":"#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary","image":"checkbox-marked","iconPosition":"top","iconHeight":"26","autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockIconColor":"#mdwTheme:vis-materialdesign.0.colors.button.lock_icon","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,"labelColorTrue":"white","labelColorFalse":"blue","colorBgTrue":"blue"},"style":{"left":"608px","top":"187px"},"widgetSet":"materialdesign"}]
      
      M Offline
      M Offline
      micklafisch
      schrieb am zuletzt editiert von micklafisch
      #145

      @scrounger
      Danke für den Toggle Button. Ich benötige es aber für einen State Button (Export des Widgets oben). Wenn ich die Farbe für "aktiv" ändere, dann passt die Textfarbe nicht mehr und es ist wie im Post vom 20.04. 10:40 Uhr beschrieben dann blau auf blau.

      1 Antwort Letzte Antwort
      0
      • M Online
        M Online
        michihorn
        schrieb am zuletzt editiert von
        #146

        Hallo, bei mir ist die zweite Zeile seit dem letzten Update heute zu weit nach rechts gerutscht. Kann man das fixen?
        Unbenannt.PNG
        Gruß
        Michael

        1 Antwort Letzte Antwort
        0
        • BostilB Offline
          BostilB Offline
          Bostil
          schrieb am zuletzt editiert von Bostil
          #147

          Hat sich erledigt - mein Learning: Wert war nicht korrekt, sondern Boolean. Musste mir den Datenpunkt mal genau ansehen! Danke trotzdem.

          Hallo zusammen, möchte eigentlich bloß mit dem Button WIdget (Toggle) den Status eines Gerätes in Form eines Standby-Symbols wiedergeben. Rotes Symbol = Gerät ausgeschaltet ("online" = false) und eben grün für den anderen Status. Leider scheitere ich an dieser simplen Aufgabenstellung :-( Das Symbol ändert sich einfach nicht.

          Habt ihr eine Idee ?

          baa15b19-3804-4f30-8a3e-51aa829faa27-image.png

          Widget-Einstellungen:

          0d3f1ffd-4da7-4fbe-b0fe-3f979743ebd2-image.png

          b7301fe9-aebd-45b2-bb29-0c96db71295b-image.png

          Datenpunkt:

          92e786a0-77ee-4037-9f96-d50d914ab1f4-image.png

          D 1 Antwort Letzte Antwort
          0
          • D3ltoroxpD Offline
            D3ltoroxpD Offline
            D3ltoroxp
            schrieb am zuletzt editiert von D3ltoroxp
            #148

            Frage,

            ich möchte mit dem Button zwischen on und off steuern. Im ioB sieht das so aus.

            2ed74828-051b-41f3-b5a5-c136a1e51eae-grafik.png

            Wie kann ich nun zwischen on und off wechseln ? Ich kann den Wert nicht rein schreiben, sondern muss dazwischen wechseln mit DropDown. Wie kann ich das über die VIS realisieren ? Oder ist hier Button das falsche Widget.

            Im Button hab ich on und off geschrieben und auch zwischen Wert oder Boolean gewechselt, es steht dort dann immer true und false.

            1 Antwort Letzte Antwort
            0
            • BostilB Bostil

              Hat sich erledigt - mein Learning: Wert war nicht korrekt, sondern Boolean. Musste mir den Datenpunkt mal genau ansehen! Danke trotzdem.

              Hallo zusammen, möchte eigentlich bloß mit dem Button WIdget (Toggle) den Status eines Gerätes in Form eines Standby-Symbols wiedergeben. Rotes Symbol = Gerät ausgeschaltet ("online" = false) und eben grün für den anderen Status. Leider scheitere ich an dieser simplen Aufgabenstellung :-( Das Symbol ändert sich einfach nicht.

              Habt ihr eine Idee ?

              baa15b19-3804-4f30-8a3e-51aa829faa27-image.png

              Widget-Einstellungen:

              0d3f1ffd-4da7-4fbe-b0fe-3f979743ebd2-image.png

              b7301fe9-aebd-45b2-bb29-0c96db71295b-image.png

              Datenpunkt:

              92e786a0-77ee-4037-9f96-d50d914ab1f4-image.png

              D Offline
              D Offline
              dos1973
              schrieb am zuletzt editiert von dos1973
              #149

              @bostil
              Du hast „nur lesend“ aktiviert.

              Und wenn es ein True/ false Dp ist, dann stelle den Wert auch auf Boolean

              Edit, ignorieren: habs überlesen

              1 Antwort Letzte Antwort
              0
              • H Offline
                H Offline
                HSK
                schrieb am zuletzt editiert von
                #150

                Vielen Dank für die sehr guten Visu- Elemente. Für die "Lustelektronik" klappt alles wunderbar. Leider bin ich bei meiner umfangreichen KNX- Visu noch immer am basteln. Dort habe ich praktisch immer zwei Datenpunkte: den eigentlichen Command- Befehl und dann die Rückmeldung über den Status-Datenpunkt. Wenn der Button mit Farbe und Icon auf den Status-Datenpunkt reagieren könnte würde die Bastelung mit sichbar/unsichtbar Überlagerungen entfallen. Gäbe es da eine Möglichkeit - oder habe ich eine übersehen? Danke!

                1 Antwort Letzte Antwort
                0
                • C Offline
                  C Offline
                  c.radi
                  schrieb am zuletzt editiert von
                  #151

                  Hallo, ich setzte meine Visu auch mit diesen Widgets um.
                  Gibt es bei dem "Button Navigation" die Möglichkeit darzustellen, wenn die aufgerufene Seite angezeigt wird.
                  Also kann man einen solchen Button als "dauerhaft gedrückt" anzeigen?

                  Oder kann ich mit einem anderen Button (Toggle Button) eine View aufrufen und das ganze dann über Hintergrundscripte und Datenpunkte lösen?

                  Gruß
                  Christian

                  1 Antwort Letzte Antwort
                  0
                  • L Offline
                    L Offline
                    lugge86
                    schrieb am zuletzt editiert von lugge86
                    #152

                    Hallo Scrounger,

                    ich spiele aktuell viel mit deinen Buttons herum (z.B ButtonToggle, ButtonState).
                    Du bietest die Möglichkeit, für aktive Buttons eine eigene Farbe und ein eigenes Icon zu definieren.

                    Das ist prinzipiell gut, reicht mir aber nicht ganz.
                    Ich würde gerne mit css etwas mehr am Button ändern.

                    Dazu muss ich das widget aber erstmal mit einem css-Selektor erwischen.
                    Mit der F12-Konsole habe ich aber spontan nichts gefunden, wie ich per Selektor ein aktives Widget identifizieren kann.
                    Am einfachsten ginge es natürlich per Klassse. Also, wenn das aktive Widget zusätzlich eine Klasse "mdw-active" oder so erhalten würde.
                    Diese Klasse könnte man dann per css selektieren.

                    Wäre es aufwendig, so ein Feature einzubauen?
                    Oder weißt du spontan eine andere Möglichkeit, wie ich per css an aktive Widgets herankomme?

                    Hintergrund:
                    Man hätte mehr Flexibilität beim gestalten des aktiven Widgets, z.B. könne man sowas machen wie lesiflo hier macht (die dicke weiße Linie überhalb des Buttons, leider benutzt er kein Vis):
                    https://forum.iobroker.net/assets/uploads/files/1568013398283-fenster.jpg

                    1 Antwort Letzte Antwort
                    0
                    • S Offline
                      S Offline
                      Supermicha
                      schrieb am zuletzt editiert von
                      #153

                      Hallo,
                      bei mir werden die Farben für Hintergrund und aktiver Hintergrund nicht aus dem Theme übernommen.

                      Verwendetes Widget "Button Toggle"

                      a967195d-e0ff-438a-b9e3-441bb9a42197-grafik.png

                      is das ein Bug oder kommt das noch?

                      es gibt ja schon den Punkt button.icon.background_off und button.icon.background_on

                      oder mache ich was falsch?

                      1 Antwort Letzte Antwort
                      0
                      • C Offline
                        C Offline
                        CyberMicha
                        schrieb am zuletzt editiert von
                        #154

                        Hallo zusammen,
                        letzter Beitrag ewig her aber ich habe eine Frage.

                        Die Buttons ändern bei mir am Handy mit der App die Farbe nicht wenn aktiv. Im Browser geht es ohne Probleme.

                        Bug oder mache ich etwas falsch? Habe den Adapter durch Zufall gefunden da ich bisher keinen anderen Button gefunden habe, der den Hintergrund ändert wenn aktiv.

                        1 Antwort Letzte Antwort
                        0
                        • S Offline
                          S Offline
                          srkonus
                          schrieb am zuletzt editiert von srkonus
                          #155

                          Hallo,

                          ich beschäftige mich erst seit gestern mit den Material Design Widgets. Vom Style her gefallen sie mir gut, viel Auswahl um schöne Sachen zu realisieren. Nun wollte ich einen Button mit einem anderen Icon versehen, scheitere allerdings daran. Es wird immer der Stift angezeigt, egal ob ich in dem Textfeld eins aussuche oder per Dateibrowser eins wähle. Kann mir jemand einen Tipp geben was ich falsch mache?
                          Ich verwende derzeit die vis2, vielleicht geht es dort ja noch nicht.

                          VG
                          srkonus

                          1 Antwort Letzte Antwort
                          0
                          • GlasfaserG Offline
                            GlasfaserG Offline
                            Glasfaser
                            schrieb am zuletzt editiert von
                            #156

                            @srkonus sagte in Material Design Widgets: Buttons Widget:

                            Ich verwende derzeit die vis2, vielleicht geht es dort ja noch nicht.

                            richtig ....

                            Kann mir jemand einen Tipp geben

                            https://github.com/ioBroker/ioBroker.vis-2/issues/68

                            hier auch mal reinschauen , es wurde dort mal beandelt :
                            https://forum.iobroker.net/topic/60398/test-adapter-vis-2-0-alpha

                            aktuelles zu Vis2 BETA , dann in diesem Thread
                            https://forum.iobroker.net/topic/67676/vis-2-0-neuer-adapter-als-beta

                            oder im Issues

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

                            1 Antwort Letzte Antwort
                            0
                            • a200A Offline
                              a200A Offline
                              a200
                              schrieb am zuletzt editiert von
                              #157

                              Probleme mit multi-views mit vis-2

                              Hallo ich will "Icon Button Navigation" von "materialdesign" und multi-views nutzen. Leider wird die Position der Buttons in den Unterview verworfen und die Buttons werden einfach bei 0,0 (oben links) angezeigt. Dieses Verhalten habe ich bei einigen alten Widges und vis-2.

                              Gibt es einen Möglichkeit die Buttons trotzdem zu verwenden?

                              IoBroker auf QNAP TS-451, Raspi und NUC

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


                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              818

                              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