Overview
This “Little Bits” tutorial show you how to add one or more Point Hotspots in a node that when activated by a mouse click, move the panorama to center on and zoom into the selected Point Hotspot. When the move has finished the button has an action that returns the view to the default view settings.
Note: this tutorial was built in Pano2VR V6.1.1. You can download the software here. As “Little Bits” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.
Final Output
Tutorial Files
In the tutorial folder, zoom-to-hotspot.zip, there is an Asset Folder with an equirectangular file ‘8x4-green-grid.jpg’. There is also a Project Folder with a Pano2VR project ‘zoom-to-hotspot.p2vr', a skin 'zoom-to-hotspot.ggsk' and an Output Folder called 'zoom-to-hotspot' with project files created from the .p2vr and .ggsk elements. (Figure #1)
Figure #1: Tutorial Files
Project Overview
In this tutorial we will modify the zoom-to-hotspot.p2vr project file and the zoom-to-hotspot.ggsk skin by;
Adding 2 Point Hotspots to the node panorama
Use a Hotspot Template Component to create the skin elements
Apply settings to add interaction to the Hotspot Template
Add a reset option for both desktop and mobile
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 ‘zoom-to-hotspot.p2vr’ (Figure #2)
Figure #2: Project window
3. Click on the ‘Open Output’ button in the Output/Output: section to open the published project (Figure #3)
Figure #3: Published project
Note: there are 3 text fields showing the current pan/tilt/fov of the panorama. These can be switched off using the ‘Edit Skin Configuration’ button in the Output/Skin section and are only used as a guide to the current view of the node.
Adding the Point Hotspots
1. With the Project window open, change the mode of the Viewer to Point Hotspot and double click twice in the viewer window to add 2 point hotspots. (Figure #4)
Figure #4: Point Hotspot mode and 2 Point Hotspots
2. Set the Point01 hotspot Pan and Tilt to -330,00 & 0.00 respectively
Note: you can do this by selecting and dragging the Point Hotspot or you can enter the values into the Properties - Point Hotspot panel/Pan: and Tilt: text fields..
3. With the hotspot still selected, set the following in the Properties - Point Hotspot panel:
Title: Hotspot 1 (Figure #5)
Figure #5: Properties - Point Hotspot settings for Hotspot 1
4. Repeat the steps above for the Point02 hotspot using Pan 335.00 and Tilt -14.00 and add the following setting;
Title: Hotspot 2 (Figure #6)
Figure #6: Properties - Point Hotspot settings for Hotspot 2
5. Save the Project
Edit the Skin
1. Click on the ‘Edit Skin’ button to open the Skin Editor
Note: for our skin elements we are going to use some graphics from existing skin components.
2. Open the Components Toolbox and from the Built-In category scroll down to the ‘Web Link Silhouette’ component (Figure #7)
Figure #7: Web Link Silhouette component
3. Double Click it to add it to the skin and then close the Components Toolbox window (Figure #8)
Figure #8: Component added to the skin
Note: Adding the component has automatically added new variables to the skin. Since we don’t need these variables, we will remove them with the following steps.
4. In the Properties/Variables, delete the vis_website and opt_url variables.
You can also delete the elements web_page, screentint_url and ht_url_Customimage (inside ht_url) from the Tree as we will not be using them either.
5. Move the close_url element into the ht_url hotspot and copy and paste the tt_hturl text box and move it back into the ht_url element. (Figure #9)
Figure #9: Cleaning up the tree
6. Select the hotspot ht_url element to make it active and change the ID from ht_url to ht_zooms,
7. Select one of the textbox elements to make it active and change the ID from tt_ht_url to tt_ht_url_close,
8. Align the close_url element with the ht_url_image element by selecting the ht_url_image and then command clicking the close_url . With both selected use the Menu/Edit/Align Elements options to align them. (Figure #10)
Figure #10: Changing ID’s
9. In the Properties/Variables panel create a new variable with the following attributes;
Name: vis_close
Type: True/False
Init Value: false (Figure #11)
Figure #11: Set Variable
Note: we will use this variable to change the Visible settings of certain elements once the zoom is initiated.
10. Save the Skin
Adding Interactions
Note: the next step is to add the interaction to the elements and we will start with ht_zooms.
1. Select the ht_zooms element to make it active. In the Properties panel change the following settings:
Appearance: Delete the Visible: Logic Block
Advanced: Click the checkbox to enable Permeable
Actions: Delete the 3 Actions (Figure #11)
Figure #11: ht_zooms updated
2. Select ht_url_image element to make it active. In the Properties panel change the following settings:
3. Appearance: Delete the Visible: Logic Block
4. Add the following Actions:
Source = Mouse Click | Action = View | Type = Move to View (note at this point select ‘Expert Mode’ | Values: $(hap)/$(hat)/30 | Speed = 5
Source = Mouse Click | Action = Set Variable Value | Variable Name: = vis_close | Operation = Set(=) | Value = true (Figure #12)
Figure #12: ht_url_image Actions
Note: by changing into Expert Mode and setting the value to the parameters $(hap)/$(hat)/30 we are loading the pan/tilt/fov dynamically.
5. Select tt_ht_url to make it active.
6. In the Properties/Position panel delete the Position: Logic Block
7. Open the Visible Logic Block and change the second Trigger to;
Trigger = Variable/*vis_close | Comparison = = | Value = false
Set Visible: = true (Figure #13)
Figure #13: Change Visible Block
8. Select tt_ht_url_close to make it active.
9. In the Properties/Position panel delete the Position: Logic Block
10. In the Properties/Appearance panel, open the Visible Logic Block. Change the second Trigger settings to:
Trigger = Placeholders/Hotspots/hotspot title:$(hs) | Comparison = = | Value = Hotspot 1 | And
Add a third Trigger;
Trigger = Variables/*vis_close | Comparison = = | Value = true |
Set the Visible: = true
11. Select the fields from the updated logic block, right click and select copy,
12. Click the green ‘+’ button to add a new logic block, right click and paste the copy into it.
13. Change the second trigger to;
Trigger = Placeholders/Hotspots/hotspot title:$(hs) | Comparison = = | Value = Hotspot 2 | And
Set the Visible: = true
14. Select ‘OK’ to save and close the Logic Block
15. In the Properties/Text panel change the text entry to ‘return to default view’ (Figure #14)
Note: this logic block reveals the text tooltip when 3 states are set. 1. when the mouse is over the hotspot, 2. the title determines which hotspot the text tooltip appears on and 3. the variable shows that the zoom has been initiated.
Figure #14: Change Visible Logic Block and Text field
16. Select close_url element to make it active.
17. In the Properties/Appearance panel, open the Visible Logic Block.
Add a new Trigger block by clicking on the green “+” button, delete the old. Enter the following to the new block;
Trigger = Mouse/Mouse Over Parent | Comparison = = | Value = true | (And) (added automatically)
Trigger = Placeholders/Hotspots/hotspot title: $(hs) | Comparison = = | Value = Hotspot 1 | (And)
Trigger = Variable/*vis_close | Comparison = = | Value = true |
Set Visible: = true
18. Select the fields from the first trigger block, right click and select copy,
19. Click the green ‘+’ button to add a new trigger block, right click and paste the copy into it.
20. Change the second trigger of the block to;
Trigger = hotspot title:$(hs) | Comparison = = | Value = Hotspot 2 | (And)
Set the Visible: = true
21. Select ‘OK’ to save and close the Logic Block (Figure #15)
Note: this logic block reveals the X close button when 3 states are set. 1. when the mouse is over the hotspot, 2. the title determines which hotspot the button appears on and 3. the variable shows that the zoom has been initiated.
Note: alternatively you can copy the tt_ht_url Visible Logic Block. Open the close_url Visible Logic Block and select ‘Paste’. Then simply delete the original block entry.
Figure #15: Change Visible Logic Block
22. With the close_url element still selected delete the existing Mouse Click action in the Properties/Actions panel.
23. Add the following two Actions;
Source = Mouse Click | Action = View | Type = Move to Default View | Speed = 5 | Easing Function: Ease Out
Source = Mouse Click | Action = Set Variable Value | Variable Name: = vis_close | Operation = Set(=) | Value = false (Figure #16)
Note: This returns the position of the panorama back to the default settings and the variable setting hides the close buttons and text tooltips.
Figure #16: Updated Actions Panel
Note: this finishes the basic tutorial and both hotspots now zoom in to the defined pan/tilt/fov parameters set and on mouse over provide a mouse click option to return to the default view.
24. Save and Close the skin
25. Republish the Project
Mobile Reset Option
Note: unfortunately the reset option will not work on mobile as there is no Mouse Over option. The following steps create an alternative reset for mobiles.
1. Copy the close_url and tt_ht_url_close elements and paste them into the tree.
2. With both elements selected click on the ‘Draw Container’ button and click once in the skin to enclose both elements within the container.
3. Change the ID of Container 1 to ‘mobile_close’
4. Set the anchor point of mobile_close element to center bottom and drag the mobile_close element to the bottom of the canvas. (Figure #17)
Figure #17: Creating a container element
5. Select the close_url element in mobile_close container to make it active.
6. In Properties/Appearance panel delete the Visible Logic Block and click the checkbox to set the Visibility to on
7. Select the tt_ht_url_close element in mobile_close container to make it active.
8. In Properties/Appearance panel delete the Visible Logic Block and click the checkbox to set the Visibility to on
9. Select the mobile_close container to make it active
10. In Properties/Appearance panel uncheck the Visible: checkbox and click on the Visible: Logic Block icon. Add two Triggers in the empty Trigger block;
Trigger = Player/Is Mobile | Comparison = = | Value = true | (And)
Trigger = Variable/*vis_close | Comparison = = | Value = true |
Set Visible: = true (Figure #18)
Figure #18: mobile_close container settings
11. Select close_url in the ht_zooms element to make it active.
12. Open the Visible Logic Block and add a fourth trigger to both Trigger blocks as follows;
Trigger = Player/Is Mobile | Comparison == | Value = false (Figure #19)
Figure #19: Detecting for mobile
13. Repeat step #12 with the tt_ht_url_close element in the ht_url hotspot
14. Save the Skin
15. Republish the Project
16. Now the mobile version will display the close button at the bottom of the page.
If you want to review my finished project you can download it here. The zip file includes assets, p2vr and ggsk files as well as the final output.
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.
