LoRaWAN® Data Visualization – Implementation Steps

Easily Visualize LoRaWAN® Sensor Data On Your Mobile Phone

Implementation Steps

Step 1 - Create the MQTT Backend Connection on TPX

ThingPark X -in short TPX- is the module of the ThingPark platform in charge of dataflow processing. TPX can perform decoding of binary uplink payload to JSON, encoding of REST commands to binary commands, normalization and transformation of data, and it also manages the connections with other services (such as MQTT servers) and platforms (e.g. Microsoft Azure IoT Hub). In this step we will use the mosquitto.org MQTT broker, so we will simply create a new MQTT connection instance.

In the Hello LoRaWAN® and Thingpark cookbook, an HTTP connection was used to send collected data to a webhook for monitoring. In this activity, we are going to create instead a connection to the “mosquitto.org” MQTT Broker as shown in the figure. The type of connection will be set to “MQTT”.

Setting up the dataflow

To create a new backend connection, select CREATE in the CONNECTIONS menu.
We will use the TPX dataflow engine, so select the TPX option.
Select connection type "MQTT" as shown in the figure.
Enter a name for the connection. In this activity you can use for example "mosquitto.org."
For Host Name and port, enter "test.mosquitto.org:1884". And enter rw as MQTT Username and readwrite as MQTT Password
For Protocol: please select TCP.*
After clicking 'CREATE' , the new MQTT connection instance appears in the connections list.

*TCP connection should not he used in production usage since it is not secure, use TLS instead.

If the configuration is correct , you will see OPENED icon at the right top of the screen: the TPX engine successfully connected to the target MQTT broker at mosquitto.org. If it shows “FAILED” instead, then check your configuration and the status of the MQTT broker.

You need to check if the configuration of the new TPX MQTT connection is correct and whether TPX could connect to the target MQTT Server

Since no device uses that new connection yet, active device count, uplink and downlink counts are all 0.
Select the new connection instance (mosquitto.org) from the connections list in order to access details of the new connection.

Step 2 - Update the Sensor Definitions on TPE

The TPX engine of ThingPark Community already has a comprehensive library of CoDecs, and they regularly get updated by the development team as well as the community. You can also write your own custom CoDec, or contribute it on the GIT repository. These CoDecs are very handy to process the collected sensor data with no coding effort. In this cookbook, we are using the Tinovi LoRaWAN® IO Module, which already has a CoDeC available in the TPX CoDec library.

Previously, in the Hello LoRaWAN® and Thingpark cookbook, the device had been created on ThingPark Community with generic parameters (“Generic” as Manufacturer and “LoRaWAN® 1.0.2 revC – Class A” as Model), because we didn’t need any device specific parsing.

Now let’s change it to the correct Manufacturer (Tinovi) and Model (LoRaWAN® Soil Moisture…) in the Devices console as shown in the figure. This information allows the TPX dataflow to automatically select the appropriate CoDec.

Click to 'pen' Icon to edit the Manufacturer and Model of the sensor.
Select “Tinovi” as Manufacturer and “LoRaWAN® Soil Moisture, Temperature…” as Model. Click on SAVE in the pop-up.
Notice that the picture of the device has been updated automatically.
Now Manufacturer and Model fields are updated.
Finally, if you check LAST 10 PACKETS section you will see that data is being received from the device.
As you can notice, data is no longer in binary form but JSON formatted: it has been automatically decoded by TPX, which will help to process the data. Otherwise, you would need to write your own data parser to extract actionable data from the binary payloads received from the device.
Click to ADD CONNECTION icon to associate the new connection to this device. This instructs the platform to route uplink frames to this TPX connection. Multiple devices can be associated to the same TPX connection.
Select mosquitto.org as connector name from the list.
Now, you will see that morquitto.org has been added to CONNECTIONS. In this case, received data will be sent to both myWebHookForTest and mosquitto.org connections simultaneously.

Step 3 - Verify the TPX Definitions and Connection

Let’s ensure that the MQTT connection instance is active and successfully connected to the MQTT broker, and that the sensor uplinks are routed to the correct backend connection. We will use the TPX console health status and logger.

Select the mosquitto.org connection from the Connections list to view the status of the connection.
Health State section should show that the connection is active.
The logger shows the list of the last 25 messages sent though this connection. Make sure that the device has sent data (you can also check this in the main ThingPark DEVICES console which has a logger at LoRaWAN® level ).
ASSOCIATED DEVICES section shows that your device (Tinovi PM-IO-5-SM#1 Roof) uses that connection.
If you click to OPEN THINGPARK X IOT FLOW button you will access the TPX dataflow dashboard.
Please notice that the active device and uplinks count was 0 when the connection was initially created at STEP 1. Now you should see that the Active device count increased to 1, and uplink messages regularly increase with each uplink in the METRICS section.

Step 4 - Install the MQTT Dashboard Application

In this activity, you will install an Android application called IoT MQTT Panel on your phone.

Type iot mqtt at search field.
Select IoT MQTT Panel to install.
Click Install in order to install application to the phone.
When the application installation is completed, you will see the application icon on your mobile phone.

Step 5 - Customize the Mobile Phone Application

Customization of the mobile phone application involves two steps:

Define the MQTT Broker (i.e., the address and port) to which the application will connect and fetch the data.
Customize the GUI of the application to display the data fetched from the MQTT Broker.
Click on SETUP A CONNECTION to create connection to MQTT broker.
The name of the connection can be anything. In our example, we used tpc_sensors.
Enter tcp://test.mosquitto.org as address of the broker.
To proceed with the creation of the connection, you need to add a dashboard if you have not already done so. You can enter ThinkPark Monitor as the dashboard name and click on the SAVE icon.
Finally, click on the CREATE icon. The definitions will be saved, and the application will return to the main page again.

The first setting you need to configure in the application is to define broker connection settings. In this step, we will set up the MQTT Broker Service. The critical definition required is the MQTT Broker’s address and port number.

The application still requires more customization to display the data. Data is shown in panels, so you need to create a panel to display it.

Now, you can view the new connection that you recently created.
If you see check sign inside the icon, it means that you successfully connected to MQTT broker.
In order to show the data received from MQTT broker, you need to add panel. In order to create one, click on tpc_sensors.
Click on ADD PANEL to create a panel.

Another critical point to remember is the “topic name” that the TPX connection is going to publish to the MQTT broker:

You may not have noticed that topic name when creating the TPX connection because we used the default topic name. But now that information will be used.

The device we use sends the data in the following format: