в прошлом уроке, мы сделали гирлянду, управляемую через веб-сайт. Но на самом деле, для управления нужно вручную вбивать адрес, что не очень удобно. В этом уроке мы создадим и загрузим на наш контроллер полноценный веб-сайт.
Настройка IDE
Для того, что бы загружать статические файлы, а не скетч, необходимо установить дополнительный пакет - ESP8266 Sketch Data Uploader. Для его установки необходимо сделать следующее:
- Скачать модуль отсюда
- Открыть на компьютере папку со скетчами Arduino. Расположение этой папки можно узнать заглянув в Настройки Arduino IDE.
- Поместить скаченный модуль по такому пути: Папка скетчей/tools/ESP8266FS/tool/esp8266fs.jar
- Перезагрузить Arduino IDE
- Убедиться, что во вкладке Инструменты появилась строка - ESP8266 Sketch Data Upload
Создание веб сайта
Для того, что бы сделать веб-сайт, который одинаково (более-менее) отображается на различных устройствах: компьютерах, смартфонах, планшетах был придуман специальный фреймворк - Bootstrap.
Для удобства можно использовать онлайн-конструктор, Bootsnipp. С его помощью можно сделать веб-страницу просто перетаскивая элементы и располагая их так, как удобно!
Сделаем несколько форм с кнопками, для переключения режимов!
После этого, необходимо настроить нашу форму. Что значит настроить? При нажатии на кнопку Выбрать, форма отправляет на наш сервер значения всех полей. В прошлой статье, мы отправляли запрос на сервер, “руками”, вбивая нужные значения в качестве адреса. Теперь за нас это будет делать форма, но ей нужно указать, на какой адрес посылать запрос, а так же какие имена должны быть у переменных.
В нашем сервере, команды отправляются на адрес /post, а необходимое значение цвета передаётся в переменной color. В форме, за выбор цвета отвечают Radiobutton, значит важно во время их создания указать соответствующее Имя группы - color. Кроме этого - в коде формы, внутри тега form, необходимо добавить параметр action, равный “post” : <form class="form-horizontal" action="post">.
Для хранения нашей формы - создадим файл index.html. В репозитории этого проекта, можно увидеть пример такого файла.
Загружаем проект в контроллер.
Что бы загрузить какие-либо статические файлы в наш микроконтроллер с помощью ESP8266 Sketch Data Uploader, в папке с проектом необходимо создать директорию data и уже в неё помещать файлы.
В нашем проекте нам нужно два статических файла:
- index.html - основная страница нашего сайта
- bootstrap.min.css - в котором содержатся стили для отображения Bootstrap страниц
Кроме этого, надо настроить наш сервер, что бы он возвращал не просто сообщение, как было раньше, а нашу HTML-страницу.
Для этого, в проекте необходимо заменить request->send(200, "text/plain", "Color Updated"); на request->send(SPIFFS, "/index.html", String(), false);.
А для работы Bootstrap добавить отдельный путь:
server.on("/bootstrap.min.css", HTTP_GET, [](AsyncWebServerRequest *request) { request->send(SPIFFS, "/bootstrap.min.css", "text/css"); });
Загружаем наши файлы и модифицированный проект в контроллер.
Теперь, при подключении к нашей Wi-Fi сети, когда мы переходим по адресу 192.168.4.1 мы видим красивую веб-страницу, с которой удобно управлять нашей гирляндой.
Заключение
Теперь мы можем управлять нашей гирляндой с любого устройства. Полный исходный код можно найти в репозитории.
