
Оглавление:
- Шаг 1: Компоненты
- Шаг 2. Подключите DHT11 к модулю NodeMCU ESP8266
- Шаг 3. Запустите Visuino и выберите тип платы ESP8266
- Шаг 4. В Visuino: установите имя хоста и точку доступа
- Шаг 5: В Visuino: добавьте сокет сервера TCP / IP для связи
- Шаг 6: В Visuino: добавьте DTH11 и компонент форматированного текста с 2 аналоговыми каналами
- Шаг 7. В Visuino: установите форматированный текст для ответа сервера
- Шаг 8: В Visuino: подключите компонент DHT11
- Шаг 9. В Visuino: добавьте и подключите компонент Edge Detect
- Шаг 10: В Visuino: подключите компонент форматированного текста, а также добавьте и подключите компонент задержки
- Шаг 11: сгенерируйте, скомпилируйте и загрузите код Arduino
- Шаг 12: И играем…
2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-23 15:04


Модули ESP8266 - отличные недорогие автономные контроллеры со встроенным Wi-Fi, и я уже написал о них несколько инструкций.
DTH11 / DTH21 / DTH22 и AM2301 - очень популярные комбинированные датчики температуры и влажности Arduino, и я также сделал с ними ряд инструкций, в том числе дистанционный термометр и датчик влажности с двумя ESP8266, подключенными вместе в их собственной частной сети Wi-Fi.
В этом руководстве я покажу вам, как создать веб-сервер температуры и влажности с ESP8266 и DHT11 и подключиться к нему в существующей сети Wi-Fi с нескольких устройств с помощью веб-браузера.
Шаг 1: Компоненты

- Плата OneNodeMCU ESP8266 (я использовал версию NodeMCU 0.9, но подойдет любая другая или даже автономная ESP-12 или ESP-01)
- Один модуль датчика DHT11, который я получил из этого дешевого набора из 37 датчиков
- 3 перемычки мама-женщина
Шаг 2. Подключите DHT11 к модулю NodeMCU ESP8266



- Подключите питание (красный провод), заземление (черный провод) и данные (серый провод) к модулю DHT11 (на рисунке 1 показаны 2 различных типа сенсорных модулей DHT11. Как вы можете видеть, контакты могут отличаться, поэтому подключайтесь осторожно!)
- Подключите другой конец провода заземления (черный провод) к контакту заземления модуля ESP8266 (Рисунок 2).
- Подключите другой конец провода питания (красный провод) к контакту питания 3,3 В модуля ESP8266 (Рисунок 2).
- Подключите другой конец провода данных (серый провод) к цифровому контакту 2 модуля ESP8266 (Рисунок 3).
- На рисунке 4 показано, где находятся контакты заземления, питания 3,3 В и цифровых 2 узла NodeMCU 0.9.
Шаг 3. Запустите Visuino и выберите тип платы ESP8266


Чтобы начать программировать Arduino, вам потребуется установить Arduino IDE отсюда:
Имейте в виду, что в Arduino IDE 1.6.6 есть несколько критических ошибок
Убедитесь, что вы установили 1.6.7 или выше, иначе это руководство не будет работать!
Если вы еще не сделали этого, следуйте инструкциям в этом Руководстве, чтобы настроить IDE Arduino для программирования ESP 8266
Visuino: https://www.visuino.com также должен быть установлен.
- Запустите Visuino, как показано на первой картинке.
- Нажмите кнопку «Инструменты» на компоненте Arduino (рисунок 1) в Visuino.
- Когда появится диалоговое окно, выберите «NodeMCU ESP-12», как показано на рисунке 2.
Шаг 4. В Visuino: установите имя хоста и точку доступа




Сначала нам нужно настроить модуль для подключения к существующей точке доступа и назначить ему HostName, чтобы мы могли обнаружить его в сети.
- В инспекторе объектов разверните свойство «Модули», затем вспомогательное свойство «WiFi».
- В Инспекторе объектов установите значение свойства HostName на «dht11server» (Рисунок 1).
- В Инспекторе объектов разверните подсвойство «AccessPoints» для «WiFi» и нажмите кнопку «…» рядом с его значением (рисунок 2).
- В редакторе «AccessPoins» выберите «WiFi Access Point» в правом окне, а затем нажмите кнопку «+» слева, чтобы добавить точку доступа (Рисунок 2).
- В Инспекторе объектов установите значение свойства «SSID» равным SSID вашей точки доступа Wi-Fi (точки доступа) (рисунок 4).
- Если для вашей точки доступа Wi-Fi (точки доступа) требуется пароль, в инспекторе объектов установите пароль в значении свойства «Пароль» (рисунок 4).
- Закройте диалоговое окно «AccessPoints».
Шаг 5: В Visuino: добавьте сокет сервера TCP / IP для связи



Затем нам нужно добавить сокет TCP / IP Server для связи.
- В инспекторе объектов нажмите кнопку «…» рядом со значением вложенного свойства «Сокеты» Wi-Fi (рисунок 1).
- В редакторе сокетов выберите «TCP / IP Server», а затем нажмите кнопку «+» (рисунок 2), чтобы добавить его (рисунок 3).
- Закройте диалоговое окно «Сокеты».
Шаг 6: В Visuino: добавьте DTH11 и компонент форматированного текста с 2 аналоговыми каналами



Чтобы контролировать и считывать температуру и влажность с DHT11, нам нужно добавить для него компонент в Visuino.
Нам также необходимо сгенерировать веб-страницу из данных. Страница представляет собой просто текстовый документ HTML, поэтому мы можем использовать компонент форматированного текста для его создания.
- Введите «dht» в поле «Фильтр» на панели инструментов компонентов, затем выберите компонент «Влажность и термометр DHT11 / 21/22 / AM2301» (рисунок 1) и поместите его в область дизайна.
- Введите «форма» в поле «Фильтр» на панели инструментов компонента, затем выберите компонент «Форматированный текст» (рисунок 2) и поместите его в область дизайна.
- Нажмите кнопку «Инструменты» компонента FormattedText1 (Рисунок 3).
- В редакторе элементов выберите Аналоговый элемент справа и нажмите 2 раза кнопку «+» слева (Рисунок 4), чтобы добавить 2 из них (Рисунок 5).
- Закройте редактор «Элементы».
Шаг 7. В Visuino: установите форматированный текст для ответа сервера


Нам нужно указать текст HTML, который будет сгенерирован при подключении веб-клиента к серверу.
Мы укажем соединение, которое нужно закрыть после отправки данных, а также проинструктируем браузер повторно подключиться (Обновить) через 5 секунд, добавив в документ «Обновить: 5». Таким образом, веб-страница будет обновляться каждые 5 секунд.
- В области дизайна выберите компонент FormattedText1 (рисунок 1).
- В инспекторе объектов выберите свойство «Текст» и нажмите кнопку «…» рядом с его значением (рисунок 1).
- В редакторе «Текст» введите: «HTTP / 1.1 200 OK» «Content-Type: text / html» «Соединение: закрыть» «Обновить: 5» «« »"""""" Температура:% 0 "" Влажность:% 1 "" "" "(Рисунок 2)% 0 будет заменен значением из AnalogElement1, а% 1 будет заменен значением из AnalogElement2
- Нажмите кнопку ОК, чтобы закрыть диалоговое окно.
Шаг 8: В Visuino: подключите компонент DHT11



- Подключите выходной контакт «Температура» компонента HumidityThermometer1 к контакту «In» AnalogElement1 компонента FormattedText1 (Рисунок 1).
- Подключите выходной контакт "Humidity" компонента HumidityThermometer1 к контакту "In" AnalogElement2 компонента FormattedText1 (Рисунок 2).
- Подключите контакт "Sensor" компонента HumidityThermometer1 к входному контакту "Digital" канала "Digital [2]" компонента Arduino (Рисунок 3).
Шаг 9. В Visuino: добавьте и подключите компонент Edge Detect




Нам нужно отправлять HTML-текст каждый раз, когда возникает новое соединение. Перед отправкой нам нужно немного подождать, поскольку веб-браузеры должны отправить запрос, прежде чем они ожидают увидеть результат. Для этого мы будем использовать компонент Delay, подключенный к контакту «Connected» разъема сервера TCP / IP.
- Введите «задержка» в поле «Фильтр» на панели инструментов компонентов, затем выберите компонент «Задержка» (рисунок 1) и перетащите его в область дизайна.
- В Свойствах установите значение свойства «Интервал (uS)» равным 200000 (Рисунок 2).
- Подключите контакт «Connected» модуля «Modules. WiFi. Sockets. TCPServer1» компонента «NodeMCU ESP-12» к контакту «In» компонента Delay1 (Рисунок 3).
- Подключите контакт "Out" компонента Delay1 к входному контакту "Clock" компонента FormattedText1 (рисунок 4).
Шаг 10: В Visuino: подключите компонент форматированного текста, а также добавьте и подключите компонент задержки




- Подключите вывод «Out» компонента FormattedText1 к контакту «In» «Modules. WiFi. Sockets. TCPServer1» компонента «NodeMCU ESP-12» (Рисунок 1).
- Введите «задержка» в поле «Фильтр» на панели инструментов компонентов, затем выберите компонент «Задержка» (рисунок 2) и поместите его в область дизайна.
- Подключите контакт «Out» компонента FormattedText1 к контакту «In» компонента Delay2 (рисунок 3).
- Подключите вывод «Out» компонента Delay2 к входному контакту «Disconnect» модуля «Modules. WiFi. Sockets. TCPServer1» компонента «NodeMCU ESP-12» (Рисунок 4).
Компонент Delay отключит сокет вскоре после отправки текста.
Шаг 11: сгенерируйте, скомпилируйте и загрузите код Arduino


- В Visuino нажмите F9 или нажмите кнопку, показанную на рисунке 1, чтобы сгенерировать код Arduino, и откройте IDE Arduino.
- Подключите модуль NodeMCU с помощью USB-кабеля к компьютеру.
- Выберите тип платы и последовательный порт, как я показал вам в этой инструкции.
- В среде Arduino IDE нажмите кнопку «Загрузить», чтобы скомпилировать и загрузить код (рисунок 2).
Шаг 12: И играем…



Поздравляю! Вы создали веб-сервер температуры и влажности Wi-Fi.
На рисунке 1 и в видео вы можете увидеть подключенный и включенный проект. Я использовал небольшой USB Power Bank для питания модуля.
Убедитесь, что в проекте на шаге 4 вы ввели правильный SSID и пароль для точки доступа Wi-Fi
Если вы откроете веб-браузер на своем компьютере или мобильном устройстве и наберете:
dht11server./
И нажмите Enter, вы увидите измеренные модулем температуру и влажность. Показания будут обновляться каждые 5 секунд, как указано в шаге 7.
Обязательно добавьте точку в конце имени, иначе Windows не сможет разрешить имя домена
На рисунке 2 вы можете увидеть полную схему Visuino.
Также прилагается проект Visuino, который я создал для этого руководства. Вы можете скачать и открыть его в Visuino:
Рекомендуемые:
Автоматический охлаждающий вентилятор с сервоприводом и датчиком температуры и влажности DHT11 с Arduino: 8 шагов

Автоматический вентилятор охлаждения с использованием сервопривода и датчика температуры и влажности DHT11 с Arduino: в этом руководстве мы узнаем, как запустить & вращайте вентилятор, когда температура поднимается выше определенного уровня
Как сделать регистратор данных влажности и температуры в реальном времени с Arduino UNO и SD-картой - Моделирование регистратора данных DHT11 в Proteus: 5 шагов

Как сделать регистратор данных влажности и температуры в реальном времени с Arduino UNO и SD-картой | Моделирование регистратора данных DHT11 в Proteus: Введение: привет, это Liono Maker, вот ссылка на YouTube. Мы делаем творческий проект с Arduino и работаем над встраиваемыми системами. Регистратор данных: Регистратор данных (также регистратор данных или регистратор данных) - это электронное устройство, которое записывает данные с течением времени
ESP8266 Nodemcu: мониторинг температуры с помощью DHT11 на локальном веб-сервере - Получите комнатную температуру и влажность в вашем браузере: 6 шагов

ESP8266 Nodemcu: мониторинг температуры с помощью DHT11 на локальном веб-сервере | Установите температуру и влажность в вашем браузере: Привет, ребята, сегодня мы сделаем влажность и влажность. система контроля температуры с использованием ESP 8266 NODEMCU & Датчик температуры DHT11. Температура и влажность будут получены от DHT11 Sensor & в браузере можно увидеть, какой веб-страницей будет управлять
ESP8266 NodeMCU Access Point (AP) для веб-сервера с датчиком температуры DT11 и печатью температуры и влажности в браузере: 5 шагов

ESP8266 NodeMCU Access Point (AP) для веб-сервера с датчиком температуры DT11 и печатью температуры и влажности в браузере: Привет, ребята, в большинстве проектов мы используем ESP8266, а в большинстве проектов мы используем ESP8266 в качестве веб-сервера, чтобы данные могли быть доступны на любое устройство через Wi-Fi, получив доступ к веб-серверу, размещенному на ESP8266, но единственная проблема в том, что нам нужен рабочий маршрутизатор для
Монитор погоды M5Stack M5stick C на базе ESP32 с DHT11 - Мониторинг температуры, влажности и теплового индекса на M5stick-C с помощью DHT11: 6 шагов

Монитор погоды M5Stack M5stick C на базе ESP32 с DHT11 | Мониторинг температуры, влажности и теплового индекса на M5stick-C С помощью DHT11: Привет, ребята, в этой инструкции мы узнаем, как связать датчик температуры DHT11 с m5stick-C (плата разработки от m5stack) и отобразить его на дисплее m5stick-C. Итак, в этом уроке мы прочитаем температуру, влажность и влажность. тепло я