Circular Hotspot Buttons

Project - Final Output

This tutorial provides a step-by-step instructions on how to take a default Image Hotspot and apply a circular 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)

 
circular_hotspots_#1.jpg

Contents of the Tutorial Folder

 

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)

Figure #2: Elephant_Seal project

2. Open the Skin Editor (Figure #3)

Figure #3: Elephant_Seal skin

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

Figure #4: Hide image_popup 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_thumbnail.jpg' and click 'Open" (Figure #5)

 Figure #5: Add the thumbnail image to the skin

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

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)

Figure #7: Set the thumbnail size

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

 

Figure #8: Expanded ht_image hotspot

 

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

 

Figure #9: Image 1 inside the ht_image hotspot

 

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

Figure #10: Set the size of tt_ht_image

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)

 

Figure #11: Uncheck 'Auto Size' and set padding

 

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

Figure #12: Shift select both elements

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 will automatically fit to the size of the combined elements

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

 

Figure #16: drag tt_ht_image above Image 1

 

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

 

Figure #18: Select and cut or delete the ht_image_image element

 

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)

 

Figure #19: Generate Output

 
Note: When you mouseover the preview image 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
 

Figure #22: Change the title text

 

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

 

Figure #25: css styling for the popup_image element

 

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

Figure #26: Updated popup window with CSS border applied

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)
 

Figure #27: title visible on mouseover after mouseclick

 

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

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia