Add a floor plan drawing in the Web Player

Modified on: Thu, 15 Nov, 2018 at 11:06 PM

What is Cupix Interactive Floor Plan

Cupix Web Player supports the interactive floor plan which helps Web Player viewers get a sense of the location and viewing direction intuitively. It displays all panos on top of a floor plan image, highlights the current pano the viewer is looking around and shows the radar indicating the viewing angle and the field of view (camera zoom factor). Plus, the viewer can jump to any pano location by clicking one in the floor plan.

How to add a floor plan image into a section

Creating the interactive floor plan is pretty straightforward as long as you have a floor plan image file. And, you can align a floor plan image with a 3D tour in the Drawing View of the Layout tab. Let’s take a look at each of them.

Choose an image file from the Asset Library

All resource files except 3D tour photos or videos are managed in the Asset Library which can include floor plan image flies. Thus, please upload a floor plan image file into the Asset Library, go to the Layout tab of the Tour Editor, select a section, and choose an asset image file as a floor plan image by clicking the Choose button in the Drawing view.

Note:Using the Enter a publicly accessible URL of the file field of the asset file choosing dialog, you can use an image file from a file hosting site, like Imgur or Dropbox if you made the link publicly accessible.

Note: An asset is a file that can be used as a reference material across all 3D tours in a workspace. JPEG, PNG, and PDF files are supported as image files, and IFC, RVT, NWD, and SKP files are supported as 3D BIM files at the time of writing.

Align a floor plan image with a section

Now you need to align a floor plan image with a section by adjusting x position, y position, scale, and rotation angle.

You can transform the floor plan image using the Transform Image dialog which will show up when you select the floor plan image in the Drawing view.

You can transform and arrange a section using the Arrange Section dialog which will show up when you select a section in the Drawing view.

Or, you can use GUI handles, which are similar to PowerPoint’s object transform user interfaces, for scaling, rotating, and dragging horizontally or vertically. Scaling and rotating is centered around the pivot pointand you can easily reposition it by clicking and dragging it.

Keep in mind:To align the floor plan image with sections, you don’t need to figure out the absolute scale of each section. Instead, you need to set the common scale between the floor plan image and sections. Please refer to "Mesure dimensions" to learn more about the absolute scale.

You can associate a different floor plan image for each section (or a group of sections). When a Web Player viewer chooses a section from the Section Selector, the associated floor plan image will be replaced.

Set the right player option

The last step to show the floor plan in the Web Player is to switch Show Floor Plan option on in the Customize Player options of the Publisher tab.

Best practices when choosing a floor plan image

Transparent background image

Cupix supports the transparency of PNG images, and it would look clean and professional when the background of the floor plan image is transparent.

Image file size

Users can zoom deep in the floor plan image in the Web Player and so you would prefer using a high-res photo. However, considering the loading time of the image into the Web Player and rendering performance on average PCs, we would recommend limiting the image file size up to 2 MB.

Update the floor plan image

If you want to replace the floor plan image with a newer version, go to the Asset Library and click the upload icon and upload the new file.

Level of detail on a floor plan in the Web Player mode

If panos are densely distributed in a 3D tour, then the web player will automatically adjust the level of details to show an adequate number of pano rings on a floor plan of the 3D tour as you zoom in and out of the floor plan. This is necessary to prevent too many pano rings covering up the floor plan and obscuring the floor plan information.