Skip to content

API reference

FloorPlanEngine

The main Floor Plan SDK class

Kind: global class
Properties

NameType
resourcesObject
resources.spacesArray.<Space>
resources.assetsArray.<Asset>

new FloorPlanEngine(node, [startupOptions])

Returns: Object - floor plan engine instance

ParamTypeDescription
nodestringId of a DOM element
[startupOptions]StartupOptionsstartupOptions

.loadScene(sceneId, accessToken)

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

ParamTypeDescription
sceneIdstringid of the scene to load
accessTokenAccessTokenspace api v2 publishable or temporary access token

.set(args)

Change options after the floor plan engine instance has been created

Kind: instance method of FloorPlanEngine

ParamTypeDescription
argsStartupOptionsStartup 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

ParamTypeDefaultDescription
[margin]number1margin around scene in meters
[animate]Animateduration 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

ParamTypeDefaultDescription
nodestring | SceneNodeid of an asset or a space or the node itself
[margin]number1margin around scene in meters
[animate]Animateduration of the animation for the viewport transform, if not provided there will be no animation

.setZoom(bb, [animate])

set zoom to a specific bounding box

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

ParamTypeDescription
bbBoundingBoxbounding box
[animate]Animateduration of the animation for the viewport transform, if not provided there will be no animation

.zoomByFactor(factor, [animate])

zoom the current view by a factor

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

ParamTypeDefaultDescription
factornumberzoom factor, larger than 1 zooms in, smaller than 1 zooms out
[animate]Animatetrueduration of the animation for the viewport transform, if not provided there will be no animation

.addInfoWindow(args)

Add HTML info window

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

ParamTypeDefaultDescription
argsObjectarguments for the info window
[args.pos]Array[0, 0]coordinates of the window in meters
[args.width]number120pixel width of the window
[args.height]number80pixel height of the window
[args.html]stringhtml string as content of the info window
[args.closeButton]booleantrueIf true , a close button will appear in the top right corner of the info window.

.addHtmlMarker(args)

Add custom HTML marker

Kind: instance method of FloorPlanEngine
Returns: HtmlMarker - returns info html marker instance

ParamTypeDefaultDescription
argsObjectarguments for the html marker
args.elElementDOM element that displays the usage
[args.pos]Array[0, 0]plan coordinates of the marker in meters
[args.offset]Array[0, 0]screen offset of the marker in pixels

.addMarker(args)

Add plan marker

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

ParamTypeDefaultDescription
argsObjectarguments for the marker
[args.pos]Array[0, 0]coordinates of the marker in meters
[args.color]string"#669cff"color of the marker
[args.size]string40size 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

ParamTypeDefaultDescription
argsObject
[args.format]string"png"output format: png, jpg
args.fileNamestringfle name relevant if download is true
[args.quality]number90only relevant if format is jpg
[args.output]string"base64"desired output format
[args.maxWidth]numbertarget width of the image
[args.download]booleanfalseIf 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

ParamTypeDescription
posArray.<Number>Screen coordinates [ x, y ]

.getScreenPosition(pos)

Convert plan coordinates to screen coordinates

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

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

ParamTypeDescription
pos*plan position

.on(event, callback, context)

Subscribe to an event

Kind: instance method of FloorPlanEngine

ParamType
eventFloorPlanEvents
callback*
context*

.once(event, callback, context)

Subscribe to an event once

Kind: instance method of FloorPlanEngine

ParamType
eventFloorPlanEvents
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

ParamType
eventFloorPlanEvents
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)

method to set the transient _highlight property of a scene node

Kind: instance method of SceneNode

ParamTypeDescription
argsObjecthighlight arguments
args.fillArray.<Number>color overlay for the node
args.fillOpacityArray.<Number>opacity for the color overlay
args.outlineArray.<Number>outline color for the node - no outline if not set
args.outlineWidthArray.<Number>width of the outline

Type definitions

StartupOptions

Properties

NameTypeDefaultDescription
[hideElements]Array.<HideableElement>[]option to hide certain elements
[panZoom]booleantrueoption to disable panning and zooming
[panZoomMargin]numberif set panning and zooming is restricted to the scene boundingbox plus the margin
[planRotation]number0rotation angle for the floor plan in degrees (counterclockwise)
[preserveViewbox]ViewboxAnchor'center-center'where the floor plan should be anchored to if the viewport resizes
[ui]UItoggle overlaying UI elements
[theme]Themefloor plan theming
[spaceLabelMapping]SpaceLabelMappingmapping table for custom space labels
[units]Unitsset the unit system
[api]ApiConfigoptional way to configure the api endpoints

AccessToken

Properties

NameTypeDescription
[publishableToken]stringSpace API v2 publishable access token.
[authorization]stringAuthorization header value for a Space API v2 temporary access token.

ViewboxAnchor : 'left-top' | 'left-center' | 'left-bottom' | 'center-top' | 'center-center' | 'center-bottom' | 'right-top' | 'right-center' | 'right-bottom'

Viewbox anchor described as <x-axis>-<y-axis>. This describes where the floor plan should be anchored to if the viewport (ie. the containing DOM element) resizes

HideableElement

Elements that can be hidden in the floor plan

'interior' | 'roomStamp'

UI

Properties

NameTypeDefaultDescription
[menu]booleantrueShows bottom left menu buttons that include the measuring tool and a zoom extents button
[scale]booleantrueShow a dynamic scale indicator
[coordinates]booleantrueShow the current cursor position in plan coordinates

RoomStampEntry

Space properties that can be shown in room stamps

'area' | 'customId' | 'name' | 'usage'

Theme

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

Properties

NameTypeDefaultDescription
backgroundBackgroundOptionsdefine the background
[wallContours]booleanfalsewall contours are merged to one continuous outline, needed if you want white walls
[showAssetTextures]booleanfalserender assets with textures rather than solid colors
elementsObject
[elements.roomStamp.roomStampDisplay]array.<RoomStampEntry>show the usage information in room stamps
[elements.roomStamp.showUsage]booleantrueDeprecated: show the usage information in room stamps
[elements.roomStamp.showArea]booleantrueDeprecated: show the area information in room stamps
[elements.roomStamp.text]RGBArraytext color for room stamps
[elements.roomStamp.textOutline]booleantruewhether the room stamp text should have an outline to assist with contrast issues
[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)

SpaceLabelMapping

Map space labels by space usage or space id to a custom name

Example

js
{
  kitchen: 'cuisine'
}

RGBArray

R,G,B color array 0 - 255

BackgroundOptions

Background of the floor plan canvas

Properties

NameTypeDefaultDescription
[color]string"#f3f5f8"background-color: hex code for color, set to 'transparent' for transparent background
[showGrid]booleantrueshow a dynamic grid

Units

Which unit system and how to display the units

Properties

NameTypeDefaultDescription
[system]'metric' | 'imperial'metricmeters or feet?
[digits]number0how many digits should be shown?
[roomDimensions]'area' | 'boundingBox'area12m2 or 4 x 3m ?

FloorPlanEvents

Events that are exposed through the floor plan instance

'click' | 'dblclick' | 'mousemove' | 'drop' | 'viewbox'

Properties

NameTypeDescription
eventObject
event.posArray.<Number>Cursor position in plan coordinates
event.sourceEventArray.<Number>Original event
[event.nodeId]Array.<Number>Optionally the id of a node that is in scope
[event.viewbox]BoundingBoxviewbox event contains the current viewbox
[event.zoom]numberviewbox event contains the current zoom level

Marker

Marker instance

Properties

NameTypeDescription
posPointposition of the marker in meters
colorstringcolor of the marker
removefunctiondestroys the marker
setfunctionchange marker properties
onfunctionadd event listener to the marker
offfunctionremove event listener from the marker

InfoWindow

Info window instance

Properties

NameTypeDescription
widthnumberpixel width of the window
heightnumberpixel height of the window
htmlstringhtml string as content of the info window
closeButtonbooleanIf true , a close button is visible in the top right corner of the info window
posPointposition of the info window
htmlstringHTML content of the info window
removefunctiondestroys the info window
setfunctionchange info window properties

HtmlMarker

create a html marker that has a fix position on the floor plan

Properties

NameTypeDescription
elElementDom Element to be added to the floor plan
posArray.<Number>floor plan coordinates for the marker
offsetArray.<Number>pixel offset for the marker
removefunctiondestroys the html marker
setfunctionchange html marker properties .set({pos, offset})

Space

Computed properties for spaces in the floor plan

Properties

NameTypeDescription
areanumberArea in square meters
boundingBoxBoundingBoxaxis aligned bounding box in world coordinates
centerPointcenter defined as most distant point from the contour
assetsArray.<string>Array of assets ids in the space
idstringunique identifier of the space
nodeSceneNodereference to the corresponding scene node
polygonArray.<Point>contour of the space in world coordinates
polygonHolesArray.<Point>optional holes of the space in world coordinates
usagestringHuman readable description of space usage, e.g. "Work"

Asset

Computed properties for assets in the floor plan

Properties

NameTypeDescription
boundingBoxBoundingBoxaxis aligned bounding box in world coordinates
idstringunique identifier of the asset resource
nodeSceneNodereference to the corresponding scene node
positionObjectx, y, z - y is up
polygonArray.<Point>object aligned bounding polygon in world coordinates
dimensionsDimensions3D dimensions
categoriesArray.<string>categories of the asset
subCategoriesArray.<string>subCategories of the asset
manufacturerstringManufacturer
namestringName of the product
productIdstringunique identifier of the product
tagsArray.<string>descriptive tags

BoundingBox

Axis aligned 2D bounding box

Properties

NameTypeDescription
lengthnumberdimension on the x axis
widthnumberdimension on the z axis
xnumberx min
x2numberx max
znumberz min
z2numberz max

Dimensions

3D Dimensions of the object aligned bounding box

Properties

NameTypeDescription
lengthnumberdimension on the x axis
widthnumberdimension on the z axis
heightnumberdimension on the y axis ( up )

Point

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

Array.<number>

ApiConfig

For single tenant setups Floor plan engine can be configured to connect to different endpoints

Properties

NameTypeDescription
spaceApiV2UrlstringSpace API endpoint
storageUrlstringStorage endpoint