Por Fernando Koyanagi

Características principais

Leitura da Temperatura

Leitura da Umidade

Montagem

Vamos ao códigoPrimeiro passo é incluir as libs que iremos utilizar. A lib do DHT pode ser adicionada pela opção Sketch > Incluir Biblioteca > Gerenciar Bibliotecas...Na janela que abrir procure por DHT sensor library.Depois disso criamos uma variável do tipo ESP8266WebServer que será o nossoservidor que irá responder as requisições http (porta 80).Criamos também uma variável do tipo DHT com os parâmetros 0 (que é o pinoGPIO 0) e o tipo (no nosso caso DHT22)

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

SetupNo setup vamos inicializar o Serial apenas para que tenhamos um log, caso o ESP8266 esteja conectado ao computador através da serial para utilizarmos o monitor serial.Iremos fazer com que o ESP8266 se conecte a nossa rede. No nosso caso usamos a rede TesteESP com a senha 87654321, mas você terá que alterar de acordo com a rede que irá utilizar.

//Inicialize a Serial apenas caso queira ter um log //para facilitar saber o que está acontecendo com o ESP8266Serial.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 redeWiFi.begin("TesteESP", "87654321" );

//Feedback caso esteja usando o Monitor Serial Serial.println("");Serial.print("Conectando");

SetupAguardamos o ESP8266 se conectar à rede e após ele se conectar enviamos as configurações da rede. Altere conforme a sua rede.

//Esperamos até que o módulo se conecte à redewhile(WiFi.status() != WL_CONNECTED){

delay(500);Serial.print(".");

}//Configurações do IP fixo. Você pode alterar conforme a sua redeIPAddress ip(192, 168, 2, 8);IPAddress gateway(192, 168, 2, 1);IPAddress subnet(255, 255, 255, 0);Serial.print("Configurando IP fixo para : ");Serial.println(ip);//Envia a configuraçãoWiFi.config(ip, gateway, subnet);

SetupOs próximos comandos são apenas para caso esteja com o ESP8266 conectado ao computador pela serial para que você tenha um feedback pelo Monitor Serial.Você pode conferir o IP que o ESP8266 recebeu para ver se é o mesmo que está nas configurações.

//Mostramos no Monitor Serial o ip com o qual o esp8266 se conectouSerial.println("");Serial.println("Connectado");Serial.print ("IP: ");Serial.println(WiFi.localIP());

SetupAqui começamos a definir quais funções serão executadas para cada requisição.Na instrução abaixo, toda vez que o ESP8266 receber uma requisição http do tipo GET no caminho /temperature a função getTemperature irá ser executada.

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

SetupNessa outra instrução, toda vez que o ESP8266 receber uma requisição http do tipo GET no caminho /humidity a função getHumidity irá ser executada.

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

SetupNessa instrução, toda vez que o ESP8266 receber uma requisição http do tipo GET no caminho /monitor a função showMonitor irá ser executada.A função showMonitor é a responsável por retornar o html principal que irá mostrar os valores da temperatura e da umidade.

//Nesse caso quando houver uma requisição http do tipo GET //no caminho http://192.168.2.8/monitor (pode ser outro ip dependendo//da sua configuração) a 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 temposserver.on(”/monitor", HTTP_GET, showMonitor);

Setup

Aqui é a definição da função que deve ser executada quando o caminho requisitado 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);

SetupAqui inicializamos o nosso servidor que declaramos anteriormente na porta 80.Com isso terminamos o setup.

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

}

LoopGraças a lib ESP8266WebServer não precisamos ficar verificando no loop se háclientes e qual o caminho da requisição. Apenas precisamos chamar handleClient()e o objeto verificará se algum cliente está fazendo alguma requisição e iráredirecionar para a função correspondente que registramos anterirormente.

void loop()

{

//Verifica se há alguma requisição de algum cliente

server.handleClient();}

Requisição não encontradaEssa é a função que registramos anteriormente para ser executada quando o cliente fizer alguma requisição que não foi registrada.A função apenas volta o código 404 (código padrão para quando um recurso não é encontrado), o tipo de dado retornado (no caso texto puro) e um texto com os dizeres “Not Found”.

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

}

Retornando a temperaturaEssa é a função que retornará um json com os dados da temperatura quando o cliente fizer uma requisição do tipo GET em /temperature

//Função que definimos que será executada quando o cliente fizer uma //requisição do tipo GET no caminho http://192.168.2.8/temperature//(pode ser outro ip dependendo da sua configuração) void getTemperature(){

//Fazemos a leitura da temperatura através do módulo dhtfloat 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 a //requisição foi realizada com sucessoserver.send (200, "application/json", json);

}

Retornando a umidadeEssa é a função que retornará um json com os dados da umidade quando o cliente fizer uma requisição do tipo GET em /humidity

//Função que definimos que será executada quando o cliente fizer uma //requisição do tipo GET no caminho http://192.168.2.8/humidity//(pode ser outro ip dependendo da sua configuração) void getHumidity(){

//Fazemos a leitura da umidade através do módulo dhtfloat h = dht.readHumidity();

//Cria um json com os dados da umidadeString json = "{\”humidity\":"+String(h)+"}";

//Envia o json para o cliente com o código 200, que é o código quando a //requisição foi realizada com sucessoserver.send (200, "application/json", json);

}

HTMLEssa é a função que retornará o html quando o cliente acessar /monitor. Esta página mostrará os valores da temperatura e umidade e recarregará os dados de tempos em tempos. A parte que está entre <style type=‘text/css’> e </style> definem a aparência da página e você pode alterar conforme queira.

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

String html =

"<html>"

"<head>"

"<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'/>"

"<title>DHT Monitor</title>"

"<style type='text/css'>"

"body{"

"padding: 35px;"

"background-color: #222222;"

"}"

HTML

"h1{”

"color: #FFFFFF;"

"font-family: sans-serif;"

"}"

"p{"

"color: #EEEEEE;"

"font-family: sans-serif;”

"font-size:18px;"

"}"

"</style>"

"</head>"

Continuação do style do HTML

HTML

"<body>”"<h1>DHT Monitor</h1>""<p id='temperature'>Temperature: </p>""<p id='humidity'>Humidity: </p>”"</body>"

Aqui temos a parte principal do html. Nele temos dois parágrafos que irão mostrar a temperatura e a umidade. Atenção para os ids dos parágrafos pois é através deles que iremos recuperar estes parágrafos para inserir os valores da temperatura e umidade após as requisições.

Javascript

"<script type='text/javascript'>""refresh();""setInterval(refresh, 5000);""function refresh()""{""refreshTemperature()""refreshHumidity();"

"}"

Aqui começamos a definir o script que vai de tempos em tempos ler os valores da temperatura e umidade. A função refresh() chama as funções refreshTemperature() e refreshHumdity() e o setInterval chama a função refresh a cada 5000 milisegundos (5 segundos)

Javascript

"function refreshTemperature()"

"{"

"var xmlhttp = new XMLHttpRequest();"

"xmlhttp.onreadystatechange = function() {"

"if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200){"

"document.getElementById('temperature').innerHTML = 'Temperature: ' + JSON.parse(xmlhttp.responseText).temperature+ 'ºC';"

"}"

"};"

"xmlhttp.open('GET', 'http://192.168.2.8/temperature', true);"

"xmlhttp.send();"

"}"

A função refreshTemperature() faz uma requisição à /temperature e faz o parse da informação contida no json e adiciona no parágrafo com id temperature

Javascript

"function refreshHumidity()"

"{"

"var xmlhttp = new XMLHttpRequest();"

"xmlhttp.onreadystatechange = function() {"

"if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200){"

"document.getElementById('humidity').innerHTML = 'Humidity: ' + JSON.parse(xmlhttp.responseText).humidity + '%';"

"}"

"};"

"xmlhttp.open('GET', 'http://192.168.2.8/humidity', true);"

"xmlhttp.send();"

"}"

"</script>"

"</html>";

A função refreshHumidity() faz uma requisição à /humidity e faz o parse da informação contida no json e adiciona no parágrafo com id humidity. E com isso finalizamos o html que enviaremos nas requisições em /monitior

Finalizando showMonitor

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

}

Agora que a string com o html que enviaremos está pronta podemos enviar para o cliente. Com isso finalizamos a função showMonitor e o código.

TestandoAgora abra seu navegador e digite http://192.168.2.8/monitor (pode ser outro ipdependendo da sua configuração)