API reference

FloorPlanEngine

The main Floor plan engine SDK class

Kind: global class
Properties

Name Type
resources Object
resources.spaces Array.<Space>
resources.assets Array.<Asset>

new FloorPlanEngine(node, [startupOptions])

Returns: Object - 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

.set(args)

Change options after the floor plan engine instance has been created

Kind: instance method of FloorPlanEngine

Param Type Description
args StartupOptions Startup options

.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 duration of the animation for the viewport transform, if not provided there will be no animation

.zoomToElement(node, [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
node string | SceneNode id of an asset or a space or the node itself
[margin] number 1 margin around scene in meters
[animate] Animate 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 instance

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 plan marker

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

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
[args.size] string 40 size in pixels

.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
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

.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 ]

.getResourcesFromPosition(pos)

Get a list of spaces and assets for a specific plan position

Kind: instance method of FloorPlanEngine
Returns: Object - - list of spaces and assets

Param Type Description
pos * plan position

.on(event, callback, context)

Subscribe to an event

Kind: instance method of FloorPlanEngine

Param Type
event FloorPlanEvents
callback *
context *

.once(event, callback, context)

Subscribe to an event once

Kind: instance method of FloorPlanEngine

Param Type
event FloorPlanEvents
callback *
context *

.off(event, callback)

Unsubscribe from an event or all events. If no callback is provided, it unsubscribes you from all events

Kind: instance method of FloorPlanEngine

Param Type
event FloorPlanEvents
callback *

.destroy()

Destroy the floor plan instance

Kind: instance method of FloorPlanEngine

SceneNode

Main class for the nodes in a scene

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
[panZoomMargin] number if set panning and zooming is restricted to the scene boundingbox plus the margin
[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
[accessToken] string instead of in the string you can also provide the token in the startupOptions
[publishableApiKey] string deprecated: use accessToken property

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.asset.fill] RGBArray [238, 241, 246] asset fill color
[elements.wall.fill] RGBArray [82, 88, 96] wall fill color
[elements.space.fill] RGBArray [255, 255, 255] default space color if not further specified
[elements.space.program.circulate.fill] RGBArray [243, 242, 240] default space color for circulation spaces (corridor, staircase, elevator)
[elements.space.program.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 "#f3f5f8" background-color: hex code for color, set to 'transparent' for transparent background
[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 ?

FloorPlanEvents : 'click' | 'dblclick' | 'mousemove' | 'drop'

Events that are exposed through the floor plan instance

Properties

Name Type Description
event Object
event.pos Array.<Number> Cursor position in plan coordinates
event.sourceEvent Array.<Number> Original event
[event.nodeId] Array.<Number> Optionally the id of a node that is in scope

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
set function change marker properties
on function add event listener to the marker
off function remove event listener from the marker

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
set function change info window properties

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
assets Array.<string> Array of assets 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"

Asset : Object

Computed properties for assets in the floor plan

Properties

Name Type Description
boundingBox BoundingBox axis aligned bounding box in world coordinates
id string unique identifier of the asset resource
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
dimensions Dimensions 3D dimensions
categories Array.<string> category of the asset
manufacturer string Manufacturer
name string Name of the product
productId string unique identifier of the product
tags Array.<string> descriptive tags

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 )

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 )