Step 5 - Customize the Mobile Phone Application

Customization of the Android dashboard application requires two steps:

1

Define the MQTT Broker (i.e. the address and port) that the application is going to connect to in order to receive the sensor data.
2

Customize the GUI of the application to show the data which had been published by the MQTT Broker.

The first setting you need to make on your phone application is the definition of “Broker”. In this step, we will define the MQTT Broker Service.

1

Click to "plus" icon to start adding a new broker definition. The only critical definition is the Address and port number of the MQTT Broker. Since we will use a test MQTT broker of mosquito at mosquito.org using the TCP protocol, you have to enter "tcp://test.mosquito.org", and you don’t have to enter 1883 as the port number since it is default as shown in the application customization panel. The name of the Broker can be anything. In our example, we used mosquito.org.
2

Click the "save" icon to save this configuration. The application will return to the main page . You will notice that the application still requires more customization to continue. So the next task is to prepare the data elements to show, which are called “tiles”

This section aims to prepare a user screen consisting of several tiles to display the sensor data.

1

Name of the broker that you had been defined at previous step.
2

There are several tiles that we are going to create in this step. These are the tiles to display the data collected by your LoRaWAN® device.

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.

Which is decoded into JSON format by TPX, as shown below

To simplify customization, you will create only the 1st tile using button and make the necessary modifications on this tile. Then you will make a copy of this tile and make the required changes on each tile.

Please create the 1st Tile using button

1

Select "TT (Text)" icon, since we are going to add a Text tile, then the customization panel of the application is shown.
2

The next step is to define the icon that will be associated to the text tile. For this please click the "?" icon.

Please select  icon and then press the icon. Then the tile customization panel will be shown again.

1

Please enter “C” which will be shown as suffix for the data shown at the tile.
2

Please enter the topic name (mqtt/things/#) which was defined when we created the TPX connection.
3

Click "save" icon to return to tile customization panel.
4

Please ensure that the Payload type "JSON " is selected.
5

Please enter DevEUI_uplink.Time for Timestamp path and DevEUI_uplink.payload.data.airTemp for Payload path.
6

Please click the "back" icon in order to return to the main screen.

Congratulations, you have created your 1st tile to show the temperature measured by the LoRaWAN® sensor. The rest of the customization steps (i.e. Creation of the rest of the tiles) are optional.

As mentioned before, after the creation of the 1st tile you can make a copy of this tile and then only make the necessary changes to each tile.

1

In order to create a copy of the 1st Tile (Room Temp) , please long click on the Room Temp tile to get the pop-up menu.
2

Please select Duplicate to create the copies of the Room Temp tile.

So, you now created more tiles, but they all show the same value, i.e. room temperature.

Now, copied tile needs to be customized to show correct values.

The table below shows the necessary modification for the copied tiles.

1

In order to edit to copy of the 1st Tile (Room Temp) , please long click on the tile to customize to get pop-up menu

You finished all the customizations: your application is ready to use !

Step 4 – Install MQTT Dashboard Application
Monitoring Steps