This tutorial describes how to create a zoom & pan gallery project with multiple nodes that can be assigned to individual hotspots in a tour.

Listen to this NotebookLM Audio Podcast generated from the post’s content.

In the P2VR project, multiple 'Point Hotspots' are controlled by a single 'Hotspot Component' in the skin. Each point hotspot launches the 'Gallery Image Viewer' (another P2VR project loaded into the project via iFrame code) opening an image that can be zoomed into and panned around.

Each point hotspot contains a preview thumbnail of the image associated with the hotspot and a tooltip.

Note: Click on any image for a larger view

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.

view.in a new browser window

Overview and Tutorial Files

In Part 1 of this tutorial, we will modify a ‘Single Node Gallery’ project into a 'Multiple Node Gallery' Pano2VR project. The following topics will be covered;

import two additional flat images
set uniform viewing parameters across the nodes
enable Direct Node Access
create the thumbnail images
generate the new 'Multiple Node Gallery' output
examine the Zoom controller

In Part 2 of this tutorial, we will modify the 'Image Zoom' Pano2VR project. The following topics will be covered;

add two additional 'point hotspots' for the new images
create an element in the skin that displays the thumbnail previews
add new variables, logic blocks and placeholders
generate the 'Image Zoom' output and review the final project

Note: this tutorial assumes a basic knowledge of Pano2VR V7

To follow along download the P2VR_V7_Image_Zoom_Pan zip file.

The download contains;

'Assets' folder with subfolders;
- gallery: empty
- gallery_nodes: contains 3 high-quality images 'leopard.jpg', ‘rhino.jpg’ and 'boomslang.jpg'
- gallery_thumbnails: empty
- nodes: contains a single equirectangular image ‘Ulusaba_RockLodge.jpg’
'Image Zoom_Pan' folder: empty
'Project' folder containing;
- image_zoom_pan.ggsk
- image_zoom_pan.p2vr
- leopard_zoom.ggsk
- leopard_zoom.p2vr

Note: the images leopard, boomslang, rhino and Ulusaba_Rocklodge 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
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!

1. Import the Flat Images and set default views

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

Figure #1: The Single Image Gallery project

1.2: Click on the ‘Generate Output’ button to publish the gallery (see output below)

view in new browser window

1.3: In the Properties - Panorama click on the ‘Panorama’ tab to see the current Input settings.

Note: The Input Image: Type = Flat (Figure #2)

1.4: In the Properties - Panorama click on the ‘Viewing Parameters’ tab to see the current settings.

Default View settings are;

Pan: = 0.00˚
Tilt: = 0.00˚
Fov: = 100˚

Field of View (Zoom) settings are;

Min Fov in: Pixels
Min: 4.0px
Max: No Borders (Figure #3)

1.5: From the Assets folder, drag and drop the flat 'boomslang' and 'rhino' jpg images, onto the Tour Browser panel to create two new nodes (Figures #4 & 5)

Figure #5: Two new nodes are shown in the 'Tour Browser' but the images on the new nodes are distorted in the 'Viewer'

Note: Loading an image defaults to Auto mode. In this mode the node images are distorted and we need to set Uniform Viewing Parameters across the nodes

2. Set Uniform Viewing Parameters across the nodes

2.1: Click on the first node, ‘leopard’, to make it active and then shift select the other two nodes in the Tour Browser. (Figure #6)

2.2: Open the Properties - Panorama > Input panel and you will see that the Input Image: Type: = Flat (Figure #7)

2.3: Mouse over the copy icon next to the Input Type.

Note: when you mouse over the icon it shows a tooltip “copy input type to all nodes”

2.4: Click on the copy icon to apply the setting to all nodes.

2.5: Click on the Boomslang node in the Tour Browser (Figure #8 & 9)

Note: The image is no longer distorted but it doesn’t fit into the Viewer window, but we will fix that next.

2.6: Re-select the nodes again and open the Properties - Panorama > Viewing Parameters

2.7: Click on all of the highlighted copy icons in the Default View and Field of View (Zoom) sections. (Figure #10)

Note: The image is now resized in the Viewer window (Figure #11, 12, 13 & 14)

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.8: Save the Project as “gallery_zoom.p2vr”

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 unique name e.g leopard, 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 leopard. When we click on the corresponding skin hotspot the 'Custom Node ID' is passed to the URL in the <iframe> tag and the URL becomes "assets/gallery/index.html#leopard"

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

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

Note: the next step is to assign Custom Node ID’s to each node

3.3: Open the Properties - User Data tab

3.4: Select the ‘leopard’ node to make it active and enter ‘leopard’ in the Custom Node ID: field (Figure #17)

3.6: Save the project

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 #18)

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

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

4.4: Open the 'P2VR_V7_Image_Zoom_Pan' tutorial folder and navigate to the Assets > gallery_thumbnails folder and select 'Open’ (Figure #19)

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

4.5: Open the Properties - Transformation Output to show the Preview, Transformation and Output 'Settings' options and apply the following Transformation settings:

Type: Rectilinear (default view)
Image Size: 140px x 90px
View: uncheck 'Use default view'
View: FoV: 60.0 (Figure #21)

4.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 #22)

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

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

Note: $(ucnode) is a Pano2VR filename placeholder which will be replaced with the current node’s ID

4.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 Assets > gallery_thumbnails folder you will see your thumbnails named leopard, boomslang and rhino. (Figure #29)

5. Generate the 'Multiple Image Gallery' Output

5.1: In the Output panel change back to the ../Assets/gallery' and click on the Output button (Figure #30)

Note: clicking on the “+” icon will increase the zoom and reveal additional navigation buttons. Using the scroll wheel on the mouse will also increase/decrease the zoom. (Figure #32)

Note: the example below is a live version of the output.

View in a new browser window

Note: We can view the other gallery image nodes using the Direct Node Access method.

5.2: Append #boomslang or #rhino at the end of the URL, in the address bar, and reload the browser and the appropriate node will be displayed (Figures #33 & 34)

https://tonyredhead.services/P2VR/ZOOMGALLERY/assets/gallery/index.html#boomslang

Figure #33: Loading Boomslang using Direct Node Access

https://tonyredhead.services/P2VR/ZOOMGALLERY/assets/gallery/index.html#rhino

Figure #34: Loading Rhino using Direct Node Access

5.3: Save the Project

Note: this version displays an image centered and 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: Save the Project as gallery_zoom_all.p2vr

6.2: Open the Properties - Viewing Parameters panel

6.3: In the Field of View (Zoom) > Max: check ‘Show All’ (Figure #35)

6.4: Shift select all of the nodes

6.5: Click on the ‘Copy FoV Max’ button (Figure #36)

Note: this will copy the change to all selected nodes

6.6: Republish the project and the image is now shown in its entirety, at 100% zoom, regardless of the browser window size.

View in a new browser window

Note: if you want to use the original version, open the gallery_zoom.p2vr project file and republish the project. This will overwrite over any changes made.

8. Zoom Controller

Note: the Zoom Controller is a small component that has controls for zoom in/out, move up/down/left/right and fullscreen.
When the FoV (zoom) is at 100% then the controller is minimised (Figure #37) when the FoV is less than 100% (zoomed in) the controller is maximised. (Figure #38)
The default position for the controller is bottom right.

Note: there may be issues with the placement of the Zoom Controller as this screen section of a virtual tour is prime real estate for logos, buttons etc as shown in the example below (Figure #39)

Figure #39: Logo overlaying the controller

Note: if there is an issue the placement of the controller position can be changed to one of three locations; bottom right, center right and top right.

8.1 Open the Properties - User Data panel

8.2 There is a Custom Property called Controller Anchor [br - cr - tr] with the default value ‘br’

8.3 Change the value to ‘cr’ (Figure #40)

8.4 Save the Project and republish the project.

Note: now the controller is centered vertically and aligned right. (Figure #41)

Note: finally once last option. If you use the controller ‘fullscreen’ button to open the window in fullscreen the issue with the logo is no longer a concern as the zoom window takes precedent over the main tour. In this scenario there is the option to have the controller move to the bottom right during fullscreen display.

8.5 In the Output panel click on the Edit Skin Configuration button to open the Edit Skin Configuration window

8.6 Check the option Active anchor [fullscreen] (Figure #42)

Figure #42: Check the Active anchor [fullscreen]

8.7 Click OK and republish the project.

view in a new browser

Note: the controller will appear at the position set in the Custom Property but when the fullscreen button is selected it will move to bottom right. When the close fullscreen button is selected it will move the original position.

Note: that completes the changes to the 'Multiple Image Gallery' project file. Next step will be to modify the 'Image Zoom' 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