Урок 2. Подключаем DHT11, DHT22 к ESP32, ESP8266. Показание на веб-странице.
Вы когда-нибудь хотели, чтобы датчики, разбросанные по всей квартире или дому, регулярно отправляли данные температуры и влажности на веб-сервер, и их можно будет посмотреть в любое время? Тогда этот урок ESP32 может стать для вас отправной точкой! В этом уроке ESP32 используется в качестве устройства управления, которое легко подключается к существующей сети Wi-Fi и создает веб-сервер. Когда любое подключенное устройство обращается к этому веб-серверу, ESP32 считывает температуру и относительную влажность с датчиков DHT11, DHT22 и отображает их в веб-браузере этого устройства. Вас заинтересовало, как это реализовать? Тогда давайте начнем!
Это может показаться устрашающим, но есть несколько уроков, с которыми вам следует ознакомиться, прежде чем приступать к этому уроку:
Схема подключения датчика DHT11, DHT22 к ESP32.
Подключить датчик DHT11, DHT22 к ESP32 довольно просто. Начните с размещения ESP32 на макетной плате.
Теперь поместите датчик на макетную плату рядом с ESP32. Подключите вывод VCC на датчике к выводу 3,3 В на ESP32, и соедините контакты GND платы и датчика. Также подключите контакт данных датчика к контакту 4 на ESP32.
Когда вы закончите, у вас должно получиться что-то похожее на изображение, показанное ниже.
Установка библиотеки датчиков DHT.
Взаимодействие с датчиками DHT11, DHT22— это достаточно сложно, поскольку у них есть собственный однопроводной протокол для передачи данных. И этот протокол требует точного времени. К счастью, нам не нужно сильно об этом беспокоиться, потому что мы собираемся использовать библиотеку DHT от Adafruit, которая позаботится почти обо всем. Библиотека работает как на архитектуре Arduino, так и на ESP.
Чтобы установить библиотеку, перейдите в Скетч> Подключить библиотеку> Управлять библиотеками . Подождите, пока диспетчер библиотек загрузит индекс библиотек и обновит список установленных библиотек.
Отфильтруйте результаты поиска, набрав «DHT». Должна быть пара записей. Ищите библиотеку датчиков DHT от Adafruit. Щелкните эту запись и выберите «Установить».
Библиотека датчиков DHT использует серверную часть поддержки Adafruit Sensor. Итак, найдите в диспетчере еще одну библиотеку «Adafruit Unified Sensor» и установите её тоже.
Создание веб-сервера ESP32 в режиме WiFi станции (STA).
Как следует из заголовка, мы собираемся настроить ESP32 в режим станции (STA) и создать веб-сервер для отображения веб-страницы для любого подключенного клиента в существующей сети.
Прежде чем вы отправитесь загружать скетч, вам нужно внести одно изменение, чтобы у вас все работало. Вам необходимо изменить следующие две переменные, указав ваши сетевые учетные данные, чтобы ESP32 смог установить соединение с существующей сетью.
После чего загрузите код, а затем мы разберем его более подробно.
Доступ к веб-серверу.
После загрузки скетча откройте Serial Monitor со скоростью 115200 бод, и нажмите кнопку RESET на ESP32. Если все в порядке, он выведет динамический IP-адрес, полученный от вашего маршрутизатора, и покажет сообщение о запуске HTTP-сервера.
Затем загрузите браузер и укажите ему IP-адрес, отображаемый в последовательном мониторе порта. ESP32 должен отдать веб-страницу, показывающую температуру и относительную влажность.
Подробное объяснение кода.
Скетч начинается с подключения библиотеки WiFi.h. Эта библиотека предоставляет специальные методы WiFi для ESP32, которые мы вызываем для подключения к сети. После этого мы также подключаем библиотеку WebServer.h, в которой есть несколько доступных методов, которые помогут нам настроить сервер и обрабатывать входящие HTTP-запросы, не беспокоясь о реализации на низком уровне. Наконец, мы подключаем библиотеку DHT.h.
Далее нам нужно определить тип используемого датчика DHT. Раскомментируйте одну из строк ниже! В моем примере я использую датчик DHT11.
Поскольку мы настраиваем ESP32 в режиме станции (STA), он подключится к существующей сети Wi-Fi. Следовательно, вам необходимо указать ему SSID и пароль вашей сети. Что и сделали перед загрузкой кода в ESP32.
Затем, объявляем объект библиотеки WebServer, чтобы получить доступ к его функциям. Конструктор этого объекта принимает порт (который сервер будет слушать) в качестве параметра. Поскольку 80 — порт по умолчанию для HTTP, мы будем использовать это значение. Теперь вы можете получить доступ к серверу без необходимости указывать порт в URL-адресе.
Затем нам нужно определить номер контакта ESP32, к которому подключен контакт Data нашего датчика, и создать объект DHT. Таким образом, мы можем получить доступ к специальным функциям, связанным с библиотекой DHT.
Создаем две переменные с плавающей запятой. Для температуры и влажности.
Функция Setup ().
Мы настраиваем свой HTTP-сервер перед его запуском. Затем, мы открываем последовательное соединение для отладки и устанавливаем GPIO на INPUT. Нам также необходимо инициализировать объект DHT с помощью begin() функции.
Теперь нам нужно подключиться к сети Wi-Fi с помощью WiFi.begin() функции. Функция принимает в качестве параметра SSID (сетевое имя) и пароль.
Пока ESP32 пытается подключиться к сети, мы можем проверить статус подключения с помощью функции WiFi.status () .
Как только ESP32 подключится к сети, скетч выведет IP-адрес в последовательный монитор порта, назначенный ESP32, за что отвечает функция WiFi.localIP.
Чтобы обрабатывать входящие HTTP-запросы, нам нужно указать, какой код выполнять при вызове конкретного URL. Для этого мы используем метод on . Этот метод принимает два параметра. Первый — это URL-путь, а второй — имя функции, которую мы хотим выполнить при переходе по этому URL-адресу.
Приведенный ниже код указывает, что когда сервер получает HTTP-запрос по корневому пути ( / ), он запускает handle_OnConnect функцию. Обратите внимание, что указанный URL-адрес является относительным путем.
Мы не указали, что должен делать сервер, если клиент запрашивает любой URL-адрес, отличный от указанного в server.on(). Он должен ответить HTTP-статусом 404 (Not Found) и сообщением для пользователя. Мы также помещаем в функцию и используем server.onNotFound(), чтобы сообщить, что она должна выполнить ее, когда получит запрос на URI, который не был указан в server.on.
Теперь, чтобы запустить наш сервер, мы вызываем метод begin объекта server.
Основной цикл Loop().
Чтобы обрабатывать входящие HTTP-запросы, нам нужно вызвать handleClient() метод объекта сервера.
Затем, нам нужно создать функцию, которую мы прикрепили к корневому (/) URL с помощью server.on. Помните? В начале этой функции мы получаем значения температуры и влажности с датчика. Чтобы ответить на HTTP-запрос, мы используем метод send . Хотя метод может быть вызван с другим набором аргументов, его простейшая форма состоит из кода ответа HTTP.
В нашем случае, мы отправляем код 200 (один из кодов состояния HTTP), который соответствует ответу OK — ответ получен. Затем, мы указываем тип содержимого как «текст / html» и, наконец, вызываем пользовательскую функцию SendHTML (), которая создает динамическую HTML-страницу, содержащую значения температуры и влажности.
Точно так же нам нужно создать функцию для обработки страницы ошибки 404.
Отображение веб-страницы HTML.
SendHTML() Функция отвечает за создание веб-страницы всякий раз, когда веб-сервер ESP32 получает запрос от веб-клиента. Он просто объединяет HTML-код в большую строку и возвращает server.send() функцию, которую мы обсуждали ранее. Функция принимает значения температуры и влажности в качестве параметров для динамической генерации содержимого HTML.
Первый текст, который вы всегда должны отправить , указывающий на то, что мы посылаем HTML код.
Затем элемент viewport заставляет веб-страницу загружаться в любом браузере. В то время как тег title устанавливает заголовок страницы.
Стилизация веб-страницы.
Затем у нас есть CSS для стилизации внешнего вида веб-страницы. Мы выбираем шрифт Helvetica, определяем контент, который будет отображаться, в виде встроенного блока, и выравниваться по центру.
Установка заголовка веб-страницы.
Далее задается заголовок веб-страницы. Вы можете изменить этот текст на любой, который подходит для вашего приложения.
Отображение температуры и влажности на веб-странице.
Чтобы динамически отображать значения температуры и влажности, мы помещаем эти значения в тег абзаца «p». Эти значения преобразуются в целые числа путем приведения типа переменной (int). Для отображения символа градуса мы используем HTML-объект & deg;
Стилизация веб-страницы, чтобы выглядело более профессионально.
Программисты часто пугаются дизайна, но немного усилий может сделать вашу веб-страницу более привлекательной и профессиональной. Скриншот ниже даст вам общее представление о том, что мы собираемся делать.
Давайте применим некоторый стиль к предыдущей HTML-странице. Для начала скопируйте и вставьте код ниже, полностью заменим SendHTML() функцию. Попробуйте новый код, а затем мы его детально разберем.
Мы уже знаем, что объявление сообщает браузеру, что мы отправляем HTML-код, а элемент области просмотра заставляет веб-страницу реагировать. Единственное дополнение — мы собираемся использовать шрифты Google . У Google есть сотни веб-шрифтов, которые бесплатны для коммерческого и личного использования.
Для нашей веб-страницы мы будем использовать Google веб-шрифт Open Sans. Шрифт Google встроен с помощью тега ссылки в вашего HTML-документа. Для нашей страницы мы выбрали 300 (светлый), 400 (обычный) и 600 (жирный) шрифт. Вы можете выбрать столько, сколько хотите, но имейте в виду, что выбор неиспользуемого шрифта увеличивает время загрузки страницы. Вы также можете добавить курсив, просто добавив символ «i» в конце веса шрифта, например: «400i» будет отображать курсив.
Обратите внимание, что вы не увидите шрифт Google без активного подключения к Интернету на устройстве, на котором вы собирайтесь получить доступ к этой странице. Шрифты Google загружаются на лету.
Затем, мы собираемся применить шрифт Open Sans для всего нашего HTML. Нам также необходимо указать sans-serif в качестве резервного шрифта, чтобы обеспечить максимальную совместимость между браузерами / операционными системами. Если браузер не поддерживает первый шрифт, он пробует следующий шрифт.
Далее мы выводим показание температуры с помощью значка.
Значок температуры, на самом деле, представляет собой масштабируемую векторную графику (SVG), определенную в теге . Создание SVG не требует особых навыков программирования. Вы можете использовать Google SVG Editor для создания графики для своей страницы. После значка мы собираемся показать фактическое значение температуры с датчика.
Далее мы выведем показания влажности с помощью этойиконки.
Опять же, это SVG. После вывода значения влажности закроем все открытые теги, такие как body и html.
Улучшение кода — автоматическое обновление страницы.
Одно из улучшений, которое можно сделать — это автоматическое обновление страницы для обновления значения датчика.
Добавив один метатег в HTML-документ, можно указать браузеру автоматически перезагружать страницу с заданным интервалом.
Поместите этот код в тег вашего документа, этот метатег будет заставлять браузер обновлять страницу каждые две секунды.
Динамическая загрузка данных датчика с помощью AJAX.
Обновление веб-страницы не слишком практично, если у вас тяжелая веб-страница. Лучшим методом является использованиеJavascript и Xml ( AJAX ), чтобы мы могли запрашивать данные с сервера асинхронно (в фоновом режиме) без обновления страницы.
Объект XMLHttpRequest в JavaScript обычно используется для выполнения AJAX на веб-страницах. Он выполняет тихий запрос GET на сервере и обновляет элемент на странице. AJAX — это не новая технология или другой язык, это просто существующие технологии, используемые по-новому. Помимо этого, AJAX также позволяет:
- Запросить данные с сервера после загрузки страницы
- Получать данные с сервера после загрузки страницы
- Отправка данных на сервер в фоновом режиме
Вот сценарий AJAX, который мы будем использовать. Поместите этот скрипт непосредственно перед закрытием тега .
Скрипт начинается с тега \n»; ptr +=» \n»; ptr +=» \n»; ptr +=»
ESP8266. Информация о температуре в помещении:
ESP32. Информация о температуре в помещении:
Wi-Fi термометр на ESP8266 + DS18B20 всего за 4$
В последнее время всё большую популярность набирают Wi-Fi модули на основе ESP8266. Я тоже решил приобщиться к прекрасному, задумав реализовать термометр, отдающий данные по HTTP. Итак, поехали.
Hardware
Особенно приглянулись:
ESP-01 — удобен для прототипирования (есть разъем под макетку), но выведен всего 1 GPIO;
ESP-03 — много выводов, плюс керамическая антенна;
ESP-07 — то же самое что и ESP-03 + экран и разъем под внешнюю антенну.
DS18B20 
Как вариант, можно купить уже с проводом и в герметичном корпусе.
Питание 3.3В
Необходим источник питания как минимум на 200мА.
USB-UART
Для прошивки и отладки. Я использовал преобразователь на основе CP2102
Подключение
Подключаем питание на ESP8266. На ногу CH_PD так же подаем плюс.
Внимание! У кого модули не ESP-01, необходимо подать GPIO15 — GND; GPIO2 -3.3V. У ESP-01 это уже сделано. RX и TX подключаем к USB-UART преобразователю для прошивки и отладки кода:
Подключаем DS18B20 к ESP8266. Если смотреть на маркировку: левая — земля, средняя — сигнал (GPIO12 на ESP-03), если у вас ESP-01, подключайте к GPIO0, правая — питание(3.3V). Между питанием и сигнальной линией желательно подключить резистор 4.7 кОм (у меня работает и с 10 кОм):
thingspeak.com
Регистрируемся на thingspeak.com, создаем канал, копируем оттуда 16-символьный ключ. Он нам пригодится для отправки данных о температуре в облако.
Прошивка NodeMCU
NodeMCU — это прошивка, позволяющая запускать Lua скрипты на ESP8266. Качаем последний NodeMCU Flasher и запускаем его.
Подключаем GPIO0 на землю. Выбираем нужный COM порт и скорость 74880 или 115200 (как я понимаю, у некоторых версий ESP8266 бутлоадер работает на 74880). Нажимаем Flash и передергиваем питание на ESP8266. Если прошивка не запускается, проверяем корректность подключения RX,TX, запустив PuTTY на скорости 74880. В момент подачи питания в консоль должна валится строка вроде «ets Jan 8 2013,rst cause:1, boot mode:(1,0)«. После корректной прошивки отключаем GPIO0 от земли:
Заливка Lua скриптов и запуск
Скачиваем и запускаем LuaLoader. Выбираем COM-порт и скорость 9600, если нет соединения — пробуем передернуть питание у модуля ESP8266. Проверяем соединение, нажав на кнопку ChipID. В консоль должен вывестись идентификатор чипа.
Заливаем нужные файлы (кнопка UploadFile):
1. ds18b20.lua — библиотека для взаимодействия с DS18B20;
2. httpsender.lua — наш скрипт, читающий данные температуры и отправляющий их на thingspeak.com. Не забываем заменить YOURAPIKEY на свой ключ.
gpio=6 — в случае подключения датчика к GPIO12, в случае GPIO0 — gpio=3 (таблица):
3. init.lua — скрипт инициализирующий WiFi и запускающий httpsender.lua. Не забываем прописать свои SSID и пароль для WiFi:
Планы
Это первый опыт работы с ESP8266. В планах попробовать следующее:
1. Найти альтернативу thingspeak. Графики хочется двигать и масштабировать. Может, кто-то знает аналоги?
2. Датчик влажности (возможно, DHT22). Вроде уже есть в стандартных библиотеках.
3. Датчик CO2 на основе датчика K-30.
4. Управляемый рассвет без дополнительного контроллера, управление с ESP8266. Вдохновила публикация «Искусственный рассвет».