ESP32 : M5Stack avec DHT22 : 10 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Parlons aujourd'hui d'un ESP32 très spécial, parfait pour l'Internet des objets, qui est M5Stack. Il contient l'ESP32 à l'intérieur et ajoute même un écran, un clavier, un amplificateur, un haut-parleur et une batterie. Ainsi, cet appareil peut faire d'innombrables choses. Lorsque j'ai reçu ce matériel, j'avais déjà un logiciel pour ESP32 et je ne l'avais porté que sur l'écran utilisé dans ce projet, ce qui est différent. Cependant, le code source que nous utiliserons est le même que celui utilisé dans notre vidéo TEMPÉRATURE ET HUMIDITÉ AVEC ÉCRAN OLED.

Dans le circuit d'aujourd'hui, je tiens particulièrement à souligner que nous avons le M5Stack avec des connexions positives et négatives, qui s'alimente avec un capteur DHT22. Les deux sont connectés par un GPIO. Les données sont affichées dans le graphique.

Dans cet article, présentons M5Stack et discutons de ses applications. Je dois souligner que cet appareil a une entrée pour une carte micro SD, un haut-parleur 1W et une prise de batterie, et possède également des boutons d'interaction, un connecteur i2c, un USB type C, des E/S exposés, un écran TFT de deux pouces, entre autres fonctionnalités. Il est montré dans l'image ci-dessus. On peut dire que cet appareil est prêt pour l'IoT, car il est déjà livré avec Bluetooth et ESP32 WiFi. Il comprend également un aimant pour la fixation sur des surfaces métalliques.

Vous avez aimé M5Stack ? Cliquez sur:

Étape 1: M5Stack

Une innovation du M5Stack est que, si vous enlevez le dos, vous pouvez intégrer différents modules avec différentes fonctions, tels que le module GPS, GSM, LoRa, entre autres. Ceci est montré dans l'image.

J'ai plus d'exemples de modules ci-dessous, allant de RS485, moteur à courant continu, fabricant, noyau, au contrôle de moteur pas à pas.

C'est en fait un moyen très rapide de monter un prototype. Autrefois, il fallait acheter plusieurs puces à transistors et réaliser de nombreux assemblages, ce qui demandait beaucoup de temps et d'investissement. Ce n'est qu'après qu'est venu le prototypage du produit. C'est alors qu'apparaissent Arduino et Raspberry, qui sont des plaques.

Maintenant, nous avons enfin le M5Stack, qui est cette boîte fermée prête à l'emploi. Cela nous libère d'avoir à effectuer d'autres étapes innombrables.

D'autres modèles M5Stack sont montrés dans les images. Nous avons un appareil avec des claviers alphanumériques, numériques et de jeu. Ceux-ci vous permettent de travailler comme s'il s'agissait d'une sorte d'ordinateur. Nous avons également un exemple de logiciel en cours d'exécution, qui peut être programmé en MicroPython, Arduino, ESP-IDF, NodeJS, en plus de Basic.

Étape 2: Applications possibles de M5Stack

Parmi les exemples d'applications M5Stack, nous avons l'oscilloscope, comme vous pouvez le voir sur l'image. Nous avons également une sorte de calculatrice / table d'outils de coupe.

Que diriez-vous d'un compteur de vitesse de vélo?

Il peut également s'agir d'une perceuse à distance, qui est imprimée en 3D et surveillée à distance par une commande.

Tout cela montre que le contrôle électronique est beaucoup plus abordable de nos jours, tout comme la programmation de ces circuits est devenue plus facile.

Étape 3: M5Stack - Broches

L'arrière du M5Stack est sur cette image, ce qui montre que l'alimentation est à 5 volts. L'image révèle en outre que nous avons tout ce qui existe dans ESP32 avec connectivité.

Étape 4: Bibliothèque DHT

Utilisez la bibliothèque SimpleDHT, qui est la même que celle que j'ai utilisée dans la vidéo: TEMPÉRATURE ET HUMIDITÉ AVEC ÉCRAN OLED.

Étape 5: Gestion de la bibliothèque IDE Arduino

Dans le "Menu: Sketch -> Ajouter une bibliothèque -> Gérer les bibliothèques", installons les deux bibliothèques présentées dans l'image ci-dessous. N'oubliez pas qu'avant tout cela, vous devez installer le noyau Arduino d'ESP32. Cette vidéo vous montre comment faire it: COMMENT INSTALLER ARDUINO IDE DANS ESP32.

Étape 6: Code source

Le code source, comme mentionné, est le même que celui que j'ai utilisé dans la vidéo: TEMPERATURE GRAPH WITH OLED DISPLAY. Le seul changement que j'ai apporté à ce projet concernait la taille de l'écran.

Étape 7: M5StackDHTGraph.ino

Nous inclurons les bibliothèques M5Stack.h et SimpleDHT.h, et nous définirons les couleurs utilisées dans l'affichage, ainsi que la broche de données DHT. Nous allons également construire un objet de communication avec le capteur, définir la variable responsable des lectures et indiquer la valeur de l'axe X.

//Libs do M5Stack e DHT#include #include // 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 //Dopino de d //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;

Nous continuons avec les définitions de positionnement des axes X et Y, les coordonnées d'affichage des données de température et d'humidité, ainsi que les variables qui stockeront les valeurs lues. Nous pointons toujours sur la variable pour imprimer le graphique sur l'écran.

//définir POS_Y_GRAFICO 3 #définir ALTURA_GRAFICO 180 #définir COMPRIMENTO_GRAFICO 270 que armazenarão os valores lidos da umidade e temperatura int umidade = 0; température int = 0; //variavel que armazenará o valor da coordenada Y para desenharmos uma linha de exemplo //que varia os valores de 1 em 1 int linhaExemplo = 20; entier = 1; //indicará se somaremos ou subtrairemos uma unidade na variável linhaExemplo

Étape 8: M5StackDHTGraph.ino - Configuration

Dans Setup, nous initialisons le M5Stack. Nous définissons des commandes pour dessiner le graphique, configurons la police ainsi que les couleurs du texte et positionnons le curseur pour l'écriture.

void setup(void) { Serial.begin(115200); //Inicializa o M5Stack M5.begin(); //pinta toda toda de preto M5. Lcd.fillScreen(BLACK); //os commandos 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, largeur, couleur) 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 une cor branca pour le texte M5. Lcd.setTextColor(WHITE); //Position du curseur pour l'écriture M5. Lcd.setCursor(POS_X_DADOS, POS_Y_DADOS); M5. Lcd.print("T: "); //indique une température M5. Lcd.setCursor(POS_X_DADOS+105, POS_Y_DADOS); M5. Lcd.print(" U: "); //indicando une umidade }

Étape 9: M5StackDHTGraph.ino - Boucle

Dans la première partie de la boucle, nous lisons la température et l'humidité, cartographions la valeur des variables à placer sur le graphique et dessinons le point sur l'écran qui fait référence à ces valeurs lues par le capteur.

void loop() { //Fazemos a leitura da temperatura et umiade float temp, umid; int status = dht.read2(DHTPIN, &temp, &umid, NULL); if (status == SimpleDHTErrSuccess) { temperature = 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);

Ensuite, nous définissons les possibilités d'impression du graphique sur l'écran.

//aqui controlamos nossa linha de exemplo, quando chega no valor máximo decrementamos o valor //até um valor minimo 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) { //lima a area 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 area onde colocamos o valor da temperature 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, NOIR);

//reposiciona o curseur pour escrever une température M5. Lcd.setCursor(POS_X_DADOS+50, POS_Y_DADOS); M5. Lcd.setTextColor(RED); M5. Lcd.print(température); M5. Lcd.print((char)247); //reposiciona o curseur pour escrever un umidade M5. Lcd.setCursor(POS_X_DADOS+165, POS_Y_DADOS); M5. Lcd.setTextColor(CYAN); M5. Lcd.print(umidade); M5. Lcd.print("%"); retard(1000); }

Étape 10: Fichiers

Vous avez aimé M5Stack ? Vous voulez en acheter un ? Accédez à:

Téléchargez les fichiers:

PDF

INO