In 2016 we released a new version of the editor on Floorplanner. The most important reason to build a new editor was that the previous version relied on the Adobe Flash Player. The support for this browser plugin has decreased very rapidly, making it difficult to use the editor anymore.

We started from scratch to build a new editor in JavaScript / HTML5. At the same time, we redesigned the UI to make it easier to use, and we decided to start using the same furniture models that we use on Roomstyler. The quality of these models is a lot better than the original Floorplanner models opening the door to floor plan renderings in 2D and 3D of much higher quality.

This page describes the difference between FML version 1.0 and FML version 2.0.

Table of contents

Project FML


The new editor has a couple of new settings, and we store these settings in the existing tag. The value is stored as a string (serialized JSON).

  "wallTopColor3D": "F7F7F7",
  "wallTopColor2D": "000000"}

Design FML


We added a version attribute to the tag to distinguish between FML version 1.0 and version 2.0.

<design version=”2.0”>

No assets

We no longer have the section in the FML. We don't store this data in FML anymore because we noticed that it turns stale after a while. The FML still has the reference ids to the assets of course, and we use them to request the asset data from one of our web services.

Wall balance

Sometimes you want to align walls that have different thicknesses, creating a smooth wall surface. This was not possible in the old editor because walls are evenly distributed on their centerlines; half of the wall on one side, the other half on the other.

In FML version 2.0 we add a ‘balance’ property to a wall, making it possible to change the distribution of the thickness along its centerline. The ‘balance’ property is saved with each wall, in a separate tag which is nested in the tag (just like thickness). Balance is a floating number from 0 to 1. Value of 0.5 means that ½ of the thickness goes to the ‘left’ and ½ to the ‘right’. Bigger values create more offset to the ‘left’ and smaller values - to the ‘right’.


Wall color & material

We added support for applying a color or a material (wall paper, tiles e.g.) to a wall. This can be done by adding left and right tags to a wall (a line tag). Left refers to the left side of a wall when looking from start (a) to end (b), and right to the right side. A color is defined by the color attribute with a hex code, and a material by the refid attribute with the texture id.

In addition to that, some walls may have custom top color and custom outline. That’s specified by outline and top tags.

  <left color="#FFFFFF"/>
  <right refid="rs-2818"/>

Opening rotation removed

We removed the rotation property of openings (doors & windows) as it now always follow the rotation of the wall on which it is placed.

Design units removed

We removed the units property of a design as this setting is already saved with the rest of settings on the project level.

Item and area roles

Both objects and areas now have an optional attribute named ‘role’. This is an optional string which is used to indicate the role of this object/color/texture in the design. Roles are usually assigned by dropping items/colors/textures from collection presets. This attribute makes collection swapping possible.

  <asset refid="ac3fc4e4451cc9a3f50dd889b4047d0ce183e2dc"/>
  <role>Comfy chair</role>
  <asset refid="rs-315"/>
  <role>Floor texture</role>

Holes in surfaces

Some user drawn areas (a.k.a surfaces or custom_area) can have an extra property isCutout attached to them. This will lead to a hole drilled where the surface is going through everything below it.


Area label position

Area labels can be user-positioned, hence two new attributes: name-x, name-y. These are coordinates relative to area centroid. Why relative - to keep it spatially connected with the area/surface and move the label together with the area.


Room types

Both custom and generated areas now contain a new attribute, room-type-id (integer). It’s assigned whenever user drops a room type onto a room. This attribute is optional.


First, an example FML:

<cameras type="array">
    <id type="integer">1</id>
    <points>-2.38 -2.33 1.00</points>
    <direction>0.000000 -1.000000 0.000000</direction>
    <id type="integer">2</id>
    <points>0.23 0.41 1.00</points>
    <direction>1.000000 0.000000 0.000000</direction>

Designs can have multiple cameras. Camera is identified by an integer id (local to a design, starts with 1). Points are {x,y,z} coordinates in metres, as usually. Direction is set of normalized values {dx,dy,dz} in range -1..1. Fov is integer, in degrees.


Just like project settings, we also have design settings. As designs are stored directly as XML (no relational db behind this), we can just use XML tags in there.