Overview
This “Pano2VR V7” 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. You can download the software here. In following these tutorials a working knowledge of Pano2VR is an advantage.
Final Output
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)
Figure #1: Tutorial Folder
Project Overview
In this tutorial, we will modify the cloned_hotspots_base.p2vr project file and the cloned_hotspots_base.ggsk skin by;
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 Point Hotspots ⇑ #top
1. Open the cloned_hotspots_base.p2vr into Pano2VR Beta 74a (figure #2)
Figure #2: cloned_hotspots_base.p2vr
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)
Figure #3: Youtube links
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)
Figure #5: Video data entered into the Point Hotspot Properties
7. Repeat for the other two Point Hotspots adding the video links
8. Save the project as cloned_hotspots_links.p2vr
9. Publish the project to produce the output below
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)
Figure #6: cloned_hotspots_base.ggsk
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)
Figure #7 Hide in Cavas
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)
Figure #8: hotspot_cloner_video_button properties
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)
Figure #11: Component Toolbox
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)
Figure #14: Cloner properties
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)
Figure #15: button added to the cloner
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)
Figure #17: container properties
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)
Figure #20 component Show Cloner - Show Hotspots
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)
Figure #21: component added to the skin
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 ⇑
"Hey there! 👋 If my tutorials have made your tech life a little easier (or a lot less confusing), consider buying me a virtual coffee! ☕️ Retirement means more time to help you, but sadly, less income for snacks. Click the Donation button 🙌 and thanks for the love!"
