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.
    • B
      bommel_030 @Scrounger last edited by

      @Scrounger
      Erstmal danke für's minmax, funktioniert einwandfrei.
      Gibt es eine Möglichkeit beim Icon Button state eine Art repeat zu verwenden?
      Bastel mir gerade eine View für die Fernbedienung mit dem Bravia Adapter. Alle Datenpunkte sind dort als Buttons ausgeführt.
      Dein Widget mit "true" als Wert auf den Datenpunkt Volume Up erhöht die Lautstärke +1, egal wie lange gedrückt. Wenn ich die Hardwarefernbedienung nutze und Vol Up gedrückt halte wird bis zum loslassen kontinuierlich um eins erhöht. Das würde ich gerne nachbauen.

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

        @MarEhg sagte in Material Design Widgets: Buttons Widget:

        Irgendwie stehe ich auf dem Schlauch! 😥

        Wie kann ich mit 4 Tasten (welches Widget) auf einer ObjektVariablen 4 Werte (0-3) schreiben sodas mir die Tasten den Zustand anzeigen.

        Geht aktuell nur mit Bindings, wie du es ja gelöst hast. In der kommenden Version wird das u.a. von der List und der IconList unterstützt und kann direkt im Editor eingestellt werden.
        Wenn du es bei den Buttons auch haben willst, dann erstell bitte bei github ein issue dazu, dann bau ich das bei gelegenheit mal ein.

        @bommel_030 sagte in Material Design Widgets: Buttons Widget:

        @Scrounger
        Erstmal danke für's minmax, funktioniert einwandfrei.
        Gibt es eine Möglichkeit beim Icon Button state eine Art repeat zu verwenden?
        Bastel mir gerade eine View für die Fernbedienung mit dem Bravia Adapter. Alle Datenpunkte sind dort als Buttons ausgeführt.
        Dein Widget mit "true" als Wert auf den Datenpunkt Volume Up erhöht die Lautstärke +1, egal wie lange gedrückt. Wenn ich die Hardwarefernbedienung nutze und Vol Up gedrückt halte wird bis zum loslassen kontinuierlich um eins erhöht. Das würde ich gerne nachbauen.

        Warum verwendest du nicht einen Slider für die Lautstärke?
        Du meinst hier das Button Addition Widget? Nein das geht nicht. Kannst aber gerne bei github nen issue dazu erstellen, dann versuch ich es vielleicht mal einzubauen.

        B 1 Reply Last reply Reply Quote 0
        • B
          bommel_030 @Scrounger last edited by

          @Scrounger
          Warum kein Slider? Wurstfinger und Handy und so gab es hier schon mal....
          Nein, kein Addition Widget. Der Datenpunkt ist ein Button und wird nur mit true getriggert.
          Da kann ich leider nicht mir rechnen. Erstelle dann mal nen Issue bei Github

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

            @bommel_030 sagte in Material Design Widgets: Buttons Widget:

            @Scrounger
            Warum kein Slider? Wurstfinger und Handy und so gab es hier schon mal....
            Nein, kein Addition Widget. Der Datenpunkt ist ein Button und wird nur mit true getriggert.
            Da kann ich leider nicht mir rechnen. Erstelle dann mal nen Issue bei Github

            Versteh ich nicht. Ist die Lautstärke nicht vom Typ Number?
            Gibt es schon ein Widget das diese Funktion bereitstellt?

            B 1 Reply Last reply Reply Quote 0
            • B
              bommel_030 @Scrounger last edited by

              @Scrounger
              Nee, das ist ja das Problem, keine Nummer nur Button der durch true getriggert wird.
              Sobald ich am PC sitze reich ich nen Screenshot nach. Mir ist leider kein Widget bekannt.

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

                @Scounger
                Hier der Screenshot, nur Button, keine Nummer:
                button.png
                Ich hab aber mittlerweile noch nen anderen Datenpunkt gefunden den ich mit nem Slider bedienen kann.
                Für den WAF bleibt der Wunsch nach der Repeat Funktion weiterhin bestehen. Allerdings ist die Priorität (für mich) nicht mehr so akut ^^

                Hab auch nen Issue auf GIthub erstellt:
                https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/57

                m-s-b created this issue in Scrounger/ioBroker.vis-materialdesign

                open [Button] Repeat Funktion #57

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

                  @Scrounger

                  Hi, ich würde gerne den jqui Navi Button gegen Deinen austauschen,
                  leider zentrierst Du das Bild in der Mitte, da habe ich keinen Platz für den Preis unten drunter.
                  Hast Du eine Idee ?

                  jqui
                  1.PNG

                  Dein Button Navigation
                  2.PNG

                  oben / unten Einstellung ändert nichts daran.

                  Habs jetzt erstmal über Signalbilder gelöst, aber trotzdem, oben/unten funktioniert nicht.

                  Edit: verschoben, da Frage Button Widget und nich Masonry Widget betrifft. Bitte darauf achten im Thema des entsprechenden Widgets Eure Fragen zu stellen!

                  I Scrounger 2 Replies Last reply Reply Quote 0
                  • I
                    intruder7 @skokarl last edited by Scrounger

                    @skokarl
                    Habs auch umgesetzt mit einem Preis unter dem Icon.

                    [{"tpl":"tplVis-materialdesign-Button-Toggle-vertical","data":{"oid":"tankerkoenig.0.stations.2.status","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","buttonStyle":"raised","toggleType":"value","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"50","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":"/icons-material-png/maps/ic_local_gas_station_white_48dp.png","imageTrue":"/icons-material-png/maps/ic_local_gas_station_white_48dp.png","iconHeight":"35","valueOff":"close","valueOn":"open","invertImage":false,"invertImageTrue":false,"readOnly":true,"labelTrue":"{tankerkoenig.0.stations.2.diesel.combined}         ","labelColorTrue":"","labelFalse":"closed","iconPosition":"top","buttontext":"{tankerkoenig.0.stations.2.diesel.combined}     "},"style":{"left":"calc(100% - 80px)","top":"45px","width":"60px","height":"60px","border-width":"1px","border-style":"solid","border-radius":"10px","border-color":"#FFFFFF","font-family":"Comfortaa-Regular","font-size":"15px","text-align":"center","z-index":"10"},"widgetSet":"materialdesign"}]
                    

                    Edit: verschoben, da Frage Button Widget und nich Masonry Widget betrifft. Bitte darauf achten im Thema des entsprechenden Widgets Eure Fragen zu stellen!

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

                      @skokarl
                      Musst Image Größe und / oder Button Größe verändern.

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

                        @Scrounger sagte in Material Design Widgets: Buttons Widget:

                        @skokarl
                        Musst Image Größe und / oder Button Größe verändern.

                        das würde ja heißen oben/unten funktioniert nur bei größeren Buttons ?

                        I Scrounger 2 Replies Last reply Reply Quote 0
                        • 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
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            789
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            38
                                            157
                                            19204
                                            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