Esp8266 web интерфейс для настройки wifi
Обновлено: 04.07.2024
Используйте мой код как шаблон для своих проектов на esp8266 и esp32.
Фреймворк поможет вам использовать конфигурационный файл и веб интерфейс.
В качестве среды разработки я настоятельно рекомендую использовать PlatformIO, но можно использовать Arduino IDE
Для начала работы необходимо создать параметры, которые в последующем будут настраиваться с помощью веб интерфейса. Параметр на самом деле представляет из себя json объект. Следующие манипуляции производятся в файле ‘html.h’
Создать новый параметр:
create_param( String Name , String Value )
Веб интерфейс создается с помощью простых методов:
input_text( String id , String name , String type , String placeholder , String title )
‘id‘, ‘name‘, ‘type‘, ‘placeholder‘, ‘title‘ – аналогичны тем, что вы использовали бы в HTML
‘text‘ – ввод текста
‘numbet‘ – ввод только цифр
‘date‘ – ввод даты
‘time‘ – ввод времени
в качестве ‘id‘ укажите созданный ранее параметр с помощью create_param
input_range( String id , String name , int min , int max , String title )
‘min‘ и ‘max‘ – минимальное и максимальное значение ползунка
в качестве ‘id‘ укажите созданный ранее параметр с помощью create_param
select_elements( String value , String title )
создает элемент выпадающего списка.
input_select( String id , String name , bool refresh , String title)
‘refresh‘ – если true, страница будет обновлена сразу после выбора элемента
в качестве ‘id‘ укажите созданный ранее параметр с помощью create_param
button_save( String title , int color )
Создает кнопку отправки данных формы
‘color‘ – цвет кнопки, соответствует цветам Bootstrap
button_reboot( String title , int color )
Создает кнопку перезагрузки устройства (иногда это нужно, чтобы настройки вступили в силу)
alert( int color , String strong , String text , bool close )
Создает элемент, соответствующий ‘alert‘ HTML
‘strong‘ – Текст с выделением
‘close‘ – если true – буде возможность закрыть элемент
border( String title )
начинает и заканчивает границу.
Чтобы начать границу ‘title‘ должен быть не пустым,
Чтобы закончить границу ‘title‘ должен быть = “”.
Arduino & Pi
1.1K поста 18.1K подписчиков
Правила сообщества
В нашем сообществе запрещается:
• Добавлять посты не относящиеся к тематике сообщества, либо не несущие какой-либо полезной нагрузки (флуд)
• Задавать очевидные вопросы в виде постов, не воспользовавшись перед этим поиском
• Рассуждать на темы политики
Не понимаю, нахрена такие сложности.
Толи лыжи не едут, толи еще чего. Но под ESP32 компилится, а под 8266 нет.
Есть кто может код написать на заказ? Удаленно мощность мониторить надоу меня проблема= после заливки в чип ESP32 на плате ttgo-lora32-v1 ребутиться все время и вон че пишет ===
ets Jun 8 2016 00:22:57
rst:0xc (SW_CPU_RESET),boot:0x17 (SPI_FAST_FLASH_BOOT)
configsip: 0, SPIWP:0xee
mode:DIO, clock div:2
Failed to open config file
Load default Config
JSON config loaded
Backtrace: 0x4008c7e0:0x3ffb1d90 0x4008ca11:0x3ffb1db0 0x4008937d:0x3ffb1dd0 0x4010ea0a:0x3ffb1e10 0x4010ece6:0x3ffb1e30 0x400fede4:0x3ffb1e50 0x400fee4d:0x3ffb1e70 0x40101a8c:0x3ffb1e90 0x40101b78:0x3ffb1ec0 0x4012c3db:0x3ffb1ee0 0x400d9e1e:0x3ffb1f30 0x400d4ef7:0x3ffb1f50 0x400d4f26:0x3ffb1f80 0x400dba73:0x3ffb1fb0 0x4008877d:0x3ffb1fd0
че с этим делать?
Подскажите, как в вашем фреймворке выводить показания датчика температуры в реальном времени на страницу? Чтобы оно само обновлялось. Или это пока не возможно?
Дополняю = справился - из последнего видео, там кнопку кликнуть (про файловую систему какуюто) и потом все заработало
Подпишусь. Есть действующие проекты в которых тебя не хватает. Ждём'с ота и прочие плюшкиСохранил это полезно. Спасибо.
Исходные материалы данного урока тут.
На основе полученных данных можно сделать более интересные вещи.
- Веб-сервер ESP32 (ESP8266) в среде Arduino IDE
Исходные материалы данного урока тут.
- Подключаем DHT11, DHT22 к ESP32, ESP8266. Выводим показание на веб-странице.
Исходные материалы данного урока тут.
- ESP32 и ESP8266 выводим статус на веб страницу и на OLED дисплей
Исходные материалы данного урока тут.
Надеюсь моя информация будет полезной.
Спасибо! Всем добра!
Esp8266 нужен совет
Прошу совета у ардуинщиков и еспешников.
Второй год занимаюсь с соседскими детьми Ардуинками частным образом. Дети от 6 до 9 класса. Ребята уже соображают лучше меня.
В основном собирают метеоприборы, но есть и другое. Работаем с уно, нано, мега. В прошлом году закупил esp32 и esp8266. Несколько esp32 использовали для светодиодных матриц 2812b. Другие для сбора данных с датчиков bme280, 1750, uv и других. Через телефон или на дисплей. Короче все работало по sda и scl.
Этим летом разобрали большинство собранных устройств, начали собирать другие. И вот тут столкнулись с проблемой.
Релюшки управляемые нулем и единицей отказываются переключаться от esp8266 и d1 mini. От есп32, меги, уно, нано работают.
Для проверки подключили адресные матрицы. Результат ноль. Сажали рабочии светодиоды через резисторы на землю - не управляются.
Даже самый примитивный код типа:
void setup() <
pinMode(13, OUTPUT);
>
void loop() digitalWrite(13, HIGH);
delay(1000);
digitalWrite(13, LOW);
delay(1000);
>
не работает. На еsp8266 нумерация gpio не совпадает с d или пином. Проверяли разные номера. Подключали к разным пинам. Например, ставили пин 4, цепляли рабочий светодиод ко всем выводам, кроме питания и земли поочередно. Ставили принтлайн, в мониторе порта показывается переключение.
Несколько детей и я ищем решение по тематическим форумам. Везде указывают на несоответствие gpio нумерации и нумерации пинов. Например gpio2 это пин 4.
Контроллеры и датчики через i2c работают отлично. А вот на пинах пусто.
Проблема еще в том, что сейчас нано, уно подорожали сильно. Закупил для ребят с Али больше 10 esp8266 версии 340 (у меня 2101).
Ребята получат контроллеры, которыми не смогут выдавать сигналы на пины.
Куда копать, как заставить esp8266 менять состояние пинов? Вернеее не так. Как определить какой именно номер d будет переключаться по команде на пин 2?
Плату в АрдуиноИДЕ версии 1.8.5 я выбираю правильно. Порт и скорост так же.
Скоро мы увидим новый модуль ESP32
Осенью 2015 года китайская фирма Espressif представила новый WI-FI чип ESP32 - замена популярному WI-FI чипу ESP8266 . Новый чип имеет больше GPIO , Имеет поддержку 16 АЦП.
Информация по чипу пока собирается. Массовое начало продаж модулей на базе этого чипа запланировано на февраль 2016 года. Цену обещают чуть выше, чем у ESP8266, но думаю китайцы на Aliexpress выгоды не упустят и цена сначала будет завышена.
Компания Espressif не перестаёт радовать энтузиастов. Пару лет назад они выпустили шикарный чип с маркировкой ESP8266, и тогда это был прорыв, ведь всего за пару баксов в рознице можно было купить готовый модуль с данным чипом вместе с флешкой на 1мб. И если до этого кому-нибудь нужно было добавить к ардуине возможность общаться с внешним миром через WiFi, то приходилось покупать модули ценой от $15 и функционалом уровня UART-WiFI моста, то теперь в большинстве случаев отпала необходимость в самой ардуине (читать - микроконтроллере). Ведь ESP8266 представлял из себя систему-на-чипе с интегрированным радио-модулем, поддерживающим работу с WiFi b/g/n. Кроме того, что модуль мог подключаться к точкам доступа, он и сам мог работать в режиме точки доступа, что в теории позволяло создать mesh сеть из данных модулей.
Есть подозрения что в ESP32 будет интерфейс CAN .
Видео длинное, так как была прямая трансляция.
Кроме возможности работы с WiFi данный чип предоставлял 13 GPIO выводов с аппаратной поддержкой SDIO, SPI, I2C, UART, PWM, плюс одноканальный АЦП. А так же поддерживал режим сна с потреблением до 1мА в режиме поддержания связи с точной доступа (не передачи данных, а поддержание канала связи для возможности пробуждения и отправки данных менее, чем за 22мс) и 60мкА в режиме глубокого сна с пробуждением по таймеру. Энтузиасты быстро портировали nodelua и ардуину под данный чип, китайцы не заставили долго ждать, и выпустили пачку различных план для встраиваемой автоматики с поддержкой данного модуля.
Но не обошлось и без минусов. По какой-то причине Espressif не дали разработчикам доступ к спецификациям и SDK самого чипа, вместо этого они написали свою обёртку над системными вызовами чипа, упаковали это в бинарные блобы с экспортированными функциями, которые и могли использовать разработчики. И всё было бы ничего, но данные блобы кишили ошибками, а по большей части экспортированных из них функций попросту не было документации и заголовочных файлов (для I2S, насколько я знаю, до сих пор нет). Но за такую цену энтузиасты не отчаивались, дизассемблировали блобы, восстанавливая по ним заголовочные файлы, патчили баги прямо в бинарных файлах. В общем было весело.
Но вот недавно Espressif анонсировали новую версию своего чипа - ESP32, на этот раз обещают два ядра, два гига, поддержку HT40 (ширина канала 40МГц, скорость до 144Мбит), поддержку Bluetooth 4.2 (BLE), размер оперативной памяти увеличили до 400Кб, в режиме глубокого сна появилась возможность использовать АЦП с триггером по пороговым значениям, как и раньше аппаратно поддерживаются I2C, I2S, UART, SPI, SDIO, PWM, так же появилась аппаратная поддержка AES и SSL, хотя обычно разработчики встраиваемых систем думают о безопасности в последнюю очередь. Так же количество GPIO увеличено до 35, из них 16 могут работать в режиме АЦП, два как ЦАП, остальные могут быть сконфигурированы для подключения периферии по перечисленным выше интерфейсам, ровно как использоваться в качестве ёмкостных датчиков прикосновения, или просто для моргания светодиодами. Более полную информацию о спецификациях нового чипа можно почитать на страничке Espressif ESP32 (ESP31B) Specifications.
Звучит круто, но есть нюанс. Когда анонсировали ESP8266, то тоже было много обещаний, но на деле оказалось, что большая часть функционала просто не тестировалась, что-то совсем не работает, а где-то нужно городить костыли. Тем ни менее это был крутой чип, хотя бы из-за цены. Цену на новый ESP32 пока что не сообщают, и на данный момент разосланы только 200 тестовых экземпляров, один из которых мы сейчас и запустим.
В ESP32 отсутствует отдельный пин Reset, вместо него для сброса можно использовать Enable. Пин Enable болтается в воздухе, поэтому если его никуда не подключить, то чип будет беспорядочно включаться и выключаться. При логической единице на данном пине чип включается, при логическом нуле выключается. Для тестового включения достаточно подключить питание (3.3В на 3V3, землю на GND) и подключить EN к VCC. К сожалению, на плате отсутствуют какие-либо статусные светодиоды, но если всё сделано правильно, то через несколько секунд должна появиться WiFi точка с именем ESP32_AP_94000000. Пароль от неё пока неизвестен(
Технические характеристики:
Процессор: двухядерный Tensilica L108 частотой до 160 MHz.
Поддерживаемые стандарты WI-FI: 802.11 b / g / n.
Поддерживаемы типы шифрования:WEP, WPA, WPA2.
Поддерживаемые режимы работы: Клиент(STA), Точка доступа(AP), Клиент+Точка доступа(STA+AP).
Поддержка Bluetooth Low Energy and Classic.
Напряжение питания 3.3в (?)
Количество GPIO: 33 (?)
Внешняя Flash память размером 512кб.
RAM данных 144 кб, RAM инструкций -128 кб.
Интерфейсы: 16 ADC, 2 DAC, I2C. UART, SPI, SDIO, I2S, RMII, PWM.
Поддержка AES и SSL на аппаратном уровне.
Информация выше может быть не точной.
Программирование модуля
esptool32.py для прошивки модуля.
Для режима прошивки необходимо подтянуть GPIO 2 и 0 к GND. GPIO 5 к +VDD (непотверждено)
Вывод в консоль будет примерно следующий:
ets Jul 5 2015,rst cause:1, boot mode:(33)
_stack_sentry: 0x3fffe1d0, __stack: 0x40000000,
_bss_start: 0x3fffcd48, _bss_end: 0x3fffe1d0,
_data_start: 0x3fffc000, _data_end: 0x3fffc864
load 0x40040000, len 2912, room 16
chksum 0x6e
load 0x3ffd8000, len 1424, room 8
chksum 0x1a
load 0x3ffd8590, len 568, room 0
chksum 0xf3
* hello espressif ESP32! *
* pro cpu 2nd boot is running! *
2nd boot version : 1.0
SPI Speed : 40MHz
SPI Mode : DIO
SPI Flash Size : 1MB
jump to run addr @ 0x40000
rc_cal: rc=44, wifi: 73, 73, 28, 28, bt: 98, 98
txcap: 15, 5, 3, 15, 6, 3, 15, 5, 3, 15, 5, 3,
vdd33=2328, -13; temp_code=120
0x5f, 0x120, 58
0x1f, 0x120, 1
tx_pwctrl:6, 11, 16, 22, 26, 37, -1, 12, 17, 23, 30, 40, -10, 13, 17, 27, 31, 40, -16, 5, 10, 18, 24, 34,
tx_backoff:1, 5, 10, 10,
txiq: 0, 36, 4, 0, -3
txiq: 1, 36, 4, 0, -1
txiq: 2, 4, 4, 0, -2
tx_gain: pa=0x1f, bbc=0x20, bbf=0x4
bt: pa=0x10, bb=0,40
11606945, rxiq: amp=6, pha=4
12032391, rxiq: amp=4, pha=5
11197885, rxiq: amp=4, pha=7
16308699, rxiq: amp=8, pha=3
14541077, rxiq: amp=6, pha=2
13258235, rxiq: amp=5, pha=3
phy, 20151218, 722
pp_task_hdl : 3ffe4af4, prio:23, stack:512
tcpip_task_hdl : 3ffe54e4, prio:20,stack:512
frc2_timer_task_hdl:3ffe8f2c, prio:22, stack:512
ESP32 RTOS SDK: 1.0.0(0394de4) compiled @ Nov 20 2015 18:57:56
SDK version2015121218:1.0.0(0394de4)
[esp32_packet_softap_ssid,43]wifi mode:60 01 94 00 00 00
[esp32_packet_softap_ssid,47]packet ssid[ESP32_AP_94000000]
[esp32_udata_init,66]ok to run AP+STA mode
Start app OK!
mode : sta(60:01:94:00:00:00) + softAP(62:01:94:00:00:00)
dhcp server start:(ip:192.168.4.1,mask:255.255.255.0,gw:192.168.4.1)
WiFi модули на базе микроконтроллера ESP8266 имеют достаточно интересный функционал, включая возможность использовать WiFi. Это позволяет использовать их в различных домашних устройствах. Создание Web-интерфейса для таких устройств - наиболее привлекательная, но не всегда простая тема. В этой статье рассматриваются примеры создания web-интерфейса для ESP8266 под framework NodeMCU на языке LUA. В примерах от простого к сложному ознакомимся с преимуществами ESP8266 и научимся бороться с его недостатками. Главный недостаток ESP8266, особенно при построение web-интерфейса, это конечный объем оперативной памяти. Этого можно не заметить при создании простых приложений, но при решении более сложных задач Вы неизбежно столкнетесь с недостатком памяти. Надеюсь, эта статья поможет обойти подобные проблемы.
Такое количество модулей не обязательно. Эта сборка использовалачь для примеров к другим статьям. Необходимые модули: file, net, sjson, websocket, wifi.
Пример №1 (динамическая страница)
Для того, чтобы реализовать web-интерфейс, нам надо сделать свой крохотный web-сервер. B мы начнем с самого простого примера. NodeMCU позволяет создавать TCP сервер оной командой. Далее мы подключаем слушателя на нужный нам порт. В нашем случае порт 80. Это стандартный порт для HTTP протокола. Указываем какие функции вызывать при возникновении событий. Доступны такие события: "connection" - подключение, "reconnection" — повторное подключение, "disconnection" - отключение, "receive" - получение данных, "sent"- завершение отправки данных. Нас не особо интересует момент подключения. Нам интересен запрос который отправляет браузер уже после подключения. Поэтому, на подключение и отключение ничего не вешаем, обрабатываем только получение данных.
Т.е., в простейшем объяснении, диалог между веб сервером и браузером происходит так: Браузер подключается к серверу (наш модуль) на порт 80, отправляет запрос (структуру запроса рассмотрим позже). Сервер обрабатывает запрос и отправляет ответ браузеру, после чего разрывает соединение. Обратите внимание, соединение разрывает сервер после отправки всех данных.
Примечание: для решения некоторых задач соединение между сервером и браузером может не разрываться. Но этот вариант работы в статье не рассматривается.
Первый, простейший пример web-сервера, ожидает запрос от браузера, причем сам запрос не анализируется. После поучения любого запроса генерирует и отправляет HTML страницу. В страницу вставлен счетчик таймера. Вместо таймера можно вставить переменную, скажем значение датчика температуры, и таким образом получаем простейший web-интерфейс с полезным содержимым.
Внимание! Перед запуском примеров нужно отредактировать и затем запустить скрипт wifi.lua. В этом файле следует описать настройки подключения к Вашей локальной Wi-Fi сети. Модуль ESP после подключения к Вашей локальной Wi-Fi сети должен получить IP адрес. В примерах используется 192.168.0.108, у Вас будет другой. Узнать IP адрес можно командой:
В примере вставлена команда вывода в консоль текста запроса полученного от браузера. Его анализом мы займемся чуть позже. Сам запрос выглядит примерно следующим образом:
Пример №2 (статическая страница)
Иногда требуется получить статическую страницу (картинку, файл стилей, Java-скрипт, и т.п.), а не генерировать динамически скриптом. NodeMCU имеет простую файловую систему, что позволяет записать файл, скажем index.html, и отдавать его браузеру при запросе. Это мы и сделаем во втором примере.
Пример №3 (слишком большой файл)
Теперь попробуем сделать файл побольше размером и получим проблему о котором я говорил в самом начале - память в микроконтроллере имеет конечный объем и этот объем не очень большой. Система не может прочитать слишком большой файл. Мы увидим лишь часть файла. Аналогичная ситуация будет при динамической генерации страницы большого объема.
Мы видим часть файла, на самом деле в нем более 40 строк.
Пример №3 (слишком большой объем данных)
Пример №5 (отправка данных частями)
Обойти проблему нехватки памяти можно отправляя данные (страницы или файла) частями. Сделаем массив и будем отправлять построчно.
Все данные (все 40 строк) успешно отправлены.
Пример №6 (отправка файла частями)
Отправка файла частями выполняется следующим образом. Сервер открывает файл, считывает небольшую часть файла и ставит ее на отправку. После того, как первая часть будет отправлена, сервер считывает и ставит на отправку следующую порцию, и так пока файл ее будет полностью отправлен. После отправки последней порции сервер закрывает файл и закрывает соединение с клиентом (браузером). Поскольку процедура отправки файла занимает относительно большое время, в течении которого микроконтроллеру нужно заниматься другим текущими делами, мы не можем просто ожидать окончания отправки кусочка файла, поэтому используем события.
Весь файл large.html успешно получен браузером.
Пример №7 (многопоточность, CGI, метод GET)
Примечание: Рекомендую посмотреть что прилетает в запросе. Из всего увиденного нас будет интересовать URL и данные, которые приходят GET и POST методом. Пока научимся извлекать URL и параметры GET запроса.
Этот пример может загружать разные файлы в зависимости от URL, принимать и разбирать параметры GET запроса. Запускать lua скрипты в качестве cgi скриптов. Вот теперь сервер сможет параллельно обрабатывать запросы. Однако и это не решает всех проблем. Если запросов будет слишком много у контроллера все равно рано или поздно закончиться память. Как можно отодвинуть этот рубеж?
- Уменьшит буфер чтения из файла. Так можно увеличить количество потоков, которые сервер сможет обработать. Но тем самым мы увеличиваем количество операций чтения с flash памяти и немного увеличиваем время отправки данных.
- Стараться строить web-интерфейс таким образом, чтобы не выполнялось много одновременных загрузок. Например не вставлять много картинок в HTML. По возможности картинки, скрипты, стили Java скрипты располагать на внешних сайтах. Так же можно доработать скрипт нашего сервера и ввести ограничение на количество одновременно обрабатываемых запросов. И если количество обрабатываемых запросов выше допустимого, просто игнорировать новые запросы. Это опять же не решит всех проблем, что-то не загрузится, но хотя бы предотвратит перезагрузку NodeMCU.
Кроме того, добавлена возможность запуска lua файлов. На примере рассмотрим как это работает.
CGI. Работа с параметрами GET
Скрипт возвращает значение параметра name, переданного в адресной строке. Как видите, доступ к переменным сделан через массив GET[]. Наш "web-сервер" подготавливает этот массив перед тем как запустить скрипт. Таким образом, можно принимать параметры переданные в URL, обрабатывать их в Вашем скрипте и формировать ответ в соответствии с запрошенными параметрами.
К сожалению, таким образом не получится формировать ответы значительного объема из за описанной ранее проблемы с конечным объемом памяти. Кроме того, такой подход кроет в себе проблему с безопасностью. Через URL теперь можно запустить любой lua скрипт, который есть на файловой системе NodeMCU. В статье я буду и далее использовать файлы с расширением lua, но Вам рекомендую для файлов, которые будут использованы для запуска из под нашего web сервера, использовать другое расширение. Они все равно будут исполнятся, но таким образом Вы сможете разграничить lua-файлы для внутренней работы и файлы с другим расширением для web-интерфейса. И решить вопросы с безопасносью, используя ранее описанный прием с разрешенными расширениями файлов.
Пример №8 (метод POST)
Передача данных методом POST. Этот метод часто используется при отправки данных html-форм. В файле web8.lua реализован разбор параметров приходящих на web-сервер методом POST.
Пример №9 (JSON)
Этот пример не использует "web-сервер", а демонстрирует работу с JSON, приемы передачи, обработка и хранение данных. Необходимо залить и выполнить скрипт json_test.lua
В результате работы скрипта был создан файл settings.json, в который записывались а затем считывались данные. Содержимое файла следующее:
Пример №10 (JSON & AJAX)
Теперь рассмотрим передачу данных с использованием JSON. Сделаем скрипт для нашего web-сервера, который будет формировать JSON и отдавать при запросе браузера: см. файл: get_json.lua
См. скрипт get_json.lua:
В этом файле сделано периодическое обновление данных на HTML странице без перезагрузки всей страницы.
Пример №11 (AngularJS)
В последнее время для сокращения времени разработки больших проектов стали использовать различные Framework-и, все реже пишут на чистом JavaScript.
Пример №12 (JSON + Форма)
Рассмотрим пример более приближенный к практике. У нас есть форма в которой, нужно изменять и сохранять данные. Данные, разумеется, будут сохранятся в файле на файловой системе NodeMCU в виде JSON файла. При открытии ссылки http://1092.168.0.104/form2.html JavaScript запросит файл settings.json, разберет данные и заполнит поля формы. После редактирования данных и нажатия кнопки "Submit" данные будут отправлены скрипту post2.lua методом POST:
Скрипт преобразует данные в строку JSON и сохранит в файл settings.json. Круг замкнулся.
Пример №13 (JSON + Форма + AngularJS)
Теперь сделаем тоже самое, но средствами AngularJS. Данные теперь отправляются скрипту post_json.lua. Обратите внимание, что все данные формы преобразуются в JSON строку, которая отправляется POST методом в единственном параметре data. Скрипт post_json.lua:
Поскольку перезагрузка страницы с формой не предполагается, скрипт возаращает ответ, чтобы можно было сообщить пользователю результат выполнения операции.
Предыдущий пост, посвящённый связке FLProg и ESP8266, был обзорным, а теперь рассмотрим работу в программе с этим контроллером более подробно.
Как и для ардуино, работа над проектом начинается с выбора контроллера. В отличие от предыдущих версий, для удобства пользователей контроллеры были перенесены в древовидную структуру папок.
При выборе конкретного контроллера или платы можно посмотреть его изображение, распиновку, а так же технические характеристики.
Основная работа при создании web интерфейса настройки производится в дереве проекта.
Для начала настроим точку доступа.
Раскрываем дерево проекта до пункта “Точка доступа” включительно и двойным кликом по ветке “Отключён” включаем точку доступа в работу.
В открывшихся ветках настраиваем параметры точки доступа. Для изменения необходимого параметра производим двойной клик на соответствующей ветке.
Имя сети (SSID) – Имя сети которую будет организовывать точка доступа.
Пароль для подключения – пароль для подключения к точке доступа. Если оставить пустым, то точка доступа будет без пароля со свободным подключением.
IP адрес – IP адрес который будет иметь контроллер в сети созданным точкой доступа. По этому адресу потом можно будет подключиться к контроллеру.
Остальные параметры (Маска подсети и Сетевой шлюз) заполнятся автоматически после установки IP адреса, но при необходимости их можно изменить, если требуются нестандартные значения.
В результате должно получиться, что то подобное.
С точкой доступа закончили, можем свернуть этот узел, и переходим к клиенту. Так же разворачиваем его узел, и включаем его в работу двойным кликом по ветке “Отключён”
Настраиваем клиента. Возможны два варианта настройки клиента. Непосредственное задание настроек сети, и получение настроек по DHCP. Для начала используем второй вариант.
Обратите внимание, что в целях безопасности пароль подключения в дереве проекта не показывается.
С настройкой Wi-Fi интерфейсов закончили. Сворачиваем (если нужно) узел клиента и переходим к настройке режима обновления прошивки по Wi-Fi (если это требуется). Данный узел появляется только при включённом в работу клиенте.
Включаем этот режим двойным кликом по ветке “Отключён”
Задаём необходимые параметры (изменение значения параметров производится с помощью двойного клика на соответствующей ветке).
Пароль – при задании пароля перед заливкой новой прошивки потребуется его ввод.
Имя устройства – Это имя будет фигурировать в названии порта соединения в Arduino IDE.
Подробнее о режиме Arduino OTA можно почитать здесь.
Теперь переходим непосредственно к созданию web интерфейса настройки. Открываем узел “Web интерфейс настройки” и включаем его двойным кликом по ветке “Отключён”
Web интерфейс настроек представляет собой набор страниц с параметрами. Если страниц более одной, автоматически формируется меню для доступа к ним. Для каждой страницы можно задать собственные стили CSS, если использовать общие стили для всего Web интерфейса настройки.
Для настройки общих стилей CSS для всего web интерфейса совершаем двойной клик по ветке «Общий стиль»
Откроется окно настроек общего стиля.
На закладке «Описание стилей» находится поле ввода непосредственно описания стилей применяемых для всех страниц настройки. По умолчанию это поле уже заполнено стилями для создания стандартного интерфейса. Но если есть желание изменить дизайн страниц, то можно их изменить.
На закладке «Стили» можно задать названия стилей используемых для конкретных элементов страницы.
Эта закладка так же заполнена по умолчанию.
На закладке «Тексты» можно ввести тексты основных элементов используемых на странице.
Для восстановления всех значений данного диалога значениями по умолчанию, можно воспользоваться кнопкой «По умолчанию».
По умолчанию всегда присутствует одна страница. Раскрыв её узел, получаем доступ к её настройкам.
Адрес главной страницы – адрес основной страницы настроек. По умолчанию – host – то есть адрес контроллера в сети. При необходимости можно сменить. Сменим его на адрес host/setting (двойной клик по данной ветке).
Имя страницы – название страницы в меню. Оставим ей название – "Главная"
Стиль страницы — двойной клик по данной ветке вызывает диалог настройки стиля для конкретно этой страницы.
В этом диалоге можно дописать дополнительные стили CSS для данной страницы и назначить стили и тексты для элементов дизайна. Так же можно переопреописать стили, описанные в диалоге общих стилей.
В узле “Параметры” задаются параметры, отображаемые на странице. На главной странице мы зададим отображение IP адреса полученного от роутера по DHCP в виде простого текста. Параметр добавляется с помощью двойного клика по ветке «Добавить параметр»
Открывается диалог создания нового параметра. В нём для начала нажимаем кнопку выбора системного параметра.
Откроется список доступных системных параметров. Выбираем параметр “Wi-Fi клиент – IP адрес”.
В поле надписи вводим текст лейблы для этого параметра, а в поле тип параметра выберем значение “Текст”
После создания параметра появится новый узел дерева проекта, в котором можно настроить стиль для данного параметра, изменить настройки параметра или удалить его.
Узлы «Кнопка “Save”» и «Кнопка “Reset”» задают наличие кнопок сохранения данных и перезагрузки контроллера на странице. Поскольку никаких изменяемых данных на главной странице у нас нет, отключим эти кнопки на странице двойным кликом на ветке «Используется» (по умолчанию кнопки присутствуют на странице).
Добавим новую страницу двойным кликом по ветке «Добавить страницу»
Откроется диалог создания новой страницы. В нём заполним имя страницы (как она будет называться в меню интерфейса настройки) и адрес. Адреса вспомогательных страниц всегда продолжают адрес главной страницы. На данной странице мы будем настраивать параметры точки доступа.
Так же как и для главной, в узле новой страницы можно поменять адрес страницы, имя, настроить стили для конкретно этой страницы, задать отображаемые параметры и наличие кнопок. Ну и дополнительно есть возможность удаления страницы.
Добавим на страницу параметр “Wi-Fi точка доступа – имя сети (SSID)”
И выберем для него тип «Поле ввода» и лейблу «Имя сети»
Таким же образом добавим остальные параметры точки доступа.
Если параметров на странице более одного в узлах параметров появляются ветки позволяющие изменить порядок вывода параметров на странице.
Поскольку на странице есть изменяемые параметры, оставим на ней кнопки сохранения и перезагрузки контроллера.
Для данной страницы в диалоге стилей зададим заголовок для данной страницы
По такому же сценарию создадим страницу с настройками клиента. Для параметра «Wi-Fi клиент – получение IP по DHCP» зададим тип параметра «Чек бокс»
При наличии в интерфейсе более двух страниц в узлах страниц так же появляются ветки управляющие положением страниц в меню интерфейса. Но главная страница всегда остаётся первой.
В данный момент доступ к интерфейсу и всем страницам свободный. Введём ограничение доступа. Для этого сделаем двойной клик по ветке «Свободный доступ» узла «Доступ к интерфейсу»
Теперь для доступа к интерфейсу необходимо будет авторизоваться. Время активной авторизации можно задать. По умолчанию оно составляет 15 минут. Через это время после последней активности пользователя будет произведён автоматический сброс текущего пользователя. Это время можно изменить путём двойного клика по соответствующей ветке.
В узле «Пользователи» можно задать необходимое количество пользователей. Там всегда присутствует супер пользователь (по умолчанию логин — admin). Ему всегда доступны все страницы и параметры. Как и для любого пользователя в его узле можно задать логин и пароль.
Создадим нового пользователя, который будет иметь право настраивать точку доступа. Для этого произведём двойной клик по ветке «Добавить пользователя». Откроется диалог добавления пользователя. В нем мы зададим логин и пароль нового пользователя
И создадим ещё одного пользователя, который сможет настраивать клиента.
После включения доступа по логину и паролю на всех страницах появилась кнопка «Exit», которая служит для выхода текущего пользователя. Оставим ее на всех страницах.
Теперь настроим доступ на страницах. Главная страница всегда доступна всем пользователям. А в узлах остальных страниц появилась новая ветка «Доступ». Дважды кликнем на этой ветке в узле страницы «Точка доступа».
Откроется диалог выбора пользователей для доступа к странице. По умолчанию доступ открыт всем пользователям. Снимем галочку с пользователя «User_Client» тем самым ограничив его доступ к данной странице.
Таким же способом ограничим доступ к странице настроек клиента пользователю «User_Tochka»
Создадим ещё одну страницу для настроек логинов и паролей
Добавим на эту страницу параметры логинов и паролей для всех пользователей. Эти параметры появились в списке системных параметров после включения доступа по логину и паролю.
Для данной страницы не будем настраивать ограничение доступа, а настроим ограничение непосредственно на параметры. В узлах параметров появились ветки настройки доступа аналогичные настройкам доступа к страницам.
К параметрам админа запретим доступ обеим пользователям, а к параметрам пользователей оставим доступ только тому пользователю, которому эти параметры принадлежат.
На этом настройку web интерфейса считаем законченной.
Нажимаем кнопку «Компилировать проект» в главном интерфейсе программы и получаем готовый скетчь в Arduino IDE.
В Arduino IDE выбираем нашу плату.
И порт, к которому подключен контроллер
После чего заливаем прошивку в контроллер
Итак, что у нас получилось…
После загрузки появляется новая точка доступа.
Подключаемся к ней и заходим по заданному нами в проекте адресу. Появляется страница авторизации.
Вводим пароль и логин администратора, и попадаем на главную страницу
Видим в меню все страницы
А на странице логина и пароля все параметры.
Выходим и логинимся под User_Tochka. Видим в меню только доступные страницы, и только свой логин и пароль
Перелогиниваемся под User_Client и картина соответствующая – видим только то, что положено
Открываем Arduino IDE и в настройках порта видим, что контроллер готов к обновлению прошивки «по воздуху».
Этот проект представляет собой пошаговое руководство, в котором показано, как создать автономный веб-сервер ESP8266, который управляет двумя выходами (два светодиода). Веб-сервер ESP8266 контролируется мобильными устройствами, и к нему можно получить доступ с любого устройства с браузером в локальной сети.
Если вы хотите узнать больше о модуле ESP8266, сначала прочтите мое Руководство по началу работы с модулем WiFi ESP8266.
В данном руководстве рассматриваются два разных метода построения веб-сервера:
- Часть 1. Создание веб-сервера с использованием Arduino IDE
- Часть 2. Создание веб-сервера с помощью NodeMCU
ЧАСТЬ 1: СОЗДАЙТЕ ВЕБ-СЕРВЕР, ИСПОЛЬЗУЯ ARDUINO IDE
В этой части показано, как создать веб-сервер для управления двумя выходами с помощью Arduino IDE. Вы можете использовать этот метод для создания другого веб-сервера для удовлетворения ваших потребностей.
Подготовьте IDE Arduino
1. Загрузите и установите Arduino IDE в вашей операционной системе (некоторые старые версии не будут работать).
2. Затем вам необходимо установить дополнение ESP8266 для Arduino IDE. Для этого перейдите в File> Preferences.
4. Перейдите в Инструменты > Платы > Менеджер плат…
5. Прокрутите вниз, выберите пункт меню платы ESP8266 и установите «плату esp8266», как показано на рисунке ниже.
6. Перейдите в Инструменты > Плата и выберите свою плату ESP8266. Затем снова откройте вашу Arduino IDE.
Скопируйте приведенный ниже код в вашу Arduino IDE, но пока не загружайте его. Вам нужно внести некоторые изменения, чтобы он работал у вас.
Вам необходимо изменить следующие две переменные с сетевыми учетными данными, чтобы ваш ESP8266 мог установить соединение с маршрутизатором.
Загрузка скетча
Загрузка скетча в ESP-12E
Если вы используете ESP-12E NodeMCU Kit, загрузка скетча очень проста, поскольку в нем есть встроенный программатор. Подключите вашу плату к компьютеру. Убедитесь, что вы выбрали правильную плату и COM-порт.
Загрузка скетча в ESP-01
Загрузка кода в ESP-01 требует установления последовательного соединения между вашим ESP8266 и программатором FTDI, как показано на схематической диаграмме ниже.
В следующей таблице показаны соединения, которые необходимо установить между ESP8266 и программатором FTDI.
| ESP8266 | FTDI programmer |
| RX | TX |
| TX | RX |
| CH_PD | 3.3V |
| GPIO 0 | GND |
| VCC | 3.3V |
| GND | GND |
Если у вас новый программатор FTDI, и вам нужно установить драйверы FTDI на ПК с Windows, посетите официальный веб-сайт для получения официальных драйверов. Кроме того, вы можете связаться с продавцом, который продал вам программатор FTDI.
Затем вам просто нужно подключить программатор FTDI к вашему компьютеру и загрузить код в ESP8266.
Schematics
Для построения схемы вам понадобятся следующие детали:
- ESP8266 12-E
- Платы для разработки Wi-Fi
- 2 светодиода
- 2 резистора (220 или 330 Ом подойдут)
- макетная плата
- Перемычки
Если вы используете ESP-01, вам также нужен программатор FTDI.
Подключите два светодиода к ESP8266, как показано на следующей принципиальной схеме - один светодиод подключен к GPIO 4 (D2), а другой к GPIO 5 (D1).
Если вы используете ESP-01 .
Если вы используете ESP8266-01, используйте следующую схему в качестве справки, но вам нужно изменить назначение GPIO в коде (на GPIO 2 и GPIO 0).
Тестирование веб-сервера
Теперь вы можете загрузить код, и он сразу заработает. Не забудьте проверить, правильно ли выбрана плата и COM-порт, в противном случае вы получите ошибку при попытке загрузки. Откройте последовательный монитор со скоростью 115200 бод.
Нахождение IP-адреса ESP
Скопируйте этот IP-адрес, потому что он нужен вам для доступа к веб-серверу.
Доступ к веб-серверу
Откройте браузер, введите IP-адрес ESP, и вы увидите следующую страницу. Эта страница отправляетсяESP8266, когда вы посылаете запрос на IP-адрес ESP.
Тестирование веб-сервера
Состояние светодиода также обновляется на веб-странице.
Проверьте кнопку GPIO 4 и убедитесь, что она работает аналогичным образом.
Как работает код
Теперь давайте подробнее рассмотрим код, чтобы увидеть, как он работает, чтобы вы могли изменить его в соответствии со своими потребностями.
Первое, что вам нужно сделать, это включить библиотеку ESP8266WiFi.
Как упоминалось ранее, вам нужно вставить свой ssid и пароль в следующие строки внутри двойных кавычек.
Затем вы устанавливаете свой веб-сервер на порт 80.
Затем вы создаете вспомогательные переменные для хранения текущего состояния ваших выходных данных. Если вы хотите добавить больше выходных данных и сохранить их состояние, вам нужно создать больше переменных.
Вам также необходимо назначить GPIO каждому из ваших выходов. Здесь мы используем GPIO 4 и GPIO 5. Вы можете использовать любые другие подходящие GPIO.
Настройка
Теперь перейдем к настройке. Функция setup () запускается только один раз при первой загрузке ESP. Сначала мы запускаем последовательную связь со скоростью 115200 бод для целей отладки.
Вы также определяете свои GPIO как ВЫХОДЫ и устанавливаете их в LOW.
Следующие строки начинают соединение Wi-Fi с WiFi.begin (ssid, пароль), ожидают успешного соединения и печатают IP-адрес ESP в Serial Monitor.
В loop() мы программируем то, что происходит, когда новый клиент устанавливает соединение с веб-сервером.
ESP всегда прослушивает входящих клиентов этой строкой:
Когда запрос получен от клиента, мы сохраним входящие данные. Последующий цикл while будет работать до тех пор, пока клиент остается подключенным. Мы не рекомендуем менять следующую часть кода, если вы точно не знаете, что делаете.
Следующий раздел операторов if и else проверяет, какая кнопка была нажата на вашей веб-странице, и соответственно контролирует результаты. Как мы видели ранее, мы делаем запрос на разные URL в зависимости от кнопки, которую нажимаем.
Это работает аналогично для других кнопок. Поэтому, если вы хотите добавить больше выходных данных, вы должны изменить эту часть кода, чтобы включить их.
Отображение веб-страницы HTML
Следующее, что вам нужно сделать, это создать веб-страницу. ESP отправит в ваш браузер ответ с текстом HTML для отображения веб-страницы.
Первый текст, который вы всегда должны отправлять, - это следующая строка, которая указывает, что мы отправляем HTML.
Затем следующая строка делает веб-страницу отзывчивой в любом веб-браузере.
Следующий используется для предотвращения запросов, связанных со значком: вам не нужно беспокоиться об этой строке.
Стилизация веб-страницы
Далее у нас есть немного CSS для стилизации кнопок и внешнего вида веб-страницы. Мы выбираем шрифт Helvetica, определяем содержимое, которое будет отображаться в виде блока и выравниваться по центру.
Мы стилизуем наши кнопки с некоторыми свойствами, чтобы определить цвет, размер, границу и т. д.
Затем мы определяем стиль для второй кнопки со всеми свойствами кнопки, которые мы определили ранее, но с другим цветом. Это будет стиль для кнопки выключения.
Настройка заголовка веб-страницы
В следующей строке вы устанавливаете заголовок вашей веб-страницы, вы можете изменить этот текст на любой другой.
Отображение кнопок и соответствующего состояния
Затем вы пишете абзац для отображения текущего состояния GPIO 5. Как вы можете видеть, мы используем переменную output5State, поэтому состояние изменяется мгновенно при изменении этой переменной.
Затем мы отображаем кнопку включения или выключения, в зависимости от текущего состояния GPIO.
Мы используем ту же процедуру для GPIO 4.
Закрытие соединения
Наконец, когда ответ заканчивается, мы очищаем переменную заголовка и прекращаем соединение с клиентом с помощью client.stop ().
Завершение
Теперь, когда вы знаете, как работает код, вы можете изменить код, чтобы добавить дополнительные выходные данные или изменить свою веб-страницу. Чтобы изменить свою веб-страницу, вам может понадобиться знание основ HTML и CSS. Вместо управления двумя светодиодами вы можете управлять реле для управления практически любыми электронными приборами.
ЧАСТЬ 2: СОЗДАНИЕ ВЕБ-СЕРВЕРА С ИСПОЛЬЗОВАНИЕМ NODEMCU
В этой части показано, как создать веб-сервер для управления двумя выходами с использованием прошивки NodeMCU и языка программирования LUA. Вы можете использовать этот метод для создания другого веб-сервера.
Зачем прошивать модуль ESP8266 с помощью NodeMCU?
NodeMCU - это прошивка, которая позволяет программировать модули ESP8266 с помощью сценария LUA. Программирование ESP8266 с помощью LUA с использованием прошивки NodeMCU очень похоже на программирование вашего Arduino. С помощью всего лишь нескольких строк кода вы можете установить соединение Wi-Fi, управлять GPO ESP8266, превратить ESP8266 в веб-сервер и многое другое.
Загрузка NodeMCU Flasher для Windows
После подключения вашей схемы вы должны загрузить флешер NodeMCU. Это файл .exe, который вы можете скачать по одной из следующих ссылок:
Вы можете нажать здесь, чтобы найти всю информацию о NodeMCU флешере.
Перепрошивка ESP8266
Если вы используете ESP8266-12, вам просто нужно подключить ESP к вашему компьютеру. Если вы используете ESP-01, вам нужен программатор FTDI, чтобы подключить его к вашему компьютеру. Установите последовательное соединение между вашим ESP8266 и программатором FTDI, как показано на принципиальной схеме ниже.
Откройте только что загруженный флэшер, и должно появиться окно (как показано на следующем рисунке).
Схема
Для построения схемы вам понадобятся следующие детали:
- ESP8266 12-E
- 2x светодиода
- 2х резисторов (220 или 330 Ом должны работать нормально)
- Макетная плата
- Перемычки
Если вы используете ESP-01, вам также нужен программатор FTDI.
Если вы используете ESP8266-01, используйте следующую схему в качестве справки.
За последние несколько лет модуль ESP8266 стал восходящей звездой среди проектов, связанных IoT или WiFi. Это чрезвычайно экономичный Wi-Fi модуль, который с небольшими дополнительными усилиями может быть запрограммирован для создания автономного веб-сервера.
Одной из важнейших функций, которую обеспечивает ESP8266, является способность не только подключаться к существующей Wi-Fi сети и работать как веб-сервер, но также создавать собственную сеть, позволяя другим устройствам подключаться к нему и получать доступ к веб-страницам.
Работа ESP8266 может осуществляться в трех разных режимах:
- Станция (STA)
- Точка доступа (AP)
- Комбинированный
Режим станции
Модуль ESP8266, который подключается к существующей WiFi сети (созданной беспроводным маршрутизатором), называется Станция (STA).
В режиме станции ESP8266 получает IP-адрес от беспроводного маршрутизатора, к которому он подключен. С этим IP-адресом он может настроить веб-сервер и доставлять веб-страницы на все подключенные устройства в существующей сети Wi-Fi .
Режим точка доступа
Модуль ESP8266, который создает свою собственную WiFi сеть и действует как концентратор (точно так же как маршрутизатор WiFi) для одной или нескольких станций, называется Точкой доступа (AP).
В отличие от WiFi-роутера, он не имеет подключения к проводной сети. Максимальное количество станций, которые могут подключиться к нему, ограничено пятью.
В режиме точка доступа ESP8266 создает новую WiFi сеть и устанавливает SSID (имя сети) и IP-адрес для нее. С помощью этого IP-адреса он может доставлять веб-страницы на все подключенные устройства в своей собственной сети.
Выводы ESP8266 NodeMCU
Ниже представлена распиновка чипа ESP8266 NodeMCU:
Схема подключения светодиодов к ESP8266 NodeMCU
Теперь, когда мы знаем основы работы веб-сервера и в каких режимах ESP8266 может создавать веб-сервер, пришло время подключить некоторые светодиоды к ESP8266 NodeMCU, которыми мы будем управлять через WiFi.
Начните с размещения NodeMCU на макетной плате, чтобы каждая сторона платы была на отдельной стороне. Затем подключите два светодиода к цифровым выводам D6 и D7 через токоограничивающие резисторы 220 Ом.
Концепция управления вещами с веб-сервера ESP8266
Итак, вы можете подумать: «Как я могу управлять вещами с веб-сервера, который просто обрабатывает и доставляет веб-страницы?» Для этого вам нужно понять, что происходит за кулисами.
А теперь давайте перейдем к самому интересному!
Как следует из заголовка, этот пример демонстрирует, как превратить ESP8266 в точку доступа (AP) и обслуживать веб-страницы для любого подключенного клиента. Для начала подключите ESP8266 NodeMCU к компьютеру и загрузите следующий код:
Доступ к веб-серверу в режиме AP
После подключения к сети AP NodeMCU откройте браузер и введите значение 192.168.1.1. NodeMCU должен отобразить веб-страницу с текущим состоянием светодиодов и две кнопки для управления ими. Если одновременно взглянуть на последовательный монитор, вы можете увидеть состояние выводов GPIO NodeMCU.
Теперь нажмите кнопку, чтобы включить LED1. Как только вы нажмете кнопку, ESP8266 получает запрос на URL-адрес /led1on. Затем он включит LED1 и отправит веб-страницу со статусом обновленного состояния светодиода. Он также отобразит в серийном мониторе состояние вывода GPIO.
Вы можете проверить кнопку LED2 и убедиться, что она работает аналогичным образом.
Теперь давайте внимательнее посмотрим на код, чтобы понять, как он работает.
Подробное объяснение кода
Поскольку мы устанавливаем ESP8266 NodeMCU в качестве точки доступа (AP), то модуль создаст WiFi сеть. Следовательно, нам нужно установить SSID, пароль, IP-адрес, маску IP-подсети и IP-шлюз.
Далее мы объявляем выводы GPIO NodeMCU к которым подключены светодиоды и их начальное состояние.
Функция Setup()
Далее мы настроили программную точку доступа для создания Wi-Fi сети, подтвердив SSID, пароль, IP-адрес, маску IP-подсети и IP-шлюз.
Аналогично, нам нужно указать еще 4 URL для обработки двух состояний обоих светодиодов.
Теперь, чтобы запустить наш сервер, мы вызываем begin() для объекта server.
Функция Loop()
Далее нам нужно создать функцию, которую мы прикрепили к корневому (/) URL с помощью server.on. В начале этой функции мы устанавливаем статус обоих светодиодов как LOW (начальное состояние светодиодов) и печатаем его в последовательный монитор.
Аналогично, нам нужно создать четыре функции для обработки запросов на включение / выключение светодиодов и страницу ошибки 404.
Отображение HTML веб-страницы
Функция SendHTML() отвечает за создание веб-страницы всякий раз, когда веб-сервер ESP8266 получает запрос от веб-клиента. Он просто объединяет HTML-код в большую строку и возвращается к функции server.send(), которую мы обсуждали ранее. Функция принимает состояние светодиодов в качестве параметра для динамической генерации HTML-контента.
Затем элемент <meta> viewport делает веб-страницу отзывчивой в любом веб-браузере. Тег title устанавливает заголовок страницы.
Стилизация веб-страницы
Далее у нас есть немного CSS кода для стилизации кнопок и внешнего вида веб-страницы. Мы выбрали шрифт Helvetica, определили содержимое, которое будет отображаться в виде встроенного блока, выровненного по центру.
Следующий код устанавливает цвет, шрифт body, теги H1, H3 и p.
Указываем некоторые стили кнопок со свойствами, такими как цвет, размер, поля и т. д. Кнопка ВКЛ и ВЫКЛ имеет другой цвет фона, а селектор active кнопок обеспечивает эффект нажатия кнопки.
Установка заголовка веб-страницы
Далее устанавливается заголовок веб-страницы. Вы можете изменить его на текст, подходящий для вашего приложения.
Отображение кнопок и соответствующего состояния
Для динамического создания кнопок и состояния светодиодов мы используем оператор if. Таким образом, в зависимости от состояния выводов GPIO, отображается кнопка ON / OFF.
Теперь давайте перейдем к нашему следующему примеру, который демонстрирует, как переключить ESP8266 в режим Station (STA) и обслуживать веб-страницы для любого подключенного клиента в существующей сети.
Прежде чем приступить к загрузке кода, необходимо внести некоторые изменения, чтобы он правильно работал. Вам необходимо изменить следующие две переменные с вашими сетевыми учетными данными, чтобы ESP8266 мог установить соединение с существующей сетью.
После того как вы внесете изменения, загрузите следующий код:
Доступ к веб-серверу в режиме STA
Затем откройте браузер и укажите IP-адрес, указанный на последовательном мониторе. NodeMCU должен обработать веб-страницу, показывающую текущее состояние светодиодов и две кнопки для управления ими. Если взглянуть на последовательный монитор, вы можете увидеть состояние выводов GPIO NodeMCU.
Вы можете проверить кнопку LED2 и убедиться, что она работает аналогичным образом.
Объяснение кода
Если вы сравните этот код с предыдущим кодом, то обнаружите, что единственное отличие состоит в том, что мы не устанавливаем программную точку доступа, а подключаемся к существующей сети с помощью функции WiFi.begin().
Пока ESP8266 пытается подключиться к сети, мы можем проверить состояние подключения с помощью функции WiFi.status().
- WL_CONNECTED : назначается при подключении к сети Wi-Fi
- WL_NO_SHIELD : назначается, когда нет shield Wi-Fi
- WL_IDLE_STATUS : временное состояние, назначаемое при вызове WiFi.begin (), и остается активным до тех пор, пока не истечет количество попыток (что приводит к WL_CONNECT_FAILED) или пока не установлено соединение (что приводит к WL_CONNECTED)
- WL_NO_SSID_AVAIL : назначается, когда нет доступных SSID
- WL_SCAN_COMPLETED : назначается, когда сканирование сетей завершено
- WL_CONNECT_FAILED : назначается при сбое подключения для всех попыток
- WL_CONNECTION_LOST : назначается при потере соединения
- WL_DISCONNECTED : назначается при отключении от сети
Как только ESP8266 подключится к сети, в последовательном мониторе будет напечатан IP-адрес, назначенный для ESP8266.
Читайте также: