Page 1 of 2
Node menu - like a mobile
Posted: Sun Aug 14, 2022 6:51 am
by Marcus
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
Re: Node menu - like a mobile
Posted: Mon Aug 15, 2022 3:41 am
by Tony
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 (836.09 KiB) Viewed 2223 times
Mobile - iPhone:
- menu_iphone.png (135.37 KiB) Viewed 2223 times
You can see a working example at
https://rebrand.ly/ucimobile
regards,
Tony
Re: Node menu - like a mobile
Posted: Mon Aug 15, 2022 12:20 pm
by Marcus
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
Re: Node menu - like a mobile
Posted: Mon Aug 15, 2022 1:34 pm
by Tony
Hi Marc,
Okay here's an overview of the skin.
- menu.png (473.84 KiB) Viewed 2197 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
Re: Node menu - like a mobile
Posted: Mon Aug 15, 2022 3:04 pm
by Marcus
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
Re: Node menu - like a mobile
Posted: Mon Aug 15, 2022 5:02 pm
by Marcus
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 (73.61 KiB) Viewed 2181 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
Re: Node menu - like a mobile
Posted: Mon Aug 15, 2022 5:33 pm
by Marcus
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.
Re: Node menu - like a mobile
Posted: Mon Aug 15, 2022 10:50 pm
by Hopki
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 (280.93 KiB) Viewed 2166 times
Regards,
Re: Node menu - like a mobile
Posted: Tue Aug 16, 2022 2:04 am
by Tony
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
Re: Node menu - like a mobile
Posted: Tue Aug 16, 2022 8:54 am
by Marcus
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
Re: Node menu - like a mobile
Posted: Tue Aug 16, 2022 10:27 am
by Tony
dynamically change the filter tag on a cloner?
You can use a Mouse Click > Set Value > "filter name" > "cloner name"
Tony
Re: Node menu - like a mobile
Posted: Tue Aug 16, 2022 11:09 am
by Marcus
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 (21.2 KiB) Viewed 2130 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
Re: Node menu - like a mobile
Posted: Tue Aug 16, 2022 12:03 pm
by Tony
Hi Marcus,
Are you working in V6 or V7?
Tony
Re: Node menu - like a mobile
Posted: Tue Aug 16, 2022 12:40 pm
by Marcus
Hi Tony - the latest v7 beta
Re: Node menu - like a mobile
Posted: Tue Aug 16, 2022 1:28 pm
by Tony
Hi,
This is in V7 and I think it's what you are after?
https://p2vr.s3.ap-southeast-2.amazonaw ... index.html
Tony