API reference

FloorPlanEngine

Main class that mounts the interactive floor plan to a DOM element

Kind: global class

new FloorPlanEngine(node, [startupOptions])

Constructor that returns the floor plan engine instance

Returns: Object - returns floor plan engine instance

Param Type Description
node string Id of a DOM element
[startupOptions] StartupOptions startupOptions

.loadScene(sceneId)

Load a scene with it's unique identifier the sceneId

Kind: instance method of FloorPlanEngine
Returns: Promise.<Boolean, Error> - returns promise which resolves when loading is done

Param Type Description
sceneId string id of the scene to load

.zoomExtents([margin], [animate])

Zoom to the extent of the scene in the viewport ( wait for loadScene promise )

Kind: instance method of FloorPlanEngine
Returns: Promise.<Boolean, Error> - returns promise which resolves when animation is done

Param Type Default Description
[margin] number 1 margin around scene in meters
[animate] Animate false duration of the animation for the viewport transform, if not provided there will be no animation

.zoomToElement(element, [margin], [animate])

Zoom to the bounding box of an element ( wait for loadScene promise )

Kind: instance method of FloorPlanEngine
Returns: Promise.<Boolean, Error> - returns promise which resolves when animation is done

Param Type Default Description
element Element SVG DOM element to zoom to
[margin] number 1 margin around scene in meters
[animate] Animate false duration of the animation for the viewport transform, if not provided there will be no animation

.addInfoWindow(args) ⇒ InfoWindow

Add HTML info window

Kind: instance method of FloorPlanEngine
Returns: InfoWindow - returns info window object

Param Type Default Description
args Object arguments for the info window
[args.pos] Array [0, 0] coordinates of the window in meters
[args.width] number 120 pixel width of the window
[args.height] number 80 pixel height of the window
[args.html] string html string as content of the info window
[args.closeButton] boolean true If true , a close button will appear in the top right corner of the info window.

.addMarker(args) ⇒ Marker

Add SVG marker

Kind: instance method of FloorPlanEngine
Returns: Marker - returns marker object

Param Type Default Description
args Object arguments for the marker
[args.pos] Array [0, 0] coordinates of the marker in meters
[args.color] string "#669cff" color of the marker

.exportImage(args)

Export the current view as an image

Kind: instance method of FloorPlanEngine
Returns: Promise.<String, Error> - returns promise which resolves when the file is created

Param Type Default Description
args Object
[args.format] string "png" output format: png, jpg, svg
args.fileName string fle name relevant if download is true
[args.quality] number 90 only relevant if format is jpg
[args.output] string "base64" desired output format
[args.maxWidth] number target width of the image
[args.download] boolean false If true, methods triggers a file download directly

.changeOptions(args)

Change options after the floor plan engine instance has been created

Kind: instance method of FloorPlanEngine

Param Type Description
args StartupOptions Startup options

.getPlanPosition(pos)

Convert screen coordinates to plan coordinates

Kind: instance method of FloorPlanEngine
Returns: Array.<Number> - returns plan coordinates

Param Type Description
pos Array.<Number> Screen coordinates [ x, y ]

.getScreenPosition(pos)

Convert plan coordinates to screen coordinates

Kind: instance method of FloorPlanEngine
Returns: Array.<Number> - returns screen coordinates

Param Type Description
pos Array.<Number> Plan coordinates [ x, y ]

SceneNode

Main class for the nodes in a scene
Some nodes are exposed via state.computed.spaces and state.computed.furniture

Kind: global class

.setHighlight(args)

Kind: instance method of SceneNode

Param Type Description
args Object highlight arguments
args.fill Array.<Number> rgb colors

Type definitions

StartupOptions : Object

Properties

Name Type Default Description
[hideElements] Array.<HideableElement> [] option to hide certain elements
[panZoom] boolean true option to disable panning and zooming
[planRotation] number 0 rotation angle for the floor plan in degrees (counterclockwise)
[roomStampSize] number if set room stamps have a fixed size - otherwise they adapt to the zoom level
[ui] UI toggle overlaying UI elements
[theme] Theme floor plan theming
[units] Units set the unit system
[showExternalIds] boolean false show external ids in the floor plan
[publishableApiKey] string instead of in the query you can also provide the api key in the startupOptions

HideableElement : 'interior' | 'roomstamp'

Elements that can be hidden in the floor plan

UI : Object

Properties

Name Type Default Description
[menu] boolean true Shows bottom left menu buttons that include the measuring tool and a zoom extents button
[scale] boolean true Show a dynamic scale indicator
[coordinates] boolean true Show the current cursor position in plan coordinates

Theme : Object

This is the place to give the floor plan your own style

Properties

Name Type Default Description
background BackgroundOptions define the background
[wallContours] boolean false wall contours are merged to one continuous outline, needed if you want white walls
elements Object
[elements.roomstamp.showUsage] Object true show the usage information in room stamps
[elements.roomstamp.showArea] Object true show the area information in room stamps
[elements.interior.fill] RGBArray [238, 241, 246] furniture fill color
[elements.walls.fill] RGBArray [82, 88, 96] wall fill color
[elements.space.fill] RGBArray [255, 255, 255] default space color if not further specified
[elements.space.category.circulate.fill] RGBArray [243, 242, 240] default space color for circulation spaces (corridor, staircase, elevator)
[elements.space.category.wash.fill] RGBArray [225, 228, 233] default space color for wash spaces (bathroom, toilet)

RGBArray : Array.<number>

R,G,B color array 0 - 255

BackgroundOptions : Object

Background of the floor plan canvas

Properties

Name Type Default Description
[color] string "rgb(243, 245, 248)" background-color: CSS color string
[showGrid] boolean true show a dynamic grid

Units : Object

Which unit system and how to display the units

Properties

Name Type Default Description
[system] 'metric' | 'imperial' metric meters or feet?
[digits] number 0 how many digits should be shown?
[roomDimensions] 'area' | 'boundingBox' area 12m2 or 4 x 3m ?

Marker : Object

Marker instance

Properties

Name Type Description
pos Point position of the marker in meters
color string color of the marker
remove function destroys the marker
addEventListener function
removeEventListener function

InfoWindow : Object

Info window instance

Properties

Name Type Description
width number pixel width of the window
height number pixel height of the window
html string html string as content of the info window
closeButton boolean If true , a close button is visible in the top right corner of the info window
pos Point position of the info window
html string HTML content of the info window
remove function destroys the info window

Space : Object

Computed properties for spaces in the floor plan

Properties

Name Type Description
area number Area in square meters
boundingBox BoundingBox axis aligned bounding box in world coordinates
center Point center defined as most distant point from the contour
externalIds Array.<string> Array of user specified identifiers
furniture Array.<string> Array of furniture ids in the space
id string unique identifier of the space
node SceneNode reference to the corresponding scene node
polygon Array.<Point> contour of the space in world coordinates
polygonHoles Array.<Point> optional holes of the space in world coordinates
usage string Human readable description of space usage, e.g. "Work"

Furniture : Object

Computed properties for furniture elements in the floor plan

Properties

Name Type Description
externalIds Array.<string> Array of user specified identifiers
boundingBox BoundingBox axis aligned bounding box in world coordinates
id string unique identifier of the furniture element
node SceneNode reference to the corresponding scene node
position Object x, y, z - y is up
polygon Array.<Point> object aligned bounding polygon in world coordinates
productData ProductData product meta data

BoundingBox : Object

Axis aligned 2D bounding box

Properties

Name Type Description
length number dimension on the x axis
width number dimension on the z axis
x number x min
x2 number x max
z number z min
z2 number z max

Dimensions : Object

3D Dimensions of the object aligned bounding box

Properties

Name Type Description
length number dimension on the x axis
width number dimension on the z axis
height number dimension on the y axis ( up )

ProductData : Object

Product meta data for each furniture item

Properties

Name Type Description
dimensions Dimensions 3D dimensions
categories Array.<string>
manufacturer string Manufacturer
name string Name of the product
productId string unique identifier of the product
tags Array.<string>

Point : Array.<number>

2D Point with x and z coordinates, the array has exactly 2 entries ( x and z because y is up in our 3D space )

Animate : number | boolean

Time duration in milliseconds, true for auto duration, 0 or false for no animation