[Tutorial] Visualising IoT edge data on the ThingsBoard Platform

Introduction

This article is part of a series to show how to integrate Gravio with different dashboards and data visualisation platforms, and using different techniques to show your data in new and interesting ways. Today we will be showing you how to use ThingsBoard, the IoT platform, as a data visualization platform with a Gravio CO2 Sensor.

Approach

tldr; we are using a Gravio CO2 sensor and HTTPS API requests to visualise Time Series data of sensor readings over time - in real-time.

Note: if you have a Gravio Basic subscription, you could use a Temperature Sensor instead, as that will also provide Time Series data, though the data is sent less frequently.

We use HTTPS to send the data because: this is usually the minimum that a platform provider needs to support; it doesn’t require an MQTT broker setup, and allows us to focus on the core purpose: displaying information using a third party cloud-based platform. 

We’ll be sharing MQTT examples in future posts, follow us on Twitter or join our Gravio Slack community to find out when.

About ThingsBoard

Website: https://thingsboard.io/

Thingsboard is an Open Source IoT platform that has device management, data collection, processing and visualization capabilities, which they provide through a cloud offering too. 

They also support HTTP, CoAP, MQTT, LwM2M and SNMP if you have other products or data that are not in the already integrated device list.

Tutorial

Requirements

• Gravio HubKit setup - the Gravio Edge server
• Gravio Studio installed (available on macOS and Windows)
• Gravio Standard account - sign up here (To be eligible for the CO2 sensor)
• Gravio CO2 Sensor (or a Temperature Sensor available with Gravio Basic)
• Gravio CO2 sensor paired and configured with Gravio Studio - setup info here
• Trial account with ThingsBoard Platform - sign up here

Steps

Part 1: Setting Up ThingsBoard

Step 1:

Log in to ThingsBoard and find ‘Device Group’, expand it and select ‘All’. Then, select the ‘+’ sign on the top right of the screen as shown.

Step 2:

Input the ‘Name’ and leave the rest of the fields unchanged. Then, select ‘Add’. A device should now be added.

Step 3:

You will see the device showing in the ‘All’ tab. Click on the device and copy the access token.

Note: This access token is unique to your device only. Please keep it safe as we are using it later in the Tutorial.

Part 2: Creating Actions and Triggers in Gravio Studio

Step 1:

Now that our device has been created, we are ready to connect the data to ThingsBoard.

Run Gravio Studio:

1. Create a new ‘Action’.
2. Add the ‘HTTP Request’ Action. 
3. Start populating the properties on the left column.

Note: You may want to refer to their 'Getting Started Guide' for extra information for integration.

*If you are unsure about creating ‘Actions’ please visit our YouTube Channel for more details on how to navigate/use Gravio Studio.

Please enter the details in the ‘Properties’ Section as such:

• Method - POST
• URL - https://thingsboard.cloud/api/v1/<your token here>/telemetry
• Content-Type - application/json
• Authorization - None

Note: The other fields that are not listed here, you may leave them either unchanged or blank.

You can use the diagram below as a reference.

Step 2:

Next, we will enter the details in the ‘Pre-Mappings’ Section.

1. Enter the texts required in the fields for the “Pre Mappings”.

1. cv.Payload = [{"CO2": tv.Data}]

Step 3:

Let us now test the Action created. Press the Play button on Gravio Studio and if it is successful, it will display something like this in the console.

Step 4:

Now we will need to create the Trigger for the Action we want. In this case, we want the Trigger set up such that when a CO2 Reading has been collected by the Gravio CO2 Sensor, it will Trigger the Action to post the reading to ThingsBoard Platform.

1. In the main page of Gravio Studio, select the ‘Triggers’ tab.
2. Select the ‘+’ sign to add a new trigger.
3. Input details in the ‘Conditions’ tab.
4. Select the Action we have just created in the ‘Action’ tab.
5. Turn on the Trigger to let the Data be pushed to ThingsBoard automatically.

You can refer to the following images as a reference for the steps.

Part 3: How to Display Custom Data on ThingsBoard

Step 1:

Go back to ThingsBoard and go into the ‘Device Groups’ tab on the left. Select the ‘Latest Telemetry’ tab within your device. If the data sent was successful, You should see the latest telemetry value that was sent via the Gravio CO2 Sensor.

Note: If there aren't any values, you may need to refresh your browser or wait a while for it to refresh.

Step 2:

Time to begin the visualisation process! Go to ‘Dashboard Groups’ tab and then select the ‘+’ sign to create a new dashboard.

Step 3: 

Select ‘Edit’ at the bottom right hand corner after creating the dashboard.

Step 4:

Add ‘Entity Alias’ by clicking on the top right corner icon as shown within the ‘Edit’ mode. Then, enter the details similarly to the reference picture shown. Once done, hit ‘Apply Changes’ to save the Alias.

Step 5:

Proceed back to the ‘Edit’ page and select ‘Add Widget’. Select ‘Cards’ and then ‘Simple Cards’. Other widgets can be used as well but we will be using ‘Cards’ for this tutorial only.

Step 6:

Set the ‘Card’ up by inputting the details that were configured and created in this tutorial. After the inputs, select ‘Add’. Here is a reference picture.

Step 7:

Yay! We have successfully created a dashboard to visualize real-time CO2 data on ThingsBoard. The integration between Gravio Studio, Gravio CO2 Sensor and ThingsBoard is complete.

Summary

Getting started with ThingsBoard was simple and straightforward. They also have great supporting documentation for the integration process which made pushing data to the dashboard for visualization very simple. If you have data connections which you would like to visualize quickly from anywhere, ThingsBoard is a great choice. 

Pricing

• https://thingsboard.io/pricing/

‍