Projek Sistem Embedded Part 8 : WiFi Communication
Halo semuanya,,
Kembali lagi ke projek sistem embeddedku yang sudah masuk part 8 mengenai WiFI Communication. Ternyata ESP32 DevKit memiliki kemampuan menukarkan informasi menggunakan komunikasi WiFi. Nantinya, masukan yang diberikan oleh sistem akan diterima ESP32 DevKit dan menjalankan masukkan yang diberikan.
Percobaan kali ini akan menyalakan dan mematikan 2 buah LED dengan menggunakan web server yang dapat diakses di smarthphone ataupun laptop dan komputer kalian.
Untuk melakukan percobaan kali ini, komponen yang dibutuhkan adalah sebagai berikut.
- ESP32 DevKit
- Breadboard
- Kabel Jumper (Male to Male)
- LED
- Kabel USB
- Laptop/Komputer
Dari komponen diatas, akan dirangkai sebuah rangkaian seperti gambar dibawah ini
Atau jika dilihat dalam rangkaian nyata akan seperti berikut
Tidak seperti komunikasi menggunakan bluetooth, pada percobaan kali ini kita tidak perlu menggunakan aplikasi apapun. Pada program yang akan kuberikan dibawah ini akan membentuk sebuah html yang akan menghasilkan IP address untuk memberikan masukkan kepada ESP32 DevKit. Program ini aku ambil dari Randomnerdtutorial.com dengan sedikit perubahan. Berikut kode program yang ku maksud
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/// Load Wi-Fi library
#include <WiFi.h>// Isi sesuai nama WiFi dan password WiFi kalian
const char* ssid = "";
const char* 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(){
// Listen for incoming clients
WiFiClient client = server.available();if (client) {
// If a new client cONnects,
currentTime = millis();
previousTime = currentTime;
// print a message out in the serial port
Serial.println("New Client.");
// make a String to hold incoming data from the client
String currentLine = "";
// loop while the client's connected
while (client.connected() && currentTime - previousTime <= timeoutTime) {
currentTime = millis();
if (client.available()) { // jika iya
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);
} // Melihat kedua LED nyala
else if (header.indexOf ("GET /26/ON") >= 0 and header.indexOf ("GET /27/ON") >= 0){
Serial.println("GPIO 26 & 27 ON");
output26State = "ON";
output27State = "ON";
digitalWrite(output26, HIGH);
digitalWrite(output27, HIGH);
} // Melihat kedua LED mati
else if (header.indexOf("GET /26/OFF") >= 0 and header.indexOf ("GET /27/OFF") >= 0){
Serial.println("GPIO 26 & 27 OFF");
output26State = "OFF";
output27State = "OFF";
digitalWrite(output26, LOW);
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("<body style=background-color:#ffdee6>");
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: serif; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #ff5e86; border: none; color: #f2e9cd; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #5a2b41;}</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>LED Blue - " + 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>LED Green - " + 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>");//Display current state, and ON/OFF buttons for GPIO 26 & 27
String bluegreen = "OFF";
if (output26State=="ON" and output27State=="ON") {
bluegreen = "ON";
}
client.println("<p>LED Blue and Green - " + bluegreen + "</p>");
// If the output26State is OFF, it displays the ON button
if (bluegreen=="OFF") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/27/on\"><button class=\"button button2\">OFF</button></a></p>");
}
// 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("");
}
}
Sebelum membahas program lebih jauh, aku ingin mengatakan kepada kalian bahwa diawal program yang memberikan input data WiFi, kalian diharuskan mengisi data sesuai WiFi yang sedang kalian gunakan. Disini aku tidak mencantumkan data WiFiku namun akan memberikan contoh sebagai berikut.
// Isi sesuai nama WiFi dan password WiFi kalian
const char* ssid = "NAMA WIFI";
const char* password = "PASSWORD WIFI";
Sebagai contoh:
// Isi sesuai nama WiFi dan password WiFi kalian
const char* ssid = "WINDA";
const char* password = "1921910";
Program akan memberikan output LED yang dapat menyala dan mati sesuai masukkan yang diberikan pada web server yang dibangun. Menggunakan GPIO26 dan GPIO27 sebagai PIN untuk LED sehingga dapat menentukan pertukaran informasi yang dilakukan.
Masukkan yang diterima LED terjadi pada bagian if else program yang akan menentuka LED mana yang akan diaktifkan atau di matikan. Program tersebut terhubung dengan web Server yang dibangun menggunakan HTML dan styling dengan CSS.
Program akan membuat sebuah pengaturan web page dengan diawali laman web merespon di web browser apapun baik smartphone maupun laptop atau komputer. Dan dibagian akhir, ditambahkan program sehingga variabel di header akan dihapus dan koneksi akan terputus
Hasil dari percobaannya adalah sebagai berikut.
Dengan memasukkan IP Address yang dihasilkan kedalam web browser maka akan menghasilkan sebuah web server seperti berikut.
— Akhir cerita
Seperti yang sudah kubilang sebelumnya, aku melakukan sedikit perubahan di programku
Aku menambahkan sebuah buttom pada webserverku yang akan tersambung dengan 2 buttom lainnya, dimana jika kedua LED menyala (buttom = on) maka buttom tersebut akan memberikan pernyataan ON, namun jika hanya salah satu LED yang menyala, maka buttom tersebut akan memberika pernyataan OFF. Selain itu, aku juga memberikan sedikit perubahan styling pada web serverku dengan merubah warna dari Randomnerdtutorial.com yang terletak pada bagian:
// 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("<body style=background-color:#ffdee6>");
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: serif; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #ff5e86; border: none; color: #f2e9cd; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #5a2b41;}</style></head>");aku mengubah pemilihan warna dan font dengan mengubah kode yang diberikan seperti yang sudah ku beirkan tanda bold.
Sebagai kesimpulan yang aku dapatkan dari percobaan kali ini adalah ternyata dengan menggunakan WiFi communication, ESP32 DevKit dapat saling menukarkan informasi berupa menyalakan dan mematikan LED. Namun yang menjadi highlight adalah masukan device WiFi haruslah tepat sehingga pertukaran informasi tersebut dapat berjalan.
Sebenarnya masih banyak percobaan menarik yang bisa dilakukan dengan WiFi Communication, namun dengan keterbatasan jumlah ESP32 DevKit dan beberapa komponen lainnya, aku hanya bisa mengerjakan percobaan ini saja, jika kalian membuka Randomnerdtutoria.com dengan seksama, kalian akan menemukan begitu banyak percobaan menarik didalamnya
Mungkin segitu dulu yang bisa kubagikan di ceritaku kali ini, sampai jumpa di percobaan berikutnya. Have a nice day!!
