# Momentary button on Dashboard

**URL:** https://discourse.nodered.org/t/momentary-button-on-dashboard/4906
**Category:** Dashboard
**Created:** [15 November 2018 17:02 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906 "2018-11-15T17:02:59Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![martinschki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martinschki/32/737_2.png) [@martinschki](https://discourse.nodered.org/u/martinschki)
#### Post date: [15 November 2018 17:02 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/1 "2018-11-15T17:02:59Z")

</div>

Hello,

I'm trying to create a momentary button on the dashboard.  
When I press it, payload should go "true", when I let go, "false"

this doesn't do the trick as it sends both after I release the button:

```auto
[{"id":"c07efd27.1cb3f8","type":"debug","z":"6880e39e.295cac","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":530,"y":500,"wires":[]},{"id":"d3589e5b.0c4448","type":"ui_template","z":"6880e39e.295cac","group":"c713dff5.21ab3","name":"Toggle Button","order":1,"width":"3","height":"2","format":"<md-button\n class=\"vibrate filled bigfont\"\n ng-style=\"{background: !msg.payload ? 'red' : 'green' }\"\n ng-mousedown=\"send({payload: true})\"\n ng-mouseup=\"send({payload: false})\"\n > \n Jalousie<br/>Auf\n </md-button>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":350,"y":500,"wires":[["c07efd27.1cb3f8"]]},{"id":"c713dff5.21ab3","type":"ui_group","z":"","name":"Arbeitszimmer","tab":"a2b4d00e.93a548","order":1,"disp":false,"width":"10","collapse":false},{"id":"a2b4d00e.93a548","type":"ui_tab","z":"","name":"Arbeitszimmer","icon":"book","order":1}]

```

any ideas?  
Thank you!

---

<div class="post-metadata">

### Author: ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)
#### Post date: [15 November 2018 17:38 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/2 "2018-11-15T17:38:22Z")

</div>

Hi!  
I tried your button and it works well for me, it doesn't output both on-release. Not sure why it would behave that way on your setup...

---

<div class="post-metadata">

### Author: ![martinschki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martinschki/32/737_2.png) [@martinschki](https://discourse.nodered.org/u/martinschki)
#### Post date: [15 November 2018 17:48 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/3 "2018-11-15T17:48:17Z")

</div>

you are right, its working on my mac with a mouse/trackpad, but not on my tablets  
I need it to work at my tablets, I forgot to mention that ...is there a different way of implementation?

---

<div class="post-metadata">

### Author: ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)
#### Post date: [15 November 2018 17:53 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/4 "2018-11-15T17:53:56Z")

</div>

Ah yes, for mobile, ng-touch, ng-touchstart and ng-touchend are not implemented, I believe there is no easy way for that unfortunately.

---

<div class="post-metadata">

### Author: ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)
#### Post date: [29 November 2018 17:59 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/5 "2018-11-29T17:59:47Z")

</div>

Try the following, it should work for both mobile and desktop:

```auto
<div class="momentary">
   <md-button> Momentary Button</md-button>
</div>

<script>

(function($scope) {
    
$('.momentary').on('touchstart mousedown', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": true});
});

$('.momentary').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": false});
});
    
})(scope);
</script>
```

---

<div class="post-metadata">

### Author: ![NoGRo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nogro/32/6387_2.png) [@NoGRo](https://discourse.nodered.org/u/NoGRo)
#### Post date: [28 February 2019 20:14 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/6 "2019-02-28T20:14:16Z")

</div>

i had some issue with multiple buttons in the same dashboard tab, so, i simplified the template

```auto
<script>
this.scope.on = {payload: 1};
this.scope.off = {payload: 0};
</script>
<md-button
   ng-touchstart="send(on)"
   ng-mousedown="send(on)"
   ng-touchend="send(off)"
   ng-mouseup="send(off)">
       Agua
</md-button>

```

---

<div class="post-metadata">

### Author: ![chuckf201](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chuckf201/32/91382_2.png) [@chuckf201](https://discourse.nodered.org/u/chuckf201)
#### Post date: [5 March 2019 14:53 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/7 "2019-03-05T14:53:27Z")

</div>

I used the delay widget and switch widget to create a momentary on/off switch. Works on a pc and android phone. My app is used to open/close a garage door via relay switch. Using the delay widget I can vary the length of time before switching.  
[{"id":"76600076.3fd63","type":"ui\_button","z":"d25a6ab2.08881","name":"Garage switch-1","group":"ca3c903e.e3b568","order":4,"width":0,"height":0,"passthru":false,"label":"Open/Close Switch","tooltip":"","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"num","topic":"","x":200,"y":540,"wires":[["3ff04a7f.846e06","6eaff12e.8bcb3"]],"outputLabels":["msg.payload"]},{"id":"9619bc56.877948","type":"debug","z":"d25a6ab2.08881","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":860,"y":500,"wires":[]},{"id":"654ba9e7.345c68","type":"rpi-gpio out","z":"d25a6ab2.08881","name":"G.Door Relay (Pin 16)","pin":"16","set":"","level":"0","freq":"","out":"out","x":950,"y":560,"wires":[],"inputLabels":["msg.payload"]},{"id":"3ff04a7f.846e06","type":"function","z":"d25a6ab2.08881","name":"Relay switch function","func":"/\* from python program\n{\n system("gpio -g mode 23 out"); //activates relay\n system("gpio -g write 23 0");\n sleep(2);\n system("gpio -g write 23 1");\n } \n\*/\n/_\nsetTimeout(function(){\n node.status({fill:"red", shape:"ring", text:" "});\n msg['payload'] = 'finished';\n node.send(msg);\n}, 3000);\nnode.status({fill:"blue", shape:"ring", text:' '});\n_/\n\n//msg.payload = 0; \nmsg.payload=msg.payload;\n\nsetTimeout(function(){\n node.status({fill:"red", text: msg.payload});\n},5000);\n//msg.payload = 0;\nreturn msg;\n","outputs":1,"noerr":0,"x":420,"y":560,"wires":[["9619bc56.877948","654ba9e7.345c68","737d9ad0.a963ec"]],"inputLabels":["msg.payload"],"outputLabels":["msg.payload"]},{"id":"6eaff12e.8bcb3","type":"debug","z":"d25a6ab2.08881","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":520,"y":500,"wires":[]},{"id":"2dfda18c.b9abee","type":"change","z":"d25a6ab2.08881","name":"Zero switch","rules":[{"t":"change","p":"payload","pt":"msg","from":"0","fromt":"num","to":"1","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":730,"y":620,"wires":[["e30c5002.8a6fe","654ba9e7.345c68"]]},{"id":"e30c5002.8a6fe","type":"debug","z":"d25a6ab2.08881","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":940,"y":620,"wires":[]},{"id":"737d9ad0.a963ec","type":"delay","z":"d25a6ab2.08881","name":"","pauseType":"delay","timeout":"20","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":560,"y":600,"wires":[["2dfda18c.b9abee"]]},{"id":"ca3c903e.e3b568","type":"ui\_group","z":"","name":"dht11","tab":"7df96487.6d8cac","disp":true,"width":"6","collapse":false},{"id":"7df96487.6d8cac","type":"ui\_tab","z":"","name":"DHT11","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

---

<div class="post-metadata">

### Author: ![Cardansan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cardansan/32/10082_2.png) [@Cardansan](https://discourse.nodered.org/u/Cardansan)
#### Post date: [12 July 2019 16:56 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/8 "2019-07-12T16:56:58Z")

</div>

Hi, I as well have had issues using multiple buttons in the same tab using the nice code @hugobox provided us. Sadly, I found @NoGRo's solution didn't work for me since I want the momentary buttons to work on mobile too, and neither `ng-touchstart` or `ng-touchend` seem to do anything, in my dashboard at least.

I don't know angular or html that much and even though I tried to modify Hugo's code I can't seem to solve the fact that one button works well, but as soon as I deploy more on the same tab, one `touchstart` on any of those sends out the payload in all of them, the same on `touchend` of course. Has anyone else found out the solution to this?

---

<div class="post-metadata">

### Author: ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)
#### Post date: [12 July 2019 17:24 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/9 "2019-07-12T17:24:08Z")

</div>

Hi @Cardansan, try renaming the css class and jquery class selector for each instance ("momentary1",momentary2", etc.) for example your 1st instance could be:

```auto
<div class="momentary1">
   <md-button> Momentary Button</md-button>
</div>

<script>

(function($scope) {
    
$('.momentary1').on('touchstart mousedown', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": true});
});

$('.momentary1').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": false});
});
    
})(scope);
</script>
```

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [12 July 2019 21:18 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/10 "2019-07-12T21:18:01Z")

</div>

Here is my effort.

You can configure the button's output by editing the `function` node.

And what the button looks like.

```auto
[{"id":"88254a00.5a9cf8","type":"inject","z":"df652827.d02c3","name":"Setup","topic":"","payload":"X","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"3","x":150,"y":540,"wires":[["2c05e41b.fe66e4"]]},{"id":"2c05e41b.fe66e4","type":"function","z":"df652827.d02c3","name":"With icon on press","func":"if (msg.payload == \"X\")\n{\n //\n //node.warn(\"X received\");\n msg.payload = \"Button pressed\";\n\n// msg.icon = '<i class=\"material-icons md-48\"> check_circle_outline style:\"color:black\"></i>';\n// msg.icon = '<i class=\"material-icons\"> check_circle_outline style:\"color:\"black\">';\n// msg.icon = '<i class=\"material-icons\"> check_circle_outline</i>'\n msg.icon = '<font color = \"white\"><i class=\"material-icons\"> check_circle_outline</i></font>'\n\n\n// msg = {icon: '<font color = \"black\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button pressed\"};\n}\nelse\n{\n msg.payload = \"Buttom released\";\n msg.icon = \"Ok\";\n// msg = {icon: '<font color = \"white\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button released\"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":380,"y":540,"wires":[["a9def673.de2e48","b3dde6.bea68218","30f0ad84.2c8752"]]},{"id":"a309a001.38ab5","type":"trigger","z":"df652827.d02c3","op1":"","op2":"Z","op1type":"nul","op2type":"str","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":340,"y":620,"wires":[["2c05e41b.fe66e4"]]},{"id":"a9def673.de2e48","type":"switch","z":"df652827.d02c3","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Button pressed","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":340,"y":580,"wires":[["a309a001.38ab5"]]},{"id":"b3dde6.bea68218","type":"ui_button","z":"df652827.d02c3","name":"Push Button","group":"373c4fb2.a22078","order":5,"width":"1","height":"1","passthru":false,"label":"{{msg.icon}}","tooltip":"","color":"black","bgcolor":"{{msg.colour}}","icon":"","payload":"X","payloadType":"str","topic":"","x":350,"y":500,"wires":[["2c05e41b.fe66e4"]]},{"id":"30f0ad84.2c8752","type":"debug","z":"df652827.d02c3","name":"Output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":550,"y":540,"wires":[]},{"id":"373c4fb2.a22078","type":"ui_group","name":"Group 1","tab":"bca4b6a6.5ee09","order":1,"disp":true,"width":6},{"id":"bca4b6a6.5ee09","type":"ui_tab","z":"","name":"Pushbutton","icon":"dashboard","order":44,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![Cardansan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cardansan/32/10082_2.png) [@Cardansan](https://discourse.nodered.org/u/Cardansan)
#### Post date: [15 July 2019 15:50 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/11 "2019-07-15T15:50:52Z")

</div>

> Hi @Cardansan, try renaming the css class and jquery class selector for each instance ("momentary1",momentary2", etc.) for example your 1st instance could be:

Sorry for the late reply, couldn't try it out during the weekend. However it works great! Multiple momentary buttons on mobile achieved. Thanks for the help. 🙂

---

<div class="post-metadata">

### Author: ![Branchy29](https://avatars.discourse-cdn.com/v4/letter/b/9d8465/32.png) [@Branchy29](https://discourse.nodered.org/u/Branchy29)
#### Post date: [24 July 2020 21:07 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/12 "2020-07-24T21:07:09Z")

</div>

Hi,

I'm trying to use a momentary push button control but I'm having issues as all the flows that I use via the dashboard are activating all together on the relay board.

I'm trying to add 8 momentary push commands to a 8 channel relay board but all seem to activate on the 1 command or 0

I need to activate each relay individually via the UI interface.

Thanks in advance

```auto
[{"id":"e45836a5.272ae8","type":"switch","z":"c4c7f80e.ac4cd8","name":"","property":"payload","propertyType":"env","rules":[{"t":"eq","v":"","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":370,"y":120,"wires":[["63047ad.4b16c84"],["63047ad.4b16c84"]]},{"id":"63047ad.4b16c84","type":"rpi-gpio out","z":"c4c7f80e.ac4cd8","name":"","pin":"40","set":"","level":"0","freq":"","out":"out","x":700,"y":140,"wires":[]},{"id":"9f7b9e7e.c2e73","type":"ui_template","z":"c4c7f80e.ac4cd8","group":"3baf3315.4b84bc","name":"","order":4,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":130,"y":200,"wires":[["e45836a5.272ae8"]]},{"id":"724cdd85.162564","type":"ui_template","z":"c4c7f80e.ac4cd8","group":"3baf3315.4b84bc","name":"G Car Call ","order":1,"width":11,"height":2,"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\":0});\n});\n\n$('.momentary').on('touchend mouseup', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"payload\":1});\n});\n \n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":120,"y":120,"wires":[["e45836a5.272ae8"]]},{"id":"3baf3315.4b84bc","type":"ui_group","z":"","name":"Welcome to the IoT online Portal","tab":"67be06b.76a2bf8","order":1,"disp":true,"width":11,"collapse":false,"info":"helloe dash board"},{"id":"67be06b.76a2bf8","type":"ui_tab","z":"","name":"Group A","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![DrdP](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DrdP](https://discourse.nodered.org/u/DrdP)
#### Post date: [17 June 2021 01:40 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/13 "2021-06-17T01:40:10Z")

</div>

This is my take on a momentary button with ajdustable latching.

```auto
[{"id":"57be3015.329b2","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"6db5213c.818eb","type":"ui_button","z":"57be3015.329b2","name":"O1 On","group":"f939857c.dafb1","order":10,"width":0,"height":0,"passthru":true,"label":"Reset1","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":110,"y":60,"wires":[["647c7b57.f2986c"]]},{"id":"647c7b57.f2986c","type":"trigger","z":"57be3015.329b2","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":340,"y":60,"wires":[["5691c189.486888","7df9bc07.eaf54c","afe4324b.f05098"],["5db49b94.87d194"]]},{"id":"5691c189.486888","type":"pccc out","z":"57be3015.329b2","endpoint":"32383bbb.254bc4","variable":"HMI Reset","name":"","x":620,"y":60,"wires":[]},{"id":"7df9bc07.eaf54c","type":"pccc out","z":"57be3015.329b2","endpoint":"32383bbb.254bc4","variable":"Output2","name":"","x":620,"y":100,"wires":[]},{"id":"5db49b94.87d194","type":"trigger","z":"57be3015.329b2","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"3","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":620,"y":140,"wires":[["d288f57b.4f7838","bd15d5cc.4cd068","c946dafa.cb9ff8"]]},{"id":"d288f57b.4f7838","type":"pccc out","z":"57be3015.329b2","endpoint":"32383bbb.254bc4","variable":"HMI Reset","name":"","x":780,"y":120,"wires":[]},{"id":"bd15d5cc.4cd068","type":"pccc out","z":"57be3015.329b2","endpoint":"32383bbb.254bc4","variable":"Output2","name":"","x":780,"y":160,"wires":[]},{"id":"afe4324b.f05098","type":"debug","z":"57be3015.329b2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":630,"y":20,"wires":[]},{"id":"c946dafa.cb9ff8","type":"debug","z":"57be3015.329b2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":790,"y":200,"wires":[]},{"id":"f939857c.dafb1","type":"ui_group","z":"","name":"Boyd Wilson Demo Pump","tab":"c454a31f.5cf1b8","order":3,"disp":true,"width":"6","collapse":false},{"id":"32383bbb.254bc4","type":"pccc endpoint","z":"","address":"192.168.001.151","port":"44818","userouting":false,"routing":"0x01,0x00,0x01,0x00","cycletime":"500","timeout":"6000","name":"","vartable":[{"addr":"N100:0/0","name":"Output1"},{"addr":"N101:0/0","name":"Input1"},{"addr":"N99:1/0","name":"Alarm1"},{"addr":"N99:1/1","name":"Alarm2"},{"addr":"N99:1/2","name":"Alarm3"},{"addr":"N99:1/3","name":"Alarm4"},{"addr":"N200:0/0","name":"Sewer 1 FTR"},{"addr":"N9:0/1","name":"N9:0/1"},{"addr":"N10:0/0","name":"HMI Reset"},{"addr":"N100:0/1","name":"Output2"}]},{"id":"c454a31f.5cf1b8","type":"ui_tab","z":"","name":"SD750 DRIVES","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![bobs409](https://avatars.discourse-cdn.com/v4/letter/b/ee59a6/32.png) [@bobs409](https://discourse.nodered.org/u/bobs409)
#### Post date: [2 January 2022 11:19 UTC](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/14 "2022-01-02T11:19:15Z")

</div>

Thank you!!!! You just saved my sanity! 3 days I'm trying to figure out why more than 1 momentary button would not work.