This is Part 1 of a two-part tutorial; using only tools provided by Pano2VR, this tutorial shows how to create a project with a hotspot that zooms opens a fullscreen image that can be panned and zoomed in and out.

Using an 'equirectangular image' Pano2VR project and a 'flat image'Pano2VR project we will combine both using a text field skin element to hold the 'flat image' project.

A skin component provides the elements for the 'flat image' project to provide zoom and pan options. In addition touch can be used on mobile to zoom and pan.

Project - Final Output

This tutorial provides a step-by-step instructions on how to create a project and at the end of the tutorial the final output will be similar to this example (figure #1)

Figure #1: Final Output

Overview & Tutorial Files

A shout-out to Jaroslav Pindora's solution to the hotspot image zoom and pan using just the tools within Pano2VR.

In Part 1 we will cover;

Import an Equirectangular image and set a default view
Add a Point Hotspot
Define the HTML 5 Output Settings
Create a new Skin and add Assets from the Components Toolbox
Modify the assets to set up an iFrame
Generate the Output and test the Project

In Part 2 we will cover;

Import a flat image and set a default view
Set up an HTMl 5 Output
Import a pre-built component to manage the zoom and pan
Create the Skin
Generate the 'Flat Image' Output and test the project
Generate the Final combined Output

Note: this tutorial assumes a basic knowledge of Pano2VR V5 or V6 beta3

You can use your own .html files or download the P2VR Tutorial Folder and follow along with the steps below.

The download contains a tutorial folder called 'P2VR_Image_Zoom_Pan' which in turn contains an 'Assets' folder, a 'Project' folder and a 'zoom_pan' folder.

The assets folder contains an high res image 'leopard.jpg', a generic equirectangular image 'green-equi.png' and a skin component called 'zoom_ui.ggs' (Figure #2)

1. Import the Equirectangular image and set up the hotspots

1.1. Open Pano2VR, import your equirectangular image or the supplied 'green_equi.png' and set the default view (Figure #3)

Figure #3: Import Equirectangular image and set default view

2. Add a Point Hotspot

2.1. In the Preview window, open the Viewer Modes, select the Point Hotspot mode and click on the Equirectangular to position the Point Hotspot (Figure #4)

2.2. With the 'Point Hotspot' still active, in the 'Properties - Point Hotspot window' set the Type to 'Info'

Note: This will allow us to use a built in component in the skin and associate it with the hotspot

and add a 'Title', in this case 'Leopards at Ulusaba, Sabi Sands'

Note: This will be used as a tooltip when there is a 'mouseover' on the hotspot. (Figure #5)

Figure #5: Hotspot type 'Info' and title

2.3 Save the project to the Tutorial Folder, 'P2VR_Image_Zoom_Pan', into the Project Folder. I've called mine 'image_zoom_pan.p2vr' (figures #6 & 7)

Figure #7: Project saved to the Tutorial Folder > Project

2. Set up the Output

2.1 Open the project if it's not already open. Click on the 'Add Output' button in the 'Output' panel and select 'HTML5' (figure #8)

2.2 Click on the 'Output Folder' button and navigate to the 'Zoom-Pan' folder in the Tutorial Folder. Select it and click on 'Open' (figure #9)

Figure #9: Set the path to the Output Folder

Note: once you click 'Open' the Modal window closes and the path to the folder is shown as the 'Output Folder'

2.3 Save the project

3. Create the Skin

3.1 In the Output panel, click on the 'Edit Skin' button to open the 'Skin Editor' (Figure #10)

3.2 Click on the 'Components Toolbox' button to open the toolbox (Figure #11)

3.3 Click on the 'Information Popup Silhouette' component to highlight it (Figure #12)

3.4 Double click on the component to add it to the Canvas and close the toolbox (Figure #13)

3.5 Save the skin to the Tutorial Folder, 'P2VR_Image_Zoom_Pan', into the 'Project' folder. I've called mine 'image_zoom_pan.ggsk' (figures #14, 15)

Figure #15: Skin Saved to the Tutorial Folder > Project

Note: To add the skin to the Output Panel you will need to close it (figure #16)

Figure #16: Skin location added to the Output panel

3.6 Open the skin if it's not already open. Click the 'information' container dropdown arrow to reveal it's contents and select the 'info_title' and 'information_bg' elements (figure #17)

Figure #17: information elements selected

Note: to implement the zoom and pan capabilities we will be creating a flat image Pano2VR project. This project will be applied via the info_text_body using iFrame code so we will not be using the info_title or information_bg elements

6. Delete the two selected elements (figure #18)

Figure #18: Updated information container

Note: the next steps will set up the information container elements to fill the screen and zoom in and out

3.7 With the 'information' container selected set the Properties Panel Position > Size: Width and Height to 100.00 percent (figure #19)

Figure #19: information container Position settings

3.8 With the 'information' container still selected set the Properties Panel Appearance > Scaling: X and Y to 0.00 percent (figure #20)

Figure #20: information container Scale settings

Note: this will set the container, and it's contents, to 0% when the panorama loads enabling us to set it's value to 100% to scale it up

3.9 Select the 'info_popup_close' element and in the Properties Panel > Actions delete the two Mouse Click > Set Value actions (figure #21)

Figure #21: info_popup_close actions to be deleted

3.10 With the 'info_popup_close' element still selected, double click in an empty action field to open the Action Settings window and select the following settings: Source = Mouse Click | Action = Scale | Type = Toggle Element Scale | Scale = X 0.00% Y 0.00% | Transition Time = 0.500s | Target = information, click 'OK' (figure #21)

Figure #22 Set new info_popup_close action

Note: Use 'Toggle Element Scale' as the Type because it provides the option to set a Transition Time

Note: the actions within the info_popup_close button will hide the information container and reset it's scale to 0%

3.11. With the 'info_text_body' element selected set the Properties Panel Position > Position: X & Y to 0 pixels | Position > Size: Width and Height to 100.00 percent (figure #22)

Figure #23: info_tex_body Position settings

3.12, With the 'info_text_body' element still selected set the Properties Panel Text > Text: = <iframe src="includes/index.html" width="100%" height="100%" frameborder= "0" scrolling="no" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> | Align: = Left, uncheck Word wrap, uncheck Scroll Bar (figure #24)

Figure #24: info_text_body Text Settings

3.13 Select the 'screentint_info' element and delete it (figure #25)

Note: as we will be zooming to fullscreen we will not see or need the screentint to block the ability to pan the panorama

3.14 Select the 'ht_info' hotspot and in the Properties Panel > Actions delete the two Mouse Click > Set Value actions (figure #26)

Figure #26: ht_info hotspot actions to be deleted — Figure #26: ht_info hotspot actions to be deleted

3.15. With 'ht_info' hotspot still selected, double click in an empty Action field to open the Action Settings window and select the following settings: Source = Mouse Click | Action = Scale | Type = Toggle Element Scale | Scale = X 100.00% Y 100.00% | Transition Time = 0.500s | Target = information, click 'OK' (figure #27)

Figure #27: Mouse Click - Scale action settings

3.16 With 'ht_info' hotspot still selected, double click in an empty Action field to open the Action Settings window and select the following settings: Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = tt_information, click 'OK' (figure #28)

Note: this action hides the thumbnail title that is displayed on Mouse Over once the button is clicked to prevent it showing above the zoom element

Figure #28: Mouse Click - Visibiltity settings

3.17. The 'ht_info' hotspot should now have 3 actions assigned to it (figure #29)

17. Save the skin

Note: this completes development work on the skin. If you would like to test the skin assign a colour background to the info_text_body

18. Select the 'info_text_body' element in the information container. In Properties > Rectangle > Background > check Enabled: and assign it a color (figure #30)

Figure #30: Assign a background color to the info_text_body element

19. Save the skin, save the project and in the Output Panel click on the 'Generate output' button to create a test sample as shown below

Note: you will see in the output project a message, saying "index.html" cannot be found or doesn't exist. This is because we haven't created this element yet, this will be implemented in the next steps

Note: this is the end of Part 1 please continue on to Part 2 to create and implement the zoom/pan functionality

Note: Comments and suggestions for improving the tutorial or errors and omissions are welcomed.

Summary

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

P2VR Fullscreen Image Viewer - Part 1