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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    989

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.4k

Material Design Widgets: Buttons Widget

Scheduled Pinned Locked Moved Visualisierung
vis
157 Posts 38 Posters 27.3k 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.
  • M Offline
    M Offline
    mrg
    wrote on last edited by
    #61

    @Scrounger
    ich finde die icons-mfd-svg ganz gut. Da ist immer was dabei was mir gefällt.
    Würde die aber auch gerne einfärben.
    In deinen Button kann ich das Bild anzeigen aber leider nicht einfärben.
    Gibt es da eine möglichkeit?

    ScroungerS 1 Reply Last reply
    0
    • ScroungerS Scrounger

      @dos1973 sagte in Material Design Widgets: Buttons Widget:

      @Scrounger
      Würdest du so ein Widget einbauen?
      Besteht da Hoffnung?

      Also ich sehe bei mir keine Anwendungsfälle dafür, weil ich nen super skript für das habe.
      Kannst aber gerne nen issue erstellen, vielleicht implementiere ich es irgendwann mal.

      sigi234S Online
      sigi234S Online
      sigi234
      Forum Testing Most Active
      wrote on last edited by
      #62

      @Scrounger sagte in Material Design Widgets: Buttons Widget:

      @dos1973 sagte in Material Design Widgets: Buttons Widget:

      @Scrounger
      Würdest du so ein Widget einbauen?
      Besteht da Hoffnung?

      Also ich sehe bei mir keine Anwendungsfälle dafür, weil ich nen super skript für das habe.
      Kannst aber gerne nen issue erstellen, vielleicht implementiere ich es irgendwann mal.

      Welches Skript hast du da?
      Aber so ein Widget.wäre schon Super

      Anwendungsfall:

      1. Licht
      2. Steckdosen
      3. Kombination daraus usw.

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

      1 Reply Last reply
      0
      • M mrg

        @Scrounger
        ich finde die icons-mfd-svg ganz gut. Da ist immer was dabei was mir gefällt.
        Würde die aber auch gerne einfärben.
        In deinen Button kann ich das Bild anzeigen aber leider nicht einfärben.
        Gibt es da eine möglichkeit?

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

        @mrg sagte in Material Design Widgets: Buttons Widget:

        @Scrounger
        ich finde die icons-mfd-svg ganz gut. Da ist immer was dabei was mir gefällt.
        Würde die aber auch gerne einfärben.
        In deinen Button kann ich das Bild anzeigen aber leider nicht einfärben.
        Gibt es da eine möglichkeit?

        vielleicht per css.
        Oder nimm die materialdesignsicons, die kannst direkt auswählen und beinhalten auch die mfds. Einfärben geht da.

        @sigi234 sagte in Material Design Widgets: Buttons Widget:

        Welches Skript hast du da?

        Ist zwar jetzt voll offtopic, aber weil du es bist ;-)

        globales Skript mit der Funktion

        var myGlobalFunctions = {};
        
        myGlobalFunctions.setMultipleStates = function (objectList) {
            for (const obj of objectList) {
                if (obj.id) {
                    let value = getState(obj.id).val;
        
                    if (obj.hasOwnProperty('value')) {
                        if (typeof value === typeof obj.value) {
                            if (value != obj.value) {
                                console.debug(`[setMultipleStates]: set state for '${obj.id}' to '${obj.value}'`)
                                setState(obj.id, obj.value);
                            }
                        } else {
                            console.error(`[setMultipleStates] object '${obj.id}' value type '${typeof obj.value}' is wrong, must be '${typeof value}'`)
                        }
                    } else {
                        console.error(`[setMultipleStates] object '${obj.id}' has no value!`)
                    }
                }
            }
        }
        

        Aufrufen der Funktion:

        // alle Lichter & Geräte per Button ausschalten ******************************************************************************************************************************
        on({ id: myDevices.Netzwerk.Devices.HarmonyHub.Buttons.AllesAus.getId() }, allesAus);
        
        function allesAus(button) {
            if (button.state.val === true) {
                log("Wohnzimmer: alles andere ausschalten")
        
                // Liste aller Objekte die ausgeschaltet werden sollen, inkl. des Wertes für Zustand aus
                var objList = [
                    // Lichter
                    { id: myDevices.Licht.Flur.Main.An.getId(), value: false },
                    { id: myDevices.Licht.Flur.Nische.An.getId(), value: false },
                    { id: myDevices.Licht.Bad.Dusche.An.getId(), value: false },
                    { id: myDevices.Licht.Bad.Main.An.getId(), value: false },
                    { id: myDevices.Licht.Schlafzimmer.Vorne.Dimmer.getId(), value: 0 },
                    { id: myDevices.Licht.Schlafzimmer.Hinten.Dimmer.getId(), value: 0 },
                    { id: myDevices.Licht.WC.An.getId(), value: false },
                    { id: myDevices.Licht.Esszimmer.Links.Dimmer.getId(), value: 0 },
                    { id: myDevices.Licht.Esszimmer.Rechts.Dimmer.getId(), value: 0 },
                    { id: myDevices.Licht.Kueche.Main.An.getId(), value: false },
                    { id: myDevices.Licht.Kueche.Speisekammer.An.getId(), value: false },
        
                    // MusicCast
                    { id: myDevices.Netzwerk.Devices.MusicCast.Bad.An.getId(), value: false },
                    { id: myDevices.Netzwerk.Devices.MusicCast.Schlafzimmer.An.getId(), value: false },
                    { id: myDevices.Netzwerk.Devices.MusicCast.Esszimmer.An.getId(), value: false },
                    { id: myDevices.Netzwerk.Devices.MusicCast.Kueche.An.getId(), value: false },
        
                    // Bewegungssensor zurücksetzen
                    { id: myDevices.Sensoren.Bewegung.Flur.StatusReset.getId(), value: true },
        
                    // altes Zeug, muss noch mit linkeddevices ersetzt werden
                    //{ id: Licht.Schlafzimmer.Bett.getId(), value: false }
                ]
        
                myGlobalFunctions.setMultipleStates(objList);
            }
        }
        
        1 Reply Last reply
        1
        • D Offline
          D Offline
          dos1973
          wrote on last edited by
          #64

          ich sagte ja, mittels script (Blockly) bekomme ich das auch irgendwie hin.
          aber wie @sigi234 schon aufzeigte, die Anwendungsmöglichkeiten direkt aus VIS heraus, wären enorm.

          Schade, vielleicht denkst du nochmals darüber nach - aber Du bist der Boss* in dem Kontext ;-)

          *vielleicht etwas süsses ;-)

          ScroungerS 1 Reply Last reply
          0
          • D dos1973

            ich sagte ja, mittels script (Blockly) bekomme ich das auch irgendwie hin.
            aber wie @sigi234 schon aufzeigte, die Anwendungsmöglichkeiten direkt aus VIS heraus, wären enorm.

            Schade, vielleicht denkst du nochmals darüber nach - aber Du bist der Boss* in dem Kontext ;-)

            *vielleicht etwas süsses ;-)

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

            @dos1973, @sigi234

            Kleiner Tipp, wenn es ein issue bei github gibt, ist die wahrscheinlichkeit höher das so etwas implementiert wird. Nur einfach mal so als kleiner Tipp :grinning:

            sigi234S 1 Reply Last reply
            1
            • ScroungerS Scrounger

              @dos1973, @sigi234

              Kleiner Tipp, wenn es ein issue bei github gibt, ist die wahrscheinlichkeit höher das so etwas implementiert wird. Nur einfach mal so als kleiner Tipp :grinning:

              sigi234S Online
              sigi234S Online
              sigi234
              Forum Testing Most Active
              wrote on last edited by
              #66

              @Scrounger sagte in Material Design Widgets: Buttons Widget:

              @dos1973, @sigi234

              Kleiner Tipp, wenn es ein issue bei github gibt, ist die wahrscheinlichkeit höher das so etwas implementiert wird. Nur einfach mal so als kleiner Tipp :grinning:

              https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/81

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

              D 1 Reply Last reply
              1
              • sigi234S sigi234

                @Scrounger sagte in Material Design Widgets: Buttons Widget:

                @dos1973, @sigi234

                Kleiner Tipp, wenn es ein issue bei github gibt, ist die wahrscheinlichkeit höher das so etwas implementiert wird. Nur einfach mal so als kleiner Tipp :grinning:

                https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/81

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

                @sigi234
                danke dir!

                jetzt hoffen wir mal

                ScroungerS 1 Reply Last reply
                0
                • Chris TailorC Offline
                  Chris TailorC Offline
                  Chris Tailor
                  wrote on last edited by Chris Tailor
                  #68

                  Ich bin mir nicht ganz sicher, bei welchem Widget ich mein kleines Problem schildern soll. Ich probier's mal hier.

                  Ich verwende die Top App Bar in Kombination mit dem View in Widget 8. Beim View in Widget 8 habe ich bei der Object ID nichts hinterlegt ("nothing_selected"). Die Navigation funktioniert so wie es soll und die Views passen sich entsprechend dem ausgewählten Punkt an.

                  Konfiguration View in Widget:
                  ef564b60-6760-4919-8418-65120fc5e4bf-image.png

                  Jetzt möchte ich auf ausgewählten Views direkt einen Button hinterlegen, welcher auf eine andere View verweisen soll, welche im View in Widget 8 geöffnet wird (quasi als Shortcut zur Navigation mit der Top App Bar). Mit Button Widget auf Navigation eingestellt, komme auch da nicht ans Ziel, da damit die verlinkte View direkt geöffnet wird und nicht im View in Widget 8. Wenn ich im View in Widget 8 einen Objekt ID hinterlege und dieser mit dem Button einen Wert zuweise funktioniert die Navigation mit dem Button, aber die Navigation mit der Top App Bar funktioniert nicht mehr. Ich hoffe ihr könnt mir folgen und habt evtl. eine Lösung parat?

                  Also zusammengefasst wäre meine Frage, wie ich das Button Widget konfigurieren kann, damit ich damit analog der Top App Bar Views innerhalb des View in Widgets 8 steuern kann.

                  1 Reply Last reply
                  0
                  • D Offline
                    D Offline
                    dos1973
                    wrote on last edited by
                    #69

                    du legst einen dp (Zahl) an und verweist in der Objekt Id auf diesen DP.
                    Das machst du in der TopAppBar und im Widget8. Also beide auf den gleichen DP.

                    in deinen Button der als Direktlink (am besten button state) auf ein bestimmten view zeigen soll, nimmst du als ObjektID ebenfalls den DP der vorher erstellt wurde. Als Wert dann die entsprechende Zahl welche dein View beinhaltet. ( aus deinem Screenshot wäre die "1" der view für das Licht.

                    ist einfach, aber etwas kompliziert zu schreiben ;-)

                    Chris TailorC 1 Reply Last reply
                    0
                    • D dos1973

                      du legst einen dp (Zahl) an und verweist in der Objekt Id auf diesen DP.
                      Das machst du in der TopAppBar und im Widget8. Also beide auf den gleichen DP.

                      in deinen Button der als Direktlink (am besten button state) auf ein bestimmten view zeigen soll, nimmst du als ObjektID ebenfalls den DP der vorher erstellt wurde. Als Wert dann die entsprechende Zahl welche dein View beinhaltet. ( aus deinem Screenshot wäre die "1" der view für das Licht.

                      ist einfach, aber etwas kompliziert zu schreiben ;-)

                      Chris TailorC Offline
                      Chris TailorC Offline
                      Chris Tailor
                      wrote on last edited by
                      #70

                      @dos1973 ok, super, das hat funktioniert, Danke! Mir ist die "Object ID" in der Top App Bar untergegangen ...

                      1 Reply Last reply
                      0
                      • D dos1973

                        @sigi234
                        danke dir!

                        jetzt hoffen wir mal

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

                        @sigi234 @dos1973

                        Extra nur für Euch, was so ein issue doch bewirken kann :grinning:

                        multistate.gif

                        Gibts dann im nächsten latest release, wenn ihr testen wollt github version ziehen.

                        D M werner2000xW 4 Replies Last reply
                        1
                        • ScroungerS Scrounger

                          @sigi234 @dos1973

                          Extra nur für Euch, was so ein issue doch bewirken kann :grinning:

                          multistate.gif

                          Gibts dann im nächsten latest release, wenn ihr testen wollt github version ziehen.

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

                          @Scrounger
                          Hammer!
                          ich teste es heute nachmittag. das wird so vieles einfacher machen.
                          Danke

                          1 Reply Last reply
                          0
                          • ScroungerS Scrounger

                            @sigi234 @dos1973

                            Extra nur für Euch, was so ein issue doch bewirken kann :grinning:

                            multistate.gif

                            Gibts dann im nächsten latest release, wenn ihr testen wollt github version ziehen.

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

                            @Scrounger
                            der erste Test war sehr erfolgreich...
                            aber wie war das mit dem kleinen Finger ;-)

                            Button Toggle -Multi, das meinte ich eigentlich - hatte aber button state geschrieben, kommt das evtl. noch, oder würde ein weiteres Issue hier evtl. unterstützen.

                            ScroungerS 1 Reply Last reply
                            0
                            • D dos1973

                              @Scrounger
                              der erste Test war sehr erfolgreich...
                              aber wie war das mit dem kleinen Finger ;-)

                              Button Toggle -Multi, das meinte ich eigentlich - hatte aber button state geschrieben, kommt das evtl. noch, oder würde ein weiteres Issue hier evtl. unterstützen.

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

                              @dos1973

                              Und wie soll bei toggle die Rückmeldung erfolgen wenn mehrere object IDS hinterlegt sind? Der toggle Button zeigt ja immer den Status an.

                              Beispiel: drei boolean objecte. Einer ist true, die anderen beiden false. Zeigt jetzt der multi Button toggle true oder false an? Ich würde ja sagen der darf nur true sein, also Status anzeigen wenn alle Objekte true sind. Das bedeutet dann aber das beim ersten Klick alle Objekte erstmal auf true gesetzt würden.

                              das macht die Sache beim multi Button toggle wieder komplex ;-) da nimmt man doch lieber einfach zwei multi state Buttons und hat die volle Kontrolle über die Objekte.

                              D 1 Reply Last reply
                              0
                              • ScroungerS Scrounger

                                @dos1973

                                Und wie soll bei toggle die Rückmeldung erfolgen wenn mehrere object IDS hinterlegt sind? Der toggle Button zeigt ja immer den Status an.

                                Beispiel: drei boolean objecte. Einer ist true, die anderen beiden false. Zeigt jetzt der multi Button toggle true oder false an? Ich würde ja sagen der darf nur true sein, also Status anzeigen wenn alle Objekte true sind. Das bedeutet dann aber das beim ersten Klick alle Objekte erstmal auf true gesetzt würden.

                                das macht die Sache beim multi Button toggle wieder komplex ;-) da nimmt man doch lieber einfach zwei multi state Buttons und hat die volle Kontrolle über die Objekte.

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

                                @Scrounger
                                ich hatte es mir so vorgestellt

                                der Hauptbutton hat 2 werte: A und B
                                die IOD darunter beziehen sich immer auf den Hauptbutton und die Wertigkeit dessen

                                iod 1

                                • wenn Hauptbutton A: dann 1
                                • wenn Hauptbutton B: dann 2

                                oid2:

                                • wenn Hauptbutton A: dann 2
                                • wenn Hauptbutton B: dann 1

                                etc.

                                der Hauptbutton gibt die Richtung vor...

                                1 Reply Last reply
                                0
                                • D Offline
                                  D Offline
                                  DrHouse03
                                  wrote on last edited by DrHouse03
                                  #76

                                  @Scrounger

                                  Hallo!

                                  Ich habe das Update auf 0.3.9 gemacht und jetzt funktioniert leider das aufklappbare Menü das durch einen Button State ausgelöst wird auf dem Smartphone nicht mehr. Im Chrome Browser am PC funktioniert alles einwandfrei. Wenn ich einen anderen Button (keinen Material) hernehme und das Script und CSS hinterlege geht wieder alles auf dem Smartphone.

                                  ScroungerS 1 Reply Last reply
                                  0
                                  • D DrHouse03

                                    @Scrounger

                                    Hallo!

                                    Ich habe das Update auf 0.3.9 gemacht und jetzt funktioniert leider das aufklappbare Menü das durch einen Button State ausgelöst wird auf dem Smartphone nicht mehr. Im Chrome Browser am PC funktioniert alles einwandfrei. Wenn ich einen anderen Button (keinen Material) hernehme und das Script und CSS hinterlege geht wieder alles auf dem Smartphone.

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

                                    @DrHouse03
                                    Ist bereits behoben, version 0.3.11 sollte heute nachmittag im latest sein.

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

                                      Hi @Scrounger - wie schon öfters erwähnt: Deine Widgets heben die Visualisierung auf ein neues Level! Super Arbeit!

                                      Eine Frage noch: Benutze dieses Widget schon des Öfteren als "Designelement". Siehst du eine Möglichkeit noch im Schaltflächenstil eine Option einzufügen, wo die Form nicht durch Ecken abgerundet wird, sondern einfach rechteckig? DANKE.

                                      e40a1313-8413-4ff5-b29a-be0c7e4844c9-image.png

                                      0e3612bf-83d9-4628-b708-2d36c8d9dcf9-image.png

                                      ScroungerS 1 Reply Last reply
                                      0
                                      • BostilB Bostil

                                        Hi @Scrounger - wie schon öfters erwähnt: Deine Widgets heben die Visualisierung auf ein neues Level! Super Arbeit!

                                        Eine Frage noch: Benutze dieses Widget schon des Öfteren als "Designelement". Siehst du eine Möglichkeit noch im Schaltflächenstil eine Option einzufügen, wo die Form nicht durch Ecken abgerundet wird, sondern einfach rechteckig? DANKE.

                                        e40a1313-8413-4ff5-b29a-be0c7e4844c9-image.png

                                        0e3612bf-83d9-4628-b708-2d36c8d9dcf9-image.png

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

                                        @Bostil
                                        Gibt's schon, Stil Text

                                        BostilB 1 Reply Last reply
                                        1
                                        • ScroungerS Scrounger

                                          @sigi234 @dos1973

                                          Extra nur für Euch, was so ein issue doch bewirken kann :grinning:

                                          multistate.gif

                                          Gibts dann im nächsten latest release, wenn ihr testen wollt github version ziehen.

                                          M Offline
                                          M Offline
                                          michihorn
                                          wrote on last edited by michihorn
                                          #80

                                          @Scrounger Hallöchen ich beschäftige mich gerade mit diesem Button. Die Funktion ist super, kannst du evtl. für jede Oid auch noch extra Bild vorsehen? Schön wäre auch noch unterschiedliche Button Beschriftungen für jeden Oid.
                                          Gruß
                                          Michael

                                          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

                                          764

                                          Online

                                          32.5k

                                          Users

                                          81.6k

                                          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