Countdown Timer

Post Reply
User avatar
Posts: 11626
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Tue Aug 03, 2021 4:50 pm

We spotted someone asking about a countdown timer and thought it would make a good component.
To add to Pano2VR download the component and double click to add to Pano2VR.
You will be asked to select a category, the default is User Defined.
To add to a skin, open the components toolbox and double-click the component.
Once added to your skin the Skin Configuration button will be active.
Use this to set the target date and time

1.png (22.09 KiB) Viewed 450 times

Please note the format needed to make this work is Month Day, Year Hours:Minutes:Seconds entered in the format in the above example.

How to use, in the skin there is a true/false variable with the ID dateReached.
This is set to false until the timer reaches 0 then turns to true.

The variable can be used with Logic Blocks, Action Filters, and with a Variable Changed Action to trigger events such as Open Next Panorama, or play media, anything you can do with a variable.

The component is made up of a container with the ID _code_countdown.
This contains the code to make this work.
There is also a text box with the ID display_text_box.
This displays the count down.

The component also adds other text variables for the Day, Hours, Minutes, and Seconds.
These are text variables that are used to display the values in the display_text_box.
Displaying the countdown in this way means you can edit the way the countdown can be displayed.
(12.1 KiB) Downloaded 62 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
User avatar
Posts: 11626
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Thu Aug 05, 2021 1:13 pm

Starting with a new skin, add the component.
Then move the text box, display_text_box, up so when you add the next instance of the component the next text box does not cover it.

For testing add a text box, ID, Timer, and set logic blocks to change the background colour to red and the text colour to white when the variable dateReashed = true.

Using the Skin Configuration button set the Date and time for about a minute and test.
Tip, you only have to set the Hours or Hours and minutes, you do not have to set the seconds, but they are there if needed.

Once you have confirmed its all working open the skin editor and add the second instance of the Countdown Timer, you will see a popup asking if you should use the same variables or rename them, select Rename variable, it will ask this a few times, do this for each variable.

1.png (38.94 KiB) Viewed 231 times

Select the skin canvas and confirm you see a new set of variables but with _1 on the end.

2.png (96.25 KiB) Viewed 231 times

What you may also want to do at this point is edit the "Set target date and time" text so you know which setting is for which countdown timer.
Here using 1 and 2 are used.

In the skins tree, select the new elements and add _1 to the ends, again so you know which one belongs to which countdown timer.

3.png (32.84 KiB) Viewed 231 times

Select the text box with the ID display_text_box_1 and change the variables so it displays the correct variables with the _1,

4.png (24.71 KiB) Viewed 231 times

Now select the container with the ID _code_countdown_1 and select the Config Loaded action as the code needs to be edited.

5.png (221.31 KiB) Viewed 231 times

You need to add _1, to a few parts of the code.
The below screenshot shows the the edits in yellow.

6.png (284.7 KiB) Viewed 231 times

For testing copy the text box Timer and paste renaming it to Timer2
Then change the logic colour logic blocks to use trigger *dateReached_1.

7.png (26.48 KiB) Viewed 231 times

Save and close the skin, now select the Skin Configuration button and you will now see target dates 1 and 2.

Set them to countdown with say 30 seconds apart.
Note: you don't have to set the seconds in the first countdown timer but just add the 30 seconds to the second one.

8.png (28.38 KiB) Viewed 231 times

Then output, you will see the two textboxes with a 30 second difference.

9.png (38.5 KiB) Viewed 231 times

To add more countdown events just follow the above steps but use _2, then _3 and so on.
The project the screenshots were taken from is added to the bottom of this post and is fully functional, you just need to set the date and time.
(13.75 KiB) Downloaded 24 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
Posts: 34
Joined: Thu May 30, 2019 1:47 pm

Wed Sep 01, 2021 10:29 pm


Thank you very much. Was looking for something like this before, great how you follow up on this.

Keep it all up and going, best regards,
Post Reply