ESP32 BMP180 Web Server using Arduino IDE

This guide contains interfacing BMP180 barometric sensor with ESP32 and displaying sensor values on web page using a web server. BMP180 sensor can be used to measure temperature, pressure and altitude. We can also measure pressure at sea level and real altitude with this sensor.

We will discuss following points in this lesson:

Connection diagram of BMP180 with ESP32
How to install library of BMP180 in Arduino IDE ?
How to measure temperature, pressure and altitude ?
How to display sensor values on web server?

Introduction to BMP180 Barometric Sensor

This digital pressure sensor is used to measure pressure of air in the range of 300-1100 hPa.
It also has temperature measurement feature.
It can operate at wide range of voltages between 1.8 to 3.6 volts.
It has very low noise and low power consumption of about 5µA at 1 sample / sec. in standard mode.
It can be interfaced with any microcontroller through I2C communication.

You can check further details in introduction to BMP180 digital pressure sensor article.

Following is a module of BMP180 digital pressure sensor:

Pinout

Picture above shows the pinout of this sensor. It works on I2C communication protocol. It consists of four pins as shown in table below:

Pins	Function
Vin ( Power supply pin )	Connect 3.3 volts to this pin
GND	GND pin of power supply
SCL ( I2C clock pin )	Connect with SCL pin of any microcontroller
SDA (I2C data pin )	Connect with SDA pin of any microcontroller

BMP180 Connection Diagram with ESP32

Make the connection of sensor with ESP32 according to the layout given below.
Connect ground pin and 3.3 volts pin of ESP32 with ground and Vin pin of BMP180 respectively.
ESP32 supports I2C communication. GPIO22 and GPIO21 is dedicated for I2C communication. You can consult ESP32 pinout for more details.
GPIO22 is a SCL pin and GPIO21 is SDA pin on this DEVKIT DOIT board. These pins may be placed on different location for different types of board. Therefore, you should check pinout of your board.

Measuring temperature and Pressure on web server

We are using Arduino IDE to program ESP32. Followings are the background knowledge for this lesson:

How to install ESP32 in Arduino IDE

As mentioned earlier, we can read temperature and pressure from BMP180 through I2C communication protocol. ESP32 has I2C communication module. We can use BMP180 pressure sensor library in Arduino IDE to read temperature and pressure values.

Download BMP180 library

Follow these steps to install this library:

Click on the above button to download library.
After downloading library, you will get a compressed folder.
Uncompressed this folder using any Unzip software. you will get Adafruit-BMP085-Library-master folder
Now change the name of folder from ~~Adafruit-BMP085-Library-master~~ to Adafruit-BMP085-Library.
Move this folder inside the Arduino libraries folder where you have installed Arduino IDE.
You have successfully installed the library for this digital pressure sensor.

BM180 web server code

Till now, you have accomplished all required steps to measure sensor over on the web page. Now, lets see the code. Sketch given below read pressure, pressure and altitude values and display them on web server whenever a web client try to access the web page using an IP address of web server.

Copy this code to your Arduino IDE and upload this code to esp32 board.
Before you uploading code, you need change WiFi name and password with your network credentials.

#include <WiFi.h> 
#include <Wire.h>
#include <Adafruit_BMP085.h>

Adafruit_BMP085 bmp;
const char* ssid = "PTCL-BB"; 
const char* password = "5387c614";

WiFiServer server(80);

String header;

void setup() 
{
Serial.begin(9600);
if (!bmp.begin()) 
{
Serial.println("Not connected with BMP180/BMP085 sensor, check connections ");
while (1) {}
}

Serial.print("Connecting to Wifi Network");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("Successfully connected to WiFi.");
Serial.println("IP address of ESP32 is : ");
Serial.println(WiFi.localIP());
server.begin();
Serial.println("Server started");
}

void loop() {
Serial.print("Temp = ");
Serial.print(bmp.readTemperature());
Serial.println(" *C");

Serial.print("Pressure = ");
Serial.print(bmp.readPressure());
Serial.println(" Pa");


Serial.print("Altitude = ");
Serial.print(bmp.readAltitude());
Serial.println(" meters");


Serial.println();
delay(500);
WiFiClient client = server.available();

if (client) 
{ 
Serial.println("Web Client connected ");
String request = client.readStringUntil('\r'); 
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("</style></head><body><h1>ESP32 Web Server BMP180</h1>");
client.println("<h2>BMP180 Barometic sensor</h2>");
client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
client.println(bmp.readTemperature());
client.println(" *C</span></td></tr>"); 
client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
client.println(bmp.readPressure());
client.println(" pa</span></td></tr>"); 
client.println("<tr><td>Altitude</td><td><span class=\"sensor\">");
client.println(bmp.readAltitude());
client.println(" meters</span></td></tr>"); 
client.println("</body></html>"); 
client.println();
Serial.println("Client disconnected.");
Serial.println("");
}
}

After uploading code, click on serial monitor button to open serial monitor.
Select a baud rate of 9600.
Click on Reboot button on ESP32 board.
You will see this message on your serial monitor which contains IP address of web server and pressure, temperature and altitude values.
Now go to any web browser and type this IP address. You will notice the values of pressure and temperature on web page as shown there.

Code explanation

These lines adds library for WiFi and BMP180 in the code.

#include <WiFi.h> 
#include <Wire.h>
#include <Adafruit_BMP085.h>

This line create an object for pressure sensor. If you want to interface multiple sensor, you have to create mutiple objects with different names.

Adafruit_BMP085 bmp;  // here bmp is a object

Enter your WiFi credentials in double quotes.

const char* ssid = "WiFi Name"; 
const char* password = "WiFi password";
WiFiServer server(80);   // start the server at default port number that is 80

These lines checks if sensor is connected with ESP32 properly or not. If sensor is connected correctly, it will display the message “Not connected with BMP180/BMP085 sensor, check connections ” on serial monitor and will stuck in the while loop.

(!bmp.begin()) 
{
Serial.println("Not connected with BMP180/BMP085 sensor, check connections ");
while (1) {}
}

After that we use WiFi connection with ESP32, this part of sketch used to connect board with WiFi network and displays assigned IP address to development board. We use this IP address to access web page over any web browser.

 Serial.print("Connecting to Wifi Network");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("Successfully connected to WiFi.");
Serial.println("IP address of ESP32 is : ");
Serial.println(WiFi.localIP());
server.begin();
Serial.println("Server started");

Inside the loop function, These commands read values of temperature, pressure and altitude and sends displays these values on serial monitor.

// read temperature values 
Serial.print("Temp = ");
Serial.print(bmp.readTemperature());
Serial.println(" *C");
// read air pressure values
Serial.print("Pressure = ");
Serial.print(bmp.readPressure());
Serial.println(" Pa");
// read altitude in meters 
Serial.print("Altitude = ");
Serial.print(bmp.readAltitude());
Serial.println(" meters");

This part of the code sends sensors values on the web page.

if (client) 
{ 
Serial.println("Web Client connected ");
String request = client.readStringUntil('\r'); 
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("</style></head><body><h1>ESP32 Web Server BMP180</h1>");
client.println("<h2>BMP180 Barometic sensor</h2>");
client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
client.println(bmp.readTemperature());
client.println(" *C</span></td></tr>"); 
client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
client.println(bmp.readPressure());
client.println(" pa</span></td></tr>"); 
client.println("<tr><td>Altitude</td><td><span class=\"sensor\">");
client.println(bmp.readAltitude());
client.println(" meters</span></td></tr>"); 
client.println("</body></html>"); 
client.println();
Serial.println("Client disconnected.");
Serial.println("");
}

Video demonstration

For more information about the web page part, you can check ESP32 web server tutorial. I hope you like this project, you might be looking for more esp32 projects: