Floor plans made on the Floorplanner platform are stored in our own data format called Floorplanner Markup Language (FML). It currently is an XML format but we plan to switch over to a JSON format, hopefully in the near future. The first version of FML is described on this page, but since the release of the HTML5 editor on Oct 5th 2016 we now mainly use FML version 2.0.

Why would you care about FML? Good question! People mainly care about it because they want to get amazing 2D and 3D visualizations of their floor plans. They turn their data into FML, send it to their Floorplanner Partner account and create 2D and 3D images or use one of the interactive viewers for the web or iOS or Android. This is all possible fully automated using the Floorplanner API. MagicPlan, Metropix and RoomScan are a few examples of doing this.

Table of contents

Project FML

Floorplanner works with the concept of a project. Think of a project as a house for a family with the possibility of multiple floor levels, bigger than a room and smaller than an apartment building. A project contains one of more floors and a floor contains one or more designs. This structure reflects in FML:

<?xml version="1.0" encoding="UTF-8"?>
<project>
  ...
  <floors type="array">
    <floor>
      ...
      <designs type="array">
        <design>
          ...
        </design>
      </designs>
    </floor>
  </floors>
</project>

Design FML

Most of the magic happens in the design-tag. This is where all the data of the floor plan is stored. A design - a floor plan - can consist of assets, objects, areas and lines. Please note that all the measurements are in meters.

<?xml version="1.0" encoding="UTF-8"?>
<design>
  ...
  <assets type="array">
    <asset id="string">
      ...
    </asset>
  </assets>
  <objects type="array">
    <object>
      <asset refid="string"/>
      ...
    </object>
  </objects>
  <areas type="array">
    <area>
      <area refid="string"/>
      ...
    </area>
  </areas>
  <lines type="array">
    <line>
      <asset refid="string"/>
      ...
    </line>
  </lines>
</design>

Design

You can give a design a name by providing the name-tag:

<design>
  <name>string</name>
  ...
</design>

Assets

The assets-tag contains a list of all the assets used in the design. There are three kinds of assets: objects (like furniture elements), textures (patterns used for areas) and lines (like walls, hedges, fences etc).

Object assets

<asset id="string"> for example id="e123"
  <name>string</name>
  <url2d>string</url2d>
  <url3d>string</url3d>
  <layer>int</layer>
  <filter-value>string</filter-value> [optional]
  <color>string</color> for example: #ffffff [optional]
</asset>

Texture assets

<asset id="string"> for example id="t123"
  <name>string</name>
  <color>string</color> for example #ffffff
  <url2d>string</url2d>
</asset>

Line assets

<asset id="string"> for example id="l123"
  <type>string</type>
  <color>string</color> for example #ffffff
  <url2d>string</url2d>
  <thickness>float</thickness>
</asset>

Objects

Furniture elements are described as object-tags.

<object>
  <asset refid="string"/> for example: refid="e123"
  <type>string</type> options: furniture, text, door, window
  <color>string</color> for example: #ffffff [optional]
  <points>float float float</points> x y z coordinates of the object
  <size>float float float</size>
  <rotation>float float float</rotation> [optional]
  <mirrored>bool bool bool</mirrored> [optional]
</object>

The points-, size-, rotation- and mirrored-tags all have three values. These are the x y z values of each specific tag, space separated.

Text labels

Text labels are objects but they have a different structure.

<object>
  <text>string</text>
  <align>string</align> [optional] left/center
  <font-family>string</font-family>
  <font-size>int</font-size>
  <font-color>string</font-color> for example: #ff0000
  <font-bold>bool</font-bold> [optional]
  <font-italic>bool</font-italic> [optional]
  <font-underline>bool</font-underline> [optional]
  <font-outline>bool</font-outline> [optional]
  <background-color>string</background-color> for example: #ff0000
  <background-alpha>int</background-alpha>
</object>

Media objects

Media is the term we use for images, videos, 360 degree photos and the like. Media objects can be added to a floor plan to show the location of it on the plan. The media info can be added to any object from the library, but by default we use the icon of a black marker (black circle with a plus).

The media information consists of 2 mandatory tags and 3 optional ones. The first one is the of the media. This can be any number or string. The second one is the tag, it's an URL to the thumbnail image of the media. This image is shown in the popup menu when media marker on the floor plan is clicked. When a is present, it is used in the link underneath the thumbnail image: “Show {title} »”. By default, the thumbnail image is scaled to a width of 180px, the height is scaled accordingly. If you want to show it at a different size you can set the <thumb_width> and <thumb_height> tags.</thumb_height></thumb_width>

<object>
  ...
  <type>media</type>
  <media>
    <id>string</id>
    <thumb>string</thumb>
    <title>string</title> [optional]
    <thumb_width>int</thumb_width> [optional]
    <thumb_height>int</thumb_height> [optional]
  </media>
</object>

Lines

Lines like walls, dimension lines, hedges and fences are described as line-tags.

<line>
  <asset refid="string"/> for example: refid="l123" [optional]
  <type>string</type> options: default_wall, half_wall, banister_wall, etc.
  <points>float float float float float float float float float, float float float float float float</points> [last 3 points of the first group of points are optional]
  <color>number</color> for example: #ffffff [optional]
  <thickness>float</thickness> [optional]
  <text>string</text> [optional]
</line>

The points-tag contains 2 groups of points.

The first group of points represents the 2 or 3 base points at bottom of a wall. It contains 6 or 9 values. The first 3 represent the start x y z coordinates of a line, the second 3 represent the end x y z coordinates of a line and the last 3 represent the curve x y z coordinates of a line.

The second group of points represents the 2 top points of a wall. It contains 6 values. As the bottom, the first 3 represent the top start x y z coordinates of a line, the second 3 represent the top end x y z coordinates of a line.

About control point, unlike the bottom, the top group does not have control point, because there is no option for user to set the height of the control point. However, the control point at bottom does have a calculated z-value, hence its elevation.

Areas

Areas like rooms and other surfaces are described as area-tags.

<area>
  <asset refid="string"/> for example: refid="t123" [optional]
  <type>string</type> options: generated_area, custom_area
  <points>float float float float float float float float float, float float float float float float float float float, ...</points> [last 3 points of each line segment are optional]
  <color>number</color> for example: #ffffff
  <rotation>float float float</rotation> [optional]
</area>

The points of an area are described as a combination of line segments. These line segments are comma separated. See the points-tag of a line-tag for more information about the structure of the coordinates.