Працюємо з 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 разметка не поддерживается! Используйте обычный текст.
    Плохо           Хорошо
Муфта на двигатель с осью 3мм

Муфта на двигатель с осью 3мм

Муфта для крепления на ось 3ммДля крепления к оси используются два прижимных винтаНа фланце имеет 4 ..

35.48грн.

Двигатель постоянного тока 12В 15000RPM

Двигатель постоянного тока 12В 15000RPM

Скоростной коллекторный двигатель постоянного тока Напряжение питания 12 ВТок потребления без н..

109.45грн.

Магнитный сенсор A3144. Датчик Холла с дискретным выходом.

Магнитный сенсор A3144. Датчик Холла с дискретным выходом.

Дискретный однополюсный датчик магнитного поля на эффекте Холла. Диапазон напряжения питания 4,5....

7.57грн.

Гайка М3 шестигранная оцинкованная

Гайка М3 шестигранная оцинкованная

Гайка для крепления элементов электронных проектов..

0.24грн.

Шестерня для зубчатого ремня на 30 зубьев под ось 8 мм

Шестерня для зубчатого ремня на 30 зубьев под ось 8 мм

Используется для передачи и редукции крутящего момента от двигателя до оси 8 ммКоличество зубьев 30 ..

52.08грн.