P2VR Fullscreen Image Viewer - Part 2

This is Part 2 of the tutorial, using only tools provided by Pano2VR, to create a project with a hotspot that zooms opens a skin element (a text field) fullscreen.

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.

Overview and Tutorial Files

A shout-out to Jaroslav Pindora (P2VR Facebook User Group) solution to the hotspot image zoom and pan using just the tools within Pano2VR.

In Part 1 we covered the following;

  • 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;

  • 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

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'

1. Import a Flat Image and set a default view

1.1 Open a new Pano2VR project, drag the flat 'leopard.jpg' image, from the Asset folder, in the Tutorial folder, into  (Figure #1)

Figure #1: Add the flat leopard.jpg

Note: In auto mode the image is distorted and we need to correct the correct Type

1.2 In the Properties > Input Panel select Type: Flat (figure #2)

Figure #2: Set the Type: to Flat

1.3 Click on 'Viewing Parameters' to open the settings panel and in 'Default View' change the value for FoV: to 100˚, click on 'Go To' and then click on 'Set'.  In 'Field of View (Zoom)' change the value of MIn: to 4.0px (Figure #3)

Figure #3: Set Projection > FoV and Field of View (Zoom): to 4.0px

Note: the Projection > FoV: of 100˚ will show the whole image and the Field of View > Min: sets how far the into the image the zoom will go

1.4 Save the project into the 'Project' folder in the 'P2VR_Image_Zoom_Pan' tutorial folder.  I've named it 'leopard_zoom.p2vr' (figure #4 & 5)

Figure #4: Save the project

Figure #5: Project saved into the Project folder

2. Set up the HTML5 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 #6)

Figure #6: Select HTML5 as the Output type

2.2 Click on the 'Output Folder' button and navigate to the 'Zoom-Pan' folder in the Tutorial Folder. Select 'New Folder' and name it 'includes', click 'Create' and click on 'Open' (Figures 7 - 11)


Figure 7: Select 'New Folder'


Figure #8: Name it 'includes'


Figure #9: Create the new folder

Figure #10: Open the new folder


Figure #11: The 'includes' folder is now the output destination for the leopard_zoom.p2vr project


2.3 Save the project

3. Import the Zoom_UI Skin Component

3.1 In the P2VR_Image_Zoom_Pan tutorial folder, double click on the 'zoom_ui.ggskc' to open the 'Copy Component' window. From the dropdown menu select 'New' and click 'OK' (Figure #12, 13)


Figure #12: Copy Component window & dropdown menu

Figure 13: select 'New'


3.2 Create a new category title and call it 'leopardui' and click 'OK' (Figure #14)


Figure #14: New Category Title

Note: The component can be renamed, modified and moved to a new category at any time

3.2 Once the component has been added to the Component Library you will see a notification to that effect (Figure #15)

Figure #15: Notification of copy

Figure #15: Notification of copy


4. Create the Skin

4.1  In the Output panelclick on the 'Edit Skin' button to open the Skin Editor (Figure #16)

Figure #16: Skin Editor

4.2 Click on the 'Components Toolbox' button to open the toolbox, select the Category 'leopardui' (Figure #17) 


Figure #17: zoom_ui in the 'leopardui' category

4.3 Double click on the 'zoom_ui' component to add it to the skin and click on 'Close' to close the Components Toolbox window (Figure #18)


Figure #18: Skin with zoom_ui component added

Note: at this point there is no further work to be done on the skin. You can explore the elements to see the actions and logic blocks that have been applied.

4.4 Save the skin into the 'Project' folder in  the 'P2VR_Image_Zoom_Pan' tutorial folder. I've named it  'leopard_zoom'. Close the skin editor, Save the project and select the 'Output' button to preview the zooming project (sample output below)

Note: by outputting the final leopard project to the 'includes' folder of our original  panorama project the tutorial is almost finished.

5. Final Output

5.1 Close and Save the 'leopard_zoom' project, if it's still open, and open the 'image_zoom_pan' project. Click on the 'Edit Skin' button to open the skin editor (Figure #19)

Figure #19: image_zoom_pan project skin

5.2 Select the 'info_text_body' element and open the Properties > Rectangle dropdown menu (Figure #20)

Figure #20: info_text_body Properties > Rectangle

5.3 Click in the Color: swatch block and set the color to black and click 'OK' (Figure #21)

Note: this will ensure that we don't see any of the underlying panorama when the text field zoom is active

5.4 Save and close the Skin Editor, Save the project and click on the 'Generate Output' button to publish the final panorama as shown below

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