ESP32: M5Stack con DHT22: 10 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

Hablemos hoy de un ESP32 muy especial, perfecto para Internet de las cosas, que es M5Stack. Contiene el ESP32 en el interior e incluso agrega una pantalla, teclado, amplificador, altavoz y batería. Por lo tanto, este dispositivo puede hacer innumerables cosas. Cuando recibí este hardware, ya tenía software para ESP32 y solo lo porté a la pantalla utilizada en este proyecto, que es diferente. Sin embargo, el código fuente que usaremos es el mismo que usamos en nuestro video TEMPERATURA Y HUMEDAD CON PANTALLA OLED.

En el circuito de hoy, específicamente quiero enfatizar que tenemos el M5Stack con conexiones positivas y negativas, que se alimenta con un sensor DHT22. Ambos están conectados por un GPIO. Los datos se muestran en el gráfico.

En este artículo, presentemos M5Stack y analicemos sus aplicaciones. Debo enfatizar que este dispositivo tiene una entrada para una tarjeta micro SD, un altavoz de 1W y un enchufe para batería, y también tiene botones de interacción, un conector i2c, un USB tipo C, IO expuestas, una pantalla TFT de dos pulgadas, entre otras características. Se muestra en la imagen de arriba. Podemos decir que este dispositivo está listo para IoT, ya que viene con Bluetooth y WiFi ESP32. También incluye un imán para sujetarlo a superficies metálicas.

¿Te gustó M5Stack? Haga clic en:

Paso 1: M5Stack

Una de las novedades del M5Stack es que, si le quitas la parte trasera, puedes encajar en diferentes módulos con distintas funciones, como el módulo GPS, GSM, LoRa, entre otros. Esto se muestra en la imagen.

Tengo más ejemplos de módulos a continuación, que van desde RS485, DC Motor, Maker, Core, hasta control de motor paso a paso.

En realidad, esta es una forma muy rápida de armar un prototipo. En los viejos tiempos, era necesario comprar varios chips de transistores y realizar numerosos montajes, lo que requería mucho tiempo e inversión. Solo después vino el prototipo del producto. Fue entonces cuando aparecieron Arduino y Raspberry, que son placas.

Ahora, finalmente tenemos el M5Stack, que es esta caja cerrada lista para usar. Esto nos libera de tener que realizar otros innumerables pasos.

Otros modelos de M5Stack se muestran en imágenes. Contamos con un dispositivo con teclados alfanuméricos, numéricos y de juegos. Estos le permiten trabajar como si fuera una especie de computadora. También tenemos un ejemplo de software en ejecución, que se puede programar en MicroPython, Arduino, ESP-IDF, NodeJS, además de Basic.

Paso 2: Posibles aplicaciones de M5Stack

Entre los ejemplos de aplicaciones de M5Stack, tenemos el osciloscopio, como puedes ver en la imagen. También tenemos una especie de calculadora / mesa de herramientas de corte.

¿Qué tal un velocímetro de bicicleta?

También puede ser un taladro remoto, que se imprime en 3D y se supervisa de forma remota mediante un control.

Todo esto demuestra que el control electrónico es mucho más asequible en estos días, al igual que la programación de estos circuitos se ha vuelto más fácil.

Paso 3: M5Stack - Pines

La parte posterior del M5Stack está en esta imagen, que muestra que la potencia es de 5 voltios. La imagen revela además que tenemos todo lo que existe en ESP32 con conectividad.

Paso 4: Biblioteca DHT

Usa la lib SimpleDHT, que es la misma que usé en el video: TEMPERATURA Y HUMEDAD CON PANTALLA OLED.

Paso 5: Gestión de la biblioteca IDE de Arduino

En el "Menú: Sketch -> Agregar biblioteca -> Administrar bibliotecas", instalemos las dos bibliotecas que se muestran en la imagen a continuación. Recuerde que antes de todo esto, debe instalar el núcleo Arduino de ESP32. Este video le muestra cómo hacerlo it: CÓMO INSTALAR ARDUINO IDE EN ESP32.

Paso 6: código fuente

El código fuente, como se mencionó, es el mismo que usé en el video: GRÁFICO DE TEMPERATURA CON PANTALLA OLED. El único cambio que hice en este proyecto fue en relación con el tamaño de la pantalla.

Paso 7: M5StackDHTGraph.ino

Incluiremos las bibliotecas M5Stack.hy SimpleDHT.h, y definiremos los colores utilizados en la pantalla, así como el pin de datos DHT. También construiremos un objeto para la comunicación con el sensor, definiremos la variable responsable de las lecturas e indicaremos el valor del eje X.

// Libs do M5Stack e DHT # incluyen #include // definição das cores que serão utilizados #define BLACK 0x0000 #define RED 0xF800 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF #define DHTPIN 5 // pino de dados do DHT // constructor del 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 con las definiciones de posicionamiento del eje X e Y, las coordenadas de visualización de los datos de temperatura y humedad, así como las variables que almacenarán los valores leídos. Seguimos apuntando a la variable para imprimir el gráfico en la pantalla.

// 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 POSYD_Fine_define 30 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 linha

Paso 8: M5StackDHTGraph.ino - Configuración

En Configuración, inicializamos el M5Stack. Definimos comandos para dibujar el gráfico, configuramos la fuente y los colores del texto y posicionamos el cursor para escribir.

configuración nula (nula) {Serial.begin (115200); // Inicializa o M5Stack M5.begin (); // pinta una 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 en la tela M5. Lcd.setTextSize (3); // configura un cor branca para o texto M5. Lcd.setTextColor (WHITE); // posición del cursor para escrita M5. Lcd.setCursor (POS_X_DADOS, POS_Y_DADOS); M5. Lcd.print ("T:"); // indicando una temperatura M5. Lcd.setCursor (POS_X_DADOS + 105, POS_Y_DADOS); M5. Lcd.print ("U:"); // indicando una umidade}

Paso 9: M5StackDHTGraph.ino - Loop

En la primera parte del Loop, leemos la temperatura y la humedad, mapeamos el valor de las variables para su ubicación en el gráfico y dibujamos el punto en la pantalla que hace referencia a estos valores leídos desde el sensor.

void loop () {// Fazemos a leitura da temperatura e umiade float temp, umid; int status = dht.read2 (DHTPIN, & temp, & umid, NULL); if (estado == SimpleDHTErrSuccess) {temperatura = temp; umidade = umid; } // mapeando o valor das variáveis para colocar no gráfico // necesario 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, AMARILLO);

Luego, definimos las posibilidades de imprimir el gráfico en la pantalla.

// 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 de 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 un área toda del gráfico M5. Lcd.fillRect (POS_X_GRAFICO + 1, POS_Y_GRAFICO-1, COMPRIMENTO_GRAFICO, ALTURA_GRAFICO-1, NEGRO); leituraAtual = 1; // volta o contador de leitura para 1 (nova coordenada X)} // limpa un área y colocamos o valor da temperatura e 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, NEGRO);

// reposiciona el cursor para escrever una temperatura M5. Lcd.setCursor (POS_X_DADOS + 50, POS_Y_DADOS); M5. Lcd.setTextColor (ROJO); M5. Lcd.print (temperatura); M5. Lcd.print ((carácter) 247); // reposiciona o cursor para escrever una umidade M5. Lcd.setCursor (POS_X_DADOS + 165, POS_Y_DADOS); M5. Lcd.setTextColor (CYAN); M5. Lcd.print (umidade); M5. Lcd.print ("%"); retraso (1000); }

Paso 10: archivos

¿Te gustó M5Stack? ¿Quieres comprar uno? Vaya a:

Descarga los archivos:

PDF

INO