P2VR Fullscreen Image Viewer - Part 1

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)

 

Figure #2: Tutorial Folder

 

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)

Figure #4: Add Point Hotspot

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

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 #6: Save the Project

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)

 
 Figure #8: Add Output options

Figure #8: Add Output options

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)

 
 Figure #10: Edit Skin button

Figure #10: Edit Skin button

 

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

Figure #11: Components Toolbox button

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

 

Figure #12: Information Popup Silhouette selected

 

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

Figure #13: Information Popup Silhouette added to the Skin

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 #14: Save the skin

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

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

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: = Leftuncheck 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)

 

Figure #25: Delete screentint_info

 
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

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

Figure #28: Mouse Click - Visibiltity settings

 

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

 
 Figure #29: ht_info Actions

Figure #29: ht_info Actions

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.

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia