Overview

This “little bit's” tutorial show you how to create a timer that will automatically close any hotspot popup after a set period of time. In addition it also shows how to add a visual countdown to the close.

Note: this tutorial is designed for Pano2VR V6.0.5. You can download the software here. As “Little Bit” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.

Final Output

Tutorial Files

In the Tutorial Files folder, Auto-Close, there is an Asset Folder with an equirectangular file and an image file. There is also a Project folder with a Pano2VR project 'auto-close.p2vr', a skin 'auto-close.ggsk' and an Output Folder called 'Auto-Close' with project files created from the .p2vr and .ggsk elements. (Figure #1)

Project Overview

In this tutorial we will modify the Auto-Close.ggsk skin by;

Adding additional Actions to our Hotspot Template to activate our timer
Add an Action to the timer to set a variable that will close the Hotspot Popup
Add a ‘Visual Countdown’ showing how many seconds left to the Hotspot Popup closure

Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it

Getting Started

1. Download the zipped tutorial folder here

2. Open the project file ‘auto-close.p2vr’ (Figure #2)

Figure #2: auto-close Pano2VR project file

Note: the project contains a single Point Hotspot of the type: Image. The link target URL points to the plane.png image in the Assets folder. The Output folder is set to Auto-Close and the auto-close.ggsk skin is loaded.

3. Click on the ‘Edit Skin’ button to open the Skin Editor (Figure #3)

Note: the skin contains a Hotspot Template and Image Popup sourced from the Built-In Category in the Components Toolbox. It also contains 2 x timers with the ID’s; close-popup-timer and second-count-timer. Two Variables are defined; visimagepopup (automatically created by the addition of the component and used to set the visibility of the popup elements) and visimagetimer (used in the visual feedback of time left)

The Close Timer

1. Select the ‘close-popup-timer’ element to highlight it. With the element selected set the Properties/Timer attributes to Type: = Manual | Repeat: = One Time.

In the Properties/Actions add a new Action with the settings Source: = Deactivate | Action: = Set Variable Value | Variable Name: = vis_image_popup | Operation: = Set(=) | Value: = false (Figure #4)

Note: by setting the Timer properties to ‘Manual’ we can activate the timer when the Hotspot is clicked. The Action, ‘Deactivate’ means when the timer is finished the Variable vis_image_popup is set to false which in turn closes the popup.

2. Select the ‘ht_image’ element to highlight it. In the Properties/Actions add a new Action with the settings Source: = Mouse Click | Action: = Set Value | Value: = 15 | Target: = close-popup-timer (Figure #5)

3. Close and Save the skin. Click on the ‘Generate Output’ button to see the changes. (See output below)

Note: when the hotspot is clicked, the Action, sets the time duration value in the close-popup-timer which sets the time until the hotspot popup closes.

Add a Visual Countdown

Note: the next step adds a visual countdown to show the remaining time left before the image popup closes. You may not want to show it in the final but it’s a handy option for testing.

1. Click on the ‘Edit Skin’ button to open the Skin Editor if it’s not already open.

2. Select the ‘Draw text field’ from the menu and click once in the Canvas to add it to the tree. With the element selected set the Properties/Position attributes to ID: = second-countdown | Anchor = Center | Position X: & Y: = 0| Size: Width: = 200 pixels & Size: Height = 50 pixels.

In the Properties/Appearance set the attributes to Visible: = checked. Create a Logic Block for Visible: and set the following; Trigger: = *vis_image_timer | Comparison = <= | Value: = 0 | Visible: = false. Set the Alpha: = 0.500 (Figure #6, 6a)

Figure #6: Setting attributes for the Draw text field

3. In the Properties/Rectangle uncheck Background: Enabled: and set the Border: Width: to 0 (Figure #7)

4. In the Properties/Text add the following to the Text: field, ‘$(*vis_image_timer) seconds remaining’ (without quotes) (Figure #8)

Note: the placeholder ‘$(*vis_image_timer)’ will insert the current number into the text string.

5. To style the text, in the Properties/Advanced add the following to the CSS Styles Inner Element: , ‘color:white;font-size:16px; text-align: center; font-family: Arial, Helvetica, sans-serif;’ (without quotes) (Figure #9)

Figure #9: Advanced - CSS Styles Inner Element entry

5. Select the ‘ht_image’ element to highlight it. In the Properties/Actions add two new Actions with the settings below;

a. Source: = Mouse Click | Action: = Set Variable Value | Variable Name: = vis_image_timer | Operation: = Set(=) | Value: = 15

b. Source: = Mouse Click | Action: = Set Value | Value: = 0.5 | Target: = second-count-timer (Figure #10)

Note: action (a.) sets the variable, vis_image_timer, to the number of seconds until the popup closes. Action (b.) sets the deactivate time of the second-count-timer to .5 sec
Note: if you want to extend the time change both Set Variable Values to the same amount

5. Select the ‘second-count-timer’ element to highlight it. With the element selected set the Properties/Timer attributes to Type: = Manual | Repeat: = Toggle.

In the Properties/Actions add a new Actions with the settings below;

Source: = Deactivate | Action: = Set Variable Value | Variable Name: = vis_image_timer | Operation: = Sub(-) | Value: = 1 (Figure #11)

Figure #11: second-count-timer Properties settings

Note: everytime the second-count-timer deactivates the action removes 1 from the current value of the variable visimagestimer. At 0 the second-countdown element visible logic block sets the elements value to false.

6. Save the skin. Click on the ‘Generate Output’ button to see the changes. (See output below)

Note: the final step is to move the countdown under the image and change it’s alpha value.

7. Highlight the ‘second-countdown’ element and drag it down the tree until it is under the ‘popup_image’ element in the ‘image_popup’ container (Figure #12)

8. In the Properties/Position set the attribute Position: Y: = 170 pixels. In the Properties/Appearance set the attribute Alpha: to 0.500 (Figure #13)

6. Save the skin. Click on the ‘Generate Output’ button to see the final changes. (See output at the beginning of the tutorial)

Summary

I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.

I'd like to Donate

Back to "Little Bits" Homepage

Auto-Close Hotspot Popups