Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Buttons Widget

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Material Design Widgets: Buttons Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • I
      intruder7 @skokarl last edited by

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

      Probiere doch das Widget oben aus.

      S 1 Reply Last reply Reply Quote 0
      • S
        skokarl @intruder7 last edited by

        @intruder7
        ja, Danke, mach ich.

        1 Reply Last reply Reply Quote 0
        • Scrounger
          Scrounger Developer @skokarl last edited by

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

          1 Reply Last reply Reply Quote 0
          • B
            Besserso last edited by

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

            Scrounger 1 Reply Last reply Reply Quote 0
            • Scrounger
              Scrounger Developer @Besserso last edited by

              @Besserso sagte in Material Design Widgets: Buttons Widget:

              welche genaue Farbe deine Standard Buttons haben

              #44739e

              1 Reply Last reply Reply Quote 0
              • T
                thomas.heyn @Scrounger last edited by

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

                S Scrounger 2 Replies Last reply Reply Quote 0
                • S
                  skokarl @thomas.heyn last edited by

                  @thomas-heyn

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

                  1.PNG

                  1 Reply Last reply Reply Quote 0
                  • Scrounger
                    Scrounger Developer @thomas.heyn last edited by

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

                    S 1 Reply Last reply Reply Quote 0
                    • S
                      skokarl @Scrounger last edited by

                      @Scrounger sagte in Material Design Widgets: Buttons Widget:

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

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

                      Scrounger 1 Reply Last reply Reply Quote 0
                      • Scrounger
                        Scrounger Developer @skokarl last edited by

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

                        @thomas-heyn

                        geht ganz einfach nur mit dem Widget und ohne binding:

                        button_readonly.gif

                        anbei Widget zum importieren:

                        [{"tpl":"tplVis-materialdesign-Button-Toggle-vertical","data":{"oid":"0_userdata.0.BadFenster","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","buttonStyle":"outlined","toggleType":"boolean","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"50","iconPosition":"top","autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockFilterGrayscale":"30","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"image":"/vis.0/main/window_closed.png","imageTrue":"/vis.0/main/window_open.png","iconHeight":"80","buttontext":"Bad<br>geschlossen","labelTrue":"Bad<br>offen","readOnly":true},"style":{"left":"421px","top":"263px","width":"146px","height":"150px"},"widgetSet":"materialdesign"}]
                        
                        sigi234 1 Reply Last reply Reply Quote 0
                        • sigi234
                          sigi234 Forum Testing Most Active @Scrounger last edited by

                          @Scrounger sagte in Material Design Widgets: Buttons Widget:

                          geht ganz einfach nur mit dem Widget und ohne binding:

                          Von wo hast du die Bilder?

                          Scrounger 2 Replies Last reply Reply Quote 0
                          • Scrounger
                            Scrounger Developer @sigi234 last edited by

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

                            1 Reply Last reply Reply Quote 1
                            • Scrounger
                              Scrounger Developer @sigi234 last edited by Scrounger

                              @sigi234
                              window_closed.png
                              window_open_2.png
                              window_open.png

                              D 1 Reply Last reply Reply Quote 2
                              • Bostil
                                Bostil last edited by

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

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

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

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

                                Anmerkung 2020-03-22 133800_1.png

                                Anmerkung 2020-03-22 133819_2.png

                                Scrounger 1 Reply Last reply Reply Quote 0
                                • Scrounger
                                  Scrounger Developer @Bostil last edited by Scrounger

                                  @Bostil

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

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

                                  1 Reply Last reply Reply Quote 0
                                  • Bostil
                                    Bostil last edited by

                                    @Scrounger sagte in Material Design Widgets: Buttons Widget:

                                    IconList Widget

                                    IconListWidget war definitiv DIE Idee - vielen Dank dir!

                                    1 Reply Last reply Reply Quote 0
                                    • D
                                      dos1973 @Scrounger last edited by

                                      @Scrounger

                                      Gibt es die ggfs. Auch als gekippte Fenster?

                                      1 Reply Last reply Reply Quote 0
                                      • Bostil
                                        Bostil last edited by

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

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

                                        Vor Betätigen der Schaltfläche:

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

                                        Nach Betätigen der Schaltfläche:

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

                                        Konfiguration Button:

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

                                        Scrounger 1 Reply Last reply Reply Quote 1
                                        • Scrounger
                                          Scrounger Developer @Bostil last edited by Scrounger

                                          @Bostil
                                          Bei Farbe alle drei gleiche eintragen

                                          1 Reply Last reply Reply Quote 0
                                          • Bostil
                                            Bostil last edited by

                                            Oh man ... also manchmal ...

                                            Vielen Dank (mal wieder) @Scrounger !!!

                                            Scrounger 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            772
                                            Online

                                            31.7k
                                            Users

                                            79.9k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            38
                                            157
                                            19210
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo