This two-part tutorial starts where P2VR Fullscreen Image Viewer - Part 2 finished. This tutorial expands on the single image viewer and shows how to create and manage a viewer that contains multiple images.

In the P2VR project, multiple 'Point Hotspots' are controlled by a single 'Hotspot Component' in the skin. Each point hotspot launches the 'Fullscreen Image Viewer' (another P2VR project loaded into the project via iFrame code) and opens a fullscreen pan and zoom image.

In addition, each point hotspot contains a preview thumbnail of the image associated with the hotspot.

Update 11 May 2020: Added a new section #6 Show complete image. Rather than fill the screen with the image this shows the entirety of the image regardless of the browser view ratio.

Project - Final Output

This tutorial provides step-by-step instructions on how to create a project and at the end of the tutorial, the final output will be similar to the example below.

Click to view in a new browser tab

Overview and Tutorial Files

In Part 1 of this tutorial we will modify the 'Flat Image' Pano2VR project and;

import two additional flat images
set uniform viewing parameters across the nodes
enable Direct Node Access
create the thumbnail images
generate the 'flat image' output

In Part 2 of this tutorial we will modify the 'Equirectangular Image' Pano2VR project and;

add additional 'point hotspots' for the new images
add additional content to the 'Properties - Point Hotspot'
create a 'hotspot_preview' folder and elements in the skin that manages the thumbnail and title previews
change the hotspot icon
generate the 'equirectangular' output and review the final project
fix a issue in Firefox browser

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

To follow along download the 'P2VR_Image_Viewer_Multiple' tutorial folder

The download contains a tutorial folder called 'P2VR_Image_Viewer_Multiples' which in turn contains an 'Assets' folder, a 'Project' folder and a 'Zoom_Pan' folder.

The 'Assets' folder contains 3 high quality images 'leopard.jpg', rhino.jpg and 'boomslang.jpg'

FYI: the boomslang is a large venomous snake found in Sub-Saharan Africa and this one I photographed was in a tree extremely close to the location where we boarded the safari vehicles in the morning!

The 'Assets' folder also contains a generic equirectangular image 'green-equi.png' and a skin component called 'zoom_ui.ggs'

Note: the images leopard, boomslang and rhino are all copyright Tony Redhead. I'm happy for you to use them to build the tutorial files but if you want to use them in for other purposes please contact me at tony@tonyredhead.com

The 'Project' folder contains the completed project, skins and assets from P2VR Fullscreen Image Viewer - Part 2 and the 'Zoom_Pan_Multiple' is an empty project output folder, that also contains an empty 'includes' folder.

1. Import the Flat Images and set default views

1.1 Open 'leopard_zoom.p2vr' from the 'Project' folder (Figure #1)

Figure #1: Final 'Flat Image' project from 'P2VR Fullscreen Image Viewer - Part 2'

1.2 In the Viewing Parameters panel, click on the 'Go To' button to show the default view (Figures #2 & 3)

1.2 Drag and drop the flat 'rhino' and 'boomslang' jpg images, from the 'Assets' folder, onto the Viewer window to create two new nodes (Figures #4 & 5)

Note: Loading an image defaults to Auto mode. In this mode the image is distorted and we need to set the 'Input Image' to the correct type (Figure #6)

Figure #6: Two new nodes are shown in the 'Tour Browser' and the image is distorted in the 'Viewer'

1.3 In the 'Tour Browser' window select the first of the two new nodes and in the Properties - Input panel select Type: Flat (figure #7)

Note: Setting the Input Image Type to flat displays the correct image format (Figure #8)

Figure #8: Image set to the right format type - 'Flat'

1.5 Repeat steps 1.3 for the third node, the rhino

2. Set Uniform Viewing Parameters across the nodes

2.1 Click to highlight the first node, 'leopard', and then open the 'Viewing Parameters' panel by clicking on the 'Viewing Parameters' button (Figure #9)

Note: the default FoV: parameter for viewing the images is 100.0˚ so we will use the parameters that were set in 'P2VR Fullscreen Image Viewer - Part 2' and copy them all nodes

2.2 In Viewing Parameters > Default View > FoV: click on the 'copy' icon next to the 100. This will copy the value 100.0˚ to all of the other nodes. Click 'OK' on the copy confirmation message. (Figures #10 & 11)

Note: the Field of View (Zoom) sets the zooming limits of the image; how far the user can zoom into the image or zoom out. In this example it's set at 4px, if your image is higher resolution the setting can be higher

2.3 In Viewing Parameters > Field of View (Zoom) > Min: click on the 'copy' icon to copy 4.0px to all of the other nodes. Click 'OK' on the copy confirmation message. (Figures #12 & 13)

3. Enable Direct Node Access

Note: to open the image that corresponds to the clicked hotspot we will use a Pano2VR function called Direct Node Access. What this means is that by appending a node number e.g node1, at the end of a URL we can link to a specific node within a tour.

As an example, the leopard image point hotspot, has a 'Target' of node1. When we click on the corresponding skin hotspot the 'node1' id is passed to the URL in the <iframe> tag and the URL becomes "includes/ulusaba/index.html#node1"

3.1 To use 'Direct Node Access' we need to enable it in the project. In the Output > HTML dropdown click on the Template: 'Edit Template' button (Figure #14)

3.2 In the 'HTML Template' window check 'Direct node access' and click on 'OK'(Figure #15)

4. Create the Thumbnail images

Note: In this version rather than just have simple icons the skin will display thumbnail images when the user's mouse is over the hotspot icon. To do so we will have to create thumbnails for each node.

4.1 In the Output panel click on the 'Add Output' button (Figure #16)

4.2 Select 'Transformation' from the dropdown menu (Figure #17)

3.3 Click on the 'Add Output Folder' button and navigate to the 'P2VR_Image_Viewer_Multiples' tutorial folder (Figure #18)

3.4 Open the 'Zoom_Pan_Multiple' folder and then open the 'includes' folder (Figure #19 & 20)

3.4 Click on 'New Folder' button, enter the name 'thumbnails' and click on the 'Create' button. Click on the 'Open' button to make it the Transformation Output folder (Figures #21 & 22)

Note: the Output panel now reflects the new Output folder for Transformations (Figure #23)

3.5 Click on the 'Transformation' dropdown menu to show the 'Settings' and 'Preview' options and apply the following settings: (Figure #24)

Settings > Type: Rectilinear (default view)
Settings > Image Size: 140px x 90px
Preview > uncheck 'Use default view'
Preview > FoV: 60.0

3.6 Scroll down to the 'Output' section and set the Format: to PNG (.png). Double click on the current URL to open the 'Filename' window (Figure #25)

Note: you can drag a corner of the 'Filename' window to expand it. This makes it easier to see the whole URL

3.7 Change the 'Filename:' from '../Zoom_Pan_Multiple/includes/thumbnails/pano.png' to '../Zoom_Pan_Multiple/includes/thumbnails/$(y).png' and click on 'OK' (Figures #26 & 27)

Note: $(y) is a Pano2VR filename placeholder which will be replaced with the current node’s ID using a variable that we will set in Part 2

3.8 Scroll to the top of the Output panel and click on the 'Generate Output' button to generate the thumbnails (Figure #28)

Note: if you navigate to the Pan_Zoom_Multiple > includes > thumbnails folder you will see your thumbnails named Node1, 2 and 3 (Figure #29)

5. Generate the 'Flat Image' Output

5.1 Select Menu > File > Save As ... and navigate to the 'Project' folder and save the project as 'ulusaba_zoom.p2vr' (Figures #30 & 31)

5.2 Select the 'HTML5 output' setting from the dropdown menu, if it's not already selected (Figure #32)

5.3 Click on 'Output Folder' button, navigate to the 'Zoom_Pan_Multiple' folder, then open the 'includes' folder and click on 'Open' (Figure #32 & 33)

Note: A warning dialog window lets us know that the folder isn't empty. Click 'Yes' (Figure #34)

5.4 Click on the 'Output' button to generate the new 'ulusaba' project. (Figure #35)

Note: the project opens in a browser window and you can see and interact with the node 1 image, the leopard. You can view the other images using the Direct Node Access method.

Simply append #node2 or #node3 at the end of the URL, in the address bar, and reload the browser and the other nodes will be displayed

https://s3-ap-southeast-2.amazonaws.com/p2vrtutorials/Tutorial_Zoom_Pan_P2VR/Zoom_Pan_Multiple/includes/index.html#node1

https://s3-ap-southeast-2.amazonaws.com/p2vrtutorials/Tutorial_Zoom_Pan_P2VR/Zoom_Pan_Multiple/includes/index.html#node2

5.5 Save the Project and close it

Note: this version displays an image centered filling the screen. This can initially hide either the top/bottom or left/right side of the image. The image can be panned to see the hidden areas. However you may want to display the complete image, if so you can make the following changes

6. Show complete image

6.1 In the project window select the first node and open the Viewing Parameters Panel (Figure #36)

6.2 In the Field of View (Zoom); section > Max: Set the radio button to ‘Show All’. Repeat the process for the other nodes. (Figure #37)

6.3 Click on Menu > File > Save As and name the file ulusaba_zoom_showall

6.4 Republish the project and the image is now show in its entirety (Figure #38)

Note: that completes the changes to the 'Flat Image' project file. Next step will be to modify the 'Equirectangular' project file in Part 2

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