How to develop an Android app to read and plot sensor data from Arduino

We brought you a beginners guide on "How to start developing android app using MIT App Inventor 2 " earlier. If you missed the tutorial you can click here to follow it. If you have already read it, you will probably have realized that App inventor is the most effective way to build basic Android apps without much of coding.

Today we are going to build an Android app to read sensor data from Arduino and plot it on a scatter plot in real time. There are plenty of tutorials out there on reading sensor data using Android app, but there are only few on "how to plot data in real time". So if you follow this tutorial carefully, you will be able to plot any kind of graph using sensor data in real time.

First of alll there are couple of things that needed to prepare to make the circuit.

Arduino (pro mini, nano, UNO, or any model)
Bluetooth tranceiver module (HC 05, HM 10, HC 04 or any other model)
Wires and connecting cables

In this tutorial, i am using an Arduino Nano with a HC-05 Bluetooth module. Initially connect the Arduino to the computer and upload following code to the board via Arduino IDE.

void setup() {
Serial.begin(9600);
delay(1000);
}

void loop() {
int a = random(1, 30);
int b = random(1, 9);

Serial.print(float(a));Serial.print(",");Serial.print(float(b));
delay(1000);

}

Above code just generate some random values and send them in a comma separated manner. This code is used just for the demonstration and you can use any sensor data reading and make serial print in above format to make the plot.

Now connect the Bluetooth module to Arduino as follows. (NOTE: some Bluetooth modules works with 3.3V rating. Therefore please check each module carefully before power up)

Now we are done with the Arduino part. Next we have to create our android app to receive data and plot on a scatter plot.

Developing Android APP

We use MIT app inventor 2 to build the App. If you missed our introduction tutorial, go to this link and read it first.
When developing the Android app. We divide it into few parts to understand the process easily

Establishing Bluetooth Connection and receiving data
Separating received data and save them in two variables
Plot saved variables on a scatter plot

User Interface Design

First of all we have to create a user interface (UI) for our App. In this case we are using

Canvas layout for graph
Text views to display received data
List view to display available Bluetooth devices
And few buttons

We have discussed how to make user interfaces using App inventor during our first tutorial. Apart from above UI elements, additionally we use a Bluetooth client and a clock .

Our finished UI will looks like below. You can modify the UI using the properties of each component. At the beginning, this will be little bit strange, but you will get used to it very soon. (NOTE: if you find difficult to create the UI, you can simply follow a YouTube video to get a basic understanding )

Developing App features

Now we are done with our UI design . Then we can move to the developing part. Go to the block section in App inventor and follow below steps carefully. To add features for each buttons or other UI elements, you can simply click each element and select different features using from available lists.

Creating action for back button press

In this step we initialize an action for back button. We force to close the app and exit when back is pressed. You can add this functionality using following blocks.

Create a list with available Bluetooth devices.

In this step we check for available Bluetooth devices and create a list.

Here the "BTDevice" is a list view. We set its elements to available Bluetooth devices.

Receiving sensor data from Arduino

In this step, we connect to a Bluetooth device ( In this case Arduino) and get ready to receive sensor data from connected device.

Storing sensor data and making the plot

This is the most crucial part of the App. We receive sensor data, store it in two variables (x,y) and plot them in a canvas real time. We make all these steps with a clock. In every tick we search for available data and plot it in a canvas. before start plotting, we make some changes to the data as follows

Recieve data and store in a list
Separate stored data using comma (,) and store in another list
Plot x values using the elements of index 1 of the list
Plot y values using the elements of index 2 of the list

But before plotting in canvas we have to remember that the initial point (0,0) is located in top left corner of the canvas. So we have to make some calculations in order to make a scatter plot in correct way (to start from lower left corner)

as you can see in above picture, in order to plot from regular initial point , we have to deduct every y value from 200 (Assuming that the height is 200 px ) so our new y axis values will be (200-y). Kepp in mind to take this into consideration in plotting stage. Now we can create the final stage of the App using following blocks. In here we initialize list variables as well. ( NOTE: this step is little bit complicated, please go through it carefully. I will attach the complete project file at the end of the tutorial )

Initialization of variables

Final code

Hope yo got a basic understand on how things work. There are many tutorials on how to start developing Android Apps using App inventor. You can follow one or two of them before start this tutorial. Please make a comment if there is anything to clarify. Here i will attach the download link to the full project. You can go to the App inventor website and open this project and make changes or build your own. Lets meet with another tutorial ✌.

Download full project

Advertisement