Project - Final Output

This tutorial provides a step-by-step instructions on how to take a default Image Hotspot and apply a circular thumbnail preview to it. At the end of the tutorial the final output will be similar to the example below.

Tutorial Files

You can download the Circular Hotspot Tutorial zip file here.

In the tutorial folder Circular Hotspot Tutorial there is an Asset Folder with a preview image elephant-seal-thumb.jpg, popup image elephant_seal.jpg and an equirectangular image whaling-ship.jpg, a Project folder with a Pano2VR project 'Elephant_Seal.p2vr', a skin 'Elephant_Seal.ggsk' and an Output folder called 'Elephant_Seal' with a standard Image Hotspot effect. (Figure #1)

Elephant_Seal project from the Tutorial Folder

Note: the images elephant-seal and whaling-ship 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

Overview

In the tutorial we will modify the Elephant_Seal project and skin and;

Add the Preview Image
Set the Preview Image Sizes
Align Preview Elements
Set the Preview Container
Finish the Skin & Test the Preview
Fix the Text Wrap
Update the Popup Image
Update the Hotspot Title

Note: this tutorial assumes a basic knowledge of Pano2VR V5 or V6 beta3

Getting Started

1. Download the zipped tutorial folder here

Note: Once you have downloaded the zip file and extracted it you can open the .p2vr file and view it or simply right click on the index.html file and open in Firefox.

Add the Preview Image

1. Open the tutorial project 'Elephant_Seal.p2vr' (Figure #2)

2. Open the Skin Editor (Figure #3)

3. Click on the 'eye' icon to hide the 'image_popup' elements (Figure #4)

Note: this makes it easier to see the ht_image elements

4. Click on the 'Add Image' button and click once in the Canvas to open a finder window. From the tutorial 'Assets' folder select 'elephant-seal-thumb.jpg' and click 'Open" (Figure #5)

Figure #5: Add the thumbnail image to the skin

5. The thumbnail will appear in the Canvas and at the top of the Tree (Figure #6)

Figure #6: Thumbnail image in the Canvas and at the top of the Tree

Set Preview Image Sizes

1. With Image 1 selected, set the Properties > Position > Size to 100 x 100 pixels (Figure #7)

2. Click on the Arrow next to the 'ht_image' hotspot to expand it and show it's contents (Figure #8)

3. Drag the 'Image 1' element into the 'ht_image' hotspot below the 'tt_ht_image' element (Figure #9)

4. Select the 'tt_ht_image' element to highlight it and set the Properties > Position > Size: to 100 x 40 pixels (Figure #10)

5. With the 'tt_ht_image' element still selected set the Properties > Text > Align: uncheck 'Auto Size' and Padding: Top/Bottom: 4 and Left/Right: 0 (Figure #11)

Align Preview Elements

1. Shift select both 'tt_ht_image' and 'Image 1' elements (Figure #12)

Note: Select the 'tt_ht_image' element first. The element you select first determines the final position of any alignments. By selecting 'tt_ht_image' first the 'Image 1' element will be positioned directly over the hotspot

2. Select Menu > Edit > Align Elements > Horizontal Centers (Figure #13

Figure #13: Aligning Horizontal centers of both elements places the thumbnail over the hotspot

3. Select Menu > Edit > Align Elements > Bottom Edges (Figure #14)

Figure #14: Align both elements to the bottom

Set the Preview Container

Note: the preview container will mask out the elements within it so we use it to contain the preview elements. The CSS code will define the shape and appearance of the container

1. With the 'tt_ht_image' and 'Image 1' elements selected click on the 'Draw Container' button and click once into the canvas to create the container (Figure #15)

Figure #15: Create a container around the preview elements

Note: the container should automatically fit to the size of the combined elements.
If the container is not constrained around the elements but is sitting somewhere else on the canvas you can align it in the following way.
a. Make sure you don’t have any elements in the tree selected
b, Click on the 'Draw Container' button and click once into the canvas to create the container
c. With ‘Container 1’ selected in Properties/Size: set the Width and Height to 100 x 100px
d. If it isn’t already set the Properties/Position Anchor: to top left
e. Drag the ‘Container 1’ element down the tree into the node element ht_image
f. In the Properties/Position set the X: to -50 and the Y: to -39 (to match the Position values of Image 1)
g. Shift select the elements ‘tt_ht_image’ and ‘Image 1’ and drag them onto the ‘Container 1’ element
h. Proceed to step #3

2. In the Tree panel, drag the 'tt_ht_image' element above the 'Image 1' element (Figure #16)

3. Select 'Container 1' to highlight it and in Properties > Advanced > CSS Styles: click on the 'pencil' icon to open the CSS Styles window. Cut and paste the following style into the text field and select 'OK' to close the window (Figure #17)

overflow: hidden; border-radius: 50%; border-style: solid; border-width: 2px; border-color: white

Figure #17: Adding in the styling code to the Container 1 element

Note: you cannot see the effect of the style in the Skin Editor but it will be applied when you generate the project output

Finish the Skin & Test the Preview

Note: as we are now using the circular thumbnail preview as the button to trigger the image popup we don't need the small hotspot icon anymore

1. Select 'ht_image_image' element to highlight it and cut it or select the delete key to remove it (Figure #18)

2. Save the Skin

3. In the main project window, Output panel, click on the Output > 'Generate Output' button to generate the updated preview (Figure #19)

Note: When you mouseover the circular thumbnail preview the text is partially obscured by the crop of the circle (Figure #20)

Figure #20: Circular preview showing obscured text on mouseover

Fix the Text Wrap

1. In the Viewer window of the main project select the Point Hotspot to highlight it and click on the Properties button to open the Point Hotspot properties panel (Figure #21)

Figure #21: Select the Point Hotspot and open the Properties panel

2. Change the text in the Title: field to Elephant<br>Seal. (Figure #22)

Note: this will force the word 'Seal' to be on a second line

3. Generate the project to see the changes (Figure #23)

Figure #23: new version with updated title text

Update the Popup Image

Note: to make the image more like the preview we will add a white border to the popup image

1. Open the Skin Editor, click on the 'eye' icon next to the 'image_popup' container to make it visible. Expand the 'image_popup' container and select the 'popup_image' element (Figure #24)

Figure #24: Select the popup_image element

2. In the Properties > Advanced > CSS Styles Inner Element: click on the 'pencil' icon to open the CSS Styles window. Cut and paste the following style into the text field and select 'OK' to close the window (Figure #25)

border-style: solid; border-width: 2px; border-color: white

3. Save the Skin and generate a new version of the project (Figure #26)

Update the Hotspot Title

Note: If your mouse is over the 'tt_ht_image' element when you mouse click you will see the text when the image loads. To avoid this we will set an action that hides the element when the hotspot is clicked on (Figure #27)

1. Open the Skin Editor, and click on the 'ht_image' hotspot to highlight it. In Properties > Actions > Double click in the empty source field to open the Action Settings window. (Figure #28)

Set the following; Source: Mouse Click | Action: Visibility | Type: Hide Element | Target: #tt_ht_image and click 'OK'

Figure #28: Add an action to hide the tt_ht_image element

3. Save the skin and generate a new version of the project

Note: that concludes the the tutorial. Any comments or suggestions are welcomed.

Tony

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