Ioan-Marian Dan-Hariton - SRIC

The purpose of this project is to collect data from a sensor and then display it on a screen attached to the board and also on a html page on localhost. The data is collected using a BMP280 sensor, sent to the ESP32 board and then from there, it is displayed on the attached display and also on the html page. The project also has the functionality to make a sound, from the attached buzzer, when the temperature is above 29°C.

I used the following components in order to develop this project:

• WEMOS LOLIN32 based on the ESP32 microprocessor: a low-power system with integrated Wi-Fi and dual-mode Bluetooth;
• BMP280: a barometric sensor which can measure pressure, temperature and also the altitude, as the pressure changes with altitude;
• OLED 0.96” Screen: an OLED screen which has a reduced energy consumption, only 0.08W. The interface type is IIC;
• Buzzer module: just a regular buzzer which operates on 3.3V or 5V and which has an I/O interface.

ESP32 specifications:

• Single or Dual-Core 32-bit LX6 Microprocessor with clock frequency up to 240MHz.
• 520 KB of SRAM, 448 KB of ROM and 16 KB of RTC SRAM.
• Supports 802.11 b/g/n Wi-Fi connectivity with speeds up to 150 Mbps.
• Support for both Classic Bluetooth v4.2 and BLE specifications.
• 34 Programmable GPIOs.

BMP280 specifications:

• Power supply: 1.8 - 3.6V DC (Recommended 3.3V)
• Interface: I2C (up to 3.4MHz), SPI (up to 10MHz)
• Working temperature: -40 to +85°C
• Pressure: 300-1100 hPa

OLED Screen specifications:

• 4 PINS: GND, VCC, SCL, SDA
• Voltage: 3V ~ 5V DC
• Working temperature: -30℃~70℃
• High resolution: 128*32
• Panel dimensions: 26.70 * 19.26 * 1.85mm / 1.03 * 0.76 * 0.07 inch (approx.)
• Active area: 21.74 * 11.2mm /0.86 /0.44 inch (approx.)
• Driver IC: SSD1306

Buzzer module specifications:

• VCC: 3.3V-5V
• GND
• Maximum current 30mA
• I/O interface

In order to connect all the components to the ESP32, we used in most part the SCL/22 and SDA/21 pins on the board. For connecting each component to board we did the following configuration: For BMP280:

• VCC pin of the BMP280 to 3V3 pin of ESP32
• GND pin of the BMP280 to GND pin of ESP32
• SDA pin of the BMP280 to SDA/21 pin of ESP32
• SCL pin of the BMP280 to SCL /22 pin of ESP32

For OLED Screen:

• VCC pin of the screen to 3V3 pin of ESP32
• GND pin of the screen to GND pin of ESP32
• SDA pin of the screen to SDA/21 pin of ESP32
• SCL pin of the screen to SCL /22 pin of ESP32

For Buzzer:

• VCC pin of the buzzer to 3V3 pin of ESP32
• GND pin of the buzzer to GND pin of ESP32
• I/O pin of the buzzer to GPIO 14 pin of ESP32

For this to work, I had to set manually the I2C Address for the BMP280 sensor. Even if the object mySensor seems to be a BME280 instead of a BMP280, it still works as they are almost the same, the BME280 also reads humidity:

BME280 mySensor;
mySensor.setI2CAddress(0x76);

Also, another definitions are the ones for the screen and for the buzzer:

#define SCREEN_ADDRESS 0x3C
#define BUZZER_PIN 14

In the setup() function, there is the code for connecting to Wi-Fi and also the pin declaration for the buzzer:

 void setup()
{
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();

  pinMode(BUZZER_PIN, OUTPUT);
}

Also there is the function which displays the text on the screen:

 void testscrolltext(String pressure, String alt, String temp) {
  display.clearDisplay();

  display.setTextSize(1.5);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(0, 3);
  display.println(pressure);
  display.println(alt);
  display.println(temp);
  display.display();
  delay(100);
} 

In the loop() function there is a part where the html page is created:

 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>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}</style></head>");
            
            client.println("<body><h1>BMP280 Sensor Data</h1>");
            
            testscrolltext(pressure, alt, temp);
            if(temp_2 < target_temp){
              digitalWrite(BUZZER_PIN, HIGH);
            }else{
              digitalWrite(BUZZER_PIN, LOW);
            }
            client.println("<script>");
            client.println("setTimeout(function() { location.reload(); }, 5000);");
            client.println("function updateData() {");
            client.println("var xhttp = new XMLHttpRequest();");
            client.println("xhttp.onreadystatechange = function() {");
            client.println("if (this.readyState == 4 && this.status == 200) {");
            client.println("var data = JSON.parse(this.responseText);");
            client.println(“document.getElementById('pressure').innerHTML = data.pressure;");
            client.println("document.getElementById('altitude').innerHTML = data.altitude;");
            client.println("document.getElementById('temperature').innerHTML = data.temperature;");
            client.println("}");
            client.println("};");
            client.println("xhttp.open('GET', '/data', true);");
            client.println("xhttp.send();");
            client.println("}");
            client.println("setInterval(updateData, 5000);");
            client.println("</script>");
            client.println("<p id='pressure'>" + pressure + "</p>");
            client.println("<p id='altitude'>" + alt + "</p>");
            client.println("<p id='temperature'>" + temp + "</p>");      
            
            client.println("</body></html>");
          
            client.println();
 

For the development of this project, the following libraries have been used:

• SparkFunBME280.h is used to initialise the BMP280 sensor and read the temperature, pressure, altitude parameters. For reading the parameters, the following functions are used: readFloatPressure(), readFloatAltitudeMeters(), readTempC().
• Wifi.h - it is used to connect to Wifi and create the web page.
• Adafruit_SSD1306.h is used to initialise the OLED Screen and for displaying text on it, we must println() on the display and then call the display() function to actually display the text.

In conclusion, the scope of this project was to create an air quality monitoring system, by reading environment parameters such as temperature, pressure, altitude and send them to a web page and on a display. Also, the buzzer will make a sound when the temperature is above 29°C.

https://cleste.ro/placa-dezvoltare-nodemcu-wifi-bluetooth-esp32.html https://cleste.ro/modul-senzor-de-presiune-atmosferica-bmp280.html https://cleste.ro/ecra-oled-0-96-inch.html https://cleste.ro/modul-buzzer.html