Ir ao conteúdo
  • Cadastre-se

Tutorial ESP8266 - DHT11 + Google Charts


Posts recomendados

Esse é o meu primeiro tutorial aqui no fórum! Vou ensinar a como construir um gráfico de temperatura no seu próprio servidor!

 

Nível: intermediário

Requisito mínimo: PHP, MYSQL, JS.

Como funciona: o ESP8266 (no caso aqui, é uma placa nodeMCU programada na IDE do Arduino) se conecta ao host discriminado no código, e envia para uma página php o valor da variável, que no caso, é a temperatura. A página PHP recebe esse código e o grava no banco de dados MYSQL. Uma outra página PHP, gera o gráfico de acordo com os dados obtidos da consulta SQL.

 

Se você preenche os requisitos mínimos, mas ainda não possui um servidor, você pode criá-lo aqui: https://www.hostinger.com.br/hospedagem-web

Criando o grátis, você tem direito até 2 banco de dados! Mas antes disso, terá que criar uma hospedagem grátis para o seu site.

 

Depois de criado, guarde os dados do FTP que precisaremos mais tarde!

 

 

Páginas PHP


O código em PHP é o responsável por capturar os dados recebidos e cadastrá-los no banco de dados do seu servidor criado. Primeiro, iremos criar o código de conexão:

 

- init.php:

Substitua os campos USUÁRIO_BD (pelo seu usuário de acesso ao banco de dados), SENHA_BD (pela senha de acesso ao banco de dados) e SEU_BD pelo seu banco de dados.

<?
//Desabilita a exibição de erros
error_reporting(0);
ini_set(“display_errors”, 0 );

header('Content-Type: text/html; charset=utf-8');
mysql_connect('localhost','USUARIO_BD','SENHA_BD');
mysql_select_db('SEU_BD');
?>

 

- dht11.php:

Esse é o código principal: via GET, ele irá receber o valor da temperatura e cadastrá-lo no banco de dados. Primeiramente, cria uma TABELA no seu BD. Criei a minha com o nome temp, e a estrutura ficou como a imagem abaixo:

estrutura_bd.jpg

 

E o código, é esse:

<?php
//Desabilita a exibição de erros
error_reporting(0);
ini_set(“display_errors”, 0 );

//Incluimos o código de conexão ao BD
include 'init.php';

//Variável responsável por guardar o valor enviada pelo ESP8266
$temperatura = $_GET['temp'];

//Captura a Data e Hora do SERVIDOR (onde está hospedada sua página):
$hora = date('H:i:s');
$data = date('Y-m-d');

//Insere no Banco de Dados
$sql = mysql_query("INSERT INTO temp (data, hora, temperatura) VALUES ('$data', '$hora', '$temperatura')");
?>

 

- grafico.php:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Gráfico de Temperatura - ESP8266 + PHP + MYSQL</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv='refresh' content='60' URL=''>    
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- Google Chart -->  
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

<?
//Dessabilita a exibição de erros
error_reporting(0);
ini_set(“display_errors”, 0 );

//Inclui a conexão com o BD
include 'init.php';

//Faz o SELECT da tabela
$sql = mysql_query("SELECT * FROM temp");

//Cria o array primário
$dados = array();

	//Laço dos dados
	while ($linha = mysql_fetch_assoc($sql)) {

	//Cria o array secundário, onde estarão os dados.
    $temp_hora = array();

    $temp_hora[] = ((string) $linha['hora']);
    $temp_hora[] = ((float) $linha['temperatura']);

    //Recebe no array principal, os dados.
    $dados[] = ($temp_hora);

  }

  //Trasforma os dados em JSON
  $jsonTable = json_encode($dados);
  //echo $jsonTable;


?>

<h3 align="center">ESP8266 + MYSQL + PHP + GOOGLE CHART</h3>

<!-- Div do Gráfico -->
<div class="container" style="height: 300px; width: 100%" id="chart_div"></div>

<br><br>

</body>

<script>
//Script do Google que define o TIPO do gráfico
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

//Define o tipo de coluna e o nome
function drawBackgroundColor() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Hora do Dia');
      data.addColumn('number', 'Temperatura (ºC)');
	   
      //Pega os dados em JSON e monta o gráfico, de acordo com os dados.
      data.addRows( <? echo $jsonTable ?>);

      //Opções do gráfico:		
      var options = {
        hAxis: {
          title: 'Hora'
        },
        vAxis: {
          title: 'Temperatura'
        },
        backgroundColor: '#f1f8e9'
      };

      //Criação do Gráfico	
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

</script>

</html>

* Para saber mais sobre os demais tipos de gráficos, acesse: https://developers.google.com/chart/

** Eu desabilitei os erros do PHP, pois como sabem, o comando mysql está obsoleto, e ainda não migrei para o mysqli ou PDO.

 

Com todos os códigos salvos, conecte ao FTP e envie os arquivos na pasta principal!

 

 

Sketch - ESP8266:

O código em si é simples. Ele está todo comentado para melhor entender. É só alterar os dados de conexão, o host e compilar!

 

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////
//Arquivo:      DHT11.ino
//Tipo:         Codigo-fonte para utilizar no ESP8266 (nodeMCU) atraves da IDE do Arduino
//Autor:        Marco Rabelo para o canal Infortronica Para Zumbis (www.youtube.com/c/InfortronicaParaZumbis)
//Modificado:   Guilherme Lirio Tomasi de Oliveira
//Descricao:    Lendo o sensor de Temperatura e Umidade (DHT11) e enviando a temperatura para banco de dados.           
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*
  Comparação das saidas Digitais entre nodeMCU - Arduino

  NodeMCU – Arduino

  D0 = 16;
  D1 = 5;
  D2 = 4;
  D3 = 0;
  D4 = 2; //IR
  D5 = 14;
  D6 = 12;
  D7 = 13;
  D8 = 15;
  D9 = 3;
  D10 = 1;

*/

//Incluindo as bibliotecas necessárias
#include <ESP8266WiFi.h>
#include <DHT.h>

// Nome da sua rede Wifi
const char* ssid = "SUA_REDE";

// Senha da rede
const char* password = "SENHA_REDE";

// Pino do DHT
#define DHTPIN 2

// Definindo o sensor como DHT11
#define DHTTYPE DHT11

// Inicializando o sensor DHT
DHT dht(DHTPIN, DHTTYPE);

// Site que receberá os dados - IMPORTANTE: SEM O HTTP://
const char* host = "ENDEREÇO_SITE"; //www.site.com.br

void setup() {
  // Iniciando o Serial
  Serial.begin(115200);
  
  // Iniciando o DHT 
  dht.begin();

  // Conectando na rede wifi
  Serial.println("");
  Serial.print("Conectando");
  WiFi.begin(ssid, password);  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Conectado a rede: ");
  Serial.println(ssid);
}

void loop() {
  // Criando uma conexao TCP
  WiFiClient client;
  const int httpPort = 80;
  if (!client.connect(host, httpPort)) {
    return;
  }
  
  // Lendo a temperatura em graus Celsius
  int t = dht.readTemperature();
  
  // Enviando para o host a temperatura lida.
  client.print(String("GET /dht11.php?temp=") + (t) +
                      " HTTP/1.1\r\n" + "Host: " + host + "\r\n" + "Connection: close\r\n\r\n");
  
  // Repetindo a cada 1 minuto
  delay(60000);
  Serial.print("Temperatura enviada: ");
  Serial.println(t);
}

 

Pronto! Está finalizado!!

 

O meu ficou assim: http://temperatura.esy.es/grafico.php

 

Qualquer dúvida, é só postarem!

 

 

 

  • Curtir 3
Link para o comentário
Compartilhar em outros sites

@Papibakigrafo  Fiz uns testes aqui e funcionou beleza, não usei tudo do seu tutorial, apenas o grafico.php, pra conhecer esse tal chart da google, (muito bacana, diga-se de passagem)  só teve uma alteração que fiz pra atualizar o código para o PHP5 que foi:

$sql = "SELECT * FROM grafico";

$result = mysqli_query($mysqli, $sql); 

//Cria o array primário
$dados = array();

while($linha = mysqli_fetch_array($result)) {      
	$temp_hora = array();

        $temp_hora[] = ((string) $linha['hora']);
        $temp_hora[] = ((int) $linha['valor']);

        //Recebe no array principal, os dados.
        $dados[] = ($temp_hora);
}
     
  //Trasforma os dados em JSON
  $jsonTable = json_encode($dados);
  echo $jsonTable;

?>

 

Depois com mais tempo quero dar uma estudada nesse Google Chart, achei muito interessante.

 

  • Curtir 2
Link para o comentário
Compartilhar em outros sites

  • 4 meses depois...
  • mês depois...
Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...