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!

Parts and Component

I’ll need

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

BMP180 Sensor

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

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

HTML

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>
  • <th> table header
  • <td> table data

CSS

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>

Web Server

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

/*********
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("");
}
}
Weather Station with ESP32 & BMP180
Weather Station with ESP32 & BMP180

Final say

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!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store