Hotspots and Zooming 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. One of the most effective options is to zoom up an image based on a mouse click. This option can highlight and provide information on specific areas of your panorama.

Project - Final Output

In the final output tour there is an 'info' button on a point of interest in the panorama. When the mouse is over the button a descriptive title is displayed and when the button is clicked, an image zooms up. Another mouse over the zoomed image reveals a text box that includes an external link.

Notes

Pano2VR is a very powerful application for developing panoramic tours with interactive 'skins'. In my experience I've found there is usually more than one way to achieve a required outcome. This tutorial reflects my personal approach to creating this particular effect but I'm sure there are other options as well and I welcome comments on alternative or simpler ways to accomplish the end effect.

In my workflow I try to build in support for future changes and in this tutorial I'll be using Pano2VR's ability to load an external image. Using the external loader to add images rather than embedding them in the skin lets the image be changed without having to republish the project.

To create the interactive text overlay, in the popup element, a number of layers are added to the popup and these require exact positioning to create the effect. To this end I'll be using a 'skin component' that is included in Pano2VR and modifying/deleting some of it's elements.

I've added notes throughout the tutorial to explain the rational behind the steps I'm taking.

regards,

Tony

Overview & Tutorial Files

This tutorial doesn't cover all of the ins and outs of Hotspots rather it shows, in detail, how a single point hotspot can provide the basis for a popup that can be zoomed in and out and be interacted with.

Note: this tutorial is designed for Pano2VR Version 6.0.6

In Part 1 of this tutorial we will;

Import an Equirectangular Image into Pano2VR
Add a Point Hotspots
Set the Output Type (HTML5)
Create a Skin
Build an Image Element using an External Image
Create an Image Container
Build a Test Output tour

In Part 2 we will;

Create Variables and Actions to manage the content within the Skin
Add a reveal text box with styled text
Output the Final Project
Replace elements without republishing the tour

You can use your own .html files or download the Tutorial Folder Zip.

The download contains a tutorial folder called 'Hotspot_Zoom' which in turn contains an 'Assets folder', a 'Project folder' and a 'Hotspot_Zoom_Output folder'. The assets folder contains my equirectangular image 'watering_hole.jpg' and the image 'external_image.jpg' a shot of two elephants fighting, that I want to load into the zoom window. (Figure #1)

Step 1. Import the Equirectangular image and set up the Point Hotspot

1. Open Pano2VR
2. Import your equirectangular image. In Viewing Parameters set the default view (Figure #2)

Figure #2: Panorama imported and Default view set

3. Open the Viewer Modes and select the Point Hotspot mode (Figure #3)

Figure #3: Viewer Mode and Point Hotspot

4. Double Click on the Equirectangular to position the Hotspot (Figure #4)

Note: Adding the point hotspot to the panorama automatically opens the Properties - Point Hotspot settings panel

5. In the Properties - Point Hotspot panel set the Type to 'Info', later in the tutorial we will be adding an 'info' component into the skin and add a Title, in this case 'Elephants Fighting'. (Figure #5)

Note: This title will be used as a tooltip when there is a 'mouseover' on the button

7. Save the project as 'Hotspot_Zoom', to the Project folder, in the Hotspot_Zoom tutorial folder (Figure #6)

Step 2. Setting the Output Type

1. Select HTML 5 as the Output Type (Figure #7)

Figure #7: Setting the Output type to HTML5

2. Click on the 'Open Output folder' button (Figure #8)

3. Navigate to the Tutorial folder, open the Output folder 'Hotspot_Zoom_Output' and select 'Open'. The location appears in the Output panel settings (Figure #9)

4. Save the project

Step 3. Creating the Skin

1. Open the Skin Editor by selecting the 'Edit Skin' button (Figure #10)

2. Set a Canvas size of 900 x 600 pixels (Figure #11)

Note: you can set whatever size you feel comfortable with. For this project 600 pixels high gives enough room to easily position the image elements.

The next step loads a pre-built popup skin component that contains images, actions and logic blocks. Rather than create the popup from scratch I'm going to use some of the elements in the component and delete the ones I don't want.

3. Click on the Component Toolbox button (Figure #12)

4. Select the 'Information Popup Silhouette' component from the Built-In component list (Figure #13)

5. Double click on the component to add it to the skin (Figure #14)

Figure #14: Information Popup Silhouette Component added to the skin

Note: The component adds a several elements to the Tree, the Canvas and also adds a Variable to the skin.
I'm not going to use all of the component elements but I do want to keep the 'X' info_popup_close button and it's actions, the screentint_info and it's actions and the ht_info and it's actions.
The ht_info actions are used to reveal the popup image while the info_popup_close button and screentint_info actions are used to hide the popup image.
Rather than try and reconfigure the component it's easier to make up a new information container and it's elements from scratch

Note: If you are using Pano2VR V5 you will need to manually add the variable. Name = vis_info_popup | Type = True/False | Init Value = false

6. Open up the information container and drag the 'info_popup_close' button out of the container (Figure #15)

7. Select the 'information' container, and it's elements, select 'Delete' on your keyboard to remove it (Figure #16)

8. Save the skin as 'Hotspot_Zoom', to the Project folder, in the Hotspot_Zoom tutorial folder. (Figure #17)

Step 4: Building the Image Element

The image element consists of three elements, the image, a white border and a close button. All 3 elements are then placed into a container so they will all scale at the same time in a uniform manner.

Note: The first step is to add the External Image element to the skin. I'm going to be using an External image element as it provides options for easy image replacement without rebuilding the project

a. Adding the External Image Element

1. From the Skin Editor menu icons click on Images > Draw External Image (Figure #18)

2. Click once into the skin too add the External Image element to the Canvas. (Figure #19)

Note: it is automatically named External 1

b. Applying settings to the External Image element

With External 1 selected adding the following settings to the Properties Panel will determine the size, look, content and actions of the element

1. Open Properties > Position and set the ID to external_image | set the Anchor to center and set the Size: to 500 x 500 pixels (Figure #20)

2. In Properties > Rectangle > uncheck Background: Enabled: and set Border: Width: to 0 (Figure #21)

3. In Properties > External Image > set External URL: to 'includes/external_image.jpg | set Loading: uncheck 'Unload content on hide' | set Content Scaling: to Fill > check Never enlarge > uncheck Clip content and set Alignment: to centre (Figure #22)

Note: 'includes' is a folder that we will create in the Hotspot_Zoom_Output folder and as we only have one image in this example we don't need to unload the image to conserve memory

The final step is to center the element on the screen

4. From the main Pano2VR menu select Edit > Center Element in Canvas > Horizontal and then Vertical (Figure #23)

Figure #23: Center Element in Canvas

c. Adding the Rectangle border element

The image will have a white border around the external_image element but rather than apply it using the external_image Properties: Rectangle settings I'm going to add it as a separate element so I can apply or reveal elements below it.

1. From the Skin Editor menu icons click on Basic: > Draw Rectangle (Figure #24) and click once into the skin to add the Rectangle Image element.

2. With the Rectangle Image element selected, open Properties > Position and set the ID: to external_border, set Anchor to center and set the Size: to 497 x 497 pixels

3. In Properties > Rectangle uncheck Background: Enabled: and set Border: Width: to 3 and Colour: to White

4. From the main Pano2VR menu select Edit > Center Element in Canvas > Horizontal and then Vertical

5. After centering change X: & Y: position to 1 & 1 (Figure #25)

Figure #25: Position and Rectangle settings applied

Note: A couple of things to note are the size and position of the rectangle. When you add a border to a rectangle the size of the border isn't included in the Size: Width and Height measurements. So reducing the size by the width of the border compensates for the difference. To perfectly align it to the element below it is offset, in the X & Y, by 1 pixel.

d. Position the Close Button

Note: At the top of the image will be a close button to provide a visual clue for users on how to close the popup.

1. In the Tree Panel, select info_popup_close and drag it up the tree to the top

2. Open Properties > Position and set the Anchor to center

3. In Properties > Appearance > Visible make sure the checkbox is checked

3. Drag the button until it's centered vertically on top of the white border

Note: If the border is hard to see you can temporarily change the colour (Figure #26)

4. From the main Pano2VR menu select Edit > Center Element in Canvas > Horizontal (Figure #27)

Figure #27: info_popup_close button centered

e. Add the image container

The final step is to include the 3 elements in a container called popup_image. This will allow us to maintain the physical relationship between all 3 elements regardless of the actions targeting the parent folder that will eventually hold the popup_image container.

1. Shift select all three elements (info_popup_close, external_border, external_image) and from the Skin Editor menu icons click on Basic: > Draw Container (Figure #28)

2. Click once in the skin to create the container
3. Open Properties > Position and set the ID: to popup_image and Anchor to center (Figure #29)

Figure #29: popup_image container with three elements

Note: Adding the container changes the position of the enclosed elements. Before continuing we need to rearrange them to the correct order.

4. In the tree, drag the external_border element up the tree and above the external_image element and then the info_popup_close above the external_border element. Make sure all elements stay within the popup_image container! (Figure #30)

Figure #30: Rearrange the elements within the new container

Note: adding the container shifts the elements slightly so we will reset the external border position.

5. Select the 'external_border’ element and change the Properties | Position | Position: X: & Y: to 0 & 10 respectively.

6. If you have changed the colour of the external_border change it back to white

6. Save the Skin

Step 5. Building a Test Output

1. Close the Skin Editor to add the skin to the project (Figure #31)

2.Create a new folder inside the Hotspot_Zoom_Output folder and name it 'includes' and drag a copy of the external_image.jpg into it (Figure #32)

3. In the Output panel click on Output: Generate Output button (Figure #33)

Note: This will generate all of the required files into the designated folder Hotspot_Zoom_Output and the project will open in the default browser (Figure #34)

Figure #34: Generated project preview

This is the end of Part 1 please continue with Part 2 where we will add in the settings and logic blocks to enable the zoom and add the reveal text box.

Donations

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

Zooming Popup with Reveal Text Overlay - Part 1