Гирлянда управляемая через веб сайт. Часть 2

21 декабря 2019


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

Настройка IDE

Для того, что бы загружать статические файлы, а не скетч, необходимо установить дополнительный пакет - ESP8266 Sketch Data Uploader. Для его установки необходимо сделать следующее:

  1. Скачать модуль отсюда
  2. Открыть на компьютере папку со скетчами Arduino. Расположение этой папки можно узнать заглянув в Настройки Arduino IDE.
  3. Поместить скаченный модуль по такому пути: Папка скетчей/tools/ESP8266FS/tool/esp8266fs.jar
  4. Перезагрузить Arduino IDE
  5. Убедиться, что во вкладке Инструменты появилась строка - 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 мы видим красивую веб-страницу, с которой удобно управлять нашей гирляндой.


Заключение

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

Данная статья является собственностью Amperkot.ru. При перепечатке данного материала активная ссылка на первоисточник, не закрытая для индексации поисковыми системами, обязательна.

Поделиться: