Otomatisasi rumah menggunakan ESP32 Web Server menjadi salah satu tren yang berkembang di era teknologi saat ini. Perangkat seperti ESP32, dapat membuat sistem otomatisasi rumah yang efisien dan hemat biaya. Proyek ini memungkinkan pengguna untuk mengontrol perangkat rumah seperti lampu, kipas, atau perangkat elektronik lainnya melalui antarmuka web. ESP32 adalah mikrokontroler yang dikembangkan oleh Espressif Systems. Mikrokontroler ini dilengkapi dengan Wi-Fi dan Bluetooth, sehingga sangat cocok untuk proyek Internet of Things (IoT). ESP32 memiliki daya komputasi cukup tinggi, memori yang memadai dan antarmuka fleksibel, sehingga menjadi pilihan populer di kalangan pengembang IoT.
Fitur ESP32
1. Hotspot Wi-Fi Mandiri
ESP32 mampu menghasilkan jaringan Wi-Fi sendiri, memungkinkan pengguna untuk terhubung dan mengatur sistem tanpa memerlukan koneksi internet dari luar.
2. Antarmuka Web Sederhana
ESP32 menghosting sebuah halaman web yang ramah pengguna, dirancang untuk mengontrol empat buah relay dengan mudah.
3. Kontrol Manual
Dilengkapi dengan tombol fisik yang memungkinkan pengguna mengoperasikan relay secara langsung tanpa perlu antarmuka web.
4. Informasi Real-Time
Antarmuka web menampilkan status terbaru dari setiap relay dan menyediakan opsi penyegaran untuk memperbarui informasi secara langsung.
Komponen yang Dibutuhkan
1. ESP32: Mikrokontroler utama yang akan digunakan.
2. Relay Module: Digunakan untuk mengontrol perangkat listrik.
3. Sensor Suhu dan Kelembaban (Opsional)**: Untuk memantau kondisi lingkungan.
4. Kabel Jumper: Untuk menghubungkan komponen.
5. Power Supply: Sumber daya untuk ESP32 dan perangkat lainnya.
6. Perangkat Elektronik: Seperti lampu, kipas, atau perangkat lain yang ingin dikontrol.
Rangkaian Proyek Otomasi Rumah menggunakan ESP32 Web Server
Rangkaian yang digunakan cukup sederhana. Pada proyek ini memanfaatkan pin GPIO D23, D19, D18, dan D5 untuk mengontrol modul relay yang memiliki 4 saluran. Selain itu, pin GPIO D13, D12, D14, dan D27 dihubungkan dengan tombol tekan agar modul relay dapat dikendalikan secara manual.
Proyek ini menggunakan fungsi INPUT_PULLUP yang tersedia di Arduino IDE, sehingga tidak perlu menambahkan resistor pull-up eksternal untuk setiap tombol tekan. Berdasarkan kode program yang dibuat, modul relay akan aktif (menyala) ketika pin kontrolnya menerima sinyal RENDAH (LOW), dan akan mati ketika sinyal pada pin kontrol berubah menjadi TINGGI (HIGH).
Sebagai catatan, gunakan adaptor pengisi daya ponsel berdaya 5V dan 5A untuk menyuplai daya ke seluruh rangkaian. Penting untuk selalu memperhatikan tindakan pencegahan keselamatan saat bekerja dengan peralatan yang terhubung ke sumber listrik AC (arus bolak-balik).
Memprogram ESP32 Menggunakan Arduino IDE
1. Perbarui Preferensi
- Buka menu Preferensi di Arduino IDE.
- Tambahkan URL berikut ke bagian Pengelola Papan Tambahan:
- `https://dl.espressif.com/dl/package_esp32_index.json`
- `http://arduino.esp8266.com/stable/package_esp8266com_index.json`
2. Instal Papan ESP32
- Setelah menambahkan URL, instal papan ESP32 (versi 3.0.5) melalui Board Manager.
- Alternatifnya, Anda dapat mengunduh papan ESP32 langsung dengan mengklik tautan yang disediakan.
3. Pustaka yang Diperlukan
- Untuk menjalankan program, pastikan Anda memiliki pustaka berikut:
- Akses Internet Nirkabel: Untuk menghubungkan ESP32 ke jaringan Wi-Fi.
- Server Web: Untuk membuat antarmuka web yang memungkinkan kontrol perangkat.
Kode Pemrograman untuk Mengatur Relay melalui Server Web pada ESP32
#include <WiFi.h>
#include <WebServer.h>
// Wi-Fi access point credentials
const char* ssid = "ESP32_Hotspot";
const char* password = "12345678";
// Static IP configuration
IPAddress local_IP(192, 168, 4, 1);
IPAddress gateway(192, 168, 4, 1);
IPAddress subnet(255, 255, 255, 0);
// GPIO pins for relays (active low)
const int relayPins[] = {23, 19, 18, 5};
// GPIO pins for push buttons
const int buttonPins[] = {13, 12, 14, 27};
// Relay states
bool relayStates[] = {HIGH, HIGH, HIGH, HIGH}; // Start with relays off
// Create a WebServer object on port 80
WebServer server(80);
// Toggle relay function
void toggleRelay(int relayIndex) {
relayStates[relayIndex] = !relayStates[relayIndex];
digitalWrite(relayPins[relayIndex], relayStates[relayIndex]);
}
// HTML content generation function with feedback and styling
String generateHTML() {
String html = "<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";
html += "<style>";
html += "body { font-family: Arial, sans-serif; max-width: 400px; margin: auto; text-align: center; }";
html += "h1 { color: #333; }";
html += ".button { display: inline-block; width: 80%; padding: 15px; margin: 10px; font-size: 18px; color: white; background-color: #4CAF50; border: none; border-radius: 5px; text-decoration: none; }";
html += ".button.off { background-color: #f44336; }";
html += ".refresh { background-color: #2196F3; padding: 10px 20px; margin: 15px; color: white; font-size: 18px; border: none; border-radius: 5px; }";
html += ".footer { margin-top: 20px; color: #666; font-size: 14px; }";
html += "</style></head><body>";
html += "<h1>ESP32 Relay Control</h1>";
// Relay control buttons
for (int i = 0; i < 4; i++) {
html += "<p>Relay " + String(i+1) + ": " + (relayStates[i] == LOW ? "ON" : "OFF") + "</p>";
html += "<form action=\"/toggle_relay_" + String(i) + "\" method=\"GET\">";
html += "<button class=\"button " + String(relayStates[i] == LOW ? "off" : "") + "\" type=\"submit\">"
+ String(relayStates[i] == LOW ? "Turn OFF" : "Turn ON") + " Relay " + String(i+1) + "</button>";
html += "</form><br>";
}
// Refresh button
html += "<form action=\"/refresh\" method=\"GET\">";
html += "<button class=\"refresh\" type=\"submit\">Refresh</button>";
html += "</form>";
// Footer text
html += "<div class=\"footer\">Tech StudyCell</div>";
html += "</body></html>";
return html;
}
// Setup server routes
void setupServerRoutes() {
// Route for the main page
server.on("/", HTTP_GET, []() {
server.send(200, "text/html", generateHTML());
});
// Route for relay toggle control
for (int i = 0; i < 4; i++) {
int relayIndex = i;
server.on(("/toggle_relay_" + String(i)).c_str(), HTTP_GET, [relayIndex]() {
toggleRelay(relayIndex);
server.send(200, "text/html", generateHTML()); // Update the page with current states
});
}
// Route for refreshing the page without toggling relays
server.on("/refresh", HTTP_GET, []() {
server.send(200, "text/html", generateHTML());
});
}
void setup() {
Serial.begin(115200);
// Initialize relay pins as output and set them to HIGH (inactive for active-low relays)
for (int i = 0; i < 4; i++) {
pinMode(relayPins[i], OUTPUT);
digitalWrite(relayPins[i], HIGH); // Start with relays off
}
// Initialize button pins as input with pull-up resistors
for (int i = 0; i < 4; i++) {
pinMode(buttonPins[i], INPUT_PULLUP);
}
// Configure Wi-Fi with a fixed IP and set up as an access point
WiFi.softAPConfig(local_IP, gateway, subnet);
WiFi.softAP(ssid, password);
Serial.print("Access Point IP: ");
Serial.println(WiFi.softAPIP());
// Set up web server routes
setupServerRoutes();
// Start the server
server.begin();
Serial.println("Web server started.");
}
void loop() {
// Handle incoming client requests
server.handleClient();
// Manual button control
for (int i = 0; i < 4; i++) {
if (digitalRead(buttonPins[i]) == LOW) { // Button pressed (active low)
delay(100); // Debounce delay
toggleRelay(i); // Toggle the corresponding relay
while (digitalRead(buttonPins[i]) == LOW); // Wait until button is released
delay(100); // Debounce delay
}
}
}
Penjelasan Kode Program
1. Include Libraries : WiFi.h digunakan untuk mengonfigurasi ESP32 sebagai hotspot Wi-Fi, sekaligus WebServer.h memungkinkan kita membuat server web dasar untuk mengendalikan relay.
#include <WiFi.h>
#include <WebServer.h>
2. Kredensial Wi-Fi : Baris ini menentukan SSID (nama) dan kata sandi untuk jaringan Wi-Fi yang akan dibuat oleh ESP32. Pengguna akan terhubung ke jaringan ini untuk mengendalikan relai.
const char* ssid = "ESP32_Hotspot";
const char* password = "12345678";
3. Konfigurasi IP Statis : Mengatur alamat IP, gateway, dan subnet ESP32 untuk jaringannya. IP tetap 192.168.4.1memudahkan akses dari perangkat apa pun yang terhubung.
IPAddress local_IP(192, 168, 4, 1);
IPAddress gateway(192, 168, 4, 1);
IPAddress subnet(255, 255, 255, 0);
4. Definisi Pin : Menentukan pin GPIO untuk empat relai ( relayPins) dan empat tombol ( buttonPins). Setiap relai akan dikontrol oleh pin yang unik, dan setiap tombol memungkinkan kontrol relai secara manual.
const int relayPins[] = {26, 27, 32, 33};
const int buttonPins[] = {12, 13, 14, 15};
5. Relay States Array : Array ini melacak setiap status relay (TINGGI = MATI dan RENDAH = HIDUP, karena relay aktif-rendah). Awalnya, semua diatur ke TINGGI (MATI).
bool relayStates[] = {HIGH, HIGH, HIGH, HIGH}; // Start with relays off
6. Inisialisasi Server Web : Membuat WebServerobjek pada port 80, yang merupakan port default untuk HTTP.
WebServer server(80);
7. Fungsi Toggle Relay : Fungsi ini membalik status relay. Saat dipanggil dengan indeks relay (0–3), fungsi ini mengubah status relay relayStatesdan menulis status baru ke pin GPIO, yang akan menyalakan atau mematikan relay.
void toggleRelay(int relayIndex) {
relayStates[relayIndex] = !relayStates[relayIndex];
digitalWrite(relayPins[relayIndex], relayStates[relayIndex]);
}
8. Hasilkan HTML : Memulai fungsi untuk membuat konten HTML yang ditampilkan pada halaman web, menyediakan tombol untuk setiap relai dan opsi penyegaran.
String generateHTML() {
9. Penataan HTML dan CSS : Mulai membangun konten HTML dengan beberapa penataan untuk membuat halaman responsif dan menarik secara visual. Tombol ditata untuk AKTIF (hijau) dan NONAKTIF (merah), dan tombol “Segarkan” berwarna biru.
String html = "<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"width=device-width, initial- scale=1.0\">";
html += "<style>body { font-family: Arial, sans-serif; max-width: 400px; margin: auto; text-align: center; }";
html += "h1 { color: #333; }";
html += ".button { display: inline-block; width: 80%; padding: 15px; margin: 10px; font-size: 18px; color: white; background-color: #4CAF50; border: none; border-radius: 5px; text-decoration: none; }";
html += ".button.off { background-color: #f44336; }";
html += ".refresh { background-color: #2196F3; padding: 10px 20px; margin: 15px; color: white; font-size: 18px; border: none; border-radius: 5px; }";
html += ".footer { margin-top: 20px; color: #666; font- size: 14px; }</style></head><body>";
html += "<h1>ESP32 Relay Control</h1>";
10. Tombol Relay dalam HTML : Untuk setiap relay, tambahkan paragraf yang menampilkan statusnya (ON/OFF) dan tombol untuk mengaktifkannya. Tombol tersebut for (int i = 0; i < 4; i++) {
html += "<p>Relay " + String(i+1) + ": " + (relayStates[i] == LOW ? "ON" : "OFF") + "</p>";
html += "<form action=\"/toggle_relay_" + String(i) + "\" method=\"GET\">";
html += "<button class=\"button " + String(relayStates[i] == LOW ? "off" : "") + "\" type=\"submit\">"
+ String(relayStates[i] == LOW ? "Turn OFF" : "Turn ON") + " Relay " + String(i+1) + "</button>";
html += "</form><br>";
}
11. Tombol Refresh dan Footer : Menambahkan tombol yang memuat ulang halaman tanpa mengubah status relai dan menampilkan teks footer “Tech StudyCell.”
html += "<form action=\"/refresh\" method=\"GET\">";
html += "<button class=\"refresh\" type=\"submit\">Refresh</button>";
html += "</form>";
html += "<div class=\"footer\">Tech StudyCell</div>";
html += "</body></html>";
return html;
}
12. Menyiapkan Rute Server : Mulai menyiapkan rute yang akan ditangani oleh server web.
void setupServerRoutes() {
13. Rute Halaman Utama : Saat pengguna mengakses /, ESP32 membuat halaman HTML generateHTML()dan mengirimkannya ke klien.
server.on("/", HTTP_GET, []() {
server.send(200, "text/html", generateHTML());
});
14. Toggle Relay Routes : Mengatur rute untuk mengaktifkan setiap relay. Saat tombol ditekan, relay yang sesuai akan diaktifkan dan HTML yang diperbarui akan dikirim.
for (int i = 0; i < 4; i++) {
int relayIndex = i;
server.on(("/toggle_relay_" + String(i)).c_str(), HTTP_GET, [relayIndex]() {
toggleRelay(relayIndex);
server.send(200, "text/html", generateHTML());
});
}
15. Segarkan Rute : Menyegarkan halaman untuk menampilkan status relai tanpa mengubahnya.
server.on("/refresh", HTTP_GET, []() {
server.send(200, "text/html", generateHTML());
});
16. Fungsi Pengaturan : Menginisialisasi ESP32, relai, tombol, dan Wi-Fi.
void setup() {
Serial.begin(115200);
17. Inisialisasi Relai : Mengatur setiap pin relai sebagai keluaran dan memulai setiap relai dalam status TINGGI (MATI).
for (int i = 0; i < 4; i++) {
pinMode(relayPins[i], OUTPUT);
digitalWrite(relayPins[i], HIGH);
}
18. Inisialisasi Tombol : Mengatur pin tombol sebagai input dengan resistor pull-up.
for (int i = 0; i < 4; i++) {
pinMode(buttonPins[i], INPUT_PULLUP);
}
19. Mulai Titik Akses Wi-Fi : Mengonfigurasi ESP32 sebagai titik akses Wi-Fi dengan SSID, kata sandi, dan IP statis yang ditentukan ( 192.168.4.1).
WiFi.softAPConfig(local_IP, gateway, subnet);
WiFi.softAP(ssid, password);
Serial.print("Access Point IP: ");
Serial.println(WiFi.softAPIP());
20. Inisialisasi Server Web : Panggilan setupServerRoutes()untuk menentukan rute server, memulai server, dan mencetak pesan konfirmasi.
setupServerRoutes();
server.begin();
Serial.println("Web server started.");
}
21. Menangani Permintaan Klien : server.handleClient()terus mendengarkan permintaan yang masuk, seperti permintaan relay toggle atau refresh.
void loop() {
server.handleClient();
22. Kontrol Tombol Manual : Memeriksa setiap tombol. Saat ditekan (LOW), tombol ini akan mengaktifkan relai terkait. Penundaan debounce memastikan input stabil.
for (int i = 0; i < 4; i++) {
if (digitalRead(buttonPins[i]) == LOW) { // Button pressed (active low)
delay(100); // Debounce delay
toggleRelay(i); // Toggle the corresponding relay
while (digitalRead(buttonPins[i]) == LOW); // Wait until button is released
delay(100); // Debounce delay
}
}
}
Kode ini memungkinkan pengguna untuk mengendalikan relay melalui antarmuka web dan tombol tekan fisik, dengan umpan balik pada status relai saat ini.
Langkah-langkah untuk Menghubungkan ke Titik Akses ESP32 dan Relay Kontrol
Langkah 1: Nyalakan ESP32
- Hubungkan ESP32 ke sumber daya melalui USB atau catu daya 3,3V/5V apa pun.
- ESP32 akan secara otomatis membuat titik akses Wi-Fi.
Langkah 2: Hubungkan ke Jaringan Wi-Fi ESP32
Di ponsel, tablet, atau laptop Anda, buka Pengaturan Wi-Fi dan cari jaringan Wi-Fi yang tersedia.
Hubungkan ke jaringan Wi-Fi dengan kredensial berikut:
SSID : ESP32_Hotspot
Kata Sandi : 12345678
Setelah terhubung, perangkat Anda akan bergabung dengan jaringan ESP32.
Langkah 3: Buka Antarmuka Web
- Buka peramban web di perangkat Anda yang terhubung (Chrome, Firefox, Safari, dll.).
- Pada bilah alamat browser, ketik alamat IP berikut dan tekan Enter http://192.168.4.1
- Antarmuka Web Kontrol Relai ESP32 akan dimuat.
Langkah 4: Kontrol Relay
Pada antarmuka web, Anda akan melihat empat tombol berlabel untuk setiap relay.
Ketuk atau klik tombol untuk mengaktifkan relay masing-masing:
- Jika relay dalam kondisi MATI , menekan tombol akan menyalakannya .
- Jika relay AKTIF , menekan tombol akan mematikannya .
- Status terkini setiap relay akan ditampilkan di bawah tombol.
Langkah 5: Segarkan Halaman Web
Untuk memperbarui status relay saat ini, klik tombol "segarkan" pada antarmuka web. Hal ini akan memuat ulang halaman dan menampilkan status waktu nyata semua relay.
Langkah 6: Kontrol Manual (Opsional)
Anda juga dapat mengendalikan relay secara manual menggunakan tombol tekan yang terhubung ke ESP32. Tekan tombol untuk mengaktifkan relay yang sesuai. Antarmuka web akan mencerminkan perubahan setelah pembaruan.
Catatan
ESP32 beroperasi sebagai Titik Akses (AP) dan tidak memerlukan koneksi internet. Sistem ini terisolasi dan bekerja dalam jangkauan Wi-Fi ESP32. Pastikan perangkat Anda tetap terhubung ke jaringan Wi-Fi ESP32 untuk mengendalikan relay.
Siap Untuk Membuat Proyek Impianmu Menjadi Kenyataan?
Klik di sini untuk chat langsung via WhatsApp dan dapatkan dukungan langsung dari tim ahli kami!
0 Komentar