How to build floor plans for different buildings

[Egami]

Hello Guy

After I have read the very helpful topic written by hopki on how to make a multi node tour with more than one floor plan in this thread viewtopic.php?f=17&t=8089| , I successfully manged to implement that on my tour which consist of one villa with 2 floors , now I have been requested to build a tour for the whole location which is a residential area with additional 6 villas (with multiple floors) , they are a little bit scattered but can be included in one master map, also there gardens and entertainments areas, i do not know how to make use of the project provided by Hopki to include the additional floor plans of the 6 villas , is it possible to do that from within the project/hopki skin , I mean only one copy of the skin ? is this can be done by node markers but how ? especially the floor triggers are only for specific location with specific floor-plans, or should i make a copy of the skin for each villa + additional areas,but how to specify the villa with its floor plan? i also want to build the inclusive Map/master Map showing the individual areas/villas and when I click on them the corresponding flan plan will be activated/shown , believe me I'm trying my best to do this but i blocked so I need your assistance and kind help which will be much appreciated.


Best regard
Egami

[Hopki]

Hi Egami,
If you had one large image which shows all buildings and all floors then you can do this using X/Y with the change position action.
The skin from the link shows only moving the floor plan up and down, so the X position remains the same.
What if you had more floor plans next to each other. All you would need to do is move the floorplan sideways in the masking container so building two is in view.

The only thing you would need to do is set tags so node markers can hide and show the correct floor buttons.
Example, the Ground floor button moves the floor plans to position X0 and Y0.

If the floor plans are 200px wide then the Ground floor button of the second building may need position X-200 and Y0.
This moves the floor plan image 200px to the left showing building two.

There is no limit to what can be shown using this idea except the file size of the floorpaln image. Keep it to a jpg and externally load it and you should be good for very large areas.
Hope this is clear.
Regards,
Hopki

[360Texas]

I have been following this discussion with interest.

Assuming:

the object floor plans and the area map are [___] are rectangles.

X and Y are the horizontal and vertical axis

Measurement axis values are in pixels.

Where is zero? = Always in upper left corner of the canvas, parent or child object

Picture edited to show Offset in Skin Tree for left side Parent (map) and Child (floor plan) and -300 pixel value Skin Tree between : left edge Canvas and left side Child (floor plan)

where is 0 more

wherezero.png (45.66 KiB) Viewed 8395 times

[Egami]

Hello 360Texas
The illustration helped me a lot to understand how to control the movement of the elements inside the skin, do you suggest to have the master map as a parent and the floorplans maps as child?

[Egami]

Hello Hopki
Thanks a lot for your kind reply, i did the jpeg image which contain all the maps including the master map and the floor-plans mas of each of the 6 buildings in a vertical strips (image strip), so i only needed to move it on the x axis, i added node markers with corresponding tags and actions (see images Master and A building, B building ) , these allowed me to show the master map and only the ground floor of each of the building correctly but i do not know how to move to the first or second floor or coming back to ground floor by using ground_floor_select/first_floor_select/second_floor_select buttons, i know this may not be the right way,definitely I'm doing something wrong , do i need to make these button for each building (floor plans), ?

[360Texas]

After looking at your work for several days, I must admit you have an interesting, very complex project. Maybe other forum member might review and provide a comment or two.

Issue 1

i added node markers with corresponding tags and actions (see images Master and A building, B building ) , these allowed me to show the master map and only the ground floor of each of the building correctly.

but i do not know how to move to the first or second floor or coming back to ground floor by using ground_floor_select/first_floor_select/second_floor_select buttons

Issue 2

do i need to make these button for each building (floor plans), ?

I would think that you might consider using your single floor plan for each single panorama with a button to maybe display /hide.

So you might have 3 separate floor plan images, example:

Upper Floor Granada
First Floor Granada
Ground Floor Granada

Then you might create in each panorama a point hotspot for each to click on to toggle show the floor plan and click again to hide.

[Hopki]

Hi,
As its a vertical strip you only need to change/set element position in the Y axis/direction.
If you use the set element position it will jump to the correct position rather than scroll through all the maps if jumping from say the first to the last.
Regards,
Hopki

[Egami]

Hello Masters
Thank you for your kind response.
I modified Hopki skin as far as I could according to my very humble knowledge , I’m not expertise but I’m trying to achieve what I’m looking for , so excuse me if my try looks stupid.
What I did is I used a node marker for each villa and for the master map, this node marker trigger click action the X_Floor_select of the corresponding villa (ground, first and 2nd floors), I added drop-down menu representing each villa and master map (see image for settings), I used the vertical one map which assembled the all floor plans and the master map (the same map I uploaded in the post earlier).

Image 1 below shows the setting of the node marker (dubai which is just a name of one villa and it is an example).
Image 2 shows the dubai_ground_floor_select ( dubai example).
Image 3 shows the dubai button in the drop menu (dubai example), if you notice i added mouth click/set relative position/-109/0/61/0 for floor_location to resets the floor location to highlight the ground button on the floor map in case the user click the dubai button in the drop menu while the dubai floor plan is shown, without this action if the user chose to see the first floor and then he want to click on the dubai button on the drop menu , the first floor button will remain highlighted while the ground floor map will be shown , so far this work well for a floor plan with two floor only , but with a villa that has 3 floors ( ground, first and second floor) this will not work, so I need to understand how the floor-location in the hopki project works because i noticed that this floor_location has a different position in the skin from the position of X_floor_select which it highlights so how mouth click/set elemnt position/$self/floor_location control that (the last two image attached show what I mean).

I hope I put it in a clear and understandable way, it is complicated and my English is not so good.

best regard
Egami

[Egami]

Attached is a demo test for what i achieved , it may help to explain what i mean , u will see the problem on the granada button on the drop down menu, try to click on it and move into the first or 2nd floor then click on the granada button again in the drop down menu, the highlight supposed to move over the ground button, i managed to solve this problem on rest of the floor plans which have only two floors.
Your advice/tips are highly appreciated.
By the way this drop-down menu is build by Boothy and modified by Hopki , thanks a lot for both of them http://ggnome.com/forum/viewtopic.php?f ... enu#p35878

[Egami]

you are right 360Texas, i edited it and re-uploaded it while your surveying , i will be glad if you take a look again, will be waiting for your comment

[360Texas]

Using PC Win8.1 and Chrome 40.0.2214.93m

All action functions work very good. + - restart auto-rotate, home, left, right, up, down (audio not available ?) Toolbar "[x] Full screen" not working yet.

Rotation is smooth.

Noticed that this project is delivering to the forum comment screen a FLASH output. Did you build this project using HTML5 (for Safari browser iPhone/iPad) AND Flash fallback for those browsers that do not use html5 ?

Drop down menu links appear to function properly. Fly out area maps work properly.
I suspect the perimeter dimensions are in "meters" but units (meter, feet, kilometers) not shown. Might need "legend" = ? [approximate dimensions are in Meters]

Mouse over tooltips would be a good added feature. Example = Red/white circle hot spots = Go to next panorama and Map Node marker mouse over hotspots might need to on mouse over show "Go To Marbella" or "Go To Kitchen". On mouse over show "Kitchen" Mouse leave hide text.

Appears that this demo the display might be default like 400 x 300. Most monitors for PC's and Tablets are wider Like 800 x 400. Screen interference issue is left side toolbar and fly out maps over lap left side drop down menu. When viewing this project on a 5" or 13cm screen will your left and right side bottom tool bar conflict

Do your layout ideas consider using this project on different sized screens like small smart phones [5"] 13 cm screens and Desktop PC monitors that use (27"] 70 cm screens. Meaning developing your webpage to use RESPONSIVE page design ?

Thank you for showing us your work today.

Page looks great so far

[360Texas]

Dr. Mohamed Egami,

Thanks for using the (i) information button and info page. I found your website URL http://www.egamiphotography.com/

I really enjoyed viewing your photography work.

In particular, the far right end or last frame in the slideshow. Your photo shows an ORANGE dust storm wall. When we lived In Saudi Arabia they called this a "Shamal" sand storm.

Thank you for sharing. Now I understand the time delay between Sudan and Texas (UTC -6)

/s/
Dave still at 360Texas.com

[Egami]

Thanks a lot Dave for your kind comments on the demo, your advice will be highly considered on the final production . What do u think about my problem explained above, do u have any ideas?
I'm so glad u like my work and it is an honor to receive such nice words on my page from someone like you, yes the weather and geographic nature in Sudan are similar to Saudi Arabia expect in Sudan we have the Great River Nile, although Sudan and Saudi Arabia are in two different continent they are only separated by the Red sea, we call this seasonal storm "Habob" in Sudan

best regard
Egami

[360Texas]

u will see the problem on the
granada button on the drop down menu,
try to click on it and move into the first or 2nd floor then
click on the granada button again in the drop down menu,
the highlight supposed to move over the ground button

I am only guessing here but:

I did do your request in the order listed.

I found when selecting the drop down menu item Granada that the red highlight was already in the upper left floor plan panel corner.

I think it might need to be relocated down over bottom button called (ground floor).

highlight.png (354.17 KiB) Viewed 8240 times

[Egami]

The thing that i could not figure out the floor_location came with skin positioned on the upper left corner , and it works fine in that location with ground and first floor buttons which have different locations on the skin, so i do not know how it highlights these buttons in that way when using mouth click/set element position/$self/floor_location, may be understanding this issue i can succeed to highlight the three floor buttons of grandad villa properly (ground, first and second buttons) which I'm desperately trying to achieve.