Por Fernando Koyanagi

Características principais

 Leitura da Temperatura

Vamos ao código

Primeiro 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 nosso servidor 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 pino GPIO 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 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

Setup

No 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 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" );

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

Setup

Aguardamos 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 à 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, 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ção

Setup

Os 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 conectou

Serial

.

println

(

""

);

Serial

.

println

(

"Connectado"

);

Serial

.

print

(

"IP: "

);

Setup

Aqui 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á executada

Setup

Nessa 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á executada

Setup

Nessa 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 tempos

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

Setup

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

//Inicializamos o server que criamos na porta 80

server.

begin

();

Serial

.

println

(

"Servidor HTTP iniciado"

);

Loop

Graç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 encontrada

Essa é 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 temperatura

Essa é 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 dht

floatt = dht.readTemperature();

//Cria um json com os dados da temperatura

Stringjson = "{\"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 sucesso

server.send(200, "application/json", json); }

Retornando a umidade

Essa é 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 dht

floath = dht.readHumidity();

//Cria um json com os dados da umidade

Stringjson = "{\”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 sucesso

server.send(200, "application/json", json); }

HTML

Essa é 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

HTML

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

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 sucesso

server.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.

Testando

Agora abra seu navegador e digite http://192.168.2.8/monitor (pode ser outro ip