Multi Node and Multi Floor Plan Projects

Post Reply
User avatar
Hopki
Gnome
Posts: 7552
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Multi Node and Multi Floor Plan Projects

Post by Hopki » Sun Dec 30, 2012 4:30 pm

The subject on how to make a multi node tour with more than one floor plan has been a topic of many forum posts and e-mails. To this end please find two projects attached, one for Pano2VR and the other for Pano2VR Pro. Both are set to display the Flash output with fallback to HTML5. Note the Pano2VR Pro project has no separate flash output as the flash fallback player is being used.

Before reading any further please download the relevant project so you can follow along as there will be references in this post to files in the projects.
Pano2VR.zip
(988.62 KiB) Downloaded 1417 times
Pano2VR Pro.zip
(403.24 KiB) Downloaded 2196 times
The projects have five nodes and three floor plans, the user data titles are Room One to Five. This naming convention is also used in the Hotspot title text field for Pano2VR. Pano2VR Pro automatically adds the title when dragging in nodes from the tour browser to the hotspot editor.

For the Pano2VR project each node has tags to identify its floor location and which room it is, for example, Room One node has the tags gf for Ground Floor and r01 for Room One. For the node Room Five the tags are sf, Second Floor and r05, Room Five. For Pano2VR Pro only the tag for the floor location is required.

Nodes 1 & 2 are on the Ground Floor
Nodes 3 & 4 are on the First Floor
Node 5 is on the Second floor

Skin Construction:
Apart from the three png floor plan images the entire project is made using the tools found in the skin editor. This has the advantage that text and colours can be changed easily.
The elements can also be replaced with different graphics as long as they have the same ID’s and actions. Of course the projects are free for everyone to use and change as they wish with no restrictions on use.

All buttons are made from two rectangles and a text box. The second rectangle with the ID that ends with the word hit has its alpha set to 10, adjusted in the colour picker not the element so the text can be seen through it and is set to have the hand cursor selected. This is needed for the Flash output so when the mouse hovers over the button the hand cursor can be seen. At the time of writing this Flash does not allow the hand cursor for text boxes.

How it works:
The three floor plans are arranged in one long strip which slides up and down inside a masking container which means only one radar element is needed. In this project the change element position action is used so the floor plans can be seen sliding. If a set element position action is used then the floor plans will be seen to just change.

Open the first project file with the skin, for Pano2VR this is pano_01.p2vr and for Pano2VR Pro, Tour.p2vr. The skins are very similar in both projects however the differences will be highlighted.

Opening the skin the top three elements are node markers which have the ID’s ground, first and second floor trigger. Each has the relevant tag, gf, ff and sf and has the action to trigger click a button in the floor plan to select the correct floor.

The next element is the floor_plan_bg which is a rectangle and forms the background for the floor plan. Note this can not be seen in the skin editor as its position is off stage, X -354. Change the X position to 10 to see the element in the skin editor, but remember to reposition it when ready to publish. The reason for it’s negative position is because it will slide out from the left when opened.

Expand the floor_plan_bg element to see all the child elements that make the floor plan. The next three child elements are the buttons that select which floor is to be viewed. It is these buttons the trigger click action in the above node markers click. There is also a rectangle with the ID floor_location. This moves over the selected floor_select rectangle and highlights which floor plan is being viewed. This works by using a mouse click set element position $self action in the floor_select rectangles. The ground_floor_select rectangle also has an init set element position $self action so the floor_location rectangle is covering the ground_floor_select rectangle when the tour opens.

Each floor_select rectangle has the actions to change the position of the container, ID floorplans. When click the floorplans container will slide down or up depending on which floor_select rectangle is clicked. The math for this is simple 0/0 for ground floor, 0/400 for the first then 0/800 for the second. This is because the floor plans are 400px high.

The next element down is the close button and has the actions to change the position of the floor_plan_bg element and show the open floorplan_open button while hiding the close floorplan_close button by changing their scale.

The mask is a container set to masking, the mask is the same size as one floor plan png so as the floorplans container slides down and up only one floor plan will be visible.
Children of the floorplans element are the three floor plan png images and the map hotspots. The map hotspots are made from node markers. In the Pano2VR project the node markers with the ID’s room_one_mh to room_ five_mh have the room tags, r01 to r05. They also have the actions that when activated to set the position of the radar element mh_radar and also a mouse click action to open the next panorama.

In the Pano2VR Pro project a markertemplate is used and can be found in the container with the ID hide_mh. The markertemplate has the action activate set element position for the element mh_radar.

Both the Pano2VR and Pano2VR Pro node markers/markertemplat use the mhn (map hotspot normal) and mha (map hotspot active) elements also found in the hide_mh container for the floor plan hotspots.

The next element in the file tree is hs, this is a hotspot template which has child elements, two rectangles and two text boxes which are in a container with the ID tooltip. The text box with the ID tooltip_bg is being used as a drop shadow and has a 1px offset from the tooltip_face text box.

Under this is the control container, this houses the rectangles that make the buttons for zooming and opening and closing the floor plan. Note there are two buttons stacked, floorplan_open and close. Each hides itself and shows the other by using the set element scale actions as well as changes the position of the floor_plan_bg element to slide it side to side.

Lastly the loader element is made up of two rectangles, one being used as the background, the other as the visible loading bar. Opening the rectangle loadbar will show that the Centre position for the scaling is set to the left indicating the start position of the load bar. It will scale from left to right. Selecting the centre will cause the load bar to scale from the centre so changing the effect, scales from the centre to both left and right.

Thats it and we hope it inspires ideas for your own projects. Just leaves us to say, Happy New Year to all and thank you for your on going support and feedback. It is all very much appreciated.
The Gnomes. :D

linkaran17
Posts: 13
Joined: Mon Mar 09, 2015 9:39 pm

Re: Multi Node and Multi Floor Plan Projects

Post by linkaran17 » Wed Apr 01, 2015 7:30 pm

nice example for getting familiar with the skin editor.
I have downloaded the zipfile
My goal is to end up with my own floorplans skin graphics and a tour through my house.

I am struggling with one essential matter

how to (where to alter) manage the exact position of the radar_ring, radar_spot for the marker nodes and highlight box for the floorselect buttons ?

When toggle between the floorplans (ground, first second second) via their select_buttons a red line box fits over the select_buttons to indicate it is the current selection.
In the skin editor the redlined element and the radar elements are situated at the top right corner of the screen. When moving these elements it seems they go any where except the direction I want em to go.
They miss fit with the links of their connected elements (the buttons and marker nodes)

I do not understand (yet) how to direct these elements to their exact desired positions representing the second state of selected/unselected elements.

what do i miss? project zip of what I am doing is attached..

Thanx in advance for helping me with hints..
Attachments
pano_woonhuis 1.zip
projectfile
(1.46 MiB) Downloaded 315 times

User avatar
Hopki
Gnome
Posts: 7552
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Multi Node and Multi Floor Plan Projects

Post by Hopki » Thu Apr 02, 2015 3:07 pm

Hi CMode,
The radar and map markers need to be the same size so one fits over the other correctly.
If you want the radar element to be larger then use a rectangle or container which will be the same size as the map markers, then make the larger radar element a child element of this and position the rectangle/container in the centre.
Regards,
Hopki

linkaran17
Posts: 13
Joined: Mon Mar 09, 2015 9:39 pm

fitting second state elements

Post by linkaran17 » Thu Apr 09, 2015 1:10 am

Thanx ! seems logical ;)

linkaran17
Posts: 13
Joined: Mon Mar 09, 2015 9:39 pm

activate on / of floorplan button by nodes

Post by linkaran17 » Thu Apr 09, 2015 10:04 pm

The multi floor plan /multi nodes example is excellent for learning the skin editor workflow and its capabilities.
I am half way now tweaking its elements and their attributes in the tree structure.

I have even managed to close the floor plan automagically when selecting a marker node on the floor plan map.
When closing the floor plan via a marker node on the floor plan map, the open / close button state at the bottom of the screen should change accordingly..

I ve copied the action of the close button which is on the top of the floorplan panel
telling to scale the open / close floorplan button and changed “mouse click” into “activate”
but that does do the trick..

When clicking the node (see attached image) the switch to another pano works fine, the floor plan moves nicely off the screen but the open/close floorplan button remains unchanged..

I am missing something but what?

link to the pano online
http://www.imageplant.nl/testpanos/

projectfile
projectfiles multinodefloorplan.zip
(927.25 KiB) Downloaded 304 times
screenimg.jpg
screenimg.jpg (277.63 KiB) Viewed 6250 times
screenimg2.jpg
screenimg2.jpg (198.29 KiB) Viewed 6250 times

User avatar
Hopki
Gnome
Posts: 7552
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Multi Node and Multi Floor Plan Projects

Post by Hopki » Fri Apr 10, 2015 4:12 pm

Hi CMode,
You can use a "Trigger Click" Action in the map node markers.
Just point it to the map button.
This will then change the button state.
Regards,
Hopki

linkaran17
Posts: 13
Joined: Mon Mar 09, 2015 9:39 pm

Re: Multi Node and Multi Floor Plan Projects

Post by linkaran17 » Sat Apr 11, 2015 9:18 pm

Thanx ! that did it !

smashly24
Posts: 1
Joined: Thu Jan 05, 2017 1:41 pm

Re: Multi Node and Multi Floor Plan Projects

Post by smashly24 » Fri Jan 06, 2017 6:34 pm

Any chance there's a video showing how to do this?

DDietz
Posts: 8
Joined: Fri Apr 21, 2017 12:51 pm

Re: Multi Node and Multi Floor Plan Projects

Post by DDietz » Sun Apr 23, 2017 6:51 pm

Hi Hopki,
there is one thing I didn´t understand about this template: how do I set the change position action in a way that the position slides and not just directly changes it´s position?

User avatar
Hopki
Gnome
Posts: 7552
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Multi Node and Multi Floor Plan Projects

Post by Hopki » Sun Apr 23, 2017 10:27 pm

Hi DDietz,
In the node markers in the map, change the action from set position to change position.
Regards,
Hopki

DDietz
Posts: 8
Joined: Fri Apr 21, 2017 12:51 pm

Re: Multi Node and Multi Floor Plan Projects

Post by DDietz » Mon Apr 24, 2017 4:08 pm

Great, thanks!

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest