ESP8266: Como monitorar temperatura e umidade: 12 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

No tutorial de hoje, usaremos um ESP-01, que é o ESP8266 na configuração 01 (com apenas 2 GPIO), para leituras de temperatura e umidade do sensor DHT22. Vou mostrar um esquema elétrico e a parte de programação ESP com um Arduino. O exemplo é simples, fácil de entender e também acompanha o PDF usado no vídeo para auxiliar na montagem.

No projeto, temos então o ESP01, a fonte que converte 110 ou 220 em 5 volts, um regulador de tensão de 3v3, e o DHT22, que é o sensor. Na tela do smartphone, você terá o endereço IP local, além do código JavaScript fornecido pelo ESP. Esta tela, portanto, receberá os parâmetros de temperatura e umidade e imprimirá esses valores, que serão atualizados a cada cinco segundos. Para fazer isso, você não precisa de nenhum aplicativo em telefones e tablets, e isso se aplica tanto ao sistema operacional Android quanto ao IOS.

Etapa 1: Montagem

O esquema elétrico é bastante simples, assim como a parte sobre a montagem, que envolverá o ESP01 como servidor. O ESPO1 será programado como se fosse um Arduino: através da linguagem C. Saliento que parte do código é impressa a partir do navegador. Isso significa que ele envia o código JavaScript para o navegador. Abaixo, vou explicar melhor como isso funciona.

Voltando ao diagrama de fiação, coloquei uma fonte chaveada de 5 volts conectada a um regulador de tensão 3v3 para alimentar o ESP01. Ainda temos o DHT22 com quatro pinos. Um deles, dados, não é usado. No entanto, é necessário um resistor pull up.

Etapa 2: Código

A primeira etapa é incluir as bibliotecas que usaremos. A biblioteca DHT pode ser adicionada pela opção Sketch> Incluir Biblioteca> Gerenciar Bibliotecas …

Na janela que é aberta, procure a biblioteca de sensores DHT.

Em seguida, criamos uma variável do tipo ESP8266WebServer que será nosso servidor e responderá às solicitações HTTP (porta 80).

Também criamos uma variável DHT com parâmetros 0 (que é o pino GPIO 0) e o tipo (em nosso caso DHT22).

#include #include #include #include // Criamos uma variável do tipo ESP8266WebServer que já possui funções // que auxiliam na criação das rotas que o ESP8266 vai responder ESP8266WebServer server (80); // Variável do tipo DHT que possui funções para controlarmos o módulo dht // permitindo ler a temperatura e a umidade DHT dht (0, DHT22);

Etapa 3: configuração

Na configuração, vamos inicializar o Serial apenas para que tenhamos um log. Isso ocorrerá se o ESP8266 estiver conectado ao computador por meio do serial para usar o monitor serial.

Faremos o ESP8266 se conectar à nossa rede. No nosso caso, utilizamos a rede TesteESP com a senha 87654321, mas você terá que alterar de acordo com a rede que utilizar.

// Inicializar um serial apenas caso esteja ocorrendo com o ESP8266 conectado ao computador pela serla queira ter um log // para facilitar o sabre o que está acontecendo com o ESP8266 Serial.begin (115200); // Instrução para o ESP8266 se conectar à rede. // No nosso caso o nome da rede é TesteESP e a senha é 87654321. // Você deve alterar com as informações da sua rede WiFi.begin ("TesteESP", "87654321"); // Caso de feedback usando o Monitor Serial Serial.println (""); Serial.print ("Conectando");

Esperamos que o ESP8266 se conecte à rede e, após a conexão, enviamos as configurações de rede. Mude de acordo com sua rede.

// Esperamos até que o módulo se conecte à rede while (WiFi.status ()! = WL_CONNECTED) {delay (500); Serial.print ("."); } // Configurações do IP fixo. Você pode alterar conforme a sua rede IPAddress ip (192, 168, 3, 11); Gateway de endereço IP (192, 168, 3, 1); Sub-rede IPAddress (255, 255, 255, 0); Serial.print ("Configurando IP fixo para:"); Serial.println (ip); // Envia a configuração WiFi.config (ip, gateway, subnet);

Os próximos comandos são apenas no caso de você ter o ESP8266 conectado ao computador através do serial, para que você tenha feedback do Monitor Serial.

Você pode verificar o IP que o ESP8266 recebeu para ver se é o mesmo que nas configurações.

// Mostramos no Monitor Serial o ip com o qual o esp8266 se conectou para ver se está de acordo com o que configuramos Serial.println (""); Serial.println ("Connectado"); Serial.print ("IP:"); Serial.println (WiFi.localIP ());

Aqui, começamos a definir quais funções serão executadas para cada solicitação.

Na instrução abaixo, toda vez que o ESP8266 receber uma requisição HTTP do tipo GET no caminho / temperatura, a função getTemperature será executada.

// Aqui definimos qual a função será executada para o caminho e tipo dado. // Nesse caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/temperature // (pode ser outro ip dependendo da sua configuração) a função getTemperature será executada server.on ("/ temperature", HTTP_GET, getTemperature);

Nessa outra instrução, toda vez que o ESP8266 receber uma solicitação HTTP do tipo GET no caminho / umidade, a função getHumidity será executada.

// Nesse outo caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/humidity // (pode ser outro ip dependendo da sua configuração) a função getHumidity será executada server.on ("/ umidade", HTTP_GET, getHumidity);

Nesta instrução, toda vez que o ESP8266 receber uma solicitação HTTP do tipo GET no caminho / monitor, a função showMonitor será executada.

A função showMonitor é responsável por retornar o html principal que irá mostrar os valores de temperatura e umidade.

// Nesse caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/monitor // (pode ser outro ip dependendo da configuração) uma função showMonitor será executada. // Esta função retornará a página principal que mostrará os valores // da temperatura e da umidade e recarregará essas informações de tempos em tempos server.on ("/ monitor", HTTP_GET, showMonitor);

Aqui está a definição da função que deve ser executada quando o caminho solicitado não for encontrado.

// Aqui definimos qual função será executada caso o caminho que o cliente requisitou não tenha sido registrado server.onNotFound (onNotFound);

Aqui, inicializamos nosso servidor que declaramos anteriormente na porta 80.

Este é o fim da configuração.

// Inicializamos o servidor que criamos na porta 80 server.begin (); Serial.println ("Servidor HTTP iniciado"); }

Etapa 4: Loop

Graças ao lib ESP8266WebServer, não precisamos verificar no loop se há clientes e qual é o caminho da solicitação. Precisamos apenas chamar handleClient (), e o objeto irá verificar se algum cliente está fazendo alguma requisição e irá redirecionar para a função correspondente que registramos antes.

void loop () {// Verifica se há alguma requisição de algum cliente server.handleClient (); }

Etapa 5: Solicitação não encontrada

Esta é a função que registramos anteriormente para executar quando o cliente faz alguma solicitação que não foi registrada.

A função retorna apenas o código 404 (código padrão para quando um recurso não é encontrado), o tipo de dados retornado (no caso de texto simples) e um texto com as palavras "Não encontrado".

// Função que definimos para ser chamada quando o caminho requisitado não foi registrado void onNotFound () {server.send (404, "text / plain", "Not Found"); }

Etapa 6: Retornando a temperatura

Esta é a função que retornará um json com os dados de temperatura quando o cliente fizer uma solicitação GET em / temperature.

// Função que definimos que será executada quando o cliente fizer uma requisição // do tipo GET no caminho https://192.168.2.8/temperature (pode ser outro ip dependendo da configuração) void getTemperature () {// Fazemos a leitura da temperatura através do módulo dht float t = dht.readTemperature (); // Cria um json com os dados da temperatura String json = "{" temperature / ":" + String (t) + "}"; // Envia o json para o cliente com o código 200, que é o código quando uma requisição foi realizada com sucesso server.send (200, "application / json", json); }

Etapa 7: Retorno de umidade

Esta é a função que retornará um json com os dados de umidade quando o cliente fizer uma solicitação GET em / umidade.

// Função que definimos que será executada quando o cliente fizer uma requisição // do tipo GET no caminho https://192.168.2.8/humidity (pode ser outro ip dependendo da configuração) void getHumidity () {// Fazemos a leitura da umidade através do módulo dht float h = dht.readHumidity (); // Cria um json com os dados da umidade String json = "{" umidade / ":" + String (h) + "}"; // Envia o json para o cliente com o código 200, que é o código quando uma requisição foi realizada com sucesso server.send (200, "application / json", json); }

Etapa 8: HTML

Esta é a função que retornará o html quando o cliente for acessar / monitorar. Esta página mostrará os valores de temperatura e umidade e recarregará os dados de vez em quando. A parte que fica entre e e estilo>

define a aparência da página e você pode alterá-la como quiser.

// Função que definimos que será executada quando o cliente fizer uma requisição // do tipo GET no caminho https://192.168.2.8/monitor (pode ser outro ip dependendo da sua configuração) void showMonitor () {String html = "" "" ""

"Monitor DHT"

"corpo{"

"preenchimento: 35px;"

"cor de fundo: # 222222;" "}"

Etapa 9: Continuação do estilo HTML

"h1 {" "cor: #FFFFFF;" "font-family: sans-serif;" "}" "p {" "color: #EEEEEE;" "font-family: sans-serif;" "tamanho da fonte: 18px;" "}" ""

Aqui temos a parte principal do html. Nele, temos dois parágrafos que vão mostrar a temperatura e a umidade. Preste atenção aos ids dos parágrafos, pois é através deles que iremos recuperar esses parágrafos para inserir os valores de temperatura e umidade após as requisições.

Monitor DHT

Temperatura:

Umidade:

Etapa 10: JavaScript

Aqui começamos a definir o script que irá de tempos em tempos ler os valores de temperatura e umidade. A função refresh () chama as funções refreshTemperature () e refreshHumdity (), e setInterval chama a função refresh a cada 5.000 milissegundos (5 segundos).

"atualizar ();" "setInterval (atualizar, 5000);" "function refresh ()" "{" "refreshTemperature ()" "refreshHumidity ();" "}"

A função refreshTemperature () faz uma solicitação em / temperature, analisa as informações contidas em json e adiciona ao parágrafo o id de temperatura.

"function refreshTemperature ()" "{" "var xmlhttp = new XMLHttpRequest ();" "xmlhttp.onreadystatechange = function () {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200) {" "document.getElementById ('temperatura'). innerHTML = 'Temperatura:' + JSON. parse (xmlhttp.responseText).temperature + 'C'; " "}" "};" "xmlhttp.open ('GET', 'https://192.168.2.8/temperature', true);" "xmlhttp.send ();" "}"

A função refreshHumidity () faz uma solicitação para / umidade, analisa as informações contidas em json e adiciona ao parágrafo a umidade id. E com isso, finalizamos o html que enviaremos nas solicitações no / monitor.

"function refreshHumidity ()" "{" "var xmlhttp = new XMLHttpRequest ();" "xmlhttp.onreadystatechange = function () {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200) {" "document.getElementById ('umidade'). innerHTML = 'Umidade:' + JSON. parse (xmlhttp.responseText).humidity + '%'; " "}" "};" "xmlhttp.open ('GET', 'https://192.168.2.8/humidity', true);" "xmlhttp.send ();" "}"

"";

Etapa 11: Concluindo ShowMonitor

Agora que a string com o html que iremos enviar está pronta, podemos enviá-la para o cliente. Isso completa a função showMonitor e o código.

// Envia o html para o cliente com o código 200, que é o código quando uma requisição foi realizada com sucesso server.send (200, "text / html", html); }

Etapa 12: Teste

Agora abra seu navegador e digite https://192.168.2.8/monitor (você pode precisar de um ip diferente dependendo da sua configuração).