ESP32 Web Server with BME280 – Advanced Weather Station

In this tutorial you’re going to learn how to create a web server with the ESP32 to display readings from the BME280 sensor module. The BME280 sensor measures temperature, humidity, and pressure. So, you can easily build a mini and compact weather station and monitor the measurements using your ESP32 web server. That’s what we’re going to do in this project.
Before proceeding with this tutorial you should have the ESP32 add-on installed in your Arduino IDE. Follow one of the following tutorials to install the ESP32 on the Arduino IDE, if you haven’t already.
Installing the ESP32 Board in Arduino IDE (Windows, Mac OS X, and Linux instructions)
You might also like reading other BME280 guides:
ESP32 with BME280 Sensor using Arduino IDE
ESP8266 with BME280 using Arduino IDE
ESP32/ESP8266 with BME280 using MicroPython
Arduino Board with BME280
Parts Required
To follow this tutorial you need the following parts:
ESP32 DOIT DEVKIT V1 Board
–
read ESP32 Development Boards Review and Comparison
BME280 sensor module
Breadboard
Jumper wires
You can use the preceding links or go directly to
MakerAdvisor.com/tools
to find all the parts for your projects at the best price!
Introducing the BME280 Sensor Module
The BME280 sensor module reads temperature, humidity, and pressure. Because pressure changes with altitude, you can also estimate altitude. There are several versions of this sensor module, but we’re using the one shown in the figure below.
The sensor can communicate using either SPI or I2C communication protocols (there are modules of this sensor that just communicate with I2C, these just come with four pins).
To use SPI communication protocol, you use the following pins:
SCK – this is the SPI Clock pin
SDO – MISO
SDI – MOSI
CS – Chip Select
To use I2C communication protocol, the sensor uses the following pins:
SCK – this is also the SCL pin
SDI – this is also the SDA pin
Schematic
We’re going to use I2C communication with the BME280 sensor module. For that, wire the sensor to the ESP32
SDA
and
SCL
pins, as shown in the following schematic diagram.
(This schematic uses the ESP32 DEVKIT V1 module version with 36 GPIOs – if you’re using another model, please check the pinout for the board you’re using.)
Installing the BME280 library
To take readings from the BME280 sensor module we’ll use the
Adafruit_BME280 library
. Follow the next steps to install the library in your Arduino IDE:
Open your Arduino IDE and go to
Sketch
>
Include Library
>
Manage Libraries
. The Library Manager should open.
Search for “
adafruit bme280
” on the Search box and install the library.
Installing the Adafruit_Sensor library
To use the BME280 library, you also need to install the
Adafruit_Sensor library
. Follow the next steps to install the library in your Arduino IDE:
Go to
Sketch
>
Include Library
>
Manage Libraries
and type “
Adafruit Unified Sensor
” in the search box. Scroll all the way down to find the library and install it.
After installing the libraries, restart your Arduino IDE.
Reading Temperature, Humidity, and Pressure
To get familiar with the BME280 sensor, we’re going to use an example sketch from the library to see how to read temperature, humidity, and pressure.
After installing the BME280 library, and the Adafruit_Sensor library, open the Arduino IDE and, go to
File
>
Examples
>
Adafruit BME280 library
>
bme280 test

#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI

unsigned long delayTime;

void setup() {
Serial.begin(9600);
Serial.println(F("BME280 test"));

bool status;

// default settings
// (you can also pass in a Wire library object like &Wire2)
status = bme.begin(0x76);
if (!status) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}

Serial.println("-- Default Test --");
delayTime = 1000;

Serial.println();
}

void loop() {
printValues();
delay(delayTime);
}

void printValues() {
Serial.print("Temperature = ");
Serial.print(bme.readTemperature());
Serial.println(" *C");

// Convert temperature to Fahrenheit
/*Serial.print("Temperature = ");
Serial.print(1.8 * bme.readTemperature() + 32);
Serial.println(" *F");*/

Serial.print("Pressure = ");
Serial.print(bme.readPressure() / 100.0F);
Serial.println(" hPa");

Serial.print("Approx. Altitude = ");
Serial.print(bme.readAltitude(SEALEVELPRESSURE_HPA));
Serial.println(" m");

Serial.print("Humidity = ");
Serial.print(bme.readHumidity());
Serial.println(" %");

Serial.println();
}
Libraries
The code starts by including the needed libraries
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
SPI communication
As we’re going to use I2C communication you can comment the following lines:
/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/
Note:
if you’re using SPI communication, you need to change the pin definition to use the ESP32 GPIOs. For SPI communication on the ESP32 you can use either the HSPI or VSPI pins, as shown in the following table.
SPI
MOSI
MISO
CLK
CS
HSPI
GPIO 13
GPIO 12
GPIO 14
GPIO 15
VSPI
GPIO 23
GPIO 19
GPIO 18
GPIO 5
Sea level pressure
A variable called
SEALEVELPRESSURE_HPA
is created.
#define SEALEVELPRESSURE_HPA (1013.25)
This saves the pressure at the sea level in hectopascal (is equivalent to milibar). This variable is used to estimate the altitude for a given pressure by comparing it with the sea level pressure. This example uses the default value, but for more accurate results, replace the value with the current sea level pressure at your location.
I2C
This example uses I2C communication by default. As you can see, you just need to create an
Adafruit_BME280
object called
bme
Adafruit_BME280 bme; // I2C
If you would like to use SPI, you need to comment this previous line and uncomment one of the following lines depending on whether you’re using hardware or software SPI.
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI
setup()
In the
setup()
you start a serial communication
Serial.begin(9600);
And the sensor is initialized:
status = bme.begin(0x76);
if (!status) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
Printing values
In the
loop()
, the
printValues()
function reads the values from the BME280 and prints the results in the Serial Monitor.
void loop() {
printValues();
delay(delayTime);
}
Reading temperature, humidity, pressure, and estimate altitude is as simple as using:
bme.readTemperature()
– reads temperature in Celsius;
bme.readHumidity()
– reads absolute humidity;
bme.readPressure()
– reads pressure in hPa (hectoPascal = millibar);
bme.readAltitude(SEALEVELPRESSURE_HPA)
– estimates altitude in meters based on the pressure at the sea level.
Upload the code to your ESP32, and open the Serial Monitor at a baud rate of 9600. You should see the readings displayed on the Serial Monitor.
Creating a Table in HTML
As you’ve seen in the beginning of the post, we’re displaying the readings in a web page with a table served by the ESP32. So, we need to write HTML text to build a table.
To create a table in HTML you use the
<table>
and
</table>
tags.
To create a row you use the
<tr>
and
</tr>
tags. The table heading is defined using the
<th>
and
</th>
tags, and each table cell is defined using the
<td>
an