Overview
Once you start working in Pano2VR you quickly realise that the Skin Editor is a very powerful part of the software application. The Skin Editor allows us to create unique User Interfaces and Interactivity inside our tours.
However during the development of a project the skin can be quite complex and requires the management of a large number of skin elements, such as interactive Components, Actions and Logic Blocks.
In this tutorial I’m going to take a look at a process that I call “Trimming the Tree”.
I will take you step by step through “Trimming the Tree” and you will learn how reduce the number of elements that have similar functionality, within the tree. Using Logic Blocks, Actions and Action Filters you can even manage multiple Point Hotspots from a single Hotspot Template.
As an example the single node project we will be starting with is built with 3 Point Hotspots and 3 Skin Components; resulting in a total of 26 unique elements in the tree.
After “Trimming the Tree” the tree will contain only 14 unique elements; a 56% reduction in the number of elements all without any loss of functionality. In fact, productivity is increased as changes made to a single element can be applied globally and Hotspot Actions are in one element. (Figure #1)
Figure #1: Before and After trimming
Final Output
This is the finished project, built using the trimmed skin, with hotspot custom images. (see below)
Hotspots
Before we start it’s helpful to have a good understanding of Hotspots as they are one of the essential elements in a Pano2VR project.
The Point Hotspots function is to define a point of interactivity in your panorama and they move with the panorama. Point Hotspots are managed within the ‘Viewer’
Point Hotspots work in conjunction with Hotspot Templates. Hotspot Templates are managed within the ‘Skin Editor’
Point Hotspots
When you add a Point Hotspot to panorama it comes with a set of Properties. The basic properties are as follows:
ID: Automatically generated or manually defined
Type: Dropdown with 5 fixed options; URL, Tour Node, Image, Video & Info
Skin-ID: Automatically generated or manually defined
Title: Automatically generated or manually defined
Description: Manually defined
Link Target URL: Automatically generated or manually defined
Target: Dropdown with options or manually defined
Pan: Current position of Point Hotspot along the horizontal axis of the panorama; can be manually defined
Tilt: Current position of Point Hotspot along the vertical axis of the panorama: can be manually defined
Custom Image: Select file button
Individual Hotspot Types have additional properties such as;
Tour Node:
Link Target URL: Follow Hotspot Link button
Target: Target Viewing Parameters button
Distance: The distance between nodes. If the panoramas have GPS, distance can be determined automatically by selecting Auto. (Figure #2)
Figure #2: Tour Node Point Hotspot Properties
Image:
Link Target URL: Select File button
Video:
Type: Source: Automatically generated
Note: for more information on these properties visit Point Hotspot Properties on the Garden Gnome Software website.
Hotspot Templates
Hotspot Templates are skin elements that you add to your skin. By assigning an ID to the Hotspot Template that matches a Point Hotspot ID you can add skin functionality to that Point Hotspot.
Conveniently Pano2VR comes with fully configured Hotspot Template Components that match the various Point Hotspot Types.
For example, in my panorama, I have a Point Hotspot of the Type ‘Info’
In the Point Hotspot Properties I have defined the following properties;
Title: King Penguin
Description: The King Penguin is the second largest species of penguin, smaller but somewhat similar in appearance to the Emperor Penguin
(Figure #3)
Figure #3: Point Hotspot Properties for ht_info
In my skin I’ve added the Skin Component ‘Information Popup Silhouette’ from the Built-In Category inside the Components Toolbox (Figure #4)
Figure #4: Skin with the Information Popup Silhouette component
Note: both the Point Hotspot and the Hotspot Template have the same ID, ht_info. This means that interactions with the Point Hotspot are actioned within the skin on the Hotspot Template (See below)
Direct View - Info Point Hotspot
Multiple Hotspots
So far so good, but what happens when we start adding in additional hotspots?
In the next example I’ve added another Point Hotspot of the Type: Video Source: YouTube
In the Point Hotspot Properties I have defined the following properties;
Title: Whaling Station
Link Target URL: bccwdlR1qf0
(Figure #5)
Figure #5: Point Hotspot Properties for ht_video_youtube
In my skin I’ve added the Skin Component ‘Video Popup Silhouette (YouTube)’ from the Built-In Category inside the Components Toolbox (Figure #6)
Figure #6: Skin with the Video Popup Silhouette (YouTube) component
Note: both the Point Hotspot and the Hotspot Template have the same ID, ht_video_youtube. This means that interactions with the Point Hotspot are actioned within the skin on the Hotspot Template (See below)
Direct View - Info and Video YouTube Point Hotspot
Let’s add one more Point Hotspot.
This time I want to open a website into the panorama so I’ve added a Point Hotspot of the Type: URL
In the Point Hotspot Properties I have defined the following properties;
Title: Petrel Whaler
Link Target URL: https://en.wikipedia.org/wiki/Petrel_(1928_ship)
(Figure #7)
Figure #7: Point Hotspot Properties for ht_url
In my skin I’ve added the Skin Component ‘Web Link Silhouette’ from the Built-In Category inside the Components Toolbox (Figure #8)
Figure #8: Skin with the Web Link Silhouette component
Note: both the Point Hotspot and the Hotspot Template have the same ID, ht_url. This means that interactions with the Point Hotspot are actioned within the skin on the Hotspot Template (See below)
Direct View - Info, Video YouTube and Web Page Point Hotspots
Reviewing the Tree
In the tutorial files, 3 Point Hotspots have been added to the viewer and 3 Hotspot Templates to the skin. A quick look at the Skin Editor Tree shows us that we have 26 elements in the Tree (Figure #9)
Figure #9: Skin Editor Tree
Getting Started
In Part 1 of this tutorial we will modify the trimming-the-tree.ggsk skin by;
Consolidating the Logic Block settings of all screentint elements into one Logic Block
Consolidating the Action settings of all screentint elements into one Action dropdown
Adding Action Filters to assign the actions to the relevant Hotspots
Reducing the number of Screentint elements to 1
Copying the Visible Logic Block settings of the screentint element into the Visible Logic Block 0f a popup_close button
Copying the Action settings of all screentint element into the Actions of a popup_close button
Add a Node Marker to the skin and use it to clone the popup_close button
Set the Position of the Node Marker popup_close buttons
Note: click on any image in the tutorial to enlarge it
Tutorial Files
In the tutorial folder, Trimming-the-Tree, there is an Asset Folder with 3 custom images and a panorama ‘Whaling-Ship’. There is also a Project Folder with a Pano2VR project 'trimming-the-tree.p2vr', a skin 'trimming-the-tree.ggsk' and finished project files from Step 1 and 2, and an Output Folder called 'trimming-the-tree' with a finished project created from the .p2vr and .ggsk elements. (Figure #10)
Figure #10: Tutorial Folder
Download the Tutorial Files here
Note: this tutorial has been built in Pano2VR V6.1.5. You can download the software here. A working knowledge of Pano2VR is an advantage.
Trimming 1: Screentints
1. Open the trimming-the-tree.p2vr file
2. Open the Skin Editor and review the Tree
Note: Looking at the elements in the tree we can see that a number of them are duplicates. For example we have screentint_info, video_screentint_youtube and screen_tint_url whose properties are the same but whose visibility is determined by the value of a Variable specific to that element.
For example, screentint_info visibility is triggered by the value of the variable vis_info_popup in the elements Visible: Logic Block (Figure #11)
Figure #11: Logic block for screentint_info Visibility property
video_screentint_youtube is triggered by the value of the variable vis_video_youtube and screentinturl is triggered by the value of the variable vis_website
Therefore if we combined all the logic triggers into one Logic Block we can reduce the number of individual screentint elements to 1.
3. Let’s start by selecting the screen_tint_url element and opening the Visible: Logic Block window.
Note: It has a Visible Logic Block that sets it’s visibility to True when the Variable, vis_website = True (actioned by clicking on the ht_url hotspot) and an Action on Mouse Click that sets the same variable to false, thereby hiding itself (Figure #12)
Figure #12: screen_tint_url element Logic Block and Action
Note: We will retain the screentint_info element so we need to copy the screen_tint_url Logic Block trigger and paste it into the screentint_info Visible Logic Block Settings. We will also need to copy and paste the screen_tint_url Action into the screentint_info Actions.
4. In the screen_tint_url Logic Block Settings window right click in the vis_website trigger, select ‘copy’ and close the window
5. Select the screentint_info element, open the Visible: Logic Block window and right click in the empty trigger and select ‘paste’ (Figure #13)
Figure #13: Steps 4 & 5 copy and paste from one logic block to another
6. Close the window and repeat steps 4 & 5 with the video_screentint_youtube Visible: Logic Block (Figure #14)
Figure #14: All screentint triggers in screentint_info Logic Block
Note: we want the triggers to be independent of each other so we need to set the ‘Operation’ to ‘Or’ . This means that when any of the variables are true the screentint_info will be visible
7. Select ‘Or’ from the ‘Operation’ dropdown menu and close the window (Figure #15)
Figure #15: Set Operation for all triggers to Or
Note: Each screentint element also has Actions that close the popup if the viewer clicks on the screentint. We need to combine these Actions in the same way we combined the Logic Block Triggers.
8. Select the screen_tint_url element and in the Properties > Actions right click on the Mouse Click Action and select ‘copy’ (Figure #16)
Figure #16: Copy the screen_tint_url Action
9. Select the screentint_info element and in the Properties > Actions right click in a blank field and select ‘paste’ (Figure #17 & 18)
Figure #17: Paste the screen_tint_url Action into the screentint_info Actions
10. Repeat steps 8-9 with the video_screentint_youtube Action (Figure #18)
Note: now that all of the Logic Block Triggers and Actions are combined into the screentint_info element we can delete the other two screentint elements
11. Close all the expanded elements and select the screen_tint_url and video_screentint_youtube elements and delete them from the tree (Figure #18)
Figure #18: Tree with only screentint_info
Note: As all of the Actions are now in one element we need to make sure that the correct Mouse Click Action is used in relation each Point Hotspot.
To achieve this we will add Action Filters, using the Variable Value set by each Point Hotspot when clicked
12. Select the screentint_info element and double click on the first Mouse Click Action to open the Action Settings window
13. Click on the Action Filter button to open the Action Filter window
14. Double click in the empty Trigger field and from the dropdown menu select Variables > *vis_info_popup (the Comparison and Value will default to = true
15. Select ‘OK’ for the Action Filter and Action Settings windows and a small asterisk will appear next to the Source Action indicating it has an Action Filter attached to it (Figure #19)
Figure #19: Adding an Action Filter to the Mouse Click Action
16. Do the same for each Mouse Click Action taking care to remember that the first 3 Actions are associated with *vis_info_popup, the 4th and 5th are associated with *vis_website and *vis_video_youtube variables respectively
17. Rename screentint_info ID: to screentint
18. Save the skin and republish the project (see below)
Direct View - Trimmed Screentints
Note: even though we have deleted two of the screentint elements the output works in exactly the same way as before. Clicking on a Point Hostpot opens the relevant popup (with screentint) and clicking on the screentint closes the popup.
The next step is to reduce the number of Close Buttons
Trimming 2: the Close Buttons
1. Move all Hotspot Template Components to the bottom of the tree (Figure #11)
Figure #11: Moved Hotspot Templates
Note: in the tree we have 3 close buttons that close the popup elements. They are close_url, video_popup_close_youtube and info_popup_close.
The first two buttons are positioned relative to the skin canvas while the last is positioned inside the information container and positioned relative to the container. (Figure #15)
Figure #15: Position of close buttons in the tree
Note: In order to trim the tree we need to have a single button replicated in the two different locations. We will accomplish this using Node Markers.
2. Hide the web_page element, video_popup_youtube container, screentint element, and the 3 Hotspot Templates.
3. Open the information container and drag the info_popup_close button to the bottom right and outside of the canvas
4. In the Tree move it to the bottom
5. Rename the ID: popup_close and set the Anchor point to centre (Figure #16)
Figure #16: Reposition and rename info_popup_close button
Note: To see elements that are Off-Canvas select Menu > View > Show Off-Canvas Elements
Note: We need to repeat the steps we used in the Trimming 1: Screentint section to amalgamate Triggers and Actions into one element
6. Select the screentint element to make it active, open the Visible: Logic Block and select Copy from the buttons (bottom left) and select OK.
7. Select the popup_close element to make it active and in the Properties > Appearance > Visible: uncheck
8. Click on the Visible: Logic Block button and select Paste from the buttons (bottom left) and select OK
9. Select the screentint element to make it active and in the Properties > Actions select all the Actions, right click and select copy (Figure #17)
Figure #17: Select and copy all actions from the screentint element
10. Select the popup_close element to make it active and in the Actions delete the existing three Actions
11. Paste in the Actions copied from the screentint element (Figure #17)
Figure #17: Visible Logic Block and Actions for popup_close button
12. Delete the close_url and video_popup_close_youtube elements from the tree
13. Select ‘Add Node Marker’ from the menu and click once in the skin to add it
14. Rename Marker 1 ID: to popup_close_button and set the Anchor to top right
15. In the Properties > Node Marker dropdown select popup_close from the Clone as Normal: dropdown (Figure #18)
Figure #18: Node Marker added to the skin, renamed and popup_close element cloned
16. Move to the popup_close_button element to the top right of the skin at approximately a Position: X: 20px x Y: 20px
17. Right click on the popup_close_button element in the tree and select Copy.
18. Right Click in a blank section of the tree and select Paste Element
19. Drag the duplicated popup_close_button element into the information container and set the Properties > Position> X: & Y: to 20px (Figure #19)
Figure #19: popup_close_button copied and moved to the information container
Note: as the popup_close_button is a child of the information container it’s visibility is controlled by the visibility of the container. As the popup_close_button on the top right of the skin is not a child of any container it needs to have logic assigned to it to control it’s visibility.
20. Select the screentint element, open the Visible: Logic Block, select Copy from the bottom buttons and select OK
21. Select the popup_close_button (at the top of the tree) and in Properties> Appearance> Visible: select uncheck
22 Click to open the popup_close_button Visible: Logic Block window and select Paste from the bottom buttons
23. Delete the *vis_info_popup Trigger and select OK (Figure #20)
Figure #20: popup_close_button Visible Logic Block
24. Save the skin and republish the project. The buttons are operational and appear in the correct locations.
Note: at the end of Part 1 we have trimmed 5 elements from the tree and replaced them with two basic elements the screentint and the popup_close.
Summary
I hope you have enjoyed Part 1 of the tutorial, click to view Part 2
If the tutorial has helped you please take a second to consider a donation so that I can continue to add more tutorials.
