ESP32: M5Stack com DHT22: 10 etapas

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-23 15:03

Vamos falar hoje sobre um ESP32 muito especial, perfeito para a Internet das Coisas, que é o M5Stack. Ele contém o ESP32 dentro e ainda adiciona um display, teclado, amplificador, alto-falante e bateria. Portanto, este dispositivo pode fazer inúmeras coisas. Quando recebi este hardware, já tinha o software para ESP32 e apenas portado para o display usado neste projeto, que é diferente. Porém, o código-fonte que usaremos é o mesmo usado em nosso vídeo TEMPERATURA E UMIDADE COM DISPLAY OLED.

No circuito de hoje, quero enfatizar especificamente que temos o M5Stack com conexões positivas e negativas, que se alimenta com um sensor DHT22. Ambos são conectados por um GPIO. Os dados são exibidos no gráfico.

Neste artigo, vamos apresentar o M5Stack e discutir seus aplicativos. Preciso enfatizar que este dispositivo tem uma entrada para um cartão micro SD, um alto-falante de 1W e um soquete de bateria, e também tem botões de interação, um conector i2c, um USB tipo C, IOs expostos, um display TFT de duas polegadas, entre outros recursos. É mostrado na imagem acima. Podemos dizer que este dispositivo está pronto para IoT, pois já vem com Bluetooth e WiFi ESP32. Ele também inclui um ímã para prender em superfícies de metal.

Você gostou de M5Stack? Clique em:

Etapa 1: M5Stack

Uma inovação do M5Stack é que, se você tirar a parte traseira, poderá encaixar diversos módulos com diferentes funções, como o módulo GPS, GSM, LoRa, entre outros. Isso é mostrado na imagem.

Eu tenho mais exemplos de módulos abaixo, variando de RS485, DC Motor, Maker, Core, para controle de motor de passo.

Na verdade, essa é uma maneira muito rápida de montar um protótipo. Antigamente, era necessário comprar vários chips de transistores e realizar inúmeras montagens, o que exigia muito tempo e investimento. Só depois veio a prototipagem do produto. Foi então que surgiram o Arduino e o Raspberry, que são pratos.

Agora, finalmente temos o M5Stack, que é esta caixa fechada pronta para uso. Isso nos libera de ter que realizar outras inúmeras etapas.

Outros modelos M5Stack são mostrados em imagens. Temos um dispositivo com teclados alfanuméricos, numéricos e de jogos. Eles permitem que você trabalhe como se fosse uma espécie de computador. Também temos um exemplo de software rodando, que pode ser programado em MicroPython, Arduino, ESP-IDF, NodeJS, além de Basic.

Etapa 2: M5Stack Possíveis Aplicativos

Entre os exemplos de aplicações do M5Stack, está o osciloscópio, como você pode ver na imagem. Temos também uma espécie de calculadora / mesa de ferramentas de corte.

Que tal um velocímetro de bicicleta?

Também pode ser uma furadeira remota, que é impressa em 3D e monitorada remotamente por um controle.

Tudo isso mostra que o controle eletrônico está muito mais acessível hoje em dia, assim como a programação desses circuitos ficou mais fácil.

Etapa 3: M5Stack - Pins

A parte de trás do M5Stack está nesta imagem, o que mostra que a alimentação está em 5 volts. A imagem revela ainda que temos tudo o que existe no ESP32 com conectividade.

Etapa 4: Biblioteca DHT

Use a lib SimpleDHT, que é a mesma que usei no vídeo: TEMPERATURA E UMIDADE COM DISPLAY OLED.

Etapa 5: gerenciamento da biblioteca do IDE do Arduino

No “Menu: Sketch -> Add Library -> Manage Libraries,” vamos instalar as duas bibliotecas mostradas na imagem abaixo. Lembre-se que antes de tudo isso, você precisa instalar o núcleo do Arduino do ESP32. Este vídeo mostra como fazer it: COMO INSTALAR O ARDUINO IDE NO ESP32.

Etapa 6: Código Fonte

O código-fonte, como mencionei, é o mesmo que usei no vídeo: GRÁFICO DE TEMPERATURA COM DISPLAY OLED. A única alteração que fiz neste projeto foi em relação ao tamanho da tela.

Etapa 7: M5StackDHTGraph.ino

Incluiremos as bibliotecas M5Stack.h e SimpleDHT.h e definiremos as cores usadas no display, bem como o pino de dados DHT. Também vamos construir um objeto de 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 # incluem #incluir // definição dos núcleos que serão utilizados #define BLACK 0x0000 #define RED 0xF800 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF #define DHTPIN pino 5 // de 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;

Continuamos com as definições de posicionamento dos eixos X e Y, coordenadas de exibição de dados de temperatura e umidade, bem como as variáveis que irão armazenar os valores lidos. Ainda apontamos para a variável para imprimir o gráfico no display.

// definição de 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 escrever onde os dados de temperatura e umidade #define POS_X_DADOS 30 #define POS_Y_DADOS 200 // que armazenarão os valores lidos da umidade e temperatura int umidade = 0; temperatura interna = 0; // variável que armazenará o valor da coordenada Y para desenhar uma linha de exemplo // que varia os valores de 1 em 1 int linhaExemplo = 20; fator int = 1; // indicará se somaremos ou subtrairemos uma unidade na variável linhaExemplo

Etapa 8: M5StackDHTGraph.ino - Configuração

Na configuração, inicializamos o M5Stack. Definimos comandos para desenhar o gráfico, configuramos a fonte e também as cores do texto e posicionamos o cursor para escrever.

configuração de vazio (vazio) {Serial.begin (115200); // Inicializa o M5Stack M5.begin (); // pinta a tela inteira do preto M5. Lcd.fillScreen (BLACK); // os comandos a seguir irão desenhar como 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 na tela M5. Lcd.setTextSize (3); // configura uma 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:"); // temperatura a temperatura M5. Lcd.setCursor (POS_X_DADOS + 105, POS_Y_DADOS); M5. Lcd.print ("U:"); // umidade a umidade}

Etapa 9: M5StackDHTGraph.ino - Loop

Na primeira parte do Loop, lemos a temperatura e a umidade, mapeamos o valor das variáveis para colocação no gráfico, e desenhamos na tela o ponto que se refere a esses 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 exibir tem 240px de altura e separamos apenas 180 para o gráfico // umidade pode ser lida de 0-100 int temperaturaMapeada = mapa (temperatura, 0, 100, 0, ALTURA_GRAFICO); int umidadeMapeada = mapa (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);

Em seguida, definimos as 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 limpar a área do gráfico para voltarmos a desenhar. if (leituraAtual == 270) {// limpa uma área todo 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 uma á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, PRETO);

// 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 ("%"); atraso (1000); }

Etapa 10: Arquivos

Você gostou do M5Stack? Quer comprar um? Acesse:

Baixe os arquivos:

PDF

EU NÃO