Monitor de Temperatura e Umidade com NODEMCU ESP8266 como Servidor Web
Olá pessoal,
Os módulos e placas de desenvolvimento baseados no microcontrolador ESP8266, como a NODEMCU , têm ganhado destaque para soluções de IoT devido à sua relação custo-benefício. Este microcontrolador possui como principal característica o uso da tecnologia de comunicação Wi-Fi, podendo ser programado para ser usado como um servidor Web independente.
Neste tutorial você vai aprender a criar um servidor web com a NODEMCU ESP 8266 para monitorar a temperatura e a umidade lida pelo sensor DHT11.
Vamos começar?
MATERIAIS NECESSÁRIOS
1 x NODEMCU ESP8266;
1 x Cabo micro USB;
1 x Sensor DHT11;
1 x Resistor de 10 kΩ;
1 x Protoboard;
Fios jumper.
ESQUEMÁTICO DE LIGAÇÃO DOS COMPONENTES
Antes de iniciar a montagem elétrica do circuito, certifique-se que a NODEMCU ESP8266 esteja desligada, esta medida evitará possíveis danos a sua placa. Em seguida, monte o circuito da Figura 1.
Ao montar seu circuito observe os seguintes pontos:
• O sensor DHT11 possui 4 terminais. O primeiro (VCC) é o terminal de alimentação, que conforme datasheet do fabricante pode ser entre 3 V e 5,5 V. O segundo (DATA) é o pino de comunicação de dados, será através dele que o valor da temperatura e umidade serão comunicados. O terceiro (NC) é um pino vazio. Por fim, o último (GND) é o terminal de terra do sensor;
• O pino 1 do sensor DHT11 será ligado a alimentação de 3,3 V da placa NODEMCU ESP8266;
• O pino 2 deve ser conectado à porta digital D2 (GPIO4);
• No pino 2 vamos conectar um resistor de 10 kΩ pull-up (resistor conectado ao VCC);
• O pino 4 deve ser conectado ao GND (terra).
ELABORANDO O CÓDIGO
Após a verificação do circuito montado, vamos a programação do nosso Sketch. Inicialmente, vamos proceder a instalação das bibliotecas necessárias para utilização do sensor DHT11. Estas bibliotecas encontram-se disponíveis para download nos seguintes links:
Após realizar o download da biblioteca, vamos instalá-la por meio do seguinte caminho: Toolbar > Sketch > Incluir biblioteca > Adicionar biblioteca ZIP, conforme ilustra a Figura 2.
Com a biblioteca instalada, vamos a programação do nosso Sketch. Este projeto propõe a criação de um servidor Web que atualiza a temperatura e umidade automaticamente, fazendo uso do sensor DHT11 e da NODEMCU ESP8266.
Para melhor compreensão o código será explicado passo-a-passo a seguir. Neste momento, observe o código abaixo e aproveite para analisar sua estrutura.
#include<ESP8266WiFi.h> //Biblioteca para funcionamento do WiFi do ESP
#include<ESP8266WebServer.h> //Biblioteca para o ESP funcionar como servidor
#include <DHT.h> //Biblioteca para funcionamento do sensor de temperatura e umidade DHT11
const char* ssid = "XXXXXX"; // Rede WiFi
const char* password = "1235678"; //Senha da Rede WiFi
ESP8266WebServer server(80); //server na porta 80
#define DHTPIN 4 //Pino digital D2 (GPIO4) conectado ao DHT11
#define DHTTYPE DHT11 //Tipo do sensor DHT11
DHT dht(DHTPIN, DHTTYPE); //Inicializando o objeto dht do tipo DHT passando como parâmetro o pino (DHTPIN) e o tipo do sensor (DHTTYPE)
float temperatura; //variável para armazenar a temperatura
float umidade; //Variável para armazenar a umidade
void setup() {
Serial.begin(115200); //Inicializa a comunicação serial
delay(50); // ?Intervalo para aguardar a estabilização do sistema
dht.begin(); //Inicializa o sensor DHT11
Serial.println("Conectando a Rede: "); //Imprime na serial a mensagem
Serial.println(ssid); //Imprime na serial o nome da Rede Wi-Fi
WiFi.begin(ssid, password); //Inicialização da comunicação Wi-Fi
//Verificação da conexão
while (WiFi.status() != WL_CONNECTED) { //Enquanto estiver aguardando status da conexão
delay(1000);
Serial.print("."); //Imprime pontos
}
Serial.println("");
Serial.println("WiFi Conectado");
Serial.print("IP: ");
Serial.println(WiFi.localIP()); //Função para exibir o IP da ESP
server.on("/", handle_OnConnect); //Servidor recebe uma solicitação HTTP - chama a função handle_OnConnect
server.onNotFound(handle_NotFound); //Servidor recebe uma solicitação HTTP não especificada - chama a função handle_NotFound
server.begin(); //Inicializa o servidor
Serial.println("Servidor HTTP inicializado");
}
void loop() {
server.handleClient(); //Chama o método handleClient()
}
void handle_OnConnect() {
temperatura = dht.readTemperature(); //Realiza a leitura da temperatura
umidade = dht.readHumidity(); //Realiza a leitura da umidade
Serial.print("Temperatura: ");
Serial.print(temperatura); //Imprime no monitor serial o valor da temperatura lida
Serial.println(" ºC");
Serial.print("Umidade: ");
Serial.print(umidade); //Imprime no monitor serial o valor da umidade lida
Serial.println(" %");
server.send(200, "text/html", EnvioHTML(temperatura, umidade)); //Envia as informações usando o código 200, especifica o conteúdo como "text/html" e chama a função EnvioHTML
}
void handle_NotFound() { //Função para lidar com o erro 404
server.send(404, "text/plain", "Não encontrado"); //Envia o código 404, especifica o conteúdo como "text/pain" e envia a mensagem "Não encontrado"
}
String EnvioHTML(float Temperaturastat, float Umidadestat) { //Exibindo a página da web em HTML
String ptr = "<!DOCTYPE html> <html>\n"; //Indica o envio do código HTML
ptr += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n"; //Torna a página da Web responsiva em qualquer navegador Web
ptr += "<meta http-equiv='refresh' content='2'>";//Atualizar browser a cada 2 segundos
ptr += "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
ptr += "<title>Monitor de Temperatura e Umidade</title>\n"; //Define o título da página
//Configurações de fonte do título e do corpo do texto da página web
ptr += "<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #000000;}\n";
ptr += "body{margin-top: 50px;}\n";
ptr += "h1 {margin: 50px auto 30px;}\n";
ptr += "h2 {margin: 40px auto 20px;}\n";
ptr += "p {font-size: 24px;color: #000000;margin-bottom: 10px;}\n";
ptr += "</style>\n";
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<div id=\"webpage\">\n";
ptr += "<h1>Monitor de Temperatura e Umidade</h1>\n";
ptr += "<h2>NODEMCU ESP8266 Web Server</h2>\n";
//Exibe as informações de temperatura e umidade na página web
ptr += "<p><b>Temperatura: </b>";
ptr += (float)Temperaturastat;
ptr += " Graus Celsius</p>";
ptr += "<p><b>Umidade: </b>";
ptr += (float)Umidadestat;
ptr += " %</p>";
ptr += "</div>\n";
ptr += "</body>\n";
ptr += "</html>\n";
return ptr;
}
Para melhor compreensão do código acompanhe os seguintes passos:
1 – Incluir as bibliotecas
Iniciamos o código do Monitor de Temperatura e Umidade com NODEMCU ESP8266 como Servidor Web incluindo as bibliotecas necessárias para o uso da conexão Wi-Fi pela NODEMCU ESP8266 e para funcionamento do sensor DHT11. Também faz-se necessária a inclusão da biblioteca ESP8266WebServer.h, que possui alguns métodos que nos ajudarão a configurar um servidor e a lidar com solicitações HTTP de entrada.
2 – Incluir as configurações de rede
Como vamos utilizar a NODEMCU ESP8266 no modo Station (STA), que permite que a placa se conecte a uma rede Wi-Fi existente, precisamos fornecer o nome (ssid) e a senha (password) da rede. Desta forma, substitua as informações entre aspas pelas informações da sua rede local.
3 – Definir objetos e declarar variáveis
Em seguida, declaramos um objeto da biblioteca ESPWebServer, para que possamos acessar suas funções. Neste objeto, precisamos passar como parâmetro a porta onde o servidor será executado. Desse modo, passamos como parâmetro a porta 80, que é a porta padrão usada para HTTP.
Logo após, definimos o GPIO ao qual o pino de dados do DHT11 está conectado. Neste caso, ele está conectado ao GPIO 4 (D2).
Posteriormente, selecionamos o tipo de sensor DHT (11 ou 22) que estamos usando. Neste exemplo, estamos usando o sensor DHT11. Feito isso, instanciamos um objeto DHT passando como parâmetros o tipo e o pino definidos anteriormente.
Além disso, declaramos duas variáveis do tipo float para armazenar os valores lidos pelo sensor DHT11, sendo elas: temperatura e umidade.
4 – Configuração do servidor
Na função setup, vamos realizar as configurações do servidor antes de realmente executá-lo. Mas antes disso, inicializamos a comunicação serial e o sensor DHT11.
Em seguida, tentamos conectar a NODEMCU ESP8266 a rede Wi-Fi, por meio da função WiFi.begin() que recebe como parâmetros o nome da rede (ssid) e a senha (password).
Enquanto, a NODEMCU ESP8266 tenta se conectar à rede, vamos verificar o status da conectividade por meio da função WiFi.status(). No momento em que a placa NODEMCU consegue se conectar à rede, será impresso no monitor serial o endereço de IP atribuído à placa.
5 – Solicitações HTTP
Dependendo das solicitações HTTP de entrada precisamos especificar qual código executar quando um URL for atingido. Quando um servidor recebe uma solicitação HTTP no caminho raiz (/), chamamos a função handle_OnConnect, através da instrução server.on(“/”, handle_OnConnect);.
No entanto, quando o servidor recebe qualquer URL diferente do caminho raiz, ele deve responder com um status HTTP 404 (não encontrado) e uma mensagem para o usuário. Para isso, usamos a função server.onNotFound(handle_NotFound);.
6 – Inicializar o servidor
O próximo passo é a inicialização do servidor, que é realizado através da instrução server.begin();
7 – Retorno das solicitações HTTP
Para lidar com as solicitações HTTP precisamos chamar o método handleClient no objeto do servidor na função principal. O método handleClient() faz parte da biblioteca ESP8266WebServer e lida com algumas operações de fundo para ter um cliente conectado ao servidor.
8 – Criar função handle_OnConect()
Em seguida, precisamos criar uma função anexada ao URL raiz (/) com server.on. Nesta função, obteremos os valores lidos pelo sensor DHT11 de temperatura e umidade e armazenaremos nas variáveis umidade e temperatura. Estes valores serão impressos no monitor serial.
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.
Em nosso exemplo, estamos enviando o código 200, código de status HTTP que corresponde a resposta OK. Em seguida, especificamos o tipo de conteúdo como “text / html“ e, finalmente, chamamos a função EnvioHTML(), responsável por criar uma página HTML dinâmica contendo valores de temperatura e umidade.
9 – Criar função handle_NotFound()
Da mesma forma, precisamos criar uma função para lidar com a página 404 Error. Sempre que esta função for chamada a página Web exibirá a mensagem “Não encontrado”.
10 – Criara página Web em HTML
A função EnvioHTML() é responsável por gerar uma página da web sempre que o servidor Web NODEMCU ESP8266 obtiver uma solicitação de um cliente. Esta função concatena o código HTML em uma grande string e retorna à server.send(). Além disso, EnvioHTML() usa valores de temperatura e umidade como parâmetro para gerar dinamicamente o conteúdo HTML.
SERVIDOR EM EXECUÇÃO
Com a programação do Sketch finalizada, faça o upload do código para a sua placa NODEMCU ESP8266. Em seguida, abra o monitor serial do Arduino IDE e defina a taxa de bauds para 115200. A Figura 3 ilustra as mensagem que serão exibidas no monitor serial.
Em seguida, abra o seu navegador de internet e digite na barra de endereços o endereço de IP da NODEMCU ESP8266. Em nosso exemplo, o IP foi 192.168.88.71. A Figura 4 ilustra página Web criada no projeto Monitor de Temperatura e Umidade com NODEMCU ESP8266 como Servidor Web.
Espero que tenham gostado deste tutorial. Em caso de dúvidas deixe seu comentário abaixo.
Att.,
Carol Correia Viana
Você precisa fazer log in para comentar.