Author: Bukkosi George-Daniel

This project is meant to show the implementation of a simple Weather Station that outputs the data to a local webserver created using the Arduino <WiFi.h> library.

The components used for the project were the following:

• ESP32 Dev Board
• BMP280 weather sensor
• Jumper wires
• Breadboard
• Soldering kit

To power up the ESP32 and to load the code to it, a microUSB cable was required.

The ESP32 development board and the BMP280 sensor were connected via the I2C protocol. In order to establish this, the following wirings were made:

1. ESP32 GND pin - BMP280 GND pin
2. ESP32 3v3 pin - BMP280 VCC pin
3. ESP32 GPIO22 pin (SCL) - BMP280 SCL pin
4. ESP32 GPIO21 pin (SDA) - BMP280 SDA pin

A schematic of the connections can be observed below:

The following libraries were used for the software:

#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BMP280.h>
#include <WiFi.h>

In order to interface with the BMP280 sensor, the following addresses were used in the setup() function:

#define BMP280_ADDRESS (0x76)
#define BMP280_CHIPID (0x58)

The Adafruit library allows us to read data from the BMP280 sensor. Its API is quite simple, here is the code for reading the temperature, pressure and altitude:

float temperature_celsius = bmp.readTemperature();
float temperature_fahrenheit = bmp.readTemperature() + 32;
float pressure = bmp.readPressure();
float altitude = bmp.readAltitude(SEALEVELPRESSURE_HPA);

where

#define SEALEVELPRESSURE_HPA (1013.25)

In the setup() function, we have the WiFi connection logic and the BMP280 connection logic:

void setup() {
  Serial.begin(115200);
  delay(2000);

  if (!bmp.begin(BMP280_ADDRESS, BMP280_CHIPID)) {
    Serial.println("Could not find a valid BMP280 sensor, check wiring!");
    while (1);
  }
  
  Serial.println("BMP280 sensor initialized");

  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();

}

The loop() function has the following functionalities implemented:

• Read sensor data: The function starts by reading sensor data using the BMP sensor. It retrieves values for temperature in Celsius and Fahrenheit, pressure, and altitude based on the sea level pressure.
• Check for incoming client connections: The code then checks if there's a new client connection by calling server.available(). If a client has connected, it proceeds to handle the client request.
• Handle client request: Once a client is detected, the code enters a loop to handle the client's request. It reads the incoming data from the client and stores it in the currentLine string. The loop continues as long as the client remains connected and the elapsed time since the client connected is within the specified timeout limit.
• Generate and send HTTP response: If the client's request is complete (indicated by an empty currentLine), the code generates an HTTP response. It sends the appropriate headers, including a response code of 200 OK and the content type as text/html. It then proceeds to send the HTML content that forms the web page.
• Close the client connection: After sending the response, the client connection is closed using client.stop(). The code prints a message indicating that the client has disconnected.
• Repeat the loop: The loop() function then repeats from the beginning, continuously checking for new client connections and handling their requests.

Code below:

void loop() {

  float temperature_celsius = bmp.readTemperature();
  float temperature_fahrenheit = bmp.readTemperature() + 32;
  float pressure = bmp.readPressure() / 100.0F;
  float altitude = bmp.readAltitude(SEALEVELPRESSURE_HPA);
  
  WiFiClient client = server.available(); 

  if (client) {                             
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");          
    String currentLine = "";               
    while (client.connected() && currentTime - previousTime <= timeoutTime) {  
      currentTime = millis();
      if (client.available()) {             
        char c = client.read();             
        Serial.write(c);                    
        header += c;
        if (c == '\n') {                   
          if (currentLine.length() == 0) {
            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>body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
            client.println("table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }");
            client.println("th { padding: 12px; background-color: #0043af; color: white; }");
            client.println("tr { border: 1px solid #ddd; padding: 12px; }");
            client.println("tr:hover { background-color: #bcbcbc; }");
            client.println("td { border: none; padding: 12px; }");
            client.println(".sensor { color:white; font-weight: bold; background-color: #bcbcbc; padding: 1px; }");
            client.println("</style></head><body><h1>Weather station with BME280</h1>");
            client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
            client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
            client.println(temperature_celsius);
            client.println(" *C</span></td></tr>");  
            client.println("<tr><td>Temp. Fahrenheit</td><td><span class=\"sensor\">");
            client.println(temperature_fahrenheit);
            client.println(" *F</span></td></tr>");       
            client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
            client.println(pressure);
            client.println(" hPa</span></td></tr>");
            client.println("<tr><td>Approx. Altitude</td><td><span class=\"sensor\">");
            client.println(altitude);
            client.println(" m</span></td></tr>"); 
            client.println();
            
            break;
          } else { 
            currentLine = "";
          }
        } else if (c != '\r') {  
          currentLine += c;   
        }
      }
    }
    
    header = "";
    
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

By simply accessing the local IP address printed in the Serial Monitor of the Arduino IDE you can see all the sensor gathered data in one place.

• https://www.optimusdigital.ro/en/pressure-sensors/1666-modul-senzor-de-presiune-barometric-bmp280.html
• https://www.circuitschools.com/interfacing-bmp280-with-esp-32-on-i2c-with-errors-and-solutions/
• https://randomnerdtutorials.com/esp32-web-server-with-bme280-mini-weather-station/