Skip to main content

Custom UX

Smplr.js provides a few options that help you customize the floor plan experience to your requirements. We're regularly adding new options, so reach out and share what you'd like to do with it.

Viewer options

You can set a number of options when starting the viewer. They are listed below in addition to the basic viewer controls documented in the overview page.

space.startViewer({
// ...basicControls
renderOptions?: {
backgroundColor?: string,
walls?: {
alpha?: number,
maxHeightCm?: number
},
objects?: boolean,
annotations?: boolean,
compass?: boolean
skybox?: boolean
},
cameraPlacement?: {
alpha: number,
beta: number,
radius: number,
target: {
x: number,
y: number,
z: number
}
},
disableCameraControls?: boolean,
hideNavigationButtons?: boolean
}) => void
  • ...basicControls - refer to the overview page.
  • renderOptions.backgroundColor - optional - lets you change the background color used by the viewer. You can pass any valid CSS color string, such as 'pink' or '#81b1b3'. We advise to set the same background color on the container element to keep the load screen consistent. As for the preview image, you can change its background color to match in the editor: go to the 'Services' tab and click 'Create preview image'.
  • renderOptions.walls.alpha - optional - is a number between 0 and 1 setting the opacity of the walls, 0 being transparent and 1 opaque. Default value: 1
  • renderOptions.walls.maxHeightCm - optional - will cap the rendering of walls to the height provided in centimeter, ignoring the actual height of walls.
  • renderOptions.objects - optional - set this value to control whether the furniture and objects (if any) are rendered or not.
  • renderOptions.annotations - optional - set this value to control whether the annotations (if any) are rendered or not. This also removes the show/hide annotations button from the viewer.
  • renderOptions.compass - optional - set this value to control whether the compass (if any) is rendered or not. This also removes the show/hide compass button from the viewer.
  • renderOptions.skybox - optional - set this value to control whether the skybox is rendered or not. Default value: false
  • cameraPlacement - optional - set the initial position and direction of the camera. See camera controls for more details.
  • disableCameraControls - optional - set this to true so the camera placement cannot be changed by the user. This disables mouse, touch and keyboard inputs as well as removes the zoom control buttons. Default value: false
  • hideNavigationButtons - optional - set this to true if you want the user to control the camera but want to remove the navigation buttons. Mouse, touch and keyboard inputs will work while the buttons are hidden. Default value: false

Camera controls

Get the camera placement

space.startViewer lets you define the initial placement of the camera using the cameraPlacement option. You would typically embed the viewer and have an interface to retrieve one or more placement(s) to be stored in your database. You can then load any placement object from your database to set the initial value. The camera placement can be retrieved with the following function:

space.getCameraPlacement() => ({
alpha: number,
beta: number,
radius: number,
target: {
x: number,
y: number,
z: number
}
})

The "placement" is a Javascript object that includes the position and direction of the camera. It is defined as an orbit position (alpha, beta, radius) around a target point which the camera points towards.

  • alpha is the angle given in radians of the camera's position in the horizontal plane. -Math.PI/2 corresponds to position of the 2D editor.
  • beta is the angle given in radians of the camera's position in the vertical plane. 0 corresponds to a top down view, while Math.PI/2 corresponds to a view from the ground.
  • radius is the distance in meters between the camera and the target point.
  • target is an object providing the (x,y,z) coordinates of the target point, which is the point where the camera is pointed towards.

Set the camera placement

You can move the camera to a specific position and have it target a specific point as well by calling the following function:

space.setCameraPlacement({
alpha?: number | (currentValue: number) => number,
beta?: number | (currentValue: number) => number,
radius?: number | (currentValue: number) => number,
target?: {
x?: number | (currentValue: number) => number,
y?: number | (currentValue: number) => number,
z?: number | (currentValue: number) => number
},
animate?: boolean,
animationDuration?: number
}) => void
  • placement parameters (see description above) can be provided as the new desired value, or a function taking the current value as sole argument and returning the desired value. All parameters are optional and the ones that are not provided will keep their current value.
  • animate - optional - should be set to false to jump to the new placement and true to animate the camera to the new placement. Default value: false
  • animationDuration - optional - defines the duration of the camera animation in seconds and should be used with animate set to true. Default value: 0.6

See the controlled camera example to see this used in action.