Pano2VR provides a very comprehensive Skin Editor that allows a user to create unique interactive environments. However there may be occasions when you need to integrate external applications to extend the program and there are a number of ways to do so in Pano2VR.

The Premise

This tutorial was created in response to a post on Pano2VR forum https://forum.ggnome.com/viewtopic.php?f=6&t=12909&p=53931#p53931

The poster wanted to have a point hotspot that when clicked opened an image that fills the current screen. Once the image had filled the screen the user could then zoom in and out of the image and pan around it using a mouse or by touch on a mobile device.

Project - Final Output

This tutorial provides a step-by-step instructions on how to create a project that fulfils the above requirements. At the end of the tutorial the final output will be similar to this example (figure #1)

Figure #1: Final Output

Overview & Tutorial Files

In this tutorial we will;

Create an image hotspot that scales to fullscreen
Implement the image pan and zoom using a jQuery Image Viewer
Output to a project suitable for Desktop or Mobile

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

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

The download contains a tutorial folder called 'Image Zoom In & Out' which in turn contains an 'Assets' folder, a 'Project' folder and a 'Image_Scale_Zoom' folder. The assets folder contains an image 'demo_zoom.jpg', an html file 'fullsize.html' and a 'zoom_assets' folder with a viewer (Figure #2)

Note: The viewer I'll be using in this tutorial is the Smooth Zoom Pan - jQuery Image Viewer. I've been using this viewer for a number of years now and even though it's no longer actively supported its the easiest to setup and has quite a few configuration options.

The viewer is available for purchase on the envato market Code Canyon site at https://codecanyon.net/item/smooth-zoom-pan-jquery-image-viewer/511142 for $16 US dollars.

If you are going to use Smooth Zoom files in an application that will be public please purchase a license to use it. You will also get configuration settings and examples in the purchase.

If you are more comfortable with Javascript, HTML and CSS there are a number of free Image Viewers including;

ImageViewer http://ignitersworld.com/lab/imageViewer.html from Ignitersworld Lab

Viewer.js https://fengyuanchen.github.io/viewerjs/

Very Simple Image Viewer https://github.com/meshesha/verySimpleImageViewer/

1. Import the Equirectangular image and set up the hotspots

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

Figure #3: Import Equirectangular image and set default view

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

4. 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 'Click to Zoom & Pan Image'

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

5. Save the project to the Tutorial Folder 'Image Zoom In & Out' in the Project Folder. I've called mine 'image_zoom_in_out.p2vr' (figures #6 & 7)

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

2. Set up the Output

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. 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: Selecting and setting the Output Folder

3. Save the project

3. Create the Skin

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

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

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

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

4. Save the skin to the Tutorial Folder 'Image Zoom In & Out' in the Project Folder. I've called mine 'image_zoom_in_out.p2vr' (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

5. 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 using an external javascript application. This 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

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

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

8. 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

9. 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%

10. 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

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

Figure #24: info_text_body Text Settings

12. 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

13. 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

14. 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

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 = Visibility | Type = Hide Element | Scale = X 0.00% Y 0.00% | 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

16. 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 "fullsize.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

4. Adding the Zoom application and Include

Note; To implement the zoom and pan we need to add an include folder, containing the following, to the project folder Zoom-Pan;

HTML page with code to open a div in fullscreen mode
A high resolution image
Smooth Zoom files including icons, javascript and preloader gif

You will find all of these files in the 'Assets' folder

1. Open the 'Assets' folder in the Image Zoom In & Out Tutorial Folder (figure #31)

2. Drag the 'leopard.jpg' from the images folder into the includes folder (figure #32)

Figure #32: Drag leopard.jpg into includes

3. Drag the 'zoom_assets' folder into the includes folder (figure #33)

4. Drag and copy the includes folder into the 'Zoom-Pan' output folder (figure #34)

Figure #34: Drag & Copy includes to Zoom-Pan folder

5. Open the project 'image_zoom_in_out.p2vr' if it's not already open

6. In the Output Panel, Output: click on the 'Open Output' button to open the project. Click the hotspot and pan and zoom the image (figure #35)

Note: I've replaced the 'tiles' folder with one from another project, changed the title of the hotspot and added a fullscreen button (hidden in mobile). This panorama was taken from the deck of Rock Lodge at Ulusaba, overlooking Sabi Sands, South Africa

Note: I will be updating the tutorial shortly to add some information about the fullscreen.html file and the configuration settings on the Smooth Zoom

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

Hotspot Fullscreen Image with Zoom and Pan