Countdown Clock For Hotspot Visibilty

[Three65]

I have a client that would like to have a landing page that has a countdown clock for a building opening. Is it possible to be able to have a countdown clock that will display days\hours\second? And when the countdown clock reaches zero then a hotspot for the entrance door would appear? Been looking in the forums for a answer but have not come across anything yet. Any insight or help would be appreciated.

[3DV]

You could use JavaScript for the countdown timer like this: https://www.w3schools.com/howto/howto_js_countdown.asp
And edit the JavaScript function to send the 'distance' and the text string to Pano2VR custom variables with this: https://ggnome.com/doc/javascript-api/

For example:
In your skin add the following custom variables:
Name: countdown_reached Type: boolean Init Value: False
Name: countdown_text Type: text Init Value:

Set the text element in your skin to this content: $(*countdown_text) so it will display the countdown_text.
Create a hotspot skin ID for the hotspot that should appear, set Visible to false, and add a Logic Block (click the arrows icon left of 'Visible') with a trigger on the custom variable countdown_reached:
*countdown_reached = true with Visible set to True
You can also set a Logic Block on the 'Visible' property of the element showing the timer to make sure it's not visible any more when the time has been reached:
*countdown_reached = true with Visible set to False

Add the following JavaScript function in your index.html page:

Code: Select all

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time in milliseconds since 1/1/1970
  var now = new Date().getTime();
  // Find the distance between now and the count down date in milliseconds
  var timeleft = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Send the results to the custom variables in your Pano2VR skin
  var timetext = days + "d " + hours + "h "  + minutes + "m " + seconds + "s ";
  pano.setVariableValue('countdown_text', timetext)
  
  if (timeleft <= 0) {
    pano.setVariableValue('countdown_reached', true);
  }
}, 1000);
</script>

This will update your custom variable 'countdown_text' every second and will set 'countdown_reached' to true if there's no time left.
The Logic Block in your skin will check if countdown_reached = true and will show the hotspot if that's indeed true.

Note that this is just one approach to handle this, there are more ways to achieve the same result, for example by using JavaScript directly in a skin text element with the option 'evaluate'.
It could also be optimized by checking first if the time has been reached already so it doesn't use the setInterval function to run each second then.

[Three65]

Thanks for such a detailed reply 3DV I appreciate it, I wasn't aware that anyone had responded to this post until I was checking through my post today. I am guessing you could use this same approach to time gate a hotspot and sync it with server time so that a hot spot was only available at a certain time of day?

[Three65]

Does anyone know if it would be possible to add this Javascript into the Skin Editor as a External File and have it work?

[soulbrother]

....for example by using JavaScript directly in a skin text element with the option 'evaluate'.

Many, many thanks also from me, for your help, but:
Sadly I cannot get this to work, and I hope you can help, please see my screenshots for getting all details what I tried to do:

skin-counter-01.jpg (145.8 KiB) Viewed 35065 times

Any help is highly appreciated

[3DV]

The script example was to add the <script> into the index.html.
To use it in a Text element with 'Evaluate' you need to use something like below (untested), so without <script> but with 'javascript:'

Code: Select all

javascript:"";
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time in milliseconds since 1/1/1970
  var now = new Date().getTime();
  // Find the distance between now and the count down date in milliseconds
  var timeleft = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Send the results to the custom variables in your Pano2VR skin
  var timetext = days + "d " + hours + "h "  + minutes + "m " + seconds + "s ";
  pano.setVariableValue('countdown_text', timetext)
  
  if (timeleft <= 0) {
    pano.setVariableValue('countdown_reached', true);
  }
}, 1000);

[LProbert]

Also be careful of using local Date timers because there's nothing to stop the user setting their clock into the future. If this is low-risk then go for it, otherwise consider doing the logic for this in the cloud using a service.

You should also consider whether the time you want the user to enter the experience is GMT only? If so, you'll need to convert your dates to Universal Time. This is my countdown code taken from the original W3Schools example too:

Code: Select all

var now = new Date();
var nowTime = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());

Then you can calculate the distance between your target date/time as UTC and your local date/time converted to UTC.
Still better to use server time if your content is time sensitive.

[KMiddelkoop]

Hello Guys,

I would like to show an element in my skin when the counter hits zero. Therefor I need to link the string "countdown_reached" to the variable in my skin. For testing I'd like to link the countdown_text to my skin variable as well. I used the codes from above but I don't know where to start with linking.

I studied both the Javascript API page on ggnome.com and the webinar: Extending Pano2VR's Functionality with JavaScript via https://www.youtube.com/watch?v=N0cLKF7j5uU but think this is a bit beyond my knowledge of programming. I do know the skin editor a bit though, so I hope one of you guys can give me advise on how to proceed.

Thanks in advance for your help.

Kevin

[KMiddelkoop]

Is there anybody who can follow up on my question above?

Thank you in advance for the help.

Best,
Kevin

[KMiddelkoop]

Is there somebody here who can advise me on how to communicate between the skin and the JavaScripts as described above? Where or how should I link the string "countdown_reached" to the variable in my skin?

Thank you for your help.

Best, Kevin