Introduction

This is the documentation for the flash version of the editor. If possible, use “Embed the editor v2” instead!

The Javascript API can be used to include the Floorplanner application within an HTML page. Its primary function is to make it easy to embed the application within any given DIV-element of the HTML page and iron out the differences between browsers. It contains functions to access information about the current project, functions to get and set the state of the application and functions to control it. Moreover, it provides hooks to respond to events that occur while the application is running. This is a client-side API, which means that the code will run within the browser of the users. Because Floorplanner is a Flash application, users must have the Flash plugin (version 9 or higher) installed on their system.

Table of contents

Setup HTML

Floorplanner can be embedded into an HTML page with the following three steps:

  • Include the Floorplanner Javascript files
  • Create a Floorplanner object
  • Embed Floorplanner in an HTML element You can see a little demo of this API over here http://cdn.floorplanner.com/static/real_estate_portal1.html

External JS libs

First, you have to include the Floorplanner Javascript file into your page.

<script type="text/javascript" src="http://floorplanner.com/jscc/embed.js"></script>

Now, make sure to add an element to your page in which the Floorplanner application should be loaded. To load Floorplanner, you will have to create a Floorplanner-object, make it point to your project and embed it into the HTML element. Make sure the HTML element is loaded before you call the embed function. Loading the editor is done with the following code:

<!-- HTML element is loaded before script is called -->
<div id="fp-container"></div>

<script type="text/javascript">
  // Load Floorplanner in the target element
  var fp = new Floorplanner("fp-container", 1234567, {});
</script>

That should be all to get started! To actually make it useful, you probably want to adjust the looks, behaviour or capture some events of the Floorplanner application.

Additional resources

  • The Floorplanner application supports several options to change its looks and behaviour. These options can be passed to the Floorplanner constructor, just like the project_id options was passed. See Javascript Options for the available options.
  • The application yields several events. You can add event handlers to these events to customize the behaviour. See Javascript Events for more information on this topic.
  • The application exports several functions that can be called by Javascript. These functions can be used to inspect the current state of the application, or to perform actions on it. See Javascript functions for a reference.

Javascript Options

The Floorplanner application supports numerous options. These options can change the way the application looks and the way the application behaves.

Specifying options

Floorplanner options must be provided when creating the Floorplanner-object. They should be passed as a Javascript object as the 3rd argument to the Floorplanner constructor. Note that all options are optional: a default value will be chosen if the options is not explicitly specified. A simple example: var fp = new Floorplanner(elementId, projectId, options);

Option reference

The following table lists the available options available.

Option Default Description
state 'show' The configuration of the application can be set to different states. Use 'edit' to give the user access to all the functionalities like drawing walls, adding doors & windows etc. Use ‘published’ to make sure that the construction (walls, windows, doors) can’t be changed. In this state the user can still add and adjust furniture, change area color and textures. The last state ‘show’ is used to show the floor plan design as a static image, but with the ability to pan and zoom.
demo false You can set a project as a Demo-project by setting demo_project to 1. When a project is a Demo, none of the modifications to a design can be saved. See our Demo page for an example.
token   Specify a token, when you need to use authorization to load/save a private project. This is the case when the Floorplanner is integrated into an external website. Take a look at API user methods for more info about requesting a token. You need a token to execute actions when state is 'edit'
sidebar true Set to false to disable sidebar altogether.
hide_sidebar false Set to true to hide the sidebar. Default is hidden in 'show' state, and visible in 'edit' state.
details false Details tab with project name, location and description.
assets false Asset library tab, needed for decorating a floor plan.
media false Media tab with project media (pictures, videos, 360 views).
location false Location tab with a (Google) map and StreetView.
share false Share button where users can share a design on social networks.
export false Export button providing image, 3d and render export features.
tutorial false Tutorial tab can show users how to draw a floor plan.
initial undefined You can use this option to set initially opened tab. Possible values are the tab options above.
locale 't' This forces the locale to the given value, for example: de, en or fr

Javascript Events

The Floorplanner application notifies its environment about what is happening inside by events. These events can be observed with Javascript to implement custom behavior when such an event happens. For instance, a ‘‘design_loaded’’ event is fired when the design is loaded. You can observe this event and take action when it occurs.

Observing Floorplanner

You can observe an event by calling the fp.on() method on your Floorplanner object, passing the name of the event you want to observe and specifying an event handler. It is possible to add more event handlers to a single event. All registered event handlers will be called when the event is fired.

Some events will send an argument along with the event when it is fired. The argument is a Javascript object that can contain several parameters. To catch this argument, add a parameter to the event handler function.

function myDesignsHandler(e) {
  // Log event information to check properties
  console.log(e);
}

var fp = new Floorplanner(/* awesome initialization process */);

fp.on('design_loaded', myDesignsHandler);

Event reference

Event name Dispatched when Argument
embed_loaded Floorplanner embed is loaded null
design_loaded The design is loaded {designId: 123}
design_saved A design is successfully saved {designId: 123}
project_changed The user has changed one or more project settings, like name, description, location, added floor, added design  

Javascript Methods

Event reference

Event name Description
fp.isDirty(callback = function(dirty) {}) Invokes callback function with argument dirty, a boolean representing any unsaved design changes
fp.save() Saves the curreny

isDirty(callback:function(dirty:boolean))

invokes callback function with one argument: dirty, ie. whether current design is changed, and not saved

save()

saves changes in current design