# Button on dashboard

**URL:** https://discourse.nodered.org/t/button-on-dashboard/62068
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [2 May 2022 14:07 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068 "2022-05-02T14:07:56Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [2 May 2022 14:07 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/1 "2022-05-02T14:07:56Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [2 May 2022 14:31 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/2 "2022-05-02T14:31:42Z")

</div>

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

```auto
[{"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

---

<div class="post-metadata">

### Author: ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [3 May 2022 11:01 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/3 "2022-05-03T11:01:40Z")

</div>

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 ""?

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [3 May 2022 11:41 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/4 "2022-05-03T11:41:15Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [3 May 2022 11:47 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/5 "2022-05-03T11:47:03Z")

</div>

Do you have an example of how to use it?

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [3 May 2022 12:17 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/6 "2022-05-03T12:17:22Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [3 May 2022 12:21 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/7 "2022-05-03T12:21:59Z")

</div>

Can i see your flow?

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [3 May 2022 12:42 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/8 "2022-05-03T12:42:39Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [3 May 2022 13:15 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/9 "2022-05-03T13:15:07Z")

</div>

There is a [thread demonstrating mousedown and mouseup](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/5) messages.

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

```auto
[{"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}]

```

---

<div class="post-metadata">

### Author: ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [3 May 2022 13:34 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/10 "2022-05-03T13:34:25Z")

</div>

Just put this code in the template?

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [3 May 2022 13:48 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/11 "2022-05-03T13:48:04Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [3 May 2022 16:08 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/12 "2022-05-03T16:08:24Z")

</div>

So why not change mouseup for mousedown?

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [17 May 2022 16:08 UTC](https://discourse.nodered.org/t/button-on-dashboard/62068/13 "2022-05-17T16:08:44Z")

</div>

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