JavascriptTutorial

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.

Embedding Floorplanner

First, you have to include the Floorplanner Javascript class into your page. Floorplanner uses the swfobject library, which must be included as well in the header of your page.

<script type="text/javascript" 
    src="http://beta.floorplanner.com/javascripts/floorplanner/swfobject_20.js"></script>
<script type="text/javascript" 
    src="http://beta.floorplanner.com/javascripts/floorplanner/floorplanner.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 in into the HTML element. Make sure the HTML element is loaded before you call the embed function. This can be done with the following code.

<script type="text/javascript">
<!--
var fp = new Floorplanner({project_id: your_project_id }); // Create the Floorplanner object
window.onload = function() { fp.embed('div_name'); }
-->
</script>

That should be all to get started!

To make it actually useful, you probably want to adjust the looks or some behavior of the Floorplanner application, or handle some events.

Additional resources: events, options & functions

• 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 JavascriptOptions for the available options.
• The application yields several events. You can add event handlers to these events to customize the behaviour. See JavascriptEvents 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 JavascriptFunctions for a reference.