Overview
This “Pano2VR” tutorial shows you how to use Cloners to create a Category Menu and a Popup window in Pano2VR V7.0.1. The Category Menu will open a popup window with information and clickable node images related to the selected category. Clicking on a node image will take you to that node. Active nodes will have highlighted text and a tick to indicate they have been visited.
Note: this tutorial is designed for Pano2VR V7.0.1 . You can download the software here.
Project Background
This project was developed in response to a enquiry raised by Abbotography in the Pano2VR Users Group on Facebook.
His client wanted a category menu in the tour skin whereby each text category clicked would open a popup window with information in the popup and images of nodes within the tour related to the category selected.
Final Output
Final Output below or open in a browser
Tutorial Files
In the tutorial folder, Category. Popup Panel Tutorial, there is an Asset Folder with a Panoramas folder containing 3 x Placeholder images and 6 x Numbered Panos. There is a Pano2VR project 'cat_popup_base.p2vr', a cat_popup_base.ggsk skin, and an empty Popup_Panel_Output folder. (Figure #1)
Figure #1: Tutorial folder
Download the zipped tutorial folder here
Tutorial Overview
In this tutorial we will modify the category_popup_menu.p2vr project by;
Adding tags to specific nodes
Modify the category_popup.ggsk skin by;
Adding and setting the properties for two Cloner Elements
Adding and setting the properties for a Scoller including resetting the scroll to the top
Adding and setting the properties for a Text Element including style classes
Add a popup panel with Headline and Description text
Adding a Node image element
Adding SVG files from the Component Toolbox
Modifying colors using the Color Tool
Styling Text using the Text Editor Tool
Creating Variables
Creating Actions with Modifiers
Creating Logic Blocks
Creating a Blur background
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
Step 1: Creating the Category Menu
1. Open the cat_popup_base.p2vr file (Figure #2)
Figure# 2: Base Project File
Note: The category menu will be configured using tags and a cloner element. So we will create 3 tags for the 3 x category nodes
2. Select the first node ‘Category One’
3. In the nodes Properties - User Data > Tags > Tags create a tag ‘grey’ tag (Figure #3)
Figure #3: Create a tag ‘grey’
4. Repeat for the ‘Category Two’ and ‘Category Three’ nodes adding ‘green’ and ‘red’ tags
5. Save the project as cat_popup_menu.p2vr
6. Click on the Edit Skin Configuration button to open the cat_popup_base.ggsk skin
Note: we are going to start building the Category menu buttons by adding in a cloner
7. Click on the ‘Draw Cloner’ menu item and click once in the skin to add it to the tree (Figure #4)
Figure #4: Add Draw Cloner
8. Set the following Properties for the Cloner 1 element:
Position
ID: = cl_categories_table
Anchor: = top right
Position: > Position: X: 40px Y: 40px
Size: Width: 140px x Height: 40px (Figure #5)
Figure #5: Properties > Position > Cloner 1
Cloner
Clone Direction: Horizontal Invert = checked
[Note: this is to have the buttons appear right to left]
Vertical: = 1 Row
Source: = Table
Filter:
[Note: click in the empty tag field to show options and select from the dropdown menu]
Tag = grey | Title = Category One
Tag = green | Title = Category Two
Tag = red | Title = Category Three (Figure #6)
Figure #6: Properties Cloner
9. Click on the ‘Draw Text Box’ menu item and click once in the skin to add it to the tree (Figure #7)
Figure #7: Add Draw Text Box
10. In the ‘Tree’ drag the Text 1 element into the cl_categories_table element to make it a child element (Figure #8)
Figure #8: Child Element
11. With the Text 1 element selected set the following Properties:
Position
ID: = cl_cat_btn
Anchor: = top left
Position: > Position: X: 0 px Y: 0 px
Size: Width: 100 percent x Height: 100 percent (Figure #9)
Figure #9: Properties > Position > Text 1
Appearance
Hand Cursor: = checked (Figure #10)
Figure #10: Hand Cursor
Rectangle
Background: Enabled: = unchecked
Border: Width: = 0 (Figure #10)
Figure #10: Rectangle properties
Text
Text: Select ‘text’ and from the ‘$’ dropdown menu select Cloner > cloner title: $(ctitle) (Figure #11)
[Note: this will add the Title we added earlier to the Filter Tag table.}
Figure #11: Text properties
Color: = White
Align: Vertical: = Center (Figure #12)
Figure #12: Text properties
Advanced
CSS Classes: = button shadow (Figure #13)
[Note: these classes set a text and drop shadow style defined within the ce_fonts Custom Element. You can modify the CE contents if you want to change the style settings]
Figure #13: Advanced properties
11. Save the skin as ‘cat_popup_catmenu.ggsk’
12. Close the skin
13. Publish the project
Note: because we inverted the Clone Direction the category names run right to left. In the Properties > Cloner > Clone Direction: there is a check box ‘Invert clone order’. Unfortunately as of this tutorials publish date there is a bug in V7.0.1 and the invert option doesn’t work. For now we will use a workaround as follows.
If you are using a more recent version try checking the ‘Invert clone order’
14. Open the Skin Editor
15. Click on the cl_categories_table element to make it active
16. Open the Properties > Cloner dropdown panel
17. In the Filter: drag the cell handles to rearrange the tags so they read, top to bottom, red, green and grey (Figure #14)
Figure #14: Cloner invert workaround
11. Save the skin
12. Publish the project
Note: see the published project below. At the moment none of the buttons are working but we will be adding interactivity to them.
Note: this brings us to the end of Step 1
Step 2: Popup Panel
1. Open the Skin Editor if it’s not already open
2. Click on the ‘Draw Rectangle’ menu item and click once in the skin to add it to the tree
3. Set the following Properties for the Rectangle 1 element:
Position
ID: = rct_popup
Anchor: = center
Position: > Position: X: 0px Y: 0px
Size: Width: 630px x Height: 420px
Rectangle
Border: Width: 0 (Figure #15)
Figure #15: Rectangle 1 properties
4. Add 2 ‘Draw Text box’ menu items to the skin
5. Drag both Text boxes into the rct_popup element to make them child elements
6. Set the following Properties for the Text 1 element:
Position
ID: = Headline
Anchor: = top left
Position: > Position: X: 0px Y: 0px
Size: Width: 100 percent x Height: 40px
Rectangle
Background: Enabled: = checked
Color: = #c3cc39
Border: Width: 0
Text
Text: Headline
Color: = White
Align: Horizontal: = Left | Vertical: = Center
Padding: 10px left
Advanced
CSS Classes: = headline upper (Figure #16)
[Note: ‘Upper’ set the text to Uppercase]
Figure #15: Text 1 properties
6. Set the following Properties for the Text 2 element:
Position
ID: = Description
Anchor: = top left
Position: > Position: X: 0px Y: 40px
Size: Width: 100 percent x Height: 80px
Rectangle
Background: Enabled: = checked
Color: = #ffffff (white)
Border: Width: 0
Text
Text: Description
Color: = #000000 (black)
Align: Horizontal: = Left | Vertical: = Top
Formatting: Scroll bar = checked
Padding: 10px top 10px left
Advanced
CSS Classes: = body (Figure #17)
Figure #17: Text 2 properties
7. Click on the ‘Draw Scroll Area’ menu item and click once in the skin to add it to the tree
8. Drag the Scrollarea 1 element into the rct_popup element to make it a child element
9. Set the following Properties for the Scrollarea 1 element:
Position
ID: = thumbnails_scroller
Anchor: = bottom left
Position: > Position: X: 0px Y: 0px
Size: Width: 100 percent x Height: 298 px
Rectangle
Background: Enabled: = checked
Color: = #ffffff (white)
Border: Width: 0
Scroll Area
Inner Size: Alignment: = top left
Scrollbars: Horizontal: = No
Scrollbars: Vertical: = Auto
Width: 8 (Figure #18)
Figure #18: Scroll Area properties
10. Click on the ‘Draw Cloner’ menu item and click once in the skin to add it to the tree
11. Drag the Cloner 1 element into the thumbnail_scroller element to make it a child element
12. Set the following Properties for the Cloner 1 element:
Position
ID: = thumbnails_cloner
Anchor: = top left
Position: > Position: X: 0px Y: 0px
Size: Width: 307px x Height: 294px
Cloner
Clone Direction: Vertical
Horizontal: = 2 Columns
Source: Nodes
Advanced
Permeable: = checked (Figure #19)
Figure #19: Draw Cloner properties
13. Click on the ‘Add Node Image’ menu item and click once in the skin to add it to the tree
14. Drag the NodeImage 1 element into the thumbnail_scroller element to make it a child element
15. Set the following Properties for the NodeImage 1 element:
Position
ID: = thumbnails_node_image
Anchor: = top left
Position: > Position: X: 10px Y: 10px
Size: Width: 300px x Height: 260px
Appearance
Hand Cursor: = checked
Image
Format: = JPG
Quality: = 90
Lazy Loading: = checked (Figure #20)
Note: Lazy loading is a new V7 option added to all Image skin elements that saves bandwidth and prevents the image from loading the moment the tour opens
Figure #20: Properties NodeImage 1
16. Save the skin as ‘cat_popup_panel.ggsk’
17. Close the skin
18. Republish the project
Note: see the published project below. Now we can see the popup panel in the browser. The ‘headline’ has the 'upper class’ style applied and you can scroll through and see all the nodes in the tour.
Note: This brings us to the end of Step 2
Step 3: Integrating the Category Menu and Popup Panel
Note: We have our main elements and the next step is to add the code that will integrate the two elements. At the moment the popup panel loads all of the nodes in the tour, we need load only those nodes associated with the categories, so we will add some more tags.
1. In the Tour Browser shift select the Number One and Number Two Nodes
2. Right click and in the popup menu select ‘Add/Remove Tag’ and check ‘grey’ (Figure #21)
Figure #21: Add node tags
3. Repeat for nodes Number Three and Four = green, nodes Number Five and Six = red
4. Save the project
5. Open the Skin Editor
Note: our first step will be to show hide the popup panel when you click on a Category button
6. In the canvas view open the Properties: Variables panel
7. Add a new skin variable Name: = vis_popup | Type: = True/False | Init Value = false (Figure #22)
Figure #22: Add Skin Variable
8. Select the cl_cat_btn element and open the Properties: Actions: panel
9. Add a new Action: Source: = Mouse Click | Action: = Set Variable Value | Variable Name: vis_popup | Operation: = Set(=) | Value: = true (Figure #23)
Figure #23: Add Action to cl_cat_btn
10. Select the rct_popup element and open the Properties: Appearance: panel
11. Set Visible: = unchecked
12. Click on the Visible: logic block button
13. Add a new expression; Trigger: = *vis_popup | Comparison: = = | Value: = true | Visible = true
Note: you will find ‘*vis_popup’ under ‘Variables’ in the dropdown menu when you click on the empty trigger field
14. Select ‘OK’ to add the logic (Figure #24)
Figure #24: Add Visible logic to rct_popup
15. Save the skin
16. Review the project
Note: see the published project below. Now the popup panel is hidden but when you click on a Category button it opens the popup panel. However it’s still showing all of the nodes regardless of the Category button selected.
We will add a new action to the Category button that, when clicked, it will send a value $(ctag) to the thumbnail cloner that will act as a filter.
8. Select the cl_cat_btn element and open the Properties: Actions: panel
9. Add a new Action; Source: = Mouse Click | Action: = Set Value | Parameters: = $(ctag) | Target: = thumbnails_cloner (Figure #25)
Figure #25: Add Action to cl_cat_btn to filter thumbnails_cloner
15. Save the skin
16. Review the project
Note: See below. Now when the popup panel is open it is showing just the nodes associated with the Category button selected. Selecting different Category buttons changes the filter and the nodes displayed.
Note: we can open the popup panel with the Category button but we cannot close it. Let’s add a close button from the Component Toolbox
17. Click on the menu ‘Component Toolbox’ icon
18. Select the ‘Feather’ category and then click on the ‘Icons’ tab
19. Double click on the X icon to add it to the skin
20. Drag it into the rct_popup element to make it a child element (Figure #26)
Figure #26: Svg 1 child element
20. Set the following Properties for the Svg 1 element:
Position
ID: = popup_close
Anchor: = top right
Position: > Position: X: 5px Y: 5px
Size: Width: 25px x Height: 25px
Appearance
Hand Cursor: = checked
Actions
Add a new Action; Source: = Mouse Click | Action: = Set Variable Value | Variable Name: = vis_popup | Operation: = Set(=) | Value: = false (Figure #27)
Figure #26: Svg 1 properties
Note: the close button is black and we want it to be white.
21. With the popup_close element selected click on the ‘Color Tool’ menu item
22. Double Click on the black ‘new color’ panel to open the Select Color panel
23. Select ‘white’ and select ‘OK’ and then ‘Apply’ (Figure #27)
Figure #27: popup_close color settings
24. Save the skin
Note: when the user clicks on one of the nodes in the thumbnail cloner we want the rct_popup to close and the node to open.
25. In the tree select thumbnails_node_image to make it active
26. Add a two new actions, the first;
Source: = Mouse Click | Action: = Open Next Panorama | URL: = Hotspot URL | View: = Default View
27. The second, the same as the close_button;
Source: = Mouse Click | Action: = Set Variable Value | Variable Name: = vis_popup | Operation: = Set(=) | Value: = false (Figure #28)
Figure #28: thumbnails_node_image properties
28. Save the skin
29. Review the project
Note: See below. Now the popup panel is open you can close it using the close button. If you click on a node the popup panel will close and the selected node will open.
Step 4: Final elements
Note: to finish up we will add a Text title and a check mark to show you’ve visited the node to each node in the popup panel and a blurred background when the popup panel is visible. We will start with the Text Title
1. Click on the ‘Draw Text Box’ menu item and click once in the skin to add it to the tree
2, Drag the Text 1 element into the thumbnails_node_image element to make it a child element
3. Set the following Properties for the Text 1 element:
Position
ID: = thumbnails_node_title
Anchor: = bottom left
Position: > Position: X: 0px Y: 0px
Size: Width: 100px x Height: 40px
Appearance
Hand Cursor: = checked
Rectangle
Background: Enabled: = checked
Color: = #000000 (black) | Alpha channel: 175
Color: Logic block: Expressions;
Trigger: = Active | Comparison: = = | Value: = true | Operation = Or
Trigger: = Mouse Over | Comparison: = = | Value: = true
Background Color: = #c5ca47 | Alpha channel: 255
Border: Width: 0
Text
Text: $(ut)
Note: this will load the title added to the nodes User Data
Color: = #ffffff (white)
Align: Horizontal: = Left | Vertical: = Center
Formatting: Auto Size = checked
Padding: 10px
Advanced
CSS Classes: = body (Figure #29)
Figure #29: Properties thumbnails_node_title
Note: We want to add a graphic element that will appear when a user has visited a particular node so they can gauge how much of the tour they have seen. We will add an Svg file from the Component Toolbox
4. Click on the menu ‘Component Toolbox’ icon
5. Select the ‘Material’ category and then click on the ‘Icons’ tab
6. Double click on the black square with a tick mark icon to add it to the skin (Figure #30)
Figure #30: Double click icon to add it to the skin
7. Drag the Svg 1 element into the thumbnails_node_image element to make it a child element (Figure #31)
Figure #31: Svg1 child element
8. Set the following Properties for the SVG 1 element:
Position
ID: = thumbnails_node_visited
Anchor: = bottom right
Position: > Position: X: 10px Y: 10px
Size: Width: 24px x Height: 24px
Appearance
Visible: = unchecked
Visible: logic block button
Add a two new expressions;
Trigger: = Visited | Comparison: = = | Value: = true | Operation: = Or
Trigger: = Active | Comparison: = = | Value: = true | Visible = true
select ‘OK’ to add the logic (Figure #32)
Note: you will find ‘Visited’ under ‘State’ in the dropdown menu
Figure #32: thumbnails_node_visited properties
9. Save the skin
10. Review the project
Note: When the popup panel is open the names of the nodes are visible and the background of the text box on the active node is green.
The active node also displays the ‘tick’ icon that will be visible when other nodes are selected
Note: our next step is to add the Category Descriptions. We will be using one of the new V7 features ‘Rich Text Editor’ that is available in all expandable text fields.
To display the text we will use a variable containing the selected Category buttons ‘Ctag’ ie grey, green or red.
11. Open the Skin Editor if it’s not already open
12. In the ‘Canvas’ properties open the Variables panel
13. Add a new variable: Name: = op_category | Type: = Text (Figure #33)
Figure #33: New text variable
14. Select the ‘Description’ element and open the Properties: Text: panel
15. Click on the Text: Logic block button and add a new Expression:
Trigger: = Variable: *op_category | Comparison: = = | Value: = grey
16. Click on the ‘pencil’ icon next to the blank field to open the ‘Enter Text’ window. (Figure
17. Select the ‘Visual’ Tab and paste in the following;
These are the nodes found under Category One. Click on an image to visit that node Scroll down to see more nodes (Figure #34)
Figure #34: Add new Expression and text
18. Highlight the words Category One and click on the ‘b’ button to bold them. (Figure #35)
Figure #35: Bold Category One
17. Add a return before the world ‘Click’ and ‘Scroll’ to create two new lines (Figure #36)
Figure #36: Create two new lines of text
18. Select both lines and from the ‘Standard’ drop down select ‘Unordered list’ (Figure #37)
Figure #37: Add an Unordered list
19. Select ‘OK’ to accept the changes and close the Enter Text window
20. In the Logic Block Settings window select ‘Copy’ and close the Logic Block Settings window
21. Re-open the Logic Block settings window and click on ‘Paste’ two times
22. Change the second expression Value: = green, open the Enter Text window and change the text to Category Two,
23. Change the third expression Value: = red, open the Enter Text window and change the text to Category Three (Figure #38)
Figure #38: Copy, paste and edit additional expressions
24. Select ‘OK’ to accept the changes
Note: In order to set the value of the *op_category variable we need to add another Action to the Category button.
25. Select the ‘cl_cat_btn’ and open the Properties: Actions panel
26. Add a new Action: Source: = Mouse Click | Action: = Set Variable Value | Variable Name: op_category | Operation: = Set(=) | Value: = $(ctag) (Figure #39)
Figure #39: New Action for cl_cat_btn
24. Save the skin
20. Review the project
Note: When you click on a Category button the Description changes to match the value of the Category selected
Step 5: Blur the Background
Note: In the final version, shown at the start of the tutorial document, when you open the Popup Panel the background is blurred. This is a great effect to stop the pan and highlight the popup.
1. Open the Skin Editor if it’s not already open
2. Click on the ‘Draw Rectangle’ menu item and click once in the skin to add it to the tree
3. Drag it to the bottom of the tree so it will appear behind the Category Menu and Popup Panel
4. Set the following Properties for the Rectangle 1 element:
Position
ID: = rct_blur_bg
Anchor: = center
Position: > Position: X: 0px Y: 0px
Size: Width: 100 percent x Height: 100 percent
Appearance
Visible: = unchecked
Visible: logic block button
Add a new expression; Trigger: = *vis_popup | Comparison: = = | Value: = true | Visible = true
Rectangle
Background: Color: #000000 | Alpha: 50
Border: Width: 0 (Figure #15)
Advanced
CSS Classes: blurfive
Actions
New Action
Source: = Mouse Click | Action: = Set Variable Value | Variable Name: vis_popup | Operation: = Set(=) | Value: = False (Figure #40)
Figure #40: Properties of blur background element
5. Save the skin
6. Review the project
Note: Now when you click on a Category button the Popup Panel opens and the background blurs. Clicking on a node in the Panel, clicking the close button or clicking in the background will reset everything.
Step 6: Reset the Scroller
Note: You may have noticed that if you scroll down in the popup panel, and select a node or select a different category button the scroller doesn’t return to the top. We can fix this with a couple of actions assigned to the cl_cat_btn element
1. Select the cl_cat_btn element to make it active
2. Open the Properties: Actions and add two more actions
Source: = Mouse Click | Action: = Visibility | Type: = Remove Element | Target: = thumbnails_cloner
Source: = Mouse Click | Action: = Visibility | Type: = Add Element | Target: = thumbnails_cloner (Figure #41)
Figure #41: Actions to reset the scroller
24. Save the skin
20. Review the project
Note: now the scroller returns to the top after every interaction
Step 7: Oops almost forgot!
Note: I almost forgot this bit, I want to lift the Popup Panel off the background by applying a black glow to the panel.
1. Select the rct_popup element
2. In Properties: Advanced: CSS Classes: = glow
24. Save the skin
20. Review the project
And we are finished
Donations
Hi everyone,
I wanted to thank you for following my tutorial and for your support. I'm so grateful that it has helped you out. If you feel so inclined, I would greatly appreciate any donations you can make to help me continue to create more tutorials.
Thank you for your generosity!
Best,
Tony
