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)
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)
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)
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)
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)
Note: To add the skin to the Output Panel you will need to close it (figure #16)
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)
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)
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)
3.8 With the 'information' container still selected set the Properties Panel Appearance > Scaling: X and Y to 0.00 percent (figure #20)
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)
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)
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)
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)
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)
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)
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
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)
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.