Need Help with Making a Countdown Timer Display

Hi. I want to use a dropdown for users to select the time amount. Then, I want to display that on the UI, while it is counting down. I was thinking of after selecting a time amount from the menu, the user could press a button (or a switch, which looks better) to confirm that choice, and the timer would start to go down. I also think of using a buzzer to alert the user, when it is 00:00, and I think I can do this part alone. I need help with the rest.

Did you look at nodered-dashboard?
It has all the components you need to do this


Yes, I am using the dashboard. I don't know how to make this idea work. I tried to carry the payload until the "Time: ". I only see true or false there. It goes like this: Dropdown -> Switch -> Text. I also need to write a function somewhere to make it countdown and keep sending it to the Text. I don't know how to do that.

Im not 100% clear on your use case though, you can use template node in the dashboard to have a custom javascript to do the count down.

My use case goes like this:
1- User picks the time from the dropdown.
2- Clicks on the button to start the countdown. Countdown is being displayed on the UI. If the user picked the wrong one, or wanted to reset it, a second press on the same button (or switch) will do that.
3- When it reaches 00:00, alarm goes on (I can do this part).

I have no idea how to do 1 and 2. Also, never used a template node before, and never coded javascript. By the way, I don't need days, just hour and minute. The time amounts I put there are: 15, 30, 45, and 60 minutes. Could you please guide me on doing this?

Can you try out the flow with this node - and dashboard drop-down and button

I second @kushan-athukorala. I just did a quick test with the countdown contrib node and it could be a simple solution. The only issue left is to convert its output (seconds left in countdown) to a format you want to show on the dashboard. It would likely simplify things if you'd have the remaining time in just a label widget and not try to integrate the remaining time to the countdown time picker.

How can I make the switch carry over the payload of dropdown to the countdown node?

Also, second press is going to reset it. So, should I do something like this?

Use a change node to store the selected drop down value in flow context. and use another change node after the switch


I am using another "value" in the flow. Can't I use something else?

yes you can use any name :slight_smile:

Does this look okay?


What should I do on the switch's side? How should I configure the node? Also, any ideas what to write in that function? I have no idea if this is going to work like this. 2 inputs on the same dot. Also, I need help writing the function.

For "flow.time" to be correct, do I need to change anything in the dropdown?

In switch side, it is other way around.


Are these connections correct?

remove the connection between flow.time and function node.

Which side? Drop down, or the switch side?

dropdown side

Since I put minutes in the dropdown, I should multiply the value with 60, in order to give seconds to the countdown. How can I do that?

Use value and label fields in dropdown selectively.
label 1 value 60a and likewise

I did it like this:

What should I write to the function? Do I even need a function now?