Ep 8 : ESP32 with Wi-Fi Communication
Sistem embedded pada masa ini telah dilengkapi oleh berbagai communication protocol sebagai media transmit data antar device. Device seperti smarphone, smartTV, PC, dll. tentunya sudah menerapkan protocol ini. Communication protocol dapat dibagi menjadi dua jenis, yaitu communication berbasis kabel dan nirkabel(wireless).
Salah satu jenis dari wireless communication adalah Wireless Fidelity atau yang biasa dikenal Wi-Fi. Jenis jaringan ini digunakan sebagai local area network(LAN) dan akses internet sehingga memungkinkan device digital dalam network untuk bertukar data melalui gelombang radio. Wi-Fi merupakan jaringan yang paling banyak digunakan untuk saat ini, terutama untuk jaringan rumah atau perkantoran.
Wi-Fi menggunakan frekuansi gelombang radio 2.4 GHz atau 5GHz serta mampu digunakan dalam jangkauan 20 meter dalam ruangan dan 150 meter di luar ruangan.
ESP32 dilengkapi dengan communication protocol Wi-Fi. Oleh karena itu pada project kali ini, kita akan berfokus dalam memanfaatkan Wi-Fi untuk mengontrol ESP32 dari device lain yang tersambung jaringan Wi-Fi. Sistem embedded ini dirancang menggunakan ESP32 dan LED. Kontrol sistem dilakukan dengan membuat web server oleh device yang terkoneksi dalam satu local network (Wi-Fi) pada aplikasi browser. Output sistem yang diharapkan yaitu LED dapat hidup atau mati sesuai perintah yang diberikan oleh device.
Let’s get started!!
Things used in this project
- ESP32 — DevKitC
- BreadBoard
- Kabel jumper male-to-male ( 3 pcs)
- 3mm LED (2 pcs)
- Resistor 330 Ohm (2 pcs)
- Kabel USB micro-B
- Laptop (with Arduino IDE)
Note :
- Untuk mengakses web server dapat digunakan digital device seperti laptop atau smartphone. Akses dilakukan membuka IP Address web server dengan browser.
Schematic
Jika seluruh komponen sudah tersedia, sistem dapat dirancang menurut petunjuk gambar di atas. Detail pin GPIO yang digunakan :
- GPIO GND : LED Merah (-), LED Biru (-)
- GPIO13 : LED Merah (+)
- GPIO 12 : LED Biru (+)
Note :
- Kutub positif (+) dari LED terletak pada kaki yang lebih panjang. Maka pada kaki tersebut disambungkan dengan sumber tegangan, sedangkan kaki yang lainnya disambungkan dengan ground.
Program
Pada bagian awal di-load library yang digunakan, yaitu WiFi library.
// Load Wi-Fi library
#include <WiFi.h>Bagian selanjutnya dimasukkan SSID WiFi Network dan password dari jaringan yang digunakan.
// Nama Wi-Fi dan password
const char* ssid = "<SSID Wi-Fi>";
const char* password = "<Password Wi-Fi>";Diset nomor port dari web server.
// Mengeset nomor port web server 80
WiFiServer server(80);Variabel header dibawah digunakan untuk menyimpan HTTP request.
// Variabel untuk menyimpan HTTP request
String header;Variabel berikutnya menyimpan status dari GPIO dalam bentuk String (output13State dan output12State). Setelah itu, terdapat variabel output13 dan output12 untuk mengeset output GPIO pin. Dalam program ini dipilih GPIO13 dan GPIO12.
// Variabel untuk menyimpan status GPIO saat ini
String output13State = "off";
String output12State = "off";// Mengeset variabel output ke GPIO pin
const int output13 = 13;
const int output12 = 12;
Bagian program dibawah adalah variabel pendukung yang menyimpan hal-hal berkaitan dengan waktu.
// Waktu saat ini
unsigned long currentTime = millis();
// Waktu sebelumnya time
unsigned long previousTime = 0;
// Mengeset variabel timeoutTime dalam milisekon
const long timeoutTime = 2000;setup( )
Pada bagian setup, diinisialisasi variabel GPIO sebagai output (LED) dan mengeset output LED dalam status LOW (mati).
// Inisialisasi variabel GPIO sebagai output
pinMode(output13, OUTPUT);
pinMode(output12, OUTPUT);
// Mengeset output ke LOW
digitalWrite(output13, LOW);
digitalWrite(output12, LOW);Kode porgram selanjutnya digunakan untuk menghubungkan jaringan Wi-Fi dengan web sever ESP32. Kode ini sekaligus menginisialisasi web server. Jika WiFi berhasil terhubung, akan tercetak pesan “WiFi connected.” dan IP Address yang digunakan ke serial monitor.
// Menghubungkan jaringan Wi-Fi (SSID dan password)
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Mencetak IP address ke serial monitor
// dan memulai web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();loop( )
Pada bagian loop(), program digunakan untuk membangun koneksi dengan client baru dengan web server.
Kode program dibawah digunakan untuk menangkap koneksi dari client baru.
WiFiClient client = server.available(); // Listen for incoming clientsJika terdapat koneksi client baru yang terdeteksi, maka akan tercetak pesan “New Client.”. Setelah itu, terdapat while loop agar program selalu berjalan selama client terkoneksi.
if (client) { // Jika klien baru terhubung,
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client."); // mencetak pesan ke serial monitor
String currentLine = "";
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop saat client terhubung
currentTime = millis();
if (client.available()) {
char c = client.read(); // membaca sebuah byte, then
Serial.write(c); // mencetak ke serial monitor
header += c;
if (c == '\n') { // jika byte adalah 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();Bagian kode program selanjutnya digunakan untuk mengecek button yang sudah ditekan dari web server untuk mengontrol output. Kode ini bekerja menggunakan if-else condition terhadap URL yang berubah akibat button yang ditekan.
// menghidupkan dan mematikan GPIO
if (header.indexOf("GET /13/on") >= 0) {
Serial.println("GPIO 13 on");
output13State = "on";
digitalWrite(output13, HIGH);
} else if (header.indexOf("GET /13/off") >= 0) {
Serial.println("GPIO 13 off");
utput13State = "off";
digitalWrite(output13, LOW);
} else if (header.indexOf("GET /12/on") >= 0) {
Serial.println("GPIO 12 on");
output12State = "on";
digitalWrite(output12, HIGH);
} else if (header.indexOf("GET /12/off") >= 0) {
Serial.println("GPIO 12 off");
output12State = "off";
digitalWrite(output12, LOW);
} else if (header.indexOf("GET /all/on") >=0) {
Serial.println("GPIO all on");
output13State = "on";
output12State = "on";
digitalWrite(output13, HIGH);
digitalWrite(output12, HIGH);
} else if (header.indexOf("GET /all/off") >=0) {
Serial.println("GPIO all off");
output13State = "off";
output12State = "off";
digitalWrite(output13, LOW);
digitalWrite(output12, LOW);
}Program selanjutnya dalam loop() digunakan untuk merangkai tampilan web server menggunakan HTML dan CSS. Desain dari tombol juga terdapat pada bagin program tersebut, sekaligus logic untuk memenuhi spesifikasi dari project ini.
Bagian terakhir dari bagian program ini digunakan untuk mengosongkan nilai dalam variabel header dan menutup koneksi client. Jika koneksi client dapat ditutup, akan tercetak pesan “Client disconnected.” pada serial monitor.
// Mengosongkan variabel header
header = "";
// Menutup koneksi
client.stop();
Serial.println("Client disconnected.");
Serial.println("");Result
Setelah kode program selesai di-upload, device berhasil berjalan sesuai dengan spesifikasi program yang diberikan 😃.
Berikut kondisi awal dari web server pada browser dan sistem ESP32:
Berikut kondisi akhir dari web server pada browser dan sistem ESP32 ketika tombol ON All ditekan:
Overall, sistem ESP32 dengan Wi-Fi Commnucation dapat berjalan sesuai dengan program yang di-upload. Web server dapat diakses dengan membuka IP Address yang tercetak di Serial monitor pada browser device.
Pada web server tersedia button untuk mengontrol output LED. Tersedia button ON/OFF GPIO 13(LED merah), ON/OFF GPIO12(LED biru), dan ON/OFF ALL GPIO untuk menghidupkan atau mematikan LED sesuai pin GPIO yang terhubung.
Thanks for reading
See you on another ep! 😄
