Making Web Server- LED and BME280 Controller

Hi everyone! Saya Catherine Alicia N, mahasiswa Sistem dan Teknologi Informasi ITB dengan NIM 18223069. Kembali lagi dengan weekly project dari mata kuliah Internet of Things — II2260.

Materi project minggu ini sangat menarik untuk dipelajari, karena kita akan belajar untuk membuat web server yang bisa mengontrol LED dan melihat hasil sensor dari BME280. Kita pelajari terlebih dahulu yuk apa itu Web Server.

— Web Server!

Web server yang responsif pada ESP32 memungkinkan akses melalui berbagai perangkat dalam jaringan lokal. Ini membantu ESP32 berkomunikasi dengan client-server dan memungkinkan kontrol jarak jauh bagi pengguna saat terhubung dengan server.

— Alat dan Bahan

Siapkan beberapa alat dan bahan yang perlu diperlukan:

1. Breadboard
2. Kabel Data Micro-USB
3. ESP32
4. Laptop
5. Arduino IDE
6. LED 5mm berjumlah (2 buah)
7. Kabel jumper male-to-male berjumlah (9 buah)

Alasan saya tidak menggunakan resistor karena setelah saya melakukan trial and error, saya melihat bahwa LED akan lebih menyala jika menggunakan kabel jumper male-to-male dibanding menggungkan resistor.

— Langkah pengerjaan

1. Susun rangkaian sesuai dengan gambar berikut ini:

Dengan keterangan:

• LED Hijau (kutub positif) terhubung ke GPIO 26
• LED Hijau (kutub negatif) terhubung ke jalur GND
• LED Merah (kutub positif) terhubung ke GPIO 27
• LED Merah (kutub negatif) terhubung ke jalur GND
• Pin ESP32 GND membuat jalur GND
• SDA BME280 terhubung ke GPIO 21
• SCL BME280 terhubung ke GPIO 22
• GND BME280 terhubung ke GND ESP32
• VIN BME280 terhubung ke 3V3 ESP32

2. Salin dan Tempel kode berikut.

#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>

// WiFi credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Web server on port 80
WiFiServer server(80);

// BME280 settings
#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BME280 bme;

// GPIO for LEDs
const int output26 = 26;
const int output27 = 27;
String output26State = "off";
String output27State = "off";

// Timing variables
unsigned long currentTime = millis();
unsigned long previousTime = 0;
const long timeoutTime = 2000;

// HTTP request header
String header;

// Sensor values
float temperature, humidity, pressure, altitude;

void setup() {
  Serial.begin(115200);

  pinMode(output26, OUTPUT);
  pinMode(output27, OUTPUT);
  digitalWrite(output26, LOW);
  digitalWrite(output27, LOW);

  if (!bme.begin(0x76)) {
    Serial.println("BME280 not found!");
    while (1);
  }

  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\nWiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  server.begin();
}

void loop() {
  WiFiClient client = server.available();

  if (client) {
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");
    String currentLine = "";

    while (client.connected() && currentTime - previousTime <= timeoutTime) {
      currentTime = millis();
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        header += c;

        if (c == '\n') {
          if (currentLine.length() == 0) {
            // Handle LED control
            if (header.indexOf("GET /26/on") >= 0) {
              output26State = "on";
              digitalWrite(output26, HIGH);
            } else if (header.indexOf("GET /26/off") >= 0) {
              output26State = "off";
              digitalWrite(output26, LOW);
            } else if (header.indexOf("GET /27/on") >= 0) {
              output27State = "on";
              digitalWrite(output27, HIGH);
            } else if (header.indexOf("GET /27/off") >= 0) {
              output27State = "off";
              digitalWrite(output27, LOW);
            }

            // Baca ulang sensor
            if (header.indexOf("GET /") >= 0) {
              temperature = bme.readTemperature();
              humidity = bme.readHumidity();
              pressure = bme.readPressure() / 100.0F;
              altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
            }

            // Kirim HTML response
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            client.println("<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width, initial-scale=1'>");
            client.println("<link href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap' rel='stylesheet'>");
            client.println("<style>");
            client.println("body { font-family: 'Poppins', sans-serif; background: #fff0f5; text-align:center; padding: 20px; }");
            client.println(".card { background:#ffe4e1; box-shadow: 0 4px 8px rgba(0,0,0,0.1); padding:20px; margin:20px auto; width: 400px; border-radius: 15px; }");
            client.println("h1 { color: #d36c6c; font-weight: 600; }");
            client.println("h2 { color: #c060a1; font-weight: 500; }");
            client.println(".sensor { font-size: 22px; margin: 10px 0; color: #5a3e4d; }");
            client.println(".button { background-color: #f8b7cd; color: white; padding: 12px 24px; text-decoration: none; font-size: 18px; border: none; border-radius: 8px; margin: 5px; cursor: pointer; transition: 0.3s; }");
            client.println(".button:hover { background-color: #f497b5; }");
            client.println(".button2 { background-color: #ec6a8e; }");
            client.println(".button2:hover { background-color: #d94d72; }");
            client.println("</style></head><body>");

            client.println("<h1>Catherine Website IOT</h1>");

            // Sensor Card
            client.println("<div class='card'><h2>Sensor BME280</h2>");
            client.print("<div class='sensor'>Temperature: ");
            client.print(temperature);
            client.println(" &deg;C</div>");
            client.print("<div class='sensor'>Humidity: ");
            client.print(humidity);
            client.println(" %</div>");
            client.print("<div class='sensor'>Pressure: ");
            client.print(pressure);
            client.println(" hPa</div>");
            client.print("<div class='sensor'>Approx. Altitude: ");
            client.print(altitude);
            client.println(" m</div>");
            client.println("</div>");

            // Tombol Refresh
            client.println("<a href='/'><button class='button'>Refresh Sensor</button></a>");

            // LED Control Card
            client.println("<div class='card'><h2>LED Control</h2>");
            client.println("<p>LED RED: " + output26State + "</p>");
            if (output26State == "off") {
              client.println("<a href='/26/on'><button class='button'>ON</button></a>");
            } else {
              client.println("<a href='/26/off'><button class='button button2'>OFF</button></a>");
            }
            client.println("<p>LED GREEN: " + output27State + "</p>");
            if (output27State == "off") {
              client.println("<a href='/27/on'><button class='button'>ON</button></a>");
            } else {
              client.println("<a href='/27/off'><button class='button button2'>OFF</button></a>");
            }
            client.println("</div>");

            client.println("</body></html>");
            client.println();
            break;
          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }
      }
    }

    header = "";
    client.stop();
    Serial.println("Client disconnected.\n");
  }
}

Jangan lupa masukkan wifi dan password wifi yang sedang terkoneksi dengan laptop anda dicode bagian berikut ini:

// WiFi credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

3. Compile dan Upload code tersebut → buka monitor serial di 115200 baud → Tekan tombol EN yang terdapat di ESP32. Setelah menekan tombol EN pada ESP32, pada serial monitor akan muncul alamat IP yang akan kita jadikan untuk membuka web server.

4. Salin dan Tempel alamat IP yang tertera di serial monitor, tampilan web server saya seperti berikut:

Terdapat 3 tombol, yaitu:

1. Refresh Sensor: untuk menampilkan data terbaru dari sensor
2. ON/OFF LED RED: untuk menyalakan/mematikan LED RED
3. ON/OFF LED GREEN: untuk menyalakan/mematikan LED GREEN

Berikut adalah video bukti keberhasilan project:

Yayyyy!! Sudah selesai project untuk minggu ini (mungkin project terakhir di mata kuliah Internet of Things — II2260. Sampai jumpa di lain kesempatan!

Referensi:

1. ESP32 Web Server: https://randomnerdtutorials.com/esp32-web-server-arduino-ide/
2. ESP32 Advanced Weather Station: https://randomnerdtutorials.com/esp32-web-server-with-bme280-mini-weather-station/