Using Point Hotspots to deliver contextual content is a great way to make your Virtual Reality tours more interactive and provide an enhanced experience for the viewer. However a point hotspot is as its name implies a ‘point’ and in some projects you may want to highlight and identify particular objects by their shape.
You can use Polygon Hotspots to define an area (rather than a single point) of interactivity. In the example below I’ve created polygon hotspots for the engine and tail of the old C35 - Skytrooper plane. When you mouseover the two areas in the panorama, the engine and the tail, they are highlighted and show a tooltip. Clicking on the hotspot opens an information window with content relevant to the selection.
Getting Started
This tutorial doesn't cover all of the ins and outs of Polygon Hotspots rather it shows how a single skin component can be used in conjunction with multiple polygon hotspots providing individual popup content for each polygon hotspot.
A basic understanding of Pano2VR is required to complete this tutorial.
Note: this tutorial is designed for Pano2VR Version 6
In this tutorial we will;
Create two Polygon Hotspots
Create a skin containing a information popup window
Use Actions to manage the content within the Template
Create a unique tooltip element
Output and test the Project
You can use your own .html files or download some include files here.
Note: click on any image in this page to enlarge it
Create the Polygon Hotspots
1. Open the Pano2VR project, polygon-infopopup.p2vr, from the supplied Tutorial Folder or create your own Pano2VR project using your own equirectangular image. (Figure #1)
Figure #1: Tutorial Asset Folder
2. Open the Viewer Modes and select the Polygon Hotspot Mode (Figure #2)
Figure #2: Polygon Hotspot Mode
3. Zoom in on the engine. Double click in the panorama to start the polygon hotspot and continue around the engine until you reach the starting point. Double click again to close and finish the polygon hotspot. (Figure #3)
Note: when you close it the Properties - Poly Hotspot panel appears
Figure #3: Finished engine polygon hotspot and properties panel
4. In the Properties - Poly Hotspot panel set the following properties
ID: pop01
Type: URL
Title: Engine - Click for more
Open the engine.html file in the Assets folder of the Tutorial Folder into a text editor. I use Textwrangler but you can use any text editor. (Figure #4)
Figure #4: engine.html opened in Text Wrangler
Description: Copy and paste the text from engine.html into this field (Figure #5)
Figure #5: Poly Hotspot properties for the engine
5. Repeat steps 2-4 with the Tail section of the plane. Use tail.html for the Description content (Figure #6)
Figure #6: Tail section poly hotspot and properties updated
Note: If this was a polygon opening a URL or Tour Node the next step would be to set the parameters of our Hotspot Textbox and appearance of our Polygon Hotspots.
Due to an issue of ‘sticky tooltips’ when using skin elements in conjunction with the polygon hotspot we need to develop skin elements to compensate for the issue.
You can see the problem in the example below, when you mouseover the polygon, configured using the Output > Hotspots > Hotspot Textbox settings, the tooltip is shown. However when you click on the polygon to open the info box the tooltip remains above it until you move the mouse.
Toward the end of the tutorial we will create a new tooltip in the Skin Editor that provides a work around for the issue.
6. For now Open the Output > Hotspot Dropdown menu and set the following properties; (Figure #7)
Hotspot Textbox = unchecked
Polygon Hotspot
View Mode: Always Visible (Note: you can change this later)
Figure #7: Global Hotspot Settings
7. Save the project and select Output: Generate Output to generate a project so we can review the work done to date. It should look similar to the example below. When you mouseover the engine and tail polygon hotspots the cursor changes to the hand icon but the textbox is not displayed.
Create the Skin
The next step is to add the elements to a skin that will respond to mouse clicks on the polygon hotspots and show the Description information.
1. Open the Skin Editor by selecting the ‘Edit Skin’ button in the Output panel and click on the Components Toolbox button (Figure #8)
Figure #8: Skin Editor and Components Toolbox button
2. Select the 'Information Popup Silhouette' component from the Built-In component list (Figure #9)
Figure #9: Select Information Popup Silhouette component
3. Double click on the component to add it to the skin and click on the ‘eye’ icon next to the screentint_info element to hide it. (Figure #10)
Figure #10: component added to the skin
4. Click on ‘Draw Container’ and click once in the canvas to add a container element (Figure #12)
Note: this element will be used as a Hotspot Proxy and apply actions to the polygons.
Figure #12: Container added to the skin
5. Click on the ht_info element to highlight it. In the Properties > Actions panel shift select the two actions Set Value - $(hd) and Set Variable Value - Set(=)/true, rt click and copy them (Figure #13)
Figure #13: copy actions
6. Select the Container1 element and paste the two actions into its Actions properties (Figure #14)
Figure #14: paste actions into the Container1 Actions
7. With Container1 still selected in the Properties > Advanced > Hotspot Proxy ID enter pop01 (Figure #15)
Note: this will associate a mouse click on a poly hotspot with the skin element and trigger the actions
Figure #15: set Hotspot Proxy ID
8. Select the ht_info element and delete it from the skin, save the skin, close the skin and re-output the project to see the popup information boxes in action as below
Note: the final step is to add the textbox for the tooltip when the mouse is over the polygon hotspot.
Textbox and Tooltip
Note: the final step is to add the textbox for the tooltip when the mouse is over the polygon hotspot.
9. Click on ‘Draw Text Field’ and click once in the canvas to add a text field (Figure #16)
Figure #16: Text Field added to skin
10. With the Text1 element selected set the following parameters; (Figure #18)
Position
ID = tooltip
Position: =
X: -40px Y: -40px
Anchor: Top Left
Size:
Width: 80px
Height: 18 px
Appearance
Visible:
Checked
Logic Block: Trigger = *vis_info_popup | Comparison: = | Value = true | Visible = false (Figure #17)
Figure #17: tooltip visibility logic block
Alpha:
0.000
Rectangle
Backround:
Enabled: checked - Color: #ffffff
Alpha Channel: 125
Border:
Width: 1- Radius: 0
Color: #bebebe
Alpha Channel: 225
Text
Text: $(hs)
Color: #000000
Align:
Center
Auto Size checked
Padding: Top/Bottom: 4 [Link Values checked]
Modifiers
Target = Move X | Source = Mouse X | Factor = 1.00 | Offset = 0.00
Target = Move Y | Source = Mouse Y | Factor = 1.00 | Offset = 0.00
Figure #18: Tooltip parameters
11. Select Container1 to make it active and add the following two Actions; (Figures 19, 20, 21)
Source: Mouse Over
Action: Alpha
Type: Set Element Alpha
Alpha: 1.00
Target: tooltip
Source: Mouse Leave
Action: Alpha
Type: Set Element Alpha
Alpha: 0.00
Target: tooltip
Figure #19: Mouse Enter
Figure #20. Mouse Leave
Figure #21: Mouse Enter, Mouse Leave Actions
12. Save and Close the Skin and Open the Output > Hotspot Dropdown menu and set the following properties;
Polygon Hotspot
View Mode: Show Current
13. Save the project and select Output: Generate Output to generate a new version of the project. Now when we mouse over the engine the polygon hotspot appears with a tooltip. Clicking on the polygon hotspot hides the tooltip and shows the information popup window.
Summary
This is only a simple tutorial to show how the polygon hotspot and a component can be connected via the Hotspot Proxy ID. Further refinements can be made to the styling of the text in the Document field, the representation of the poly hotspot in the panorama and the layout and style of the information popup box itself.
If you have any comments or suggestions please let me know at tony@tonyredhead.com
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.
