Node menu - like a mobile

Q&A about the latest versions
Marcus
Posts: 64
Joined: Mon Nov 08, 2021 12:17 pm

Hello,

I'm looking to create a node menu, without thumbnails, and collapsable - so it resembles a standard mobile menu. In the below, there are 3 categories, with Category B showing a drop-down and the nodes with that category:

Code: Select all

Category A   v
Category B   v
  Node 1
  Node 2
  Node 3
Category C   v

I've had a look at the forum components, but couldn't see anything helpful. Has this type of menu discussed before? I'm still a little new to the inner workings of the Editor, so if there's no previous examples of this, could I please have some ideas on how to approach it?

Much appreciated,
Marc
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Marc,

I think this is what you are looking for.

Here's an example of a menu without thumbnails that's collapsable.

Desktop:
menu_desktop.png
menu_desktop.png (836.09 KiB) Viewed 2071 times

Mobile - iPhone:
menu_iphone.png
menu_iphone.png (135.37 KiB) Viewed 2071 times

You can see a working example at https://rebrand.ly/ucimobile

regards,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Marcus
Posts: 64
Joined: Mon Nov 08, 2021 12:17 pm

Hi Tony,

Yes, that's the type of menu I was looking for. No thumbnails and collapsable. If you have time, would you be able to describe the general approach on how to build this within the Pano2VR editor - and I'll have a go.

Much appreciated,
Marc
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Marc,

Okay here's an overview of the skin.

menu.png
menu.png (473.84 KiB) Viewed 2045 times

The first cloner 'category_cloner' uses the entries in the table to populate the menu with the location names ie University Hospital Tower

The second cloner 'node_cloner' sits inside of the category cloner and loads the nodes ie 'Main Lobby' etc

Don't worry about the crazy code, it was the only way in V6 to center text vertically in a text box. Category cloner uses $(ctitle) and node cloner uses $(ut)

Clicking on the text box 'category' uses Actions to manage the node_cloner and node_cloner uses actions to open the panorama.

Have you taken a look at Martin's video tutorial "Building Menus with Nested Cloners" ? https://youtu.be/ZNsw0EfnviU

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Marcus
Posts: 64
Joined: Mon Nov 08, 2021 12:17 pm

Crikey ;-) looks a bit complicated, but I'm confident I can work it out - thanks Tony!

I'll watch the video and make a start !

Quick question - using this structure, would it be possible to have some nodes at the top level (i.e. nodes without a category), and the rest within categories ? I.e.

Code: Select all

Node 1
Node 2
Category 1
    Node 3
    Node 4
Category 2
  
Interested to know if this is possible (I can't work this out until I understand the cloners a little better) - as it would make the component very flexible.

Many thanks for your help,
Marc
Marcus
Posts: 64
Joined: Mon Nov 08, 2021 12:17 pm

OK - I have the basic structure. However, I'm having a little difficulty working out how to:
1) initially have all the categories closed
2) how to show the nodes underneath the category when the category is clicked on.

list-menu.jpg
list-menu.jpg (73.61 KiB) Viewed 2029 times

I have the category cloner autosize = true, and the node cloner visibility = False. I've then tried to add logic, so when the category cloner is clicked on, the node cloner visibility = True. However, this results in all the nodes, being shown.

What approach should I take to show the cloned nodes? I'll keep trying in the interim.

Many thanks
Marc
Marcus
Posts: 64
Joined: Mon Nov 08, 2021 12:17 pm

I just noticed the node cloner Filter tag = "_nop_"
So do I have to set the filter tag when I click on the category cloner? That feels like it should work, but so far I cannot find the correct "mouse click" logic in the Category cloner to achieve this.
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Marcus,
The filter _nop_ is to stop thumbnail node images loading if you have not selected the thumbnail menu in the Skin Configuration.
If you look when you select the Thumbnail menu a config loaded action removes the tag.

If you look at the element in the V6 Silhouette skin, you will see:

Screenshot 2022-08-15 at 21.47.47.png
Screenshot 2022-08-15 at 21.47.47.png (280.93 KiB) Viewed 2014 times

Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Marc,

I'm a bit busy at the moment but as soon as I get a chance I'll write up a tutorial. I'm implementing the same process in a project at the moment so it shouldn't be too long away.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Marcus
Posts: 64
Joined: Mon Nov 08, 2021 12:17 pm

Thanks for your help Tony, I understand you're busy and would appreciate a guide when you have the time.

Hopki, while Tony is busy, could you give me an idea on how to dynamically change the filter tag on a cloner? I.e. I assume a mouse click on the Cloner (for categories), changes the filter tag on the child cloner (for nodes), so only the nodes for that category are shown. If you could point me in the right direction (are events used, variables etc), and I can continue to work on it.

Many thanks
Marc
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

dynamically change the filter tag on a cloner?
You can use a Mouse Click > Set Value > "filter name" > "cloner name"

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Marcus
Posts: 64
Joined: Mon Nov 08, 2021 12:17 pm

Hi Tony (sorry, I'm trying not to involve you),

My understanding is; as the node cloner has "inherit filter tags from parent cloner" disabled, the category cloner needs to pass its category tag to the child node cloner (via an event).

So I've tried to achieve this several ways, including the below (as you suggested):

menu-click.jpg
menu-click.jpg (21.2 KiB) Viewed 1978 times

I believe $(ctag) should hold the category tag, so I try to set that on the child cloner node. Unfortunately, this doesn't work.

Many thanks
Marc
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Marcus,

Are you working in V6 or V7?

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Marcus
Posts: 64
Joined: Mon Nov 08, 2021 12:17 pm

Hi Tony - the latest v7 beta
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

This is in V7 and I think it's what you are after?

https://p2vr.s3.ap-southeast-2.amazonaw ... index.html

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Post Reply