Zooming Popup with Reveal Text Overlay - Part 1

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 beta 3

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 and 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)

 
 Figure #1: Tutorial Folder

Figure #1: Tutorial Folder

 

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)

Figure #4: Hotspot in position

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)

 

Figure #5: Hotspot Properties

 
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)

 

Figure #6: Tutorial Folder with saved project

 

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)

 
 Figure #8: Open Output Folder button

Figure #8: Open Output Folder button

 

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)

 
 Figure #9: Output folder settings

Figure #9: Output folder settings

 

4. Save the project

Step 3. Creating the Skin

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

 

Figure #10: Edit Skin button

 

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.
 

Figure #11: Setting the Canvas Size

 

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)

 

Figure #12: Component Toolbox button

 

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

 

Figure #13: Information Popup Silhouette Component 

 

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)

 

Figure #15: info_popup_close moved out of information container

 

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

 

Figure #16: Information container deleted

 

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

 

Figure #17: Tutorial folder with saved skin

 

Step 4: Building the Image Element

The image element consists of three elementsthe 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)

 

Figure #18: Draw External Image

 

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

Note: it is automatically named External 1
 

Figure #19: External Element in canvas

 

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)

Figure #20: Properties Position

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)

 

Figure #21: Properties Rectangle

Figure #22 Properties External Image

 
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.

 

Figure #24: Draw rectangle

 

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

Figure #25: Positon, Rectangle and center 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. Because the rectangle is centered it is offset from the image by 3 pixels in X and Y

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)

Figure #26: info_popup_c;lose settings

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)

 

Figure #28: Select Draw container

 

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

5. 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)

 

Figure #31: Skin added to project

 

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)

 

Figure #32: New includes folder in Hotspot_Zoom_Output

 

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

 

Figure #33: Generate Output

 
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

Note: If the white border is slightly misaligned, select the external_border element and in Properties > Position set the x & y by a pixel or two to align it to the external_image element

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.

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia