Главная » Arduino » Взаимодействие DHT11 DHT22 с ESP8266 NodeMCU с использованием веб-сервера

Взаимодействие DHT11 DHT22 с ESP8266 NodeMCU с использованием веб-сервера

Categories Arduino 3 комментария

Вы когда-нибудь хотели, чтобы датчики, расположенные по всему вашему дому и саду, регулярно отправляли данные о температуре и влажности центральному серверу? Да? Тогда этот IoT-проект может стать для вас хорошей отправной точкой! 

Этот проект использует ESP8266 NodeMCU в качестве устройства управления, которое легко подключается к существующей WiFi сети и создает веб-сервер. Когда какое-либо подключенное устройство получает доступ к этому веб-серверу — ESP8266 NodeMCU считывает температуру и относительную влажность с датчика DHT11 (DHT22, AM2302) и отправляет данные в веб-браузер этого устройства с приятным интерфейсом.

Схема подключения датчика DHT11, DHT22, AM2302 к ESP8266 NodeMCU

Подключить датчик DHT11/DHT22 к ESP8266 NodeMCU довольно просто. Начните с размещения NodeMCU на макете, чтобы каждая сторона платы была на отдельной стороне макетной платы.

Подключите контакт VCC датчика к контакту 3,3 В и GND к минусу NodeMCU. Также подключите вывод данных датчика к контакту D8 ESP8266 NodeMCU. Наконец, нам нужно подключить подтягивающий резистор сопротивлением  10 кОм между VCC и линией передачи данных, чтобы поддерживать ее на высоком уровне для правильной связи между датчиком и NodeMCU.

Подключение датчика влажности и температуры DHT11 к ESP8266 NodeMCU
Подключение датчика влажности и температуры DHT11 к ESP8266 NodeMCU
Подключение датчика влажности и температуры DHT11 к ESP8266 NodeMCU
Подключение датчика влажности и температуры DHT22 к ESP8266 NodeMCU

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

Установить связь с датчиками DHT11, DHT22, AM2302 достаточно сложная задача, поскольку они имеют собственный однопроводный протокол передачи данных. И этот протокол требует точной синхронизации.

К счастью, нам не нужно беспокоиться об этом, потому что мы собираемся использовать библиотеку DHT от Adafruit, которая позаботится за нас обо всем. Библиотека настолько мощная, что работает как на архитектуре Arduino, так и на архитектуре ESP.

Чтобы установить библиотеку, перейдите в раздел « Эскиз»> «Включить библиотеку»> «Управление библиотеками…». Подождите, пока менеджер библиотеки загрузит индекс библиотек и обновит список установленных библиотек.

Отфильтруйте результаты поиска, набрав « Датчик DHT ». Там должно быть пара записей. Ищите библиотеку датчиков DHT от Adafruit. Нажмите на эту запись, а затем выберите Install.

Библиотека датчиков DHT использует серверную часть поддержки Adafruit Sensor. Поищите в диспетчере библиотек Adafruit Unified Sensor и установите ее тоже (возможно, придется немного прокрутить список вниз)

Создание веб-сервера NodeMCU ESP8266 с использованием режима WiFi Station (STA)

Как следует из заголовка, мы собираемся настроить наш ESP8266 NodeMCU в режим Station (STA) и создать веб-сервер для обслуживания веб-страниц для любого подключенного клиента в существующей сети.

Инвертор 12 В/ 220 В
Инвертор с чистой синусоидой, может обеспечивать питание переменно...
Подробнее

Прежде чем приступить к загрузке скетча, необходимо внести одно изменение. Вам необходимо изменить следующие две переменные с вашими сетевыми учетными данными, чтобы ESP8266 NodeMCU мог установить соединение с существующей сетью.

const char* ssid = "YourNetworkName";  // Введите SSID
const char* password = "YourPassword";  //Введите пароль

Посте того как вы сделаете это, загрузите следующий скетч, и затем мы рассмотрим его более подробно.

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

// Раскомментируйте одну из строк ниже для того типа DHT датчика, который вы используете!
//#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

/*Укажите SSID & пароль*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

ESP8266WebServer server(80);

// DHT датчик
uint8_t DHTPin = D8; 
               
// Инициализация датчика DHT
DHT dht(DHTPin, DHTTYPE);                

float Temperature;
float Humidity;
 
void setup() {
  Serial.begin(115200);
  delay(100);
  
  pinMode(DHTPin, INPUT);

  dht.begin();              

  Serial.println("Connecting to ");
  Serial.println(ssid);

  // подключаемся к локальной сети Wi-Fi
  WiFi.begin(ssid, password);

  // проверка подключения Wi-Fi 
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

}
void loop() {
  
  server.handleClient();
  
}

void handle_OnConnect() {

 Temperature = dht.readTemperature(); // Получает значения температуры
  Humidity = dht.readHumidity(); // Получает значения влажности
  server.send(200, "text/html", SendHTML(Temperature,Humidity)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float Temperaturestat,float Humiditystat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>ESP8266 Weather Report</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
  ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<div id=\"webpage\">\n";
  ptr +="<h1>ESP8266 NodeMCU Weather Report</h1>\n";
  
  ptr +="<p>Temperature: ";
  ptr +=(int)Temperaturestat;
  ptr +="°C</p>";
  ptr +="<p>Humidity: ";
  ptr +=(int)Humiditystat;
  ptr +="%</p>";
  
  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

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

После загрузки скетча откройте последовательный монитор со скоростью 115200 бод и нажмите кнопку RESET на NodeMCU. Если все в порядке, он выведет динамический IP-адрес, полученный от вашего маршрутизатора, и покажет сообщение HTTP-сервер запущен.

Затем откройте браузер и укажите IP-адрес, указанный в последовательном мониторе. ESP8266 NodeMCU должен отобразить веб-страницу, показывающую температуру и относительную влажность.

Подробное объяснение кода

Скетч начинается с подключения библиотеки ESP8266WiFi.h . Эта библиотека предоставляет специальные методы WiFi ESP8266 NodeMCU, которые мы вызываем для подключения к сети.

После этого подключена библиотека ESP8266WebServer.h , в которой есть несколько доступных методов, которые помогут нам настроить сервер и обрабатывать входящие HTTP-запросы, не беспокоясь о деталях реализации на низком уровне. и в конце подключаем библиотеку DHT.h:

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

Далее нам необходимо определить тип используемого DHT датчика. Раскомментируйте одну из строк ниже:

//#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

Поскольку мы настраиваем ESP8266 NodeMCU в режиме станции (STA), то он подключается к существующей WiFi сети. Следовательно, нам необходимо предоставить SSID и пароль этой сети:

const char* ssid = "YourNetworkName";
const char* password = "YourPassword";

Далее мы объявляем объект библиотеки ESP8266WebServer , чтобы получить доступ к ее функциям. Конструктор этого объекта принимает порт (где сервер будет слушать) в качестве параметра.

Так как 80 является портом по умолчанию для HTTP, мы будем использовать это значение. Теперь вы можете получить доступ к серверу без необходимости указывать порт в URL:

ESP8266WebServer server(80);

Далее нам нужно определить номер контакта ESP8266 NodeMCU, к которому подключен вывод данных датчика, и создать объект DHT. Таким образом, мы можем получить доступ к специальным функциям, связанным с библиотекой DHT:

// DHT датчик
uint8_t DHTPin = D8; 
// Инициализация DHT
DHT dht(DHTPin, DHTTYPE);

Объявление двух переменных с плавающей точкой для хранения температуры и влажность:

float Temperature;
float Humidity;

Функция setup()

Внутри функции setup() мы настраиваем наш HTTP-сервер перед его фактическим запуском. Прежде всего, мы открываем последовательное соединение для целей отладки и устанавливаем порты GPIO на INPUT. Нам также нужно инициализировать объект DHT с помощью функции begin():

Serial.begin(115200);
delay(100);  
pinMode(DHTPin, INPUT);
dht.begin();

Теперь нам нужно подключиться к WiFi сети с помощью функции WiFi.begin(). Функция принимает SSID (имя сети) и пароль в качестве параметра:

Serial.println("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);

В то время как ESP8266 NodeMCU пытается подключиться к сети, мы можем проверить состояние подключения с помощью функции WiFi.status ():

while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}

Как только ESP8266 NodeMCU подключен к сети, скетч распечатывает IP-адрес, назначенный для ESP8266 NodeMCU, отображая WiFi.localIP() значение на последовательном мониторе:

Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

Чтобы обрабатывать входящие HTTP-запросы, нам нужно указать, какой код выполнять при нажатии на URL. Для этого мы используем метод on. Этот метод принимает два параметра. Первый — это путь URL, а второй — имя функции, которую мы хотим выполнить при нажатии на этот URL.

Приведенный ниже код указывает, что когда сервер получает HTTP-запрос по корневому пути ( / ), он запускает функцию handle_OnConnect. Обратите внимание, что указанный URL-адрес является относительным путем.

server.on("/", handle_OnConnect);

Мы не указали, что должен делать сервер, если клиент запрашивает какой-либо URL, отличный от указанного в server.on. Он должен ответить HTTP-статусом 404 (Not Found) и сообщением для пользователя. Мы также помещаем это в функцию и используем, server.onNotFound чтобы сказать, что он должен выполнить ее, когда получит запрос на URL, который не был указан с помощью server.on:

server.onNotFound(handle_NotFound);

Теперь, чтобы запустить наш сервер, мы вызываем метод begin для объекта server:

server.begin();
Serial.println("HTTP server started");

Функция loop()

Для обработки фактических входящих HTTP-запросов нам нужно вызвать метод handleClient() на объекте сервера:

server.handleClient();

Далее нам нужно создать функцию, которую мы прикрепили к корневому (/) URL с помощью server.on. Помните? В начале этой функции мы получаем значения температуры и влажности от датчика.

Чтобы ответить на HTTP-запрос, мы используем метод send. Хотя метод можно вызывать с другим набором аргументов, его самая простая форма состоит из кода ответа HTTP, типа контента и самого контента.

В нашем случае мы отправляем код 200 (один из кодов состояния HTTP), который соответствует ответу OK . Затем мы указываем тип контента как «text / html», и, наконец, мы вызываем пользовательскую функцию SendHTML(), которая создает динамическую HTML-страницу, содержащую значения температуры и влажности:

void handle_OnConnect() {
 Temperature = dht.readTemperature(); 
  Humidity = dht.readHumidity(); 
  server.send(200, "text/html", SendHTML(Temperature,Humidity)); 
}

Аналогично, нам нужно создать функцию для обработки страницы 404 Error:

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

Отображение HTML веб-страницы

Функция SendHTML() отвечает за создание веб-страницы всякий раз, когда веб-сервер ESP8266 NodeMCU получает запрос от веб-клиента. Он просто объединяет HTML-код в большую строку и возвращает к функции server.send(), которую мы обсуждали ранее. Функция принимает значения температуры и влажности в качестве параметра для динамического генерирования содержимого HTML.

Первый текст, который мы должны отправить, является объявление <! DOCTYPE>, которое указывает, что мы отправляем код HTML:

String SendHTML(float Temperaturestat,float Humiditystat){
String ptr = "<!DOCTYPE html> <html>\n";

Затем, элемент <meta> viewport делает веб-страницу отзывчивой в любом веб-браузере, а тег title устанавливает заголовок страницы:

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>ESP8266 Weather Report</title>\n";

Стилизация веб-страницы

Далее у нас есть немного CSS кода для стилизации внешнего вида веб-страницы. Мы устанавливаем шрифт Helvetica, определяем содержимое, которое будет отображаться в виде встроенного блока и выравниваем его по центру:

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

Следующий код устанавливает цвет, шрифт и body, теги H1 и p.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";

Установка заголовка веб-страницы

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

ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP8266 Weather Report</h1>\n";

Отображение температуры и влажности на веб-странице

Чтобы динамически отображать значения температуры и влажности, мы помещаем эти значения в тег абзаца. Эти значения преобразуются в целое число. Для отображения символа степени мы используем HTML-сущность &deg; :

ptr +="<p>Temperature: ";
ptr +=(int)Temperaturestat;
ptr +="°C</p>";
ptr +="<p>Humidity: ";
ptr +=(int)Humiditystat;
ptr +="%</p>";

ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}

Стилизация веб-страницы

Небольшие усилия могут сделать вашу веб-страницу более привлекательной и профессиональной. Ниже скриншот даст вам общее представление о том, что мы собираемся сделать.

Без лишних слов давайте применим данный стиль к нашей предыдущей HTML-странице. Для начала, скопируйте и вставьте код ниже, чтобы заменить функцию SendHTML() из скриншота выше. Попробуйте новый скетч, и далее мы дадим подробное объяснение.

String SendHTML(float TempCstat,float TempFstat,float Humiditystat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
  ptr +="<title>ESP8266 Weather Report</title>\n";
  ptr +="<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #333333;}\n";
  ptr +="body{margin-top: 50px;}\n";
  ptr +="h1 {margin: 50px auto 30px;}\n";
  ptr +=".side-by-side{display: inline-block;vertical-align: middle;position: relative;}\n";
  ptr +=".humidity-icon{background-color: #3498db;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}\n";
  ptr +=".humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
  ptr +=".temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}\n";
  ptr +=".temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".temperature{font-weight: 300;font-size: 60px;color: #f39c12;}\n";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -20px;top: 15px;}\n";
  ptr +=".data{padding: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  
   ptr +="<div id=\"webpage\">\n";
   
   ptr +="<h1>ESP8266 Weather Report</h1>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side temperature-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
   ptr +="width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
   ptr +="c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
   ptr +="c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
   ptr +="c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
   ptr +="c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side temperature-text\">Temperature</div>\n";
   ptr +="<div class=\"side-by-side temperature\">";
   ptr +=(int)TempCstat;
   ptr +="<span class=\"superscript\">°C</span></div>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side humidity-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_2\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\"; width=\"12px\" height=\"17.955px\" viewBox=\"0 0 13 17.955\" enable-background=\"new 0 0 13 17.955\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,2.926,2.133,5.05,1.571,7.057\n";
   ptr +="c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107-6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217\"></path>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side humidity-text\">Humidity</div>\n";
   ptr +="<div class=\"side-by-side humidity\">";
   ptr +=(int)Humiditystat;
   ptr +="<span class=\"superscript\">%</span></div>\n";
   ptr +="</div>\n";

  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Мы уже знаем, что объявление <! DOCTYPE> сообщает браузеру, что мы отправляем HTML-код, а элемент окна просмотра <meta> делает веб-страницу отзывчивой. Единственное дополнение здесь — мы собираемся использовать шрифты Google. Google имеет сотни веб-шрифтов которые бесплатны для коммерческого и личного использования.

Для нашей веб-страницы мы используем Google шрифт Open Sans. Шрифт Google внедряется с помощью тега link в <head> вашего HTML-документа. Для нашей страницы мы выбрали шрифт размером 300 (Light), 400 (Regular) и 600 (bold).

Обратите внимание, что вы не можете видеть шрифт Google, без активного подключения к Интернету на устройстве. Google шрифты загружаются на лету.

String SendHTML(float TempCstat,float TempFstat,float Humiditystat){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";

Далее мы собираемся применить шрифт «Open Sans» для всего нашего HTML. Мы также должны указать sans-serif в качестве нашего резервного шрифта, чтобы обеспечить максимальную совместимость между браузерами и операционными системами. Если браузер не поддерживает первый шрифт, он пытается использовать следующий шрифт:

ptr +="<title>ESP8266 Weather Report</title>\n";
ptr +="<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #333333;}\n";
ptr +="body{margin-top: 50px;}\n";
ptr +="h1 {margin: 50px auto 30px;}\n";

Далее нам нужно применить CSS для значков, заголовков и фактических значений влажности и температуры. Все эти три вещи расположены в ряд и выровнены по вертикали. Фон иконок выполнен в виде круга с радиусом границы 50% и высотой и шириной 30 пикселей:

ptr +=".side-by-side{display: inline-block;vertical-align: middle;position: relative;}\n";
ptr +=".humidity-icon{background-color: #3498db;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}\n";
ptr +=".humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
ptr +=".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
ptr +=".temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}\n";
ptr +=".temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
ptr +=".temperature{font-weight: 300;font-size: 60px;color: #f39c12;}\n";
ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -20px;top: 15px;}\n";
ptr +=".data{padding: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
Далее мы покажем показания температуры с помощью симпатичной маленькой иконки.

Иконка температуры на самом деле является масштабируемой векторной графикой (SVG), определенной в теге <svg>. Создание SVG не требует специальных навыков программирования. Вы можете использовать Google SVG Editor для создания графики для вашей страницы. После значка мы отображаем фактическое значение температуры от датчика:

ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP8266 NodeMCU Weather Report</h1>\n";
ptr +="<div class=\"data\">\n";

ptr +="<div class=\"side-by-side temperature-icon\">\n";
ptr +="<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
ptr +="width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
ptr +="<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
ptr +="c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
ptr +="c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
ptr +="c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
ptr +="c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
ptr +="</svg>\n";
ptr +="</div>\n";

ptr +="<div class=\"side-by-side temperature-text\">Temperature</div>\n";
ptr +="<div class=\"side-by-side temperature\">";
ptr +=(int)TempCstat;
ptr +="<span class=\"superscript\">°C</span></div>\n";
ptr +="</div>\n";
Далее мы отобразим иконку для влажности. Опять же это SVG. После отображения значения влажности мы закрываем все открытые теги, такие как body и html.
ptr +="<div class=\"data\">\n";
ptr +="<div class=\"side-by-side humidity-icon\">\n";
ptr +="<svg version=\"1.1\" id=\"Layer_2\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\"; width=\"12px\" height=\"17.955px\" viewBox=\"0 0 13 17.955\" enable-background=\"new 0 0 13 17.955\" xml:space=\"preserve\">\n";
ptr +="<path fill=\"#FFFFFF\" d=\"M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,2.926,2.133,5.05,1.571,7.057\n";
ptr +="c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107-6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217\"></path>\n";
ptr +="</svg>\n";
ptr +="</div>\n";
ptr +="<div class=\"side-by-side humidity-text\">Humidity</div>\n";
ptr +="<div class=\"side-by-side humidity\">";
ptr +=(int)Humiditystat;
ptr +="<span class=\"superscript\">%</span></div>\n";
ptr +="</div>\n";

ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}

Улучшение кода — автоматическое обновление страницы

Одним из улучшений, которые мы можете сделать с помощью нашего кода, является автоматическое обновление страницы при обновлении значения датчика.

Добавив один метатег в ваш HTML-документ, вы можете настроить браузер на автоматическую перезагрузку страницы с заданным интервалом:

<meta http-equiv="refresh" content="2" >

Поместите этот код в тег <head> вашего документа и этот метатег будет заставлять браузер обновляться каждые две секунды.

Динамическая загрузка данных датчика с AJAX

Обновление веб-страницы не слишком практично, если у вас тяжелая веб-страница. Лучшим методом является использование Asynchronous Javascript And Xml ( AJAX ), чтобы мы могли запрашивать данные с сервера асинхронно (в фоновом режиме) без обновления страницы.

Объект XMLHttpRequest в JavaScript обычно используется для выполнения AJAX на веб-страницах. Он выполняет GET  запрос без вывода сообщений на сервере и обновляет элемент на странице. AJAX — это не новая технология или другой язык, а существующие технологии, используемые по-новому. Помимо этого, AJAX также позволяет:

  • Запрашивать данных с сервера после загрузки страницы
  • Получать данные с сервера после загрузки страницы
  • Отправлять данные на сервер в фоновом режиме

Вот AJAX сценарий, который мы будем использовать. Разместите этот скрипт непосредственно перед закрытием тега </head>:

ptr +="<script>\n";
ptr +="setInterval(loadDoc,200);\n";
ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";
ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.getElementById(\"webpage\").innerHTML =this.responseText}\n";
ptr +="};\n";
ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";
ptr +="</script>\n";

Сценарий начинается с тега <script>, так как сценарий AJAX представляет собой не что иное, как javascript, поэтому нам нужно записать его в тег <script>. Для повторного вызова этой функции мы будем использовать функцию javascript setInterval(). Функция принимает два параметра — функцию, которую нужно выполнить, и интервал времени (в миллисекундах), как часто нужно выполнять функцию:

ptr +="<script>\n";
ptr +="setInterval(loadDoc,200);\n";

Сердцем этого скрипта является функция loadDoc(). Внутри этой функции создается объект XMLHttpRequest(). Этот объект используется для запроса данных с веб-сервера:

ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";

Функция xhttp.onreadystatechange() вызывается каждый раз, когда изменяется readyState. Свойство readyState содержит статус XMLHttpRequest. Может иметь одно из следующих значений:

  • 0: запрос не инициализирован
  • 1: соединение с сервером установлено
  • 2: запрос получен
  • 3: обработка запроса
  • 4: запрос завершен и ответ готов

Свойство status содержит статус объекта XMLHttpRequest. Может иметь одно из следующих значений:

  • 200: «ОК»
  • 403: «Запрещено»
  • 404 «Страница не найдена»

Когда readyState равен 4, а status равен 200, ответ готов. Теперь содержимое элемента id (div содержит значения температуры и влажности) обновляется.

ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.getElementById(\"webpage\").innerHTML =this.responseText}\n";
ptr +="};\n";

Затем HTTP-запрос инициируется с помощью функций open() и send().

ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";

 



Тестер транзисторов / ESR-метр / генератор
Многофункциональный прибор для проверки транзисторов, диодов, тиристоров...
Подробнее


Похожие записи:


редактор
Отправить сообщение об ошибке.

3 комментария

  1. Здравствуйте!
    Скажите, а можно ли использовать смешанный режим в ESP8266 ? Т.е. чтобы доступ к плате был одновременно и через роутер и через точку доступа.

    Ответить

  2. Здравствуйте! итоговый проект не мешает приложить. все отдельно не удобно.

    Ответить

  3. У меня программа не принимает название пина с буквой D. exit status 1
    ‘D8’ was not declared in this scope; did you mean ‘s8’?

    Ответить

Добавить комментарий