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

1 Like

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?

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