API reference

FloorPlanEngine

The main Floor Plan SDK class

Kind: global class
Properties

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

• FloorPlanEngine
  • new FloorPlanEngine(node, [startupOptions])
  • .loadScene(sceneId, accessToken) ⇒ Promise.<Boolean, Error>
  • .set(args)
  • .zoomExtents([margin], [animate]) ⇒ Promise.<Boolean, Error>
  • .zoomToElement(node, [margin], [animate]) ⇒ Promise.<Boolean, Error>
  • .setZoom(bb, [animate]) ⇒ Promise.<Boolean, Error>
  • .zoomByFactor(factor, [animate]) ⇒ Promise.<Boolean, Error>
  • .addInfoWindow(args) ⇒ infowindow
  • .addHtmlMarker(args) ⇒ htmlmarker
  • .addMarker(args) ⇒ marker
  • .exportImage(args) ⇒ Promise.<String, Error>
  • .getPlanPosition(pos) ⇒ Array.<Number>
  • .getScreenPosition(pos) ⇒ Array.<Number>
  • .getResourcesFromPosition(pos) ⇒ Object
  • .on(event, callback, context)
  • .once(event, callback, context)
  • .off(event, callback)
  • .destroy()

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

Param	Type	Description
sceneId	string	id of the scene to load
accessToken	AccessToken	space 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

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

.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

Param	Type	Description
bb	BoundingBox	bounding box
[animate]	Animate	duration 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

Param	Type	Default	Description
factor	number		zoom factor, larger than 1 zooms in, smaller than 1 zooms out
[animate]	Animate	true	duration 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

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.

.addHtmlMarker(args)

Add custom HTML marker

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

Param	Type	Default	Description
args	Object		arguments for the html marker
args.el	Element		DOM 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

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)

method to set the transient _highlight property of a scene node

Kind: instance method of SceneNode

Param	Type	Description
args	Object	highlight arguments
args.fill	Array.<Number>	color overlay for the node
args.fillOpacity	Array.<Number>	opacity for the color overlay
args.outline	Array.<Number>	outline color for the node - no outline if not set
args.outlineWidth	Array.<Number>	width of the outline

Type definitions

StartupOptions

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)
[preserveViewbox]	ViewboxAnchor	'center-center'	where the floor plan should be anchored to if the viewport resizes
[ui]	UI		toggle overlaying UI elements
[theme]	Theme		floor plan theming
[spaceLabelMapping]	SpaceLabelMapping		mapping table for custom space labels
[units]	Units		set the unit system
[api]	ApiConfig		optional way to configure the api endpoints

AccessToken

Properties

Name	Type	Description
[publishableToken]	string	Space API v2 publishable access token.
[authorization]	string	Authorization 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

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

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

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
[showAssetTextures]	boolean	false	render assets with textures rather than solid colors
elements	Object
[elements.roomStamp.roomStampDisplay]	array.<RoomStampEntry>		show the usage information in room stamps
[elements.roomStamp.showUsage]	boolean	true	Deprecated: show the usage information in room stamps
[elements.roomStamp.showArea]	boolean	true	Deprecated: show the area information in room stamps
[elements.roomStamp.text]	RGBArray		text color for room stamps
[elements.roomStamp.textOutline]	boolean	true	whether 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

{
  kitchen: 'cuisine'
}

RGBArray

R,G,B color array 0 - 255

BackgroundOptions

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

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

Events that are exposed through the floor plan instance

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

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
[event.viewbox]	BoundingBox	viewbox event contains the current viewbox
[event.zoom]	number	viewbox event contains the current zoom level

Marker

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

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

HtmlMarker

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

Properties

Name	Type	Description
el	Element	Dom Element to be added to the floor plan
pos	Array.<Number>	floor plan coordinates for the marker
offset	Array.<Number>	pixel offset for the marker
remove	function	destroys the html marker
set	function	change html marker properties .set({pos, offset})

Space

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

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>	categories of the asset
subCategories	Array.<string>	subCategories 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

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

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

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

Name	Type	Description
spaceApiV2Url	string	Space API endpoint
storageUrl	string	Storage endpoint