Веб-интерфейс Esp8266 для настройки Wi-Fi

Обновлено: 21.11.2024

Обновление до версии 3.0.0

Последняя версия 3.0.0 выпущена. Этот выпуск не имеет обратной совместимости со старыми версиями, поэтому необходимо внести некоторые изменения в существующие коды. Подробнее см. в Руководстве по миграции!

IotWebConf — это библиотека Arduino для ESP8266/ESP32, которая обеспечивает неблокирующий автономный веб-портал конфигурации WiFi/AP. Для ESP8266 IotWebConf требуется пакет платы esp8266 версии 2.4.2 или выше!

Подпишитесь на дискуссионный форум, если хотите быть в курсе последних новостей.

Также посетите экспериментальный сервер Discord.

ТРЕБУЕТСЯ ПОМОЩЬ! Если вы тестируете какие-либо ветки GIT, дайте мне отзыв, чтобы предоставить стабильные выпуски для всех.

Управляет настройками подключения WiFi,
Предоставляет пользовательский интерфейс портала конфигурации,
Вы можете расширить конфигурацию, добавив собственную сложную структуру свойств, которая автоматически сохраняется.
Возможность настройки нескольких подключений WiFi. (Попробуйте следующий, когда последний использовавшийся просто недоступен.)
Настройка HTML,
Поддержка проверки элементов свойств конфигурации,
Код пользователя будет уведомлен об изменении статуса с помощью методов обратного вызова,
Конфигурация (включая ваши пользовательские элементы), хранящаяся в EEPROM,
Поддержка обновлений встроенного программного обеспечения по воздуху,
Портал конфигурации остается доступным даже после подключения WiFi,
Автоматическое всплывающее окно "Войти в сеть" в вашем браузере (портал авторизации),
Без блокировки. Ваш пользовательский код не будет заблокирован на протяжении всего процесса.
Хорошо документированный заголовочный файл и примеры от простого до сложного уровня.

Идея состоит в том, что Thing предоставит веб-интерфейс, позволяющий изменять его конфигурацию. Например. для подключения к локальной сети Wi-Fi требуется SSID и пароль.

Если WiFi не настроен или настроенная сеть недоступна, он создает собственную точку доступа (точку доступа) и позволяет клиентам напрямую подключаться к ней для настройки.

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

IotWebConf сохраняет конфигурацию в "EEPROM". Вы можете расширить портал конфигурации своими пользовательскими элементами конфигурации. Эти элементы также будут поддерживаться IotWebConf.

Подробное описание см. в Руководстве пользователя!

Вы включаете свой IoT в первый раз — он переходит в режим AP (точки доступа) и ждет вас по адресу 192.168.4.1 с веб-интерфейсом для настройки локальной сети (и других конфигураций). Впервые при подключении к точке доступа используется пароль по умолчанию. Когда вы подключаетесь к точке доступа, ваше устройство, скорее всего, автоматически откроет страницу портала. (Мы называем это Captive Portal.) Когда настройка завершена, вы должны покинуть точку доступа. Устройство обнаруживает, что никто не подключен, и продолжает работать в обычном режиме.
Конфигурация WiFi изменена, например. Вещь перемещается в другое место. Когда Вещь не может подключиться к настроенному WiFi, она возвращается в режим точки доступа и ждет, пока вы измените конфигурацию сети. Когда никакая конфигурация не была выполнена, он продолжает пытаться подключиться с уже настроенными параметрами. Thing не выключит точку доступа, пока к ней подключен кто-либо, поэтому вы должны покинуть точку доступа после завершения настройки.
Вы хотите подключиться к точке доступа, но забыли настроенный пароль WiFi точки доступа, который вы установили ранее. Подключите соответствующий контакт на Arduino к земле с помощью кнопки. Удержание кнопки нажатой при включении устройства приводит к тому, что Thing запускает режим AP с паролем по умолчанию. (См. Случай 1. PIN-код настраивается в коде.)
Вы хотите изменить конфигурацию до того, как Thing подключится к Интернету — отлично! Thing всегда запускается в режиме AP и предоставляет вам временные рамки для подключения к нему и внесения любых изменений в конфигурацию. Каждый раз, когда кто-либо подключается к точке доступа (предоставляемой устройством), точка доступа будет оставаться включенной до тех пор, пока соединение не будет закрыто. Так что не торопитесь с изменениями, Вещь будет ждать вас, пока вы к ней подключитесь.
Вы хотите изменить конфигурацию во время выполнения — нет проблем. IotWebConf поддерживает работоспособность портала конфигурации даже после завершения соединения WiFi. В этом сценарии вы должны ввести имя пользователя «admin» и пароль (уже настроенный), чтобы войти в портал конфигурации.Обратите внимание, что пароль, предоставленный для аутентификации, не скрыт от устройств, подключенных к той же сети Wi-Fi. Вы можете принудительно перезагрузить Вещь, чтобы изменения вступили в силу.

На портале конфигурации вы можете дважды нажать на пароль, чтобы показать, что вы ввели. (Дважды нажмите еще раз, чтобы скрыть открытый текст.)
При доступе к порталу конфигурации через подключенную сеть WiFi появится диалоговое окно с именем пользователя и паролем. Пароль тот, который вы настроили для «Пароль AP». Имя пользователя "admin".
Для получения дополнительной информации обратитесь к Руководству пользователя!

IotWebConf и WiFiManager

WiFiManager от tzapu — отличная библиотека. Функции IotWebConf могут показаться очень похожими на WiFiManager. Однако IotWebConf пытается быть другим.

WiFiManager не позволяет настраивать несколько подключений WiFi. В IotWebConf есть способ определить больше подключений: если одно из них недоступно, следующее пробуется автоматически.
WiFiManager не управляет вашими пользовательскими свойствами. IotWebConf сохраняет вашу конфигурацию в «EEPROM».
WiFiManager не выполняет проверку. IotWebConf позволяет проверить изменения свойств, сделанные на портале конфигурации.
WiFiManager не поддерживает ESP32.
В WiFiManager нельзя одновременно использовать настройку запуска и настройку по требованию. При использовании IotWebConf портал конфигурации остается доступным через подключенный локальный WiFi.
WiFiManager предоставляет список доступных сетей и информационную страницу. Хотя эти функции очень хороши, IotWebConf старается сделать код простым. Таким образом, эти функции (пока) не предоставляются IotWebConf.
IotWebConf подходит для более продвинутых пользователей. Вы можете контролировать настройку веб-сервера, поведение поля ввода элемента конфигурации и проверку.

IotWebConf изначально создан для ESP8266. А между тем обнаружилось, что код можно адаптировать к ESP32. Есть две основные проблемы.

Настройка и расширение функциональности

IotWebConf создан для удобства разработчиков, предоставляя множество вариантов настройки. Подробнее см. HackingGuide.

TODO/запросы функций

Сообщается, что возможна нестабильная работа с разными вариантами lwIP. Если вы испытываете серьезные проблемы, попробуйте выбрать другой вариант lwIP для вашей платы в меню «Инструменты»! (Протестировано с версией "v2 Lower Memory".)

Хотя IotWebConf стартовал без влияния каких-либо других решений, в финальном коде можно найти некоторые сегменты, заимствованные из библиотеки WiFiManager.

Конфигурация WLAN во время выполнения в веб-интерфейсе ESP8266/ESP32 для Arduino.

Вещи, использованные в этом проекте

Компоненты оборудования

Приложения и онлайн-сервисы

История

Если вы используете ESP8266 или ESP32 с Arduino Core, вам наверняка будут выданы инструкции: WiFi.begin(SSID, Password) . Он может легко подключаться к WLAN, но точка доступа для подключения является фиксированной и негибкой.

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

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

Это библиотека Arduino, объединенная с классом ESP8266WebServer для ESP8266 и классом WebServer для ESP32. Простая реализация веб-интерфейса, представляющего собой WLAN для подключения ESP8266/ESP32 WiFi. С помощью этой библиотеки можно легко создать скетч, который подключается от ESP8266/ESP32 к точке доступа во время выполнения через веб-интерфейс без жестко заданного SSID и пароля.

Обзор

Не требуется предварительно закодированный SSID и пароль

Для подключения между ESP8266/ESP32 и WLAN нет необходимости заранее жестко задавать SSID и пароль в эскизе. Вы можете ввести SSID и пароль со смартфона через веб-интерфейс во время работы.

Простое использование

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

Сохранить установленное соединение

Данные аутентификации подключения в качестве учетных данных автоматически сохраняются в EEPROM ESP8266/ESP32, и вы можете выбрать прошлый SSID в меню AutoConnect.

Легко встроить

AutoConnect можно легко встроить в ваш эскиз, просто "begin" и "handleClient". API AutoConnect одинаков для ESP8266 и ESP32.

Живет с вашими эскизами

Эскизы, которые предоставляют веб-страницу с использованием ESP8266WebServer для ESP8266 или WebServer для ESP32, не будут мешать AutoConnect.AutoConnect может использовать уже созданный экземпляр ESP8266WebServer или объект WebServer или сам может назначить его.

Ардуино IDE

Текущий апстрим на уровне 1.8 или выше необходим. Пожалуйста, установите с официальной страницы загрузки Arduino IDE .

Ядро Arduino ESP8266

Его можно ввести в соответствии со следующей процедурой.

Установите библиотеку AutoConnect

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

В Arduino IDE перейдите в меню [Эскиз] -> [Включить библиотеку] -> [Управление библиотеками. ]
Затем откройте диспетчер библиотеки, выберите [Тема] и [Общение] в раскрывающемся списке.
Введите фильтр: Автоподключение .
Диспетчер библиотек отобразит то, что показано ниже.
Выберите последнюю версию, нажмите [Установить].

Вам также потребуется дополнительная библиотека под названием PageBuilder. Его также можно установить из менеджера библиотек, процедура аналогична описанной выше. Это [Сообщение] для [Темы], фильтр — [PageBuilder].

Загрузить эскиз

Откройте Arduino IDE, напишите скетч «simple.ino» и загрузите его. Особенность этого скетча в том, что SSID и пароль не закодированы.

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

Выполнить сначала

После сброса ESP8266 запускает его. Примерно через 30 секунд возьмите смартфон и откройте приложения для настройки Wi-Fi. Вы можете увидеть esp8266ap в списке " ВЫБЕРИТЕ СЕТЬ. ". Затем коснитесь esp8266ap и введите пароль 12345678 , автоматически появится экран, как показано ниже.

Значок гамбургера — это меню управления AutoConnect в правом верхнем углу. С помощью этого меню вы можете подключиться к точке доступа в любом месте.

Подключиться к точке доступа

Здесь нажмите " Настроить новую точку доступа ", после чего отобразится экран настройки SSID. Введите SSID и парольную фразу и нажмите " применить", чтобы начать подключение.

Установление соединения

После установления соединения появится экран текущего состояния. Он уже подключен к WLAN.

После установления соединения у вас есть два варианта следующего шага.

Во-первых, продолжает выполнение действия эскиза, сохраняя это соединение. Вы можете получить доступ к ESP8266 с подключенным IP-адресом из браузера на ПК, который участвует в той же беспроводной сети. Вы увидите веб-страницу как «Привет, мир».

Или в меню можно выбрать "СБРОС". ESP8266 сбрасывается и начинает перезагружаться. После завершения перезагрузки ESP8266 восстановит ранее установленное соединение.

Обычно

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

AutoConnect также запоминает прошлые точки доступа. Его можно выбрать в меню AutoConnect. Вам не нужно повторно вводить пароль.

Эффект AutoConnect не только для ESP8266 в качестве веб-сервера. У этого есть преимущество и для клиента WiFi.

AutoConnect также эффективен при публикации с помощью MQTT из разных точек измерения. Даже если SSID разные для каждой точки измерения, изменять скетч не нужно.

На этом шаге мы пытаемся опубликовать мощность сигнала Wi-Fi ESP8266 с помощью MQTT. Он использует брокера ThingSpeak для MQTT. ESP8266 публикует значение RSSI в канал, созданный на ThingSpeak, как клиент MQTT. Этот пример хорошо подходит для демонстрации полезности AutoConnect, поскольку значения RSSI обычно измеряются в каждой точке доступа. Всего несколько строк кода избавляют от необходимости загружать скетчи с разными SSID, переписанными для каждой точки доступа.

Дополнительная процедура

Клиент Arduino для MQTT — это PubSubClient, установите его в Arduino IDE отсюда. Если у вас уже установлена последняя версия, этот шаг не требуется.
Создайте канал на ThingSpeak.
Получите ключи API канала от ThingSpeak, поместите его ключи в эскиз.

ThingSpeak — это открытая платформа Интернета вещей. Он способен конфиденциально отправлять данные в облако и анализировать, визуализировать свои данные. Если у вас нет учетной записи ThingSpeak, вам понадобится эта учетная запись, чтобы продолжить. ThingSpeak бесплатен для использования в рамках этого примера. (по состоянию на 21 марта 2018 г.). Вы можете зарегистрироваться на странице регистрации ThingSpeak. (Но окончательное решение о создании учетной записи остается за вами. Создайте учетную запись на свой страх и риск.)

С этого момента шаги будут выполняться при условии, что учетная запись ThingSpeak доступна.

Создать канал на ThingSpeak

Войдите в ThingSpeak. Выберите [Каналы], чтобы отобразить Мои каналы, затем нажмите [Новый канал].

NodeMCU ESP8266 — это микроконтроллер со встроенным модулем Wi-Fi. Он очень прост в использовании, имеет небольшой вес и большую память и вычислительную мощность, чем Arduino. Идеально подходит для ваших подключенных проектов.
Основой IoT является подключение объектов к сети, такой как WiFi. Передатчик и WiFi-антенна, встроенные в микроконтроллер, позволяют подключаться к Интернету. Благодаря этому можно создать сервер, на котором размещена веб-страница, позволяющая удаленно управлять микроконтроллером. Эту страницу можно использовать для отображения значений, измеренных NodeMCU, или для управления входами/выходами микроконтроллера.

Оборудование

Компьютер
NodeMCU ESP8266 (или Wemos)
Кабель USB A, штекер/Micro B, штекер

Принцип работы

Плата NodeMCU ESP8266 содержит модуль ESP-12E, содержащий 32-разрядный микропроцессор. В него встроен приемопередатчик WiFi, который позволяет ему подключаться к существующим сетям или создавать собственную сеть.
Сеть WiFi — это радиосеть, работающая на частотах 2,45 ГГц и 5 ГГц.

Схема

Микроконтроллер имеет аналоговый вход и 16 GPIO (11 цифровых входов/выходов), доступных на выводах макетной платы. На 25 контактах:

1 аналоговый вход
4 выхода ШИМ
Некоторые зарезервированы для протоколов последовательной связи (SPI, I2C, Serial).

Необходимо иметь встроенный или добавленный к микроконтроллеру компонент Ethernet или Wifi, чтобы иметь возможность обмениваться данными по сети. Модуль ESP-12E имеет интерфейс Wi-Fi. Поэтому для подключения к Интернету не требуется никаких дополнительных компонентов.

подключите модуль Wi-Fi к сети
определить сервер
определить клиента

Библиотека, которая позволит нам управлять приемопередатчиком Wi-Fi, — это библиотека ESP8266WiFi.h. Чтобы загрузить код Arduino в карту, вы должны выбрать правильную карту и правильный порт. В нашем случае это карта NodeMCU 1.0 (модуль ESP-12E).

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

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

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

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

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

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

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

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

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

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

Проводка — подключение светодиодов к ESP8266 NodeMCU

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

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

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

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

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

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

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

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

Доступ к веб-серверу в режиме точки доступа

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

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

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

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

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

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

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

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

Внутри функции Setup()

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

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

Теперь, чтобы запустить наш сервер, мы вызываем метод begin объекта сервера.

Функция внутри цикла()

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

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

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

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

Затем элемент области просмотра делает веб-страницу отзывчивой в любом веб-браузере. В то время как тег title устанавливает заголовок страницы.

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

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

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

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

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

Пояснение кода

Если вы наблюдаете этот код с предыдущим кодом, единственное отличие состоит в том, что мы не устанавливаем программную точку доступа, вместо этого мы присоединяемся к существующей сети с помощью функции 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() на последовательном мониторе.

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