Продолжаем работу с нашим сервером HTTP и на данном уроке мы попробуем что-нибудь ему передать из браузера. Тем самым мы нашу плату как-то оживим, заставим, так сказать, откликаться на какие-то внешние команды.
Мы подключим к плате светодиод RGB и будем со странички кнопками управлять его отдельными кристаллами — зажигать их и гасить. Пока для этого мы будем использовать GET-запросы. Обычно целесообразнее использовать запросы POST, которые передают информацию, невидимую в строке браузера, но мы пойдём от простого к сложного.
Таким образом, схема нашего урока будет состоять из отладочной платы с контроллером ESP32 и RGB-светодиода, подключенного через токоограничивающие резисторы номиналом 220 Ом к ножкам порта контроллера 21, 22 и 23. Общий провод светодиода я подключил к ножке питания 3,3 вольта платы, так как у меня светодиод с общим анодом. Если у кого-то он с общим катодом, то подключается общий провод светодиода, соответственно, к общему проводу платы.
Итак, вот наша схема
Подключим нашу плату к порту USB компьютера.
А так как мы также контент для передачи клиента будем располагать в файловой системе SPIFFS, то проект был сделан из проекта прошлого урока с именем WIFI_STA_HTTP_SERVER_SPIFFS и получил новое имя WIFI_STA_HTTP_SERVER_PARAM.
Откроем наш проект в Espressif IDE и добавим для наших светодиодов новые пункты в меню в файле Kconfig.projbuild после пункта LED_GPIO
Соберём проект и убедимся, что новые пункты появились, заодно и логин с паролем впишем, если у кого неправильный
Пока ненадолго оставим наш проект и займёмся файлом страницы нашего клиента index.html.
Файл мы данный создадим новый и для начала будет у него вот такое вот содержимое
У нас получится страничка с шестью кнопками. При нажатии на них будут теперь отправляться серверу соответствующие параметры. Если мы нашу страничку сейчас откроем в браузере, то получим вот такой вид
Мягко говоря, не очень презентабельно. Добавим кнопкам некоторый вид с помощью стилей, вставив соответствующий код вот сюда
Также добавим данный класс к кнопкам в форме
Посмотрим теперь нашу страничку
Ну теперь получше. Кнопки также видоизменяются при наведении и нажатии на них.
Сохраним наш файл в раздел SPIFFS нашей платы. Как это делать, мы уже хорошо знаем.
Теперь продолжим работу с проектом.
В файле main.c в функции app_main настроим наши ножки портов и установим на них высокий уровень. Общий анод, как никак
В файле http.h подключим заголовочный файл для работы с GPIO
Перейдём в файл http.c и в функции download_get_handler объявим символьный указатель и переменную для размера
Узнаем, есть ли в запросе параметры. Если есть, то вернётся их размер, если нет, то ноль. Также выведем данный размер в терминал
Если параметры всё-таки есть, то запросим память под строку
Теперь запросим сами параметры. Если всё удачно, то объявим небольшой символьный массив
Если имя параметра red, то узнаем его значение и выведем в терминал, а также зажжём или погасим соответствующий кристалл светодиода
Аналогично поступим с другими цветами
Выйдем из цикла с запросом значения и очистим память
Вот, в принципе, и весь код. Всё просто, когда есть нормальная библиотека. Представьте, если бы мы парсили параметры самостоятельно. Кода получилось бы значительно больше.
Соберём код, прошьём контроллер, узнаем сетевой адрес платы в терминале и запросим нашу страничку в браузере
Мы получили ту же самую страничку, но уже с иконкой. Попробуем понажимать наши кнопочки, поочерёдно включая и отключая кристаллы различного цвета
Также можем зажечь все кристаллы одновременно
Можем комбинировать по два разных кристалла
Засчёт автоматического цветобаланса (что видно из окрашивания платы в разные цвета) тяжело увидеть реальный цвет, но, тем не менее, самое главное, что наша задумка работает как надо. Мы можем со странички клиента управлять чем угодно на сервере.
Итак, на данном уроке мы научились в нашем сервере HTTP работать с параметрами, переданными клиентом. Понятно, что хочется передать клиенту обратно информацию о том, что его команда выполнена, но это позже, когда будем работать с запросами POST и при помощи AJAX получать в браузере клиента информацию от сервера и все результаты размещать в любом месте страницы, причём без её полной перезагрузки, что имеет место у нас в данном уроке.
Всем спасибо за внимание!
Оригинал статьи находится здесь.
<<Предыдущий урок | Следующий урок>>
Утилита для работы с файловой системой SPIFFS: mkspiffs
Недорогие отладочные платы ESP32 можно купить здесь
Недорогие отладочные платы ESP32/ESP32-C3/ESP32-S3 можно купить здесь
Логический анализатор 16 каналов можно приобрести здесь
Многофункциональный переходник CJMCU FT232H USB к JTAG UART FIFO SPI I2C можно купить здесь
Видео в Rutube
Видео в Дзен
Видео в Youtube