Advanced Weather Station

Project #9 : ESP32 Web Server with BMP280

6 min readApr 3, 2021

Halo!

Eksperimen hari ini merupakan lanjutan dari project #8, yaitu membuat web server dengan ESP32 untuk menampilkan hasil pembacaan suhu oleh sensor BMP280, dimana sensor ini bisa membaca temperature, altitude, and pressure.

Menurutku, project ini merupakan gabungan dari beberapa project sebelumnya yang sudah pernah dicoba. Jadi sebelum lanjut, bisa dibaca — baca dulu ya tulisan — tulisan sebelumnya!

► Project #4 : BMP280 Sensor
► Project #6 : Weather Station with BMP280 and I2C LCD
► Project #8 : ESP32 Web Server to Control LED

ESP32 Web Server with BMP280

— Komponen yang Digunakan —

▪ ESP32 DOIT DEVKIT V1 Board
▪ Sensor BMP280
▪ Breadboard
▪ Jumper Wires

— Skema Rangkaian —

Sebelumnya…

Kita perlu menginstalasi Library untuk sensor BMP280.

Library di Arduino IDE dapat ditemukan dengan membuka Sketch > Include Library > Manage Libraries.

2. Cari “BMP280” dan lakukan instalasi terhadap Library yang sesuai.

3. Restart Ardino IDE desktop

I2C Scanner

/********* Rui Santos Complete project details at https://randomnerdtutorials.com  *********/

#include <Wire.h>
 
void setup() {
  Wire.begin();
  Serial.begin(115200);
  Serial.println("\nI2C Scanner");
}
 
void loop() {
  byte error, address;
  int nDevices;
  Serial.println("Scanning...");
  nDevices = 0;
  for(address = 1; address < 127; address++ ) {
    Wire.beginTransmission(address);
    error = Wire.endTransmission();
    if (error == 0) {
      Serial.print("I2C device found at address 0x");
      if (address<16) {
        Serial.print("0");
      }
      Serial.println(address,HEX);
      nDevices++;
    }
    else if (error==4) {
      Serial.print("Unknow error at address 0x");
      if (address<16) {
        Serial.print("0");
      }
      Serial.println(address,HEX);
    }    
  }
  if (nDevices == 0) {
    Serial.println("No I2C devices found\n");
  }
  else {
    Serial.println("done\n");
  }
  delay(5000);          
}

Hasil pembacaan alamat BMP280 sensor

Kode Utama

// Load Wi-Fi library
#include <WiFi.h>
#include <Wire.h>
#include <SPI.h>
#include <Adafruit_BMP280.h>#define SEALEVELPRESSURE_HPA (1013.25)Adafruit_BMP280 bmp;// Replace with your network credentials
const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_Password";WiFiServer server(80);  // Set web server port number to 80
String header; // Variable to store the HTTP requestunsigned long currentTime = millis(); // Current time 
unsigned long previousTime = 0;  // Previous time
const long timeoutTime = 2000; // Define timeout timevoid setup() {
  Serial.begin(115200);
  bool status;
 
  Serial.println(F("BMP280 test"));
if (!bmp.begin(0x76)) {
    Serial.println(F("Could not find a valid BMP280 sensor, check wiring!"));
    while (1);
  }/* Default settings from datasheet. */
  bmp.setSampling(Adafruit_BMP280::MODE_NORMAL,
                  Adafruit_BMP280::SAMPLING_X2, 
                  Adafruit_BMP280::SAMPLING_X16, 
                  Adafruit_BMP280::FILTER_X16,  
                  Adafruit_BMP280::STANDBY_MS_500); 
  
  // 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 incoming clientsif (client) {                             // If a new client connects,
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");          
    String currentLine = "";                
    while (client.connected() && currentTime - previousTime <= timeoutTime) {  // loop while the client's connected
      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();
            
            // 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>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; }");
            
            // Web Page Heading
            client.println("</style></head><body><h1>ESP32 with BMP280</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(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(SEALEVELPRESSURE_HPA));
            client.println(" m</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
        }
      }
    }
    header = ""; // Clear the header variable
    client.stop(); // Close the connection
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

— Penjelasan —

Sebelum menjalankan kode utama, pastikan terlebih dahulu alamat I2C communication dari sensor BMP280 menggunakan I2C scanner.
Kode HMTL dimasukkan kedalam sketch pada kode utama dengan menggunakan client.println().
Dalam percobaan kali ini, sensor akan mendeteksi suhu dalam Celcius dan Fahrenheit. Sehingga, untuk menghitung Fahrenheit, kita menggunakan rumus (0°C × 1.8) + 32 = 32°F.
Mekanisme membuat web server, bagaimana client memberikan byte, dan diterima ESP32 sama seperti project #8. Kali ini kita menerima byte dari sensor dan ditampilkan pada web server, sedangkan pada project #8, kita menerima byte dari client pada web server dan output berupa LED on — off.
Jangan lupa untuk mengganti SSID dan Password pada sketch program ya!

const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Tampilan Web Server

Kali ini, tampilan HTML yang kita buat adalah berbentuk tabel.

Di HTML, kita menggunakan tag <table> </table> untuk membuat table.
Untuk membuat row, tag yang digunakan adalah <tr> </tr>.
Pada row pertama, kita membuat sebuah nama kolom menggunakan <th> </th>.
Untuk baris — baris selanjutnya, tag yang digunakan adalah <td> </td> untuk menginisiasi setiap cell tabel.
Untuk menambahkan CSS pada 1 file HTML, tag yang digunakan adalah <style> </style>.

Tampilan Web Server yang Dimodifikasi

leony-angela/Embedded-Systems-Project

Please read the README file. Contribute to leony-angela/Embedded-Systems-Project development by creating an account on…

github.com

Eksperimen dan Demo

Untuk mengecek perubahan temperature, pressure, dan altitude, kita dapat melakukan refresh pada web browser kita.

Kesimpulan

Yey! akhirnya sensor BMP280nya ada setelah kendala rusak dan lama sampai ke rumahnya. Untuk project #9 ini, menurutku ini adalah pengembangan dari pembacaan sensor yang ditampilkan pada Serial Monitor, bedanya disini ditampilkan pada Web Server melalui koneksi Wi-Fi seperti minggu lalu. Tidak terlalu ada kendala yang sangat signifikan pada project #9 ini. Ada beberapa tips yang bisa jadi tambahan,

Selalu pastikan mengecek I2C Address pada sensor dahulu
Mengganti SSID dan Password pada kode program
Memodifikasi kode sesuai dengan sensor yang digunakan. Pada Random Nerds Tutorial, kode yang diberikan adalah untuk BME280, sehingga disini aku memodifikasi sedikit kode sesuai dengan modul BMP280.

Sekian tulisan pada project #9 kali ini, congrats dan thankyou buat yang udah baca atau lihat sampai habis! 🎉 Semoga bermanfaat ya!

Leony Angela
18219032