Overview

This “Pano2VR V7 Beta 4” tutorial shows you how to use the new Cloner option “Hotspots” to create a dropdown menu displaying a list of Youtube videos that open in a YouTube video player popup window.

Prior to V7 the only source options available were Nodes and Tables. V7 introduces Hotspots, Floorplans and Translations.

Note: this tutorial is designed for Pano2VR V7 Beta 4. You can download the software here. In following these tutorials a working knowledge of Pano2VR is an advantage.

Final Output

Open in a Browser Window

Tutorial Files

In the tutorial folder, Cloner_Hotspots, there is an asset Folder with 2 components, links to YouTube videos and a panorama. There is also a V7 Pano2VR project ‘cloned_hotspots_base.p2vr', a skin 'cloned_hotspots_base.ggsk' and an empty output folder called 'cloned_hotspots_v7'. (figure #1)

Project Overview

In this tutorial, we will modify the cloned_hotspots_base.p2vr project file and the cloned_hotspots_base.ggsk skin by;

Adding Youtube links to existing Point Hotspots
Add Actions to the Hotspot Template to open the videos in the Youtube Video Player
Use a Cloner to clone the Point Hotspots into a button base dropdown menu
Add a button to toggle between a Point Hotspot and Clone menu view

Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it

Step 1 - Getting Started

1. Download the zipped tutorial folder here

2. Extract the files

3. From the assets > components folder add the two components, ‘show_button.ggskc’ and ‘video_icons.ggskc’ to the Component Toolbox

Note: In this tutorial I have created a category in my Component Toolbox called ‘Cloned Hotspots’ but you can use an existing category or create a new one.
In the finished example I there is a small video icon on the left of the title that changes color on mouse over and a show/hide button to show/hide the Point Hotspots and Hotspot Cloner menu.
If you don’t want to use the components you can skip any reference to them in the tutorial.
If you are unfamiliar with the Component Toolbox or want more information on how Components work in Pano2VR check out this video from Martin Hopkins.

Step 2 - Setting up the Hotspot links

1. Open the cloned_hotspots_base.p2vr into Pano2VR Beta 74a (figure #2)

Note: The project contains 3 Point Hotspots in the node. The first step is to add YouTube links to each of the Point Hotspots

2. Open the ‘youtube video links.txt’ file found in the assets>youtube links folder into a text editor (figure #3)

3. Copy the link for the first video

4. Click on the first Point Hotspot to open the Point Hotspot Properties panel

5. Paste the link into the YouTube ID: text field (figure #4)

Figure #4: Add link to the YouTube ID: text field

6. Select return and the Title and YouTube ID are entered into the relevant property fields (figure #5)

Note: Clicking on a hotspot will open the video player and play the associated video. Clicking on the Close button or the background will close the video and display the Point Hotspots.

Step 3 - Setting up the Hotspot Cloner

1. Open the Skin Editor to show the cloned_hotspots_base.ggsk (figure #6)

Note: The skin is prepopulated with a Video Popup Silhouette (YouTube) component that is comprised of a Hotspot Template ht_video_youtube and a video_popup_youtube element. The component has been sourced from the Component Toolbox.

2. Select all the elements in the tree, right-click and select ‘Hide in Canvas’ (figure #7)

Note: This gives us a clean canvas to work on while we create the elements for our cloner
The next step will be to build a button that will be used to display the video icon and title of the link as well as containing the actions to open the video.

3. Add a text box to the canvas and set the following Properties;

Position > ID: hotspot_cloner_video_button
Position > Size: > Width: 250px | Height: 40px
Appearance > Hand Cursor: = checked
Rectangle > Color: Black
Rectangle > Border: Width: 0
Text > Text: $(ctitle)
Text > Color: White
Text > Align: Horizontal: Left | Vertical: Center
Text > Formatting: uncheck = Scroll bar
Text > Formatting: check = Enable trailing ellipses
Text > Padding: top=10 | right = 10 | bottom = 10 | left = 40
Advanced > CSS Classes: title (figure #8)

Note: $(ctitle) will display the current hotspot title in the cloner and the CSS Classes ‘title’ will use the CSS from the hotspot_cloner_ce Code Element.
The button in the cloner will work in the same way as the Point Hotspots when they are Mouse Clicked. To do this the actions from the Point Hotspot to the button are copied to the button.

4. In the tree, select the ht_video_youtube Hotspot Template element

5. In the Properties > Actions shift select both actions

6. Right-click and select ‘Copy’ (figure #9)

Figure #9: copy actions from the ht_video_youtube Hotspot Template element

7. In the tree, select the hotspot_cloner_video_button element

8. Open the Properties > Action panel, right-click and select ‘Paste’ (figure #10)

Figure #10: paste actions from the ht_video_youtube Hotspot Template element into the hotspot_cloner_video_button element

11. Save the skin as cloned_hotspots_button.ggsk

Note: In my finished sample I have a small video icon on the left of the title that changes color on mouse over and a show/hide button to show/hide the Point Hotspots and Hotspot Cloner menu.

12, Open the Component Toolbox, navigate to the category you saved the components into (figure #11)

13. Double-click on the Video_Icons component to add it to the skin (figure #12)

Figure #12: video_icon component added to the skin

14. Drag the two video icons onto the hotspot_cloner_video_button to make them children of the button

15. Set the following Properties of the video icons to:

Position > Position: X: 5px Y: 0px (figure #13)

Figure #13: video icon added to the button

Note: The video_icon component already has actions to show and hide when the mouse is over the parent so there is nothing more required
The next step is to add and configure the cloner

15. Add a ‘draw cloner’ to the canvas and set the following Properties;

Properties: ID: hotspot_cloner_youtube
Properties > Position: X: 20px Y: 20px
Properties > Size: Width: 450px Height: 45px
Properties > Cloner: Clone Direction: Vertical
Properties > Cloner: Source: Hotspots
Properties > Cloner: Filter: Skin ID: ht_video_youtube (figure #14)

16. Drag the hotspot_cloner_video_button into the hotspot_cloner_youtube element

17. Select the hotspot_cloner_video_button and set the following Properties:

Properties: Position: X: 0px and Y: 0px
Properties: Position: Size: Width: 100.00 Percent (figure #15)

17. Save the skin as cloned_hotspots_cloner.ggsk and close the skin

18, Publish the project to produce the output below

Note: Clicking on either the Cloner Buttons or the Point Hotspots will open the video and player.
in the output we can see both the Cloner Buttons and the Point Hotspot buttons so we will finish up the skin and hide the Point Hotspots, add in some mouse over effects on the Cloner Buttons, scaling options for the button width and a button to show/hide the Point Hotspots and Cloner

Step 4. Hide the Point Hotspots

1. Open the Skin Editor

2. In the tree select the ht_video_youtube Hotspot Template

3. In Properties set the Properties > Appearance > Visible: = unchecked (figure #16)

Figure #16: uncheck visible to hide the Point Hotspots

Step 5. Sizing the cloner buttons

Note: Set a max and minimum width for the cloner and buttons by adding a container for the hotspot_cloner_youtube element

1. Select ‘Draw Container’ from the menu and drag a rectangle over the hotspot_cloner_youtube element

2. Select the Container 1 element and set the following properties:

Properties: Position: ID: hotspot_cloner
Properties: Position: Size: Width: 40.00 Percent
Properties: Appearance: Alpha: Logic Block: *vis_youtube = true
Properties: Appearance: Alpha: Logic Block: Alpha: = 0.000
Properties: Advanced: CSS Classes: clonerwidth (figure #17)

Note: ‘clonerwidth’ is a class set in the cloned_hotspots_ce code elements file and sets a max-width: 450px and a min-width: 360px.

3. Select the hotspot_cloner_youtube element and set the following properties:

Properties: Position: Size: Width: 100.00 Percent (figure #18)

Figure #18: set properties for hotspot_cloner_youtube element

Step 6. Mouse Over Effects

Note: Add Mouse Over effects to the cloner button

1. Select the hotspot_cloner_video_button element and set the following properties:

Properties: Rectangle: Color: Logic Block: Mouse Over = true
Properties: Rectangle: Color: Logic Block: Background Color: HTML: #aaaa7f
Properties: Text: Color: Logic Block: Mouse Over = true
Properties: Rectangle: Color: Logic Block: Background Color: HTML: #000000 (figure #19)

Figure #19: Mouse Over colors for the cloner button

Step 7. Show and Hide

Step 4d: The example shown at the beginning of the tutorial has a button that shows/hides the Point Hotspots or Hotspot Cloner. This is only an example to show the Hotspots Cloner vs Point Hotspots but could easily be modified to create an option whereby the desktop showed the Point Hotspots but a Mobile Device showed the Hotspot Cloner menu.

1, Open the Component Toolbox, navigate to the category where you saved the components and select the Show Cloner - Show Hotspots component (figure #20)

2. Double-click on the Show Cloner - Show Hotspots component to add it to the skin

Note: The component will appear in the tree as a container called ‘buttons’ (figure #21)

Note: The Show Cloner - Show Hotspots component add two new variables to the skin, vis_cloner and vis_hotspots. The hotspot_cloner and ht_video_youtube elements need to use these variables to affect their visibility.

3. Select the hotspot_cloner container and set the following properties:

Properties: Appearance: Visible: = unchecked
Properties: Appearance: Visible: Logic Block: *vis_cloner = true
Properties: Appearance: Visible: Logic Block: Visible: = true (figure #22)

Figure #22: applying variable to hotspot_cloner

4. Select the ht_video_youtube Hotspot Template and set the following properties:

Properties: Appearance: Visible: Logic Block: *vis_hotspots = true
Properties: Appearance: Visible: Logic Block: Visible: = true (figure #23)

Figure #23: applying variable to ht_video_youtube

5. Save the skin as cloned_hotspots_final.ggsk and close the skin

6. Publish the project and the tutorial is finished.

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

Back to 'Pano2VR Beta V7 Homepage

Cloner Action “Hotspots”