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


3.  Kabel USB type A to micro USB


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 clients

11. 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

Postingan populer dari blog ini

LED Blinking ESP32

-
Gambar
     ESP32 adalah mikrokontroler yang dibuat dan dikembangkan oleh Espressif Systems yang menjadi penerus dari mikrokontroler ESP8266. Pada mikrokontroler ini sudah tersedia modul WiFi dalam chip  ditambah Bluetooth 4.2  sehingga mendukung untuk membuat sistem aplikasi Internet of Things.  Pada sesi ini, akan dijelaskan  mengoperasikan ESP32 Development Board, instalasi IDE, setup board dan komunikasi, memanggil program pertama dari contoh program pada Arduino IDE modul LED Blink, mengupload pada board ESP32 dan menjalankannya.  Komponen dan perangkat yang digunakan :  1.   ESP32 DEVKIT V1 Board (yang saya gunakan 30 pin) 2.  Arduino IDE 3.  Kabel USB type A to micro USB 4. PC / Laptop 5.  Breadboard  (opsional) Langkah - langkah pengerjaan : 1. Download Arduino IDE di  https://www.arduino.cc/en/software/ 2. Instal Arduino Desktop IDE sesuai OS yang digunakan pada PC/Laptop. Arduino IDE nantinya akan digunakan untuk mengisi program pada ESP32. 3. Melakukan konfigurasi pada Arduino IDE.
Baca selengkapnya

ESP32 WITH DATA VISUALIZATION

-
Gambar
         Pada  percobaan kali ini, dijelaskan mengenai pembacaan sensor ke database MySQL menggunakan ESP32. Selanjutnya, dibuat halaman web untuk menampilkan hasil pembacaan sensor, waktu pembacaan dan informasi lainnya dari database. Pembacaan sensor ditampilkan dalam bentuk plot kurva. Sensor yang digunakan pada percobaan ini adalah sensor BMP180. Pada percobaan ini, komponen dan perangkat yang dibutuhkan sebagai berikut. 1.  ESP32 DEVKIT V1 Board (yang saya gunakan 30 pin) 2.  Arduino IDE 3.    Kabel USB type A to micro USB 4. PC / Laptop 6. Jumper wires (yang saya gunakan female to male) sebanyak 4 buah      7. Sensor BMP180 8. Breadboard 9. 000webhost (  https://www.000webhost.com  ) Langkah - langkah pengerjaan : Pertama,  merangkai komponen sebagai berikut.  Keterangan :  1. GPIO GND menuju GND BMP180 2. GPIO 3V3 menuju VCC BMP180 3. GPIO D21 menuju SDA BMP180 4. GPIO D22 menuju SCL BMP180 Kedua,  membuat hosting web. Hosting yang digunakan pada percobaan ini adalah 000webhost.
Baca selengkapnya