Общие сведения:
В этом проекте мы настроим Piranha ESP32 на подключение к существующей точке доступа WiFi, разместим Web-сайт внутри Piranha ESP32, воспользовавшись утилитой загрузки файлов и объявим mDNS имя сервера для доступа к локальному сайту по имени.
Для обновления сайта достаточно воспользоваться утилитой загрузки файлов на Piranha ESP32, при этом скетч проекта перекомпилировать и перезаписывать необязательно.
В данном проекте, после загрузки скетча и файлов и подключения к точке доступа WiFi, сайт будет доступен по адресу http://piranha.local. Это возможно благодаря серверу mDNS (Multicast DNS), библиотеку которого мы используем в скетче. Если по каким-то причинам mDNS не работает в локальной сети - то сайт может быть доступен по адресу, который выводится в последовательный порт сразу после подключения к точке WiFi.
Видео:
редактируется ...
Нам понадобится:
Подключение:
Скетч проекта:
Перед загрузкой скетча необходимо создать каталог data в каталоге со скетчем и загрузить его в память Piranha ESP32 (ссылка на статью по установке утилиты загрузки). В нём должны лежать файлы сайта. Для данного проекта используется два файла:
index.htmlimage.jpg
Файл index.html - простой файл HTML в котором указана ссылка на файл картинку image.jpg.
Содержание файла index.html:
<html><meta charset="UTF-8">
<body>
<img src="image.jpg"></img>
</body>
</html>Файл image.jpg может быть любой, но не должен быть больше 1 Мб в размере - ровно столько отведено в файловой системе ESP32 под пользовательские файлы.
Все файлы проекта можно скачать по ссылке.
Подробней о загрузке файлов в файловую систему ESP32 можно узнать в этой статье.
В скетче необходимо указать Ваши данные для Вашей точки доступа WiFi.
// Подключаем библиотеки
#include <WiFi.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <SPIFFS.h>
// Определяем название и пароль точки доступа
const char* ssid = "название_WiFi"; // Это поле нужно заполнить необходимыми данными
const char* password = "пароль_WiFi"; // Это поле нужно заполнить необходимыми данными
// Определяем имя сервера в сети
const char* host = "piranha";
// Создаём объект Веб-сервера
WebServer server(80);
// Определяем функцию ответа клиенту
void handleClient()
{
// При подключении клиента читаем корневой каталог
handleFileRead("/");
}
// Функция чтения файла
bool handleFileRead(String path)
{
// Если путь заканчивается на слеш -
if (path.endsWith("/"))
// добавляем к пути index.html
path += "index.html";
// Открываем файл для чтения по указанному пути
File file = SPIFFS.open(path, "r");
// Если файл не удалось открыть
if (!file) {
Serial.println("Ошибка. Файл не существует.");
// Отвечаем клиенту ошибкой
server.send(404, "text/plain", "FileNotFound");
// Возвращаемся из функции
return false;
}
// Отдаём клиенту содержимое файла
server.streamFile(file, "text/html");
// Закрываем файл
file.close();
// Возвращаемся из функции
return true;
}
void setup() {
// Инициируем объект файловой системы
SPIFFS.begin();
Serial.begin(115200);
Serial.println();
Serial.println("Инициируем WiFi");
// Инициируем WiFi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(100);
}
IPAddress myIP = WiFi.localIP();
// Инициируем Multicast DNS
MDNS.begin(host);
// Выводим IP-адрес Веб-сервера
Serial.print("IP-адрес: ");
Serial.println(myIP);
// Функция, выполняемая при подключении клиента к корневому каталогу
server.on("/", HTTP_GET, handleClient);
// Функция, которая будет выполнена, если файл не найден
server.onNotFound([]() {
// Если по указанному пути файл не найден...
if (!handleFileRead(server.uri())) {
// Отвечаем клиенту ошибкой 404
server.send(404, "text/plain", "FILE NOT FOUND");
}
});
// Инициируем сервер
server.begin();
Serial.println("Сервер запущен.");
}
void loop() {
// Библиотечная функция обработки клиента
server.handleClient();
// Даём процессору переключиться на другие задачи
delay(2);
}Ссылки
Комплект для повторения проекта
Что понадобится
Это быстрый ориентир по основным модулям и деталям. Полный список для повторения проекта смотрите в самой статье.
2 позиции
