ESP32 Project #9 Building Weather Station with BMP180

5 min readMar 29, 2021

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

ESP32 Board
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:

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.

ESP32 Project #6: BMP180 sensor & I2C LCD Display

Hello, I’m back!. On this project, I’ll show you how to display temperature, pressure, and altitude on 1602 LCD. This…

chintyaw.medium.com

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

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>

<tr> table row
<th> table header
<td> table data

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

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.

ESP32 Project #8 Wi-Fi Controlling Devices

Hello! I’m back :) On this project I’ll show you how to develop a controlling system with Wi-Fi communication to turn…

chintyaw.medium.com

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 clientsif (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.

Voila!

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!