Por Fernando Koyanagi

Transcrição

1 Por Fernando Koyanagi

2 Características principais Leitura da Temperatura Leitura da Umidade

3 Montagem

4 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 DHT dht(0, DHT22);

5 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 , 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 é //Você deve alterar com as informações da sua rede WiFi.begin("TesteESP", " " ); //Feedback caso esteja usando o Monitor Serial Serial.println(""); Serial.print("Conectando");

6 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 WiFi.config(ip, gateway, subnet);

7 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: "); Serial.println(WiFi.localIP());

8 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 (pode ser outro ip dependendo //da sua configuração) a função gettemperature será executada server.on("/temperature", HTTP_GET, gettemperature);

9 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 (pode ser outro ip dependendo //da sua configuração) a função gethumidity será executada server.on( /humidity ", HTTP_GET, gethumidity);

10 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 (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 server.on( /monitor", HTTP_GET, showmonitor);

11 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);

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

13 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(); }

14 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" ); }

15 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 //(pode ser outro ip dependendo da sua 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 a //requisição foi realizada com sucesso server.send (200, "application/json", json); }

16 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 //(pode ser outro ip dependendo da sua 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 = "{\ 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); }

17 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 (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;"

18 HTML Continuação do style do HTML "h1{ "color: #FFFFFF;" "font-family: sans-serif;" "}" "p{" "color: #EEEEEE;" "font-family: sans-serif; "}" "</style>" "font-size:18px;" "</head>"

19 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. "<body> "<h1>dht Monitor</h1>" "<p id='temperature'>temperature: </p>" "<p id='humidity'>humidity: </p> "</body>"

20 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) "<script type='text/javascript'>" "refresh();" "setinterval(refresh, 5000);" "function refresh()" "{" "refreshtemperature()" "refreshhumidity();" "}"

21 Javascript 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 "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', ' true);" "xmlhttp.send();"

22 Javascript 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 "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', ' true);" "xmlhttp.send();" "}" "</script>" "</html>";

23 Finalizando showmonitor 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. //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); }

24 Testando Agora abra seu navegador e digite (pode ser outro ip dependendo da sua configuração)