ESP32: M5Stack com DHT22



Vamos falar hoje de um ESP32 muito especial, perfeito para a Internet das Coisas, que é o M5Stack. Este sujeito tem o ESP32 dentro dele, somando-se ainda display, teclado, amplificador, alto-falante, bateria... Então, é um dispositivo que pode fazer inúmeras coisas. Eu mesmo, quando recebi esse hardware, peguei um software que eu já tinha para o ESP32 e só portei para esse display utilizado neste projeto, que é diferente, mas o código fonte que vamos usar é o mesmo que trabalhamos no vídeo GRÁFICO DE TEMPERATURA E UMIDADE COM DISPLAY OLED.



Neste circuito de hoje, no entanto, quero destacar que temos o M5Stack com ligações positivo e negativo, alimentando ele mesmo um sensor DHT22, ambos conectados por um GPIO. Os dados são exibidos em um gráfico.


Gostou do M5Stack? Quer comprar um?

Neste artigo, então, vamos fazer uma introdução ao M5Stack e discutir suas aplicações. Importante destacar que este dispositivo tem entrada para cartão micro SD, Speaker de 1W, Battery Socket, possui ainda botões de interação, conector para i2c, USB tipo C, IOs expostos, display de duas polegadas TFT, entre outros recursos, como exposto na imagem acima. Podemos dizer que é um dispositivo pronto para IOT, já com Bluetooth e WiFi do ESP32, incluindo ainda um imã para fixação em superfícies de metal.


M5Stack


Uma inovação do M5Stack é que, se você tirar a parte traseira dele, você pode encaixar diferentes módulos com as mais diversas funções, como, por exemplo, módulo GPS, GSM, LoRa, entre outros, como você vê na imagem abaixo.


Trago abaixo mais exemplos de módulos, que vai desde RS485, DC Motor, Maker, Core, até controle de motor de passo.


Portanto, esta é uma maneira muito rápida de montar um protótipo. Antigamente, era preciso comprar diversos chips transistores e executar inúmeras montagens, o que demandava bastante tempo e investimento até chegar até a prototipagem de um produto. Foi, então, que surgiram o Arduino e o Raspberry, que são placas. Agora, enfim, temos o M5Stack, que é essa caixinha fechada pronta para uso, o que nos desobriga a ter que executar outros inúmeros passos.
Veja abaixo outros modelos do M5Stack. Na imagem da esquerda temos um dispositivo com teclados alfanumérico, numérico e de game, os quais o possibilitam trabalhar como uma espécie de computador. Na direita da imagem temos um exemplo de software rodando, o qual pode ser programado em MicroPython, Arduino, ESP-IDF, NodeJS, além do Basic.




M5Stack - Possíveis Aplicações

Entre os exemplos de aplicações do M5Stack, temos o osciloscópio, como você vê na imagem abaixo, à esquerda. No lado direito temos uma espécie de calculadora/tabela de ferramenta de corte.



E que tal um velocímetro para bicicleta?



Pode ser também uma furadeira remota, ou seja, impressa em 3D e monitorada à distância por um controle.


Tudo isso mostra que a eletrônica de controle está muito mais acessível e barata nos dias de hoje, assim como mais fácil tem se tornado a programação destes circuitos.


M5Stack - Pinos

Temos na imagem abaixo a parte traseira do M5Stack, que mostra que a alimentação é de 5 volts. A imagem ainda revela que temos tudo que existe no ESP32 com a conectividade.


Biblioteca DHT

Utilize a lib SimpleDHT, a mesma que usei no vídeo GRÁFICO DE TEMPERATURA E UMIDADE COM DISPLAY OLED.



Arduino IDE Library Manage

Já no “Menu:   Sketch -> Incluir Biblioteca -> Gerenciar Bibliotecas”, vamos instalar as duas bibliotecas expostas na imagem abaixo. Lembrando que antes de tudo isso, você precisa instalar o core Arduino do ESP32. Veja como neste vídeo: ESP32: COMO INSTALAR NA IDE DO ARDUINO.



Código fonte

O código fonte, como mencionado, é o mesmo que utilizei no vídeo GRÁFICO DE TEMPERATURA E UMIDADE COM DISPLAY OLED. A única mudança que fiz para este projeto foi em relação ao tamanho do display.


M5StackDHTGraph.ino

Vamos incluir as bibliotecas M5Stack.h e SimpleDHT.h, definir cores que serão empregadas no display, bem como o pino de dados do DHT. Vamos ainda construir um objeto para comunicação com o sensor, definir a variável responsável pelas leituras e indicar o valor do eixo X.

//Libs do M5Stack e DHT
#include <M5Stack.h>
#include <SimpleDHT.h>

// definição das cores que serão utilizadas
#define BLACK           0x0000
#define RED             0xF800
#define CYAN            0x07FF
#define YELLOW          0xFFE0  
#define WHITE           0xFFFF

#define DHTPIN 5 //pino de dados do DHT

//construtor do objeto para comunicar com o sensor
SimpleDHT22 dht;

//variável responsavel por contar o número de leituras realizadas e indicador do valor no eixo X
int leituraAtual = 1;

Seguimos para definições do posicionamento dos eixos X e Y, da coordenada de exibição dos dados de temperatura e umidade, bem como das variáveis que armazenarão os valores lidos. Ainda apontamos a variável para impressão do gráfico no display.

//definições do posicionamento dos eixos X e Y
#define POS_X_GRAFICO       30
#define POS_Y_GRAFICO       3
#define ALTURA_GRAFICO      180
#define COMPRIMENTO_GRAFICO 270 

//definição da coordenada onde escreveremos os dados de temperatura e umidade
#define POS_X_DADOS 30 
#define POS_Y_DADOS 200

//variáveis que armazenarão os valores lidos da umidade e temperatura
int umidade = 0;
int temperatura = 0;

//variável que armazenará o valor da coordenada Y para desenharmos uma linha de exemplo
//que varia os valores de 1 em 1
int linhaExemplo = 20;
int fator = 1; //indicará se somaremos ou subtrairemos uma unidade na variável linhaExemplo 



M5StackDHTGraph.ino – setup

No Setup, inicializamos o M5Stack. Definimos comandos para desenho do gráfico, configuramos a fonte, bem como cores de texto, e posicionamos o cursor para escrita.

void setup(void) {
  Serial.begin(115200);

  //Inicializa o M5Stack
  M5.begin();

  //pinta a tela toda de preto
  M5.Lcd.fillScreen(BLACK);

  //os comandos a seguir irão desenhar as linhas dos eixos cartesianos na cor branca
  //drawFastVLine(x,y,width,color) --> linha vertical
  M5.Lcd.drawFastVLine(POS_X_GRAFICO,POS_Y_GRAFICO, ALTURA_GRAFICO,WHITE); //eixo Y
  //drawFastHLine(x,y,width,color) --> linha horizontal
  M5.Lcd.drawFastHLine(POS_X_GRAFICO,ALTURA_GRAFICO+1,COMPRIMENTO_GRAFICO,WHITE); //eixo X

  //configura o tamnaho do texto que escreveremos em tela
  M5.Lcd.setTextSize(3);
  //configura a cor branca para o texto
  M5.Lcd.setTextColor(WHITE);

  //posiciona o cursor para escrita
  M5.Lcd.setCursor(POS_X_DADOS, POS_Y_DADOS);
  M5.Lcd.print("T: "); //indicando a temperatura
  M5.Lcd.setCursor(POS_X_DADOS+105, POS_Y_DADOS);
  M5.Lcd.print(" U: "); //indicando a umidade
}


M5StackDHTGraph.ino - loop 1/3

Na primeira parte do Loop, realizamos a leitura da temperatura e umidade, mapeamos o valor das variáveis para colocar no gráfico e desenhamos na tela o ponto referente a estes valores lidos do sensor.

void loop() {
  //Fazemos a leitura da temperatura e umiade
  float temp, umid;
  int status = dht.read2(DHTPIN, &temp, &umid, NULL);

  if (status == SimpleDHTErrSuccess) {
   temperatura = temp;
   umidade = umid;
  }

  //mapeando o valor das variáveis para colocar no gráfico
  //necessário pois o display tem 240px de altura e separamos apenas 180 para o gráfico
  //umidade pode ser lida de 0-100
  int temperaturaMapeada = map(temperatura,0,100,0,ALTURA_GRAFICO);
  int umidadeMapeada = map(umidade,0,100,0,ALTURA_GRAFICO);

  //desenha na tela o ponto referente aos valores lidos do sensor
   M5.Lcd.drawPixel(POS_X_GRAFICO+leituraAtual, ALTURA_GRAFICO-temperaturaMapeada, RED);
   M5.Lcd.drawPixel(POS_X_GRAFICO+leituraAtual, ALTURA_GRAFICO-umidadeMapeada, CYAN);  

  //desenha na tela o ponto referente a nossa linha de exemplo que fica variando
   M5.Lcd.drawPixel(POS_X_GRAFICO+leituraAtual, ALTURA_GRAFICO-linhaExemplo, YELLOW);  



M5StackDHTGraph.ino - loop 2/3

Nesta etapa e na seguinte, definimos possibilidades de impressão do gráfico no display.

 //aqui controlamos nossa linha de exemplo, quando chega no valor máximo decrementamos o valor
  //até um valor mínimo determinado (no nosso caso 10), e a partir daí, incrementa novamente
  if(linhaExemplo == 50) fator = -1;
  else if(linhaExemplo == 10) fator = 1;

  //soma o valor de linhaExemplo
  linhaExemplo += fator;

  //incrementa o contador de leituras realizadas
  leituraAtual++;

  //se a leitura chegar em 270 (número máximo do eixo X) então limparemos a área do gráfico para voltarmos a desenhar.
  if(leituraAtual == 270)
  {
    //limpa a área toda do gráfico
    M5.Lcd.fillRect(POS_X_GRAFICO+1, POS_Y_GRAFICO-1, COMPRIMENTO_GRAFICO, ALTURA_GRAFICO-1, BLACK);
    leituraAtual = 1; //volta o contador de leitura para 1 (nova coordenada X)   
  }

  //limpa a área onde colocamos o valor da temperatura e da umidade
  M5.Lcd.fillRect(POS_X_DADOS+50, POS_Y_DADOS, 60, 30, BLACK);
  M5.Lcd.fillRect(POS_X_DADOS+165, POS_Y_DADOS, 90, 30, BLACK);



M5StackDHTGraph.ino - loop 3/3


 //reposiciona o cursor para escrever a temperatura
  M5.Lcd.setCursor(POS_X_DADOS+50, POS_Y_DADOS);  
  
  M5.Lcd.setTextColor(RED);
  M5.Lcd.print(temperatura);
  M5.Lcd.print((char)247);

  //reposiciona o cursor para escrever a umidade
  M5.Lcd.setCursor(POS_X_DADOS+165, POS_Y_DADOS);  
  
  M5.Lcd.setTextColor(CYAN);
  M5.Lcd.print(umidade);
  M5.Lcd.print("%");

  delay(1000);
}




Gostou do M5Stack? Quer comprar um?



Faça download dos arquivos:



3 comentários:

  1. Gostei do artigo. Tenho um que chegou a uns 10 dias.
    Gostaria de um tutorial que mostrasse o sensor de 9dof dele em um espaço 3d.
    e também alguma maneira de instalar o Circuit Python nele.

    ResponderExcluir
  2. Olá, achei muito interessante esse carinha...
    Com ele vc conseguiria montar por exemplo um marcador de horário?
    Explico melhor, poderia mandar um pulso para cada hora fechada, 1h-1pulso, 2h-2pulso, 3h-3pulso etc...

    ResponderExcluir

Tecnologia do Blogger.