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.
  • 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
    wrote on last edited by
    #94

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

    XsevX 1 Reply Last reply
    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
      wrote on last edited by
      #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.

      1 Reply Last reply
      0
      • D dos1973

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

        XsevX Offline
        XsevX Offline
        Xsev
        wrote on last edited by 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 Reply Last reply
        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
          wrote on last edited by
          #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 Reply Last reply
          0
          • sigi234S sigi234

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

            XsevX Offline
            XsevX Offline
            Xsev
            wrote on last edited by
            #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 Reply Last reply
            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
              wrote on last edited by
              #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.

              XsevX GarganoG 2 Replies Last reply
              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
                wrote on last edited by
                #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 Reply Last reply
                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
                  wrote on last edited by
                  #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 Reply Last reply
                  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
                    wrote on last edited by
                    #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 Reply Last reply
                    0
                    • N nousefor82

                      @frank2604

                      Hi, ja das kannst du.

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

                      VG

                      frank2604F Offline
                      frank2604F Offline
                      frank2604
                      wrote on last edited by
                      #103

                      @nousefor82

                      Danke für Deine Antwort. Hatte bisher garnicht mit CSS gearbeitet. Habe mich die letzten Stunden damit ein wenig beschäftigt und ein paar Basic Widgets konnte ich jetzt schon über CSS-KLassen beeinflussen :grin: .

                      Ich brauch aber noch mal einen Schubs in die richtige Richtung:

                      Wie kann ich denn z.B. beim Toggle-Button diese 3 Farben über CSS setzen?

                      Button_css.jpg

                      VG

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

                      N 1 Reply Last reply
                      0
                      • frank2604F frank2604

                        @nousefor82

                        Danke für Deine Antwort. Hatte bisher garnicht mit CSS gearbeitet. Habe mich die letzten Stunden damit ein wenig beschäftigt und ein paar Basic Widgets konnte ich jetzt schon über CSS-KLassen beeinflussen :grin: .

                        Ich brauch aber noch mal einen Schubs in die richtige Richtung:

                        Wie kann ich denn z.B. beim Toggle-Button diese 3 Farben über CSS setzen?

                        Button_css.jpg

                        VG

                        N Offline
                        N Offline
                        nousefor82
                        wrote on last edited by
                        #104

                        @frank2604

                        Gehe oben auf den CSS-Reiter, dann auf Projekt anstatt Global.

                        Dann gibst du ein:

                        .button{

                        Background-color: green (oder hex-Code oder Ragnar)!important;

                        }

                        So kannst du mehrere Klassen erstellen...und es gibt noch viele weitere Eigenschaften.

                        Dann kannst du egal welches Widget dieser oder einer anderen Klasse zuweisen.

                        frank2604F 1 Reply Last reply
                        0
                        • N nousefor82

                          @frank2604

                          Gehe oben auf den CSS-Reiter, dann auf Projekt anstatt Global.

                          Dann gibst du ein:

                          .button{

                          Background-color: green (oder hex-Code oder Ragnar)!important;

                          }

                          So kannst du mehrere Klassen erstellen...und es gibt noch viele weitere Eigenschaften.

                          Dann kannst du egal welches Widget dieser oder einer anderen Klasse zuweisen.

                          frank2604F Offline
                          frank2604F Offline
                          frank2604
                          wrote on last edited by
                          #105

                          @nousefor82

                          Danke. Soweit klar, aber Material Design Widgets haben ja sehr viele spezielle Eigenschaften - wie hier der Toggle-Button. Der hat wie oben im Screenshot markiert, Hintergrundfarben für inaktiv, aktiv und gedrückt.

                          Wenn ich in CSS einfach eine Background-color mit !important setzte, bleibt es bei allen drei Zuständen bei dieser Farbe.

                          Ich würde gerne wissen, ob, und wenn ja wie ich die verschiedenen Farben für die drei Zustände zentral setzen kann.

                          VG

                          Frank

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

                          N ScroungerS 2 Replies Last reply
                          0
                          • frank2604F frank2604

                            @nousefor82

                            Danke. Soweit klar, aber Material Design Widgets haben ja sehr viele spezielle Eigenschaften - wie hier der Toggle-Button. Der hat wie oben im Screenshot markiert, Hintergrundfarben für inaktiv, aktiv und gedrückt.

                            Wenn ich in CSS einfach eine Background-color mit !important setzte, bleibt es bei allen drei Zuständen bei dieser Farbe.

                            Ich würde gerne wissen, ob, und wenn ja wie ich die verschiedenen Farben für die drei Zustände zentral setzen kann.

                            VG

                            Frank

                            N Offline
                            N Offline
                            nousefor82
                            wrote on last edited by
                            #106

                            @frank2604

                            Ah, ok. Das hatte ich falsch verstanden.

                            Da bin ich ehrlich gesagt gerade überfragt...müsste ich mich mal schlau machen, aber da gibt es sicher eine Lösung...

                            1 Reply Last reply
                            0
                            • frank2604F frank2604

                              @nousefor82

                              Danke. Soweit klar, aber Material Design Widgets haben ja sehr viele spezielle Eigenschaften - wie hier der Toggle-Button. Der hat wie oben im Screenshot markiert, Hintergrundfarben für inaktiv, aktiv und gedrückt.

                              Wenn ich in CSS einfach eine Background-color mit !important setzte, bleibt es bei allen drei Zuständen bei dieser Farbe.

                              Ich würde gerne wissen, ob, und wenn ja wie ich die verschiedenen Farben für die drei Zustände zentral setzen kann.

                              VG

                              Frank

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

                              @frank2604 sagte in [Material Design

                              Ich würde gerne wissen, ob, und wenn ja wie ich die verschiedenen Farben für die drei Zustände zentral setzen kann

                              per css musst du die entsprechenden klassen verwenden, bekommt man mit dem inspektor raus.
                              oder su eratellst datenpunkte und verwendest sie als binding.

                              frank2604F 1 Reply Last reply
                              0
                              • ScroungerS Scrounger

                                @frank2604 sagte in [Material Design

                                Ich würde gerne wissen, ob, und wenn ja wie ich die verschiedenen Farben für die drei Zustände zentral setzen kann

                                per css musst du die entsprechenden klassen verwenden, bekommt man mit dem inspektor raus.
                                oder su eratellst datenpunkte und verwendest sie als binding.

                                frank2604F Offline
                                frank2604F Offline
                                frank2604
                                wrote on last edited by
                                #108

                                @Scrounger Danke!

                                Mit Bindings bekomme ich es jetzt hin. Da in den Feldern immer gleich der Color Picker aufgeht, hatte ich nicht vermutet, dass man da einfach einen DP eingeben kann.

                                ABER der große Nachteil bei Bindings ist, dass man das Ergebnis nur in der Runtime, nicht im Editor sehen kann.

                                Daher würde ich es gerne mit CSS hinbekommen. Nach ein paar Stunden googlen und probieren habe ich mit dem Inspektor schon ein paar Eigenschaften bei dem ein oder anderen MD-Widget herausgefunden, aber einiges bekomme ich nicht hin:

                                Beispiel:

                                Beim Button gibt es diese Farbeinstellungen (aber wem sag ich das :wink:)

                                Button 0.jpg

                                Als explizite Eigenschaft finde ich im Inspektor aber nur "Farbe gedrückt" = --mdc-theme-primary: #24f944;

                                "Hintergrund" und "Aktiver Hintergrund" werden immer nur mit der Eigenschaft background eingestellt und wechseln je nach Zustand des Buttons:

                                Button 1.jpg

                                Button 2.jpg

                                Ich stehe auf dem Schlauch, wie ich dass in einer CSS-Klasse umsetzten soll.

                                Vielleicht kannst Du mir noch einen Tipp geben, bevor ich aufgebe :confounded:

                                Danke!

                                Frank

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

                                ScroungerS 1 Reply Last reply
                                0
                                • frank2604F frank2604

                                  @Scrounger Danke!

                                  Mit Bindings bekomme ich es jetzt hin. Da in den Feldern immer gleich der Color Picker aufgeht, hatte ich nicht vermutet, dass man da einfach einen DP eingeben kann.

                                  ABER der große Nachteil bei Bindings ist, dass man das Ergebnis nur in der Runtime, nicht im Editor sehen kann.

                                  Daher würde ich es gerne mit CSS hinbekommen. Nach ein paar Stunden googlen und probieren habe ich mit dem Inspektor schon ein paar Eigenschaften bei dem ein oder anderen MD-Widget herausgefunden, aber einiges bekomme ich nicht hin:

                                  Beispiel:

                                  Beim Button gibt es diese Farbeinstellungen (aber wem sag ich das :wink:)

                                  Button 0.jpg

                                  Als explizite Eigenschaft finde ich im Inspektor aber nur "Farbe gedrückt" = --mdc-theme-primary: #24f944;

                                  "Hintergrund" und "Aktiver Hintergrund" werden immer nur mit der Eigenschaft background eingestellt und wechseln je nach Zustand des Buttons:

                                  Button 1.jpg

                                  Button 2.jpg

                                  Ich stehe auf dem Schlauch, wie ich dass in einer CSS-Klasse umsetzten soll.

                                  Vielleicht kannst Du mir noch einen Tipp geben, bevor ich aufgebe :confounded:

                                  Danke!

                                  Frank

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

                                  @frank2604 sagte in Material Design Widgets: Buttons Widget:

                                  Ich stehe auf dem Schlauch, wie ich dass in einer CSS-Klasse umsetzten soll.
                                  Vielleicht kannst Du mir noch einen Tipp geben, bevor ich aufgebe :confounded:

                                  Warte am besten auf die neue Version 0.4.0.
                                  Da gibts dann einen "Theme Editor" mit dem man sehr komfortabel Farben, Schriftart & Schriftgrößen für alle MDW Widgets festlegen kann:

                                  e08399c8-442c-494d-8534-b179dfe9dbb5-grafik.png

                                  D F 3 Replies Last reply
                                  2
                                  • ScroungerS Scrounger

                                    @frank2604 sagte in Material Design Widgets: Buttons Widget:

                                    Ich stehe auf dem Schlauch, wie ich dass in einer CSS-Klasse umsetzten soll.
                                    Vielleicht kannst Du mir noch einen Tipp geben, bevor ich aufgebe :confounded:

                                    Warte am besten auf die neue Version 0.4.0.
                                    Da gibts dann einen "Theme Editor" mit dem man sehr komfortabel Farben, Schriftart & Schriftgrößen für alle MDW Widgets festlegen kann:

                                    e08399c8-442c-494d-8534-b179dfe9dbb5-grafik.png

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

                                    @Scrounger
                                    Wow das hört sich toll an. Was mir die ganze zeit vorschwebt wäre eine Darkmode option.
                                    Zb an einen DP gekoppelt. „True“ wäre dark mode Farben „false“ day mode Farben

                                    ScroungerS 2 Replies Last reply
                                    0
                                    • D dos1973

                                      @Scrounger
                                      Wow das hört sich toll an. Was mir die ganze zeit vorschwebt wäre eine Darkmode option.
                                      Zb an einen DP gekoppelt. „True“ wäre dark mode Farben „false“ day mode Farben

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

                                      @dos1973
                                      :grin: wusste das die erste Frage sein wird gibts nen Darkmode.
                                      Nein aktuell nicht, weil ich es selber nicht brauche und die Implemtierung des "Theme Editors" wesentlich aufwendiger ist als gedacht.
                                      Allerdings kann man das dann per skript realisieren, da nur Datenpunkte und in den Widgets Binindings verwendet werden.

                                      D 1 Reply Last reply
                                      0
                                      • ScroungerS Scrounger

                                        @dos1973
                                        :grin: wusste das die erste Frage sein wird gibts nen Darkmode.
                                        Nein aktuell nicht, weil ich es selber nicht brauche und die Implemtierung des "Theme Editors" wesentlich aufwendiger ist als gedacht.
                                        Allerdings kann man das dann per skript realisieren, da nur Datenpunkte und in den Widgets Binindings verwendet werden.

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

                                        @Scrounger
                                        Ok, ich warte es mal ab, was du da zauberst.
                                        Ich hatte es schonmal via Farben DP und Bindigs versucht. Aber da es im Vis Editor dann keine Darstellung gibt, war das sehr schwer zu bearbeiten.

                                        1 Reply Last reply
                                        0
                                        • D dos1973

                                          @Scrounger
                                          Wow das hört sich toll an. Was mir die ganze zeit vorschwebt wäre eine Darkmode option.
                                          Zb an einen DP gekoppelt. „True“ wäre dark mode Farben „false“ day mode Farben

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

                                          @dos1973 sagte in Material Design Widgets: Buttons Widget:

                                          Wow das hört sich toll an. Was mir die ganze zeit vorschwebt wäre eine Darkmode option.

                                          Wird es doch geben, kann das sehr einfach zusätzlich implementieren.

                                          @dos1973 sagte in Material Design Widgets: Buttons Widget:

                                          @Scrounger
                                          Ich hatte es schonmal via Farben DP und Bindigs versucht. Aber da es im Vis Editor dann keine Darstellung gibt, war das sehr schwer zu bearbeiten.

                                          Hab was eingebaut, dass diese auch im Editor angezeigt werden.

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          739

                                          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