Welcome, Guest
Username: Password: Remember me

TOPIC: Interactive Floorplan

Interactive Floorplan 17 Oct 2012 09:45 #465

Hello, Can you give me some advice how I can use the 3D floor plans that I am creating with Visual Building Basic as the basis for an interactive online presentation. I would like to show a complete building and then when the user hovers a mouse over the roof or wall, it disappears to show the internal layout of the house. I have seen the example 3D cross section views but Im not sure if that is needed.
The administrator has disabled public write access.

Re: Interactive Floorplan 17 Oct 2012 12:29 #466

  • admin
  • admin's Avatar
There are several ways to achieve an interactive image, all of which depends upon the model and the intended use. All of these methods depend on taking a series of images and then switching the image as required. Each image will have a roof, wall or floor missing.

To achieve this you can use Visual Building’s ability to switch off individual building components.
Select a 3D viewpoint and save the viewpoint, in order to achieve the exact same viewpoint again should you accidently move the model. Save the view as an image using the Save view as picture tool:

In the Projects tab you can hide each floor, by deselecting it in the project tree.

In the Projects tab, right click on a floor, usually the top floor, select Properties and in the Level field, enter a new value to raise the floor. Select Without Moving adjacent floors and then OK. The selected floor will then be raised, exposing the floor below. Save the view as an image using the Save view as picture tool:

You now have two images which you can flip between which exposes the ground floor simply by raising the floor level.

See a working example of this technique here.

To animate these image’s depends on how you are hosting your web page. In most cases you can send these images to your web designer and ask them to flip the images when the mouse cursor goes over the images.
If you are using a basic html page then you can use Javascript to do this. ( Beware using HTML5 + Javacript if you need 100% browser compatibility, as not all browsers are fully supporting this).

If you are using Wordpress or Joomla, then flipping between two images is very simple and to handle multiple image swapping (ie >2), you can use a module or plugin to achieve this. If you are using any other proprietary web presentation, then ask if they support image swapping with mouse over.

The above demonstrates how to flip 2 images, but of course you can flip between multiple images. For example removing the roof when the mouse hovers over the roof:

Right click on the 3D view and from the context menu, select Visibility. You can now hide individual components in the current 3D view. For example: to hide the roof construction, with the floor where the roof is located selected as the current floor, right click on the 3D view, and select Visibility from the context menu. Scroll down to locate Roof construction and deselect. Also locate the Roof paneling in the Extension elements and deselect.

You can also apply a glass material to any surface, so that it becomes invisible or opaque. Locate the Glass white 50% material in the Materials catalogue and drag it onto a wall or roof to view that wall / roof as 50% opaque. You can save different screen images with different walls showing as opaque.
The administrator has disabled public write access.

Re: Interactive Floorplan 18 Oct 2012 11:23 #467

Thank you for your fast and excellent response. Just one more question. How can I pop up photos that relate to different parts of a floor plan created with your software?
The administrator has disabled public write access.

Re: Interactive Floorplan 18 Oct 2012 11:39 #468

  • admin
  • admin's Avatar
Displaying linked photos to a plan can be resolved with more html/javascript in your html page, and is not part of the actual plan image creation.

You define the various hotspots that refer to a room using RECT or POLYGON commands.

eg.
<body>
<img src="floorplan.jpg" usemap="#mymap" border="0">
<map name="mymap">
<area shape="rect" coords="0,0,100,100" href="www.mywebsite.co.uk.com/kitchen.html">
<area shape="rect" coords="0,100,50,50" href="www.mywebsite.co.uk.com/wc.html">
</map>
</body>

The above simple code would define a rectangle top left of your plan and create a link to the kitchen.html. The actual solution depends on how you are hosting your web site.
The administrator has disabled public write access.
Time to create page: 0.108 seconds