Countdown timer

Wappler General Need Help
1

I have a countdown timer that will always count doen between 6 am today and 6 am tomorrow. I am trying to follow alomg with this thread on DMXZone website, but not having any luck:

DMX Thread

is it better to do whole calc on backend and then send hours, minutes and seconds back or just format on front end.

To sum up I need hours, minutes and seconds from now to time I have in db.

Please help :slight_smile:

2

Hello, so following the topic you mention - what is not right?

3

my set value field with output from back-end is called end. So in front end I bind by entering this:

{{now.hoursUntil(end)}}

end is formatted like this to get to 6 am tomorrow {{bidenddate.dateAdd(“hours”, 6)}}

But I think maybe the fields needs formatting before adding hoursuntil?

4

Hey @Teodor - do you have any pointers for me please?

5

Please provide a link to your page where i can check this.

6

Only getting back to you now… but here is the page. It will shut down tomorrow at 6 but I will activate it again.

In room name section at top I have the hours, minutes, seconds till the next morning at 6 am.

https://askbob.co.za/bids.php?id=41

My code looks like this

{{serverconnect_bids.data.now.hoursUntil(serverconnect_bids.data.tomorrow).floor()}} / {{serverconnect_bids.data.now.minutesUntil(serverconnect_bids.data.tomorrow).floor()}} / {{serverconnect_bids.data.now.secondsUntil(serverconnect_bids.data.tomorrow).floor()}}

I just need it to count down on the page and show it.

7

But have you checked my reply in the topic you mentioned?
Your formatting is not what I described there:

1. Create a datetime component and set its interval to seconds:

2. Days would be: 
{{(var1.datetime.secondsUntil("2018-09-14") / 86400).floor()}}

3. Hours:
{{((var1.datetime.secondsUntil("2018-09-14") / 3600) % 24).floor()}}

4. Minutes
 {{((var1.datetime.secondsUntil("2018-09-14") / 60) % 60).floor()}}

Replace the date in my example with your dynamic data.

8

Thanks for the feedback. I changed as per your example. Only added seconds as well and excluded devide by 60 for it. Only thing now is that mine is not counting down on the screen… Its stays static.

    {{((serverconnect_bids.data.now.secondsUntil(serverconnect_bids.data.tomorrow) / 3600) % 24).floor()}} /
    {{((serverconnect_bids.data.now.secondsUntil(serverconnect_bids.data.tomorrow) / 60) % 60).floor()}} /
    {{(serverconnect_bids.data.now.secondsUntil(serverconnect_bids.data.tomorrow) % 60).floor()}}
9

Is your datetime component set to seconds?

10

To be honost I did not know this componant existed and had to be added :scream:

Did add it now:

But still not the countdown.

11

But you should assign its value as a value you compare to the database value. Just check my explanation in the dmxzone topic you said you followed. Check my code example as well.

12

Thanks Teodor. I understand the examples better now, except for the minutes, I need it to remain without decimals. Any pointers there: https://askbob.co.za/bids.php?id=41

48

13

Have you added .floor() to the minutes as per my example?

14

This is how my code looks now:

{{(var1.datetime.hoursUntil(serverconnect_bids.data.tomorrow)).floor()}} HOURS
{{((var1.datetime.secondsUntil(serverconnect_bids.data.tomorrow)) / 60) % 60).floor()}} MIN
{{(var1.datetime.secondsUntil(serverconnect_bids.data.tomorrow)) % 60).floor()}} SECONDS
15

In comparing the code that works and code that doesn’t work it appears you have an extra ‘(’ near the beginning of line two?

16

Thanks @brad, removed it, but still getting the minutes in real time decimals…

17

The minutes code is wrong and was wrong before also.
It should be:

{{(((var1.datetime.secondsUntil(serverconnect_bids.data.tomorrow)) / 60) % 60).floor()}}

Please be careful and always make sure the number of open brackets is the same as the number of close brackets :slight_smile:

18

Awesome! Thanks @Teodor!

19

Hi @Teodor - I’m implementing this. I’m using the following code:

{{var1.datetime.timeUntil(end_date, 'true')}}

This works great, but has an output of: hours, minutes and seconds e.g.:

240:51:52

If I try to format it, it fails and won’t render at all.

{{var1.datetime.timeUntil(end_date, 'true'.formatDate('dd-MM-yyyy HH:mm:ss'))}}

If I try using the structure of your code above e.g.

{{(((var1.datetime.timeUntil(end_date, 'true')) / 60) % 60).floor()}}

I just get NaN indicating I have something wrong here.

I have tried combining multiple formatters to get the desired output e.g.

{{(((var1.datetime.secondsUntil(end_date))/ 86400) % 60).floor()}}d {{(((var1.datetime.secondsUntil(end_date))/ 3600) % 24).floor()}}m {{(((var1.datetime.secondsUntil(end_date)) / 60) % 60).floor()}}s left

This works - but then the counter does not count down live for some reason.

This is the output I’d like to get:
22d 54m 45s left

Any help appreciated.

20

Well, most probably your datetime variable’s interval is not set to seconds