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

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.

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

Figure #1: image_zoom_pan project file

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

Figure #2: Point Hotspot Properties

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
 

Figure #3: Updated Properties for the Leopard Point Hotspot

 
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)

 

Figure #4: Copy active point hotspot

 

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

 

Figure #5: Paste point hotspot

 

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

 

Figure #6: 2nd Point Hotspot positioned on the panorama

 

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)

 

Figure #6: Updated Properties for the Boomslang  Point Hotspot

 

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)

 

Figure #7: 3rd Point Hotspot positioned on the panorama

 

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)

 

Figure #8: Updated Properties for the Rhino Point Hotspot

 

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'

 Figure #9: image_zoom_pan.ggsk

Figure #9: image_zoom_pan.ggsk

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)

 

Figure #10: Variable entry

 

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

 

Figure #11: MyPageURL variable

 

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

 
 Figure #12: MyNodeNumber variable

Figure #12: MyNodeNumber variable

 

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

 

Figure #13: Save skin

 
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)

Figure #14: Set new position of ht_info

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)

Figure #15: Add rectangle

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
 

Figure #17: set rectangle properties

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

Figure #18: add text field

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

Figure #19: text field settings

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

Figure #20: set rectangle properties

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

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)

 

Figure #22: drag elements into 'ht_info' hotspot

 

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)

 

Figure #23: Draw Container

 

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 With the 'tt_information' element selected open the Properties > Position dropdown menu and apply the following settings; (Figure #26)

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

Figure #26 tt_information element position

3.15 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.15 Click on 'Container 1' to make it active and in Properties > Position change the ID: to hotspot_preview (Figure #28)

Figure #28: hotspot_preview ID settings

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: False

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)

 

Figure #30: hide hotspot_preview

 
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

 

Figure #31: MyPageURL action

 

4.2 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

 

Figure #32: MyNodeNumber action

 

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: 

<iframe src="includes/index.html" width="100%" height="100%" frameborder= "0" scrolling="no" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

to

<iframe src="$(*MyPageURL)/index.html#$(*MyNodeNumber)" width="100%" height="100%" frameborder= "0" scrolling="no" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe>

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)

 

Figure #41: Zoom_Pan_Multiple folder

 
 

Figure #42: Select 'Open'

 
 

Figure #43: Select 'Yes'

 

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>

 

Figure #46: alternative iframe code in Logic Block

 
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)

 

Figure #47: Trigger > Advanced > Browser

 

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

 

Figure #48: Value > Firefox

 

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

 

Figure #49: Logic Block active

 

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)

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia