Arduino Send Sensor Readings to Android app with MIT App Inventor

In this user guide, we will learn to build an Android App using MIT App Inventor and display temperature readings acquired from DS18B20 sensor with Arduino. The transmission of sensor data will be through the HC-05 Bluetooth module.

Our Android application will display sensor readings on our smartphones. The sensor readings could be accessed anywhere and anytime conveniently. Any appropriate sensor can be used such as DHT22, BME680, LM35, and MPU6050 but for this article, we will use a DS18B20 sensor which is used to measure temperature. We will use Arduino IDE to program our Arduino which will be connected to a DS18B20 sensor and the HC-05 module. Additionally, we will send the sensor readings in real-time using Bluetooth through our app which will be built in MIT App Inventor.

Project Overview

MIT APP Inventer DS18B20 readings app

We will create an Arduino IoT app through HC-05 and MIT App Inventor. The heading of the app will consist of “DS18B20 Temperature Readings” followed by an image of a thermometer. Then a label for ‘Temperature’ and its reading with appropriate units. Another label saying Bluetooth is connected or disconnected and beneath that a button saying ‘Connect Bluetooth’ that opens a List picker.

We aim to build an application that will display sensor readings obtained from DS18B20 connected with Arduino programmed in Arduino IDE. This transmission of data from the module to the application will occur via Bluetooth. The reading will automatically update to new values in real-time when the IoT app receives them.

We will require the following for our project:

Hardware Required:

  1. Arduino UNO
  2. DS18B20 Sensor
  3. 4.7k ohm resistor
  4. HC-05 Module
  5. Connecting Wires
  6. Breadboard

Software Required:

  1. Arduino IDE
  2. MIT App Inventor
  3. Android Smartphone with MIT AI2 Companion installed

DS18B20 Introduction

It is a temperature sensor that is single wire programmable in nature. It is widely used to measure the temperature of chemical solutions and substances which are present in a hard environment. One of the advantages of using this sensor is that we only require a single pin of our Arduino board to get temperature samples. Therefore, it is extremely convenient to use with the microcontroller as we can use multiple DS18B20 temperature sensors by using only one pin on Arduino.

The table below shows some key characteristics of the ds18b120 sensor.

FeatureValue
Operating Voltage3-5V
Temperature Range-55°C to +125°C
Accuracy±0.5°C
Output Resolution9-12 bit
Key Characteristics of DS18B20

Pinout Diagram

A waterproof version of this sensor is also available in the market. The following figures show the pinout of the DS18B20 sensors.

ds18b20 waterproof pinout diagram
Pinout of waterproof DS18B20

The following diagram shows the pinout of the normal DS18B20 temperature sensor.

ds18b20 pinout diagram
DS18B20 pinout

The table below lists the pin configurations:

PinDescription
VCCThis is the pin that powers up the sensor. It is 3.3V for ESP boards.
DataThis pin gives the temperature reading.
GroundThis pin is connected with the ground

This temperature sensor also comes in a single package module which contains a sensor and a pull-up resistor. If you are using a module, you do not need to connect an external 4.7K ohm resistor. This is because the module already has an onboard pull-up resistor.

ds18b20 module
DS18B20 Module

You can have a look at articles related to DS18B20 by accessing the links below:

Installing DS18B20 Library in Arduino IDE

The DS18B20 temperature sensor provides an output on a 1-Wire protocol which requires a complex Arduino sketch to be written from the scratch. Instead of reinventing the wheel, we can use the Dallas Arduino library. We can use simple functions to get temperature samples from the DS18B20 sensor with this library.

To use the Dallas DS18B20 sensor we will have to install two libraries.

  1. OneWire library
  2. DallasTemperature library

Follow the steps below to successfully install them. We will use the Library Manager in our Arduino IDE to install the latest versions of the libraries. Open your Arduino IDE and go to Sketch > Include Libraries > Manage Libraries. Type each library name in the search bar and install them both.

ds18b20 one wire library install
ds18b20 dallas temperature library install

After installation of the libraries, restart your IDE.

Interfacing DS18B20 sensor and HC-05 module with Arduino board

Arduino UNO with HC-05 and DS18B20

The connection of DS18B20 with the Arduino board is very simple. The DS18B20 sensor can be powered in two different modes.

Normal Mode: The sensor is powered through an external source through the VDD pin and 4.7K ohm pull-up resistor.
Parasite Mode: The sensor obtains power from its own data line. Hence, no external power supply is required.

For this project, we will power the sensor in the normal mode. Thus, we have to connect the VCC terminal of the DS1B80 sensor with 5V, ground with the ground (common ground), and the data pin of the sensor with an appropriate digital pin of Arduino via a pull-up resistor. For this tutorial, we will use the D7 pin of Arduino for 1-wire protocol communication.

Follow the connections below for HC-05 module with Arduino:

  • Bluetooth Tx with Arduino UNO Rx (D0)
  • Bluetooth Rx with Arduino UNO Tx (D1)
  • Bluetooth VCC with Arduino UNO +5V
  • Bluetooth GND with Arduino UNO GND
Arduino UNO with HC-05 and DS18B20 connection diagram
Arduino UNO with HC-05 and DS18B20 connection diagram

NOTE: Make sure you plug out the Tx and Rx pins out of Arduino before uploading the program. After uploading the program connect them back. Otherwise, you can get an error.

You may also like to read:

Arduino Sketch to Send Sensor Data through Serial Port

Open your Arduino IDE and go to File > New to open a new file. Copy the code given below in that file.

This sketch obtains the current temperature reading from the DS18B20 sensor after every 5 seconds and sends it to the Bluetooth module via serial port. These temperature readings will then be fetched by the Android App from the Bluetooth module.

#include <OneWire.h>
#include <DallasTemperature.h>

const int SensorDataPin = 7;   
  
OneWire oneWire(SensorDataPin);
DallasTemperature sensors(&oneWire);

unsigned long previousMillis = 0;
const long interval = 5000;

void setup() {
  sensors.begin();
  Serial.begin(9600);
}

void loop() {
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    Serial.print(temp);
  }
}

How the Code Works?

Firstly, we will include the necessary libraries. For this project, we are using two of them. As we have to connect our Arduino to the DS18B20 sensor thus we will require the following libraries: OneWire.h and DallasTemperature.h. These were the ones which we previously installed.

#include <OneWire.h>
#include <DallasTemperature.h>

Secondly, we will create a variable to store the digital pin D7 through which the sensor’s data pin is connected. We have used GPIO7 in this example.

const int SensorDataPin = 7; 

We will require the following instances as well to access the temperature readings. First, we will create a oneWire instance and use the SensorDataPin as an argument inside it. Then we will call the DallasTemperature sensor and pass the oneWire reference which we created above as an argument inside it.

OneWire oneWire(SensorDataPin);
DallasTemperature sensors(&oneWire); 

setup() function

Inside the setup() function, we will open a serial connection at a baud rate of 9600. Moreover, we will call sensors.begin() to initialize the DS18B20 sensor as well.


void setup() {
  sensors.begin();
  Serial.begin(9600);
}

loop() function

In the infinite loop() function, we will obtain the temperature reading from the sensor after every 5 seconds. After every 5 seconds, we will call the requestTemperatures() method. Then we will use the getTempCByIndex() function to retrieve the temperature in degree Celsius. Notice that we are passing 0 as a parameter inside the function. This is because we are using a single DS18B20 sensor. When using multiple sensors this value will increment for each additional sensor. Finally, we send the sensor data to via the serial.

void loop() {
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    Serial.print(temp);
  }
}

Building App with MIT APP Inventor to Display Sensor Data

MIT App Inventor is an incredible web application that helps users build interesting Android applications. It is a block-based programming tool through which users can create fully functional apps for Android devices such as smartphones, tablets e.tc. Often termed beginner-friendly, even people with no prior experience in programming can easily learn how to use this application efficiently. We will use this tool to build our Arduino sensor-based app as well.

Steps to Create Android App

Go to the following website: and click the ‘Create Apps!’ button.

ESP8266 Google Firebase build your own app MIT Inventor 1

You will be redirected to a new window where you will be asked to sign in with your email account. After signing in you will have to accept the terms as shown below.

ESP8266 Google Firebase build your own app MIT Inventor 2

You will receive a welcome message. You can visit the link to get more information on how to install the inventor on your smartphone. Press ‘Continue’ to proceed. If you want, you can have a look at the tutorials being specified. Otherwise, go to ‘Start a blank project’ to start your app invention.

ESP8266 Google Firebase build your own app MIT Inventor 3

You will be asked to specify your project name. Choose an appropriate name. Click ‘ok.’

MIT APP Inventor DS18B20 readings 1

The following page will open. It is known as the Designer. This is where we will design the user interface of our app. We can add text, buttons, images and various other functionalities to our app by dragging and dropping components from the palette to the viewer. Then we will set their attributes through the ‘Properties’ column.

MIT APP Inventor DS18B20 readings

Creating User Interface

Firstly, we will add a heading for our app. Go to Palette > User Interface and head over to ‘Label.’ Now click and drag the label. Drop it on the Viewer side. Now you will be able to view it in the viewer as well as in the components list.

MIT APP Inventor DS18B20 readings 3

Head over to the ‘Properties’ to change the text, font size and colour. The label will automatically update in the viewer. Keep in mind the viewer will show you the final look of your app which will appear on your smartphone.

You can change the properties of the label to incorporate your preferred spacing dimension by changing the width and height of the label.

MIT APP Inventor DS18B20 readings 4

Add Thermometer Image

Next, we will add a block for the thermometer image. Go to Palette > Layout > HorizontalArrangement. Click and drag HorizontalArrangement and drop it in the Viewer.

MIT APP Inventor DS18B20 readings 5

Go to the ‘Properties’ and set AlignHorizontal to Centre : 3 and AlignVertical to Centre : 2. We have set the height to 25% and width to fill parent.

MIT APP Inventor DS18B20 readings 6

To insert an image, go to Media and upload the file. Next, go to User Interface > Image and set its Properties as follows:

Height: Automatic

Width: Fill parent

Picture: thermometer.png (the image file that you a uploaded in media)

MIT APP Inventor DS18B20 readings 7

Add Temperature Label and Readings

Next, we will add a block for the temperature label and readings. Go to Palette > Layout > VerticalArrangement. Click and drag VerticalArrangement and drop it in the Viewer. Set the Properties of the VerticalArrangement as follows:

Align Horizontal: Centre : 3

Align Vertical: Centre : 2

Height: 40 percent

Width: Fill parent

MIT APP Inventor DS18B20 readings 8

Now go to Palette > User Interface and head over to ‘Label.’ Now click and drag the label. Drop it on the Viewer side. Head over to the ‘Properties’ to change the text, font, font size and color. We have set the FontSize to 36, FontTypeface to serif, Height to Automatic, Width to Fill parent, Text to Temperature, TextAlignment to center : 1 and TextColor to red.

MIT APP Inventor DS18B20 readings 9

Add another label for temperature readings, and rename it as ‘Temperature_Reading’ using the rename button found in the Components section.

MIT APP Inventor DS18B20 readings 10

Head over to the ‘Properties’ to change the text, font, font size and color of the Temperature_Reading label. We have set the FontSize to 60, FontTypeface to Default, Height to Automatic, Width to Fill parent, Text to —, TextAlignment to center : 1 and TextColor to Default.

MIT APP Inventor DS18B20 readings 11

Add Bluetooth Connection Button

Go to Palette > Layout > VerticalArrangement. Click and drag VerticalArrangement and drop it in the Viewer.

Go to the ‘Properties’ and set them as follows:

AlignHorizontal: Center : 3

AlignVertical: Center : 2

BackgroundColor: None

Height: 20 percent

Width: Fill parent

MIT APP Inventor DS18B20 readings 12

Add a label and rename it as ‘Bluetooth_Connection’ using the rename button found in the Components section.

Head over to the ‘Properties’ to change the text, font, font size and color of the this label. We have set the FontSize to 14, FontTypeface to Default, Height to Automatic, Width to Automatic, Text to Disconnected, TextAlignment to center : 1 and TextColor to None.

MIT APP Inventor DS18B20 readings 13

For the Connect Bluetooth button we will add a List Picker. Go to User Interface > ListPicker and drag and drop it in the VerticalArrangement as shown below.

MIT APP Inventor DS18B20 readings 14

Go to the ‘Properties’ of the ListPicker and set them as follows:

FontSize: 20

FontTypeFace: serif

Height: Automatic

Width: Automatic

Text: Connect Bluetooth

TextAlignment: center : 1

MIT APP Inventor DS18B20 readings 15

Add Bluetooth Client and Clocks to MIT App Inventor

Go to Palette > Connectivity and click and drag BluetoothClient in the viewer. This is a non-visible component of our app and will let us connect it with our Bluetooth module.

MIT APP Inventor DS18B20 readings 16

Next head over to Palette > Sensors and drag and drop two clocks in the viewer. Rename one clock as ‘Bluetooth_Clock’ and the other one as ‘Temperature_Clock.’ These are also non-visible components of the app used for monitoring the time.

MIT APP Inventor DS18B20 readings 17

Blocks Layout

Now click on the ‘Blocks’ button found at the top of the window. A new editor will open up. Here we will design how our app will respond. We will assemble blocks in the workspace by clicking and dragging them.

MIT APP Inventer DS18B20 readings Blocks 1

First, click ‘ListPicker1’ and a series of blocks will open. Click and drag the ‘BeforePicking’ block in the workspace.

MIT APP Inventor DS18B20 readings Blocks 2

Likewise, select the set Elements to block shown below:

MIT APP Inventor DS18B20 readings Blocks 3

From BluetoothClient1, click and drag AddressesAndNames as shown below:

MIT APP Inventor DS18B20 readings Blocks 4

Place these three blocks in the workspace as shown below:

MIT APP Inventor DS18B20 readings Blocks 5

The blocks fit like puzzle pieces. Now similarly follow the diagram below and arrange all the blocks for the List Picker. The if-then block is found in Built-in > Control.

MIT APP Inventor DS18B20 readings Blocks 6

Go to Bluetooth_Clock and select the block shown below:

MIT APP Inventor DS18B20 readings Blocks 7

Assemble the blocks for the Bluetooth_Clock as shown below:

MIT APP Inventor DS18B20 readings Blocks 8

Next, inside the Blocks section, go to Built-in > Variables and select the initialize global name to block. Click and drag it to the viewer.

MIT APP Inventor DS18B20 readings Blocks 9

Here we are initializing the global variable ‘temperatureReading’ to store the temperature values. Initially it holds the value 0. This temperatureReading will later hold the value received from the Bluetooth module after a successful Bluetooth connection has been established between the android phone and the module.

MIT APP Inventor DS18B20 readings Blocks 10


Lastly, assemble the blocks for the Temperature_Clock as shown below:

MIT APP Inventor DS18B20 readings Blocks 11

Here the Temperature_Reading label’s text will be set to the value that is received by the sensor.

For more information regarding building your app in MIT App Inventor, follow this guide: App Inventor Tutorials.

Setting up App Inventor on Smartphone

Now, as we have built our app in MIT app inventor and have also written its code let’s move ahead and install the App Inventor in our smartphone. Through this, we will be able to access our app on our smartphone from anywhere around the world. Follow the steps closely.

Firstly, go to Play Store and install ‘MIT AI2 Companion.’

ESP8266 Google Firebase build your own app MIT Inventor 23

After you installed the application, open it. You will have to either scan a QR code or type a 6-character code.

ESP8266 Google Firebase build your own app MIT Inventor 20

To access these, go to MIT App Inventor main page where we initially built our app. Go to Build > Android App (.apk). After a few moments your barcode will get generated. You can either download the .apk file or scan the barcode using the MIT App Inventor.

MIT APP Inventor DS18B20 readings barcode

After installing the .apk file on our android phone, we will be able to view the screen which we created.

Now, we will demonstrate the sensor readings.

Demonstration

Choose the correct board and COM port before uploading your code to the board.
Go to Tools > Board and select Arduino Module.

select Arduino uno


Next, go to Tools > Port and select the appropriate port through which your board is connected.

Click on the upload button to upload the code into the Arduino development board. After you have uploaded your code to the Arduino development board press its ENABLE button.

Arduino uno reset button

Open the MIT Companion app on your smartphone. Pair your android phone with HC-05 module. Now press the ‘Connect Bluetooth’ button.

MIT APP Inventer DS18B20 readings demo 3

Select HC-05 Bluetooth module to connect with.

MIT APP Inventer DS18B20 readings demo 4

After a few moments, the temperature reading displays on the screen. After every 5 seconds, it gets updated.

MIT APP Inventer DS18B20 readings demo 5
MIT APP Inventer DS18B20 readings demo 1
MIT APP Inventer DS18B20 readings demo 2

Video demo:

You may also like to read:

Leave a Comment