Star
Try it now
Solutions
Customers
Use Cases
Partners
About Us
Pricing Docs Guides

ThingsBoard Documentation

Documentation for using ThingsBoard IoT Platform.

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 on a cloud version-2.4.2 of ThingsBoard Professional Edition, so some steps will be a little different from Community Edition.

It’s capable of all further versions.

Setting up Trip Animation Widget

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.

Our device receives its longitude, latitude, speed, status, and coordinates of polygon.

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.

In our example, we use an emulator written in javascript to receive telemetry and visualize it on the dashboard.

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

Now we will open our empty dashboard and edit it.

image

Now we have an empty dashboard. Let’s fill it with some content.

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, 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

Finally, we turn on our emulator (link on it you may find below, in “Device emulator” section).

image

Widget is ready

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

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.

Don’t forget to press the “Start” button.

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:

Let’s see how it works.

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:

image

image

image

image

Label function:

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

image

Tooltip function:

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

image

Path color function:

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

image

Polygon options

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. For the polygon, we can specify the next settings. Polygon coordinates are being received in a format:

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

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

image

Points options

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.

image

Marker options

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

image

Marker image function:

var speed = dsData['speed'];
var res;
if (speed > 55) {
    res = images[0];
} else {
    res = images[1];
}
return res;

Video tutorial

We also recommend you to review this video tutorial.

Device emulator

Emulator

In order to execute script go for a command line:

node timeseries-map-bus.js $ACCESSTOKEN

Where $ACCESSTOKEN is your Device access token.

$ACCESSTOKEN is located in a Device details. image

Emulator is capable with Node.js v8.10.0