Web Timeline SDK

Installation

npm install @een/cm-timeline-sdk

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

import EENTimelineSDK from "@een/cm-timeline-sdk";
import "@een/cm-timeline-sdk/dist/EENTimelineSDK.css"

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:

<script src="../path/to/EENTimelineSDK.umd.min.js"></script> 
<link rel="stylesheet" href="../path/to/EENTimelineSDK.css">

❗️
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:

const timeline = new EENTimelineSDK();

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

const timeline = new EENTimelineSDK.default();

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

<div id="test-app" style="display: flex; height: 100vh;"></div>

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:

timeline.accessToken("XXXXXXXXXXXXXXXXXXXXXX:XXXXXX");
timeline.setCameraId(40223);
 
timeline.setPrimaryColor("#d69e02");
 
timeline.setEventFilters(["TriggeredAudio","AnalyticsObject","AnalyticsPerson"]);
timeline.setStartTime(1602751971960);
timeline.setZoomLevel(2);
 
timeline.mount("test-app");
timeline.setLanguage("pt");
 
timeline.on("error", error => {
    console.log(error);
});

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

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:

[
  'TriggeredPir',
  'TriggeredMotion',
  'TriggeredAudio',
  'TriggeredDoorbell',
  'AnalyticsObject',
  'AnalyticsPerson'
]

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 milliseconds.
To get this value you can call .getTime() from any Date, as shown below:

new Date("2020-11-01T15:38:23.373Z").getTime()

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:

[1, 2, 3, 4]

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:

["en", "nl", "de", "es", "pt", "pl", "tr", "ja"]

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.