ESP32 Project #9 Building Weather Station with BMP180

Hi, I’m back. On this project I’ll create a web server which display readings from BMP180 sensor. The BMP180 sensor measures temperature, humidity, and pressure. Let’s start!

I’ll need

  • ESP32 Board
  • Breadboard
  • Jumper wires
  • BMP180 sensor
  • Arduino IDE
  • USB Cable

There are 4 pins on the sensor which will be connected to the ESP32. Follow the pins below:

BMP180 — ESP32

  • GND — GND
  • VCC — VIN
  • SDA — GPIO 21
  • SCL — GPIO 22

Actually the BMP180 sensor with LCD can be seen on my previous project.

Following the previous project, I’ve already installed the BMP180 library. Let’s move to the web server development.

Wiring

I will create a table with HTML. The code looks like this.

<table>
<tr>
<th>MEASUREMENT</th>
<th>VALUE</th>
</tr>
<tr>
<td>Temp. Celsius</td>
<td>--- *C</td>
</tr>
<tr>
<td>Temp. Fahrenheit</td>
<td>--- *F</td>
</tr>
<tr>
<td>Pressure</td>
<td>--- hPa</td>
</tr>
<tr>
<td>Approx. Altitude</td>
<td>--- meters</td></tr>
<tr>
<td>Humidity</td>
<td>--- %</td>
</tr>
</table>
  • <tr> table row
  • <th> table header
  • <td> table data

The table above is a-two-column table with column names MEASUREMENT and VALUE.

The table looks so so. Let’s style it with CSS.

<!DOCTYPE html>
<html>
<head>
<style>
#weather {
font-family: Trebuchet MS, sans-serif;
border-collapse: collapse;
width: 100%;
}
#weather td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#weather tr:nth-child(even){background-color: #f2f2f2;}#weather tr:hover {background-color: #ddd;}#weather th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #FF9ABB;
color: black;
}
</style>
</head>
<body>
<table id='weather'>
<tr>
<th>MEASUREMENT</th>
<th>VALUE</th>
</tr>
<tr>
<td>Temp. Celsius</td>
<td>--- *C</td>
</tr>
<tr>
<td>Temp. Fahrenheit</td>
<td>--- *F</td>
</tr>
<tr>
<td>Pressure</td>
<td>--- hPa</td>
</tr>
<tr>
<td>Approx. Altitude</td>
<td>--- meters</td></tr>
<tr>
<td>Humidity</td>
<td>--- %</td>
</tr>
</table>
</body>
</html>

Based on previous project, I already posted about building a web server.

I’ll use the SSID and password from the last project.

/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BMP085.h>
Adafruit_BMP085 bmp;// Replace with your network credentials
const char* ssid = "FAMILY";
const char* password = "********";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
Serial.begin(115200);
bool status;
// default settings
// (you can also pass in a Wire library object like &Wire2)
//status = bmp.begin();
if (!bmp.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();

// Display the HTML web page
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:,\">");
// CSS to style the table
client.println("<style>#weather {font-family: Trebuchet MS, sans-serif;border-collapse: collapse;width: 100%;}");
client.println("#weather td, #customers th {border: 1px solid #ddd;padding: 8px;}");
client.println("#weather tr:nth-child(even){background-color: #f2f2f2;}");
client.println("#weather tr:hover {background-color: #ddd;}");
client.println("#weather th {padding-top: 12px;padding-bottom: 12px;text-align: center;background-color: #FF9ABB;color: black;}");
client.println("body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
client.println(".sensor { color:black; font-weight: bold; background-color: white; padding: 1px; }");

// Web Page Heading
client.println("</style></head><body><h1>ESP32 with BMP180</h1>");
client.println("<table id='weather'><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>Temp. Fahrenheit</td><td><span class=\"sensor\">");
client.println(1.8 * bmp.readTemperature() + 32);
client.println(" *F</span></td></tr>");
client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
client.println(bmp.readPressure() / 100.0F);
client.println(" hPa</span></td></tr>");
client.println("<tr><td>Approx. Altitude</td><td><span class=\"sensor\">");
client.println(bmp.readAltitude());
client.println(" m</span></td></tr>");
client.println("<tr><td>Sea Level Pressure</td><td><span class=\"sensor\">");
client.println(bmp.readSealevelPressure());
client.println(" %</span></td></tr>");
client.println("</body></html>");

// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}

Verify and upload the code. Press ‘EN’ on the ESP32 board and open the web server.

Weather Station with ESP32 & BMP180
Weather Station with ESP32 & BMP180

Voila!

I’ve made a weather station with ESP32 and BMP180 on a web server. I’ve also tried to style the web using CSS following the tutorial from randomnerdtutorials. Hope this project can help and stay tune for the next projects!

Learner || Product and UX enthusiast