ESP32 Tutorial Part 9 (Advance Weather Station)
Hai hai, kembali lagi di tutorial ESP32. Kali ini kita akan membahas tentang ESP32 sebagai web server yang akan kita bangun, lalu nanti kita akan menampilkan hasil pembacaan dari sensor BMP280. Jadi cus langsung praktikum aja!
A. Komponen
1. ESP32
2. Jumper wire male to male
3. Sensor BMP280 (Ini bebas kok, aku pakenya BMP280 ehehehe)
4. Arduino IDE
5. Micro USB cable
6. WiFi untuk dicoba :)
B. Skema
Untuk skemanya dapat dilihat pada gambar dibawah ini ya!
C. Source Code
Source code ini diadaptasi dari randomnerdstutorial.com ya!. Karena di randomnerdstutorial memakai sensor BME280 sedangkan aku pake BMP280. Jadi cuss langsung sajaa kita coba dibawah ini!
// Load Wi-Fi library
#include <WiFi.h>
#include <Wire.h>
#include <SPI.h>
#include <Adafruit_BMP280.h>
#include <Adafruit_Sensor.h>//uncomment the following lines if you’re using SPI
/*#include <SPI.h>
#define BMP_SCK 18
#define BMP_MISO 19
#define BMP_MOSI 23
#define BMP_CS 5*/#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BMP280 bmp; // I2C
//Adafruit_BMP280 bmp(BMP_CS); // hardware SPI
//Adafruit_BMP280 bmp(BMP_CS, BMP_MOSI, BMP_MISO, BMP_SCK);// Replace with your network credentials
const char* ssid = “Dirrrrr”;
const char* password = “kuyang12345”;// Set web server port number to 80
WiFiServer server(80);// Variable to store the HTTP request
String header;// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;void setup() {
Serial.begin(115200);
bool status;// default settings
// (you can also pass in a Wire library object like &Wire2)
//status = bmp.begin();
if (!bmp.begin(0x76)) {
Serial.println(“Could not find a valid BMP280 sensor, check wiring!”);
while (1);
/*Jika tidak sesuai maka serial monitor akan memprint bahwa sensor BMP280 belum valid dan akan meminta untuk men-check wiring*/
}
bmp.setSampling(Adafruit_BMP280::MODE_NORMAL, /* Operating Mode. */
Adafruit_BMP280::SAMPLING_X2, /* Temperature oversampling */
Adafruit_BMP280::SAMPLING_X16, /* Pressure oversampling */
Adafruit_BMP280::FILTER_X16, /* Filtering. */
Adafruit_BMP280::STANDBY_MS_500); /* Standby time. */// 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 for incoming clientsif (client) { // If a new client connects,
currentTime = millis();
previousTime = currentTime;
Serial.println(“New Client.”); // print a message out in the serial port
String currentLine = “”; // make a String to hold incoming data from the client
while (client.connected() && currentTime — previousTime <= timeoutTime) { // loop while the client’s connected
currentTime = millis();
if (client.available()) { // if there’s bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == ‘\n’) { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that’s the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what’s coming, then a blank line:
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(“<tr><td>Altitude</td><td><span class=\”sensor\”>”);
client.println(bmp.readAltitude(1013.25));
client.println(“ </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
}
}
}
// Clear the header variable
header = “”;
// Close the connection
client.stop();
Serial.println(“Client disconnected.”);
Serial.println(“”);
}
}
Code diatas akan membuat ESP32 menjadi web server yang dapat diakses di internet. Sensor akan membaca pembacaan suhu, tekanan, dan aproksimasi altitude ketinggian yang dibaca sensor. Kita akan membuat web server dengan tampilan seperti berikut
Ketika ESP32 berhasil compile dan tidak mengalami masalah, maka akan muncul pada serial monitor notifikasi seperti berikut
Notifikasi tersebut merupakan tanda bahwa ESP32 berhasil terhubung dengan WiFi kita
Ketika koneksi terhubung maka kita langsung dapat membuka IP Address yang muncul di serial monitor. Sehingga pembacaan pada ESP32 akan muncul.
D. Analisis
Ketika permintaan diterima dari klien, maka ESP32 akan menyimpan data yang masuk. Loop sementara yang mengikuti akan berjalan selama klien tetap terhubung. Maka ketika ada refresh baru, ESP32 akan selalu mengupdate data yang masuk. Sehingga muncul pada layar web server.
Berikut adalah video percobaan dari ESP32 Weather Station
Untuk itu, sekian tutorial ESP32 tentang Weather Station menggunakan sensor BMP280. Mohon maaf jika ada kesalahan dari penulis yang masih belajar ini. Terima kasih telah membaca dan sampai jumpa di lain project!! :D
References:
1. www.randomnerdstutorial.com
Best Regards,
Ilham Alvindo Riandova (18219063),
Sistem dan Teknologi Informasi,
Institut Teknologi Bandung.
