ESP32: Отображение показаний датчиков DHT11 и DHT22 на веб-сервере

07.09.2021Вольтик.руИнструкции и решения проблем, Проекты на ESP8266 / EPS32, Разное4

Если у вас есть несколько датчиков, разнесенных в пространстве, то, очевидно, удобно собирать все данные в одном месте. В данном проекте мы создадим веб-сервер с помощью ESP32, которая будет собирать показания температуры и относительной влажности от датчиков DHT11, DHT22/AM2302 и отображать их. Давайте начнем!

Вы знали?

У ESP32 есть внутренний датчик температуры, работающий в диапазоне от -40°C до 125°C. Датчик генерирует напряжение пропорциональное температуре, которое преобразуется аналогово-цифровым преобразователем.

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

Тем не менее, датчик возможно откалибровать, а тепловыделение модулей – уменьшить. Но все равно, результаты будут не такими точными, как при использовании датчиков DHT11 и DHT22/AM2302.

Подключение датчиков к плате ESP32

Подключение весьма простое: размещаем ESP32 на макетной плате, ставим датчик на плату перед ESP32. Соединяем VCC датчика с 3,3V выходом платы и земли обоих устройств.

Также необходимо подключить выход Data датчика к D4, и, наконец, ставим резистор на 10кОм между VCC и проводом данных для корректного обмена информацией между датчиком и ESP32.

У вас должно получиться что-то похожее:

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

Для этих датчиком создан собственный протокол обмена данных, который требует синхронизации. К счастью, с этим нам бороться не придется, так, как существует библиотека от Adafruit для датчиков DHT.

Для установки библиотеки перейдите Скетч->Подключить библиотеку->Управлять библиотеками…

Найдите библиотеку DHT sensor от Adafruit, и выберите «Установка».

Также, для работы этой библиотеки требуется Adafruit Unified Sensor, которую вы также можете установить в менеджере библиотек.

Создаем веб-сервер на ESP32

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

Прежде, чем загрузить данный скетч, потребуется внести одно изменение – нужно указать ваши учетные данные сети в данных строках:

const char* ssid = "YourNetworkName";  // Вводим сюда SSID

const char* password = "YourPassword";  //Вводим пароль;

const char* ssid = "YourNetworkName"; // Вводим сюда SSID

const char* password = "YourPassword"; //Вводим пароль;

Как только это выполнено, можно загружать скетч в плату.

#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"

// Раскомментируйте ту строку, которая соответствует вашему датчику
//#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22  // DHT 22 (AM2302), AM2321

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

WebServer server(80);

// Датчик DHT
uint8_t DHTPin = 4;

// Инициализируем DHT
DHT dht(DHTPin, DHTTYPE);

float Temperature;
float Humidity;

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

  // Подключаемся к WiFi ---
  Serial.println("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  // Проверяем подключение
  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>ESP32 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>ESP32 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;
}

#include <WiFi.h>

#include <WebServer.h>

#include "DHT.h"

// Раскомментируйте ту строку, которая соответствует вашему датчику

//#define DHTTYPE DHT11 // DHT 11

//#define DHTTYPE DHT21 // DHT 21 (AM2301)

#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321

const char* ssid = "YourNetworkName"; // Вводим сюда SSID

const char* password = "YourPassword"; //Вводим пароль

WebServer server(80);

// Датчик DHT

uint8_t DHTPin = 4;

// Инициализируем DHT

DHT dht(DHTPin, DHTTYPE);

float Temperature;

float Humidity;

void setup() {

Serial.begin(115200);

delay(100);

pinMode(DHTPin, INPUT);

dht.begin();

// Подключаемся к WiFi ---

Serial.println("Connecting to ");

Serial.println(ssid);

WiFi.begin(ssid, password);

// Проверяем подключение

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>ESP32 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>ESP32 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 на ESP32. Если ошибок нет, в мониторе порта увидим IP-адрес платы и сообщение «HTTP server started»

Далее запускаем браузер и вводим IP-адрес платы. Должна открыться страница с подобным содержимым:

Как работает код?

Сначала подключаем библиотеку WiFi.h, которая позволяет подключиться к сети, подключаем WebServer.h для создания и настройки веб-сервера, и, наконец, библиотеку DHT.h.

#include <WiFi.h>

#include <WebServer.h>

#include "DHT.h"

#include <WiFi.h>

#include <WebServer.h>

#include "DHT.h"

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

//#define DHTTYPE DHT11   // DHT 11

//#define DHTTYPE DHT21   // DHT 21 (AM2301)

#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

//#define DHTTYPE DHT11 // DHT 11

//#define DHTTYPE DHT21 // DHT 21 (AM2301)

#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321

Для подключения к сети в режиме станции нам потребуются логин и пароль от WiFi.

const char* ssid = "YourNetworkName";  // Вводим сюда SSID

const char* password = "YourPassword";  //Вводим пароль

const char* ssid = "YourNetworkName"; // Вводим сюда SSID

const char* password = "YourPassword"; //Вводим пароль

Затем декларируем объект библиотеки WebServer и указываем порт сервера (80). Мы указываем этот порт, поскольку он является портом HTTP по умолчанию.

WebServer server(80);

1	WebServer server(80);

Нужно определить номер выхода ESP32, к которому подключен выход Data датчика и создать объект библиотеки DHT.

// датчик DHT

uint8_t DHTPin = 4;

 

// Инициализируем DHT

DHT dht(DHTPin, DHTTYPE);

// датчик DHT

uint8_t DHTPin = 4;

// Инициализируем DHT

DHT dht(DHTPin, DHTTYPE);

Создаем две переменные для показаний температуры и влажности:

float Temperature;

float Humidity;

float Temperature;

float Humidity;

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

void setup() {

Serial.begin(115200);

delay(100);

 

pinMode(DHTPin, INPUT);

 

dht.begin();

void setup() {

Serial.begin(115200);

delay(100);

pinMode(DHTPin, INPUT);

dht.begin();

Теперь подключаемся к WiFi, используя ранее введенные данные.

Serial.println("Connecting to ");

Serial.println(ssid);

 

//подключаемся к WiFi

WiFi.begin(ssid, password);

Serial.println("Connecting to ");

Serial.println(ssid);

//подключаемся к WiFi

WiFi.begin(ssid, password);

Пока плата пытается установить подключение, мы можем проверять статус:

//проверяем подключение

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.print(".");

}

//проверяем подключение

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.print(".");

}

Как только плата подключится к сети, программа выдаст IP-адрес, присвоенный сетью в мониторе порта.

Serial.println("");

Serial.println("WiFi connected..!");

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

Serial.println("");

Serial.println("WiFi connected..!");

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

Для того, чтобы обрабатывать HTTP-запросы, нам требуется метод, задающий действия по запросам.

Данные строки определяют, что при получении запроса по корневому адресу (/), запускается функция hadle_OnConnect.

server.on("/", handle_OnConnect);

1	server.on("/", handle_OnConnect);

Также задаем действия для обращения по любому другому адресу, кроме корневого. В данном случае сервер будет выдавать ошибку 404 (Not Found).

server.onNotFound(handle_NotFound);

1	server.onNotFound(handle_NotFound);

Запускаем сервер.

server.begin();

Serial.println("HTTP server started");

}

server.begin();

Serial.println("HTTP server started");

}

Для обработки реальных запросов, создадим объект handleClient()

server.handleClient();

1	server.handleClient();

Теперь используем функцию, созданную для обращения к корневому адресу. В этом случае при обращении отправляем код 200, который соответствует ответу “OK”.

Указываем тип выдаваемых данных «text/html» и посылаем данные с помощью функции SendHTML(), которая создает динамическую HTML-страницу с показаниями температуры и влажности:

void handle_OnConnect() {

 

Temperature = dht.readTemperature(); // Получает значение температуры

Humidity = dht.readHumidity(); // Получаем показания влажности

server.send(200, "text/html", SendHTML(Temperature,Humidity));

}

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");

}

void handle_NotFound(){

server.send(404, "text/plain", "Not found");

}

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

Создаем функцию SendHTML(), которая генерирует веб-страницу

Для начала указываем <!DOCTYPE>, в котором указано, что мы посылаем код HTML. Задаем теги meta и title

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>ESP32 Weather Report</title>\n";

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>ESP32 Weather Report</title>\n";

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

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

1	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>ESP32 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;

}

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>ESP32 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;

}

Улучшаем внешний вид страницы

Программисты обычно не любят дизайн, но мы лишь немного улучшим внешний вид. Сделаем так, как на этом скриншоте:

Для этого подредактируем наш предыдущий скетч. Замените функцию 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>ESP32 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>ESP32 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;

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

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>ESP32 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>ESP32 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 +="</body>\n";

ptr +="</html>\n";

return ptr;

}

Почти все в этом коде должно быть вам понятно. Мы, по сути, только добавили шрифты 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";

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";

Применяем шрифт ко всему файлу HTML. Также, указываем дополнительный шрифт, если первым не будет работать в каком-либо браузере.

ptr +="<title>ESP32 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 +="<title>ESP32 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 для отображения иконок влажности и температуры, заголовков и значений с датчика:

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";