ESP32 Web Server: Bật tắt Output bằng công tắc tạm thời

Trong bài này, chúng ta hãy cùng tìm hiểu về một chủ đề khác trong ESP32 Web Server, cụ thể là sử dụng 1 công tắc tạm thời để điều khiển các đầu ra của ESP32 hoặc ESP8266.

Nếu bạn nhấn giữ nút nhấn trên trang Web, trạng thái sẽ là HIGH.
Khi bạn thả nút, chúng sẽ chuyển sang LOW.

Trong ví dụ này, IoTZone sẽ hướng dẫn bạn làm việc với 1 đầu ra cụ thể là đèn LED. Bạn có thể ứng dụng vào bất kỳ đầu ra nào khác mà bạn thích.

Mục lục bài viết

Công tắc tạm thời là gì?

Công tắc tạm thời hoạt động theo nguyên tắc nhấn giữ để kích hoạt và ngừng hoạt động khi thả tay. Trong dự án này, chúng ta sẽ sử dụng ESP32 hoặc ESP8266 để tạo một giao diện web đơn giản, cho phép bật/tắt đèn LED trong khoảng thời gian ngắn:

Mô tả hoạt động dự án ESP32 Web Server - Bật tắt LED bằng công tắc tạm thời

Cài đặt thư viện cho dự án ESP32 Web Server

Để xây dựng Web Server cho dự án này, bạn cần cài các thư viện sau, tương ứng với từng loại mạch:

ESP32: Thư viện ESPAsyncWebServer và AsyncTCP.
ESP8266: Thư viện ESPAsyncWebServer và ESPAsyncTCP

Code mẫu dự án

Bạn copy đoạn code sau vào phần mềm Arduino IDE của mình. Lưu ý là bạn cần thay đổi thông tin mạng (SSID – tên WiFi và mật khẩu) thành mạng của bạn, lúc đó Web Server mới hoạt động nhé!

Dự án dưới đây sẽ điều khiển đèn LED trên mạch ESP32, đèn này thường được nối với chân GPIO 2, bạn có thể thay đổi thành bất kỳ chân GPIO nào khác để điều khiển những output khác.

#ifdef ESP32
  #include <WiFi.h>
  #include <AsyncTCP.h>
#else
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const int output = 2;

// HTML web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
  <head>
    <title>ESP Pushbutton Web Server</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}
      .button {
        padding: 10px 20px;
        font-size: 24px;
        text-align: center;
        outline: none;
        color: #fff;
        background-color: #2f4468;
        border: none;
        border-radius: 5px;
        box-shadow: 0 6px #999;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
      }  
      .button:hover {background-color: #1f2e45}
      .button:active {
        background-color: #1f2e45;
        box-shadow: 0 4px #666;
        transform: translateY(2px);
      }
    </style>
  </head>
  <body>
    <h1>ESP Pushbutton Web Server</h1>
    <button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">LED PUSHBUTTON</button>
   <script>
   function toggleCheckbox(x) {
     var xhr = new XMLHttpRequest();
     xhr.open("GET", "/" + x, true);
     xhr.send();
   }
  </script>
  </body>
</html>)rawliteral";

void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

AsyncWebServer server(80);

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("ESP IP Address: http://");
  Serial.println(WiFi.localIP());
  
  pinMode(output, OUTPUT);
  digitalWrite(output, LOW);
  
  // Send web page to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Receive an HTTP GET request
  server.on("/on", HTTP_GET, [] (AsyncWebServerRequest *request) {
    digitalWrite(output, HIGH);
    request->send(200, "text/plain", "ok");
  });

  // Receive an HTTP GET request
  server.on("/off", HTTP_GET, [] (AsyncWebServerRequest *request) {
    digitalWrite(output, LOW);
    request->send(200, "text/plain", "ok");
  });
  
  server.onNotFound(notFound);
  server.begin();
}

void loop() {
 
}

Demo dự án

Sau khi nạp code vào mạch ESP32 và đổi thành thông tin mạng WiFi của mình, bạn hãy mở Serial Monitor ở tốc độ truyền 115200. Sau đó, bạn nhấn nút reset (RST) trên mạch để lấy địa chỉ IP của mạch ESP32:

Sau đó, bạn mở trình duyệt mạng lên và nhập địa chỉ IP mà bạn vừa lấy được vào thanh tìm kiếm, trình duyệt sẽ hiển thị 1 ESP32 Web Server như hình dưới. Bạn có thể nhấn giữ nút trên trang Web để xem hiệu quả dự án mình vừa làm: