WIFI ESP8266 добовий графік температури та вологості

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

Пропонуємо вашій увазі новий цікаво-корисний проект з використанням 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 ніхто не накладає - можна використовувати запропоновану програму як старт для багатьох крутих проектів.

<< Проекти << Усі товари >> Статті, уроки >>