Веб-сервер на модуле ESP32 для управления светодиодом


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

Веб-сервер на модуле ESP32 для управления светодиодом

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

Также на нашем сайте вы можете посмотреть проекты веб-серверов на основе других микроконтроллеров/плат:

Давайте кратко представим, что нам нужно сделать, чтобы наш веб-сервер заработал:

  • подключение светодиодов к контактам GPIO12 и GPIO14 модуля ESP32, чтобы мы могли ими управлять;
  • после завершения загрузки программы в модуль попробовать получить доступ к веб-странице управления, введя IP-адрес ESP32 в браузере;
  • нажимать кнопки на веб-странице, чтобы включить или выключить светодиод.

Необходимые компоненты

  1. Плата разработки ESP32 (купить на AliExpress) — это основной компонент, который будет использоваться для управления светодиодами через веб-сервер.
  2. Светодиоды (купить на AliExpress) — вы можете использовать любой тип светодиодов в зависимости от требований вашего проекта. Для этого проекта мы использовали 2 светодиода диаметром 5 мм.
  3. Макетная плата — она будет использоваться для подключения светодиодов к микроконтроллеру ESP32.
  4. Соединительные провода — они будут использоваться для подключения макетной платы к микроконтроллеру ESP32 и светодиодным индикаторам.
  5. USB-кабель — для подключения платы разработки ESP32 к компьютеру для программирования.
  6. Компьютер — для программирования и загрузки кода на плату разработки ESP32.
  7. Резисторы (купить на AliExpress) — для ограничения тока, проходящего через светодиоды, и предотвращения их перегорания.

Часто задаваемые вопросы о ESP32

Может ли ESP32 быть одновременно сервером и клиентом?

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

Какое имя хоста у веб-сервера ESP32?

Имя хоста веб-сервера ESP32 может быть либо IP-адресом устройства ESP32, либо назначенным ему доменным именем. По умолчанию имя хоста устройства ESP32 — «Espressif». Однако это можно изменить, изменив сетевые настройки устройства или запрограммировав имя хоста с помощью Arduino IDE. Имя хоста используется другими устройствами в сети для идентификации веб-сервера ESP32 и подключения к нему. При доступе к веб-серверу с помощью веб-браузера имя хоста можно ввести в поле URL-адреса вместе с соответствующим номером порта.

Что такое WebSocket в ESP32?

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

Работа светодиодного веб-сервера ESP32

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

Вот пошаговое описание того, как будет работать наш проект веб-сервера на ESP32:

  1. Микроконтроллер ESP32 подключен к светодиодам и запрограммирован в качестве веб-сервера.
  2. Код веб-сервера загружается в ESP32 с помощью Arduino IDE или других инструментов программирования.
  3. ESP32 подключен к сети Wi-Fi, что позволяет ему взаимодействовать с клиентскими устройствами по сети.
  4. Когда клиентское устройство подключается к IP-адресу ESP32, код веб-сервера передает веб-страницу веб-браузеру клиентского устройства.
  5. Веб-страница содержит элементы управления светодиодами, позволяющие пользователю включать или выключать их.
  6. Когда пользователь взаимодействует с элементами управления на веб-странице, микроконтроллер ESP32 получает команду и соответствующим образом регулирует свечение светодиодов.
  7. ESP32 отправляет ответ обратно на клиентское устройство, обновляя веб-страницу текущим состоянием светодиодов.

Схема проекта

Схема веб-сервера на модуле ESP32 для управления светодиодом представлена на следующем рисунке:

Схема веб-сервера на модуле ESP32 для управления светодиодом

Микроконтроллер ESP32 имеет множество контактов GPIO, которые можно использовать для взаимодействия с внешними устройствами, такими как светодиоды. В этом примере мы подключим ESP32 к двум светодиодам, подключенным к контактам GPIO 12 и 14.

Вот как подключить ESP32 к двум светодиодам:

  1. Подключите один конец резистора сопротивлением 220 Ом к контакту 12 GPIO на ESP32, а другой конец резистора подключите к положительному (анодному) выводу первого светодиода.
  2. Подключите отрицательный (катодный) контакт светодиода к земле (GND) на ESP32.
  3. Повторите шаги 1 и 2 для контакта GPIO 14 и другого светодиода.

Загрузка кода в плату ESP32 из Arduino IDE

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

Вот подробное руководство, которому вы можете следовать - начало работы с ESP32 с использованием Arduino IDE.

Редактирование кода

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

Полный код веб-сервера на ESP32 для управления светодиодами

Загрузка кода в плату ESP32

Чтобы загрузить код в плату ESP32, вам необходимо выполнить следующие шаги:

  1. Подключите плату ESP32 к компьютеру с помощью USB-кабеля.
  2. Откройте Arduino IDE, перейдите в "Tools" > "Board" и выберите из списка свою плату ESP32.

Выбор платы ESP32 в Arduino IDE

  1. Обязательно также выберите правильный порт в разделе "Tools" > "Port".

Выбор COM порта в Arduino IDE

  1. Напишите или скопируйте свой код в Arduino IDE.
  2. Убедитесь, что ваш код компилируется, нажав кнопку "Verify" (значок галочки) в верхнем левом углу IDE. Если есть какие-либо ошибки, исправьте их, прежде чем продолжить.

Проверка кода программы в Arduino IDE

  1. Загрузите свой код в плату ESP32, нажав кнопку "Upload" (Загрузить) (значок со стрелкой вправо) в верхнем левом углу IDE. IDE скомпилирует ваш код, а затем загрузит его в плату ESP32. Ход загрузки будет отображаться в нижней части IDE.

Загрузка кода программы в плату ESP32 из Arduino IDE

После завершения загрузки плата ESP32 автоматически перезагрузится и начнет выполнять ваш код.

Примечание. Перед загрузкой кода вам может потребоваться нажать кнопку "Boot" (Загрузка) или "Reset" (Сброс) на плате ESP32, чтобы войти в режим загрузчика. Конкретные шаги для входа в режим загрузчика могут различаться в зависимости от вашей платы ESP32. Чтобы узнать, как это сделать, обратитесь к документации вашей платы.

Поиск IP-адреса платы ESP32

  1. Откройте последовательный монитор в Arduino IDE, щелкнув значок лупы в правом верхнем углу окна IDE.

Открытие окна последовательного монитора в Arduino IDE

  1. Выберите скорость передачи данных 115200 бод из раскрывающегося списка в правом нижнем углу окна Serial Monitor (последовательного монитора).

Выбор скорости передачи данных в окне последовательного монитора в Arduino IDE

  1. Сбросьте настройки платы ESP32, нажав кнопку EN(RST) на плате.
  2. Подождите, пока плата ESP32 подключится к сети Wi-Fi. Последовательный монитор будет отображать сообщения, указывающие ход соединения.

Процесс подключения платы ESP32 к сети Wi-Fi

  1. Как только плата ESP32 будет подключена к сети Wi-Fi, она получит IP-адрес из сети. Последовательный монитор отобразит IP-адрес платы ESP32.

Получение платой ESP32 IP адреса

Альтернативно вы можете использовать инструмент сетевого сканирования, такой как «Расширенный IP-сканер», для сканирования вашей сети на наличие подключенных устройств и определения IP-адреса вашей платы ESP32.

Подключение к веб-серверу ESP32 и его тестирование

  1. Откройте ту же сеть через устройство или используйте то же устройство, к точке доступа которого подключен ваш ESP32.
  2. Откройте веб-браузер на своем компьютере или мобильном устройстве и введите IP-адрес платы ESP32 в адресную строку.

Если вы присмотритесь, вы найдете дополнительные данные на последовательном мониторе и получить более подробную информацию о веб-сервере, к которому вы обращаетесь, например HTTP-запросы, адрес хоста и т. д.

После того, как вы получили доступ к странице управления в своем браузере, вы можете протестировать ее, нажав «ВКЛ» и «ВЫКЛ» и одновременно проверив состояние светодиода и последовательный монитор.

Теперь, если вы нажмете кнопку GPIO 12, вы увидите, что последовательный монитор получает запрос на URL-адрес 12/on, а затем загорается ваш светодиод.

Процесс обмена данными с нашим веб-сервером

После этого Esp32 обновляет свое состояние на веб-странице как «ВКЛ» или «ВЫКЛ».

Это будет работать так же и для GPIO 14.

Объяснение кода программы веб-сервера

Вначале подключим библиотеку для работы с WiFi.

В следующих строках вам необходимо ввести свои SSID и пароль для вашей Wi-Fi сети.

Следующая строка создает объект сервера, который будет прослушивать входящие HTTP-запросы через порт 80. Порт 80 является портом по умолчанию для HTTP-трафика.

Далее объявим строковую переменную под названием «header», которая будет использоваться для хранения HTTP-запроса, полученного от клиента.

Затем объявим две строковые переменные с названиями «output12State» и «output14State», которые будут использоваться для хранения текущего состояния (включено или выключено) двух выходных контактов на плате ESP32.

Следующие две строки задают две константы, называемые «output12» и «output14», которые представляют контакты GPIO на плате ESP32, которые будут использоваться для управления состоянием внешних устройств.

Эти три строки создают переменные для измерения времени, прошедшего с момента запуска сервера, и для установки тайм-аута для клиентских запросов.

В функции setup(), которая вызывается один раз при запуске ESP32, мы устанавливаем скорость последовательной связи, инициализируем два контакта GPIO в качестве выходов и устанавливаем на них уровень LOW. Затем мы подключаемся к сети Wi-Fi, используя ранее определенные SSID и пароль, и ждем подключения. После подключения мы печатаем IP-адрес ESP32 в окне монитора последовательной связи и запускаем веб-сервер.

Это основная функция цикла, которая выполняется неоднократно, пока ESP32 включен.

Эта строка прослушивает входящие клиентские подключения к веб-серверу ESP32. Если доступен клиент, он создает новый экземпляр класса WiFiClient и присваивает его переменной клиента.

Эта строка проверяет, подключился ли новый клиент к веб-серверу. Если клиент подключился, код внутри оператора if будет выполнен.

Эти две строки получают текущее время в миллисекундах и присваивают его переменным currentTime и previousTime.

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

Эта строка создает пустую строковую переменную с именем currentLine, которая будет хранить входящие данные от клиента.

Этот цикл while выполняется до тех пор, пока клиент подключен и время, прошедшее с момента предыдущей итерации цикла, меньше или равно переменной timeoutTime.

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

Этот код проверяет, является ли текущий символ символом новой строки (\n). Если да, он проверяет, пуста ли текущая строка. Если это так, это означает, что достигнут конец HTTP-запроса, и ESP32 должен отправить ответ клиенту.

Этот код отправляет клиенту HTTP-заголовки, указывающие, что ответом является HTML-страница.

Этот код обрабатывает запросы HTTP GET, полученные сервером, и на основе запроса включает или выключает контакты GPIO.

Объяснение HTML кода веб-сервера ESP32

Эти строки отображают текущее состояние GPIO 12 и GPIO 14 и отображают кнопку «ВКЛ» или «ВЫКЛ» в зависимости от ее текущего состояния.

Эта строка закрывает HTML-документ.

Эта строка завершает заголовки ответа HTTP.

Эти строки закрывают клиентское соединение и выводят сообщения на последовательный монитор.

Видео, демонстрирующее работу проекта

(Проголосуй первым!)
Загрузка...
2 095 просмотров

Комментарии

Веб-сервер на модуле ESP32 для управления светодиодом — 4 комментария

  1. Спасибо! Все толково изложено. Интересный пример. В ESP32 еще много чего есть (внешние прерывания, ШИМ (не только для сервопривода), АЦП, ЦАП? ...) весь инструмент хотелось бы освоить.., а вот понятных примеров, особенно на русскоязычных ресурсах, "кот наплакал".

    • К сожалению да. Я перевожу понемногу эти материалы с англоязычных источников, но в последнее время что то все меньше времени удается выделять на это

  2. Спасибо за урок. Как раз не хватает простых стартовых проектов, чтобы попробовать базовые возможности.

    • Спасибо и вам что оценили мой труд. Лично мне очень нравятся модули ESP32 и ESP8266 по соотношению цена/возможности, мне кажется их даже удобнее использовать начинающим чем платы Ардуино, умеют все то же самое, команды и среда программирования одна и та же, а вдобавок есть еще WiFi и Bluetooth, что значительно упрощает многие проекты.

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

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