Вывод температуры на экран телефона - Ардуино для начинающих

ESP8266 с датчиком DHT — простой и эффективный проект для вывода температуры и влажности на экран телефона или компьютера через обычный браузер. Мы создадим встроенный веб-сервер на плате ESP8266, который генерирует динамическую HTML-страницу с актуальными данными. Обновление происходит автоматически каждые 10 секунд благодаря мета-тегу refresh. Дизайн полностью настраиваемый: цвета, шрифты, размеры текста, фон. Это идеальное решение для уличной метеостанции — поместите датчик в герметичную коробку за окном и проверяйте погоду с телефона. Или разместите несколько датчиков в разных помещениях для полного мониторинга микроклимата. Сборка занимает всего 10 минут, подключение — три провода, два из которых питание. Проект работает автономно, без облачных сервисов или приложений.

Температура и влажность на телефоне с ESP8266 и DHT

Возможности проекта

Данные доступны с любого устройства в Wi-Fi сети. Большие шрифты для удобного чтения на мобильных. Автоматическое обновление без перезагрузки страницы. Поддержка DHT11 (бюджетный) и DHT22 (точный, ±0.5°C). Легко добавить время по NTP, графики Chart.js или уведомления в Telegram. Проект энергоэффективен, работает от powerbank.

Необходимые компоненты

Плата ESP8266 (NodeMCU или Wemos D1 mini)
Датчик DHT11 или DHT22
Резистор 10 кОм (если датчик без модуля)
Провода и макетная плата

Схема подключения DHT

Подключение максимально простое:

VCC датчика → 3.3V ESP8266
GND → GND
Data → D4 (GPIO2)
Подтягивающий резистор 10 кОм от Data к VCC

Модуль DHT с платой уже имеет резистор.

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

ESP8266WiFi (встроенная)
DHT sensor library by Adafruit
ESPAsyncWebServer и AsyncTCP (скачать с GitHub)

Полный скетч ESP8266

#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <DHT.h>

#define DHTPIN D4
#define DHTTYPE DHT11   // Можно заменить на DHT22
DHT dht(DHTPIN, DHTTYPE);

AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="10">
  <title>Метеостанция</title>
  <style>
    body {font-family: Arial; text-align: center; margin-top: 50px; background: #f0f0f0;}
    h1 {font-size: 32px; color: #333;}
    .temp {font-size: 60px; color: red;}
    .hum {font-size: 50px; color: blue;}
    p {margin: 20px;}
  </style>
</head>
<body>
  <h1>Погода сейчас</h1>
  <p class="temp">Температура: %TEMP% &deg;C</p>
  <p class="hum">Влажность: %HUM% %</p>
</body>
</html>
)rawliteral";

void setup() {
  Serial.begin(115200);
  dht.begin();

  WiFi.begin("SSID", "PASSWORD");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println();
  Serial.println(WiFi.localIP());

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    String page = index_html;
    page.replace("%TEMP%", String(dht.readTemperature(), 1));
    page.replace("%HUM%", String(dht.readHumidity(), 1));
    request->send(200, "text/html", page);
  });

  server.begin();
}

void loop() {
}

ESP8266 подключается к Wi-Fi и поднимает веб-сервер.
Датчик DHT11 измеряет температуру и влажность.
При открытии страницы в браузере отображаются текущие значения датчиков.
Страница автоматически обновляется каждые 10 секунд.

Как работает и настройка

ESP подключается к Wi-Fi, читает DHT и подставляет значения в HTML. Открываете IP в браузере — видите погоду. Редактируйте CSS для дизайна, меняйте refresh для интервала.

Заключение

Надёжная беспроводная метеостанция за копейки. Доступно с телефона, легко расширяемо до полной системы умного дома.

FAQ — Температура на телефоне с ESP8266

Как изменить интервал обновления страницы?

В строке <meta http-equiv=»refresh» content=»10″> измените число на нужное количество секунд.

Можно ли использовать DHT22 вместо DHT11?

Да, измените #define DHTTYPE DHT22 — датчик точнее (±0.5°C против ±2°C).

Как настроить дизайн страницы?

Редактируйте блок <style> в строке index_html: меняйте цвета, шрифты, размеры, добавляйте фон.

Можно подключить несколько датчиков?

Да, используйте разные пины, создайте несколько объектов DHT и выводите все значения на страницу.

Как получить доступ извне домашней сети?

Настройте порт-форвардинг на роутере (порт 80) или используйте сервис ngrok для туннеля.

Можно обойтись без AsyncWebServer?

Да, используйте стандартный WiFiServer, но Async эффективнее для нескольких подключений.

Что делать, если значения NaN?

Проверьте подключение, резистор, питание 3.3V. Добавьте delay(2000) после dht.begin().

Температура и влажность DHT на ESP8266: вывод на экран телефона