Countdown Clock For Hotspot Visibilty

Q&A about the latest versions
Post Reply
Three65
Posts: 8
Joined: Mon Jun 01, 2020 10:55 pm

Sat Jun 06, 2020 12:38 am

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.
User avatar
3DV
Posts: 91
Joined: Tue Dec 15, 2015 12:44 pm
Contact:

Tue Jun 09, 2020 9:18 am

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.
3DV - Real estate artist impressions and animations
VR Tourviewer - Experience Pano2VR tours on Oculus Go, Quest, Rift, Pico and Cardboard VR headsets
Three65
Posts: 8
Joined: Mon Jun 01, 2020 10:55 pm

Tue Jun 23, 2020 11:31 pm

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
Posts: 8
Joined: Mon Jun 01, 2020 10:55 pm

Thu Jun 25, 2020 11:58 pm

Does anyone know if it would be possible to add this Javascript into the Skin Editor as a External File and have it work?
User avatar
soulbrother
Posts: 434
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Fri Jul 03, 2020 2:54 pm

3DV wrote:
Tue Jun 09, 2020 9:18 am
....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
skin-counter-01.jpg (145.8 KiB) Viewed 658 times
Any help is highly appreciated
Attachments
skin-counter-02.jpg
skin-counter-02.jpg (76.67 KiB) Viewed 658 times
User avatar
3DV
Posts: 91
Joined: Tue Dec 15, 2015 12:44 pm
Contact:

Fri Jul 03, 2020 4:10 pm

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);
3DV - Real estate artist impressions and animations
VR Tourviewer - Experience Pano2VR tours on Oculus Go, Quest, Rift, Pico and Cardboard VR headsets
LProbert
Posts: 58
Joined: Thu May 21, 2020 11:53 am

Tue Jul 07, 2020 1:34 pm

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
Posts: 33
Joined: Thu May 30, 2019 1:47 pm

Sun Sep 06, 2020 12:16 pm

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
Posts: 33
Joined: Thu May 30, 2019 1:47 pm

Mon Sep 21, 2020 8:49 pm

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

Thank you in advance for the help.

Best,
Kevin
KMiddelkoop
Posts: 33
Joined: Thu May 30, 2019 1:47 pm

Sat Nov 21, 2020 10:24 pm

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
Post Reply