Trip animation widget

Overview
Create device emulator
Setting up Trip Animation Widget
- Creating a dashboard
- Adding widget
Customization
- Settings tab
- Advanced tab
Video tutorial

Overview

In this example, we’ll study trip animation widget functionality.

This widget might be useful for different use cases, but mainly it might be used for a Tracking in a realtime, researching movement of the entities and visualizing it.

This guide was written for cloud, so some steps will be a little different from Community Edition.

It’s capable of all further versions.

Create device emulator

Firstly you need to create a device from which will collect telemetry.

Also, you may use any device you have with a coordinates telemetry (longitude and latitude).

This can be any device which receives its coordinates in a realtime.

Longitude and latitude are the key data for map visualization so that you’ll see it on a widget at the dashboard which you chose.

Create a new device Tracker1.

In our example, the device receives its longitude, latitude, speed, radius of circle, status, and coordinates of polygon use an emulator written in javascript.

For receive telemetry and further visualize it on the dashboard execute script in a command line:

node timeseries-map-bus.js $ACCESSTOKEN

Where $ACCESSTOKEN is your device access token.

$ACCESSTOKEN is located in a device details.

Emulator is capable with Node.js v8.10.0

Creating a dashboard

We need to create a dashboard where our telemetry will be visualized. It might be useful if your goal is to track how your entity moved in a specific period.

We can use an existing one or create a new dashboard for our new use case.

In our example, we create a new dashboard called “Dashboard1” for our guide reasons.

Create and open an empty dashboard. And let’s fill it with some content. Click pencil button “Enter edit mode”.

Firstly we need to create an alias to specify entity from which we’ll receive telemetry data.

Our entity in this guide will be “Tracker1” device which we created previously. We’ll give “GeoData1” name to our alias.

Now we go for adding a widget!

Trip animation widget is located in Maps bundle

In our widget we add coordinates, latitude, longitude, radius, speed and status from our alias “GeoData1” as our parameters.

They have the same labels as their keys are. Secondly, we create a widget on which we will visualize our telemetry.

We use Trip Animation widget in our guide. It’s located in Maps Bundle, Time series tab.

Also, we’ll go for “Use dashboard timewindow” so that we’ll make it easier to synchronise our data.

In addition to this, we’ll use last minute received data to visualize and change aggregation function to None, because we don’t need to guess possible data value for the next time period, we receive data in realtime without any errors.

Now we can take a look at how our device is being moving for the last minute in a realtime. Press the “Start” button.

We also can speed up our timeline cursor up to 1,5,10,25 times so that we can make a check on its routing much faster.

Customization

Settings tab

Now, when we got the basics of what our widget can provide, let us go for editing its settings to make it more functional and eye-catching. Firstly we go to settings, there we can specify:

Title of widget, its style
Title tooltip
Title icon, icon colour, icon size in a px
Change widget style
Background color, text color, padding, margin
Enable/disable drop shadow
Enable/disable fullscreen mode for widget
Enable/disable legend display
Specify mobile settings

Let’s see how it works.

Advanced tab

In a settings tab, we can specify unique parametres for Trip animation widget for functionality that only it can provide. We have:

Map Provider Settings

Trip Animation Settings

Normalization data step (ms)

Latitude & Longitude key names

You can specify name based on which widget will be updated. It uses data based on the label of the data. So that you may specify label “data-1” for the longitude key value and get longitude from the alias after we edit longitude key name as “data-1”.

You can show/hide Tooltip, its color, its font color, the opacity of tooltip and tooltip text or use tooltip function (you may change data contained in a tooltip based on data, dsData, dsIndex)

Tooltip function:

var speed = data['speed'];
var res;
if (speed > 0) {
    res = "${entityName}</br><b>Speed:</b> " + String(speed)
} else {
    res = "${entityName}</br><b>Status: On The stop</b>"
}
return res;

Markers settings

Label function

Set additional rotation angle for marker

Widget label, or specify label function (you may change data contained in a widget label based on data, dsData, dsIndex)

Label function:

var speed = data['speed'];
var res;
if (speed > 55) {
    res = "Too Fast"
} else {
    res = "Everything is OK"
}
return res;

Marker function:

In addition to all of this, there are some settings for the marker and you can specify next settings for it:

Custom marker image
Custom marker image size px

Marker image function (you may change marker image, marker image color based on data, dsData, dsIndex)
Specify other possible marker images, which can be used in a marker image function

Marker image function:

var speed = data['speed'];
var res = {
    url: images[0],
    size: 40
}
if (speed < 55) {
    res.url = images[0];
} else {
    res.url = images[1];
}
return res;

Path Settings

You can specify path color or specify path color function (you may change data based on data, dsData, dsIndex) - the color of the marker moves

Path color function:

var speed = data['speed'];
var res;
if (speed > 55) {
    res = "red"
} else {
    res = "green"
}
return res;

Path decorator

Path decorator, its size in px, end/beginning offset, decorator repeater, stroke weight and stroke opacity

Points Settings

The next option is a show points option. Points are a telemetry data updates so that you can check each. For the points next options are available.

Show/Hide points
Point color
Point size px

Use color point function

Points color function:

var speed = data['speed'];
var res;
if (speed > 55) {
    res = "red"
} else {
    res = "green"
}
return res;

Use point as an anchor (you may change data based on data, dsData, dsIndex)

Point as anchor function:

var speed = data['speed'];
if (speed > 55) {
    return true;
} else {
    return false;
}

Independent point tooltip

Polygon Settings

What’s a polygon? It’s a plane figure that’s described by a finite number of dots. We use polygon which is based on coordinates that are specified within the device we use, but you can use any other entity.

You may mark your assets and any other entities with a polygon option.

Polygon coordinates are being received in a format:

[[1CoordinateLatitude,1CoordinateLatitude],[2CoordinateLatitude,2CoordinateLatitude]...[nCoordinateLatitude,nCoordinateLatitude]]

where n - number of coordinates which polygon is described by.

For the polygon, we can specify the next settings:

Show/Hide polygon

Enable/disable polygon edit

Polygon label text or polygon label function (you may change data contained in a polygon label based on data, dsData, dsIndex)

Polygon tooltip text or polygon tooltip function (you may change data contained in a polygon tooltip based on data, dsData, dsIndex)

Polygon color, polygon opacity, or polygon color function (you may change polygon color based on data, dsData, dsIndex)

Polygon stroke color, polygon opacity, polygon weight or polygon stroke color function (you may change polygon color based on data, dsData, dsIndex)

Circle settings

Circle is a plane figure, boundary points of which are always the same distance away from a fixed central point. We use circle which is based on coordinates that are specified within the device we use, but you can use any other entity.

You may mark your assets and any other entities with a circle option.

Circle coordinates are being received in a format:

{"latitude": 37.770460000, "longitude":-122.510870000, "radius":700}

For the circle, we can specify the next settings:

Show/Hide circle

Enable/disable circle edit

Circle label text or circle label function (you may change data contained in a circle label based on data, dsData, dsIndex)

Circle tooltip text or circle tooltip function (you may change data contained in a circle tooltip based on data, dsData, dsIndex)

Circle fill color, circle fill color opacity, or circle fill color function (you may change circle color based on data, dsData, dsIndex)

Circle stroke color, stroke opacity, stroke weight or circle stroke color function (you may change circle color based on data, dsData, dsIndex)

Video tutorial

We also recommend you to review this video tutorial.