Урок 31. Wi-Fi. STA. HTTP Server. Параметры

 

 

 

Продолжаем работу с нашим сервером 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.

Файл мы данный создадим новый и для начала будет у него вот такое вот содержимое

 

 

У нас получится страничка с шестью кнопками. При нажатии на них будут теперь отправляться серверу соответствующие параметры. Если мы нашу страничку сейчас откроем в браузере, то получим вот такой вид

 

 

Мягко говоря, не очень презентабельно. Добавим кнопкам некоторый вид с помощью стилей, вставив соответствующий код вот сюда

 

 

Также добавим данный класс к кнопкам в форме

 

<input class="button1" style="color: #00ffff; background-color: #800000;" type="submit" name="red" value="RED OFF" />
<input class="button1" style="color: #00ffff; background-color: #ff0000;" type="submit" name="red" value="RED ON" />
<br/><br/>
<input class="button1" style="color: #ff00ff; background-color: #008000;" type="submit" name="green" value="GREEN OFF" />
<input class="button1" style="color: #ff00ff; background-color: #00ff00;" type="submit" name="green" value="GREEN ON" />
<br/><br/>
<input class="button1" style="color: #ffff00; background-color: #000080;" type="submit" name="blue" value="BLUE OFF" />
<input class="button1" style="color: #ffff00; background-color: #0000ff;" type="submit" name="blue" value="BLUE ON" />

 

Посмотрим теперь нашу страничку

 

 

Ну теперь получше. Кнопки также видоизменяются при наведении и нажатии на них.

Сохраним наш файл в раздел SPIFFS нашей платы. Как это делать, мы уже хорошо знаем.

Теперь продолжим работу с проектом.

В файле main.c в функции app_main настроим наши ножки портов и установим на них высокий уровень. Общий анод, как никак

 

 

В файле http.h подключим заголовочный файл для работы с GPIO

 

 

Перейдём в файл http.c и в функции download_get_handler объявим символьный указатель и переменную для размера

 

 

 

Узнаем, есть ли в запросе параметры. Если есть, то вернётся их размер, если нет, то ноль. Также выведем данный размер в терминал

 

 

Если параметры всё-таки есть, то запросим память под строку

 

 

Теперь запросим сами параметры. Если всё удачно, то объявим небольшой символьный массив

 

 

Если имя параметра red, то узнаем его значение и выведем в терминал, а также зажжём или погасим соответствующий кристалл светодиода

 

 

Аналогично поступим с другими цветами

 

 

Выйдем из цикла с запросом значения и очистим память

 

 

Вот, в принципе, и весь код. Всё просто, когда есть нормальная библиотека. Представьте, если бы мы парсили параметры самостоятельно. Кода получилось бы значительно больше.

Соберём код, прошьём контроллер, узнаем сетевой адрес платы в терминале и запросим нашу страничку в браузере

 

 

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

 

 

 

 

Также можем зажечь все кристаллы одновременно

 

 

Можем комбинировать по два разных кристалла

 

 

 

 

Засчёт автоматического цветобаланса (что видно из окрашивания платы в разные цвета) тяжело увидеть реальный цвет, но, тем не менее, самое главное, что наша задумка работает как надо. Мы можем со странички клиента управлять чем угодно на сервере.

Итак, на данном уроке мы научились в нашем сервере HTTP работать с параметрами, переданными клиентом. Понятно, что хочется передать клиенту обратно информацию о том, что его команда выполнена, но это позже, когда будем работать с запросами POST и при помощи AJAX получать в браузере клиента информацию от сервера и все результаты размещать в любом месте страницы, причём без её полной перезагрузки, что имеет место у нас в данном уроке.

Всем спасибо за внимание!

 

Данная статья в Дзен.

 

Предыдущий урок Программирование МК ESP32 Следующий урок

 

Исходный код

 

 

Недорогие отладочные платы ESP32 можно купить здесь:

На AliExpress Недорогие отладочные платы ESP32

На Яндекс.Маркет Недорогие отладочные платы ESP32

Логический анализатор 16 каналов можно приобрести (AliExpress) здесь

 

 

Смотреть ВИДЕОУРОК в YouTube (нажмите на картинку)

ESP32 Wi-Fi. STA. HTTP Server. Параметры

 

Смотреть ВИДЕОУРОК в Дзен (нажмите на картинку)

ESP32 Wi-Fi. STA. HTTP Server. Параметры

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*