Category Menu with Node Popup

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

I'd like to Donate