ESP32:Примеры/Веб-сервер на базе ESP32, считывающий температуру и влажность

Материал из ВикиСправочника
Перейти к: навигация, поиск

Перевод: Максим Кузьмин (Cubewriter)
Перевел 1819 статей для сайта.

Контакты:

Проверка/Оформление/Редактирование: Мякишев Е.А.


Ambox content.png Черновик


Веб-сервер на базе ESP32, считывающий температуру и влажность[1]

Эта статья рассказывает, как при помощи IDE Arduino создать автономный веб-сервер на базе модуля ESP32, считывающего данные о температуре и влажности с датчика DHT11 (или DHT22). Если вы первый раз работаете с модулем ESP32, то базовые знания о нем можно получить тут.

Esp32 1-1.jpg

Также перед тем, как продолжить, советую полистать (а лучше – пройти) вот эти руководства:

Установка аддона для ESP32 в IDE Arduino

Для платы ESP32 существует аддон, благодаря которому ее можно программировать прямо в IDE Arduino. О том, как установить его, читайте ниже:

Установка библиотеки для датчика DHT

Библиотека «DHT» упрощает считывание данных о температуре и влажности с датчиков DHT при помощи плат ESP8266 или Arduino. Чтобы установить ее, проделайте следующее:

  • Кликните здесь, чтобы скачать ZIP-архив с библиотекой DHT. Он должен загрузиться в папку «Загрузки» на вашем компьютере.
ESP8266 DHT11DHT22 zip 1.png
  • Распакуйте ZIP-архив. В результате у вас должна получиться папка «DHT-sensor-library-master»
ESP8266 DHT11DHT22 folder 2.png
  • Переименуйте эту папку на «DHT»
ESP8266 DHT11DHT22 rename 3.png
  • Переместите папку «DHT» в папку «libraries» IDE Arduino (это папка для библиотек, устанавливаемых на IDE Arduino)
ESP8266 DHT11DHT22 moving 4.png

Загрузка кода

В этом примере мы подключим к модулю ESP32 датчик DHT22, чтобы затем управлять им через браузер. Скопируйте в IDE Arduino код, показанный ниже:

  1. /*
  2.  * Автор – Руи Сантос (Rui Santos )
  3.  * Более подробно о проекте на http://randomnerdtutorials.com
  4. */
  5.  
  6. #include <WiFi.h>
  7. #include "DHT.h"
  8.  
  9. // уберите знаки комментария у строчки с моделью датчика DHT,
  10. // которую вы используете в своем проекте (в моем случае это DHT22):
  11. //#define DHTTYPE DHT11   // DHT 11
  12. //#define DHTTYPE DHT21   // DHT 21 (AM2301)
  13. #define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321
  14.  
  15. // впишите сюда данные о своей WiFi-сети:
  16. const char* ssid     = "YOUR_SSID";
  17. const char* password = "YOUR_PASSWORD";
  18.  
  19. WiFiServer server(80);
  20.  
  21. // задаем контакт для датчика DHT:
  22. const int DHTPin = 16;
  23. // создаем экземпляр класса для датчика DHT:
  24. DHT dht(DHTPin, DHTTYPE);
  25.  
  26. // временные переменные:
  27. static char celsiusTemp[7];
  28. static char fahrenheitTemp[7];
  29. static char humidityTemp[7];
  30.  
  31. // клиентские переменные:
  32. char linebuf[80];
  33. int charcount=0;
  34.  
  35. void setup() {
  36.   // инициализируем датчик DHT:
  37.   dht.begin();
  38.  
  39.   // запускаем последовательную коммуникацию и ждем открытия порта:
  40.   Serial.begin(115200);
  41.   while(!Serial) {
  42.     ; // ждем подключения последовательного порта
  43.       // (нужно только для штатного USB-порта)
  44.   }
  45.  
  46.   // начинаем с подключения к WiFI-сети:
  47.   Serial.println();
  48.   Serial.println();
  49.   Serial.print("Connecting to ");  //  "Подключаемся к "
  50.   Serial.println(ssid);
  51.  
  52.   WiFi.begin(ssid, password);
  53.  
  54.   // пробуем подключиться к WiFi-сети:
  55.   while(WiFi.status() != WL_CONNECTED) {
  56.     // подключаемся к сети с шифрованием WPA/WPA2;
  57.     // если это открытая сеть или сеть с шифрованием WEP,
  58.     // то эту строчку нужно поменять:
  59.     delay(500);
  60.     Serial.print(".");
  61.   }
  62.   Serial.println("");
  63.   Serial.println("WiFi connected");  //  "Подключились к WiFi-сети"
  64.   Serial.println("IP address: ");    //  "IP-адрес: "
  65.   Serial.println(WiFi.localIP());
  66.  
  67.   server.begin();
  68. }
  69.  
  70. void loop() {
  71.   // прослушиваем входящих клиентов:
  72.   WiFiClient client = server.available();
  73.   if (client) {
  74.     Serial.println("New client");  //  "Новый клиент"
  75.     memset(linebuf,0,sizeof(linebuf));
  76.     charcount=0;
  77.     // HTTP-запрос заканчивается пустой строкой:
  78.     boolean currentLineIsBlank = true;
  79.     while (client.connected()) {
  80.       if (client.available()) {
  81.         char c = client.read();
  82.         Serial.write(c);
  83.         // считываем HTTP-запрос символ за символом:
  84.         linebuf[charcount]=c;
  85.         if (charcount<sizeof(linebuf)-1) charcount++;
  86.         // если добрались до конца строки (т.е. получили символ
  87.         // новой строки), и эта строка пуста, то это значит,
  88.         // что мы достигли конца HTTP-запроса;
  89.         // следовательно, можно отправлять ответ:
  90.         if (c == '\n' && currentLineIsBlank) {
  91.             // данные от датчика могут запаздывать на 2 секунды
  92.             // (это очень медленный датчик)
  93.             float h = dht.readHumidity();
  94.             // считываем температуру в Цельсиях
  95.             // (вариант по умолчанию):
  96.             float t = dht.readTemperature();
  97.             // считываем температуру в Фаренгейтах:
  98.             float f = dht.readTemperature(true);
  99.             // проверяем, корректны ли данные,
  100.             // и если нет, то выходим и пробуем снова:
  101.             if (isnan(h) || isnan(t) || isnan(f)) {
  102.               Serial.println("Failed to read from DHT sensor!");
  103.                          //  "Не удалось прочесть данные
  104.                          //  с датчика DHT!"
  105.               strcpy(celsiusTemp,"Failed");
  106.               strcpy(fahrenheitTemp, "Failed");
  107.               strcpy(humidityTemp, "Failed");        
  108.             }
  109.             else{
  110.               // рассчитываем температуру (в Цельсиях и Фаренгейтах)
  111.               // и влажность:
  112.               float hic = dht.computeHeatIndex(t, h, false);      
  113.               dtostrf(hic, 6, 2, celsiusTemp);            
  114.               float hif = dht.computeHeatIndex(f, h);
  115.               dtostrf(hif, 6, 2, fahrenheitTemp);        
  116.               dtostrf(h, 6, 2, humidityTemp);
  117.               // этот фрагмент кода, если хотите, можно удалить;
  118.               // он для отладочных целей:
  119.               /*Serial.print("Humidity: ");  //  "Влажность: "
  120.               Serial.print(h);
  121.               Serial.print(" %\t Temperature: ");  //  "Температура: "
  122.               Serial.print(t);
  123.               Serial.print(" *C ");
  124.               Serial.print(f);
  125.               Serial.print(" *F\t Heat index: ");
  126.                        //  "Тепловой индекс: "
  127.               Serial.print(hic);
  128.               Serial.print(" *C ");
  129.               Serial.print(hif);
  130.               Serial.print(" *F");
  131.               Serial.print("Humidity: ");  //  "Влажность: "
  132.               Serial.print(h);
  133.               Serial.print(" %\t Temperature: ");  //  "Температура: "
  134.               Serial.print(t);
  135.               Serial.print(" *C ");
  136.               Serial.print(f);
  137.               Serial.print(" *F\t Heat index: ");
  138.                        //  "Тепловой индекс: "
  139.               Serial.print(hic);
  140.               Serial.print(" *C ");
  141.               Serial.print(hif);
  142.               Serial.println(" *F");*/
  143.           }
  144.           // отправляем стандартный заголовок HTTP-запроса:
  145.           client.println("HTTP/1.1 200 OK");
  146.           client.println("Content-Type: text/html");
  147.           // после завершения запроса соединение будет отключено:
  148.           client.println("Connection: close");
  149.           client.println();
  150.           client.println("<!DOCTYPE HTML><html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
  151.           client.println("<meta http-equiv=\"refresh\" content=\"30\"></head>");
  152.           client.println("<body><div style=\"font-size: 3.5rem;\"><p>ESP32 - DHT</p><p>");
  153.           if(atoi(celsiusTemp)>=25){
  154.             client.println("<div style=\"color: #930000;\">");
  155.           }
  156.           else if(atoi(celsiusTemp)<25 && atoi(celsiusTemp)>=5){
  157.             client.println("<div style=\"color: #006601;\">");
  158.           }
  159.           else if(atoi(celsiusTemp)<5){
  160.             client.println("<div style=\"color: #009191;\">");
  161.           }
  162.           client.println(celsiusTemp);
  163.           client.println("*C</p><p>");
  164.           client.println(fahrenheitTemp);
  165.           client.println("*F</p></div><p>");
  166.           client.println(humidityTemp);
  167.           client.println("%</p></div>");
  168.           client.println("</body></html>");    
  169.           break;
  170.         }
  171.         if (c == '\n') {
  172.           // начинаем новую строку:
  173.           currentLineIsBlank = true;
  174.           memset(linebuf,0,sizeof(linebuf));
  175.           charcount=0;
  176.         } else if (c != '\r') {
  177.           // если в текущей строчке есть какой-нибудь символ...
  178.           currentLineIsBlank = false;
  179.         }
  180.       }
  181.     }
  182.     // даем веб-браузеру время на получение данных:
  183.     delay(1);
  184.  
  185.     // закрываем соединение:
  186.     client.stop();
  187.     Serial.println("client disconnected");  //  "Клиент отключен: "
  188.   }
  189. }

Не забудьте в начале кода вписать данные о своей сети (SSID и пароль к SSID).

Теперь подключите модуль ESP32 к компьютеру и проделайте следующее:

  • Кликните в IDE Arduino на Инструменты > Плата > ESP32 Dev Module (Tools > Board > ESP32 Dev Module)
ESP32 Arduino IDE 1.png
  • Выберите COM-порт
  • Переведите ESP32 в режим загрузки прошивки. Для этого зажмите кнопку «BOOT» и нажмите на кнопку «EN». В результате модуль ESP32 должен перезагрузиться.
ESP32 BOOT EN-Copy-2.jpg
  • Нажмите в IDE Arduino кнопку «Загрузка» («Upload») и подождите несколько секунд, пока код скомпилируется и загрузится на плату. Если все в порядке, вы должны увидеть следующее:
ESP32 Arduino IDE 3.png
  • Перезапустите ESP32, чтобы запустить только что загруженный код

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

  • Один модуль ESP32
  • Один датчик температуры и влажности DHT22
  • Один резистор на 4700 Ом
  • Одна макетная плата
  • Провода-перемычки

Примечание: Этот скетч работает не только с DHT22, но и с другими моделями датчика DHT (подробнее смотрите в комментариях к коду).

Подключите компоненты друг к другу как показано на картинке ниже:

Esp32 dht schematics 4.jpg

Важно: Датчику DHT для работы требуется напряжение в 5 вольт. Поэтому убедитесь, что используете контакт Vin на ESP32, который как раз выдает нужные 5 вольт.

Доступ к веб-серверу

Перезапустившись, ESP32 напечатает в мониторе порта IDE Arduino свой IP-адрес. Не забудьте выставить скорость передачи данных на 115200 бод.

Ip esp32 5.png

В моем случае это «http://192.168.1.116».

Демонстрация

Откройте браузер на любом устройстве подключенном к той же сети, что и ESP32. Вбейте в адресную строку найденный IP-адрес и нажмите  ↵ Enter .

Вы должны увидеть следующее:

ESP32 dht22 temperature humidity web server 6.png

Эта веб-страница будет автоматически обновляться каждые 30 секунд. Если температура поднимется выше 25 градусов Цельсия, надпись окрасится в красный цвет.

ESP32 dht22 temperature humidity web server2 7.png

См.также

Внешние ссылки

  1. randomnerdtutorials.com - ESP32 with DHT11 DHT22 Temperature Humidity Web Server using Arduino IDE