Stop the war

Support Ukraine

Try it now Pricing
Cloud
Community Edition Professional Edition Cloud Edge PE Edge IoT Gateway License Server Trendz Analytics Mobile Application PE Mobile Application
Documentation > Dashboards > Widgets > Trip Animation Widget
Getting Started
Guides API FAQ

On this page

Trip animation widget

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.

image

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:

1
node timeseries-map-bus.js $ACCESSTOKEN

Where $ACCESSTOKEN is your device access token.

image

$ACCESSTOKEN is located in a device details.

image

Emulator is capable with Node.js v8.10.0

Setting up Trip Animation Widget

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.

Adding widget

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

image

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.

image

Now we go for adding a widget!

image

Trip animation widget is located in Maps bundle

image

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.

image

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.

image

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

image

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.

image

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.

image

image

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

image

Trip Animation Settings

Normalization data step (ms)

image

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”.

Tooltip function

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:

1
2
3
4
5
6
7
8
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:

1
2
3
4
5
6
7
8
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:

1
2
3
4
5
6
7
8
9
10
11
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:

1
2
3
4
5
6
7
8
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

image

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

image

  • Use color point function

image

Points color function:

1
2
3
4
5
6
7
8
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:

1
2
3
4
5
6
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:

1
[[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

image

  • Enable/disable polygon edit

image

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

image

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

image

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

image

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

image

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:

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


For the circle, we can specify the next settings:

  • Show/Hide circle

image

  • Enable/disable circle edit

image

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

image

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

image

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

image

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

image

Video tutorial

We also recommend you to review this video tutorial.