P2VR Fullscreen Image Viewer - Multiple Images & Thumbnails - Part 1

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.

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 the example below.

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)

Figure #2: Applying the Default View

Figure #2: Applying the Default View


Figure #3: Default View applied

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) 


Figure #4: Drag the images to the Viewer window of the project


Figure #5: images dragged into the viewer


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'

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)


Figure #7: Node selected and Type configured to Flat


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)

Figure #9: Viewing Parameter for Node 1

Figure #9: Viewing Parameter for Node 1


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)


Figure #10: Copy FoV button

Figure #11: Copy confirmation message


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)


Figure #12: Copy Min FoV

Figure #13: Copy confirmation message


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)


Figure #14: Edit Template button


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


Figure #15: Check 'Direct node access;


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)


Figure #16: Add Output button


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


Figure #17: Select 'Transformation'


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


Figure #18: Add Output Folder button


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

Figure #19: open the 'Zoom_Pan_Multiple' folder

Figure #20: open the 'includes' folder

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)

Figure #21: new folder, thumbnails

Figure #22: open as the output folder

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


Figure #23: new output folder - thumbnails


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


Figure #24: Transformation Settings and Preview


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)


Figure #25: Set format to PNG


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)


Figure #26: default filename

Figure #27: filename with placeholder


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)


Figure #28: Generate output


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


Figure #29: Node thumbnails viewed in Preview (Mac)


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)


Figure #30: Save As...

Figure #31: Save as 'ulusaba_zoom.p2vr'


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


Figure #32: Select HTML5 Output


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)

Figure #32: Open the 'Zoom_Pan_Multiple' folder

Figure #32: Open the 'Zoom_Pan_Multiple' folder

Figure #33: Open the 'includes' folder


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


Figure #33: Warning dialog


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


Figure #35: click to generate the 'ulusaba' project


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


5.5 Save the Project and close it

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