Как настроить esp8266 через веб интерфейс

Уроки ESP8266: как контролировать всё через Интернет

В этом уроке по ESP8266 мы используем модуль ESP-01 для управления светодиодом через Интернет.

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

ESP8266 — дешевая, но эффективная платформа для общения через Интернет. Как использовать модуль ESP-01 для управления светодиодом через Интернет, модуль, который позволяет вам управлять любым электрическим устройством.

Он также прост в использовании с Ардуино. Пройдя этот урок, вы получите основные знания по управлению любым электрическим устройством через Интернет из любой точки мира!

Здесь мы будем использовать USB-to-TTL конвертер для программирования ESP8266 ESP-01. И мы будем использовать Arduino IDE для разработки веб-сервера для удаленного управления светодиодом.

ESP8266 можно контролировать из локальной сети Wi-Fi или из Интернета (после переадресации портов). Модуль ESP-01 имеет контакты GPIO, которые могут быть запрограммированы для включения или выключения светодиода или реле через Интернет. Модуль можно запрограммировать с помощью конвертера Arduino USB-to-TTL через последовательные контакты (RX, TX).

Подключение оборудования к вашему ESP8266

Мы можем использовать конвертер USB-to-TTL или использовать Arduino для программирования ESP8266. Вот три способа, которым вы можете следовать, чтобы загрузить код в ESP8266 — выберите тот, который вам подходит лучше всего. Обратитесь к диаграммам для каждого варианта и соответствующим образом настройте своё оборудование.

1. Конвертер USB-to-TTL с использованием разъема DTR

Если вы используете конвертер USB-to-TTL с выводом DTR, загрузка будет идти гладко. Пожалуйста, имейте в виду, что серийный монитор не будет работать при этом.

• USB TTL → ESP8266 ESP-01
• GND → GND
• TX → RX
• RX → TX
• RTS → RST
• DTR → GPIO0

2. Конвертер USB в TTL без вывода DTR

Чтобы подключить конвертер USB-TTL без вывода DTR, мы должны использовать ручную передачу. Для этого мы используем две кнопки — см. следующую диаграмму:

• USB TTL → ESP8266 ESP-01
• GND → GND
• TX → RX
• RX → TX
• Reset Button → RST
• Flash Button → GPIO0

При загрузке кода нажмите кнопку «Загрузки» (Flash). Держите кнопку нажатой, в тот момент когда вы нажимаете один раз кнопку «Перезагрузка/Сброс» (Reset).

Теперь вы можете отпустить кнопку Flash. ESP8266 теперь находится в режиме в котором вы сможете загрузить эскиз.

3. Использование Arduino Uno для загрузки кода в ESP8266

Вы можете использовать Arduino UNO для запуска кода ESP8266 ESP-01. При загрузке кода следуйте той же процедуре, что во втором пункте, — удерживайте кнопку «Загрузки» нажатой, когда вы нажимаете один раз на сброс, а после отпускаете кнопку Flash.

• ARDUINO → ESP8266 ESP-01
• GND → GND
• TX → TX
• RX → RX
• Кнопка Reset → RST
• Кнопка Flash → GPIO0

Загрузка кода ESP8266

Используйте любой из приведенных выше способов и откройте Arduino IDE, затем выберите плату ESP8266 в меню:

Tools → Board → Generic ESP8266 Module
(Инструменты → Плата → Модуль ESP8266)

Если вы не установили и не настроили плату ESP8266 для Arduino, сделайте это, выполнив шаги выше этого руководства. Затем можете идти дальше.

Теперь скопируйте приведенный ниже код в Arduino IDE и нажмите кнопку загрузки. Измените SSID на точку доступа Wi-Fi и измените пароль на свой пароль Wi-Fi и скомпилируйте.

Откройте последовательный монитор и откройте URL, показанный на вашем последовательном мониторе, через веб-браузер. Подключите GPIO 2 от ESP8266 к более длинному выводу светодиода. Теперь вы можете управлять светодиодом удаленно через Интернет!

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

Удалите все провода, которые были необходимы для загрузки кода. Модуль LM1117 используется для обеспечения регулируемого выхода 3,3 В. Это позволит вам сделать модуль ESP8266 или ESP-01 автономным.

Подключение ESP8266 к Интернету

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

Источник

Создание веб-сервера ESP8266 — код и схемы

Этот проект представляет собой пошаговое руководство, в котором показано, как создать автономный веб-сервер 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.

3. Введите http://arduino.esp8266.com/stable/package_esp8266com_index.json в поле «Additional boards manager urls», как показано на рисунке ниже. Затем нажмите кнопку «ОК».

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

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

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

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

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

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

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

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

Затем нажмите кнопку «Загрузить» в IDE Arduino и подождите несколько секунд, пока не увидите сообщение «Закончена загрузка» в левом нижнем углу.

Загрузка скетча в 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

Нажмите кнопку сброса ESP8266, и он выведет IP-адрес ESP на последовательный монитор

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

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

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

Если вы посмотрите на последовательный монитор, вы можете увидеть, что происходит в фоне. ESP получает HTTP-запрос от нового клиента — в данном случае, вашего браузера.

Вы также можете увидеть другую информацию о HTTP-запросе — эти поля называются полями HTTP-заголовка и определяют рабочие параметры HTTP-запроса.

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

Давайте проверим веб-сервер. Нажмите кнопку, чтобы включить GPIO 5. ESP получает запрос по URL-адресу / 5 / и включает светодиод 5.

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

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

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

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

Первое, что вам нужно сделать, это включить библиотеку ESP8266WiFi.

Как упоминалось ранее, вам нужно вставить свой ssid и пароль в следующие строки внутри двойных кавычек.

Затем вы устанавливаете свой веб-сервер на порт 80.

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

Затем вы создаете вспомогательные переменные для хранения текущего состояния ваших выходных данных. Если вы хотите добавить больше выходных данных и сохранить их состояние, вам нужно создать больше переменных.

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

Например, если вы нажали кнопку GPIO 5 ON, URL-адрес изменится на IP-адрес ESP, а затем / 5 / ON, и мы получим эту информацию в заголовке HTTP. Итак, мы можем проверить, содержит ли заголовок выражение GET / 5 / on.

Если он содержится, код печатает сообщение на последовательном мониторе, изменяет значение переменной output5State на on и включает светодиод.

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

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

Следующее, что вам нужно сделать, это создать веб-страницу. ESP отправит в ваш браузер ответ с текстом HTML для отображения веб-страницы.

Веб-страница отправляется клиенту с помощью функции client.println (). Вы должны ввести то, что вы хотите отправить клиенту в качестве аргумента.

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

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

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

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

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

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

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

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

Затем вы пишете абзац для отображения текущего состояния GPIO 5. Как вы можете видеть, мы используем переменную output5State, поэтому состояние изменяется мгновенно при изменении этой переменной.

Затем мы отображаем кнопку включения или выключения, в зависимости от текущего состояния GPIO.

Мы используем ту же процедуру для GPIO 4.

Закрытие соединения

Наконец, когда ответ заканчивается, мы очищаем переменную заголовка и прекращаем соединение с клиентом с помощью client.stop ().

Завершение

Теперь, когда вы знаете, как работает код, вы можете изменить код, чтобы добавить дополнительные выходные данные или изменить свою веб-страницу. Чтобы изменить свою веб-страницу, вам может понадобиться знание основ HTML и CSS. Вместо управления двумя светодиодами вы можете управлять реле для управления практически любыми электронными приборами.

ЧАСТЬ 2: СОЗДАНИЕ ВЕБ-СЕРВЕРА С ИСПОЛЬЗОВАНИЕМ NODEMCU

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

Источник