Button on dashboard

Guys, I'm creating a control project for a hydraulic crane, and I need to create a continuity button, but the node-red dashboard button only sends the pulse when you release it, but I need a button that is activated while I press it, and when i release it it turns off, does anyone know how to do this?

You could create a button in the ui-template node and use ng-mouseup to send when released.

[{"id":"5776047.bf874fc","type":"ui_template","z":"bf9e1e33.030598","group":"8b5cde76.edd58","name":"","order":8,"width":0,"height":0,"format":"<button ng-mouseup=\"send({payload: 1})\">send when release</button>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":340,"y":1380,"wires":[["b9132509.927ac"]]},{"id":"b9132509.927ac","type":"debug","z":"bf9e1e33.030598","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":680,"y":1440,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

you can use css to style it, etc

Thanks for your attention, but I need a button that activates when I press it, and not when I release it, oh and what do I do with your code? Just put it in the ui template? Or do I need to put something before it like a ""?

There is a node-red-contrib-button-events node which will generate pressed, released, clicked, double clicked etc messages from a dashboard button.

Do you have an example of how to use it?

Actually I think it only works to tell how long the button was held down for - after it's released.

There are mouse down (triggers the "ripple effect") and mouse up (reverts colour, sends message) events for the button. It must be possible to send a message at mouse down too. Unfortunately I don't know how, sorry

Can i see your flow?

Ah. I deleted it when I realised it didn't meet your requirement.

There is a thread demonstrating mousedown and mouseup messages.

And my test of it lighting up an led while the button is clicked:

[{"id":"011e42e065ce8abe","type":"ui_template","z":"b5d64c1e024cd3e1","group":"5f36819feb573bce","name":"","order":1,"width":"0","height":"0","format":"<div class=\"momentary\">\n    <md-button> Momentary Button</md-button>\n</div>\n\n<script>\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":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":320,"y":140,"wires":[["feffe07cd1f9b458"]]},{"id":"7fda98f6f1f98db6","type":"inject","z":"b5d64c1e024cd3e1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":140,"wires":[["011e42e065ce8abe"]]},{"id":"feffe07cd1f9b458","type":"ui_led","z":"b5d64c1e024cd3e1","order":1,"group":"5f36819feb573bce","width":"1","height":"1","label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"true","valueType":"bool"},{"color":"#008000","value":"false","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":470,"y":140,"wires":[]},{"id":"5f36819feb573bce","type":"ui_group","name":"Delta","tab":"dbf999e51b777958","order":8,"disp":true,"width":"6","collapse":false,"className":""},{"id":"dbf999e51b777958","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Just put this code in the template?

What I posted in the reply above is a complete flow. Import it via the hamburger menu at the top right of the editor screen.

So why not change mouseup for mousedown?