This Espressif ESP32 educational project for the VS Code / PlatformIO platform implements a web-based Indoor Air Quality (IAQ) Monitor application using a BME680 I2C sensor.
The application serves a web page giving ambient temperature, pressure, relative humidity, static indoor air quality (sIAQ) index, equivalent CO₂ level and equivalent Breath Volatile Organic Compounds (bVOC) level. Historical data in JSON format is logged to the ESP32's SPI flash file system (SPIFFS) at a configurable interval and plotted as a series of trend graphs. Data from this log is reloaded from SPIFFS if the system is restarted.
Optionally, sensor readings can also be output to an SSD1331 SPI RGB OLED display.
The project demonstrates a number of useful ESP32 techniques:
- Web resource serving via SPI Flash File System (SPIFFS).
- Implementation of RESTful APIs (GET and PUT) via native AJAX methods.
- Parsing and manipulation of JSON data.
- Data logging via SPIFFS.
- Storage and retrieval of sensor calibration state via (emulated) EEPROM.
- Setting system time from NTP server.
- Interfacing with I2C sensors.
- Use of the HTML5 canvas element.
- Responsive web page design via CSS stylesheets.
The application implements the following RESTful APIs:
| URL | Method | Description |
|---|---|---|
http://esp32-ipaddr/sensor |
GET | Retrieve the latest sensor reading. |
http://esp32-ipaddr/log |
GET | Retrieve the accumulated log file readings. |
http://esp32-ipaddr/config |
GET | Retrieve configuration settings. |
http://esp32-ipaddr/config |
PUT | Update configuration settings via a simple form. |
The log file can be accessed directly at the URL http://esp32-ipaddr/logfile.json.
The project is built using Visual Studio Code with the PlatformIO extension.
The project requires the following libraries (the ESP32 libraries should be installed automatically when you set up PlatformIO):
- ESP32 WiFi - WiFi.h
- ESP32 WebServer - WebServer.h
- ESP32 EEPROM - EEPROM.h
- ESP32 SPIFFS - SPIFFS.h
- ESP32 Time - time.h (NB: this is the native ESP8266/ESP32 time library which implements the configTime() function for NTP)
- ArduinoJson - ArduinoJson.h (Version >= 6.7)
- BoschSensortec BSEC Arduino Library - bsec.h
If you elect to display the output on an SSD1331 OLED, the following additional library will be required:
- Adafruit SSD1331 Library - Adafruit_SSD1331.h
The default web page /index.html utilises 'minified' JavaScript and CSS to improve performance and reliability, in accordance with common industry practice. The original .js and .css files are in the /src folder. The minified (*.min.*) versions of these files will need to be regenerated if you edit the source, and then copied to the /data folder (e.g. via custom VSCode tasks). The project uses UglifyJS2 to minify JS files and YUICompressor to minify CSS files - see npm installation procedures for these utilities at their respective web links.
Alternatively, you can amend /index.html to use the uncompressed .js and .css files and move these to the /data folder.
NB The contents of the /data folder must be uploaded to the ESP32's SPIFFS file system using the PlatformIO tasks 'Build Filesystem Image' and 'Upload Filesystem Image'. You may also need to erase the emulated EEPROM if the device has been previously used.
| Pin on BME680 Sensor | GPIO Pin on ESP32 | Purpose |
|---|---|---|
| GND | GND | Ground |
| VIN | 3V3 | Power NB some boards may need 5V - check datasheet |
| SCL | Pin 22 (WIRE_SCL) | I2C Clock |
| SDA | Pin 21 (WIRE_SDA) | I2C Data |
if using SSD1331 OLED:
| Pin on SSD1331 OLED | GPIO Pin on ESP32 | Purpose |
|---|---|---|
| GND (G) | GND | Ground |
| VIN (+) | 3V3 | Power NB some boards may need 5V - check datasheet |
| CS (OC) | Pin 5 (VSPI_SS) | SPI Chip Select |
| RST (R) | Pin 16 | SPI Reset |
| DC | Pin 17 | SPI Data |
| SCLK (CK) | Pin 18 (VSPI_SCK) | SPI Clock |
| MOSI (SI) | Pin 23 (VSPI_MOSI) | SPI Main Out Secondary In |
| MCU / Browser | Tested Works | Doesn't Work | Not Tested | Notes |
|---|---|---|---|---|
| ESP32 Dev Module @ 240MHz | X | |||
| Firefox, all platforms | X | |||
| Safari, all platforms | X | |||
| Chrome on Windows, Android | X | |||
| Opera on Windows, Android | X | |||
| Opera on IOS | X | |||
| Edge on Windows, Android | X | |||
| Edge on IOS | X | |||
| IE 11 on Windows | X | |||
| IE < 11 on Windows | X |