Node menu - like a mobile

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

Sun Aug 14, 2022 6:51 am

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: 1188
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Mon Aug 15, 2022 3:41 am

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 430 times

Mobile - iPhone:
menu_iphone.png
menu_iphone.png (135.37 KiB) Viewed 430 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: 57
Joined: Mon Nov 08, 2021 12:17 pm

Mon Aug 15, 2022 12:20 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: 1188
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Mon Aug 15, 2022 1:34 pm

Hi Marc,

Okay here's an overview of the skin.

menu.png
menu.png (473.84 KiB) Viewed 404 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: 57
Joined: Mon Nov 08, 2021 12:17 pm

Mon Aug 15, 2022 3:04 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: 57
Joined: Mon Nov 08, 2021 12:17 pm

Mon Aug 15, 2022 5:02 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 388 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: 57
Joined: Mon Nov 08, 2021 12:17 pm

Mon Aug 15, 2022 5:33 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: 12351
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Mon Aug 15, 2022 10:50 pm

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 373 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: 1188
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Tue Aug 16, 2022 2:04 am

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: 57
Joined: Mon Nov 08, 2021 12:17 pm

Tue Aug 16, 2022 8:54 am

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: 1188
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Tue Aug 16, 2022 10:27 am

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: 57
Joined: Mon Nov 08, 2021 12:17 pm

Tue Aug 16, 2022 11:09 am

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 337 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: 1188
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Tue Aug 16, 2022 12:03 pm

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: 57
Joined: Mon Nov 08, 2021 12:17 pm

Tue Aug 16, 2022 12:40 pm

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

Tue Aug 16, 2022 1:28 pm

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