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 has multiple images contained within it.

In the associated skin, multiple 'Point Hotspots' are controlled by a single 'Hotspot Component'. Each point hotspot launches the viewer and shows a fullscreen pan and zoom image associated with that hotspot. with all the hotspots .

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

Update 14 October 2021: I have replaced the illustrations for Step 4: Update the Hotspot Actions as the text indicated Mouse Over but the illustrations showed Mouse Click. (Thanks to Marta for highlighting the issue)

Overview and Tutorial Files

In Part 1 of this tutorial we modified 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 new 'point hotspots' and update the properties
create new skin variables
create the preview elements
change the hotspot icon
generate the 'equirectangular' output and review the final project
fix a preview thumbnail issue in the 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_Multiple' which in turn contains an 'Assets' folder, a 'Project' folder and a 'Zoom_Pan_Multiple' folder.

The 'Assets' folder contains 3 high quality images 'leopard.jpg', rhino.jpg and 'boomslang.jpg', and a generic equirectangular image 'green-equi.png'.

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
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 'Project' folder contains the completed project and skin files from the P2VR Fullscreen Image Viewer - Part 2 tutorial.

The 'Zoom_Pan_Multiple' folder is the project output folder and contains an 'includes' folder within it.

1. Add the Additional Point Hotspots and Update the Properties

1.1 Open 'image_zoom_pan.p2vr' from the 'Project' folder in the Tutorial folder (Figure #1)

1.2 Click on the point hotspot to make it active and open the 'Properties - Point Hotspot' panel (Figure #2)

Note: if you are having trouble opening the 'Properties - Point Hotspot' panel deselect the point hotspot. Select the 'Properties' button to open the properties panel and then reselect the 'Point Hotspot.'

1.3 Set the 'Link Target URL:' to includes and the 'Target' to node1 (Figure #3)

Note: we will use these entries as placeholders for skin elements to show both thumbnails and nodes

Note: it's not really necessary to use a placeholder for the includes folder but it's good to have if you have a more complex project and want to create multiple folders within the project folder

1.4 In the 'Viewer' window, click on the hotspot to make it active if it's not already. Right click in the viewer window and select 'Copy Active Point Hotspot' from the popup menu (Figure #4)

1.5 Right Click anywhere in the viewer window and select 'Paste Point Hotspot' from the popup menu (Figure #5)

1.4 Position the Point Hotspot on the panorama (Figure #4)

1.5 With the hotspot still selected update the 'Properties - Point Hotspot' settings to;

ID: Point02
Title: Boomslang at Ulusaba, Sabi Sands
Target: node2 (Figure #6)

1.6 With the second Point Hotspot still selected Right click in the viewer window and select 'Copy Active Point Hotspot' from the popup menu and then select 'Paste Point Hotspot' and position it on the panorama (Figure #7)

1.7 With the hotspot still selected update the Properties - Point Hotspot settings to;

ID: Point03
Title: Rhino at Ulusaba, Sabi Sands
Target: node3 (Figure #6)

1.8 Select Menu > File> 'Save As...' and save the project to the 'P2VR Image Viewer Multiples' tutorial folder 'Project' folder and name it 'image_zoom_pan_multiple.p2vr'

2. Create new Skin Variables

Note: when the user mouse is over the hotspot we want to show the thumbnail, created in Part 1, for that particular node.

Note: the first step is to create variables that use the placeholders 'Link Target URL' and 'Target' created in Step 1

2.1 Click on the 'Edit Skin' button to open the 'Skin Editor'

Note: the image_zoom_pan.ggsk is the skin created in Part 1 of the P2VR Fullscreen Image Viewer tutorial

2.2 If the Properties > Variables dropdown menu isn't visible click on an empty area of the Canvas. Double click in the blank 'Name' field to add a new variable (Figure #10)

2.3 Create a new variable Name: MyPageURL. Click on the Type field and select Type: Text from the dropdown menu (Figure #11)

2.4 Create a second variable Name: MyNodeNumber and Type: Text (Figure #12)

2.5 Select 'Menu>File> Save As.. and save the file to the 'Project' folder naming it 'image_zoom_pan_multiple.p2vr' (Figure #13)

Note: close the skin to update the 'Skin:' location in the project and then click on the 'Skin Edit' button to open the skin again

3. Create the Preview Elements

3.1 Click on the 'eye' icon next to the 'information' folder to hide the element.

3.2 Click on the 'ht_info' hotspot element, open the Properties > Position dropdown menu. Set the Position: to X: 140 and Y: 270 (Figure #14)

Note: changing the position of the hotspot allows us room to add in the preview elements

3.3 Click on the 'Draw Rectangle' menu icon and click once in the skin to add the rectangle (Figure #15)

3.4 With the 'Rectangle1' element selected open the Properties > Position dropdown menu and apply the following settings; (Figure #16)

ID: preview_picture_frame
Position: X: 65 Y: 116
Width: 148 px
Height: 96 px

Figure #16: preview_picture_frame settings

3.5 With the 'Rectangle1' element selected open the Properties > Rectangle' dropdown menu and apply the following settings; (Figure #17)

Background Color: black
Border: Width: 0

3.6 Click on the 'Draw Text Field' menu icon and click once in the skin to add the text field (Figure #18)

3.7 With the 'Text1' element selected open the Properties > Position dropdown menu and apply the following settings; (Figure #19)

ID: preview_thumbnail
Position: X: 68 Y: 119
Width: 140 px
Height: 90 px

3.8 With the 'preview_thumbnail' element selected open the Properties > Rectangle' dropdown menu and apply the following settings; (Figure #20)

Background Enabled: unchecked
Border: Width: 0

3.9 With the 'preview_thumbnail' element selected open the Properties > Text' dropdown menu and apply the following settings; (Figure #21)

Text:
<iframe src="$(*MyPageURL)/thumbnails/$(*MyNodeNumber).png" frameborder="0"></iframe>

Align: Scroll Bar unchecked

Figure #21: set path to load thumbnail images

3.10 In the 'Tree', click and drag the 'preview_thumbnail' and 'preview_picture_frame' elements into the 'ht_info' hotspot (Figure #22)

3.11 Select both the 'preview_thumbnail' and 'preview_picture_frame' elements. While the elements are active select 'Draw Container' icon from the menu and click once in the canvas to wrap the active elements (Figure #23)

3.12 Drag the 'preview_thumbnail' element above the 'preview_picture_frame' element (Figure #24)

3.13 Drag the 'tt_information' into the 'Container 1' container above 'preview_thumbnail' (Figure #25)

3.14 Click on 'Container 1' to make it active and in Properties > Position change the ID: to hotspot_preview (Figure #26)

3.15 With the 'tt_information' element selected open the Properties > Position dropdown menu and apply the following settings; (Figure #27)

Position: X: 4 Y: 110
Width: 140 px
Height: 20 px

Figure #27 tt_information element position

3.16 With the 'tt_information' element selected open the Properties > Appearance dropdown menu and apply the following settings; (Figure #27)

Visible Checkbox: checked
Visible: Logic Block delete

Figure #27: Check Visible and Delete Logic Block

3.16 With the 'hotspot_preview' container selected open the Properties > Appearance dropdown menu and apply the following settings; (Figure #29)

Visible Checkbox: unchecked
Visible: Logic Block active

In the Logic Block settings apply the following logic

Trigger: Mouse Over Parent
Comparison: =
Value: True
Visible: True

Figure #29: hotspot_preview settings & logic block

4. Update the Hotspot Actions

4.1 Select the 'ht_info' hotspot to make it active. Open the Properties > Actions Dropdown menu. Double click on the 'Mouse Click | Hide Element | #tt_information' action and change it to 'Mouse Click | Hide Element | #hotspot_preview' (Figure #30)

Note: this will hide the 'hotspot preview' element once it's been clicked on otherwise it would continue to be visible as long as the mouse remains over it

4.2 Double click in the blank 'Source' field to add a new action (Figure #31)

Source: Mouse Over
Action: Set Variable Value
Parameters: Set(=)/$(hu)
Target: MyPageURL

4.3 Double click in the blank 'Source' field to add a new action (Figure #32)

Source: Mouse Over
Action: Set Variable Value
Parameters: Set(=)/$(ht)
Target: MyNodeNumber

5. Update the Image Viewer iFrame

5.1 With the 'info_text_body' element selected open the Properties > Text' dropdown menu and apply the following settings; (Figure #33)

Change;

Text:

to

Figure #33: Update text in info_text_body

6. Change the ht_info_image Icon

Note: rather than use the "i" icon for the hotspot I'd rather use the 'picture' icon from the 'Image Popup Simplex' component

6.1 Click on the 'Component Toolbox' icon, go to the 'Built-In' category and double click on 'Image Popup Simplex' to add it to the skin (Figure #34)

6.2 Double click on 'Image Popup Simplex' to add it to the skin (Figure #35)

6.3 Open the 'ht_image' hotspot and drag the 'ht_image_image' element into the 'ht_info' hotspot below the 'ht_info_image' icon (Figure #36)

6.4 With the 'ht_image_image' element selected open Properties > Position and set the Position: X = -16 and Y = -17 (Figure #37)

6.4 Select the 'ht_image' hotspot, 'image_popup' folder, screentint_image, image_popup_close and ht_info_image elements (Figure #38)

6.5 Select the 'delete' key on the keyboard to delete them (Figure #39)

7. Save and Output

7.1 Save the skin

7.2 Click on the 'Output Project' button (Figure #40)

7.3 Navigate to the 'Zoom_Pan_Multiple' folder and open it. Select 'Open' again and click on 'Yes' in the warning dialog window (Figure# 41, 42, 43)

7.4 Save the project

7.5 Output the project

8. Fix Firefox Thumbnail Issue

Note: in developing this tutorial I use Google browser to automatically view the projects generated by Pano2VR. I also check in Firefox using a rtclick on the index.html and an 'open with...'

In checking the final output I noticed an issue with the placement of the thumbnail images within the text field. With the image being offset to the right and down (Figure #44)

Figure 44: Thumbnail view issue in Firefox

Note: to resolve it we need to create an alternative <iframe> block of code with a margin offset and create a logic block to apply the alternative iframe code for Firefox browsers.

8.1 Click on the 'Skin Editor' button to open the skin, select the 'preview_thumbnail' element and open the Properties > Text dropdown menu (Figure #45)

Figure #45: preview_thumbnail Text Properties

8.2 Click on the Text: logic block button to open the Logic Block Settings and paste in the following alternative iframe code into the logic block Text: field (Figure #46)

<iframe src="$(*MyPageURL)/thumbnails/$(*MyNodeNumber).png" style="margin-left: -8px; margin-top: -8px;" frameborder="0"></iframe>

Note: the new code has an inline style that sets a negative 8px margin for the left and top

8.2 Click on the Trigger 'Player Width' to open the dropdown menu and select 'Advanced > Browser' (Figure #47)

8.2 Click on the Value '0' to open the dropdown menu and select 'Firefox' (Figure #48)

8.3 Select 'OK' and the logic block button is now highlighted and active (Figure #49)

8.4 Save the skin, output the project and open the index.html file in Firefox. The thumbnail images are now alined as expected (Figure #50)

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