Hi
Here's a little example how to get more fanciness out of your buttons
[{"id":"b072ed3c.e56b4","type":"ui_button","z":"dcdf0ef7.c1e56","name":"on/off","group":"e905c597.18d9c8","order":0,"width":"0","height":"0","passthru":false,"label":"{{msg.topic}}","color":"","bgcolor":"{{msg.background}}","icon":"","payload":"","payloadType":"date","topic":"","x":910,"y":380,"wires":[["84f03fb5.3cfe3"]]},{"id":"84f03fb5.3cfe3","type":"function","z":"dcdf0ef7.c1e56","name":"buttonHandler","func":"var state = global.get(\"devicestate\");\nvar label;\nvar color;\n\nif(state.active === true){\n state.active = false;\n label = \"OFF\";\n color = \"red\";\n}\nelse{\n state.active = true;\n label = \"ON\";\n color = \"green\";\n}\nglobal.set(\"devicestate\", state);\n\n\nvar buttonstate = {enabled:false, background:color, topic:label};\n\nmsg.payload = \"whatever data needs to be sent to proccessing\"\n\nreturn [buttonstate,msg];","outputs":"2","noerr":0,"x":1070,"y":380,"wires":[["b072ed3c.e56b4"],["fded91c9.8089c"]],"inputLabels":["input"],"outputLabels":["to button","to proccessing"]},{"id":"fded91c9.8089c","type":"delay","z":"dcdf0ef7.c1e56","name":"waste time to fake proccesing","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":880,"y":600,"wires":[["689aec32.79fff4"]]},{"id":"180bb725.c111d9","type":"function","z":"dcdf0ef7.c1e56","name":"Init","func":"var devicestate = {active:true};\nglobal.set(\"devicestate\",devicestate);\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":360,"wires":[["689aec32.79fff4"]]},{"id":"53516ef3.dd82","type":"inject","z":"dcdf0ef7.c1e56","name":"Once","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":390,"y":360,"wires":[["180bb725.c111d9"]]},{"id":"689aec32.79fff4","type":"function","z":"dcdf0ef7.c1e56","name":"determineButtonState","func":"var state = global.get(\"devicestate\");\nvar label;\nvar color;\n\nif(state.active === true){\n label = \"ON\";\n color = \"green\";\n}\nelse{\n label = \"OFF\";\n color = \"red\";\n}\nmsg = {enabled:true, topic:label, background:color};\nreturn msg;","outputs":1,"noerr":0,"x":730,"y":420,"wires":[["b072ed3c.e56b4"]]},{"id":"e905c597.18d9c8","type":"ui_group","z":"","name":"BUTTON","tab":"209ff019.06775","order":2,"disp":true,"width":"6","collapse":false},{"id":"209ff019.06775","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
