Momentary toggle button

This ui-template creates a momentary button that outputs true on mousedown/touchstart and false on mouseup/touchend

[{"id":"fa34fe67.be89c","type":"debug","z":"9f1175b5.c05ee8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":790,"y":560,"wires":[]},{"id":"4a193389.e055ac","type":"ui_template","z":"9f1175b5.c05ee8","group":"4ba5d415.d302ec","name":"Toggle Button","order":1,"width":"6","height":"1","format":"<style>\n.nr-dashboard-template {\n    padding: 0px;\n}\n</style>\n<div class=\"momentary\">\n   <md-button style=\"width:100%; height:48px; margin: 0px\"> Momentary Button</md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('.momentary').on('touchstart mousedown', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"payload\": true});\n});\n\n$('.momentary').on('touchend mouseup', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"payload\": false});\n});\n    \n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":610,"y":560,"wires":[["fa34fe67.be89c"]]},{"id":"4ba5d415.d302ec","type":"ui_group","z":"","name":"Control","tab":"47f0556b.db072c","disp":true,"width":"6","collapse":false},{"id":"47f0556b.db072c","type":"ui_tab","z":"","name":"ICM","icon":"dashboard"}]

Flow Info

Created 5 years, 10 months ago
Rating: 3.25 4

Owner

Actions

Rate:

Node Types

Core
  • debug (x1)
Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • momentary
  • toggle
  • button
  • ui-template
  • dashboard
  • mousedown
  • mouseup
  • touchstart
  • touchend
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option