Overview
This “Little Bits” tutorial show you how to add an image thumbnail to the Image Popup component.
Note: this tutorial is designed for Pano2VR V6.1.2. As “Little Bits” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.
Final Output
Note: when you mouse over the hotspot icon the tooltip and image thumbnail appear. Clicking on the hotspot opens the large image.
Tutorial Files
In the tutorial folder, Image Thumbspot, there is an Asset Folder with 2 images, thmb_papua.jpg and lg_papua.jpg and an equirectangular image. There is also a Project folder with a Pano2VR project 'image_thumb.p2vr', a skin 'image_thumb.ggsk' and an Output Folder called 'image_thumb' with project files created from the .p2vr and .ggsk elements. (Figure #1)
Figure #1: Tutorial Folder
Project Overview
In this tutorial we will modify the imagethumb.p2vr project file and the imagethumb.ggsk skin by;
adding external files to the project
add the image popup component to the skin
modify the ht_image element to include a thumbnail preview
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
Project
1. Download the zipped tutorial folder here
2. In the Project folder open the project file ‘image_thumb.p2vr’ (Figure #2)
Figure #2: Project File
Note: the first step is to load our thumbnail and large image into the project.
3. From the Output menu scroll down to the Advanced tab
4. Open the ‘Advanced’ tab, scroll down to Assets section and click on ‘Add Files’ (Figure #2)
Figure #2: Assets section
3. Navigate to the Assets folder in the Tutorial folder, shift click the two image files and select Open. The files are added to the Asset list. (Figure #4)
Figure #5: Assets added
Note: when you next publish the project the Assets folder will be created and the files copied into it.
5. Save and re-output the project
6. The image_thumb output folder now contains an Assets folder with two images in it. (Figure #6)
Figure #6: assets folder added to the project output folder with 2 images
7. Add a hotspot to the panorama and set it’s type as ‘Image’. Add a Title: popup thumbnail and click on the ‘Link Target URL’ folder icon.
8. Navigate to the assets folder in the tutorial output folder image_thumb, select the lg_papua.jpg image and click Open. (Figure #7)
Figure #7: Linking the Target URL of the Image hotspot to the large image
9. Save the project.
The Skin
1. Click on the ‘Edit Skin’ button to open the skin
2. Click on the ‘Components Toolbox’ icon in the menu bar to open the toolbox
3. Locate the ‘Image Popup Simplex’ component in the 'Built-In’ category (Figure #8)
Figure #8: Image Popup Simplex component
4. Double click on the component to add it to the skin and Close the Component Toolbox (Figure #9)
Figure #9: Component added to the skin
5. Save the Skin
6. Re-output the project
Note: now you see the hotspot icon and when you mouse over the hotspot you see the text tooltip. Clicking on the hotspot opens the image. Now we will add the thumbnail image.
7. Click on the ‘eye’ symbol next to the tree elements; image_popup_close, image_popup and screentint_image to hide them in the canvas.
8. Click on the arrow next to the ht_image element to show the child elements within it.
9. Select the ht_image_CustomImage to make it active and set the following Properties:
Position:
Position: X: = 0px, Y: = -75px
Size: Width: & Height: = 100px
Appearance:
Visible: Unchecked
Visible: Logic Block change to: Trigger = Mouse Over Parent | Comparison = | Value = true | Visible = true (Figure #10)
Figure #10: ht_image_CustomImage Position and Appearance settings
External Image:
External URL: = assets/thmb_papua.jpg (Figure #11)
Figue #11: ht_image_CustomImage External Image settings
10. Save and Close the skin
11. Re-output the project and now you have a thumbnail preview on Mouseover
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.
