Беспроводная загрузка кода на ESP32. Использование библиотеки AsyncElegantOTA в среде Arduino.
Беспроводная загрузка кода на ESP32. Использование библиотеки AsyncElegantOTA в среде Arduino. Создание файловой системы SPIFFS. Запуск Web сервера
Беспроводная загрузка кода на ESP32. Использование библиотеки AsyncElegantOTA в среде Arduino.
29.02.2024 в 12:25   845 0
Версия для печати

Беспроводная загрузка кода на 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 , выполните следующие действия:

  1. Установите библиотеки AsyncElegantOTA , AsyncTCP и ESPAsyncWebServer ;
  2. Подключите библиотеку AsyncElegantOTA в начале скетча Arduino: #include “AsyncElegantOTA.h”;
  3. Добавьте строку begin (&server) перед server.begin ();
  4. Откройте браузер и перейдите по адресу 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, если вы хотите загрузить новую прошивку.

Пример загрузки скетча

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

  1. Скопируйте следующий код в свою среду 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

    Output - GPIO 2

    state: %STATE%

    )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); }
    1. Сохраните свой скетч: Файл Сохранить как… и дайте ему имя. Для примера: Web_Server_LED_OTA_ESP32 .
    2. <Создайте .bin- файл из вашего скетча. Перейдите Скетч Экспорт бинарного файла. В папке проекта должен быть создан новый .bin- файл .

  1. Теперь вам нужно загрузить этот файл с помощью 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.



Источник: https://voltiq.ru/esp32-ota-over-the-air-arduino/
Материал также доступен на моем канале: Яндекс Дзен и в группе ВК
Категория: Обзоры библиотек | Добавил: :, (04.12.2022)
Просмотров: 845 | Теги: ElegantOTA, OTA, web сервер, ArduinoIDE, ESP32 | Рейтинг: 0.0/0
Поделиться:
Всего комментариев: 0
avatar