В этой статье о ESP32 мы рассмотрим, как подключить плату ESP32 к точке доступа и спроектировать ее веб-сервер. Используя этот веб-сервер, мы будем управлять светодиодами и приборами переменного тока с помощью релейного модуля.
Содержание:
- Веб-сервер ESP32
- Как создать веб-сервер ESP32 с помощью Arduino IDE
- Код веб-сервера ESP32
- IP-адрес веб-сервера ESP32
- Управление светодиодами с помощью веб-сервера ESP32
- Интерфейс рабочего стола
- Мобильный интерфейс
- Управление устройствами переменного тока с помощью веб-сервера ESP32
- Заключение
1. Веб-сервер ESP32.
На веб-сервере имеется специальная программа, которая может обрабатывать и отправлять веб-страницы веб-клиентам. Чтобы открыть веб-сайт, мы используем веб-браузер. Этот веб-браузер также называется веб-клиентом. Веб-сайт, который вы хотите просмотреть, хранится на другом компьютере, называемом веб-сервером.
Для общения друг с другом веб-сервер и веб-клиент используют общий язык, называемый HTTP. Вот как это работает: веб-клиент запрашивает у веб-сервера веб-страницу с помощью HTTP-запроса. Веб-сервер отправляет обратно запрошенную веб-страницу. Если веб-страница отсутствует, вы увидите сообщение об ошибке.
В ESP32 мы можем спроектировать веб-сервер, поскольку ESP32 может не только подключаться к другим устройствам по сети, но также создавать свой веб-сервер и отвечать на полученные запросы. Все это возможно, поскольку ESP32 может работать в трех разных режимах:
- Станция
- Точка доступа
- И станция, и точка доступа
Вы можете прочитать эту статью, чтобы получить представление обо всех трех режимах ESP32:
Как настроить точку доступа ESP32 (AP) с помощью Arduino IDE
2. Как создать веб-сервер ESP32 с помощью Arduino IDE
Чтобы создать веб-сервер ESP32 с помощью Arduino IDE, вы можете подключить ESP32 к точке доступа и сгенерировать IP-адрес для веб-сервера. Вы можете применить HTML и CSS для разработки интерфейса вашего сервера.
Как только вы поймете, как работает точка доступа ESP32, вы сможете легко спроектировать веб-сервер ESP32, используя код Arduino IDE. Код веб-сервера ESP32 использует библиотеку Wi-Fi ESP32. Это облегчает нашу работу, так как данная библиотека содержит все важные функции, необходимые для подключения ESP32 к точке доступа.
Давайте спроектируем веб-сервер ESP32, используя код Arduino IDE.
3. Код веб-сервера ESP32.
Код веб-сервера ESP32 включает соединение ESP32 с точкой доступа и получение IP-адреса сервера. Как только вы получите IP-адрес, вам необходимо подключиться к той же сети, чтобы получить доступ к веб-серверу ESP32. Отсюда вы можете управлять светодиодами и другими устройствами.
Откройте Arduino IDE и подключите к ней плату ESP32:
Установка платы ESP32 в Arduino IDE
После подключения платы ESP32 загрузите на нее следующий код.
/**************Linuxhint.com
Веб-сервер ESP32 для управления светодиодами
**************/
// Импортируйте библиотеку для Wi-Fi-соединение
#include
// Введите имя и пароль Wi-Fi
константный символ * ссид = 'ЭСП32' ;
константный символ * пароль = '123456789' ;
// Выберите номер порта для веб-сервер
Сервер Wi-FiServer ( 80 ) ;
// Создайте переменную для хранения веб-запроса.
Строковый заголовок;
// Создайте переменные для хранения состояния выходов.
Строка вывода26State = 'ВЫКЛЮЧЕННЫЙ' ;
Строка вывода27State = 'ВЫКЛЮЧЕННЫЙ' ;
// Назначьте выходные контакты переменным
константный int вывод26 = 26 ;
константный int вывод27 = 27 ;
беззнаковый длинный currentTime = миллис ( ) ;
беззнаковый длинный предыдущийВремя = 0 ;
// Выбрать время предел для веб-запрос в миллисекунды
константный длинный таймаутВремя = 2000 г. ;
аннулировать настройку ( ) {
Серийный.begin ( 115200 ) ;
// Установите выходные контакты как результаты
контактный режим ( выход26, ВЫХОД ) ;
контактный режим ( выход27, ВЫХОД ) ;
// Выключите выходы
цифровая запись ( выход26, НИЗКИЙ ) ;
цифровая запись ( выход27, НИЗКИЙ ) ;
// Подключитесь к сети Wi-Fi
Серийный.принт ( 'Присоединенный к ' ) ;
Серийный.println ( SSD ) ;
Wi-Fi.begin ( ssid, пароль ) ;
// Ждать до соединение установлено
пока ( Статус Wi-Fi ( ) ! = WL_CONNECTED ) {
задерживать ( 500 ) ;
Серийный.принт ( '.' ) ;
}
Серийный.println ( '' ) ;
Серийный.println ( «Wi-Fi подключен». ) ;
Серийный.println ( 'Айпи адрес: ' ) ;
Серийный.println ( WiFi.localIP ( ) ) ;
сервер.begin ( ) ;
}
пустой цикл ( ) {
Клиент WiFiClient = server.available ( ) ; // Проверять для новые клиенты
если ( клиент ) { // Если клиент подключен,
текущеевремя = миллис ( ) ;
предыдущееВремя = ТекущееВремя;
Серийный.println ( «Новый клиент». ) ; // Уведомить последовательный порт
Строка currentLine = '' ; // Создайте строку для хранения данных клиента.
пока ( клиент.подключен ( ) && текущее время - предыдущее время = 0 ) {
Серийный.println ( «GPIO 26 включен» ) ;
вывод26Состояние = 'НА' ;
цифровая запись ( выход26, ВЫСОКИЙ ) ;
} еще если ( заголовок.indexOf ( 'ПОЛУЧИТЬ /26/выкл' ) > '=' 0 ) {
Серийный.println ( «GPIO 26 выключен» ) ;
вывод26Состояние = 'ВЫКЛЮЧЕННЫЙ' ;
цифровая запись ( выход26, НИЗКИЙ ) ;
} еще если ( заголовок.indexOf ( 'GET /27/он' ) > '=' 0 ) {
Серийный.println ( «GPIO 27 включен» ) ;
вывод27Состояние = 'НА' ;
цифровая запись ( выход27, ВЫСОКИЙ ) ;
} еще если ( заголовок.indexOf ( «ПОЛУЧИТЬ /27/выкл» ) > '=' 0 ) {
Серийный.println ( «GPIO 27 выключен» ) ;
вывод27Состояние = 'ВЫКЛЮЧЕННЫЙ' ;
цифровая запись ( выход27, НИЗКИЙ ) ;
}
client.println ( '' ) ;
client.println ( '' ) ;
client.println ( '<ссылка отн=' икона ' href=' данные:, '>' ) ;
// CSS для оформления кнопок
client.println ( '