Need Help with Making a Countdown Timer Display

General
42

Here's a simpler method. Try adding 1 to the countdown seconds payload before calculation in the change node of my example:

$moment(
  $moment()
    .add($$.payload + 1, 'seconds')
    .diff($moment())
).utc().format('HH:mm:ss')

The result 23:59:59 is due to the trickery of using date times to format seconds to hours, minutes and seconds. On top of my head I don't understand why the difference calculation shows 00:00:00 when the difference is actually one second. It might work only intermittently though. Let me know how it works out.

43

Now, it is 00:00:01 when it is reset. It was weird. Sometimes, I was getting 23:59:59 when I reset, other times (rarely) it was 00:00:00.

44

Meh. I'm guessing it has something to do with my JSONata recreating the Moment object at multiple steps, so occasionally the second will change during the execution. I'll see if I could get it fixed later today (now busy).

45

Thanks a lot.

46

This was fun, just learned you can use variables in JSONata expressions.

The following code stores the current time to a variable $time. It's then reused twice in the expression. In the first case it's clone() function is called before adding the seconds from the payload as otherwise calling add() would mutate (= modify) the stored time. The result is then compared against the stored $time to get the difference.

The result of the difference calculation is wrapped with another instance of $moment just for formatting purposes.

(
  $time := $moment();
  $moment(
    $time.clone()
      .add($$.payload, 'seconds')
      .diff($time)
  ).utc().format('HH:mm:ss')
)

I didn't yet experiment it this could be simplified further but at least I didn't manage to get it to end in 00:00:01 or 23:59:59 anymore. :slightly_smiling_face:

1 Like
47

Thanks a lot!

48

@oncdastan, sorry for butting in - I've been trying to understand; How is that UI element (Default) generated/produced/made, and where does it become visible (in LoveLace or in NR?) ?
Can you point me to where I can read up on how to produce custom UI elements from NodeRED?
(Again - sorry for interrupting)

49

No problem. I am not sure I understood your question. If you are trying to ask how you can create UI groups, I can answer. I am a beginner too.

First, you need to install dashboard. Do you know how to do that, or have you done it already?

Then, any node that is related to dashboard (or any other visual), will have a part in their configuration, named "Group". You can click on the icon next to it. The pen icon.

From there, you can click on the pen icon again, next to the "Tab" part. You can name it in both of these steps. I usually name it as the same thing, For example, after clicking on the pen icon for the first time, I name it "x", and then again, I name it "x" after clicking the second pen icon.

When I am able to do what I want, I decide a place for it on the UI. Then, I can just drag and drop the thing I made to the group or tab I want to see it in. You can do this by clicking on the dashboard icon on the top right corner, on the right of the debug icon. From there, I open up everything as far as they go. This allows me to see clearly what belongs to which group or tab. Then, I drag the working thing I made to under the group or tab I want.

Let me know if you have any more questions.

50

Great! Thanks - but how can I make these "dasboard" UI elements (and their controls) visible in, and controllable from Home Assistant ?

51

You just do the things I have said. Then, go to http://127.0.0.1:1880/ui/

You can also reach there from a button, after you click on the dashboard button on the top right corner. It is the one with an arrow that looks like it is going out of a box. On the right side of the "Theme" tab. This is your UI.

Was this helpful? Still not sure if I am understanding your question correctly, or not.

52

These dashboard elements are not visible in Home Assistant.

Essentially the Lovelace UI provides its own display environment.

A lot of people use Home Assistant for device discovery and support and then use NR behind the scenes to provide rules processing engines and a solid scripting language (Javascript)

You can use a number of methods to exchange data and information flows between NR and HA - the easiest to use is MQTT - read up in the HA docs about MQTT and discovery etc

Craig

1 Like
53

I didn't know that "Home Assistant" was a different thing. I though it was just the project's name. Thanks.

54

Yes Home Assistant is the Home Automation system (and then there are various versions of it - depending on how you install it) - one of the add-ons they support is Node-Red - they do this through their ADD-ONs system - which is essentially a series of docker containers.

I personally do not run it this way - instead i have my NR resident on a seperate Virtual machine that i control and then use MQTT to pass information backwards and forwards

Craig

55

Apparently - I seem to have hijacked this thread - I apologize for that, but thank you so much for helping.
@craigcurtin, I understand that NR UI elements are not directly visible in HA. However, isn't it an objective to avoid having yet another GUI in order to do Home Automation ? We end up switching between a number of more-or-less intuitive web based UX in order to accomplish everyday Home Automation tasks. That's not productive. I managed to leave IKEA's app and crappy UI behind because I could easily accomplish the same directly from Home Assistant - and additionally build my own UI-elements and add my own automations, still using all IKEA's devices.
Now, I love NodeRED and it's visual node based UI, but once my flows are working, I no longer want to visit NodeRed again (until I need to build a new flow). Home Assistant is my main Home Automation UX, and I want my family members (and myself) to have everything visible and controllable from there.
Is that an odd requirement?
Or perhaps vice versa - I could ditch Home Assistant and just use NodeRed (?) I don't know enough about NR's capabilities yet, but my point is that the ultimate goal is to have as few GUIs as possible, preferable only one single portal for everything. At least from an end-user friendliness point of view.
Don't you agree? (or am I wrong?)

56

Yes you can do all the processing in Node-Red and just push all the results to HA for display.

I am currently half way there - i am using HA to discover all my tasmota devices and am then pushing their results that require processing and control logic into NR and doing the "heavy" lifting in there.

I still use the NR front end for some more flexibility and quicker prototyping as i am still coming to grips with HA (and i have been using it for a year !!)

Craig

57

Good news! Then I should piggy-back onto you as we seem to be equal (more or less) in terms of experience level. I've used HA (not Hass.io) running in docker for little over 2 years now, and I like it more and more. NR is still infancy for me - but I'm a quick learner. :upside_down_face:

58

OK well if you understand both of those that is good then

Think about NR as being a way to replace automations in HA - choose horses for courses - some of the automations in HA are easily done and intuitive - others are painful and convoluted - when you get to one of these you can then turn to your toolbox and use NR to do the scripting/processing in the background

Craig

59

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