# How to make a "real time button"?

**URL:** <https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431>\
**Category:** General\
**Created:** [29 February 2020 22:40 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431 "2020-02-29T22:40:36Z")\
**Posts on this page:** 16\
**Page:** 1

<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:** [29 February 2020 22:40 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/1 "2020-02-29T22:40:36Z")

</div>

Is it possible?

What I am wanting to do is have a _button_ which if I click, sends a signal. But if I hold it, sends repeated signals (at a given frequency).

Can it be done?

My basic idea I was going to do was have an `inject` node creating the pulse train and it is _switched_ (enabled?) through a gate to the desired nodes.

There is a button and if I press the button the gate allows the pulses to pass. When I release the button the gate stops passing the stream.

But it won't/can't work like that.

The _best_ can think of is to press the button once to start the flow and a second time to stop the flow. Not really _life like_ for a press button.

Interested in feedback on how to do it.

I'm suspicious that it needs some CSS (or HTML) stuff done and when the button is pressed it sends one signal and when it is released it sends another.

But that is beyond my knowledge / skill set.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [1 March 2020 00:05 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/2 "2020-03-01T00:05:35Z")

</div>

The Trigger node can be configured to send a message repeatedly until it is reset by receiving another message. That would be my starting point for this.

Having an Inject node always firing would be quite wasteful.

---

<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:** [1 March 2020 00:08 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/3 "2020-03-01T00:08:18Z")

</div>

Yes, but the _trick_ for me is to get the two messages sent:  
one when the button is pressed and the second when it is released.

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [1 March 2020 01:24 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/4 "2020-03-01T01:24:43Z")

</div>

I think it is worth to try Angular directives. Something like:

```auto
<button ng-mousedown="send({payload: 'down'})" ng-mouseup="send({payload: 'up'})">button1</button>

```

---

<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:** [1 March 2020 01:27 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/5 "2020-03-01T01:27:54Z")

</div>

Thanks so much.

Now I shall have to work out where to put that code.

In a `template` node? (That is 100% a guess)

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [1 March 2020 01:30 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/6 "2020-03-01T01:30:05Z")

</div>

> [@Trying\_to\_learn](#):
>
> That is 100% a guess

Yep ! You guessed it right.

---

<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:** [1 March 2020 01:30 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/7 "2020-03-01T01:30:35Z")

</div>

(Gotta get lucky sometimes)

Thanks very much again.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [1 March 2020 06:44 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/8 "2020-03-01T06:44:23Z")

</div>

Nice to have in the library, maybe useful, who knows when

```auto
[{"id":"5ea18678.975138","type":"trigger","z":"d01d2553.fd9838","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"-1","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":800,"y":2290,"wires":[["61d84db7.6342f4"]]},{"id":"5c39bd09.702d84","type":"ui_template","z":"d01d2553.fd9838","group":"16fdc5e1.9ee0fa","name":"","order":7,"width":0,"height":0,"format":"<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\">button1</button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":330,"y":2360,"wires":[["e6fdaafd.8f97d8","dcfb5cce.0431a"]]},{"id":"e6fdaafd.8f97d8","type":"debug","z":"d01d2553.fd9838","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":560,"y":2500,"wires":[]},{"id":"dcfb5cce.0431a","type":"switch","z":"d01d2553.fd9838","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":540,"y":2360,"wires":[["5ea18678.975138"],["8cdd0a6b.40bcd8"]]},{"id":"61d84db7.6342f4","type":"debug","z":"d01d2553.fd9838","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1050,"y":2360,"wires":[]},{"id":"8cdd0a6b.40bcd8","type":"change","z":"d01d2553.fd9838","name":"","rules":[{"t":"set","p":"reset","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":710,"y":2420,"wires":[["5ea18678.975138"]]},{"id":"16fdc5e1.9ee0fa","type":"ui_group","z":"","name":"Buttons","tab":"8f57f520.e87078","order":2,"disp":false,"width":"6","collapse":false},{"id":"8f57f520.e87078","type":"ui_tab","z":"","name":"Some stuff","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/832c0d5c16a9145e3e81fbe6517727db07f44cbb.png)

---

<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:** [1 March 2020 06:49 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/9 "2020-03-01T06:49:46Z")

</div>

Thanks so much for the code.

Alas, in the mean time, I worked out this:

```auto
[{"id":"8d09f358.cc5c4","type":"ui_template","z":"1d85b106.5dfcd7","group":"2452ebe2.f30164","name":"Up","order":5,"width":"2","height":"1","format":"<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\"><i class=\"material-icons\"> volume_up </i></button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":140,"y":180,"wires":[["26653ac7.751afe"]]},{"id":"26653ac7.751afe","type":"trigger","z":"1d85b106.5dfcd7","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"-250","extend":false,"units":"ms","reset":"up","bytopic":"all","name":"Repeate","x":320,"y":180,"wires":[["2ccb538f.012b7c"]]},{"id":"2452ebe2.f30164","type":"ui_group","z":"","name":"Audio","tab":"39b306a2.96619a","order":1,"disp":true,"width":"5","collapse":false},{"id":"39b306a2.96619a","type":"ui_tab","z":"","name":"TV remote control","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

```

The `template` node to create a button and that goes into a `trigger` node.  
The `trigger` node is set so:

 ![Screenshot from 2020-03-01 17-46-43](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/c/9c37c7f25a5255704432c9474fbfe7335f4d48b6.png)

So when the button is pressed it gets a `down` payload. That starts the `trigger` node to spit out the message `1` and continues until I release the button and a `up` message is received.  
The `1` is nominal. Could be anything, as the node it goes into doesn't parse the payload value.

This way negates the need for the two other nodes you show.  
But thanks all the same.

It is good to see there are multiple ways of doing it, and that people are thinking of the solution/s.

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [1 March 2020 10:59 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/10 "2020-03-01T10:59:57Z")

</div>

Adding some CSS to the button would make it nicer.

```auto
[{"id":"860c90c5.d5f4e","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"1a094cd1.b6b9e3","type":"ui_template","z":"860c90c5.d5f4e","group":"10cf6690.edce69","name":"Up","order":5,"width":"2","height":"1","format":"\n<style>\n.button {\n background-color: #097479;\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n cursor: pointer;\n \n box-shadow: none !important;\n width: 100% !important;\n height: 100% !important;\n margin: 0px !important;\n min-width: 0px !important;\n min-height: 0px !important;\n white-space: nowrap;\n text-transform: uppercase;\n font-weight: 500;\n font-size: 14px;\n \n transition: background-color 0.1s;\n\n}\n\nbutton:hover {\n background-color: #0b8f95;\n}\n\nbutton:active {\n background-color: #ff0000;\n}\n\n</style>\n<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\"><i class=\"material-icons\"> volume_up </i></button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":330,"y":220,"wires":[["f02c1ed8.62ed7"]]},{"id":"f02c1ed8.62ed7","type":"trigger","z":"860c90c5.d5f4e","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"-1","extend":false,"units":"s","reset":"up","bytopic":"all","name":"Repeate","x":480,"y":220,"wires":[["a59de3c1.529e1"]]},{"id":"a59de3c1.529e1","type":"debug","z":"860c90c5.d5f4e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":630,"y":220,"wires":[]},{"id":"10cf6690.edce69","type":"ui_group","z":"","name":"Audio","tab":"f46d849e.3755b8","order":1,"disp":true,"width":"5","collapse":false},{"id":"f46d849e.3755b8","type":"ui_tab","z":"","name":"TV remote control","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

```

![ANIMATED-GIF](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3d1c9320277ce1a07d88d0592fd9003d361f5b55.gif)

---

<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:** [1 March 2020 21:58 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/11 "2020-03-01T21:58:20Z")

</div>

That is nice. But I wasn't smart enough to do it that way.

This is how I did it:

```auto
[{"id":"197104a5.3d7463","type":"ui_button","z":"1d85b106.5dfcd7","name":"MUTE","group":"2452ebe2.f30164","order":3,"width":1,"height":1,"passthru":false,"label":"{{msg.txt}}","tooltip":"","color":"{{msg.fontclr}}","bgcolor":"{{msg.colour}}","icon":"","payload":"X","payloadType":"str","topic":"","x":310,"y":340,"wires":[["ed304bba.7c574"]]},{"id":"ed304bba.7c574","type":"function","z":"1d85b106.5dfcd7","name":"Push Button","func":"var state = context.get(\"STATE\")||0;\n\n// Look for a !X message to get values.\nif (msg.payload != \"X\") //Do this if the message is NOT \"X\"\n{\n //\n //node.warn(\"Setting up\");\n // Background colours first.\n //\n context.set(\"ABGC\", msg.colourA);\n context.set(\"BBGC\", msg.colourB);\n //\n // Now do text.\n //\n context.set(\"Atxt\", msg.txtA);\n context.set(\"Btxt\", msg.txtB);\n //\n // Font colours.\n //\n context.set(\"AFC\",msg.txtclrA);\n context.set(\"BFC\",msg.txtclrB);\n //\n // Payloads.\n //\n context.set(\"PayloadA\", msg.payloadA);\n context.set(\"PayloadB\", msg.payloadB);\n //\n // Topic.\n //\n if (msg.topicSET !== null)\n {\n context.set(\"Topic\",msg.topicSET);\n } else\n {\n context.set(\"Topic\",\"~\");\n }\n msg.colour = msg.colourA;\n msg.fontclr = msg.txtclrA;\n msg.txt = msg.txtA;\n return msg;\n}\n// Now on to the real stuff.\nif (msg.payload == \"X\")\n{\n state = (state + 1)% 2;\n //node.warn(state);\n context.set(\"STATE\",state);\n}\nif (state === 0)\n{\n // Condition A\n msg.payload = context.get(\"PayloadA\");\n msg.colour = context.get(\"ABGC\");\n msg.txt = context.get(\"Atxt\");\n msg.fontclr = context.get(\"AFC\");\n} else\n{\n // Condition B\n msg.payload = context.get(\"PayloadB\");\n msg.colour = context.get(\"BBGC\");\n msg.txt = context.get(\"Btxt\");\n msg.fontclr = context.get(\"BFC\");\n}\nif (context.get(\"Topic\") == \"~\")\n{\n msg.topic = \"\";\n} else\n{\n msg.topic = context.get(\"Topic\");\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":330,"y":390,"wires":[["197104a5.3d7463","c6440709.9f329"]]},{"id":"867dfa6b.064688","type":"function","z":"1d85b106.5dfcd7","name":"Setup","func":"msg = {\n \"colourB\": \"red\",\n \"colourA\": \"green\",\n \"txtB\": '<i class=\"material-icons\">volume_off</i>',\n \"txtA\": '<i class=\"material-icons\">volume_up</i>',\n \"txtclrA\": \"black\",\n \"txtclrB\": \"black\",\n \"payloadA\": 0,\n \"payloadB\": 1,\n \"topicSET\": \"CONTROL\"\n}\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":300,"wires":[["ed304bba.7c574"]]},{"id":"f9834de.12c233","type":"inject","z":"1d85b106.5dfcd7","name":"Setup","topic":"","payload":"foo","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"1","x":160,"y":300,"wires":[["867dfa6b.064688"]]},{"id":"2452ebe2.f30164","type":"ui_group","z":"","name":"Audio","tab":"39b306a2.96619a","order":1,"disp":true,"width":"5","collapse":false},{"id":"39b306a2.96619a","type":"ui_tab","z":"","name":"TV remote control","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

```

---

<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:** [2 March 2020 03:06 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/12 "2020-03-02T03:06:12Z")

</div>

(Dumb question - but that's usual for me)

SORRY!

That is the volume ADJUST button.

ARGH!

Sincerely: I'm sorry.  
(Original reply left for honesty)

I'll look at it a bit more. Had a bad night's sleep and things going on.

So what is the "difference" to the code:

```auto
[{"id":"8d09f358.cc5c4","type":"ui_template","z":"1d85b106.5dfcd7","group":"2452ebe2.f30164","name":"Up","order":5,"width":"2","height":"1","format":"<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\"><i class=\"material-icons\"> volume_up </i></button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":140,"y":180,"wires":[["26653ac7.751afe"]]},{"id":"2452ebe2.f30164","type":"ui_group","z":"","name":"Audio","tab":"39b306a2.96619a","order":1,"disp":true,"width":"5","collapse":false},{"id":"39b306a2.96619a","type":"ui_tab","z":"","name":"TV remote control","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

```

~~Ok, it is nice. I've loaded the code. But the button doesn't \*hold the colour\* when muted. Nor does the icon change. So it doesn't reflect the state. I'll mess around with the code (or more likely make a mess of it) and see if I can work it out.~~

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [2 March 2020 15:09 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/13 "2020-03-02T15:09:03Z")

</div>

My rationale is that you button has a special behaviour (behavior) while pressed, so it would be a good thing to display a different background colour (color) while it is pressed. Note that I tried to simulate in the template node the style of a standard ui\_button. For that purpose I copied the css properties from the standard one (except the animation part).

---

<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:** [2 March 2020 20:52 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/14 "2020-03-02T20:52:38Z")

</div>

Ok, I get that.

But the original `template` code you posted seems to do that. Reply #4.

> [@Andrei](#):
>
> Note that I tried to simulate in the template node the style of a standard ui\_button. For that purpose I copied the css properties from the standard one (except the animation part).

Sorry. You lost me. As I said: the first post seemed to do that.

Oh, ok. (I need glasses) Ok. The button is a bit bigger / different "size/shape".  
That is because of the new lines - obviously.

I think this post is a bit redundant. But again just so we are both on the same page I'll leave it as is.

I actually don't think there is a question in here now.

---

<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:** [2 March 2020 21:20 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/15 "2020-03-02T21:20:35Z")

</div>

Ok, this may be something "of interest":

I mentioned button size/shape just then.

This is a screen refresh with nothing done yet:  
The first block has the original code you posted. The second has your newer code.  
Note sizes.

![Screenshot from 2020-03-03 08-14-03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/a/2acf663bfb805326464376be22dabe6fe8edb4ad.png)

Pressing a button I get this:

![Screenshot from 2020-03-03 08-14-08](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66e00e183e9b95fff445b636b33fec8f72487bd1.png)

Note the changed size.

Now the other two buttons - same:

![Screenshot from 2020-03-03 08-14-15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3ae572d4cdf35fa602105a7f83f1c2fa5fd702da.png)

![Screenshot from 2020-03-03 08-14-17](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/844613f47daa6579469be9190467fa4d0405c65c.png)

(Argh! Just tested with Chrome. Different happenings.)

Firefox seems to not _like_ that and changes the button sizes.  
Ok, this too was a kind of waste of time - for you.  
Sorry.

---

<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:** [1 May 2020 21:20 UTC](https://discourse.nodered.org/t/how-to-make-a-real-time-button/22431/16 "2020-05-01T21:20:40Z")

</div>

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