ESP32 Mini Weather Station
II2260 Project
Halo temen-temen! Kembali lagi bersama aku, Tugus. Kali ini, kita akan melanjutkan project kita menggunakan ESP32, terutama dalam tema wireless communication protocol. Kali ini, kita akan menggunakan WiFi untuk communication protocol nya.
Kali ini mau buat apa?
Jadi di project ini, kita akan membuat sebuah Mini Weather Station! Wah apatuh, namanya keren banget??
Iya dong keren, karena basically kita akan membuat sebuah web server yang dapat diakses oleh device yang terkoneksi pada network yang sama. Pada project ini, kita akan kembali menggunakan BMP280 sebagai sensor untuk membaca suhu, ketinggian, dan tekanan pada daerah tertentu.
Butuh apa aja?
Pada project ini, kita membutuhkan:
- ESP32
- Breadboard
- BMP280 dengan I2C configuration
- Male-to-male jumper cables sebanyak 4 buah
- Arduino IDE
- Smartphone dengan koneksi internet
Skema rangkaian nya bagaimana?
Nah, skema rangkaiannya bisa dilihat di gambar ini ya:
Begini bentuk jadinya:
Kode Progamnya?
Untuk mengubah ESP32 menjadi sebuah web server, dibutuhkan kode yang mampu menampilkan sebuah web dan mengirimkan nilai pembacaan sensor. Kode berikut didapatkan dari randomnerdtutorials.com:
#include <Wire.h>
#include <WiFi.h>
#include <Adafruit_BMP280.h>Adafruit_BMP280 bmp; // I2C// Network Creds
const char* ssid = "YOUR_NETWORK_SSID";
const char* password = "YOUR_NETWORK_PASSWORD";// Set web server port to 80
WiFiServer server(80);//store http request
String header;//current millisecond
unsigned long currentTime = millis();
//prev time
unsigned long prevTime = 0;
//timeout time in ms
const long timeoutTime = 2000; //2 secsvoid setup() {
Serial.begin(115200);
Serial.println(F("BMP280 Weather Station"));
bool status;
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, /* Operating Mode. */
Adafruit_BMP280::SAMPLING_X2, /* Temp. oversampling */
Adafruit_BMP280::SAMPLING_X16, /* Pressure oversampling */
Adafruit_BMP280::FILTER_X16, /* Filtering. */
Adafruit_BMP280::STANDBY_MS_500); /* Standby time. */// connect ot wifi 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();if (client) {
currentTime = millis();
prevTime = 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 - prevTime <= 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 BME280</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(1013.25));
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
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}}
Anda dapat menyalin kode berikut, namun jangan langsung upload. Ada beberapa nilai yang harus diubah sesuai dengan koneksi yang tersedia dirumahmu, yaitu ssid dan password
const char* ssid = "YOUR_NETWORK_SSID";
const char* password = "YOUR_NETWORK_PASSWORD";Setelah mengubah variable itu dengan yang sesuai dengan jaringan yang ada di rumah, kita bisa upload kodenya langsung.
Saat kode sudah di upload, buka Serial Monitor dan tekan tombol EN pada ESP32 untuk mengulang proses setup. Kita menekan tombol EN agar dapat melihat IP address yang dipakai untuk broadcast pembacaan sensor
Kemudian, saat melihat IP address, buka smartphone Anda. Pastikan kita menggunakan WiFi yang sama dengan yang kita masukkan pada ssid di arduino IDE, karena jika menggunakan network yang berbeda, IP address tersebut tidak dapat dibuka (karena IP address tersebut adalah IP address private dalam network itu saja)
Kemudian, bukalah sebuah web browser dan copy-paste IP address pada serial monitor tersebut, dan voila!
IP address yang Anda dapatkan mungkin berbeda dengan IP address pada blog ini, jadi pastikan Anda telah memasukkan IP address yang sesuai. Berikut adalah video yang mungkin dapat menjelaskan lebih baik:
Analisis
Yang pertama kali saya notice adalah, kita tidak bisa menggunakan implementasi ini jika kita tidak menggunakan network yang sama. Karena IP address yang diberikan adalah sebuah IP address dynamic private, berarti IP address tersebut tidak bisa diakses secara global oleh orang dengan subnet yang berbeda. Hal ini disayangkan karena saya kira user dapat mengakses web server ini dari tempat dimanapun. Mungkin hal ini dapat diperbaiki dengan mengkoneksikan ESP32 langsung ke sebuah WiFi router yang memiliki public IP address.
Selain itu, banyak sekali HTML code yang dicetak menggunakan Client.println. Hal ini cukup membingungkan bagiku sebagai orang yang belum pernah menyentuh web developing dan HTML code. Maka dari itu, code nya hanya saya tampilkan saja karena itu mayoritas adalah HTML code untuk design dan positioning.
Overall project ini sangat mudah dikerjakan dan sangat mudah dipahami. Sampai jumpa di blog berikutnya!
