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

Материал из Онлайн справочника
Перейти к навигации Перейти к поиску

Перевод: Максим Кузьмин (Cubewriter) Контакты:</br>* Skype: cubewriter</br>* E-mail: cubewriter@gmail.com</br>* Максим Кузьмин на freelance.ru
Проверка/Оформление/Редактирование: Мякишев Е.А.


Pixel Art Mini Meow Animated.gif Черновик


Веб-сервер на базе 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

См.также

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