[ESP32 Project 9: Web Server BMP280]

Halo!

Kembali lagi bersama saya, dalam proses penulisan laporan untuk proyek ESP32 mingguan. Kali ini, kita akan mencoba sesuatu yang benar-benar baru loh! Saking barunya, bahkan tidak sampai minggu lalu terakhir kali kita menyentuh komponen-komponen yang digunakan dalam rangkaian. Namun mungkin kali ini, kita hanya akan menyajikannya dalam bentuk yang lebih terlihat cantik dan memuaskan di mata. Penasaran kan?

Tentu saja, apabila minggu lalu anda membaca blog saya, anda akan cukup familiar dengan rangkaian berikut ini.

Betul sekali! Kali ini, kita tetap akan memanfaatkan komponen eksternal favorit kita semua, yaitu Sensor Lingkungan BMP280, beserta komponen yang rasanya sudah menjadi makanan pokok saya setiap minggu, yaitu mikrokontroler ESP32. Seperti biasa, program yang memungkinkan kedua komponen ini untuk berinteraksi dibuat dengan bantuan Arduino IDE pada laptop, lalu kemudian kedua komponen dihubungkan dengan memanfaatkan kabel jumper female-to-female.

Rangkaian umum yang menggunakan kedua komponen ini biasanya memanfaatkan breadboard, tetapi entah kenapa dalam keberjalanan mengerjakan proyek ini, saya sudah semakin nyaman dengan rangkaian langsung antara ESP32 dengan sensor tersebut. Ia lebih nyaman untuk dibawa-bawa, lebih enak untuk diangkat, dan mengambil tempat yang lebih sedikit. Memang alasan utamanya adalah bahwa komponen breadboard saya rusak, tetapi itu tidak berarti bahwa apa yang saya sebut diatas merupakan hal yang salah. Sepertinya saya akan tetap menggunakan rangkaian dalam bentuk seperti ini, hingga ada suatu rangkaian yang benar-benar mengharuskan saya untuk memanfaatkan breadboard. Tanpa panjang-panjang lagi, mari kita langsung masuk ke komponen, algoritma, dan demo dari proyek kali ini:

Komponen

1. ESP32
2. Sensor Lingkungan BMP 280
3. Kabel jumper Female-to-female

Rangkaian:

Rangkaian yang dibuat tidak jauh berbeda dari rangkaian BMP280 biasanya. Seperti yang kita tahu, akan ada 4 pin untuk seluruh komponen yang memanfaatkan protokol I2C, yaitu VCC, GND, SCL, dan SDA. Pin-pin tersebut kemudian dihubungkan oleh kabel jumper warna-warni yang sebenarnya memiliki suatu pattern:

• VCC (Dari ESP 32 pin 3v3 kabel putih, terhubung dengan pin VCC BMP280 (
• GND (Dari pin GND ESP32 kabel hijau, terhubung dengan pin GND di BMP280 )
• SCL(Dari pin GPIO22 ESP32 kabel orange, terhubung dengan pin SCL di BMP280 )
• SDA(Dari pin GPIO21 ESP32 kabel kuning, terhubung dengan pin SDA di BMP 280 )

Selanjutnya, untuk algoritma yang digunakan adalah sebagai berikut:

Algoritma:

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

// Load Wi-Fi library
#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BMP280.h>
#include <Adafruit_Sensor.h>

//uncomment the following lines if you’re using SPI
/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/

#define SEALEVELPRESSURE_HPA (1013.25)

#define BMP_SCK (13)
#define BMP_MISO (12)
#define BMP_MOSI (11)
#define BMP_CS (10)

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 = “MyRepublic_C1012368”;
const char* password = “rumahomap3”;

// 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 = bme.begin();
if (!bmp.begin(0x76)) {
Serial.println(“Could not find a valid BMP280 sensor, check wiring!”);
while (1);
}

// 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 clients

if (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(“</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(“”);
}
}

Penjelasan untuk bagaimana cara kerja kode sudah tercantum dalam komentar di algoritma. Tampak hasil dari algoritma tersebut adalah:

Demo:

Analisis:

Menggunakan algoritma yang telah dibuat, maka ESP32 dapat menampilkan data hasil pembacaannya ke web server yang dialokasikan dengan IP Address. IP Address tersebut kemudian didapatkan dari output serial monitor saat digunakan. Selanjutnya, setelah berhasil terkoneksi dengan web server, data yang ditampilkan tidak akan berubah hingga server menjalani refresh. Hal tersebut dilakukan karena data ditransmisikan dalam bentuk paket-paket terlebih dahulu, dan saat ia sudah diterima oleh web server, data tersebut tidak akan diperbaharui (apalagi melihat header keep-alive) hingga server tersebut diperbaharui keseluruhannya.

Maka dari itu, untuk memastikan bahwa data yang ditampilkan adalah data yang paling terkini, perlu dilakukan refresh terhadap server secara berkala.

Bukti:

Sekian dan sampai jumpa nanti! Terima kasih.