Material Design Widgets: Buttons Widget

[Scrounger]

@Besserso sagte in Material Design Widgets: Buttons Widget:

welche genaue Farbe deine Standard Buttons haben

#44739e

[thomas.heyn]

@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

[skokarl]

@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.

[Scrounger]

@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.

[skokarl]

@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]

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

@thomas-heyn

geht ganz einfach nur mit dem Widget und ohne binding:

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]

@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]

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

[Scrounger]

@sigi234

[Bostil]

@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 ?

[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.

[Bostil]

@Scrounger sagte in Material Design Widgets: Buttons Widget:

IconList Widget

IconListWidget war definitiv DIE Idee - vielen Dank dir!

[dos1973]

@Scrounger

Gibt es die ggfs. Auch als gekippte Fenster?

[Bostil]

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:

Nach Betätigen der Schaltfläche:

Konfiguration Button:

[Scrounger]

@Bostil
Bei Farbe alle drei gleiche eintragen

[Bostil]

Oh man ... also manchmal ...

Vielen Dank (mal wieder) @Scrounger !!!

[Scrounger]

@Bostil
Kein Problem helfe gerne. Und genau dafur hab ich die ganzen Themen erstellt

[Negalein]

@Scrounger

Ich habe ein Problem mit dem Button State Widget.

Über Binding stelle ich die Farbe des aktiven Button dar.

Bei 2 geht es, bei den restlichen nicht.

Binding hab ich überprüft. Müsste passen.

Kannst du bitte mal drüberschaun?

Widgetexport

[{"tpl":"tplVis-materialdesign-Button-State","data":{"oid":"logparser.0.visualization.table0.selection","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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":"text","vibrateOnMobilDevices":"50","iconPosition":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/Log-Mic-2/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.0/Log-Mic-2/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.0/Log-Mic-2/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,"value":"Error","buttontext":" Error ({v:logparser.0.filters.Error.jsonCount;v})","image":"alert-circle-outline","labelWidth":"0","colorPress":"{b:logparser.0.visualization.table0.selection;b==\"Error\" ? \"#ffd71a\" : \"#8f8f8f\"}","class":"leftBarBtn","name":"btnError","autoLockAfter":"10","lockFilterGrayscale":"30"},"style":{"left":"26px","top":"237px","z-index":"49","width":"180px","height":"32px","background-color":"{b:logparser.0.visualization.table0.selection;b==\"Error\" ? \"#4d4d4d\" : \"#2e2e2e\"}"},"widgetSet":"materialdesign"},{"tpl":"tplVis-materialdesign-Button-State","data":{"oid":"logparser.0.visualization.table0.selection","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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":"text","vibrateOnMobilDevices":"50","iconPosition":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/Log-Mic-2/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.0/Log-Mic-2/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.0/Log-Mic-2/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,"value":"Homematic","buttontext":" Homematic ({v:logparser.0.filters.Homematic.jsonCount;v})","image":"alert-circle-outline","labelWidth":"0","colorPress":"{b:logparser.0.visualization.table0.selection;b==\"Homematic\" ? \"#ffd71a\" : \"#8f8f8f\"}","class":"leftBarBtn","name":"btnHomematic","autoLockAfter":"10","lockFilterGrayscale":"30"},"style":{"left":"26px","top":"279px","z-index":"50","width":"180px","height":"32px","background-color":"{b:logparser.0.visualization.table0.selection;b==\"Eingangstuerhuawei\" ? \"#4d4d4d\" : \"#2e2e2e\"}"},"widgetSet":"materialdesign"},{"tpl":"tplVis-materialdesign-Button-State","data":{"oid":"logparser.0.visualization.table0.selection","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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":"text","vibrateOnMobilDevices":"50","iconPosition":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/Log-Mic-2/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.0/Log-Mic-2/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.0/Log-Mic-2/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,"value":"Laura-Volume","buttontext":" Laura-Volume ({v:logparser.0.filters.Laura-Volume.jsonCount;v})","image":"alert-circle-outline","labelWidth":"","colorPress":"{b:logparser.0.visualization.table0.selection;b==\"Laura-Volume\" ? \"#ffd71a\" : \"#8f8f8f\"}","class":"leftBarBtn","name":"btnInfo","autoLockAfter":"10","lockFilterGrayscale":"30"},"style":{"left":"26px","top":"365px","z-index":"49","width":"180px","height":"32px","background-color":"{b:logparser.0.visualization.table0.selection;b==\"Info\" ? \"#4d4d4d\" : \"#2e2e2e\"}"},"widgetSet":"materialdesign"},{"tpl":"tplVis-materialdesign-Button-State","data":{"oid":"logparser.0.visualization.table0.selection","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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":"text","vibrateOnMobilDevices":"50","iconPosition":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/Log-Mic-2/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.0/Log-Mic-2/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.0/Log-Mic-2/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,"value":"Alexa","buttontext":" Alexa ({v:logparser.0.filters.Alexa.jsonCount;v})","image":"alert-circle-outline","labelWidth":"","colorPress":"{b:logparser.0.visualization.table0.selection;b==\"Alexa\" ? \"#ffd71a\" : \"#8f8f8f\"}","class":"leftBarBtn","name":"btnInfo","autoLockAfter":"10","lockFilterGrayscale":"30"},"style":{"left":"26px","top":"322px","z-index":"49","width":"180px","height":"32px","background-color":"{b:logparser.0.visualization.table0.selection;b==\"Info\" ? \"#4d4d4d\" : \"#2e2e2e\"}"},"widgetSet":"materialdesign"},{"tpl":"tplVis-materialdesign-Button-State","data":{"oid":"logparser.0.visualization.table0.selection","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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":"text","vibrateOnMobilDevices":"50","iconPosition":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/Log-Mic-2/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.0/Log-Mic-2/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.0/Log-Mic-2/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,"value":"Debug","buttontext":" Debug ({v:logparser.0.filters.Debug.jsonCount;v})","image":"alert-circle-outline","labelWidth":"","colorPress":"{b:logparser.0.visualization.table0.selection;b==\"Debug\" ? \"#ffd71a\" : \"#8f8f8f\"}","class":"leftBarBtn","name":"btnInfo","autoLockAfter":"10","lockFilterGrayscale":"30"},"style":{"left":"26px","top":"151px","z-index":"49","width":"180px","height":"32px","background-color":"{b:logparser.0.visualization.table0.selection;b==\"Info\" ? \"#4d4d4d\" : \"#2e2e2e\"}"},"widgetSet":"materialdesign"},{"tpl":"tplVis-materialdesign-Button-State","data":{"oid":"logparser.0.visualization.table0.selection","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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":"text","vibrateOnMobilDevices":"50","iconPosition":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/Log-Mic-2/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.0/Log-Mic-2/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.0/Log-Mic-2/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,"value":"Warn","buttontext":" Warn ({v:logparser.0.filters.Warn.jsonCount;v})","image":"alert-circle-outline","labelWidth":"0","colorPress":"{b:logparser.0.visualization.table0.selection;b==\"Warn\" ? \"#ffd71a\" : \"#8f8f8f\"}","class":"leftBarBtn","name":"btnWarn","autoLockAfter":"10","lockFilterGrayscale":"30"},"style":{"left":"26px","top":"194px","z-index":"50","width":"180px","height":"32px","background-color":"{b:logparser.0.visualization.table0.selection;b==\"Warn\" ? \"#4d4d4d\" : \"#2e2e2e\"}"},"widgetSet":"materialdesign"}]

[Bostil]

@Negalein Dein Widget sieht interessant aus. Interessehalber: Wie sieht die Programmierung dahinter aus? Kann mir auch gut vorstellen Infos kategorisiert auszugeben. Wäre wirklich mal interessant, wie du es gelöst hast

[sigi234]

@Bostil
@Negalein

Ich habe es kombiniert mit Button und Icon List Widgets.