Interface DHT11 DHT22 com ESP32 e valores de exibição usando servidor Web
Você já quis ter sensores espalhados por toda a sua casa e jardim relatando sua temperatura regularmente para um servidor central? Então, este projeto IoT pode ser o ponto de partida sólido para você! Este projeto usa ESP32 como o dispositivo de controle que se conecta facilmente à rede WiFi existente e cria um servidor web. Quando qualquer dispositivo conectado acessa este servidor web, o ESP32 lê a temperatura e umidade relativa do sensor DHT11, DHT22/AM2302 e o envia para o navegador web desse dispositivo com uma interface agradável. Animado? Vamos começar!
| Problema com o sensor de temperatura interna do ESP32 Se você não sabia, o ESP32 vem com um sensor de temperatura interno com uma faixa de -40 ° C a 125 ° C. O sensor de temperatura gera uma tensão proporcional à temperatura, que é convertida em formato digital por meio de um conversor analógico-digital interno. De acordo com a folha de dados ESP32, o problema com este sensor de temperatura é que o deslocamento do sensor varia de chip para chip devido à variação do processo. Além disso, o calor gerado pelo circuito do Wi-Fi afeta as medições de temperatura. Portanto, o sensor de temperatura interno é adequado apenas para aplicações que detectam mudanças de temperatura em vez de temperaturas absolutas. No entanto, você pode obter resultados precisos calibrando o sensor de temperatura e usando ESP32 em um aplicativo minimamente ligado para reduzir a temperatura da CPU. Mas os resultados nunca serão tão precisos quanto com sensores de temperatura baratos como DHT11, DHT22/AM2302. |
Conteudo
Conectando o sensor DHT11, DHT22/AM2302 ao ESP32
Conectar o sensor DHT11 / DHT22 / AM2302 ao ESP32 é bastante simples. Comece colocando o ESP32 na placa de ensaio, garantindo que cada lado da placa esteja em um lado separado da placa de ensaio.
Agora coloque o sensor em sua placa de ensaio ao lado do ESP32. Conecte o pino VCC do sensor ao pino de 3,3 V do ESP32 e faça o aterramento. Também conecte o pino de dados do sensor ao pino D4 no ESP32. Finalmente, precisamos colocar um resistor pull-up de 10KΩ entre o VCC e a linha de dados para mantê-lo ALTO para a comunicação adequada entre o sensor e o MCU. Se acontecer de você ter uma placa de breakout do sensor, não será necessário adicionar qualquer pull-up externo. Ele vem com um resistor pull-up embutido.
Quando terminar, você deve ter algo semelhante à ilustração mostrada abaixo.
Instalando a biblioteca de sensores DHT
A comunicação com os sensores DHT11, DHT22 / AM2302 dá muito trabalho, pois eles têm seu próprio protocolo de fio único para transferência de dados. E este protocolo requer um tempo preciso. Felizmente, não precisamos nos preocupar muito com isso, porque usaremos a biblioteca DHT da Adafruit que cuida de quase tudo. A biblioteca é tão poderosa que funciona nas arquiteturas Arduino e ESP.
Para instalar a biblioteca, navegue até Sketch> Incluir Biblioteca> Gerenciar Bibliotecas … Aguarde o Gerenciador de Bibliotecas baixar o índice das bibliotecas e atualizar a lista de bibliotecas instaladas.
Filtre sua pesquisa digitando ‘sensor DHT’. Deve haver algumas entradas. Procure a biblioteca de sensores DHT da Adafruit. Clique nessa entrada e selecione Instalar.
A biblioteca de sensores DHT usa o backend de suporte do Sensor Adafruit. Portanto, procure o gerenciador de biblioteca por Adafruit Unified Sensor e instale-o também (talvez seja necessário rolar um pouco, para baixo)
Criar ESP32 Web Server usando o modo WiFi Station (STA)
Agora vamos passar para as coisas interessantes!
Como o título sugere, vamos configurar nosso ESP32 no modo Station (STA) e criar um servidor da web para servir páginas da web a qualquer cliente conectado na rede existente.
Antes de enviar o sketch, você precisa fazer uma alteração para que funcione para você. Você precisa modificar as duas variáveis a seguir com suas credenciais de rede, para que o ESP32 possa estabelecer uma conexão com a rede existente.
const char* ssid = "YourNetworkName"; // Insira o SSID aqui const char* password = "YourPassword"; // Insira a senha aqui
Quando terminar, vá em frente e experimente o esboço e então o dissecaremos com alguns detalhes.
#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"
// Remova o comentário de uma das linhas abaixo para qualquer tipo de sensor DHT que você está usando!
//#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
/ * Coloque seu SSID e senha * /
const char* ssid = "YourNetworkName"; // Entre SSID aqui
const char* password = "YourPassword"; // Insira a senha aqui
WebServer server(80);
// Sensor DHT
uint8_t DHTPin = 4;
// Inicializa o sensor DHT.
DHT dht(DHTPin, DHTTYPE);
float Temperature;
float Humidity;
void setup() {
Serial.begin(115200);
delay(100);
pinMode(DHTPin, INPUT);
dht.begin();
Serial.println("Conectando à ");
Serial.println(ssid);
// conecte-se à sua rede wi-fi local
WiFi.begin(ssid, password);
// verifique se o wi-fi está conectado à rede wi-fi
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi conectado..!");
Serial.print("IP obtido: ");
Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("Servidor HTTP iniciado");
}
void loop() {
server.handleClient();
}
void handle_OnConnect() {
Temperature = dht.readTemperature(); // Obtém os valores da temperatura
Humidity = dht.readHumidity(); // Obtém os valores da umidade
server.send(200, "text/html", SendHTML(Temperature,Humidity));
}
void handle_NotFound(){
server.send(404, "text/plain", "Não encontrado");
}
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>Boletim meteorológico ESP32</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>Boletim meteorológico ESP32</h1>\n";
ptr +="<p>Temperatura: ";
ptr +=(int)Temperaturestat;
ptr +="°C</p>";
ptr +="<p>Umidade: ";
ptr +=(int)Humiditystat;
ptr +="%</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}
Acessando o servidor web
Após fazer o upload do sketch, abra o Monitor serial a uma taxa de transmissão de 115200. E pressione o botão RESET no ESP32. Se tudo estiver OK, ele emitirá o endereço IP dinâmico obtido do seu roteador e mostrará a mensagem de servidor HTTP iniciado.
Em seguida, carregue um navegador e aponte-o para o endereço IP mostrado no monitor serial. O ESP32 deve exibir uma página da web mostrando a temperatura e a umidade relativa.
Explicação detalhada do código
O sketch começa incluindo a biblioteca WiFi.h. Esta biblioteca fornece métodos WiFi específicos do ESP32 que estamos chamando para nos conectar à rede. Em seguida, incluímos também a biblioteca WebServer.h, que possui alguns métodos disponíveis que nos ajudarão a configurar um servidor e a lidar com as solicitações HTTP recebidas sem precisar nos preocupar com detalhes de implementação de baixo nível. Finalmente, incluímos a biblioteca DHT.h.
#include <WiFi.h> #include <WebServer.h> #include "DHT.h"
Em seguida, precisamos definir o tipo de sensor DHT que estamos usando. Descomente uma das linhas abaixo de acordo!
//#define DHTTYPE DHT11 // DHT 11 //#define DHTTYPE DHT21 // DHT 21 (AM2301) #define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
Como estamos configurando o ESP32 no modo Station (STA), ele se conectará à rede WiFi existente. Portanto, precisamos fornecê-lo com o SSID e a senha de sua rede.
/ * Coloque seu SSID e senha * / const char* ssid = "YourNetworkName"; // Entre SSID aqui const char* password = "YourPassword"; // Insira a senha aqui
A seguir, declaramos um objeto da biblioteca WebServer, para que possamos acessar suas funções. O construtor deste objeto leva a porta (onde o servidor estará escutando) como um parâmetro. Como 80 é a porta padrão para HTTP, usaremos esse valor. Agora você pode acessar o servidor sem precisar especificar a porta no URL.
// declara um objeto da biblioteca WebServer WebServer server(80);
Em seguida, precisamos definir o número do pino do ESP32 ao qual o pino de dados do nosso sensor está conectado e criar um objeto DHT. Para que possamos acessar funções especiais relacionadas à biblioteca DHT.
// Sensor DHT uint8_t DHTPin = 4; // Inicializa o sensor DHT. DHT dht(DHTPin, DHTTYPE);
Duas variáveis flutuantes viz. Temperatura e umidade são declaradas para armazenar os respectivos valores.
float Temperature; float Humidity;
Função Dentro do Setup()
Dentro da função Setup(), configuramos nosso servidor HTTP antes de realmente executá-lo. Em primeiro lugar, abrimos uma conexão serial para fins de depuração e definimos as portas GPIO para INPUT. Também precisamos inicializar o objeto DHT usando a função begin().
Serial.begin(115200); delay(100); pinMode(DHTPin, INPUT); dht.begin();
Agora, precisamos entrar na rede WiFi usando a função WiFi.begin(). A função leva SSID (nome da rede) e senha como parâmetro.
Serial.println("Conectando à ");
Serial.println(ssid);
// conecte-se à sua rede wi-fi local
WiFi.begin(ssid, password);Enquanto o ESP32 tenta se conectar à rede, podemos verificar o status da conectividade com a função WiFi.status().
// verifique se o wi-fi está conectado à rede wi-fi
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}Assim que o ESP32 estiver conectado à rede, o esboço imprime o endereço IP atribuído ao ESP32 exibindo o valor WiFi.localIP() no monitor serial.
Serial.println("");
Serial.println("WiFi conectado ..!");
Serial.print("IP obtido: ");
Serial.println(WiFi.localIP());Para lidar com as solicitações HTTP de entrada, precisamos especificar qual código executar quando um URL for atingido. Para fazer isso, usamos o método on. Este método leva dois parâmetros. O primeiro é um caminho de URL e o segundo é o nome da função que queremos executar quando esse URL é acessado.
O código a seguir indica que, quando um servidor recebe uma solicitação HTTP no caminho raiz (/), ele aciona a função handle_OnConnect. Observe que o URL especificado é um caminho relativo.
server.on("/", handle_OnConnect);Não especificamos o que o servidor deve fazer se o cliente solicitar qualquer URL diferente do especificado com server.on. Ele deve responder com um status HTTP 404 (Não encontrado) e uma mensagem para o usuário. Colocamos isso em uma função também e usamos server.onNotFound para dizer que deve executá-lo quando recebe uma solicitação de um URI que não foi especificado com server.on
server.onNotFound(handle_NotFound);
Agora, para iniciar nosso servidor, chamamos o método begin no objeto servidor.
server.begin();
Serial.println("Servidor HTTP iniciado ");
Função dentro do Loop()
Para lidar com as solicitações HTTP de entrada reais, precisamos chamar o método handleClient() no objeto do servidor.
server.handleClient();
Em seguida, precisamos criar uma função anexada ao URL root (/) com server.on. Lembrar? No início desta função, obtemos os valores de temperatura e umidade do sensor. Para responder à solicitação HTTP, usamos o método send. Embora o método possa ser chamado com um conjunto diferente de argumentos, sua forma mais simples consiste no código de resposta HTTP, o tipo de conteúdo e o conteúdo.
No nosso caso, estamos enviando o código 200 (um dos códigos de status HTTP), que corresponde à resposta OK. Em seguida, estamos especificando o tipo de conteúdo como “text/html“ e, finalmente, estamos chamando a função personalizada SendHTML() que cria uma página HTML dinâmica contendo valores de temperatura e umidade.
void handle_OnConnect()
{
Temperature = dht.readTemperature(); // Obtém os valores da temperatura
Humidity = dht.readHumidity(); // Obtém os valores da umidade
server.send(200, "text/html", SendHTML(Temperature,Humidity));
}Da mesma forma, precisamos criar uma função para lidar com a página 404 Error.
void handle_NotFound(){
server.send(404, "text/plain", "Não encontrado");
}
Exibindo a página da web em HTML
A função SendHTML() é responsável por gerar uma página web sempre que o servidor web ESP32 obtém uma solicitação de um cliente web. Ele simplesmente concatena o código HTML em uma grande string e retorna para a função server.send() que discutimos anteriormente. A função leva valores de temperatura e umidade como parâmetro para gerar dinamicamente o conteúdo HTML.
O primeiro texto que você deve sempre enviar é a declaração <!DOCTYPE> que indica que estamos enviando código HTML.
String SendHTML(float Temperaturestat,float Humiditystat){
String ptr = "<!DOCTYPE html> <html>\n";Em seguida, o elemento <meta> da janela de visualização torna a página da web responsiva em qualquer navegador da web, enquanto a tag de título define o título da página.
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n"; ptr +="<title>Boletim meteorológico ESP32</title>\n";
Estilizando a página da web
A seguir, temos alguns CSS para estilizar a aparência da página da web. Escolhemos a fonte Helvetica, definimos o conteúdo a ser exibido como um bloco embutido e alinhado no centro.
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";O código a seguir define a cor, a fonte e a margem ao redor do corpo e as tags H1 e 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";
Configurando o Título da Página da Web
Em seguida, o título da página da web é definido; você pode alterar esse texto para qualquer coisa que seja adequada à sua aplicação.
ptr +="<div id=\"webpage\">\n"; ptr +="<h1>Boletim meteorológico ESP32</h1>\n";
Exibindo temperatura e umidade na página da web
Para exibir dinamicamente os valores de Temperatura e umidade, colocamos esses valores na tag de parágrafo. Esses valores são convertidos em inteiros por conversão de tipo. Para exibir o símbolo de grau, usamos entidade HTML °
ptr +="<p>Temperatura: "; ptr +=(int)Temperaturestat; ptr +="°C</p>"; ptr +="<p>Umidade: "; ptr +=(int)Humiditystat; ptr +="%</p>"; ptr +="</div>\n"; ptr +="</body>\n"; ptr +="</html>\n"; return ptr; }
Estilo de página da web para parecer mais profissional
Programadores como nós costumam ser intimidados pelo design – mas um pouco de esforço pode tornar sua página da web mais atraente e profissional. A captura de tela abaixo lhe dará uma idéia básica do que vamos fazer.
Muito incrível, certo? Sem mais delongas, vamos aplicar algum estilo à nossa página HTML anterior. Para começar, copie e cole o código abaixo para substituir a função SendHTML() do esboço acima. Experimente o novo esboço e então faremos sua análise detalhada.
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>Boletim meteorológico ESP32</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>Boletim meteorológico ESP32</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\">Temperatura</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\">Umidade</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;
}Já sabemos que a declaração <!DOCTYPE> informa ao navegador que estamos enviando o código HTML e o elemento <meta> da janela de visualização torna a página da web responsiva. A única adição aqui é que vamos usar as fontes do Google. O Google possui centenas de fontes da web e são gratuitas para uso comercial e pessoal. Perfeito!
Usaremos a fonte da web Open Sans comissionada pelo Google em nossa página da web. A fonte do Google é incorporada usando a tag de link no <head> do seu documento HTML. Selecionamos 300 (leve), 400 (normal) e 600 (negrito) de espessura de fonte para nossa página. Você pode selecionar quantas quiser, mas lembre-se de que selecionar espessuras de fonte desnecessárias prejudica o tempo de carregamento da página. Você também pode adicionar o estilo itálico apenas adicionando o caractere i no final da espessura da fonte, por exemplo, 400i irá incorporar o estilo itálico.
Observe que você não pode ver a fonte do Google, sem uma conexão de internet ativa no dispositivo, você vai acessar esta página. As fontes do Google são carregadas instantaneamente.
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";A seguir, vamos aplicar a fonte ‘Open Sans’ em todo o nosso HTML. Também precisamos especificar sans-serif como nossa fonte substituta, para garantir a compatibilidade máxima entre navegadores / sistemas operacionais. Se o navegador não suportar a primeira fonte, ele tentará a próxima fonte.
ptr +="<title>Boletim meteorológico ESP32</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";Em seguida, precisamos aplicar CSS para Umidade e Temperatura – ícones, títulos e valores reais. Todas essas três coisas são feitas em linha e alinhadas verticalmente. O fundo dos ícones é formado por um círculo usando um raio de borda de 50% e 30px de altura e largura.
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";A seguir, mostraremos as leituras de temperatura com este 
pequeno ícone agradável.
O ícone de temperatura é, na verdade, um Scalable Vector Graphics (SVG) definido na tag <svg>. A criação de SVG não requer nenhuma habilidade especial de programação. Você pode usar o Google SVG Editor para criar gráficos para sua página. Após o ícone, vamos mostrar o valor real da temperatura do sensor.
ptr +="<div id=\"webpage\">\n"; ptr +="<h1>Boletim meteorológico ESP32</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";
A seguir, mostraremos as leituras de umidade com este 
ícone.
Novamente, é um SVG. Depois de imprimir os valores de umidade, vamos encerrar todas as tags abertas como body e 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\">Umidade</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; }
Melhoria do Código – Umidade de atualização automática da página
Uma das melhorias que você pode fazer com nosso código é atualizar a página automaticamente para atualizar o valor do sensor.
Com a adição de uma única metatag em seu documento HTML, você pode instruir o navegador a recarregar automaticamente a página em um intervalo fornecido.
<meta http-equiv="refresh" content="2" >
Coloque este código na tag <head> do seu documento, esta meta tag instruirá o navegador a atualizar a cada dois segundos. Muito bacana!
Carregue dinamicamente os dados do sensor com AJAX
Atualizar uma página da web não é muito prático se você tiver uma página pesada. Um método melhor é usar Javascript e Xml assíncrono (AJAX) para que possamos solicitar dados do servidor de forma assíncrona (em segundo plano) sem atualizar a página.
O objeto XMLHttpRequest em JavaScript é comumente usado para executar AJAX em páginas da web. Ele executa a solicitação GET silenciosa no servidor e atualiza o elemento na página. AJAX não é uma nova tecnologia ou linguagem diferente, apenas tecnologias existentes usadas de novas maneiras. Além disso, o AJAX também torna possível
- Solicitar dados de um servidor após o carregamento da página
- Receber dados de um servidor após o carregamento da página
- Envie dados para um servidor em segundo plano
Aqui está o script AJAX que usaremos. Coloque este script antes de fechar a tag </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";O script começa com a tag <script>, já que o script AJAX nada mais é que um javascript, portanto, precisamos escrevê-lo na tag <script>. Para que esta função seja chamada repetidamente, usaremos a função javascript setInterval(). Leva dois parâmetros – uma função a ser executada e intervalo de tempo (em milissegundos) sobre a freqüência de execução da função.
ptr +="<script>\n"; ptr +="setInterval(loadDoc,200);\n";
A função xhttp.onreadystatechange () é chamada toda vez que o readyState muda. A propriedade readyState contém o status do XMLHttpRequest. Ele possui um dos seguintes valores.
- 0: solicitação não inicializada
- 1: conexão do servidor estabelecida
- 2: pedido recebido
- 3: solicitação de processamento
- 4: pedido concluído e resposta pronta
A propriedade status contém o status do objeto XMLHttpRequest. Ele possui um dos seguintes valores.
- 200: “OK”
- 403: “Proibido”
- 404 Página Não Encontrada”
Quando readyState é 4 e o status é 200, a resposta está pronta. Agora, o conteúdo do elemento com a página de identificação (valores de retenção de div de temperatura e umidade) é atualizado.
ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.getElementById(\"webpage\").innerHTML =this.responseText}\n";
ptr +="};\n";A solicitação HTTP é então iniciada por meio das funções open() e send().
ptr +="xhttp.open(\"GET\", \"/\", true);\n"; ptr +="xhttp.send();\n"; ptr +="}\n";
Conclusão
Neste artigo, mostrei como usar um sensor DHT11 ou 22 em um Servidor Web com o ESP32. Espero que você tenha achado útil e informativo. Se sim, compartilhe com um amigo que também gosta de eletrônica e de fazer coisas!
Eu adoraria saber quais projetos você planeja construir (ou já construiu) com esses DHT11 ou 22 em um ESP32. Se você tiver alguma dúvida, sugestão ou se achar que falta algo neste tutorial, por favor, deixe um comentário abaixo.
