Разработка веб-интерфейсов на контроллерах ESP32

Разработка веб-интерфейсов на контроллерах ESP32 — это популярное решение для создания IoT-устройств с возможностью удаленного управления и мониторинга через браузер. ESP32 имеет встроенный Wi-Fi модуль, что позволяет ему выступать в роли веб-сервера и обрабатывать HTTP-запросы. Для разработки веб-интерфейсов на ESP32 можно использовать библиотеку ESPAsyncWebServer, которая позволяет создавать асинхронные веб-серверы.

Основные шаги для создания веб-интерфейса на ESP32

Установка библиотек:

Установите библиотеку ESPAsyncWebServer через Arduino IDE или PlatformIO.
Также потребуется библиотека AsyncTCP для поддержки асинхронных операций.

Создание веб-сервера:

Настройте ESP32 как точку доступа (AP) или подключите его к существующей Wi-Fi сети.
Создайте HTTP-сервер, который будет обрабатывать запросы и отдавать HTML-страницы.

Разработка веб-интерфейса:

Создайте HTML-страницу с элементами управления (кнопки, слайдеры, формы).
Используйте JavaScript для отправки запросов на ESP32 (например, через AJAX).

Обработка запросов:

Настройте обработчики для GET и POST запросов, чтобы управлять устройством.

Пример: Веб-интерфейс для управления светодиодом на ESP32

1. Подключение светодиода

Подключите светодиод к пину GPIO (например, GPIO2) через резистор 220 Ом.

2. Установка библиотек

Установите библиотеки ESPAsyncWebServer и AsyncTCP через Arduino IDE:

ESPAsyncWebServer: https://github.com/me-no-dev/ESPAsyncWebServer
AsyncTCP: https://github.com/me-no-dev/AsyncTCP

3. Код для ESP32

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

// Настройки Wi-Fi
const char* ssid = "Ваш_SSID";
const char* password = "Ваш_ПАРОЛЬ";

// Пин для светодиода
const int ledPin = 2;

// Создаем экземпляр веб-сервера
AsyncWebServer server(80);

// HTML-страница
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
  <title>Управление светодиодом</title>
</head>
<body>
  <h1>Управление светодиодом на ESP32</h1>
  <button onclick="toggleLED()">Включить/Выключить</button>
  <script>
    function toggleLED() {
      fetch('/led')
        .then(response => response.text())
        .then(data => console.log(data));
    }
  </script>
</body>
</html>
)rawliteral";

void setup() {
  // Настройка пина светодиода
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);

  // Подключение к Wi-Fi
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Подключаемся к Wi-Fi...");
  }
  Serial.println("Подключено к Wi-Fi");
  Serial.println(WiFi.localIP());

  // Маршрут для главной страницы
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(200, "text/html", index_html);
  });

  // Маршрут для управления светодиодом
  server.on("/led", HTTP_GET, [](AsyncWebServerRequest *request) {
    digitalWrite(ledPin, !digitalRead(ledPin));
    request->send(200, "text/plain", digitalRead(ledPin) ? "LED ON" : "LED OFF");
  });

  // Запуск сервера
  server.begin();
}

void loop() {
  // Ничего не делаем в loop, так как сервер асинхронный
}

Как это работает:

Wi-Fi подключение:

ESP32 подключается к Wi-Fi сети и получает IP-адрес.

Веб-сервер:

Сервер слушает на порту 80 и обрабатывает запросы.
При запросе на корневой URL (/) возвращается HTML-страница.

Управление светодиодом:

При нажатии на кнопку на веб-странице отправляется GET-запрос на /led.
ESP32 меняет состояние светодиода и возвращает текущее состояние.

Асинхронность:

Библиотека ESPAsyncWebServer позволяет обрабатывать запросы асинхронно, что не блокирует выполнение других задач.

Дополнительные улучшения:

Добавление стилей:

Используйте CSS для улучшения внешнего вида интерфейса.

Поддержка WebSocket:

Для динамического обновления данных на странице без перезагрузки.

Защита паролем:

Добавьте аутентификацию для ограничения доступа к интерфейсу.

Управление несколькими устройствами:

Расширьте интерфейс для управления несколькими пинами или устройствами.

OTA-обновления:

Добавьте возможность обновления прошивки по воздуху (Over-The-Air).

Пример с WebSocket для динамического обновления состояния светодиода

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>

// Настройки Wi-Fi
const char* ssid = "Ваш_SSID";
const char* password = "Ваш_ПАРОЛЬ";

// Пин для светодиода
const int ledPin = 2;

// Создаем экземпляр веб-сервера и WebSocket
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);

// HTML-страница
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
  <title>Управление светодиодом</title>
</head>
<body>
  <h1>Управление светодиодом на ESP32</h1>
  <button onclick="toggleLED()">Включить/Выключить</button>
  <p id="status">Состояние: </p>
  <script>
    var socket = new WebSocket('ws://' + window.location.hostname + ':81/');
    socket.onmessage = function(event) {
      document.getElementById("status").innerHTML = "Состояние: " + event.data;
    };
    function toggleLED() {
      socket.send('toggle');
    }
  </script>
</body>
</html>
)rawliteral";

void setup() {
  // Настройка пина светодиода
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);

  // Подключение к Wi-Fi
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Подключаемся к Wi-Fi...");
  }
  Serial.println("Подключено к Wi-Fi");
  Serial.println(WiFi.localIP());

  // Маршрут для главной страницы
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(200, "text/html", index_html);
  });

  // Запуск сервера и WebSocket
  server.begin();
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
}

void loop() {
  webSocket.loop();
}

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  if (type == WStype_TEXT) {
    if (strcmp((char*)payload, "toggle") == 0) {
      digitalWrite(ledPin, !digitalRead(ledPin));
      webSocket.broadcastTXT(digitalRead(ledPin) ? "ON" : "OFF");
    }
  }
}

Заключение

ESP32 — это мощная платформа для создания IoT-устройств с веб-интерфейсом. С помощью библиотеки ESPAsyncWebServer можно легко разрабатывать асинхронные веб-серверы, а использование WebSocket позволяет создавать динамические и интерактивные интерфейсы.