Graphique cartésien sur écran Nokia 5110 (Arduino)

Pour ce troisième billet consécutif concernant l'utilisation d'un écran Nokia 5110 contrôlé par une carte Arduino, je me suis amusé à présenter sous la forme d'un graphique cartésien la tension mesurée à l'entrée analogique A0 de l'Arduino (graphique tension vs temps).

Puisque l'écran a 84 pixels de largeur et que j'ai choisi de séparer chaque mesure par une distance horizontale de 4 pixels, l'écran présente en tout temps les 21 mesures les plus récentes.

(Dans un autre article, ce sketch a été adapté pour un écran OLED SH1106 I2C).

Connexions

L'écran Nokia 5110 est branché à l'Arduino de la même façon que dans mon précédent article sur le sujet: encore une fois, j'ai utilisé un circuit intégré 4050 afin que le niveau logique de 5 V des signaux issus de l'Arduino soient abaissés à 3,3 V aux entrées de l'écran.

• La broche SCE de l'afficheur reçoit le signal provenant de la broche 4 de l'Arduino
• La broche RST de l'afficheur reçoit le signal provenant de la broche 3 de l'Arduino
• La broche D/C de l'afficheur reçoit le signal de la broche 5 de l'Arduino
• La broche DN/MOSI de l'afficheur reçoit le signal de la broche 11 de l'Arduino
• La broche SCLK de l'afficheur reçoit le signal de la broche 13 de l'Arduino

Pour mes tests, j'ai fait varier la tension de l'entrée A0 avec un potentiomètre, qui pourra bien entendu être remplacé par un capteur plus utile.

Le sketch

Le sketch ci-dessous fonctionnera à la condition d'avoir préalablement installé les bibliothèques Adafruit-PCD8544-Nokia-5110-LCD-library et Adafruit-GFX-Library dans votre IDE Arduino.

L'algorithme est légèrement différent pour les 21 premières mesures que pour celles qui suivent. S'il y a encore de l'espace libre sur l'écran, on se contente de tracer le petit bout de graphique qui s'ajoute au dessin déjà affiché.  Par contre, si l'écran est déjà plein, nous devons effectuer une translation du graphique déjà tracé (déplacement de 4 pixels vers la gauche) afin de libérer de l'espace pour notre nouvelle mesure, à l'extrême droite du graphique. Cela impose de redessiner tout le contenu de l'écran.

Le rythme auquel l'Arduino prend ses mesures (et donc la vitesse à laquelle le graphique évolue à l'écran) peut être modifié grâce à la variable "intervalle", qui est le temps en millisecondes entre deux mesures consécutives.

J'ai aussi tracé six traits horizontaux qui représentent les graduations de 0 à 5 volts. Ils peuvent être omis si vous jugez que l'écran est trop surchargé.

	/*****************************************************
	Affichage d'une mesure analogique sous forme de graphique
	cartésien sur un écran Nokia (Arduino)
	Pour plus d'informations:
	https://electroniqueamateur.blogspot.com/2018/12/graphique-cartesien-sur-ecran-nokia.html
	*****************************************************/
	#include <SPI.h>
	#include <Adafruit_GFX.h>
	#include <Adafruit_PCD8544.h>
	Adafruit_PCD8544 display = Adafruit_PCD8544(5, 4, 3);
	const int intervalle = 500; // nombre de millisecondes entre deux mesures consécutives
	int mesures[21]; // les 21 dernieres mesures
	int compteur = 0; // nombre de mesures prises jusqu'à présent
	void setup() {
	display.begin();
	display.setContrast(60); // variable d'un écran à l'autre (40 à 60)
	display.clearDisplay();
	}
	void loop() {
	int nouvelleValeur;
	// mesure de la tension à l'entrée A0 et conversion en pixels
	nouvelleValeur = 47 - map(analogRead(A0), 0, 1023, 0, 47); // car l'écran a 48 pixels de haut
	if (compteur > 20) {
	// l'écran est déjà rempli: on fait glisser le graphique vers la gauche
	for (int i = 0; i < 20; i++) {
	mesures[i] = mesures[i + 1];
	}
	mesures[20] = nouvelleValeur;
	display.clearDisplay(); // on repart à neuf
	// tracé de la courbe
	for (int i = 1; i <= 20; i++) {
	display.drawLine(4 * (i - 1), mesures[i - 1], 4 * i, mesures[i], BLACK);
	}
	// 6 lignes horizontales: 0 V, 1 V, 2 V...
	for (int i = 0; i <= 5; i++) {
	display.drawFastHLine(0, i * 9.5, 84, BLACK);
	}
	}
	if ((compteur > 0) && (compteur <= 20)) {
	// pas assez de mesures pour remplir tout l'écran: on ajoute notre nouvelle valeur
	// au graphique déjà visible à l'écran
	mesures[compteur] = nouvelleValeur;
	// on trace une droite reliant la mesure précédente à notre nouvelle mesure
	display.drawLine(4 * (compteur - 1), mesures[compteur - 1], 4 * compteur, mesures[compteur], BLACK);
	compteur = compteur + 1;
	}
	else if (compteur == 0) {
	// c'est la première mesure: on la met en variable,
	// mais on ne trace rien à l'écran, sauf le quadrillage
	mesures[0] = nouvelleValeur;
	compteur = compteur + 1;
	// 6 lignes horizontales: 0 V, 1 V, 2 V...
	for (int i = 0; i <= 5; i++) {
	display.drawFastHLine(0, i * 9.5, 84, BLACK);
	}
	}
	display.display(); // affichage de notre travail à l'écran
	delay(intervalle); // on attend un peu avant la prochaine mesure
	}

view raw Nokia_cartesien.ino hosted with ❤ by GitHub

Vidéo

Pour terminer, voici une courte vidéo montrant le tracé du plan cartésien en temps réel.

Yves Pelletier   (Twitter, Facebook)