Overview
"Building Virtual Tours that go beyond a simple showing of 360˚ images and incorporate interactive User Elements that enhance the experience are a standard in today’s virtual tours. However managing them to still show the beauty of the panoramas while providing easily accessed links to other elements and nodes within the tour is essential”
The Tutorial
In this first part of the tutorial, we’ll build a dyanmic side bar that slides on and off the screen, via an animated button, containing a menu that provide access to the nodes in the tour.
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.
Note: Click on any image to enlarge it
Project Overview
In this tutorial, we will be using the following steps;
Final Output Version: Red ⇑
Tutorial Folder ⇑
The tutorial folder contains all the required files to complete the tutorial. There is a Pano2VR project and a skin file. You can download the tutorial folder here (figure: tutorial folder)
Figure: Tutorial Folder
Setting up the Project ⇑
1. Open the slider_menu.p2vr
2, If the skin is not already added open the skin slider_menu.ggsk
3. Make sure the Output folder is set to Slider_Menu_Output
4. Publish the project
Note; Now all we are going to see is a single panorama #1 and no other user interface elements. This will be our base to develop from.
Banner and Button ⇑
The first step is to create a simple banner element and a button.
Banner Element
1. Open the Edit Skin window
2. Use Draw Rectangle and add a rectangle to the canvas
3. Set the following properties:
Set ID: menu_bg
Set Anchor to top right
Set X Y position to 0:0
Set Width/Height to 250:100%
Set Rectangle to Border width: 0 (figure #1)
Fi9ure #1: menu_bg properties
Add the Button Icon
1. Open the Components Toolbox (figure #2)
Figure #2: Components Toolbox
2. From the Feather > Icons list double-click the arrow-right-circle icon (figure #3)
Figure #3: arrow-right-circle icon
3. Click on the Close button and the icon has been automatically added to the Canvas in the top left corner and has an ID Svg 1 (figure #4)
Figure #4: Svg 1 icon
Elements with Animation ⇑
In this section we are going to build the button, position the button and the menu_bg element and then animate the opening of the menu.
1. Add another Draw Rectangle to the skin and set the following properties:
Set ID: menu_slider
Set Width/Height to 45:45 px
Set Rectangle to Border width: 0
Set Radius to 60 (creates a circle)
5. In the Tree, drag the Svg 1 into the menu_slider element and set the following Properties > Position:
Set ID: menu_button
Set Anchor to center
Set X Y position to 0:0
Set Width/Height to 45:45 px
and Properties > Appearance
Set Rectangle to Border width: 0
6. In the Tree select the menu_slider element and drag it into the menu_bg element and set the menu_slider properties as follows:
Set Anchor to left-center
Set X Y position to -60:0 px (figure #5)
Figure #5: Menu slider button
Note: by adding the button as a child to the menu_bg as the menu moves the button will move with it.
Adding Movement
1. In the Tree select the menu_slider element
2. Open the Properties > Actions panel and create an action with the following properties: Source = Mouse Click | Action = Toggle Element Position | Parameters = -250/0 | Target = menu_bg
Note: As the menu will initally be off-screen this will set the distance (250px) that the menu will move to when it enters on-screen (figure #6)
Figure #6: menu_slider mouse click actions
3. In the Tree select the menu_button element
4. Open the Properties > Appearance panel
5. Set the Angle = 180.0
Note: as we will start with the menu hidden off-screen the arrow should point to the left. Setting the angle to 180 sets the direction of the arrow element (figure #7)
Figure #7: Set angle to 180
6. In the Tree select the menu_slider element
5. Open the Properties > Actions panel and create an new action with the following properties:
Source = Mouse Click | Action = Toggle Element Angle | Parameters = 0/0 | Target = menu_button (figure #6)
Note: this action changes the direction of the arrow element to point off the screen (figure #8)
Figure #8: Changes the direction of the arrow
6. With the menu_slider still selected open the Properties > Actions panel and create an new action with the following properties:
Source = Mouse Click | Action = Toggle Element Position | Parameters = 40/0 | Target = menu_slider
Note: In this action setting we are adding a delay of 1.000sec. This action allows time for the menu to complete its move onto the screen. Then the button will reposition to overlap the menu (figure #9)
Figure #8: Reposition the button with a delay of 1 second
7. In the Tree select the menu_bg element
8. open the Properties > Postion panel and set the position X to 0 (figure #10)
Note: this will set the start position for the menu off the canvas but the button will still be visible.
Figure #10: Offset the menu
9. Save the skin as slider_basic_button.ggsk
10. Close the skin
11, Publish the project
Menu List ⇑
Continuing on from the basic version we will start creating the elements that will populate the menu_bg
1. Open the slider_basic_button.ggsk and save it as slider_basic_menu.ggsk
2. Close and re-open the skin
3. Use Draw Cloner and add a cloner to the canvas (figure #11)
Figure #11: Draw Cloner
4. Set the following Properties > Position:
Set ID: menu_list
Set Anchor to top left
Set Width/Height to 200:40 px (figure #12)
Figure #12: menu_list position properties
5. Set the following Properties > Cloner:
Set Clone Direction: Vertical
Set Horizontal: 1 Columns
Set Source: Nodes (figure #13)
Figure #13: menu_list cloner properties
6. Use Draw Text box and add a text box to the canvas (figure #11)
7. In the Tree drag the Text 1 element into the menu_list element and set the following Properties > Position:
Set ID: menu_list_button
Set Anchor to top left
Set X Y position to 0:0
Set Width/Height to 100:95 % (figure #14)
Figure #14: menu_list_button position properties
and Properties > Appearance
Set Rectangle to Border width: 0 (figure #15)
Figure #15: menu_list_button rectangle properties
and Properties > Text
Text: $(ut) (figure #16)
Figure #16: menu_list_button text properties
Align: Horizontal: Left
Align: Vertical: Center
Padding: 5 - 5 - 10 - 5 (figure #17)
Figure #17: menu_list_button text properties
Note: This is a good time to test the cloner (figure #18)
8. Save the skin and publish the project (figure #19)
Figure #19: Testing the cloner
Note: we can see that each button in the cloner is displaying the Properties > User Data > Titles of each node in the tour. However we can’t use the buttons until we add some actions.
9. In the Tree select the menu_list_button element
10. Open the Properties > Actions panel and create an new action with the following properties:
Source = Mouse Click | Action = Open Next Panorama | Parameters = $(hu) | Target = (figure #20)
Figure #20: menu_list_button actions
Note: in the dropdown View there are different options as to the view of the next panorama should look.
Also we don’t want to be able to click on the current node as it would reload it. So we will set a modifier to disable clicking on the button that represents the current node.
11. Click on the Action Settings window Action Filter button (figure #21)
Figure #21: Action Filter button
12. In the Action Filter click in the first empty field and from the dropdown select State > Active (figure #22)
Figure #22: Setting the Trigger to Active
13. Then set Comparison: = | Value: false (figure #23)
Figure #23: Action Filter settings
14. Select OK to close the Action Filter and OK to close the Action Settings
Note: there is an * next to the Mouse Click source that indicates it has a filter attached (figure #24)
Figure #24: menu_list_button actions with filter
Note: Before we test again lets put the Cloner into the Menu bar
15. In the Tree drag the menu_list element into the menu_bg element
16. Select the menu_list element and set the following Properties > Position:
Set Anchor to top left
Set X Y position to 25:25 px (figure #25)
Figure #25: menu_list postion in menu_bar element
Note: as we have moved the menu_bg element off the canvas it may not be visible. To see the element go to the main application menu item “View” and select the option Show Off-Canvas Elements. Now you will see elements that are positioned off the canvas. You may need to reduce the size of the canvas or make your Skin Editor window larger (figure #26)
Figure #26: Skin Editor showing off-canvas elements at a zoom of 50%
17. Save and close the skin
18. Publish the project
Note: before we move on to Part 2 of the tutorial lets add a couple of small changes that make it easier for us to see the mouse over on the menu buttons and their current state.
19. Open the slider_basic_menu.ggsk
20. Select the menu_list_button and and set the following Properties > Appearance:
Cursor: Hand (figure #27)
Figure #27: Set cursor to hand
21. With the menu_list_button still selected set the following Properties > Rectangle:
Background: Enabled: checked
Background: Color: #ababab (light grey) (figure #28)
Figure #28: Rectangle Background settings
22. Click on the Color: Logic Block icon and set the following Logic Block Settings:
Trigger: Active | Comparison: = | Value: true
Background Color: #6b6b6b (mid tone grey) (figure #29)
Figure #29: Background color logic block setting
5. With the menu_list_button still selected change the Properties > Text > Color: to #ffffff (white) (figure #30)
Figure #30: Set text to white
5. Save the skin and republish the project
Summary ⇑
This brings us to the end of Part 1. In Part 2 we will add in a logo element, control buttons, add variables to manage the elements and expose the element colors for simple color changes.
Note: Part 2 Coming soon.
