[Tutorial] Visualising IoT edge data on the Thinger 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 Thinger, 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 Dashboard provider needs to support; it doesn’t require an MQTT broker setup, and allows us to focus one of the platform’s core purposes: showing information. 

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

About Thinger Platform

Website: https://thinger.io/

Thinger is an Open Source IoT platform that connects and manages IoT devices, though they have a cloud offering too. They are hardware agnostic, so in theory they support a wide array of devices through various integration points.

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
• Free account with Thinger Platform - sign up here

Steps

Part 1: Setting Up Thinger Platform

Step 1:

Please log in and head over to the ‘Devices’ tab and then select ‘Add Device’.

Step 2:

Fill up the information required as shown in the picture below and remember to select ‘HTTP’ as the device type. Then, select ‘Add Device’. We have successfully added a new device!

Step 3:

Next we will look at how to get our device token for integration. Click on ‘Callback’.

Note: Please make sure your ‘Live Transmission’ button is checked, we will be using this window to check our data stream later on.

Step 4:

The callback configuration page should look something like the following. 

What we need to do here is to find our generated device token. To do this, check the checkbox for Authorization at the bottom, wait for a few seconds and the device token should automatically be populated.

Note: Please remember to copy the device token as we will need to use it in the later part of this tutorial.

Step 5:

We will also need to create a Data Bucket, this is potentially where the value being sent from Gravio will be stored. To do that:

1. Click on the ‘Data Bucket’ tab and then add a new data bucket. 
2. Input details and select the ‘Data Source’ as ‘From API Request’.

Note: Please make sure that you have selected ‘API Request’ as the data source as shown below.

Step 6:

The device we have created earlier will have to write its data to this bucket. To configure this, go back to your device page and select the ‘Callback’ tab. Then select your bucket name in the ‘Write Bucket’ section.

Part 2: Creating Actions and Triggers in Gravio Studio

Step 1:

Open Gravio Studio

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

Note: Refer to the curl example as shown in the Callback tab in the devices page of Thinger. 

Please enter the details into the ‘HTTP Request’ Action (some of the inputs may vary because it is unique to your account, please refer to Thinger API documentation for more details):

• Method - POST
• URL - https://backend.thinger.io/v3/users/xxxxx/devices/CO2_1/callback/data
• Content-Type - application/json
• Authorization - Bearer
• Token - Your Token (Copied from earlier in the tutorial)

You can refer to the diagram below and use it as a reference.

Note: xxxxx refers to your username.

Step 2:

We will now set the pre-mapping on the right column. In the API Documentation, there is an extra header required. 

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

1. cp.Headers = “Accept: application/jason”
2. cv.Payload =  {

  "lat": 1.3521,

  "lng": 103.8198,

  "CO2-Reading": tv.Data

  }

Note: As Thinger comes with a location setting for the device, we can include a latitude and a longitude in the Payload to show where the device is located. You can either use Google, or use this link here to find out yours.

You can refer to this diagram as a reference:

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

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

Finally, remember to turn on the Trigger as we are using it.

Part 3: How to Display Data From Gravio on Thinger Platform

Step 1:

Go back to your devices page on Thinger, you will see that your device is connected and some data has been sent from Gravio to Thinger. It should look something like this. 

Note: If it is still ‘offline’, do not worry, it may take some time for the device to be connected. As long as you see some bytes of data being received, you are good to go!

Step 2:

Since we have fulfilled all the steps required to send data from Gravio to Thinger, we are now ready to display this data on Thinger Platform using their Dashboard feature.

1. Go to Dashboards
2. Click Add Dashboard
3. Set Dashboard into ‘Edit’ mode by checking the button on the top right corner
4. Select ‘Add Widget’
5. Configure the Widget settings as such

1. Title: Your desired name
2. Show update in ‘ON’ position
3. Type: Text/Value

1. Configure the Text/Value as such

1. Widget Value: From Bucket
2. Select Bucket: CO2 Data Gathering
3. Source Value: CO2 Reading (Your input name when configuring Gravio Studio).
4. Bucket Value: Latest Value.

.

Step 3:

Hooray! We have successfully integrated Gravio Studio and Databox! To view your Dashboard and see how it looks, just make sure you are out of ‘Edit’ mode!

Summary

Getting started with Thinger was really simple and no additional support was required other than the documentation. It’s still unclear for the need to create a data bucket instead of having the data stream as a resource - though it should be possible, perhaps one to explore for another time. Other than that, integration was seamless and also the prompts that let you know that your custom data is pushed through is a very useful tool.

Pricing

• https://pricing.thinger.io/#!/cloud

‍