Press button state

What I am trying to do is :
Make a dashboard button that sends one when pressed and zero when released

I've tried the button in "node-red-dashboard" but it only sends a single payload when released

if any one knows a solution please help.
Thanks in advance!

Hello Ali ..

you could use the ui_template node and take advantage of javascripts mousedown and mouseup eventlisteners on the button.

Example Flow

[{"id":"81fc920712f2501c","type":"ui_template","z":"4895ea10b4ee9ead","group":"e68f0343d6bbfce5","name":"","order":0,"width":0,"height":0,"format":"<button id=\"myBtn\">Click Me</button>\n\n<script>\n(function(scope) {\n\nlet myBtn = document.getElementById('myBtn')\n\nmyBtn.addEventListener('mousedown', e => {\nscope.send({payload: 1})\n});\n\nmyBtn.addEventListener('mouseup', e => {\nscope.send({payload: 0})\n});\n\n})(scope);\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":650,"y":660,"wires":[["d53f0843a11651ea"]]},{"id":"d53f0843a11651ea","type":"debug","z":"4895ea10b4ee9ead","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":830,"y":660,"wires":[]},{"id":"e68f0343d6bbfce5","type":"ui_group","name":"Default","tab":"773981483ece4bf8","order":1,"disp":true,"width":"6","collapse":false},{"id":"773981483ece4bf8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
2 Likes

Thanks! That's what I was looking for :heart:.
I think I should start learning java :sweat_smile:.

Or if you want to be proficient in node-red, you could brush up on JavaScript (which node-red uses) :wink:

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.