Працюємо з 09:00 до 19:00 Пн-Сб
Київ біля ТЦ Квадрат бул.Перова

Постановка задачи

Представляем новый интересно-полезный проект с использованием WiFi-контроллера ESP8266. Построим график изменения двух физических величин во времени, используя только возможности самого контроллера, без задействования внешних веб-сайтов. В качестве подопытных физических величин возьмем температуру и влажность воздуха, которые будем измерять распространенным датчиком DHT22 AM2302. И для примера будем регистрировать данные только на протяжении суток с периодом в один час. Ещё одна из самых главных задач - пытаемся отказаться от часов реального времени, в пользу времени из интернета.

Используемая технология для построения графика

Данные будет собирать и хранить контроллер, а за отображение их графического вида возьмется ваш интернет-браузер и API под названием Google Charts. Данная API является продвинутой Java-библиотекой для отображения графиков на веб-страницах различных сайтов. В ней нам доступны для построения множество типов диаграм, трендов и графиков.


Для этого проекта мы возьмем только Line Chart.

Вам нужно понимать, что саму библиотеку не обязательно загружать себе на сайт или в контроллер ESP8266. Достаточно просто прописать синтаксис обращения к Google Charts в глобальном интернете и ваш браузер сам отобразит графику, согласно переданным данным и настройках для библиотеки на вашей веб-страничке или, как в нашем варианте в памяти контроллера.

Если вам интересно будет углубиться в возможности и настройки выбранной для этого проекта API, то документацию можно прогуглить по запросу Google Charts.

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

Схема не хитрая - плюс питания датчика DHT22 берем с вывода 3,3V контроллера, минус питания с вывода GND контроллера, а вывод данных датчика подключаем к D1 WiFi платы.



Программа контроллера ESP8266

Я программирую NodeMcu ESP8266 при помощи предварительно настроенного Arduino IDE соглано инструкции по ссылке.

Из дополнительных библиотек понадобится только DHT.h. Все остальное уже будет в наличии, включая библиотеку time.h для считывания времени с NTP сервера в интернете.

У вас должна быть настроена WiFi сеть с выходом в интернет. Её название и пароль необходимо ввести в соответствующие строки программы. Доступ в интернет нужен для получения временных меток с NTP сервера, а так же для получения вашим браузером библиотек Google Charts.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <time.h>
#include <DHT.h>

#define DHTPIN 5
//#define DHTTYPE           DHT11     // DHT 11 
#define DHTTYPE           DHT22     // DHT 22 (AM2302)
//#define DHTTYPE           DHT21     // DHT 21 (AM2301)
DHT dht(DHTPIN, DHTTYPE);

const char* ssid = "****";
const char* password = "****";
IPAddress ip(192,168,1,17);  //IP adres dlia prosmotra grafika web-brayzerom
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
ESP8266WebServer server(80);

const uint16_t lengt=24; //max kol tochek trenda
uint16_t tick=0;
time_t tnow[lengt];
float h[lengt], t[lengt];

void handleRoot() {
  String trendstr;
  
  trendstr = F("<html>\
  <head>\
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>\
    <meta http-equiv='refresh' content='1000'/>\
    <title>Daily temperature</title>\
    <script type='text/javascript'>\
      google.charts.load('current', {'packages':['corechart']});\
      google.charts.setOnLoadCallback(drawChart);\
\
      function drawChart() {\
        var data = new google.visualization.DataTable();\
      data.addColumn('datetime', 'Time');\
      data.addColumn('number', 'Temp, C');\
      data.addColumn('number', 'Humidity, %');\
\
      data.addRows([");
  uint16_t k, y=0;
  for (int i=1; i <= lengt; i++){
    k = tick-1 + i;
    if (h[k]>0){
      if (y>0) trendstr += ",";
      y ++;
      if (k>lengt-1) k = k - lengt;
      trendstr += "[new Date(";
      trendstr += String(tnow[k]-(2*3600)); //2- chasovoy poyas
      trendstr += "*1000), ";
      trendstr += t[k];
      trendstr += ", ";
      trendstr += h[k];
      trendstr += "]";
    }
  }
    trendstr += F("]);\
\
        var options = {width: '100%',\
          title: 'GEEKMATIC.IN.UA',\
          curveType: 'function',\
          legend: { position: 'bottom' },\
          hAxis: {format: 'dd.MM.yyyy HH:mm',\
          gridlines: {\
            count: 10,\
          },\
        }\
        };\
\
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));\
        var formatter = new google.visualization.DateFormat({pattern: 'dd.MM.yyyy HH:mm'});\
        formatter.format(data, 0);\
        chart.draw(data, options);\
      }\
    </script>\
  </head>\
  <body>\
    <div id='curve_chart' style='width: 100%; height: 600px'></div>\
  </body>\
</html>");
  server.send ( 200, F("text/html"), trendstr );
}

const long interval = 3600000; //interval zapisi danih dlya trenda
unsigned long previousMillis = 0;

void setup(void){
  Serial.begin(9600);
  WiFi.begin(ssid, password);
  WiFi.config(ip, gateway, subnet);

  configTime(2*3600, 0, "pool.ntp.org", "time.nist.gov"); //NTP sayti dlia schitivaniya vremeni

  Serial.println("");
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  server.on("/", handleRoot);
  server.begin();
  Serial.println("HTTP server started");
  dht.begin();
  delay(2000);
  tochka();
}
void loop(void){
  server.handleClient();
  
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;
    tochka();
  }
}

void tochka(){
  h[tick] = dht.readHumidity();
  t[tick] = dht.readTemperature();
  tnow[tick] = time(nullptr);
  Serial.print(String(ctime(&tnow[tick])));
  if (tick<lengt-1) tick ++; else tick = 0;
}

Результат

После подключения датчика и загрузки программы в контроллер, можно через браузер мобильного устройства или компьютера посмотреть на получившийся график температуры и влажности, сформированный платой NodeMcu ESP8266. Для этого в адресной строке браузера нужно ввести IP 192.168.1.17 и получим следующую картину. При этом контроллер должен быть подключен к той же WiFi-сети что и ваш браузер.


У меня датчик сутки пролежал на подоконнике. Температура не сильно менялась а влажность скакала.

Считаю, что устройство мега полезно в домашнем хозяйстве. Я в частности хочу установить такое на балконе для мониторинга комфортного хранения картошки в зимний период.

Предела для модификаций и совершенствования устройства построения суточного графика температуры на WiFi контроллере ESP я не вижу - можно использовать представленную программу как старт для множества крутых проектов.

Написать отзыв

Примечание: HTML разметка не поддерживается! Используйте обычный текст.
    Плохо           Хорошо
Конденсатор электролитический алюминиевый

Конденсатор электролитический алюминиевый

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

1.98грн.

Модуль блока питания 5В 600мА

Модуль блока питания 5В 600мА

Удобный модуль питания из 220В AC в 5В постоянного тока. Разработан для установки на печатную плату...

90.89грн.

Фольгированный текстолит двухсторонний 75х100мм

Фольгированный текстолит двухсторонний 75х100мм

Двухсторонний фольгированный медью текстолит для изготовления печатных платТолщина 1,5 мм Размеры 7..

43.15грн.

WIFI ESP8266 суточный график температуры и влажности

WIFI ESP8266 суточный график температуры и влажности

Постановка задачи Представляем новый интересно-полезный проект с использованием WiFi-контроллера&..

Как проверить дискретный датчик холла

Как проверить дискретный датчик холла

Иногда возникает необходимость проверить имещийся магнитный датчик холла на работоспособность. Но пр..