Web Timeline SDK

Installation

JavaScript Import

If importing it in any web project using any type of JavaScript frameworks, the SDK can be imported as such:

The CSS file can be imported in whichever way is best for you. Shown above is how you can import it into a Vue.js project, however, most frameworks allow a similar way of importing it.

The CSS files must be imported for the Timeline to function as expected.

Our CSS can alter some HTML elements on your project if those elements have no added styling to them. This is because of the Vue UI library we use to build our Timeline. We suggest you import our CSS before your own CSS files, so your styling overwrites any changes the library might do to basic elements.

HTML Import

The files can also be imported directly into the HTML head, as shown below:

Our CSS can alter some HTML elements on your project if those elements have no added styling to them. This is because of the Vue UI library we use to build our Timeline. We suggest you to import our CSS before your own CSS files, so your styling overwrites any changes the library might do to basic elements.

Using the SDK

Once the JS file and the CSS file are imported, you should instantiate the timeline as such:


Or if you imported the JS file in a script tag in the HTML:

You should also create a div with a unique id that will hold the Timeline. The div should contain the following format:


Notice that the div must have display: flex and you should define a height for the Timeline, otherwise, it will collapse itself. We also recommend not making the Timeline smaller than 1005px in width, as it will cause some UI bugs with the buttons.

You can then proceed to pass the necessary values to the timeline as shown in the example below:


API

accessToken(token)

Set the access token that will be used to authenticate all API requests

Parameters:

Name

Type

Description

token

String

Token used to authenticate all API requests

mount(divId)

Mount the timeline inside the div that has the Id passed in.

Parameters:

Name

Type

Description

divId

String

The Id of the div that will be used to mount the Timeline

on(errorType, callback)

Set a listener for errors and warnings, with a callback that will return these messages.
Currently we only have errorType: “error“ messages.

Parameters:

Name

Type

Description

errorType

String

The type of message you want to listen to.

setCameraId(cameraId)

Set the Id of the camera that should be opened in the Timeline.

Parameters:

Name

Type

Description

cameraId

Number

Id of the camera that should be opened in the Timeline

setPrimaryColor(color)

Set the primary color for the highlights in the Timeline.
The color should be passed in hexadecimal.

Parameters:

Name

Type

Description

color

String

Color in hexadecimal. Example: #d69e02

setEventFilters(filters)

Set the initial event filters applied to the Timeline. They should be passed as an array containing strings, and the filters strings should be one of these:

Parameters:

Name

Type

Description

filters

Array

Array of strings that represent the event filters that will be applied on mount.

setStartTime(time)

Set the starting time for the Timeline. The time should be passed in as a number in miliseconds.
To get this value you can call .getTime() from any Date, as shown below:

Parameters:

Name

Type

Description

time

Number

Time in miliseconds of the Timeline’s starting position.

setZoomLevel(level)

Set the initial zoom level for the Timeline.
The value should one of the following:

Parameters:

Name

Type

Description

level

Number

Zoom level, that ranges from 1 to 4.

setLanguage(code)

Set the language used to translate the Timeline.
The supported languages are shown below:

Parameters:

Name

Type

Description

code

String

A language code. Example: “en“

reload()

Reloading the Timeline will bring it to the initial state it was when it was first mounted.
It destroys the timeline and mounts it again.

destroy()

Destroying the Timeline will get rid of the Vue instance and remove all HTML elements from the main div.