Random Nerd Tutorials
Random Nerd Tutorials
Neste projeto aprenderá a construir um servidor Web ESP32 assíncrono com o DHT11 ou
DHT22 que exibe temperatura e umidade usando o Arduino IDE.
Peças necessárias
ES32 DHT11 ou DHT22 Temperatura e umidade Esquema do circuito IDE do Arduino
Esquemático
Antes de prosseguir para o servidor da web, é necessário conectar o sensor DHT11 ou
DHT22 ao ESP32.Nesse caso, estamos conectando o pino de dados ao GPIO 27 , mas
você pode conectá-lo a qualquer outro pino digital.
Nota: se você estiver usando um módulo com um sensor DHT, normalmente ele vem com
apenas três pinos. Os pinos devem ser rotulados para que você saiba como conectá-los.
Além disso, muitos desses módulos já vêm com um resistor pull up interno, portanto você
não precisa adicionar um ao circuito.
Instalando Bibliotecas
Você precisa instalar algumas bibliotecas para este projeto:
As bibliotecas DHT e Adafruit Unified Sensor Driver para ler no sensor DHT.
ESPAsyncWebServer e Async TCP para criar o servidor da Web assíncrono.
Siga as próximas instruções para instalar essas bibliotecas:
Para ler o sensor DHT usando o Arduino IDE, é necessário instalar a biblioteca de sensores
DHT . Siga as próximas etapas para instalar a biblioteca.
Você também precisa instalar a biblioteca Driver Adafruit Unified Sensor para trabalhar com
o sensor DHT. Siga as próximas etapas para instalar a biblioteca.
Clique aqui para baixar a biblioteca AsyncTCP . Você deve ter uma pasta .zip na pasta
Downloads
Descompacte a pasta .zip e você deve obter a pasta AsyncTCP-master
Renomeie sua pasta de AsyncTCP-master para AsyncTCP
Mova a pasta AsyncTCP para a pasta de bibliotecas de instalação do Arduino IDE
Por fim, abra novamente o seu Arduino IDE
Denunciar este anúncio
Código
Vamos programar o ESP32 usando o Arduino IDE, portanto, certifique-se de ter o
complemento ESP32 instalado antes de continuar:
Instale a placa ESP32 no Arduino IDE (instruções para Windows, Mac e Linux)
Abra seu IDE do Arduino e copie o seguinte código.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
String readDHTTemperature() {
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
//float t = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
else {
Serial.println(t);
return String(t);
}
}
String readDHTHumidity() {
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
float h = dht.readHumidity();
if (isnan(h)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
else {
Serial.println(h);
return String(h);
}
}
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("humidity").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 10000 ) ;
</script>
</html>)rawliteral";
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
void loop(){
}
Denunciar este anúncio
Importando bibliotecas
Primeiro, importe as bibliotecas necessárias. O WiFi , ESPAsyncWebServer e
ESPAsyncTCP são necessários para construir o servidor web. O Adafruit_Sensor e as
bibliotecas DHT são necessárias para ler os sensores DHT11 ou DHT22.
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <ESPAsyncTCP.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
Definindo suas credenciais de rede
Insira suas credenciais de rede nas seguintes variáveis, para que o ESP32 possa se
conectar à sua rede local.
AsyncWebServer server(80);
Denunciar este anúncio
String readDHTTemperature() {
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
//float t = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
else {
Serial.println(t);
return String(t);
}
}
Obter leituras do sensor é tão simples quanto usar os métodos readTemperature () e
readHumidity () no objeto dht .
float t = dht.readTemperature();
float h = dht.readHumidity();
Também temos uma condição que retorna dois traços (-), caso o sensor falhe nas leituras.
if (isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
As leituras são retornadas como tipo de sequência. Para converter um float em uma string,
use a função String () .
return String(t);
Por padrão, estamos lendo a temperatura em graus Celsius. Para obter a temperatura em
graus Fahrenheit, comente a temperatura em Celsius e remova o comentário da
temperatura em Fahrenheit, para obter o seguinte:
//float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float t = dht.readTemperature(true);
Construindo a página da Web
Prosseguindo para a página do servidor da web.
Todo o texto HTML com estilos incluídos é armazenado na variável index_html . Agora,
examinaremos o texto HTML e veremos o que cada parte faz.
A seguinte tag <meta> torna sua página da web responsiva em qualquer navegador.
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
Denunciar este anúncio
Basicamente, estamos configurando a página HTML para exibir o texto com a fonte Arial em
bloco sem margem e alinhada no centro.
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
Definimos o tamanho da fonte para o cabeçalho ( h2 ), parágrafo ( p ) e as unidades (
.unidades ) das leituras.
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
Denunciar este anúncio
dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
Todas as tags anteriores devem estar entre as tags <head> e </head> . Essas tags são
usadas para incluir conteúdo que não é diretamente visível ao usuário, como as tags
<meta> , <link> e os estilos.
Corpo HTML
Dentro das tags <body> </body> é onde adicionamos o conteúdo da página da web.
As tags <h2> </h2> adicionam um cabeçalho à página da web. Nesse caso, o texto
“servidor ESP32 DHT”, mas você pode adicionar qualquer outro texto.
Então, existem dois parágrafos. Um para exibir a temperatura e o outro para exibir a
umidade. Os parágrafos são delimitados pelas tags <p> e </p> . O parágrafo para a
temperatura é o seguinte:
<p>
<i class="fas fa-thermometer-half" style="color:#059e8a;"</i>
<span class="dht-labels">Temperature</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">°C</sup>
</p>
E o parágrafo para a umidade está no seguinte trecho:
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
As tags <i> exibem os ícones fontawesome.
<span class="dht-labels">Temperature</span>
O texto TEMPERATURE entre os sinais% é um espaço reservado para o valor da
temperatura.
<span id="temperature">%TEMPERATURE%</span>
Isso significa que esse texto % TEMPERATURE% é como uma variável que será
substituída pelo valor real da temperatura do sensor DHT. Os espaços reservados no texto
HTML devem estar entre sinais de%.
<sup class="units">°C</sup>
As marcas <sup> < / sup> tornam o texto sobrescrito.
Usamos a mesma abordagem para o parágrafo de umidade, mas ele usa um ícone
diferente e o espaço reservado % HUMIDITY% .
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
Atualizações automáticas
Finalmente, há algum código JavaScript em nossa página da web que atualiza a
temperatura e a umidade automaticamente, a cada 10 segundos.
<script>
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("humidity").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 10000 ) ;
</script>
Denunciar este anúncio
Para atualizar a temperatura em segundo plano, temos uma função setInterval () que é
executada a cada 10 segundos.
Basicamente, ele faz um pedido no URL / temperature para obter a leitura mais recente da
temperatura.
Quando recebe esse valor, ele atualiza o elemento HTML cujo ID é temperatura .
Importante: como o sensor DHT é muito lento para obter as leituras, se você planeja ter
vários clientes conectados a um ESP32 ao mesmo tempo, recomendamos aumentar o
intervalo de solicitação ou remover as atualizações automáticas.
Processador
Agora, precisamos criar a função processor () , que substituirá os espaços reservados em
nosso texto HTML pelos valores reais de temperatura e umidade.
if(var == "TEMPERATURE"){
return readDHTTemperature();
}
Denunciar este anúncio
Serial.begin(115200);
Inicialize o sensor DHT.
dht.begin();
Conecte-se à sua rede local e imprima o endereço IP do ESP32.
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
Por fim, adicione as próximas linhas de código para manipular o servidor da web.
server.begin();
Como este é um servidor da Web assíncrono, não precisamos escrever nada no loop () .
void loop(){
}
É assim que o código funciona.
Carregar o código
Agora, faça o upload do código para o seu ESP32. Verifique se você selecionou a placa e a
porta corretas.
Após o upload, abra o Serial Monitor a uma taxa de transmissão de 115200. Pressione o
botão de reset ESP32. O endereço IP do ESP32 deve ser impresso no monitor serial.
Empacotando
Neste tutorial, mostramos como criar um servidor da Web assíncrono com o ESP32 para
exibir as leituras do sensor de um sensor DHT11 ou DHT22 e como atualizar as leituras
automaticamente
Sensor dht11
Especificações:
– Modelo: DHT11 (Datasheet)
– Faixa de medição de umidade: 20 a 90% UR
– Faixa de medição de temperatura: 0º a 50ºC
– Alimentação: 3-5VDC (5,5VDC máximo)
– Corrente: 200uA a 500mA, em stand by de 100uA a 150 uA
– Precisão de umidade de medição: ± 5,0% UR
– Precisão de medição de temperatura: ± 2.0 ºC
– Tempo de resposta: 2s
– Dimensões: 23 x 12 x 5mm (incluindo terminais)
ntrodução
Umidade é a quantidade de vapor de água na atmosfera.
Sensor DHT11
O sensor DHT11 é um dispositivo de baixo custo usado para
medição de umidade e temperatura do ar. O sensor de
umidade é capacitivo e o sensor de temperatura é um
termistor NTC, isto é um resistor sensível à variações de
temperatura. Dentro do sensor existe um microcontrolador
que faz as medições e transmite os valores no formato digital
através de um pino de saída. Segundo o fabricante, a
transmissão digital pode ser realizada através de um cabo de
até 20 metros.
VCC = 3,5 a 5V
DATA = comunicação de dados
NC = sem conexão
GND = terra
Sensor DHT22/AM2302
O Sensor DHT22 ou AM2302 também é usado para medição de
umidade e temperatura do ar. Só que com características
melhores do que o do DHt11. Tem maior precisão nas
medições e abrange uma faixa maior de temperatura e
umidade. Por isso ele custa um pouco mais caro.
VCC = 3,3 a 5V
DATA = comunicação de dados
NC = sem conexão
GND = terra
Para os curiosos, encontrei essa imagem do sensor DHT22
aberto e sem a tampa. Fonte = How to Mechatronics.
Sketch ArduinoDHT.ino
Potenciometro
Função analogRead ()
Ler uma entrada analógica com o ESP32 usando o Arduino IDE
é tão simples quanto usar a função analogRead () . Ele aceita
como argumento o GPIO que você deseja ler:
analogRead(GPIO);
O ESP32 suporta medições em 18 canais diferentes. Apenas
15 estão disponíveis na placa DEVKIT V1 DOIT (versão com 30
GPIOs).
Esquemático
Conecte um potenciômetro ao seu ESP32. O pino do meio do
potenciômetro deve ser conectado ao GPIO 34. Você pode
usar o seguinte diagrama esquemático como referência.
void setup() {
Serial.begin(115200);
delay(1000);
}
void loop() {
// Reading potentiometer value
potValue = analogRead(potPin);
Serial.println(potValue);
delay(500);
}
Ver código bruto
Serial.begin(115200);
No loop () , use a função analogRead () para ler a entrada
analógica do potPin .
potValue = analogRead(potPin);
Por fim, imprima os valores lidos no potenciômetro no monitor
serial.
Serial.println(potValue);
Faça o upload do código fornecido para o seu ESP32.
Verifique se a placa direita e a porta COM estão selecionadas
no menu Ferramentas.
Testando o exemplo
Após fazer o upload do código e pressionar o botão de reset
do ESP32, abra o Serial Monitor a uma taxa de transmissão de
115200. Gire o potenciômetro e veja os valores mudando.
Especificações:
– Modelo: SRD-05VDC-SL-C (Datasheet)
– Tensão de operação: 5VDC
– Permite controlar cargas de 220V AC
– Corrente típica de operação: 15~20mA
– LED indicador de status
– Pinagem: Normal Aberto, Normal Fechado e Comum
– Tensão de saída: (30 VDC a 10A) ou (250VAC a 10A)
– Furos de 3mm para fixação nas extremidades da placa
– Tempo de resposta: 5~10ms
– Ativo baixo (Aciona com GND)
– Dimensões: 135 x 52 x 20mm
Esp32
Módulo ESP32-Wroom-32
ESP32-Wroom-32 Datasheet
ESP32-PICO-KIT
ESP-WROVER-KIT
ESP-WROVER-KIT-VB
ESP32-DevKitC
ESP32-LyraTD-MSC
ESP32-LyraT
Placas de Desenvolvimento do ESP32