Esp8266 настройка wifi flprog

Обновлено: 06.07.2024


За последние несколько лет модуль ESP8266 стал восходящей звездой среди проектов, связанных IoT или WiFi. Это чрезвычайно экономичный Wi-Fi модуль, который с небольшими дополнительными усилиями может быть запрограммирован для создания автономного веб-сервера.

Одной из важнейших функций, которую обеспечивает ESP8266, является способность не только подключаться к существующей Wi-Fi сети и работать как веб-сервер, но также создавать собственную сеть, позволяя другим устройствам подключаться к нему и получать доступ к веб-страницам.

Работа ESP8266 может осуществляться в трех разных режимах:

  1. Станция (STA)
  2. Точка доступа (AP)
  3. Комбинированный

Режим станции

Модуль ESP8266, который подключается к существующей WiFi сети (созданной беспроводным маршрутизатором), называется Станция (STA).

Режим станции ESP8266


Прочная металлическая основа с порошковым покрытием, четыре гибкие руч.

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

Режим точка доступа

Модуль ESP8266, который создает свою собственную WiFi сеть и действует как концентратор (точно так же как маршрутизатор WiFi) для одной или нескольких станций, называется Точкой доступа (AP).

В отличие от WiFi-роутера, он не имеет подключения к проводной сети. Максимальное количество станций, которые могут подключиться к нему, ограничено пятью.

Режим точка доступа

В режиме точка доступа ESP8266 создает новую WiFi сеть и устанавливает SSID (имя сети) и IP-адрес для нее. С помощью этого IP-адреса он может доставлять веб-страницы на все подключенные устройства в своей собственной сети.

Выводы ESP8266 NodeMCU

Ниже представлена распиновка чипа ESP8266 NodeMCU:

распиновка чипа ESP8266 NodeMCU

Схема подключения светодиодов к ESP8266 NodeMCU

Теперь, когда мы знаем основы работы веб-сервера и в каких режимах ESP8266 может создавать веб-сервер, пришло время подключить некоторые светодиоды к ESP8266 NodeMCU, которыми мы будем управлять через WiFi.

Начните с размещения NodeMCU на макетной плате, чтобы каждая сторона платы была на отдельной стороне. Затем подключите два светодиода к цифровым выводам D6 и D7 через токоограничивающие резисторы 220 Ом.


Концепция управления вещами с веб-сервера ESP8266

Итак, вы можете подумать: «Как я могу управлять вещами с веб-сервера, который просто обрабатывает и доставляет веб-страницы?» Для этого вам нужно понять, что происходит за кулисами.

А теперь давайте перейдем к самому интересному!

Как следует из заголовка, этот пример демонстрирует, как превратить ESP8266 в точку доступа (AP) и обслуживать веб-страницы для любого подключенного клиента. Для начала подключите ESP8266 NodeMCU к компьютеру и загрузите следующий код:

Доступ к веб-серверу в режиме AP

запуск HTTP-сервера

После подключения к сети 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.

Модуль ESP8266 позволяет реализовать дистанционное управление микроконтроллерным устройством по WiFi. Реализована поддержка модуля всеми контроллерами Arduino. Исходный код графического интерфейса можно получить для сред разработки Arduino IDE и PLProg.

Для использования модуля ESP8266 выберите этот модуль в настройках конфигурации проекта.



В RemoteXY модуль может быть настроен для работы в двух режимах: точка доступа и клиента для подключение к существующей точке доступа.

Режим работы в качестве точки доступа (Access Point) настраивает модуль ESP8266 как точку доступа и позволяет подключиться к этой точке напрямую. Точка доступа доступна для подключения к ней со смартфона или планшета в радиусе доступности радиосигнала. При этом не требуется какой либо другой сетевой инфраструктуры. Данный режим подключения может быть использован в открытом поле, где нет компьютерных сетей и интернета. Для конфигурации данного режима работы в свойствах конфигурации проекта необходимо выбрать тип соединения "Wi-Fi точка доступа".

Режим работы в качестве клиента предполагает, что ESP8266 будет автоматически подключаться к существующей Wi-Fi точке доступа, например к домашнему маршрутизатору (роутеру) или точке доступа предприятия. При этом подключенный к Arduino модуль ESP8266 должен располагаться в физической доступности радиосигнала этой точки доступа. Подключение к устройству со смартфона или планшета будет происходить не на прямую, а через сеть Ethernet, по IP адресу, выданному модулю ESP8266 DHCP сервером. Появляется возможность подключиться к устройству из любого места локальной сети, а так же из сети интернет. Подключение из сети интернет возможно при правильной настройке маршрутизатора, например использование виртуального сервера. Для конфигурации данного режима работы в свойствах конфигурации проекта необходимо выбрать тип соединения "Ethernet".

Подключение модуля ESP8266 к Arduino осуществляется через последовательный интерфейс. Можно использовать как Software Serial, так и аппаратный Hardware Serial. Вариант подключения модуля выбирается в панели настроек подключения модуля. Модуль управляется посредством AT команд.

Рекомендуется использовать самую последнюю прошивку для ESP8266. Версия AT команд должна быть не ниже v0.40. Используйте инструкцию по обновлению прошивки ESP8266.

Питание модуля можно обеспечить от встроенного источника питания 3.3В на плате Arduino. Некоторые платы, например Arduino Nano может не обеспечить достаточной мощности на выводе 3.3V, в этом случае потребуется отдельный источник питания.

Подключение через Software Serial

Позволяет подключить модуль к произвольным контактам микроконтроллера. Какие контакты использовать, необходимо указать в панели настроек подключения модуля. Так же в панели настроек указывается скорость передачи данных для порта. Модуль ESP8266 по умолчанию настроен на скорость 115200 бит/сек. Для работы через SoftwareSerial необходимо предварительно настроить скорость передачи данных ESP8266 на более низкую скорость. Стабильная работа модуля возможна на скорости не более 19200 бит/сек. Для изменения скорости работы последовательного интерфейса модуля, необходимо его подключить к консоли для возможности выполнения AT команд. Скорость работы модуля может быть изменена при помощи AT команды "AT+UART_DEF=19200,8,1,0,0".



Есть некоторые ограничения на использование контакта RX для плат Arduino. Ограничения связаны с поддержкой прерываний на соответствующих контактах микроконтроллера.

Так же при использовании SoftwareSerial вы должны принять следующие ограничения:

  • Нет возможности работы на больших скоростях передачи данных. Не рекомендуем использовать скорость соединения более 19200 бит/сек.
  • Некоторые библиотеки, которые так же используют прерывания, могут работать не корректно, или же их использование может сделать неработоспособным данный способ подключения. Например библиотека Servo будет подергивать сервоприводы.

Пример подключения модуля ESP8266 для SoftwareSerial к контактам 2(RX) и 3(TX) на рисунке. Обратите внимание, что необходимо контакты подключить перекрестием, т.е. контакт Arduino 2(RX) к контакту TX модуля, и контакт 3(TX) к контакту RX модуля.



Подключение через Hardware Serial (аппаратный)

Позволяет подключить модуль к контактам микроконтроллера, поддерживающим один из аппаратных портов последовательного интерфейса. Для разных плат Arduino это разные порты и контакты. Возможна работа на максимальной скорости соединения 115200 бит/сек. Скорость передачи данных для Arduino указывается в панели настроек редактора. ESP8266 необходимо предварительно настроить на работу на той же скорости, что и Arduino. Настройку можно выполнить через AT команды. Следующие последовательные порты Arduino доступны:

  • Arduino UNO и Nano: Serial (RX-0, TX-1);
  • Arduino MEGA и MEGA2560: Serial (RX-0, TX-1), Serial1 (RX-19 и TX-18), Serial2 (RX-17 и TX-16), Serial3 (RX-15 и TX-14);

Какой порт использовать, а следовательно к каким контактам следует подключать модуль, необходимо указать в панели настроек подключения модуля. Следует так же иметь в виду, что для плат Arduino порт Serial задействован для программирования микроконтроллера, и если вы приняли решение использовать этот порт, при программировании необходимо отсоединять модуль ESP8266. Хорошим решением будет использовать на платах Arduino MEGA любой порт, отличный от Serial.



Пример подключения модуля для аппаратного Serial к контактам 0(RX) и 1(TX) на рисунке. Обратите внимание, что необходимо контакты подключить перекрестием, т.е. контакт Arduino 0(RX) к контакту TX модуля, и контакт 1(TX) к контакту RX модуля.

Этот проект представляет собой пошаговое руководство, в котором показано, как создать автономный веб-сервер ESP8266, который управляет двумя выходами (два светодиода). Веб-сервер ESP8266 контролируется мобильными устройствами, и к нему можно получить доступ с любого устройства с браузером в локальной сети.

image_1.jpg

Если вы хотите узнать больше о модуле ESP8266, сначала прочтите мое Руководство по началу работы с модулем WiFi ESP8266.

В данном руководстве рассматриваются два разных метода построения веб-сервера:

  • Часть 1. Создание веб-сервера с использованием Arduino IDE
  • Часть 2. Создание веб-сервера с помощью NodeMCU

ЧАСТЬ 1: СОЗДАЙТЕ ВЕБ-СЕРВЕР, ИСПОЛЬЗУЯ ARDUINO IDE

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

Подготовьте IDE Arduino

1. Загрузите и установите Arduino IDE в вашей операционной системе (некоторые старые версии не будут работать).

2. Затем вам необходимо установить дополнение ESP8266 для Arduino IDE. Для этого перейдите в File> Preferences.

image_3.jpg

4. Перейдите в Инструменты > Платы > Менеджер плат…

image_4.jpg

5. Прокрутите вниз, выберите пункт меню платы ESP8266 и установите «плату esp8266», как показано на рисунке ниже.

image_5.jpg

6. Перейдите в Инструменты > Плата и выберите свою плату ESP8266. Затем снова откройте вашу Arduino IDE.

Скопируйте приведенный ниже код в вашу Arduino IDE, но пока не загружайте его. Вам нужно внести некоторые изменения, чтобы он работал у вас.

Вам необходимо изменить следующие две переменные с сетевыми учетными данными, чтобы ваш ESP8266 мог установить соединение с маршрутизатором.

Загрузка скетча

Загрузка скетча в ESP-12E

Если вы используете ESP-12E NodeMCU Kit, загрузка скетча очень проста, поскольку в нем есть встроенный программатор. Подключите вашу плату к компьютеру. Убедитесь, что вы выбрали правильную плату и COM-порт.

image_7.jpg

Загрузка скетча в ESP-01

Загрузка кода в ESP-01 требует установления последовательного соединения между вашим ESP8266 и программатором FTDI, как показано на схематической диаграмме ниже.

image_8.jpg

В следующей таблице показаны соединения, которые необходимо установить между 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).

image_10.jpg

Если вы используете ESP-01 .

Если вы используете ESP8266-01, используйте следующую схему в качестве справки, но вам нужно изменить назначение GPIO в коде (на GPIO 2 и GPIO 0).

image_11.jpg

Тестирование веб-сервера

Теперь вы можете загрузить код, и он сразу заработает. Не забудьте проверить, правильно ли выбрана плата и COM-порт, в противном случае вы получите ошибку при попытке загрузки. Откройте последовательный монитор со скоростью 115200 бод.

Нахождение IP-адреса ESP

image_12.jpg

Скопируйте этот IP-адрес, потому что он нужен вам для доступа к веб-серверу.

Доступ к веб-серверу

Откройте браузер, введите IP-адрес ESP, и вы увидите следующую страницу. Эта страница отправляетсяESP8266, когда вы посылаете запрос на IP-адрес ESP.

image_13.jpg

image_14.jpg

Тестирование веб-сервера

image_15.jpg

Состояние светодиода также обновляется на веб-странице.

Проверьте кнопку GPIO 4 и убедитесь, что она работает аналогичным образом.

image_16.jpg

Как работает код

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

Первое, что вам нужно сделать, это включить библиотеку 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. Вы можете использовать этот метод для создания другого веб-сервера.

image_17.jpg

Зачем прошивать модуль 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, как показано на принципиальной схеме ниже.

image_18.jpg

Откройте только что загруженный флэшер, и должно появиться окно (как показано на следующем рисунке).

image_19.jpg

Схема

Для построения схемы вам понадобятся следующие детали:

  • ESP8266 12-E
  • 2x светодиода
  • 2х резисторов (220 или 330 Ом должны работать нормально)
  • Макетная плата
  • Перемычки

Если вы используете ESP-01, вам также нужен программатор FTDI.

Если вы используете ESP8266-01, используйте следующую схему в качестве справки.

За последние несколько лет ESP8266 стал восходящей звездой среди проектов, связанных с IoT или Wi-Fi. Это чрезвычайно эффективный по стоимости Wi-Fi модуль, который (с небольшими усилиями) может быть запрограммирован для создания автономного веб-сервера. Это круто!

Рассмотрим на простом примере, как в Arduino IDE создать на ESP8266 NodeMCU веб-сервер для мониторинга и управления различными устройствами через Wi-Fi.

Создание простого веб-сервера на ESP8266 NodeMCU в Arduino IDE

Создание простого веб-сервера на ESP8266 NodeMCU в Arduino IDE

Что такое веб-сервер и как он работает?

Режимы работы ESP8266

Одна из важнейших функций, которую обеспечивает ESP8266, заключается в том, что он может не только подключаться к существующей Wi-Fi сети и работать в качестве веб-сервера, но он также может устанавливать собственную сеть, позволяя другим устройствам подключаться непосредственно к нему и получать доступ к веб-страницам. Это возможно, потому что ESP8266 может работать в трех разных режимах: режим станции, режим точки доступа и оба первых режима одновременно. Это обеспечивает возможность построения ячеистых сетей.

Режим станции (STA)

ESP8266, который подключается к существующей сети W-iFi (созданной вашим беспроводным маршрутизатором), называется станцией (Station, STA).

Рисунок 2 Демонстрация режима Station ESP8266 NodeMCU

Рисунок 2 – Демонстрация режима Station ESP8266 NodeMCU

В режиме STA ESP8266 получает IP адрес от беспроводного маршрутизатора, к которому подключен. С этим IP адресом он может настроить веб-сервер и выдавать веб-страницы на все подключенные к существующей Wi-Fi сети устройства.

Режим точки доступа (AP)

ESP8266, который создает свою собственную сеть Wi-Fi и действует как концентратор (точно так же как маршрутизатор Wi-Fi) для одной или нескольких станций, называется точкой доступа (Access Point, AP). В отличие от Wi-Fi роутера, он не имеет интерфейса к проводной сети. Такой режим работы называется Soft Access Point (soft-AP). Максимальное количество станций, которые могут к нему подключиться, ограничено пятью.

Рисунок 3 Демонстрация режима Soft Access Point ESP8266 NodeMCU

Рисунок 3 – Демонстрация режима Soft Access Point ESP8266 NodeMCU

В режиме AP ESP8266 создает новую сеть Wi-Fi и устанавливает для нее SSID (имя сети) и присваивает себе IP адрес. По запросу на этот IP адрес он может выдавать веб-страницы всем подключенным к этой сети устройствам.

Схема. Подключение светодиодов к ESP8266 NodeMCU

Теперь, когда мы знаем основы работы веб-сервера, и в каких режимах ESP8266 может создавать веб-сервер, пришло время подключить к ESP8266 NodeMCU пару светодиодов, которыми мы хотим управлять через Wi-Fi.

Начните с установки NodeMCU на макетную плату, чтобы каждая сторона платы NodeMCU была на отдельной стороне макетной платы. Затем подключите два светодиода к цифровым GPIO выводам D6 и D7 через токоограничивающие резисторы 220 Ом.

Когда вы закончите, у вас должно получиться что-то похожее на рисунок ниже.

Рисунок 4 Подключение светодиодов к ESP8266 NodeMCU

Рисунок 4 – Подключение светодиодов к ESP8266 NodeMCU

Концепция управления устройствами через веб-сервер ESP8266

Итак, вы можете подумать: «Как я собираюсь управлять устройствами через веб-сервер, который просто обрабатывает и выдает веб-страницы?» Ну, тогда вам нужно понять, что происходит за кулисами.

Теперь перейдем к более интересному!

Как следует из заголовка, этот пример демонстрирует, как превратить ESP8266 в точку доступа (AP) и обрабатывать веб-страницы для любого подключенного клиента. Для начала подключите ESP8266 NodeMCU к компьютеру и загрузите скетч; и тогда мы рассмотрим его более подробно.

Доступ к веб-серверу в режиме AP

Рисунок 5 Веб-сервер ESP8266 NodeMCU. Режим точки доступа. Монитор последовательного порта сервер запущен

Рисунок 5 – Веб-сервер ESP8266 NodeMCU. Режим точки доступа. Монитор последовательного порта – сервер запущен

Затем найдите любое устройство, которое вы можете подключить к сети Wi-Fi – телефон, ноутбук и т.д. И найдите сеть под названием NodeMCU. Подключитесь к сети с паролем 123456789.

Рисунок 6 Веб-сервер ESP8266 NodeMCU. Режим точки доступа. Подключение к серверу

Рисунок 6 – Веб-сервер ESP8266 NodeMCU. Режим точки доступа. Подключение к серверу

После подключения к сети AP NodeMCU откройте браузер и введите в нем адрес 192.168.1.1. NodeMCU должен отобразить веб-страницу с текущим состоянием светодиодов и две кнопки для управления ими. Если посмотрите в этот момент на монитор последовательного порта, вы можете увидеть состояние выводов GPIO платы NodeMCU.

Рисунок 7 – Веб-сервер ESP8266 NodeMCU. Режим точки доступа. Веб-страница Рисунок 8 – Веб-сервер ESP8266 NodeMCU. Режим точки доступа. Монитор последовательного порта – доступ к веб-странице

Теперь нажмите кнопку ON светодиода 1, чтобы включить его, наблюдая за URL. После нажатия кнопки ESP8266 получает запрос на URL адрес /led1on. Затем он включает светодиод 1 и отображает веб-страницу с обновленным состоянием светодиодов. Одновременно он выводит состояние вывода GPIO в монитор последовательного порта.

Рисунок 9 – Веб-сервер ESP8266 NodeMCU. Режим точки доступа. Веб-страница – управление светодиодами Рисунок 10 – Веб-сервер ESP8266 NodeMCU. Режим точки доступа. Монитор последовательного порта – управление светодиодами

Вы можете проверить кнопку светодиода 2 и убедиться, что она работает аналогичным образом.

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

Подробное объяснение кода

Поскольку мы настраиваем ESP8266 NodeMCU в режим точки доступа (AP), он создаст сеть Wi-Fi. Следовательно, нам нужно установить SSID сети, пароль, IP адрес, маску подсети и IP шлюз.

Далее объявляем выводы GPIO платы NodeMCU, к которым подключены светодиоды, и их начальное состояние.

Внутренности функции setup()

Затем настраиваем программно включенную точку доступа для создания сети Wi-Fi, указав SSID, пароль, IP адрес, маску подсети и адрес шлюза.

Аналогичным образом нам нужно указать еще 4 URL для обработки двух состояний двух светодиодов.

Теперь, чтобы запустить сервер, вызываем метод begin() для объекта server .

Внутренности функции loop()

Аналогичным образом нам нужно создать четыре функции для обработки запросов на включение/выключение светодиодов и страницу ошибки 404.

Отображение веб-страницы HTML

Функция SendHTML() отвечает за создание веб-страницы всякий раз, когда веб-сервер ESP8266 получает запрос от веб-клиента. Она просто объединяет HTML код в большую строку и возвращает ее в функцию server.send() , которую мы обсуждали ранее. Данная функция в качестве параметров для динамического генерирования HTML контента принимает состояние светодиодов.

Первый текст, который вы всегда должны отправлять, - это объявление <!DOCTYPE> , которое указывает, что мы отправляем HTML код.

Затем <meta> элемент viewport делает веб-страницу адаптивной в любом веб-браузере. Далее тег title устанавливает заголовок страницы.

Стилизация веб-страницы

Далее идет немного CSS кода для стилизации кнопок и внешнего вида веб-страницы. Мы выбираем шрифт Helvetica, определяем контент, который будет отображаться в виде inline-block и выровнен по центру.

Следующий код устанавливает цвет, шрифт и поля вокруг элементов body , H1 , H3 и p .

Некоторые стили со свойствами, такими как цвет, размер, поля и т.д., также применяются к кнопкам. Для эффекта нажатия у кнопки ON/OFF с помощью селектора :active устанавливается другой цвет фона.

Установка заголовка на веб-странице

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

Отображение кнопок и соответствующего состояния

Для динамического создания кнопок и состояния светодиодов мы используем оператор if . Таким образом, в зависимости от состояния выводов GPIO, отображается кнопка либо ON, либо OFF.

Теперь давайте перейдем к следующему примеру, который демонстрирует, как переключить ESP8266 в режим Station (STA) и выдавать веб-страницы для любого клиента, подключенного к существующей сети.

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

Теперь можно загрузить скетч в ESP8266.

Доступ к веб-серверу в режиме STA

Рисунок 12 Веб-сервер ESP8266 NodeMCU. Режим станции. Монитор последовательного порта сервер запущен

Рисунок 12 – Веб-сервер ESP8266 NodeMCU. Режим станции. Монитор последовательного порта – сервер запущен

Затем загрузите браузер и введите IP адрес, указанный на мониторе последовательного порта. NodeMCU должен выдать веб-страницу, показывающую текущее состояние светодиодов и две кнопки для управления ими. Если в это время взглянуть на монитор последовательного порта, то можно увидеть состояние выводов GPIO NodeMCU.

Рисунок 13 – Веб-сервер ESP8266 NodeMCU. Режим станции. Веб-страница Рисунок 14 – Веб-сервер ESP8266 NodeMCU. Режим станции. Монитор последовательного порта – доступ к веб-странице

Теперь нажмите кнопку ON светодиода 1, чтобы включить его, наблюдая за URL. После нажатия кнопки ESP8266 получает запрос на URL адрес /led1on. Затем он включает светодиод 1 и отображает веб-страницу с обновленным состоянием светодиодов. Одновременно он выводит состояние вывода GPIO в монитор последовательного порта.

Рисунок 15 – Веб-сервер ESP8266 NodeMCU. Режим станции. Веб-страница – управление светодиодами Рисунок 16 – Веб-сервер ESP8266 NodeMCU. Режим станции. Монитор последовательного порта – управление светодиодами

Вы можете проверить кнопку светодиода 2 и убедиться, что она работает аналогичным образом.

Объяснение кода

Если вы сравните этот код вместе с предыдущим примером, единственное отличие состоит в том, что мы не настраиваем точку доступа, а вместо этого с помощью функции WiFi.begin() подключаемся к существующей сети.

Пока ESP8266 пытается подключиться к сети, мы проверяем состояние подключения с помощью функции WiFi.status() .

Данная функция возвращает следующие статусы:

  • WL_CONNECTED: возвращается при подключении к сети Wi-Fi;
  • WL_NO_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, отображая значение WiFi.localIP() в мониторе последовательного порта.

Читайте также: