Graphique de données en temps réel sur Arduino Mega : Historique TFT LCD avec capteur DHT11

Composants et fournitures

Arduino Mega 2560	×	1
Capteur température et humidité DHT11 (4 broches)	×	1
Écran TFT LCD Shield Elegoo 2,8 pouces	×	1
Fils de connexion (jumper wires) génériques	×	1
Plaque d'essai (breadboard) générique	×	1

Applications et services en ligne

Arduino Web Editor

À propos de ce projet

Vue d'ensemble

Avez-vous déjà voulu tracer vos données professionnellement sur un écran TFT LCD ? Mais il y a un problème : il est particulièrement difficile de créer un graphique à cause de tous les calculs impliqués.

Ce projet vise à vous décharger de tout ce stress et vous permettre de créer votre propre graphique d'historique personnalisé, traçant ce que vous voulez en quelques secondes. Tout ce que vous avez à faire est de modifier 5 variables.

Fonctionnalité

Ce projet vise à rendre la création de graphiques facile et amusante pour tous. Tous les calculs difficiles sont effectués, l'utilisateur n'a qu'à modifier 2 variables et choisir la couleur de son graphique. Voici quelques exemples montrant la diversité du graphique.

Le graphique trace la température en direct, à intervalles de 6 secondes. La valeur est affichée par un point, les points sont reliés entre eux par une ligne. Les secondes écoulées depuis le début du code sont affichées sur l'axe X avec la plage de valeurs sur l'axe Y.

Le projet fonctionne simplement : l'Arduino Mega lit la valeur du capteur DHT11 et stocke la température dans une variable, puis trace la valeur sur le graphique personnalisé. Voici un diagramme illustrant l'aperçu de la fonctionnalité.

Il y a 3 parties principales dans le code :

• Lire la température : lit la température du capteur
• Traiter les données : traite la lecture du capteur et la mappe sur le graphique
• Tracer le graphique : affiche les valeurs mappées sur le graphique

Tout ce que vous devez savoir pour pouvoir avancer avec ce projet est une compréhension large de la façon dont les choses sont positionnées sur le TFT LCD, ce qui est expliqué ci-dessous.

Je fais référence à tout l'écran LCD comme la toile (canvas), c'est là que tout est dessiné. Toutes les bibliothèques TFT LCD fonctionnent de manière assez similaire, donc les fonctions de ce code devraient aussi fonctionner avec d'autres bibliothèques. Ci-dessous, un croquis d'un quadrilatère (un rectangle) dessiné sur un TFT LCD.

La ligne de code utilisée pour dessiner un rectangle est :

tft.fillRect(originX, originY, sizeX, sizeY, Couleur);

• originX : distance depuis la droite de l'écran jusqu'à la forme
• originY : distance depuis le haut de l'écran jusqu'à la forme
• sizeX : taille de la forme sur l'axe X (longueur)
• sizeY : taille de la forme sur l'axe Y (hauteur)

Avantages

L'utilisateur de ce projet bénéficiera de :

• Tracer des données de capteur sur un écran TFT LCD
• Le faire en quelques secondes

Construction du projet

Étape 1 : Appareillage requis

Ce projet utilise un capteur DHT11 de température et d'humidité pour recevoir les données de température, mais n'importe quel capteur peut être utilisé. Le changement de capteur sera expliqué plus loin.

• 1 Arduino Mega
• 1 Écran TFT LCD Elegoo 2,8"
• 1 Capteur DHT11
• 1 Plaque d'essai (breadboard)
• Fils de connexion (jumper wires)

Étape 2 : Connexion du circuit

Voici les schémas pour le projet. Branchez simplement le capteur DHT11 sur l'Arduino Mega et c'est parti.

Étape 3 : Comprendre le code

Il y a 3 parties principales dans le code :

• Configuration du graphique
• Lecture de la température
• Dessin du graphique

Ces sections sont expliquées ci-dessous avec des extraits de code commentés.

Personnalisation du graphique

La chose amusante avec ce graphique est qu'il est 100 % modifiable. L'utilisateur peut modifier la taille du graphique, sa position et sa couleur, et peut aussi afficher n'importe quelle donnée sur le graphique grâce à sa flexibilité. Voici toutes les variables dont vous devez vous soucier :

bool proDebug = 0;
uint16_t graphColor = BLUE;
uint16_t pointColor = BLACK;
uint16_t lineColor = GREEN;
String graphName = "Time Graph";
int graphRange = 50;
int markSize = 3;

• proDebug : utilitaire de débogage, 0 par défaut. Mis à 1/true, il affiche la température actuelle sur le Moniteur Série (requis ouvert pour que le code tourne).
• graphColor : couleur du graphique, axes X/Y et leurs étiquettes.
• pointColor : couleur du point illustrant la valeur du capteur.
• lineColor : couleur de la ligne reliant les points.
• graphRange : colonne vertébrale du graphique. Très important de le régler correctement. Représente la valeur max traçable. Pour température, 50°C suffit. Pour entrée analogique brute, mettre 1024.
• markSize : taille du point marquant la valeur du capteur (longueur du carré).

C'est tout, le reste des variables sera calculé automatiquement par l'Arduino.

Changement de la valeur tracée

C'est bien de tracer la température de votre pièce, mais c'est encore mieux si vous pouvez afficher n'importe quelle donnée de capteur sur le graphique. Vous pouvez le faire en modifiant quelques lignes de code : humidité du sol, intensité lumineuse, etc.

Aller plus loin

Vous pouvez aller plus loin en expérimentant : modifiez les constantes originX, originY, sizeX et sizeY pour donner à votre graphique une taille et position différentes sur l'écran. Un fichier d'en-tête est joint au sketch principal, il contient les codes de couleur de certaines couleurs. Essayez de changer la couleur du graphique et des barres. Et voilà, votre graphique personnalisé est prêt.

Bibliothèques

• Bibliothèques Elegoo - Copyright (c) 2012 Adafruit Industries sous licence BSD.
• DHT - Auteur Rob Tillaart, domaine public.

Contexte

J'ai récemment publié un projet qui trace 1, 2, 3 ou 4 valeurs sur un graphique à barres. J'ai décidé de publier un autre modèle pour le tracé. Il n'y a pas de modèles pour graphiques à barres sans lignes partout qui menacent de confondre, alors j'ai refait les calculs et publié un projet simple qui permet à tous de tracer leurs données sur un graphique d'historique, en direct.