The viewer is an HTML5 app for the desktop and mobile web that loads and renders the floorplans of a Floorplanner project in 2D and 3D. The 2D view can be zoomed and panned, the 3D view can be rotated and zoomed.

The viewer is available as a link, which can be shared on social media, or it can be embedded into a website through a simple iframe. If you want to have more control over the look & feel of the floorplan viewer, that’s possible too.

Table of contents

Link to the viewer

The viewer is available for all public Floorplanner projects at the following URL:

https://floorplanner.com/projects/{project_id}/viewer

All you need to know is the ID of the Floorplanner project (project_id), for example:

https://floorplanner.com/projects/34434582/viewer

The floorplan viewer offers three parameters to be customized:

Parameter Description
view Allows you to set the initial view to 2D or 3D. The default view is 2D.
section Allows you to cut the walls at a certain height (in centimeters). By default there is no section.
top_color Allows you to set the color of the top of the walls. Make sure not to use the ‘#’ sign as it doesn’t play well in URLs. The default top color is black.

For example:

https://floorplanner.com/projects/34434582/viewer?view=3d&section=180&top_color=cccccc

Embed the viewer

The floorplan viewer can easily embedded into a website by loading the URL into an iframe. For example:

<iframe src="https://floorplanner.com/projects/34434582/viewer?view=3d&section=180"
    frameborder='0'
    width='650'
    height='450'
    scrolling='no'>
</iframe>

Integrate the viewer

If you want more control over the look & feel of the viewer in your website, we offer a way to roll your own. You can use the viewer to only render the floorplans in 2D & 3D, and build your custom UI around it. Let me explain how you can integrate a customized version of the floorplan viewer into your website in a couple of steps.

Include JS

First you have to load the JavaScript file of the floorplan viewer, which can be found here:

http://cdn.floorplanner.com/apps/fp.viewer/{version}/fp.viewer.min.js

The floorplan viewer uses jQuery, so make sure it’s available too.

Add HTML elements

Make sure to have a dedicated element for the viewer in your HTML page. The element has to have two other elements, one for the 2d view and one for the 3d view. For example:

<div id='app'>
    <div id='fp2d'></div>
    <div id='fp3d'></div>
</div>

Define a theme

A theme defines how the floorplans look, like if the dimension lines should be shown or not. The example below shows how you can define a theme and which options are available. Btw. you don’t have to specify a custom theme. You can ignore this step if you are happy with the default look.

var theme = {
  ui: {
    initView: '2d'// or '3d'
    rotate3d: true// automatically rotate the 3d view
  },
  engine: {
    useSection3D: true, // use sections (cut walls, doors & windows at certain height) in 3D, default is false
    wallSectionHeight: 180, // the height of the section, make sure to set useSection3D
    wallTopColor: 0x7F7F7F, // top colour of walls in 3D
    engineAutoDims: true, // generate and show automatic dimensions
    showGrid: true, // visibility of grid
    showDims: true, // visibility of dimension lines (both auto and manual)
    showObjects: true, // visibility of furniture items
    showLabels: true, // visibility for all labels, including room names and dims
    useMetric: true,// false means Imperial system, affects dimensions
    visuals: 'ALL' // default; other options are 'BW' (b/w furniture, white areas) and 'BWC' ('BW' + coloured areas)
  }
};

Init floorplan viewer

You can initialize the floorplan viewer by calling:

fpViewer.init(params).

For example:

fpViewer.init({
  projectId: projectId,
  box2d: fp2d,
  box3d: fp3d,
  theme: theme,
  callback: onInit,
  jquery: $
});

The parameters are:

Parameter Description
projectId The ID of the Floorplanner project
box2d The HTML element for the 2D floorplan rendering
box3d The HTML element for the 3D floorplan rendering
theme An object that allows to customize the way a floorplan looks
callback Once the floorplan data is loaded, this function is called with the data of the project (including floor levels e.g.)
jquery The jQuery object so the floorplan viewer doesn’t have to use the global variable

Project data

When the Floorplanner project data has been loaded, the callback function is called with the project data. The structure of the project object looks like this:

{
  "id": "number",
  "name": "string",
  "items" : {
    "floors": {
      "type": "array",
      "description": "The collection of floor levels in a project",
      "properties": {
        "id": "number",
        "name": "string",
        "level": "number",
        "items": {
          "designs": {
            "type": "array",
            "description": "The collection of design variants in a floor level",
            "properties": {
              "id": "number",
              "name": "string",
              ... much more data...
            }
          }
        }
      }
    }
  }
}

Add floor selection & view UI

With the project data you can create the UI for selecting floor levels and viewing them in 2D or 3D. This is done by calling

fpViewer.display2D(design)

or

fpViewer.display3D(design)

You can get the design object from the project object.

For example:

function display() {
  if (view == '3d') {
    $('#fp2d').hide();
    $('#fp3d').show();
    fpViewer.display3D(design);
  } else {
    $('#fp2d').show();
    $('#fp3d').hide();
    fpViewer.display2D(design);
  }
}

function renderFloor(floor) {
  return $('<li>' + floor.name + '</li>').data('design', floor.designs[0]);
}

function onInit(project) {
  $('#selector').html(project.floors.map(renderFloor));
  design = project.floors[0].designs[0];
  view = theme.view;
  display();
}

Cleanup HTML elements

If you want to clean the HTML elements the floorplan viewer uses, for whatever reason, you can call:

fpViewer.cleanup();