# Buttons, pressing and when to send messages

**URL:** <https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629>\
**Category:** General\
**Created:** [18 February 2022 23:38 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629 "2022-02-18T23:38:57Z")\
**Posts on this page:** 13\
**Page:** 2

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 February 2022 11:33 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/21 "2022-02-22T11:33:49Z")

</div>

> [@jbudd](#):
>
> ...defenestrated...

good word... not used nearly often enough... 🙂

---

<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:** [22 February 2022 11:46 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/22 "2022-02-22T11:46:41Z")

</div>

> [@jbudd](#):
>
> simple-logic-gate, a trigger node closes it again.
> 
> As for popups: I've lost count of the number of

Like that idea, but why a logic gate, you could use the msg.enabled to lock down the buttons.  
You could use ui-control, so when you land on dashboard page it auto enables for a time period then disables. After which you can press an enable button to re-enable the page for a time out period. That way when you want the dashboard page, when you first land, all works.  
e.g.

```auto
[{"id":"7f576a8f.e2aa9c","type":"ui_ui_control","z":"bf9e1e33.030598","name":"","events":"all","x":110,"y":760,"wires":[["86c4adf5.333f7"]]},{"id":"86c4adf5.333f7","type":"switch","z":"bf9e1e33.030598","name":"","property":"name","propertyType":"msg","rules":[{"t":"eq","v":"tab2","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":280,"y":760,"wires":[["1718b24a.75a436"]]},{"id":"1718b24a.75a436","type":"ui_button","z":"bf9e1e33.030598","name":"","group":"329fde9ce45e135e","order":1,"width":"3","height":"1","passthru":true,"label":"enable","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":120,"y":800,"wires":[["82520686.e37c6"]]},{"id":"82520686.e37c6","type":"trigger","z":"bf9e1e33.030598","name":"","op1":"true","op2":"false","op1type":"bool","op2type":"bool","duration":"10","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":160,"y":840,"wires":[["5267c4be.ea59d4"]]},{"id":"5267c4be.ea59d4","type":"change","z":"bf9e1e33.030598","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"enabled","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":150,"y":900,"wires":[["efa82ca.88da75","7e88566f.6168f8","fa3e9134.b9cc3","6d8fe703.5d9868"]]},{"id":"efa82ca.88da75","type":"ui_switch","z":"bf9e1e33.030598","name":"","label":"switch3","tooltip":"","group":"329fde9ce45e135e","order":4,"width":0,"height":0,"passthru":false,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":430,"y":960,"wires":[["315edfa6.413308"]]},{"id":"7e88566f.6168f8","type":"ui_switch","z":"bf9e1e33.030598","name":"","label":"switch4","tooltip":"","group":"329fde9ce45e135e","order":5,"width":0,"height":0,"passthru":false,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":450,"y":1020,"wires":[["315edfa6.413308"]]},{"id":"fa3e9134.b9cc3","type":"ui_button","z":"bf9e1e33.030598","name":"","group":"329fde9ce45e135e","order":2,"width":0,"height":0,"passthru":false,"label":"button1","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":400,"y":900,"wires":[["315edfa6.413308"]]},{"id":"6d8fe703.5d9868","type":"ui_button","z":"bf9e1e33.030598","name":"","group":"329fde9ce45e135e","order":3,"width":0,"height":0,"passthru":false,"label":"button2","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"2","payloadType":"str","topic":"topic","topicType":"msg","x":400,"y":860,"wires":[["315edfa6.413308"]]},{"id":"315edfa6.413308","type":"debug","z":"bf9e1e33.030598","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":610,"y":940,"wires":[]},{"id":"329fde9ce45e135e","type":"ui_group","name":"Group 1","tab":"8d72c2dc8ebb3926","order":1,"disp":true,"width":6},{"id":"8d72c2dc8ebb3926","type":"ui_tab","z":"c791cbc0.84f648","name":"tab2","icon":"dashboard"}]

```

---

<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:** [22 February 2022 19:39 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/23 "2022-02-22T19:39:29Z")

</div>

Except in Prauge.... 😉

---

<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:** [22 February 2022 19:44 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/24 "2022-02-22T19:44:34Z")

</div>

This is an example of me doing the _Enable button_ example

![Screenshot from 2022-02-23 06-37-16](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/37e272713e8aca4c62f8c8735e14677d90615140.png)

Ok, I haven't gone to the extend of _disabling_ the buttons. But while they are red, you can't press them.

And here are some examples where I have used the _disable_ function also.

 ![Screenshot from 2022-02-23 06-41-53](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1f4ef781687bb3c3bda4c3505a465611959ee4bf.png)

If they are not turned on (or plugged in) the button is blocked.

ARLEC-1 is plugged in and I can control it. Just now it is off.

But that this is slightly different to the original question.

So: I have tried different things.

I would like to invest time in getting ONE of these _nice_ so I can set it free to the world.

---

<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:** [22 February 2022 19:51 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/25 "2022-02-22T19:51:38Z")

</div>

The second part (and I have not thought of a third, but I'll get back to that)

Most of this has also gone to the second option.

You have to press the button twice to send A SPECIFIC message.

Originally I was wanting the message to toggle. ON/OFF - if you will.  
This is because I have needs where sending a single message doesn't quite _cut the mustard_. An alternating message is what was needed.

The _third_ idea which recently came to mind is not so much a _guard_ button/feature, but a _You have to hold the button pressed for a certain time_.

This is common IRL so you can't just brush past and bump a button.  
You have to deliberately PRESS (and hold) the button for a few seconds to kind of confirm you want it to be pressed.  
That is easy to get done with a couple of resistors and a capacitor.  
(But anyway)

So why did it take 24 posts before we got to actually talking about how to do what I was wanting to do originally?

---

<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:** [22 February 2022 21:47 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/26 "2022-02-22T21:47:45Z")

</div>

This is another flow which is a _Press LONG to activate_ button.

Bit of CSS.  
Edit the `trigger` node to set how long the button has to be pressed.

```auto
[{"id":"6f98195d1579e571","type":"ui_template","z":"1283f6a97005461c","group":"574552148f91ef06","name":"Press button","order":1,"width":1,"height":1,"format":"<div id=\"VolUp2\">\n <md-button class=\"md-button TV-AUDIO\" aria-label=\"VolUp\">\n <span class=\"fa fa-hand-pointer-o fa-2x\"> </span>\n </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n \n$('#VolUp2').on('touchstart mousedown', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"button\",\"payload\": \"Down\"});\n});\n\n$('#VolUp2').on('touchend mouseup', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"button\",\"payload\": \"Up\"});\n});\n \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":910,"y":510,"wires":[["32d1e63e2ec71d3a"]],"info":"<span class=\"fa-stack fa-lg\">\n <i class=\"fa fa-camera fa-stack-1x\"></i>\n <i class=\"fa fa-ban fa-stack-2x text-danger\"></i>\n</span>\nfa-ban on fa-camera\n"},{"id":"32d1e63e2ec71d3a","type":"switch","z":"1283f6a97005461c","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Down","vt":"str"},{"t":"eq","v":"Up","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":1070,"y":510,"wires":[["26cb0f27462f9cd6"],["81e962f5e7a852ce"]]},{"id":"26cb0f27462f9cd6","type":"trigger","z":"1283f6a97005461c","name":"","op1":"","op2":"ON","op1type":"nul","op2type":"str","duration":"2","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":1230,"y":490,"wires":[["a77168c5af53b7ed","ed397177cda95b5a"]]},{"id":"81e962f5e7a852ce","type":"change","z":"1283f6a97005461c","name":"Reset","rules":[{"t":"set","p":"reset","pt":"msg","to":"reset","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":" ","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1220,"y":530,"wires":[["26cb0f27462f9cd6","ed397177cda95b5a"]]},{"id":"a77168c5af53b7ed","type":"debug","z":"1283f6a97005461c","name":"Message to get things done","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1480,"y":530,"wires":[]},{"id":"ed397177cda95b5a","type":"ui_text","z":"1283f6a97005461c","group":"574552148f91ef06","order":1,"width":"3","height":"1","name":"","label":"Message","format":"{{msg.payload}}","layout":"row-spread","x":1420,"y":490,"wires":[]},{"id":"574552148f91ef06","type":"ui_group","name":"Long press","tab":"bb73106a674aef89","order":3,"disp":true,"width":"6","collapse":false},{"id":"bb73106a674aef89","type":"ui_tab","name":"Button press examples","icon":"dashboard","order":41,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)\
**Post date:** [22 February 2022 22:00 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/27 "2022-02-22T22:00:19Z")

</div>

`Trying_to_learn` Here is a simple function node to manage the double click for you (11 lines of code). Feed the button clicks to it as a standalone gate or add the code into your function node.

```auto
[{"id":"7e66b5252f600a3a","type":"function","z":"d867d702.3f5658","name":"Double Click Gate","func":"var dbl_click_time = 500, // ms - max time between clicks to be valid \n time = new Date().getTime();\nif (typeof(context.click1) === 'undefined' || time > context.click1 + dbl_click_time) context.click1 = 0;\nif (context.click1 === 0 ) { context.click1 = time; return; }\nelse {\n var click2 = time;\n var dbl_click = ((click2 - context.click1) < dbl_click_time) ? true : false; // 500 ms\n context.click1 = 0; \n }\nif (dbl_click) return msg\nelse return;","outputs":1,"noerr":0,"initialize":"// Code added here will be run once\n// whenever the node is started.\ncontext.test = \"Okay here\";\n","finalize":"","libs":[],"x":710,"y":445,"wires":[["68ca8fe4c5e85133"]]}]

```

---

<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:** [22 February 2022 22:16 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/28 "2022-02-22T22:16:28Z")

</div>

Thanks.

Reading the code....

```auto
var dbl_click_time = 500, // ms - max time between clicks to be valid 
    time = new Date().getTime();

```

Should like 2 also be a `var` line?

Ok, digging deeper...

```auto
var dbl_click_time = 500, // ms - max time between clicks to be valid 
    time = new Date().getTime();
if (typeof(context.click1) === 'undefined' || time > context.click1 + dbl_click_time) context.click1 = 0;
if (context.click1 === 0 ) { context.click1 = time; return; }

```

As I read it:  
Define `dbl_click_time` to `500`.  
(I'll skip line 2)  
if (context.click1 === `undefined` _or_ time \> context.click1 + dbl\_click\_time) set the context of click1 to `0`  
Then, line 4:  
if the context of `click1` is `0`, set the context `click1` to time.

Although it is already over my head with it - sort of - why not put all that on one line?  
Line 3 and 4.

Just asking.

---

<div class="post-metadata">

**Author:** ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)\
**Post date:** [22 February 2022 22:36 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/29 "2022-02-22T22:36:30Z")

</div>

> [@Trying\_to\_learn](#):
>
> Should like 2 also be a `var` line?

Not needed, the first line has a comma.

> [@Trying\_to\_learn](#):
>
> if the context of `click1` is `0` , set the context `click1` to time.

This sets the first click time for the next click evaluation.  
Try it. It'll work for you.

---

<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:** [22 February 2022 22:41 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/30 "2022-02-22T22:41:28Z")

</div>

Please don't get me wrong, I am just trying to wrap my block head around it.

I am also torn between writing _optimised_ code and writing each command on a separate line.

It is an interesting spin on what I was/am doing.  
I guess I got where I am/was because I was trying to use the _standard_ nodes to achieve what I wanted to do.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [23 February 2022 09:18 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/31 "2022-02-23T09:18:31Z")

</div>

> [@Trying\_to\_learn](#):
>
> I am also torn between writing _optimised_ code and writing each command on a separate line

`var a="a", b="b";`

is no more optimised than declaring the variables separately. Personally I prefer to declare them separately, I find it simpler and less error prone. Do whichever you find easiest to understand. Understanding is much, much, much more important than supposed optimisation.

---

<div class="post-metadata">

**Author:** ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)\
**Post date:** [23 February 2022 14:51 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/32 "2022-02-23T14:51:53Z")

</div>

I agree with `Colin`. Personally, my goal hasn't ever been to optimize. My first goal is for the code to simply achieve what I need it to do, and my second goal is to be able to look at it 6 months later and easily understand what it's doing and how. Perhaps my third goal is to be able to quickly identify "adjustable parameters" in the code (such as "dbl\_click\_time") for change, which is why I tend to declare them all in the first set of lines.

If optimize means minimal number of code lines, here's the same gate with only 6 lines of code, works exactly the same way but harder to get a handle on months down the road.

```auto
[{"id":"0eb51c6b779d60a7","type":"function","z":"d867d702.3f5658","name":"Double Click Gate2","func":"if (typeof(context.click1) === 'undefined' || new Date().getTime() > context.click1 + 500) context.click1 = 0;\nif (context.click1 === 0 ) { context.click1 = new Date().getTime(); return; }\nelse { var dbl_click = ((new Date().getTime() - context.click1) < 500) ? true : false; \n context.click1 = 0; }\nif (dbl_click) return msg\nelse return;","outputs":1,"noerr":0,"initialize":"// Code added here will be run once\n// whenever the node is started.\ncontext.test = \"Okay here\";\n","finalize":"","libs":[],"x":745,"y":330,"wires":[["68ca8fe4c5e85133"]]}]

```

---

<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:** [24 April 2022 14:52 UTC](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629/33 "2022-04-24T14:52:47Z")

</div>

Closed on 24 April 2022 14:52 UTC

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

[Previous page](https://discourse.nodered.org/t/buttons-pressing-and-when-to-send-messages/58629.md?page=1)