Меню

Esp8266 датчик температуры dht11

Взаимодействие ESP8266 NodeMCU с датчиками температуры и влажности DHT11 и DHT22 и вывод показаний, используя веб-сервер

Вы когда-нибудь хотели, чтобы датчики были разбросаны по всему вашему дому и саду, регулярно сообщая о своей температуре центральному серверу? Тогда этот IoT проект может стать для вас хорошей отправной точкой! Данный проект использует ESP8266 NodeMCU в качестве управляющего устройства, которое легко подключается к существующей сети Wi-Fi и создает веб-сервер. Когда какое-либо подключенное устройство получает доступ к этому веб-серверу, ESP8266 NodeMCU считывает температуру и относительную влажность с датчика DHT11, DHT22/AM2302 и отправляет его в красивом виде в веб-браузер этого устройства. Интересно? Давайте начнем!

Взаимодействие ESP8266 NodeMCU с датчиками температуры и влажности DHT11 и DHT22 и вывод показаний, используя веб-сервер

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

Подключение датчика DHT11, DHT22/AM2302 к плате ESP8266 NodeMCU

Подключить датчик DHT11/DHT22/AM2302 к ESP8266 NodeMCU довольно просто. Начните с установки NodeMCU на макетную плату, чтобы каждая сторона платы NodeMCU была на отдельной стороне макетной платы.

Теперь установите датчик на макетную плату, в стороне от NodeMCU. Подключите вывод VCC датчика к выводу 3,3V на NodeMCU и соедините выводы земли датчика и платы. Также подключите вывод данных датчика к выводу D8 платы ESP8266 NodeMCU. Наконец, нам нужно установить подтягивающий резистор 10 кОм между линией VCC и линией данных, чтобы на ней поддерживался высокий логический уровень для корректной связи между датчиком и NodeMCU. Если у вас датчик установлен на отдельную плату, возможно, вам не нужно добавлять какие-либо внешние подтягивающие резисторы. В этом случае датчик поставляется уже со встроенным подтягивающим резистором.

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

Рисунок 1 – Подключение DHT11, датчика температуры и влажности, к ESP8266 NodeMCU Рисунок 2 – Подключение DHT22, датчика температуры и влажности, к ESP8266 NodeMCU

Установка библиотеки датчиков DHT

Связь с датчиками DHT11, с датчиками DHT22/AM2302 – это сложная задача, поскольку для передачи данных они используют собственный однопроводный протокол. Этот протокол требует точной синхронизации. К счастью, нам не нужно беспокоиться об этом, потому что мы собираемся использовать библиотеку DHT от Adafruit, которая позаботится почти обо всем. Эта библиотека настолько мощна, что работает как на архитектуре Arduino, так и на архитектуре ESP.

Чтобы установить библиотеку, перейдите в меню Скетч (Sketch) → Подключить библиотеку (Include Library) → Управлять библиотеками… (Manage Libraries. ). Подождите, пока менеджер библиотек загрузит индекс библиотек и обновит список установленных библиотек.

Рисунок 3 – Установка библиотеки Arduino – выбор управления библиотеками в Arduino IDE

Отфильтруйте результаты поиска, введя « DHT sensor ». Должна остаться пара записей. Найдите DHT sensor library by Adafruit. Нажмите на эту запись, а затем выберите Установить (Install).

Рисунок 4 – Установка библиотеки Adafruit DHT

Библиотека датчиков DHT использует Adafruit Sensor support backend. Поэтому поищите в менеджере библиотек Adafruit Unified Sensor и установите его тоже (возможно, придется немного прокрутить).

Создание веб-сервера NodeMCU ESP8266, используя Wi-Fi режим Station (STA)

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

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

Читайте также:  Startvolt датчик кислорода рено логан

Прежде чем приступить к загрузке скетча, чтобы он у вас заработал, необходимо внести одно изменение. Чтобы ESP8266 NodeMCU мог установить соединение с существующей сетью, вам необходимо изменить следующие две переменные в соответствии с учетными данными вашей сети.

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

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

После загрузки скетча откройте монитор последовательного порта со скоростью 115200 бит/с и нажмите кнопку RESET на NodeMCU. Если всё в порядке, он выведет динамический IP адрес, полученный от вашего маршрутизатора, и покажет сообщение о том, что HTTP сервер запущен.

Рисунок 5 – Монитор последовательного порта – сервер запущен

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

Рисунок 6 – Веб-страница с температурой и влажностью с датчика DHT11/DHT22/AM2302 на веб-сервере ESP8266 (без CSS)

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

Скетч начинается с включения библиотеки ESP8266WiFi.h. Эта библиотека предоставляет специальные методы ESP8266 NodeMCU для работы с Wi-Fi, которые мы вызываем для подключения к сети. После этого мы также включили библиотеку ESP8266WebServer.h, в которой есть несколько методов, которые помогут нам настроить сервер и обрабатывать входящие HTTP запросы, не беспокоясь о деталях низкоуровневой реализации. И, наконец, мы включаем библиотеку DHT.h.

Далее нам нужно определить тип используемого датчика DHT. Раскомментируйте одну из строк ниже!

Поскольку мы настраиваем ESP8266 NodeMCU в режиме станции (STA), он подключится к существующей сети Wi-Fi. Следовательно, нам необходимо предоставить SSID и пароль вашей сети.

Далее мы объявляем объект библиотеки ESP8266WebServer , чтобы получить доступ к ее функциям. Конструктор этого объекта в качестве параметра принимает номер порта (который сервер будет прослушивать). Так как 80 – это порт по умолчанию для HTTP, мы будем использовать это значение. Теперь вы можете получить доступ к серверу, не указывая порт в URL.

Затем нам нужно определить номер вывода ESP8266 NodeMCU, к которому подключен вывод данных датчика, и создать объект DHT, чтобы было можно получить доступ к специальным функциям, связанным с библиотекой DHT.

Две переменные типа float , а именно Temperature и Humidity объявляются для хранения значений соответственно температуры и влажности.

Внутренности функции setup()

Перед запуском настраиваем HTTP сервер. Прежде всего, для отладки открываем последовательное соединение и устанавливаем порты GPIO на вход. Также нам нужно инициализировать объект DHT с помощью функции begin() .

Теперь нам нужно подключиться к сети Wi-Fi с помощью функции WiFi.begin() . Данная функция принимает в качестве параметров SSID (имя сети) и пароль.

Пока ESP8266 пытается подключиться к сети, мы проверяем состояние подключения с помощью функции WiFi.status() .

Как только ESP8266 будет подключен к сети, скетч печатает IP адрес, присвоенный для ESP8266, отображая значение WiFi.localIP() в мониторе последовательного порта.

Чтобы обрабатывать входящие HTTP запросы, нам нужно указать, какой код выполнять при введении определенного URL. Для этого мы используем метод on() . Этот метод принимает два параметра. Первый – это URL путь, а второй – имя функции, которую мы хотим выполнить при входе на этот URL.

Приведенный ниже код указывает, что когда сервер получает HTTP запрос по корневому пути (/), он запускает функцию handle_OnConnect() . Обратите внимание, что указанный URL адрес представляет собой относительный путь.

Читайте также:  K000684 датчик износа тормозных колодок применяемость

Мы не указали, что должен делать сервер, если клиент запрашивает какой-либо URL, отличающийся от указанных в server.on() . Он должен выдать ответ с HTTP статусом 404 (Not Found, «страница не найдена») и сообщением для пользователя. Помещаем эти действия в отдельную функцию и используем метод server.onNotFound() , чтобы указать серверу, что он должен выполнить, когда получит запрос на URI, который не был задан с помощью server.on() .

Теперь, чтобы запустить сервер, вызываем метод begin() для объекта server .

Внутренности функции loop()

Чтобы обработать реальные входящие HTTP запросы, нам нужно вызвать метод handleClient() объекта server .

Далее нам нужно создать функцию, которую мы прикрепили к корневому ( / ) URL с помощью server.on() . Помните? В начале этой функции мы получаем от датчика значения температуры и влажности. Чтобы ответить на HTTP запрос, используем метод send() . Хотя этот метод можно вызывать с другим набором аргументов, его самая простая форма состоит из HTTP кода ответа, типа контента и самого контента.

В нашем случае мы отправляем код 200 (один из кодов состояния HTTP), который соответствует ответу OK. Затем мы указываем тип контента как » text/html «, и, наконец, мы вызываем пользовательскую функцию SendHTML() , которая создает динамическую HTML страницу, содержащую значения температуры и влажности.

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

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

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

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

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

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

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

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

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

Отображение температуры и влажности на веб-странице

Чтобы динамически отображать значения температуры и влажности, мы помещаем эти значения в тег параграфа. Эти значения преобразуются в целое число с помощью приведения типов. Для отображения символа градуса мы используем HTML сущность ° .

Стилизация веб-страницы, чтобы она выглядела более профессионально

Программисты, подобные нам, часто боятся дизайна – но небольшое усилие может сделать вашу веб-страницу более привлекательной и профессиональной. Скриншот, приведенный ниже, даст вам базовое представление о том, что мы собираемся делать.

Рисунок 7 – Профессиональный внешний вид веб-страницы с сервера ESP8266 с температурой и влажностью от DHT11/DHT22/AM2302

Довольно красиво, правда? Давайте без лишних слов, применим стиль к нашей предыдущей HTML странице. Для начала скопируйте и вставьте приведенный ниже код, чтобы заменить в приведенном выше скетче функцию SendHTML() . Попробуйте новый скетч, а затем мы выполним его детальный разбор.

Мы уже знаем, что объявление сообщает браузеру, что мы отправляем HTML код, а элемент viewport делает веб-страницу адаптивной. Единственное дополнение здесь заключается в том, что мы будем использовать шрифты google. Google имеет сотни веб-шрифтов и бесплатен для коммерческого и личного использования. Прекрасно!

Читайте также:  Датчик давления наддува турбины мерседес спринтер 906

На нашей веб-странице мы будем использовать шрифт Open Sans. Шрифт Google встраивается с помощью тега link в блоке HTML документа. Для нашей страницы мы выбрали следующие веса (толщину) шрифта: 300 (легкий), 400 (обычный) и 600 (жирный). Вы можете выбрать столько, сколько захотите, но имейте в виду, что выбор ненужных весов шрифтов затрудняет загрузку страницы. Вы также можете добавить курсивный стиль, просто добавив символ i в конце веса шрифта, например, 400i встроит курсивный стиль.

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

Далее мы собираемся применить шрифт «Open Sans» для всего нашего HTML кода. Мы также должны указать sans-serif в качестве нашего резервного шрифта, чтобы обеспечить максимальную совместимость между браузерами/операционными системами. Если браузер не поддерживает первый шрифт, он попытается использовать следующий шрифт.

Затем мы покажем показания температуры с помощью этого красивого маленького значка

Значок температуры на самом деле является масштабируемой векторной графикой (SVG), определенной в теге . Создание SVG не требует каких-либо специальных навыков программирования. Для создания графики для вашей страницы вы можете использовать любой редактор SVG. После этой иконки мы собираемся показать фактическое значение температуры датчика.

Далее мы покажем показания влажности с помощью этого значка

Опять же это SVG. После печати значений влажности мы закрываем все открытые теги, такие как body и html .

Улучшение кода – автоматическое обновление страницы

Одно из улучшений, которое вы можете сделать с нашим кодом, – это автоматическое обновление страницы для обновления показаний датчика.

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

Поместите этот код в тег вашего документа, и этот мета-тег укажет браузеру обновлять страницу каждые две секунды. Довольно изящно!

Динамическая загрузка данных датчика с помощью AJAX

Если ваша веб-страница много весит, то полное ее обновление не слишком практично. Лучше использовать асинхронный Javascript и Xml (AJAX), чтобы мы могли запрашивать данные с сервера асинхронно (в фоновом режиме), не обновляя страницу.

Для выполнения AJAX на веб-страницах в JavaScript обычно используется объект XMLHttpRequest . Он тихо выполняет GET запрос на сервер и обновляет элемент на странице. AJAX – это не новая технология или другой язык, а просто существующие технологии, используемые по-новому. Кроме того, AJAX также позволяет:

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

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

На сайте работает сервис комментирования DISQUS, который позволяет вам оставлять комментарии на множестве сайтов, имея лишь один аккаунт на Disqus.com.

В случае комментирования в качестве гостя (без регистрации на disqus.com) для публикации комментария требуется время на премодерацию.

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

Источник

Adblock
detector