Sample pretty buttons for node-red-dashboard
Given recent changed to Node-Red-Dashboard, and the ability to put in css and jquery - I've been playing with some somewhat more interesting buttons than the standard ones. This is a small collection to put on a page and try on your phone - you should get colour change when pressing buttons - and vibrate. The colours, vibration length and curves are all defined in the template with css and script in it - you simply add classes to the buttons in the templates as necessary - these pretty much replace the standard buttons. Enjoy and if you do a better job - let me know at https://tech.scargill.net or [email protected]
"Note that the node named "stuff" containing the CSS should be always placed at the bottom of your dashboard layout to be effective". My thanks to French maker Raphaël Ponthieu for helpful feedback.
[{"id":"aec489a4.36eb68","type":"ui_template","z":"f2bea110.916ef","group":"1c67a074.861f4","name":"blue","order":4,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#2980b9\" ng-click=\"send({payload: 'Hello World'})\"> \n Blue<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":270,"y":420,"wires":[[]]},{"id":"1de5d67a.85003a","type":"ui_template","z":"f2bea110.916ef","group":"1c67a074.861f4","name":"red","order":2,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#c0392b\" ng-click=\"send({payload: 'Hello World'})\"> \n Red<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":270,"y":340,"wires":[[]]},{"id":"7fca192a.7eb928","type":"ui_template","z":"f2bea110.916ef","group":"1c67a074.861f4","name":"green","order":3,"width":"2","height":"2","format":"\n<md-button class=\"filled touched bigfont rounded vibrate\" style=\"background-color:#27ae60\" ng-click=\"send({payload: 'Hello World'})\"> \n Green<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":270,"y":380,"wires":[[]]},{"id":"ae66bee7.3043c","type":"ui_template","z":"f2bea110.916ef","group":"1c67a074.861f4","name":"","order":5,"width":"2","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#16a085\" ng-click=\"send({payload: 'Hello World'})\"> \n Greenish<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":280,"y":500,"wires":[[]]},{"id":"af87b697.0da568","type":"ui_template","z":"f2bea110.916ef","group":"1c67a074.861f4","name":"","order":6,"width":"2","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#e67e22\" ng-click=\"send({payload: 'Hello World'})\"> \n Orange<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":280,"y":460,"wires":[[]]},{"id":"a90ed52e.a2d958","type":"ui_template","z":"f2bea110.916ef","group":"1c67a074.861f4","name":"on","order":7,"width":"1","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#34495e\" ng-click=\"send({payload: 'Hello World'})\"> \n On\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":270,"y":540,"wires":[[]]},{"id":"fbe42bd5.c4ac68","type":"ui_template","z":"f2bea110.916ef","group":"1c67a074.861f4","name":"off","order":8,"width":"1","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#8e44ad\" ng-click=\"send({payload: 'Hello World'})\"> \n Off\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":270,"y":580,"wires":[[]]},{"id":"22a5ea5e.7e2936","type":"ui_template","z":"f2bea110.916ef","group":"1c67a074.861f4","name":"css etc","order":0,"width":"0","height":"0","format":"<style>\n .filled { \n height: 100% !important;\n\n padding: 0 !important;\n margin: 0 !important;\n }\n .nr-dashboard-template {\n padding: 0;\n margin: 0;\n }\n \n .rounded {\n border-radius: 12px 12px 12px 12px;\n}\n \n .bigfont {\n font-size: 18px;\n}\n\n .smallfont {\n font-size: 12px;\n}\n \n</style>\n\n<script>\n$('.vibrate').on('click', function() {\n navigator.vibrate(100);\n});\n\nfunction restore_bg(x) {\n $(this).css(\"background-color\", x);\n };\n\n$('.touched').on('mousedown', function() {\n \n var x= $(this).css(\"background-color\");\n $(this).css(\"background-color\", \"yellow\");\n \n setTimeout(restore_bg.bind(this,x),100);\n navigator.vibrate(80);\n });\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"x":140,"y":340,"wires":[[]]},{"id":"1c67a074.861f4","type":"ui_group","z":"","name":"Default","tab":"8e4884bb.ff1388","disp":true,"width":"6"},{"id":"8e4884bb.ff1388","type":"ui_tab","z":"","name":"testing","icon":"dashboard"}]
