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

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

Если у вас есть несколько датчиков, разнесенных в пространстве, то, очевидно, удобно собирать все данные в одном месте. В данном проекте мы создадим веб-сервер с помощью 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";  //Вводим пароль
</pre<
Как только это выполнено, можно загружать скетч в плату.

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

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

</pre<

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

#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();

 

Serial.println("Connecting to ");

Serial.println(ssid);

 

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

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;

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

#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();

Serial.println("Connecting to ");

Serial.println(ssid);

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

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