Pretty dashboard buttons with reset and timeout

These buttons are based on deceejay's "Examples of colour change button and switch".
I use them to sync the dashboard with a Tasmota smart socket which turns off after a preset time.

Edit - corrected CSS.
Untitled 3

[{"id":"4289f334.5d859c","type":"tab","label":"Buttons","disabled":false,"info":""},{"id":"45c50ce0.fb4214","type":"ui_button","z":"4289f334.5d859c","name":"Button 2","group":"a6e358b.672ffa8","order":4,"width":"2","height":"2","passthru":false,"label":"","tooltip":"","color":"{{foreground}}","bgcolor":"#eeeeee","icon":"fa-power-off","payload":"toggle","payloadType":"str","topic":"","topicType":"str","x":340,"y":320,"wires":[["6b8aab19.4127d4"]]},{"id":"6b8aab19.4127d4","type":"function","z":"4289f334.5d859c","name":"","func":"state = flow.get ('state2');\nif (msg.payload != state)\n{\n    if (state === \"ON\")\n    {\n        msg.payload = \"OFF\";\n        msg.foreground = \"#33ee00\";\n    }\n    else\n    {\n        msg.payload = \"ON\";\n        msg.foreground = \"#ff3300\";\n    }\n    flow.set('state2', msg.payload);\n    return msg;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":360,"wires":[["45c50ce0.fb4214","b0b3e878.c8b67","7d698d55.aec6ac","d9b56f1f.001f8"]]},{"id":"f8088574.aea0e8","type":"ui_template","z":"4289f334.5d859c","group":"a6e358b.672ffa8","name":"Button CSS","order":1,"width":0,"height":0,"format":"<style id=\"dashboard-style-override\">\n    /*icon size for buttons*/\n    .nr-dashboard-button .md-button i {\n        font-size: 60px;\n\t\ttext-shadow:\n\t\t-1px -1px 1px #444444,\n\t\t1px -1px 1px #444444,\n\t\t-1px 1px 1px #444444,\n\t\t1px 1px 1px #444444,\n\t\t0px 0px 10px #888888;\n    }\n    /* round button */\n    .nr-dashboard-button .md-button {\n        border-radius:50%;\n        border-style:solid;\n        border-width: 3px;\n        border-color: #888888;\n        left: 25px;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":90,"y":40,"wires":[[]]},{"id":"d9b56f1f.001f8","type":"trigger","z":"4289f334.5d859c","name":"Countdown OFF","op1":"","op2":"OFF","op1type":"nul","op2type":"str","duration":"10","extend":true,"overrideDelay":false,"units":"s","reset":"OFF","bytopic":"all","topic":"topic","outputs":1,"x":360,"y":400,"wires":[["6b8aab19.4127d4"]]},{"id":"20d45887.d8ef1","type":"ui_button","z":"4289f334.5d859c","name":"Button 1","group":"a6e358b.672ffa8","order":2,"width":"2","height":"2","passthru":false,"label":"","tooltip":"","color":"{{foreground}}","bgcolor":"#eeeeee","icon":"fa-power-off","payload":"toggle","payloadType":"str","topic":"","topicType":"str","x":340,"y":140,"wires":[["71a89ee8.73b698"]]},{"id":"71a89ee8.73b698","type":"function","z":"4289f334.5d859c","name":"","func":"state = flow.get ('state1');\nif (msg.payload != state)\n{\n    if (state === \"ON\")\n    {\n        msg.payload = \"OFF\";\n        msg.foreground = \"#33ee00\";\n    }\n    else\n    {\n        msg.payload = \"ON\";\n        msg.foreground = \"#ff3300\";\n    }\n    flow.set('state1', msg.payload);\n    return msg;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":180,"wires":[["20d45887.d8ef1","8068aff9.b487a8","9369f260.98719"]]},{"id":"96fdc3a4.947d4","type":"inject","z":"4289f334.5d859c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"ON","payloadType":"str","x":90,"y":180,"wires":[["71a89ee8.73b698"]]},{"id":"b0b3e878.c8b67","type":"debug","z":"4289f334.5d859c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":590,"y":320,"wires":[]},{"id":"7d698d55.aec6ac","type":"ui_text","z":"4289f334.5d859c","group":"a6e358b.672ffa8","order":5,"width":0,"height":0,"name":"","label":"Button 2 is","format":"{{msg.payload}}","layout":"row-left","x":590,"y":360,"wires":[]},{"id":"8068aff9.b487a8","type":"ui_text","z":"4289f334.5d859c","group":"a6e358b.672ffa8","order":3,"width":0,"height":0,"name":"","label":"Button 1 is","format":"{{msg.payload}}","layout":"row-left","x":590,"y":180,"wires":[]},{"id":"99cbcfa.f0ba3b","type":"comment","z":"4289f334.5d859c","name":"This button also turns itself off after 10 sec","info":"","x":440,"y":280,"wires":[]},{"id":"c02c90a1.20a798","type":"comment","z":"4289f334.5d859c","name":"This button can be turned off by a message eg Tasmota STAT msg","info":"","x":520,"y":100,"wires":[]},{"id":"44dc0c71.4bc574","type":"inject","z":"4289f334.5d859c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"OFF","payloadType":"str","x":90,"y":220,"wires":[["71a89ee8.73b698"]]},{"id":"6ccb23ab.929194","type":"comment","z":"4289f334.5d859c","name":"Override","info":"","x":80,"y":140,"wires":[]},{"id":"8de619e8.f0fbb8","type":"inject","z":"4289f334.5d859c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"ON","payloadType":"str","x":90,"y":320,"wires":[["6b8aab19.4127d4"]]},{"id":"3714b719.eaebf8","type":"inject","z":"4289f334.5d859c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"OFF","payloadType":"str","x":90,"y":360,"wires":[["6b8aab19.4127d4"]]},{"id":"9d483fda.0cf13","type":"comment","z":"4289f334.5d859c","name":"Override","info":"","x":80,"y":280,"wires":[]},{"id":"f5d1bb54.6606a","type":"inject","z":"4289f334.5d859c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"TOGGLE","payloadType":"str","x":100,"y":400,"wires":[["6b8aab19.4127d4"]]},{"id":"d71e4b71.e4b68","type":"comment","z":"4289f334.5d859c","name":"ANY payload but ON or OFF will toggle button","info":"","x":450,"y":220,"wires":[]},{"id":"8c4d9220.cf7ef8","type":"mqtt in","z":"4289f334.5d859c","name":"","topic":"stat/smartplug/POWER","qos":"2","datatype":"auto","broker":"4c682b3a.2ab5c4","nl":false,"rap":true,"rh":0,"x":120,"y":100,"wires":[["71a89ee8.73b698"]]},{"id":"9369f260.98719","type":"mqtt out","z":"4289f334.5d859c","name":"","topic":"cmnd/smartplug/power","qos":"","retain":"","respTopic":"","contentType":"","userProps":"","correl":"","expiry":"","broker":"4c682b3a.2ab5c4","x":620,"y":140,"wires":[]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"On/Off","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"3","collapse":false},{"id":"4c682b3a.2ab5c4","type":"mqtt-broker","name":"","broker":"127.0.0.1","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Tab","icon":"dashboard","order":1}]

11 Likes

Very nice!! I really like them!

thank you for share!!

Thank you for your share