ESP32 WITH WI-FI COMMUNICATION
Pada percobaaan kali ini, dijelaskan mengenai ESP32 yang menggunakan fitur komunikasi Wi-Fi. Percobaan kali ini akan membuat web server untuk mengontrol output. Output ini berupa LED. Server web responsif dan dapat diakses dengan perangkat apapun sebagai browser di jaringan lokal.
Pada percobaan ini, komponen dan perangkat yang dibutuhkan sebagai berikut.
1. ESP32 DEVKIT V1 Board (yang saya gunakan 30 pin)
2. Arduino IDE
4. PC / Laptop
6. Jumper wires (yang saya gunakan female to male) sebanyak 3 buah
7. Lampu LED sebanyak 2 buah
8. Resistor 330Ω sebanyak 2 buah
9. Breadboard
Langkah-langkah pengerjaan :
Pertama, merangkai komponen sesuai skema berikut.
Keterangan :
GPIO GND menuju - breadboard
GPIO D27 menuju LED
GPIO D26 menuju LED
Kedua, masukkan code program berikut pada Arduino IDE.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output26State = "off";
String output27State = "off";
// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;
// 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);
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
// 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();
// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
}
// 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 on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
// Web Page Heading
client.println("<body><h1>ESP32 Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIO 26
client.println("<p>GPIO 26 - State " + output26State + "</p>");
// If the output26State is off, it displays the ON button
if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
}
// Display current state, and ON/OFF buttons for GPIO 27
client.println("<p>GPIO 27 - State " + output27State + "</p>");
// If the output27State is off, it displays the ON button
if (output27State=="off") {
client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
}
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 code program:
1. Memasukkan WiFi library.
// Load Wi-Fi library
#include <WiFi.h>2. Memasukkan SSID dan password di baris berikut di dalam tanda kutip ganda.
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";3. Mengatur web server ke port 80.
// Set web server port number to 80
WiFiServer server(80);4. Membuat variabel untuk menyimpan header permintaan HTTP.
// Variable to store the HTTP request
String header;5. Membuat variabel untuk menyimpan status output.
// Auxiliar variables to store the current output state
String output26State = "off";
String output27State = "off";6. Menetapkan GPIO untuk setiap output. Pada percobaan ini menggunakan GPIO 26 dan GPIO 27.
// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;Setup()
7. Memulai komunikasi serial dengan baud rate 1152000 untuk keperluan debugging.
Serial.begin(115200);8. Mendefiniskan GPIO sebagai output dan mengatur ke LOW.
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);9. Memulai koneksi Wi-Fi dengan WiFi.begin(ssid, password); tunggu koneksi berhasil dan mencetak alamat IP ESP32 di Serial Monitor.
// 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();loop()
10. ESP32 selalu mendengarkan klien masuk.
WiFiClient client = server.available(); // Listen for incoming clients11. Saat permintaan diterima klien, maka akan menyimpan data yang masuk. Loop sementara akan berjalan selama klien tetap terhubung.
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();12. Pernyataan if dan else memeriksa tombol mana yang ditekan di halaman web dan mengontrol output yang sesuai.
// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
}13. Menampilkan halaman web HTML.
// 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:,\">");14. Styling halaman web.
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");15. Mengatur judul halaman web pertama.
client.println("<body><h1>ESP32 Web Server</h1>");16. Menampilkan tombol dan status yang sesuai.
client.println("<p>GPIO 26 - State " + output26State + "</p>");
// If the output26State is off, it displays the ON button
if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
} 17. Menutup koneksi.
// Clear the header variable
header = "";
// Close the connection
client.stop();Ketiga, mengatur networks credential.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Keempat, Verify dan Upload Code program.
Kelima, buka Serial Monitor dengan memilih ikon di bagian pojok kanan atas seperti gambar di bawah.
Ke-enam, pastikan berada pada baud rate 115200. Kemudian, tekan tombol EN pada ESP32.
Ke-tujuh, ESP32 terhubung ke Wi-Fi dan mengeluarkan alamat IP ESP32 pada Serial Monitor. Salin alamat IP tersebut untuk mengakses server web ESP32.
Ke-delapan, IP Address yang didapatkan adalah 172.20.10.2. Maka, ketik di web IP Address tersebut.
Ke-sembilan, pastikan juga berjalan di Serial Monitor.
Ke-sepuluh, tekan ON untuk menyalakan LED dan OFF untuk mematikan LED.
Berikut video hasil percobaan yang dilakukan :
Komentar
Posting Komentar