Countdown Clock For Hotspot Visibilty
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.
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:
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.
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>
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.
Ruud van Reenen
3DV - Real estate artist impressions and animations
VR Tourviewer - Experience Pano2VR tours on Oculus Go, Quest, Rift, Pico and Cardboard VR headsets
3DV - Real estate artist impressions and animations
VR Tourviewer - Experience Pano2VR tours on Oculus Go, Quest, Rift, Pico and Cardboard VR headsets
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?
- soulbrother
- Posts: 547
- Joined: Tue Apr 08, 2008 7:01 pm
- Location: München
- Contact:
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:
Any help is highly appreciated
- Attachments
-
- skin-counter-02.jpg (76.67 KiB) Viewed 35680 times
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:'
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);
Ruud van Reenen
3DV - Real estate artist impressions and animations
VR Tourviewer - Experience Pano2VR tours on Oculus Go, Quest, Rift, Pico and Cardboard VR headsets
3DV - Real estate artist impressions and animations
VR Tourviewer - Experience Pano2VR tours on Oculus Go, Quest, Rift, Pico and Cardboard VR headsets
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:
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.
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());
Still better to use server time if your content is time sensitive.
-
- Posts: 38
- Joined: Thu May 30, 2019 1:47 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
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
-
- Posts: 38
- Joined: Thu May 30, 2019 1:47 pm
Is there anybody who can follow up on my question above?
Thank you in advance for the help.
Best,
Kevin
Thank you in advance for the help.
Best,
Kevin
-
- Posts: 38
- Joined: Thu May 30, 2019 1:47 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
Thank you for your help.
Best, Kevin