ESP32 WebSerial: удалённый серийный монитор через веб-интерфейс 

В этом руководстве вы узнаете, как создать и использовать веб-серийный монитор («Serial Monitor») для ваших ESP32-проектов с помощью библиотеки WebSerial. Она создаёт веб-интерфейс для вывода отладочных сообщений — так же, как обычный серийный монитор. Также вы можете отправлять сообщения из веб-серийного монитора на ESP32.

У нас есть аналогичное руководство для платы ESP8266: ESP8266 NodeMCU WebSerial Web-based Remote Serial Monitor.

Веб-серийный монитор 

В большинстве ваших ESP32-проектов вы используете серийный монитор для вывода отладочных сообщений, которые помогают лучше понять, что происходит с микроконтроллером.

Вы создаёте серийное соединение между платой и компьютером, а затем можете просматривать сообщения через серийный монитор. Однако, когда плата не подключена к компьютеру, вы не можете видеть отладочные сообщения.

Решением этой проблемы является использование веб-серийного монитора — ESP32 запускает веб-сервер, который обслуживает страницу для отображения сообщений, как и в «обычном» серийном мониторе. Веб-страница WebSerial также позволяет отправлять данные со страницы на плату.

Библиотека WebSerial ESP32 ESP8266 веб-серийный монитор

Для этого руководства мы будем использовать библиотеку WebSerial.

Если вам нравится эта библиотека и вы будете использовать её в своих проектах, рассмотрите возможность поддержать работу разработчика.

Возможности WebSerial

Список возможностей WebSerial:

Работает на WebSockets;
Логирование в реальном времени;
Можно открыть любое количество серийных мониторов в браузере;
Использует AsyncWebserver для лучшей производительности.

Функции WebSerial

Использование WebSerial аналогично использованию серийного монитора. Основные функции — print() и println():

print() — выводит данные в веб-серийный монитор без символа новой строки (на той же строке);
println() — выводит данные в веб-серийный монитор с символом новой строки (на следующей строке).

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

Для этого проекта мы будем использовать библиотеку WebSerial.h. Чтобы установить библиотеку:

В Arduino IDE перейдите в Sketch > Include Library > Manage Libraries…
Найдите webserial.
Установите библиотеку WebSerial от Ayush Sharma.

Установка библиотеки Web Serial в Arduino IDE

Вам также необходимо установить библиотеки ESPAsyncWebServer и AsyncTCP. Перейдите по следующим ссылкам для загрузки файлов библиотек:

Для установки этих библиотек нажмите на ссылки выше для загрузки файлов. Затем в Arduino IDE перейдите в Sketch > Include Library > Add .ZIP Library…

Если вы используете VS Code с расширением PlatformIO, скопируйте следующее в файл platformio.ini для подключения библиотек:

lib_deps = ESP Async WebServer
  ayushsharma82/WebSerial @ ^1.1.0

Пример ESP32 WebSerial 

Библиотека предоставляет простой пример создания веб-серийного монитора для вывода и получения сообщений. Мы немного модифицировали пример, чтобы сделать его более интерактивным.

Этот пример выводит Hello! в веб-серийный монитор каждые две секунды. Кроме того, вы можете отправлять сообщения из веб-серийного монитора на плату. Вы можете отправить сообщение ON, чтобы включить встроенный светодиод платы, или сообщение OFF, чтобы выключить его.

/*
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-webserial-library/

  This sketch is based on the WebSerial library example: ESP32_Demo
  https://github.com/ayushsharma82/WebSerial
*/

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>

#define LED 2

AsyncWebServer server(80);

const char* ssid = "REPLACE_WITH_YOUR_SSID";          // Your WiFi SSID
const char* password = "REPLACE_WITH_YOUR_PASSWORD";  // Your WiFi Password

void recvMsg(uint8_t *data, size_t len){
  WebSerial.println("Received Data...");
  String d = "";
  for(int i=0; i < len; i++){
    d += char(data[i]);
  }
  WebSerial.println(d);
  if (d == "ON"){
    digitalWrite(LED, HIGH);
  }
  if (d=="OFF"){
    digitalWrite(LED, LOW);
  }
}

void setup() {
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.printf("WiFi Failed!\n");
    return;
  }
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());
  // WebSerial is accessible at "<IP Address>/webserial" in browser
  WebSerial.begin(&server);
  WebSerial.msgCallback(recvMsg);
  server.begin();
}

void loop() {
  WebSerial.println("Hello!");
  delay(2000);
}

Исходный код на GitHub

Перед загрузкой кода на плату не забудьте указать свои сетевые данные.

В этом примере ESP32 работает в режиме станции (station mode). Этот пример также работает в режиме точки доступа. Чтобы узнать, как настроить ESP32 в качестве точки доступа, прочитайте:

Как настроить ESP32 в качестве точки доступа (AP) для веб-сервера

Как работает код

Продолжайте чтение, чтобы узнать, как работает код, или перейдите к разделу демонстрации.

Сначала необходимо подключить нужные библиотеки для WebSerial. Библиотека WiFi.h необходима для подключения ESP32 к Wi-Fi сети.

#include <WiFi.h>

Библиотека WebSerial использует библиотеки AsyncTCP и ESPAsyncWebServer для создания веб-серийного монитора.

#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

Наконец, библиотека WebSerial предоставляет удобные методы для создания веб-серийного монитора.

#include <WebSerial.h>

Создайте переменную LED для встроенного светодиода на GPIO 2.

#define LED 2

Инициализируйте объект AsyncWebServer на порту 80 для настройки веб-сервера.

AsyncWebServer server(80);

Укажите свои сетевые данные в следующих переменных:

const char* ssid = "REPLACE_WITH_YOUR_SSID"; // Your WiFi SSID
const char* password = "REPLACE_WITH_YOUR_PASSWORD"; // Your WiFi Password

Обработка полученных сообщений

Следующая функция принимает входящие сообщения, отправленные из веб-серийного монитора. Сообщение сохраняется в переменной d. Затем оно выводится в веб-серийный монитор с помощью WebSerial.println(d).

void recvMsg(uint8_t *data, size_t len){
  WebSerial.println("Received Data...");
  String d = "";
  for(int i=0; i < len; i++){
    d += char(data[i]);
  }
  WebSerial.println(d);

Далее мы проверяем, содержит ли переменная d значение ON или OFF, и включаем или выключаем светодиод соответственно.

if (d == "ON"){
  digitalWrite(LED, HIGH);
}
if (d=="OFF"){
  digitalWrite(LED, LOW);
}

setup()

В setup() установите LED как OUTPUT.

pinMode(LED, OUTPUT);

Подключите плату к локальной сети:

WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
  Serial.printf("WiFi Failed!\n");
  return;
}
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());

Инициализируйте веб-серийный монитор с помощью метода begin() объекта WebSerial. Эта функция принимает в качестве аргумента объект AsyncWebServer.

WebSerial.begin(&server);

Зарегистрируйте функцию recvMsg() как callback-функцию с помощью метода msgCallback() объекта WebSerial. Функция recvMsg() будет вызываться каждый раз, когда вы отправляете сообщение из монитора на плату.

WebSerial.msgCallback(recvMsg);

Наконец, инициализируйте сервер.

server.begin();

Именно после вызова этой строки веб-серийный монитор начнёт работать.

loop()

В loop() выводите сообщение Hello! каждые 2000 миллисекунд (2 секунды) с помощью функции println() объекта WebSerial.

void loop() {
  WebSerial.println("Hello!");
  delay(2000);
}

Демонстрация 

После указания сетевых данных вы можете загрузить код на плату.

После загрузки откройте «обычный» серийный монитор на скорости 115200 бод. IP-адрес платы будет выведен на экран.

ESP32 WebSerial демонстрация — получение IP-адреса в серийном мониторе Arduino IDE

Теперь откройте браузер в локальной сети и введите IP-адрес ESP, добавив /webserial. Например, в моём случае:

192.168.1.85/webserial

Должна загрузиться страница WebSerial.

Тестирование базового примера библиотеки Web Serial — демонстрация

Как видите, каждые две секунды выводится Hello!. Кроме того, вы можете отправлять команды на ESP32. Все отправленные команды отображаются обратно в веб-серийном мониторе. Вы можете отправить команды ON и OFF для управления встроенным светодиодом.

Это был простой пример, показывающий, как можно использовать библиотеку WebSerial для создания веб-серийного монитора для отправки и получения данных.

Теперь вы можете легко добавить веб-серийный монитор в любой из ваших проектов, используя библиотеку WebSerial.

Заключение 

В этом кратком руководстве вы узнали, как создать веб-серийный монитор. Это особенно полезно, если ваш проект не подключён к компьютеру через серийное соединение, а вы всё ещё хотите просматривать отладочные сообщения. Связь между веб-серийным монитором и ESP32 использует протокол WebSocket.

Надеемся, это руководство было для вас полезным. У нас есть другие руководства по веб-серверам, которые могут вас заинтересовать:

Узнайте больше о ESP32 с нашими ресурсами:

—

Источник: ESP32 WebSerial: Web-based Remote Serial Monitor (Random Nerd Tutorials)

ESP32 WebSerial: удалённый серийный монитор через веб-интерфейс

Веб-серийный монитор