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

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

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

Material Design Widgets: Buttons Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
157 Beiträge 38 Kommentatoren 26.8k 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.
  • M michihorn

    @Scrounger Evtl. Habe ich den Multi State auch falsch verstanden:
    Ich möchte mit einem Button einmal den Wert 50 und einmal 100 setzen. Ich möchte gerne mein Dachfenster auf Lüften oder schließen fahren.
    Unbenannt.JPG

    [{"tpl":"tplMfdCustom10","data":{"oid":"tahoma.0.devices.Dachfenster.states.core:ClosureState","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","asButton":false,"icon0":"/icons-mfd-png/fts_window_roof_open_2.png","icon1":"/icons-mfd-png/fts_window_roof_open_2.png","icon2":"/icons-mfd-png/fts_window_roof_open_2.png","icon3":"/icons-mfd-png/fts_window_roof_open_2.png","icon4":"/icons-mfd-png/fts_window_roof_open_2.png","icon5":"/icons-mfd-png/fts_window_roof_open_2.png","icon6":"/icons-mfd-png/fts_window_roof_open_1.png","icon7":"/icons-mfd-png/fts_window_roof_open_1.png","icon8":"/icons-mfd-png/fts_window_roof_open_1.png","icon9":"/icons-mfd-png/fts_window_roof_shutter_90.png","icon10":"/icons-mfd-png/fts_window_roof.png","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,"show_active":false,"iconColor0":"","iconColor10":"#e51010","min":"0","max":"100","iconValue0":"0","iconValue1":"10","iconColor1":"","iconColor2":"","iconValue2":"20","iconValue3":"30","iconColor3":"","iconValue4":"40","iconColor4":"","iconValue5":"50","iconColor5":"","iconValue6":"60","iconColor6":"","iconValue7":"70","iconColor7":"","iconValue8":"80","iconColor8":"","iconValue9":"90","iconColor9":"","iconValue10":"100","invert_value":false},"style":{"left":"559px","top":"625px","width":"89px","height":"113px","z-index":"50"},"widgetSet":"jqui-mfd"},{"tpl":"tplVis-materialdesign-Button-State-Multi-vertical","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","countOids":"1","buttonStyle":"raised","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,"oid0":"tahoma.0.devices.Dachfenster.states.core:ClosureState","value0":"100","buttontext":"Dachfenster","oid1":"tahoma.0.devices.Dachfenster.states.core:ClosureState","value1":"50"},"style":{"left":"478px","top":"642px","width":"93px","height":"49px"},"widgetSet":"materialdesign"}]
    

    Michael

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

    @michihorn
    Dafür nimmst den Button toggle im Modus Wert. Da kannst dann auch zwei Bilder zuweisen.

    <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
    • ScroungerS Scrounger

      @Bostil
      Gibt's schon, Stil Text

      BostilB Offline
      BostilB Offline
      Bostil
      schrieb am zuletzt editiert von
      #84

      @Scrounger Danke dir. Bei mir haben Sie dennoch eine leichte, abgerundete Ecke - nur zur info:

      253359d4-c6ca-4b67-95d0-c99a3bd8763c-image.png

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

        @Bostil
        Hast du mal in Css ränder radius 0 versucht? Habe eben kein vis zur Hand, ziemlich weit unten in den settings. Ich meine ich habe damit schon Ecken gemacht

        1 Antwort Letzte Antwort
        0
        • BostilB Bostil

          @Scrounger Danke dir. Bei mir haben Sie dennoch eine leichte, abgerundete Ecke - nur zur info:

          253359d4-c6ca-4b67-95d0-c99a3bd8763c-image.png

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

          @Bostil
          Stimmt, den bekommst du aber auch nur weg mit css überschreiben.
          Der ist aber eigentlich tranparent nur bei hover / press kommt Farbe ins Spiel, die man per Editor aber auf transparent setzen kann.

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

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

          1 Antwort Letzte Antwort
          1
          • C Offline
            C Offline
            Coffeelover
            schrieb am zuletzt editiert von
            #87

            Hallo zusammen,
            habe versucht einen HTTP-GET Befehl hinter ein Button Widget zu legen. Leider habe ich das nur hinbekommen in Verbindung mit einem sich neu öffnenden Fenster. Lässt sich das ohne Zusatzfester umsetzen?
            VG

            1 Antwort Letzte Antwort
            0
            • N Offline
              N Offline
              nousefor82
              schrieb am zuletzt editiert von
              #88

              Hallo @Scrounger,

              der Adapter begeistert mich jedes Mal aufs Neue.

              Weißt du, woran es liegt, dass das Icon in der Vertikalen nich zu zentrieren ist?

              Gibt es hier einen CSS-Befehl?

              806A2BEC-81F4-4A1E-B537-E83AE1125A2B.jpeg

              Viele Grüße

              ScroungerS 1 Antwort Letzte Antwort
              0
              • N nousefor82

                Hallo @Scrounger,

                der Adapter begeistert mich jedes Mal aufs Neue.

                Weißt du, woran es liegt, dass das Icon in der Vertikalen nich zu zentrieren ist?

                Gibt es hier einen CSS-Befehl?

                806A2BEC-81F4-4A1E-B537-E83AE1125A2B.jpeg

                Viele Grüße

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

                @nousefor82
                Ist ein Fehler, werd ich mit der nächsten Version korrigieren

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

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

                N 1 Antwort Letzte Antwort
                0
                • ScroungerS Scrounger

                  @nousefor82
                  Ist ein Fehler, werd ich mit der nächsten Version korrigieren

                  N Offline
                  N Offline
                  nousefor82
                  schrieb am zuletzt editiert von
                  #90

                  @Scrounger

                  Alles klar! Danke für die Info!

                  1 Antwort Letzte Antwort
                  0
                  • S Offline
                    S Offline
                    Strobelix
                    schrieb am zuletzt editiert von
                    #91

                    Kannst du denn die Möglichkeit einbauen, dass man bei State Buttons auch Aktivbild und eine Aktive Beschriftungsfarbe wie beim Toggle hat?

                    Ich würde gern States besser hervorheben wie bei den Toggles, allerdings ohne die Möglichkeit den Wert mit dem selben Button wieder zurückzusetzen.

                    Danke schon Mal

                    Raspberrymatic, Homematic & Homematic IP Aktoren, ioBroker auf NUC i3, Nuki, Harmony Hub, Digitalstrom, Diverse Sonoff (Tasmota) und Shellies

                    ScroungerS 1 Antwort Letzte Antwort
                    0
                    • S Strobelix

                      Kannst du denn die Möglichkeit einbauen, dass man bei State Buttons auch Aktivbild und eine Aktive Beschriftungsfarbe wie beim Toggle hat?

                      Ich würde gern States besser hervorheben wie bei den Toggles, allerdings ohne die Möglichkeit den Wert mit dem selben Button wieder zurückzusetzen.

                      Danke schon Mal

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

                      @Strobelix
                      Schreib bitte nen Issue dafür auf github, dann bau ich es evtl. mal ein.

                      Du könntest es auch so realisieren, dass du einfach zwei Button States nimmst, die übereinander legst und die Option Sichtbarkeit verwendest, in Abhängigkeit welchen Wert der Datenpunkt hat.

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

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

                      XsevX 1 Antwort Letzte Antwort
                      0
                      • ScroungerS Scrounger

                        @Strobelix
                        Schreib bitte nen Issue dafür auf github, dann bau ich es evtl. mal ein.

                        Du könntest es auch so realisieren, dass du einfach zwei Button States nimmst, die übereinander legst und die Option Sichtbarkeit verwendest, in Abhängigkeit welchen Wert der Datenpunkt hat.

                        XsevX Offline
                        XsevX Offline
                        Xsev
                        schrieb am zuletzt editiert von Xsev
                        #93

                        @Scrounger Ich teste gerade mit verschiedenen Button und Toggle, leider kann ich keine Bilder hinterlegen. Wenn ich unter Symbole klicke öffnet sich der Dateimanager aber es werden keinerlei Symbole/Dateien angezeigt, nur leere Ordner obwohl voll mit Bilddateien. Benötige ich ein spezielles Dateiformat oder was mach ich falsch?

                        D ScroungerS 2 Antworten Letzte Antwort
                        0
                        • XsevX Xsev

                          @Scrounger Ich teste gerade mit verschiedenen Button und Toggle, leider kann ich keine Bilder hinterlegen. Wenn ich unter Symbole klicke öffnet sich der Dateimanager aber es werden keinerlei Symbole/Dateien angezeigt, nur leere Ordner obwohl voll mit Bilddateien. Benötige ich ein spezielles Dateiformat oder was mach ich falsch?

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

                          @Xsev
                          in das Textfeld klicken, dann bekommst du die Symbol Auswahl

                          XsevX 1 Antwort Letzte Antwort
                          0
                          • XsevX Xsev

                            @Scrounger Ich teste gerade mit verschiedenen Button und Toggle, leider kann ich keine Bilder hinterlegen. Wenn ich unter Symbole klicke öffnet sich der Dateimanager aber es werden keinerlei Symbole/Dateien angezeigt, nur leere Ordner obwohl voll mit Bilddateien. Benötige ich ein spezielles Dateiformat oder was mach ich falsch?

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

                            @Xsev sagte in Material Design Widgets: Buttons Widget:

                            Wenn ich unter Symbole klicke öffnet sich der Dateimanager aber es werden keinerlei Symbole/Dateien angezeigt, nur leere Ordner obwohl voll mit Bilddateien. Benötige ich ein spezielles Dateiformat oder was mach ich falsch?

                            Bilder müssen über den VIS Editor hochgeladen werden, sonst sieht man die nicht und hat auch keinen Zugriff.

                            <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
                            • D dos1973

                              @Xsev
                              in das Textfeld klicken, dann bekommst du die Symbol Auswahl

                              XsevX Offline
                              XsevX Offline
                              Xsev
                              schrieb am zuletzt editiert von Xsev
                              #96

                              @dos1973 sagte in Material Design Widgets: Buttons Widget:

                              @Xsev
                              in das Textfeld klicken, dann bekommst du die Symbol Auswahl

                              Danke das funktioniert! Dauert nur ein bisschen bis sich der Kontext öffnet. Damit bekomme ich eine feste Auswahl aber leider keine eigenen.

                              @Scrounger
                              Ich hab die Bilder mit dem Vis Editor hochgeladen, sicherheitshalber gerade nochmal meinen Ordner mit SVG Icons direkt in die aktuelle VIs, leider bleibt der Ordner (Ordnerstruktur vollständig) dennoch leer.

                              edit; mit Pfadangabe im Texfeld geht es, nur eben nicht über den Dateimanager...

                              sigi234S 1 Antwort Letzte Antwort
                              0
                              • XsevX Xsev

                                @dos1973 sagte in Material Design Widgets: Buttons Widget:

                                @Xsev
                                in das Textfeld klicken, dann bekommst du die Symbol Auswahl

                                Danke das funktioniert! Dauert nur ein bisschen bis sich der Kontext öffnet. Damit bekomme ich eine feste Auswahl aber leider keine eigenen.

                                @Scrounger
                                Ich hab die Bilder mit dem Vis Editor hochgeladen, sicherheitshalber gerade nochmal meinen Ordner mit SVG Icons direkt in die aktuelle VIs, leider bleibt der Ordner (Ordnerstruktur vollständig) dennoch leer.

                                edit; mit Pfadangabe im Texfeld geht es, nur eben nicht über den Dateimanager...

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

                                @Xsev
                                Ordner unter vis.0 anlegen und mit Dateimanager hochladen.

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

                                XsevX 1 Antwort Letzte Antwort
                                0
                                • sigi234S sigi234

                                  @Xsev
                                  Ordner unter vis.0 anlegen und mit Dateimanager hochladen.

                                  XsevX Offline
                                  XsevX Offline
                                  Xsev
                                  schrieb am zuletzt editiert von
                                  #98

                                  @sigi234
                                  Das hab ich, sowohl Vis.0 wie auch Dateimanager. Ganz komisch, sonst werden mir die Bilder ja auch angezeigt und über die Pfadangabe geht es auch. Nur nicht über den Button

                                  ScroungerS 1 Antwort Letzte Antwort
                                  0
                                  • XsevX Xsev

                                    @sigi234
                                    Das hab ich, sowohl Vis.0 wie auch Dateimanager. Ganz komisch, sonst werden mir die Bilder ja auch angezeigt und über die Pfadangabe geht es auch. Nur nicht über den Button

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

                                    @Xsev
                                    Dann hast du wohl ein genrelles Problem. Denke die Rechte sind falsch gesetzt.
                                    Falls Linux System dann z.B. mal chmod 777 -R auf den vis ordner ausführen.

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

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

                                    XsevX GarganoG 2 Antworten Letzte Antwort
                                    0
                                    • ScroungerS Scrounger

                                      @Xsev
                                      Dann hast du wohl ein genrelles Problem. Denke die Rechte sind falsch gesetzt.
                                      Falls Linux System dann z.B. mal chmod 777 -R auf den vis ordner ausführen.

                                      XsevX Offline
                                      XsevX Offline
                                      Xsev
                                      schrieb am zuletzt editiert von
                                      #100

                                      @Scrounger
                                      Danke! Sehr strange Geschichte. Die Rechte hab ich kontrolliert und neu gesetzt leider ohne Erfolg. Das komische ist ja, wenn ich eine direkte Pfadangabe mache, hab ich Zugriff und bekomme die Bilder auch angezeigt im Button. Auch über andere Widgets (HQ-Buttons, Image etc.) komm ich an die Daten. Is jetzt nicht weiter dramatisch da es über den Pfad ja geht und ich anscheinend ja der einzige mit dem Problem bin. Einzig, was mir gerade einfällt, sonst gehe ich über "Quelle" an die Bilder, bei dir geht es über "Symbole" das der einzige Unterschied der mir einfällt.

                                      frank2604F 1 Antwort Letzte Antwort
                                      0
                                      • XsevX Xsev

                                        @Scrounger
                                        Danke! Sehr strange Geschichte. Die Rechte hab ich kontrolliert und neu gesetzt leider ohne Erfolg. Das komische ist ja, wenn ich eine direkte Pfadangabe mache, hab ich Zugriff und bekomme die Bilder auch angezeigt im Button. Auch über andere Widgets (HQ-Buttons, Image etc.) komm ich an die Daten. Is jetzt nicht weiter dramatisch da es über den Pfad ja geht und ich anscheinend ja der einzige mit dem Problem bin. Einzig, was mir gerade einfällt, sonst gehe ich über "Quelle" an die Bilder, bei dir geht es über "Symbole" das der einzige Unterschied der mir einfällt.

                                        frank2604F Offline
                                        frank2604F Offline
                                        frank2604
                                        schrieb am zuletzt editiert von
                                        #101

                                        Hallo, fange gerade an mich mit dem Material Design Konzept und den Widgets zu beschäftigen. Ich möchte die Dashboards für unser neues Haus damit umsetzten.

                                        Habe keinen Thread für allgemeine Fragen gefunden, daher hier:

                                        Kann ich die die Farbeinstellungen der jeweiligen Elemente über globale Variablen setzten, so dass ich später noch einfach das Farbkonzept umstellen kann?

                                        Danke und Grüße

                                        Frank

                                        Intel NUC8 i3, Proxmox, VM Ubuntu, ioBroker
                                        Philips HUE, Homematic CCU3, Zigbee, Yamaha MusicCast, Vorwerk ...

                                        N 1 Antwort Letzte Antwort
                                        0
                                        • frank2604F frank2604

                                          Hallo, fange gerade an mich mit dem Material Design Konzept und den Widgets zu beschäftigen. Ich möchte die Dashboards für unser neues Haus damit umsetzten.

                                          Habe keinen Thread für allgemeine Fragen gefunden, daher hier:

                                          Kann ich die die Farbeinstellungen der jeweiligen Elemente über globale Variablen setzten, so dass ich später noch einfach das Farbkonzept umstellen kann?

                                          Danke und Grüße

                                          Frank

                                          N Offline
                                          N Offline
                                          nousefor82
                                          schrieb am zuletzt editiert von
                                          #102

                                          @frank2604

                                          Hi, ja das kannst du.

                                          Über den CSS Reiter einen Style definieren und diesen dann dem Widget und Allgemein zuweisen.

                                          VG

                                          frank2604F 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

                                          788

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          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