Hotspot Templates and iFrames

Hotspots and iFrames

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. The most convenient way to create and deliver the content is by employing .html files and iFrames within the hotspots. Rather than create and manage multiple hotspots this tutorial shows how to use a single point hotspot and external .html files.

Example

The example screen images below (figures 1, 2 &3), show the two 'info' buttons. As you mouseover the buttons individual titles are displayed and when the button is clicked on, two content popups provide different information about the panorama.

 Figure #1: The 2 Information Buttons

Figure #1: The 2 Information Buttons

 Figure #2: Information #1 popup

Figure #2: Information #1 popup

 Figure #3: Information #2 popup

Figure #3: Information #2 popup

Here is the final output:

Credits

The functionality that makes this tutorial possible was developed by a member of the Pano2VR Forum, mbb, in this post https://forum.ggnome.com/viewtopic.php?f=6&t=12858#p53677

Step 1. Getting Started

This tutorial doesn't cover all of the ins and outs of Hotspots rather it shows how a single hotspot template can be used to provide multiple links within a node showing different popup content for each link. 

A basic understanding of Pano2VR is required to complete this tutorial.

Note: this tutorial is designed for Pano2VR Version 6 beta 3

In this tutorial we will;

  • Import an equirectangular image into Pano2VR
  • Add two Hotspots
  • Create a skin containing a Hotspot Template
  • Add iFrame code to the Hotspot elements
  • Create Variables and Actions to manage the content within the Template
  • Add .html files to the project
  • Output the Project

You can use your own .html files or download some include files here.

Step 2. Import the Equirectangular image and set up the hotspots

1. Open Pano2VR, import your equirectangular image and set the default view (Figure #4)

 Figure #4: Default view for the Equirectangular

Figure #4: Default view for the Equirectangular

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

 Figure #5: Select Point Hotspot tool

Figure #5: Select Point Hotspot tool

3. Click on the Equirectangular to position the first Point Hotspot (Figure #6)

 Figure #6: Placing the first hotspot

Figure #6: Placing the first hotspot

4. With the Point Hotspot still active, in the Properties - Point Hotspot  window set the Type to 'Info', This will allow us to access a built in component in the skin. (Figure #7)

5.  Add a title, in this case 'The Artist, Velimir Stanic'. This will be used as a tooltip when there is a 'mouseover' on the button. (Figure #7)

6. Set the Link Target URL: to the name of your include '.html' file. In this example velimir.html is the name of my include file so I'll enter 'velimir' in the text field. (Figure #7)

Note; Pano2VR has an extensive list of placeholders. A placeholder is like a shortcut for using data or text from other sections of the software. For example, a text box in the skin may contain  $(hu) which will, in our case, display the text entered in the Link Target URL.
 
 Figure #7: Point Hotspot properties for the 1st Hotspot

Figure #7: Point Hotspot properties for the 1st Hotspot

7. Right Click on the panorama and select 'Copy Active Point Hotspot' from the popup menu (Figure #8)

 
 Figure #8: Copy Active Point Hotspot

Figure #8: Copy Active Point Hotspot

8. Right Click on the panorama and select 'Paste Point Hotspot' (Figure #9)

 Figure #9: Paste Point Hotspot

Figure #9: Paste Point Hotspot

8. Position the Hotspot on the panorama (Figure #10)

 Figure #10: Position the hotspot on the panorama

Figure #10: Position the hotspot on the panorama

9. With the second Point Hotspot still active, in the Properties - Point Hotspot  window change the title, in this case its 'The Watercolours' and set the Link Target URL: to the name of your include .html file. In this example watercolour.html is the name of my include file so I'll enter 'watercolour' in the text field (Figure #11)

 
 Figure #11: Point Hotspot settings for 2nd Hotspot

Figure #11: Point Hotspot settings for 2nd Hotspot

 

Step 3. Setting the Output Type

1. Select HTML 5 as the Output Type

2. Create an Output Folder. In this example I'm creating a folder called Hotspot-Template in the same folder as my project Assets. (Figure #12)

 Figure #12: Create the Output Folder

Figure #12: Create the Output Folder

7. Select 'Create' to define the output folder path (Figure #13)

 
 Figure #13: Output Settings

Figure #13: Output Settings

 

8. Save the Project. In this example I'm saving it into a new Project folder  in the same folder as my project Assets and calling it Velimir-Stanic-Hotspots.p2vr

Step 4. Creating the Skin

1. Open the project if it's not already open

2. Open the Skin Editor by selecting the 'Edit Skin' button

3. In this example I've set a Canvas size of 1,000 x 600 pixels (Figure #14)

 
 Figure #14: Canvas settings

Figure #14: Canvas settings

 

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

 
 Figure #15: Select component

Figure #15: Select component

 

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

 Figure #16: Component added to the skin

Figure #16: Component added to the skin

 

6. At this point we can save our skin. I'm going to call it Hotspot-Template and save it into a folder called Skin in the same folder as the Assets and Project

Step #5. Adding the Interaction

1. Open the skin if it's not already open

2. Add a new Variable, in this example I'm going to give it the name MyPageURL and the Type is 'Text' (Figure #17)

Note: this variable will be used to pass the text in 'Link Target URL' field to the iFrame code
 Figure #17: MyPageURL variable

Figure #17: MyPageURL variable

3. Click on the 'down' button next to the 'information' container in the Skin Tree to reveal the assets within the container

4. Highlight the text asset 'info_text_body'

5. Open the Text dropdown in the Properties panel

6. Enter the following text;
<iframe src="includes/$(*MyPageURL).html" width="100%" height="100%" frameborder= "0" scrolling="no"></iframe>

The text will appear in the info_text_body field in the skin

 Figure #18: iFrame text

Figure #18: iFrame text

7. Highlight the hotspot asset 'ht_info'

8. Open the Actions dropdown in the Properties panel

9. Modify the Mouse Click | Set Value | $(hd) | info_text_body to Mouse Click | Set Variable | Set(=)/$(hu) | MyPageUrl (Figure #19)

Note: when the hotspot is clicked this action will set the variable, MyPageURL,  to the text in  text in 'Link Target URL' field
 Figure #19:&nbsp;

Figure #19: 

10. Save the skin

Step 6. Testing the Interaction

1. Click on the 'Generate Output' button in the Output section of the Output panel to open the panorama in your default browser

2. Rolling over the hotspot buttons displays the individual tooltips text from the Point Hotspot Title Field

3. Clicking on a hotspot button will display the popup but only shows the entry from the Title field.

Note: Because we don't have the includes folder and velimir.html and watercolour.html files in the Project Output folder the iFrame can't load any content (Figure #19)
 Figure #19: Blank popup windows

Figure #19: Blank popup windows

5. Copy the sample 'includes folder' into the Hotspot-Template output folder

6. Refresh your browser window and try either of the hotspots again

7. This time content from the .html file is displayed in the popup (Figure #20)

 Figure #20: Working popup windows

Figure #20: Working popup windows

Note: once you have clicked on one hotspot and seen the content if you close the content popup the next time you click on a hotspot nothing is shown. This is because we need to reset the Variable 'MyPageURL' before we open another popup.

8. Open the Skin Editor if it's not already open

9. Highlight the info_popup_close button in the information container and, in the Actions dropdown, double click on the action Mouse Click | Set Value | info_text_body (Figure #21)

 Figure #21: Mouse Click action for the Close button

Figure #21: Mouse Click action for the Close button

10. In the Action Module, change the values to Mouse Click | Set Variable Value | MyPageUrl | Set(=) | 'don't add any value' and click OK  (Figure #22)

 
 Figure #22: Action Module

Figure #22: Action Module

 

10. Once the action has been modified, right click on the action and select 'Copy'

 
image 23 - copy.jpg
 

11. Highlight the screentint_info asset in the tree.

12. In the Actions dropdown delete the action Mouse Click | Set Value | info_text_body

13. Right click over the empty action field and select 'Paste' to add the new action (Figure #23)

 
 Figure #23: Paste in the action from info_popup_close

Figure #23: Paste in the action from info_popup_close

 

13. Save the Skin

14. Click on the 'Generate Output' button in the Output section of the Output window to open the panorama in your default browser.

The output should look and work like the panorama below.

Conclusion

So now we can have multiple hotspots in a panorama but only have to manage a single component in the skin editor. This allows us to make changes such as colour, size and have it reflected over every instance in our panorama or tour.

In my original example I have created two .html files using CSS and local Fonts. For more information please checkout some of my other tutorials including Styling with CSS.

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia