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.
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)
2. Open the Viewer Modes and select the Polygon Hotspot Mode (Figure #2)
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
4. In the Properties - Poly Hotspot panel set the following properties
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)
Description: Copy and paste the text from engine.html into this field (Figure #5)
5. Repeat steps 2-4 with the Tail section of the plane. Use tail.html for the Description content (Figure #6)
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
View Mode: Always Visible (Note: you can change this later)
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)
2. Select the 'Information Popup Silhouette' component from the Built-In component list (Figure #9)
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)
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.
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)
6. Select the Container1 element and paste the two actions into its Actions properties (Figure #14)
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
9. 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.
9. Click on ‘Draw Text Field’ and click once in the canvas to add a text field (Figure #16)
10. With the Text1 element selected set the following parameters; (Figure #18)
ID = tooltip
X: -40px Y: -40px
Anchor: Top Left
Height: 18 px
Logic Block: Trigger = *vis_info_popup | Comparison: = | Value = true | Visible = false (Figure #17)
Enabled: checked - Color: #ffffff
Alpha Channel: 125
Width: 1- Radius: 0
Alpha Channel: 225
Auto Size checked
Padding: Top/Bottom: 4 [Link Values checked]
Target = MoveX | Source = MouseX | Factor = 1.00 | Offset = 0.00
Target = MoveY | Source = MouseY | Factor = 1.00 | Offset = 0.00
11. Select Container1 to make it active and add the following two Actions; (Figures 19, 20, 21)
Source: Mouse Over
Type: Set Element Alpha
Source: Mouse Leave
Type: Set Element Alpha
Transition Time: 0,500s
12. Save and Close the Skin and Open the Output > Hotspot Dropdown menu and set the following properties;
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.
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 firstname.lastname@example.org