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)
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)
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)
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)
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)
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)
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)
3.2 Create a new category title and call it 'leopardui' and click 'OK' (Figure #14)
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)
4. Create the Skin
4.1 In the Output panel, click on the 'Edit Skin' button to open the Skin Editor (Figure #16)
4.2 Click on the 'Components Toolbox' button to open the toolbox, select the Category 'leopardui' (Figure #17)
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)
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)
5.2 Select the 'info_text_body' element and open the Properties > Rectangle dropdown menu (Figure #20)
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.