# Press button state

**URL:** <https://discourse.nodered.org/t/press-button-state/50817>\
**Category:** Dashboard\
**Created:** [9 September 2021 13:55 UTC](https://discourse.nodered.org/t/press-button-state/50817 "2021-09-09T13:55:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![aemad608](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@aemad608](https://discourse.nodered.org/u/aemad608)\
**Post date:** [9 September 2021 13:55 UTC](https://discourse.nodered.org/t/press-button-state/50817/1 "2021-09-09T13:55:46Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [9 September 2021 18:50 UTC](https://discourse.nodered.org/t/press-button-state/50817/2 "2021-09-09T18:50:43Z")

</div>

Hello Ali ..

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

**Example Flow**

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

```

---

<div class="post-metadata">

**Author:** ![aemad608](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@aemad608](https://discourse.nodered.org/u/aemad608)\
**Post date:** [9 September 2021 21:15 UTC](https://discourse.nodered.org/t/press-button-state/50817/3 "2021-09-09T21:15:52Z")

</div>

Thanks! That's what I was looking for ❤.  
I think I should start learning java 😅.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 September 2021 21:19 UTC](https://discourse.nodered.org/t/press-button-state/50817/4 "2021-09-09T21:19:14Z")

</div>

> [@aemad608](#):
>
> I should start learning java

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

---

<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:** [23 September 2021 21:19 UTC](https://discourse.nodered.org/t/press-button-state/50817/5 "2021-09-23T21:19:33Z")

</div>

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