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 - this pretty much replace the standard buttons. Enjoy and if you do a better job - let me know at http://tech.scargill.net or [email protected]

[{"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    Blue<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    Red<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":"stuff","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":150,"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"}]
scargill

Flow Info

created 7 months, 3 weeks ago

Node Types

Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x8)

Tags

  • buttons
  • css
  • pretty_buttons
  • dashboard
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option