Polygon Hotspots & Information Popups

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 (Figure #10)

Figure #10: component added to the skin

4. Click on ‘Draw Container’ and click once in the canvas to add a container (Figure #12)

Figure #12: Container added to the skin

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

 

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)

 
Figure #16: Text Field added to skin

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)

  • Alpha: 0.000

Figure #17: tooltip visibility logic block

Figure #17: tooltip visibility logic block

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:

    • Auto Size checked

  • Padding: Top/Bottom: 4 [Link Values checked]

Modifiers

  • Target = MoveX | Source = MouseX | Factor = 1.00 | Offset = 0.00

  • Target = MoveY | Source = MouseY | 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

  • Transition Time: 0,500s

  • Target: tooltip

 
 
Figure #19: Mouse Enter

Figure #19: Mouse Enter

Figure #20. Mouse Leave

Figure #20. Mouse Leave

 
 
Figure #21: Mouse Enter, Mouse Leave Actions

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

Donate

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia