Беспроводная загрузка кода на ESP32. Использование библиотеки AsyncElegantOTA в среде Arduino.
В этом руководстве рассмотрим, как выполнить беспроводную загрузку кода для платы ESP32 с помощью библиотеки AsyncElegantOTA . Эта библиотека создает веб-сервер, который позволяет загружать новую прошивку (новый скетч) на плату без необходимости устанавливать последовательное соединение между ESP32 и компьютером.
Кроме того, с помощью этой библиотеки вы также можете загружать новые файлы в файловую систему ESP32 (SPIFFS). Библиотека очень проста в использовании, и совместима с библиотекой ESPAsyncWebServer, которую часто используют для проектов с веб-серверами.
Освоив это руководство, вы сможете использовать возможности беспроводной загрузки в своих проектах с использованием веб-серверов.
Обзор
В этом руководстве рассматриваются :
- Добавление ElegantOTA на веб-сервер
- Загрузка прошивки через OTA на плату ESP32
- Загрузка файлов в SPIFFS через OTA на плату ESP32
Мы рекомендуем вам внимательно изучить все этапы руководства, чтобы понять, как работает ElegantOTA и как вы можете использовать ее в своих проектах. Чтобы продемонстрировать, как это сделать, мы загрузим файлы для создания различных проектов с использованием веб-серверов.
Обновление OTA (over-the-air) – это процесс загрузки новой прошивки на плату ESP32 с использованием соединения Wi-Fi. Эта функция чрезвычайно полезна в случае отсутствия физического доступа к плате ESP32.
Есть разные способы выполнять такие обновления. В этом руководстве мы расскажем, как это сделать с помощью библиотеки AsyncElegantOTA . На наш взгляд, это один из лучших и простых способов выполнять беспроводные обновления.
Библиотека AsyncElegantOTA создает веб-сервер, к которому вы можете получить доступ в своей локальной сети для загрузки новой прошивки или файлов в файловую систему (SPIFFS). Загружаемые файлы должны быть в формате .bin.
Единственным недостатком использования OTA является то, что вам нужно добавлять код для беспроводной связи в каждый загружаемый вами скетч. В случае библиотеки AsyncElegantOTA этот код состоит всего из трех строк.
Библиотека для беспроводной загрузки скетча
Существует множество альтернатив для беспроводной загрузки на платы ESP32. Например, в среде Arduino в папке «Примеры» есть пример BasicOTA, OTA Web Updater (работает хорошо, но тяжело интегрируется с веб – серверами с использованием библиотеки ESPAsyncWebServer).
Почему выбранная нами библиотека идеально подходит?
- Она совместима с библиотекой ESPAsyncWebServer ;
- Нужно просто добавить три строки кода, чтобы добавить возможности беспроводной загрузки на ваш «обычный» веб-сервер;
- Она позволяет обновлять не только прошивку платы, но и добавлять файлы в SPIFFS;
- У нее весьма красивый и удобный интерфейс для веб-сервера;
Краткое описание OTA обновлений
Чтобы добавить возможности OTA в свои проекты с помощью библиотеки AsyncElegantOTA , выполните следующие действия:
- Установите библиотеки AsyncElegantOTA , AsyncTCP и ESPAsyncWebServer ;
- Подключите библиотеку AsyncElegantOTA в начале скетча Arduino: #include “AsyncElegantOTA.h”;
- Добавьте строку begin (&server) перед server.begin ();
- Откройте браузер и перейдите по адресу http: //<IPAddress>/update, где <IPAddress> – ваш IP-адрес ESP32.
Как работает OTA WEB Updater?
- Первый скетч нужно загрузить через последовательный интерфейс. Этот скетч должен содержать код для создания OTA Web Updater, чтобы можно было загрузить код с помощью браузера.
- Скетч OTA создает веб-сервер, с помощью которого можно загружать скетчи через веб-браузер.
- Затем вам необходимо реализовать процедуры OTA в каждом загружаемом скетче, чтобы возможно было выполнять последующие обновления / загрузки по беспроводной сети.
- Если вы загрузите код без процедуры OTA, вы больше не сможете получить доступ к веб-серверу и загрузить другой скетч по WiFi.
Как установить библиотеки?
Вы можете установить библиотеку AsyncElegantOTA с помощью менеджера библиотек Arduino. В вашей среде Arduino, перейдите к Скетч > Подключить библиотеку > Управлять библиотеками … Найдите «AsyncElegantOTA» и установите ее.
Вам также необходимо установить библиотеки AsyncTCP и ESPAsyncWebServer . Нажмите на ссылки ниже , чтобы загрузить библиотеки.
Эти библиотеки недоступны для установки через менеджер библиотек Arduino, то есть нужно в среде разработки Arduino перейти Скетч > Подключить библиотеку > Добавить .zip библиотеку и выбрать библиотеки, которые вы только что загрузили.
Пример применения библиотеки
Давайте начнем с простого примера. Здесь создается простой веб-сервер с ESP32. Корневой URL-адрес отображает некоторый текст, а URL-адрес / update отображает интерфейс для обновления прошивки и файловой системы.
Скопируйте следующий код в свою среду Arduino.
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
AsyncWebServer server(80);
void setup(void) {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(200, "text/plain", "Hi! I am ESP32.");
});
AsyncElegantOTA.begin(&server); // Start ElegantOTA
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
}Как работает код?
Сначала подключаем необходимые библиотеки:
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>
Вставляем свои учетные данные в следующие переменные, чтобы ESP32 мог подключиться к локальной сети.
const char* ssid = "ЗАМЕНИТЕ СВОИМ SSID";
const char* password = "ВВЕДИТЕ СВОЙ ПАРОЛЬ";
Создаём AsyncWebServer используя 80 порт:
AsyncWebServer server(80);
В setup () запускаем монитор порта:
Serial.begin (115200);
Инициализируем Wi-Fi:
WiFi.mode (WIFI_STA);
WiFi.begin (ssid , password);
Serial.println ( "");
// Ожидаем подключения
while ( WiFi.status ()! = WL_CONNECTED) {
delay(500);
Serial.print (".");
}
Serial.println ( "");
Serial.print (Connected to»);
Serial.println (ssid);
Serial.print ("IP address :");
Serial.println (WiFi.localIP ());
Затем обрабатываем клиентские запросы. В следующих строках отправляем текст «Hi! I am ESP32.» при доступе к корневому (/) URL:
server.on ( "/", HTTP_GET, [] ( AsyncWebServerRequest * request) {
request->send(200, "text/plain", "Hi! I am ESP32.");
});
Если вашему веб-серверу требуется обрабатывать другие запросы, вы можете добавить их (мы покажем вам в следующем примере).
Затем добавляем следующую строку, чтобы запустить ElegantOTA :
AsyncElegantOTA.begin(&server);
// Наконец, инициализируем сервер:
server.begin( );
// И добавляем в loop( ) следующее:
void loop (void) {
AsyncElegantOTA.loop ( );
}
Доступ К Веб-серверу
После загрузки кода на плату откройте монитор порта со скоростью 115200 бод. Нажмите кнопку RST на плате ESP32. Она должна вывести IP-адрес ESP следующим образом (ваш может быть другим):
В локальной сети откройте браузер и введите IP-адрес ESP32. Вы должны перейти на корневую (/) веб-страницу с отображаемым текстом.
Теперь если вы хотите изменить код своего веб-сервера через OTA, перейдите по IP-адресу ESP с добавкой /update. Должна появиться эта веб-страница:
Как загрузить новые обновления прошивки по беспроводной сети?
Каждый файл, который вы загружаете через OTA, должен быть в формате .bin . Вы можете сгенерировать .bin- файл из своего скетча с помощью Arduino IDE.
Когда ваш скетч открыт, вам просто нужно перейти в Скетч > Экспорт бинарного файла. .Bin файл будет сгенерирован из скетча и сохранен в папке вашего проекта.
Это тот .bin- файл, который нам нужно загрузить с помощью веб-страницы AsyncElegantOTA, если вы хотите загрузить новую прошивку.
Пример загрузки скетча
Представьте, что после загрузки предыдущего скетча вы хотите загрузить новый, который управляет светодиодом через веб-интерфейс. Вот шаги, которые вам необходимо выполнить:
- Скопируйте следующий код в свою среду Arduino. Не забудьте ввести свои учетные данные сети.
#include <Arduino.h> #include <ESP8266WiFi.h> #include <ESPAsyncTCP.h> #include <ESPAsyncWebServer.h> #include <AsyncElegantOTA.h> // Replace with your network credentials const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD"; bool ledState = 0; const int ledPin = 2; // Create AsyncWebServer object on port 80 AsyncWebServer server(80); AsyncWebSocket ws("/ws"); const char index_html[] PROGMEM = R"rawliteral(ESP Web Server ESP Web Server ESP WebSocket Server
)rawliteral"; void notifyClients() { ws.textAll(String(ledState)); } void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) { AwsFrameInfo *info = (AwsFrameInfo*)arg; if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) { data[len] = 0; if (strcmp((char*)data, "toggle") == 0) { ledState = !ledState; notifyClients(); } } } void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) { switch (type) { case WS_EVT_CONNECT: Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str()); break; case WS_EVT_DISCONNECT: Serial.printf("WebSocket client #%u disconnected\n", client->id()); break; case WS_EVT_DATA: handleWebSocketMessage(arg, data, len); break; case WS_EVT_PONG: case WS_EVT_ERROR: break; } } void initWebSocket() { ws.onEvent(onEvent); server.addHandler(&ws); } String processor(const String& var){ Serial.println(var); if(var == "STATE"){ if (ledState){ return "ON"; } else{ return "OFF"; } } return String(); } void setup(){ // Serial port for debugging purposes Serial.begin(115200); pinMode(ledPin, OUTPUT); digitalWrite(ledPin, LOW); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi.."); } // Print ESP Local IP Address Serial.println(WiFi.localIP()); initWebSocket(); // Route for root / web page server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/html", index_html, processor); }); // Start ElegantOTA AsyncElegantOTA.begin(&server); // Start server server.begin(); } void loop() { ws.cleanupClients(); digitalWrite(ledPin, ledState); }Output - GPIO 2
state: %STATE%
- Сохраните свой скетч: Файл > Сохранить как… и дайте ему имя. Для примера: Web_Server_LED_OTA_ESP32 .
- <Создайте .bin- файл из вашего скетча. Перейдите Скетч > Экспорт бинарного файла. В папке проекта должен быть создан новый .bin- файл .
- Теперь вам нужно загрузить этот файл с помощью ElegantOTA. Перейдите на свой IP-адрес ESP, и добавьте /update. Убедитесь, что у вас выбран вариант прошивки. Нажмите на Выбрать файл и выберите .bin файл , который вы только что создали.
5. Когда он закончит, нажмите на кнопку Back.
6. Затем вы можете перейти к корневому (/) URL-адресу, чтобы получить доступ к новому веб-серверу. Это страница, которую вы должны увидеть при доступе к IP-адресу ESP по корневому (/) URL-адресу.
Вы можете нажать на кнопку, чтобы включить или выключить встроенный светодиодный индикатор ESP32.
Поскольку мы также добавили возможности беспроводной загрузки к этому новому веб-серверу, мы можем загрузить еще один скетч в будущем, если это потребуется. Вам просто нужно перейти по IP-адресу ESP32, и добавить /update.
Загрузка файлов в файловую систему.
В этом разделе вы научитесь загружать файлы в файловую систему ESP8266 (SPIFFS) с помощью AsyncElegantOTA.
Плагин для загрузки файловой системы ESP32
Прежде чем продолжить, вам необходимо установить плагин ESP32 Uploader в Arduino IDE.
Веб сервер с файлами из SPIFFS
Представьте себе ситуацию, в которой вам нужно загрузить файлы в файловую систему ESP32 , например: файлы конфигурации; Файлы HTML, CSS или JavaScript для обновления страницы веб-сервера; или любой другой файл, который вы, возможно, захотите сохранить в SPIFFS.
Чтобы показать, как это сделать, создадим новый веб-сервер, который обслуживает файлы из SPIFFS: файлы HTML, CSS и JavaScript для создания веб-страницы, которая удаленно управляет GPIO ESP32.
Прежде чем продолжить, убедитесь, что у вас установлена библиотека Arduino_JSON от Arduino версии 0.1.0 . Вы можете установить эту библиотеку в менеджере библиотек Arduino IDE. Просто перейдите в Скетч > Подключить библиотеку > Управлять библиотеками и найдите Arduino_JSON .
// Import required libraries
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h.h>
#include <Arduino_JSON.h>
#include <AsyncElegantOTA.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Create a WebSocket object
AsyncWebSocket ws("/ws");
// Set number of outputs
#define NUM_OUTPUTS 4
// Assign each GPIO to an output
int outputGPIOs[NUM_OUTPUTS] = {2, 4, 12, 14};
// Initialize SPIFFS
void initSPIFFS() {
if (!SPIFFS.begin(true)) {
Serial.println("An error has occurred while mounting SPIFFS");
}
Serial.println("SPIFFS mounted successfully");
}
// Initialize WiFi
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}
String getOutputStates(){
JSONVar myArray;
for (int i =0; ifinal && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
if (strcmp((char*)data, "states") == 0) {
notifyClients(getOutputStates());
}
else{
int gpio = atoi((char*)data);
digitalWrite(gpio, !digitalRead(gpio));
notifyClients(getOutputStates());
}
}
}
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,AwsEventType type,
void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_CONNECT:
Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
break;
case WS_EVT_DISCONNECT:
Serial.printf("WebSocket client #%u disconnected\n", client->id());
break;
case WS_EVT_DATA:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}
void initWebSocket() {
ws.onEvent(onEvent);
server.addHandler(&ws);
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// Set GPIOs as outputs
for (int i =0; isend(SPIFFS, "/index.html", "text/html",false);
});
server.serveStatic("/", SPIFFS, "/");
// Start ElegantOTA
AsyncElegantOTA.begin(&server);
// Start server
server.begin();
}
void loop() {
ws.cleanupClients();
}
КАК ОБНОВИТЬ ПРОШИВКУ?
- Создайте файл .bin из этого скетча.
- Введите IP-адрес ESP32, добавьте /update и загрузите новую прошивку.
Далее мы посмотрим, как загрузить файлы.
В папке проекта создайте папку с именем data и вставьте следующие файлы HTML, CSS и JavaScript (щелкните ссылки, чтобы загрузить файлы):
Чтобы найти папку своего проекта, вы можете просто перейти в Скетч > Показать папку скетча .
Вот где должна находиться ваша папка с данными и как она выглядит:
После этого, когда ESP32 отключен от вашего компьютера, загрузите скетч в ESP32
Вы получите сообщение об ошибке, потому что к вашему компьютеру не подключена плата ESP32.
Прокрутите окно отладки вверх, пока не найдете расположение файла .spiffs.bin. Это тот файл, который вы должны загрузить (в нашем случае файл называется Web_Server_OTA_ESP32_Example_2.spiffs.bin.)
И вот путь, по которому находится наш файл:
C:\Users\sarin\AppData\Local\Temp\arduino_build_675367\ Web_server_OTA_ESP32_Example_2.spiffs.bin
Чтобы получить доступ к этому файлу в компьютере, нужно сделать видимыми скрытые файлы (папка AppData не была видна).
Как только вы дойдете до расположения папки, вы найдете файл с расширением . spiffs.bin.
Чтобы упростить задачу, вы можете скопировать этот файл в папку своего проекта.
Теперь, когда у нас есть файл .bin из папки данных , мы можем загрузить этот файл. Перейдите по своему IP ESP32/update. Не забудьте выбрать параметр Filesystem.
Затем выберите файл с расширением .spiffs.bin.
После успешной загрузки нажмите кнопку «Back» и снова перейдите к корневому (/) URL.
Чтобы увидеть, как работает веб-сервер, вы можете подключить к ESP32 на GPIO 4 светодиода: 2, 4, 12 и 14.
Если вам нужно что-то обновить в своем проекте, вам просто нужно перейти на свой IP-адрес ESP32/update.
Поздравляю! Вы успешно загрузили файлы в файловую систему ESP32 с помощью AsyncElegantOTA.
Заключение
В этом руководстве вы узнали, как добавить возможности беспроводного обновления на веб-сервере с помощью библиотеки AsyncElegantOTA . Эта библиотека очень проста в использовании и позволяет без труда загружать новую прошивку или файлы в SPIFFS с помощью веб-страницы. На наш взгляд, библиотека AsyncElegantOTA – один из лучших вариантов для обработки веб-обновлений OTA.
