Graphiques TFT :Graphiques de l'historique en direct

Cette partie du code tracera le contour du graphique, elle tracera les lignes des axes x et y, elle tracera également les marques et étiquettera l'axe y avec des valeurs.

• Lire Température

chk =DHT.read11(22); temp =(DHT.temperature); 

Cette courte ligne de code lira la température du capteur DHT 11 et la stockera ensuite dans une variable.

• Dessiner Graphique

if(blockPos <8) { // affiche l'heure tft.setCursor((mark[valuePos] - 5), (originY + 16)); tft.setTextColor(graphColor, WHITE); tft.setTextSize(1) ; tft.println(timeBlock[valuePos]); // mappe la valeur locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // dessine le point tft.fillRect((mark[valuePos] - 1), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // essayez de vous connecter au point précédent if(valuePos !=0) { tft.drawLine(mark[valuePos], locationBlock[valuePos], mark[(valuePos - 1)], locationBlock[(valuePos - 1)], lineColor); } blockPos++; } else { // efface le canevas du graphique tft.fillRect((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE); // mappe la valeur - point actuel locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // point de dessin - point actuel tft.fillRect((mark[7]), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // dessine tous les points for(int i =0; i <8; i++) { tft.fillRect((mark[(blockPos - (i + 1))] - 1), (locationBlock[(valuePos - i)] - 1), markSize, markSize, pointColor); } // dessine toutes les lignes for(int i =0; i <7; i++) { tft.drawLine(mark[blockPos - (i + 1)], locationBlock[valuePos - i], mark[blockPos - (i + 2)], locationBlock[valuePos - (i + 1)], lineColor); } // changer les étiquettes de temps pour(int i =0; i <=8; i++) { tft.setCursor((mark[(blockPos - i)] - 5), (originY + 16)); tft.setTextColor(graphColor, WHITE); tft.setTextSize(1) ; tft.println(timeBlock[valuePos - i]); } } valuePos++; 

Cette longue partie de code dessinera les points du graphique à leurs valeurs puis les joindra par des lignes, le code vérifie si le canevas du graphique est rempli, si c'est le cas, il commencera à éjecter la première valeur du graphique et en déplaçant les autres vers le haut pour laisser de l'espace à la nouvelle valeur à insérer, s'il reste encore de l'espace, l'appareil continuera à ajouter des valeurs à intervalles.

Personnaliser le graphique

La chose amusante à propos de ce graphique est qu'il est 100% modifiable, donc l'utilisateur peut modifier la taille du graphique, son emplacement et sa couleur, l'utilisateur peut également afficher n'importe quelle donnée sur le graphique grâce à sa flexibilité. Sont toutes les variables dont vous devriez vous soucier.

bool proDebug =0 ; uint16_t graphColor =BLEU; uint16_t pointColor =NOIR; uint16_t lineColor =VERT; String graphName ="Time Graph" ; int graphRange =50 ; int markSize =3 ; 

• proDebug est l'utilitaire de débogage intégré au projet, il est défini sur 0 par défaut, lorsqu'il est défini sur 1/vrai, il imprimera la température actuelle sur le moniteur série, il s'agit d'un utilitaire de débogage, notez que s'il est activé, le moniteur série est doit être ouvert pour que le code s'exécute.

• graphColor définit la couleur du graphique, les lignes x et y et leurs étiquettes sont définies sur cette couleur.

• pointCouleur représente la couleur du point illustrant la valeur sur le graphique.

• lineCouleur définit la couleur de la ligne joignant les points sur le graphique à la couleur sélectionnée.

• graphRange est l'épine dorsale du graphique, notez qu'il est vraiment important qu'il soit réglé correctement, il représente la valeur maximale qui peut être représentée graphiquement, j'utilise un capteur de température, je ne m'attendrais pas à ce que la valeur dépasse 50 ºC, j'ai donc réglé le valeur à 50, si vous souhaitez représenter graphiquement une entrée analogique brute, vous pouvez définir le graphRange sur 1024, la valeur maximale qu'une broche analogique peut afficher.

• markSize représente la taille du point marquant la valeur du capteur sur le graphique, la valeur représente la longueur du carré.

Et c'est tout, c'est tout ce dont vous avez à vous soucier, le reste des variables sera calculé automatiquement par l'Arduino.

Changement le Valeur

C'est bien de représenter graphiquement la température dans votre pièce, mais c'est encore mieux si vous pouviez afficher n'importe quelle donnée de capteur sur le graphique, et vous pouvez, en éditant simplement quelques lignes de code, vous pouvez représenter graphiquement n'importe quelle donnée de l'humidité du sol à la lumière intensité. Voici un guide pour le faire.

En route Plus

Vous pouvez aller plus loin dans l'expérimentation du projet, essayez de modifier les constantes originX, originY, sizeX et sizeY pour donner à votre graphique une taille et une position différentes à l'écran. Il y a un fichier d'en-tête attaché au croquis principal, il contient les codes de couleur de certaines couleurs, essayez de changer la couleur du graphique et des barres. Et ça y est, votre graphique personnalisé est prêt.

Bibliothèques

• Bibliothèques Elegoo - Copyright (c) 2012 Adafruit Industries sous licence BSD.

• DHT - Auteur Rob Tillaart, cette bibliothèque est dans le domaine public

Contexte

J'ai récemment publié un projet qui représente graphiquement 1, 2, 3 ou 4 valeurs sur un graphique à barres. J'ai décidé de publier un autre modèle de graphique. Il n'y a pas de modèles pour les graphiques à barres qui n'ont pas de lignes partout menaçant de semer la confusion, j'ai donc décidé de refaire le calcul et de publier un projet simple qui permet à chacun de représenter graphiquement ses données sur un graphique historique, en direct.