Aller au contenu

Tutorial Ecran Nokia 5110 : un afficheur monochrome 84×48 pixels (puce PCD8544), pilotable via Arduino !

Tutorial écran nokia 5110 arduino, afficheur lcd compatible pour bricolage électronique, pilotage SPI avec librairie PCD8544 puce de contrôleur

Vous souvenez-vous de ces téléphones à écran graphique LCD monochromes, vendus « juste avant » l’avènement des iPhones et autres smartphones ? Eh bien sachez qu’il est tout à fait possible d’acheter, à faible prix et à l’état neuf, certains écrans compatibles pour ces téléphones ! Et mieux que ça encore, il est tout à fait possible d’acheter un module équipé de ce type d’écran LCD, interfaçable avec Arduino, et ainsi, donner un style rétro à ses projets. Ça vous dit ? Alors la suite devrait vous plaire 😉

Aujourd’hui, j’ai choisi de vous présenter l’écran compatible Nokia 5110, directement pilotable par Arduino (pour rappel, le nokia 5110 était un téléphone mythique de la fin des années 1990 / début des années 2000, et qui a marqué son temps, au niveau mondial !). Ici, outre le fait qu’il soit facilement raccordable à tout arduino, moyennant conversion de tension si nécessaire, c’est avant tout pour la simplicité d’utilisation de cet écran, sa faible consommation, son faible coût, et sa capacité à afficher tout texte, graphique, ou image, qu’il a encore aujourd’hui, selon moi, toute sa place dans nos projets électroniques. Alors trêve de blabla, et voyons ce qu’il a dans le ventre !

Ce contenu vous plaît ? Alors abonnez-vous à la Newsletter pour ne rien louper !

L’écran que je vous présente ici est un afficheur LCD monochrome (« noir et blanc », si vous préférez), de taille compacte (84×48 pixels sur 1,5 pouces de diagonale environ), et doté d’un éclairage latéral (deux leds de chaque côté). De nos jours, il est clair qu’on trouve de bien meilleurs écrans, et à de meilleurs prix (avec de la couleur en prime, et un « vrai » rétroéclairage, par exemple). Toutefois, l’écran LCD Nokia 5110 apporte une touche rétro très sympa dans certains projets électroniques, c’est pourquoi je vous le détaille aujourd’hui ! Alors en avant 😉

Module Description Lien
Afficheur compatible nokia 5110 écran LCD monochrome avec headers à souder pour maintien sur support démontable électronique Écran compatible Nokia 5110
(afficheur LCD 84x48 pixels pilotable en SPI)

Caractéristiques de l’écran Nokia 5110 (puce PCD 8544)

Comme évoqué en introduction, l’écran compatible Nokia 5110 est de type LCD monochrome, équipé d’un simili rétroéclairage (en fait, il s’agit de 4 leds d’éclairage latéral, avec deux leds de part et d’autre de l’écran). La résolution de cet écran est de 84 x 48 pixels (ou 48×84, si vous le tournez de champ, en mode « portrait » !).

L’écran LCD en lui-même est monté sur un circuit imprimé PCB (formant ainsi une sorte de module brochable/débrochable), comme visible ci-dessous :

Ecran compatible nokia 5110 vue de face, module monté sur PCB rouge, avec rétroéclairage latéral, muni de broches de connexion header à souder
Face arrière pcb screen nokia 5110 compatible, circuit imprimé rouge avec désignation des broches de connexion à l'arduino ou microcontrôleur

Le PCB, faisant office de support de cet écran fait environ 45 x 45 mm. En sachant que la « surface d’affichage LCD » à proprement parler fait environ 35 mm de large, sur 25 mm de haut (soit 43 mm de diagonale, soit 1,7 pouces « bruts » environ).

Le pseudo rétroéclairage est de couleur blanche, basiquement, mais existe aussi en rouge, vert, ou bleu parfois.

Au niveau alimentation, l’écran Nokia 5110 s’alimente entre 2,7 et 3,3 volts. Les mêmes niveaux de tension sont à respecter au niveau des broches de communication (CL., DIN, …). Il faudra donc utiliser un convertisseur de tension 5 volts ↔ 3,3 volts, si vous souhaitez travailler/communiquer avec cet afficheur depuis une carte Arduino Uno ou autre, fonctionnant en 5V.

Nota : si vous naviguez sur internet, vous verrez bon nombre de montages « simplifiés » qui alimentent et communiquent directement avec cet écran en +5V. Bien que cela soit toléré par l’écran de manière ponctuelle, les fabricants déconseillent vraiment un tel niveau de tension à la longue, car cela peut provoquer des dysfonctionnements, et surtout, réduire la durée de vie de l’afficheur, en lui-même. Du coup, le mieux est de travailler en 3,3 volts, directement ou en utilisant un convertisseur de tension au passage.

À noter que la puce intégrée à ce module d’affichage est le contrôleur Philips PCD8544, dont vous pourrez retrouver les caractéristiques techniques ici : datasheet du PCD 8544 de Philips.

Enfin, comme évoqué en intro, cet afficheur ne consomme que peu de courant (quelques milliampères tout au plus, même avec le rétro-éclairage), ce qui est idéal pour nos montages électroniques fonctionnant sur pile ou accu !

À présent, voyons cet écran nokia 5110 d’un peu plus près, notamment au niveau de son brochage 🙂

Brochage écran compatible Nokia 5110 (pinout)

Au niveau du brochage du module écran nokia 5110 (pinout, en anglais), le voici (présenté « droit » et « couché », pour que vous puissiez vous repérer en toute situation !) :

Ecran nokia 5110 pinout, brochage pcb du module compatible et pilotable par microcontrôleur ou carte arduino via bus SPI

Vu de face, on retrouve 8 broches (RST, CE, DC, DIN, CLK, VCC, LIGHT, et GND), disponibles « en doublon » de part et d’autre de l’afficheur LCD :

  • la ligne RST (reset) permet de réinitialiser l’afficheur (actif à l’état bas)
  • la ligne CE (chip enable) permet de dire à l’écran si on souhaite communiquer avec lui ou pas (actif à l’état bas)
  • la ligne DC (data/command) permet de signifier à l’écran si les données qu’on lui enverra ensuite (via DIN) seront des données à proprement parler (« data ») ou des instructions (« command ») ; électriquement parlant, si cette ligne est mise à l’état haut, ce sera pour envoyer des données, et si elle est mise à l’état bas, ce sera pour envoyer des commandes
  • la ligne DIN (data input) permet l’envoi physique de bits d’instructions/données à l’écran
  • la ligne CLK (clock) permet de synchroniser l’envoi des bits transitant par DIN
  • la ligne VCC permet d’alimenter le module LCD en lui-même (pour rappel, il faudra lui fournir une tension comprise entre 2,7 et 3,3 volts)
  • la ligne LIGHT (lumière) permet d’alimenter les 4 leds de « rétroéclairage » (l’allumage se fait tout simplement en mettant cette ligne à la masse, tout du moins, avec le modèle que j’utilise ici, dans cet article)
  • et la ligne GND, qui est la masse du module, comme vous l’aurez deviné !

De prime abord, il peut être difficile de comprendre comment toutes les broches de l’afficheur nokia 5110 vont s’utiliser avec un arduino. Mais il suffit de les grouper par « intérêt », pour mieux y voir ! On obtient ainsi :

  • la broche RST sert au reset
  • la broche LIGHT sert au rétro-éclairage
  • les broches VCC et GND servent à alimenter le module
  • la broche DC sert à signaler à l’écran si les infos transmises en suivant seront des commandes ou des données
  • et les broches CE, DIN, et CLK servent au pilotage de l’écran

Du coup, vu comme ça, seules les broches CE/DIN/CLK semblent quelque peu énigmatiques !

Cela étant dit, sachez ces broches auraient pu se nommer ainsi : CE → SS, DIN → MOSI, et CLK → SCK. Vu comme ça, cela devrait vous parler un peu plus (enfin, je l’espère !). Car il s’agit là de dénomination de lignes SPI arduino, car oui, les lignes CE/DIN/CLK de l’écran nokia 5110 sont bien des lignes compatible SPI ! Et comme vous le savez, rien de plus facile avec un Arduino, que de piloter des périphériques, via le bus SPI 😉

Sachez d’ailleurs, au passage, qu’il est possible de communiquer jusqu’à 4 Mbps en SPI, entre l’Arduino et l’écran Nokia 5110 ! De quoi ne pas perdre de temps, pour afficher tout ce qui nous intéresse 😉

Maintenant que nous avons vu le brochage à la loupe, voyons comment se raccorde cet afficheur LCD à un Arduino Uno ou Nano, afin de vous faire une première idée !

Comment raccorder son afficheur Nokia 5110 à Arduino, via le bus SPI ?

Alors, vous savez à présent que l’écran compatible nokia 5110 s’alimente en +3,3V maximum (de 2,7 à 3,3 volts, comme disent les fabricants). Or, comme vous le savez également, nos Arduino les plus courants (Uno, Nano, Mega, …) fonctionnent en +5V. Il va donc falloir procéder à une conversion de niveaux logiques (5 volts vers 3,3 volts), afin de ne pas risquer d’endommager l’afficheur.

Pour cela, et compte tenu du nombre importants de signaux à mettre à niveau, nous allons faire appel à un convertisseur à 8 canaux, à savoir : le TXS0108E, de Texas Instruments (lien vers son datasheet, si besoin). Ainsi, notre câblage sera simplifié 😉

Voici d’ailleurs un exemple de raccordement carte Arduino Nano → convertisseur TXS 0108E → module Nokia 5110, facilement réalisable sur breadboard :

Schéma de raccordement écran Nokia 5110 à Arduino Nano, avec convertisseur 5V vers 3,3V de type TXS0108E, câblage filaire pour branchement

Ici, comme vous pouvez le constater :

  • les lignes d’alimentation sont en rouge / orange / noir (attention d’ailleurs, au passage, de ne pas mélanger les +5V et +3,3V, si vous reproduisez ce montage)
  • les lignes de communication sont en violet / vert (côté arduino / côté afficheur)

Attention par ailleurs au sens de câblage du convertisseur TXS0108E ; en effet, le côté « A » doit avoir une tension inférieure au côté « B » (c’est pourquoi les broches VA/A1/A2/…/A8/OE sont câblées côté 3,3 volts, et VB/B1/B2/…/B8 côté 5 volts).

Quant aux broches choisies ici, côté Arduino, peu importe leur numéro (ou presque !). Car la librairie que nous utiliserons plus loin nous permettra d’utiliser les E/S digitales qu’on souhaite (et d’émuler une communication SPI dessus). Donc, pas de contrainte particulière, à ce niveau !

Remarque : l’utilisation d’un convertisseur TXS0108E, pour convertir les signaux 5V en 3V3, n’est qu’une solution technique parmi tant d’autres ; en effet, nous aurions très bien pu mettre en œuvre des mosfets, ou utiliser d’autres types de puce, pour la conversion. Et d’ailleurs, compte tenu du fait qu’on ne fait qu’envoyer des données à l’écran Nokia 5110, sans rien attendre en retour (communication unidirectionnelle, donc), on pourrait encore simplifier la conversion (je vous montrerai d’ailleurs comment utiliser un simple driver 74HC4050, dans un autre article, pour faire l’abaissement de tension).

Au passage, voici les composants utilisés pour ce montage (qui servira de support, aux exemples de code ci-après) :

Du reste, voici ce que ça donne de mon côté, une fois câblé sur breadboard :

Maintenant, laissons de côté la partie matérielle, et voyons ce dont allons avoir besoin, côté logiciel !

Remarque : ici, j’ai utilisé un Arduino Nano afin que tout l’ensemble tienne sur une breadboard ; bien entendu, libre à vous d’utiliser un Arduino Uno, Mega, ou autre à la place, si le coeur vous en dit (surtout que le câblage restera le même, la plupart du temps !)

Librairies PCD8544 et GFX d’Adafruit, pour piloter cet écran LCD avec Arduino

Afin de pouvoir utiliser l’écran Nokia 5110 avec un Arduino, le plus simple est selon moi d’utiliser la librairie « PCD8544 d’Adafruit » (disponible directement dans le gestionnaire de bibliothèques, de l’IDE Arduino). Ainsi, le pilotage et contrôle de l’écran se fera de la manière la plus simple qui soit, tout en bénéficiant, en plus, de toutes les fonctionnalités qu’offre la librairie standard GFX (bibliothèque complémentaire / dépendance, de chez Adafruit).

Si ça vous dit, voici comment installer la librairie PCD8544 d’Adafruit dans Arduino IDE. En fait, il faut procéder comme n’importe quelle librairie que vous souhaiteriez installer, en cliquant sur Outils > Gérer les bibliothèques, puis en tapant « PCD8544 » dans la zone de recherche (avec appui sur la touche ENTRÉE de votre clavier, pour valider). Vous devriez ainsi obtenir une fenêtre semblable à celle-ci :

Recherche librairie écran nokia 5110, bibliothèque Adafruit PCD8544 pour pilotage afficheur LCD depuis interface arduino, code de programmation facile

Il vous faudra ensuite cliquer sur la ligne « Adafruit PCD8544 Nokia 5110 LCD library », puis cliquer sur le bouton « Installer ». À noter qu’à cette occasion, l’IDE vous proposera peut-être d’installer des « sous-librairies complémentaires » (si celles-ci ne figurent pas sur votre ordi). En fait, ce sont des dépendances nécessaires (« secondaires », mais parfois indispensables), à la bonne marche de la librairie « principale ». Pour les installer, il vous suffira de cliquer sur « Install all », comme visible ci-dessous :

Dépendances librairie PCD8544 Adafruit de type GFX library et BusIO, pour commande afficheur lcd compatible nokia modèle 5110, depuis Arduino IDE

Enfin, si tout est bien installé, vous devriez voir la mention « INSTALLED » écrite, au niveau de la ligne « Adafruit PCD8544 Nokia LCD library ». Nota : si jamais la fenêtre des librairies s’est fermée entre temps, il vous suffit de la rouvrir, et de taper « PCD8544 » ou « Adafruit » à nouveau, pour la retrouver.

Voilà ce que ça a donné de mon côté, une fois toutes ces étapes accomplies :

Bibliothèque installée PCD 8544 pour IDE Arduino, commande écran nokia 5110 depuis code de programmation, pour textes dessins et images

Et comme visible ci-dessus, de mon côté, il y a plusieurs librairies d’installées, et non une seule. On retrouve d’ailleurs la « fameuse » et très utile bibliothèque standard GFX, dont je vous avais parlé précédemment !

Bon, maintenant, voyons comment utiliser cette librairie Adafruit PCD8544 pour écran lcd Nokia 5110, dans notre code arduino 😉

Remarque : dans cet article, nous faisons appel à une librairie qui fera tout le travail (et notamment, émuler la communication SPI ; c’est pourquoi vous ne verrez pas « d’instruction SPI » à proprement parler). Bien sûr, nous aurions pu faire différemment, en branchant par exemple l’écran Nokia 5110 aux broches MOSI (D11), SCK (D13), et /SS (D10) de l’Arduino, et en se servant de « commandes générales » SPI (ce qui nécessiterait par contre de connaître le datasheet du contrôleur PCD 8544 de l’écran Nokia 5110, « sur le bout des doigts »). Mais afin de rester simple, j’ai préféré utiliser cette « simple » librairie, pour introduire le pilotage de cet écran via arduino !

Module Description Lien
Afficheur compatible nokia 5110 écran LCD monochrome avec headers à souder pour maintien sur support démontable électronique Écran compatible Nokia 5110
(afficheur LCD 84x48 pixels pilotable en SPI)

Code exemple #1 : écrire du texte à l’écran (et inverser le « noir et blanc »)

Le premier exemple de code que nous allons voir ici permet d’écrire du texte sur l’écran Nokia 5110 piloté par Arduino.

Au niveau de la librairie PCD 8544 d’Adafruit présentée ci-dessus, nous allons nous servir des fonctionnalités suivantes :

  • clearDisplay(), qui permet d’effacer la mémoire tampon de l’afficheur (cette mémoire est en fait une « image » de ce qui sera envoyé à l’écran ; on peut la modifier autant de fois que souhaité, avant de « l’envoyer à l’écran », pour affichage effectif)
  • setTextSize(taille), qui permet de définir la taille du texte à écrire (avec une valeur « taille » qui peut ici valoir 1, 2, 3, 4, …)
  • setCursor(X, Y), qui permet de positionner le « pointeur d’affichage » (une sorte de « curseur invisible ») aux coordonnées X,Y de l’afficheur (X étant le nombre de pixels sur l’axe horizontal, et Y le nombre de pixels sur l’axe vertical, lorsque l’afficheur est observé « droit », en mode « paysage »)
  • setTextColor(couleur_texte, couleur_fond), qui permet de définir la couleur des textes qui seront écrits ensuite ; nota : comme ici l’écran LCD est de type monochrome, les couleurs ne peuvent donc prendre que les valeurs BLACK (noir) ou WHITE (transparent)
  • setRotation(nombre_de_fois_90°_d_angle), qui permet d’effectuer une « rotation » du sens d’écriture des textes écrits ensuite ; setRotation(0) permet d’écrire « normalement », setRotation(1) de tourner de 90°, setRotation(2) de tourner de 180°, et setRotation(3) de tourner de 270°
  • print(texte) ou println(texte), qui permet d’écrire du texte à l’écran :
    • à la position courante du curseur
    • à la couleur préalablement définie
    • à la taille également préalablement spécifiée
    • au sens de rotation défini (parmi les 4 possibilités offertes, et par défaut à 0, pour dire « aucune rotation »)
    • d’ajouter un saut de ligne / retour à la ligne, si vous utilisez la fonction « println » plutôt que « print »
    • nota : on peut également formater un nombre au format hexadécimal (HEX), décimal (DEC), octal (OCT), ou binaire (BIN), à cette occasion, en utilisant la fonction : print(nombre, format)
  • et display(), qui permet de transférer la mémoire tampon (donc tout ce que nous avons préparé/envoyé dedans) vers l’écran à proprement parler, pour affichage effectif

Tout ça ne vous parle pas ? Alors découvrez le code exemple qui suit, pour mieux comprendre comment tout cela s’utilise, en pratique :

/*
   ______               _                  _///_ _           _                   _
  /   _  \             (_)                |  ___| |         | |                 (_)
  |  [_|  |__  ___  ___ _  ___  _ __      | |__ | | ___  ___| |_ _ __ ___  _ __  _  ___  _   _  ___
  |   ___/ _ \| __|| __| |/ _ \| '_ \_____|  __|| |/ _ \/  _|  _| '__/   \| '_ \| |/   \| | | |/ _ \
  |  |  | ( ) |__ ||__ | | ( ) | | | |____| |__ | |  __/| (_| |_| | | (_) | | | | | (_) | |_| |  __/
  \__|   \__,_|___||___|_|\___/|_| [_|    \____/|_|\___|\____\__\_|  \___/|_| |_|_|\__  |\__,_|\___|
                                                                                      | |
                                                                                      \_|
  Fichier :       prgArduino-1-EcritureDeTexte.ino
  
  Description :   Programme permettant d'écrire du texte sur un écran compatible Nokia 5110 (PCD8544),
                  avec un Arduino Nano, via un convertisseur de niveau logique à 8 canaux (TXS0108E)
                  
  Remarques :     - la librairie utilisée ici sera la PCD8544 d'Adafruit (https://github.com/adafruit/Adafruit-PCD8544-Nokia-5110-LCD-library)
                  - certaines fonctionnalités d'affichage sont importées de la librairie GFX d'Adafruit (https://github.com/adafruit/Adafruit-GFX-Library)
                                    
  Auteur :        Jérôme TOMSKI (https://passionelectronique.fr/)
  Créé le :       05.12.2023

*/

// Inclusion de la librairie PCD8544 de Adafruit
#include <Adafruit_PCD8544.h>

// Définition des broches de raccordemenet Arduino ↔ convertisseur ↔ écranNokia
#define brocheD3_arduino_vers_brocheLIGHT_ecranNokia  3
#define brocheD4_arduino_vers_brocheCLK_ecranNokia    4
#define brocheD5_arduino_vers_brocheDIN_ecranNokia    5
#define brocheD6_arduino_vers_brocheDC_ecranNokia     6
#define brocheD7_arduino_vers_brocheCE_ecranNokia     7
#define brocheD8_arduino_vers_brocheRST_ecranNokia    8

// Instanciation de cette librairie, de telle sorte : "Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);"
Adafruit_PCD8544 ecranNokia5110 = Adafruit_PCD8544(brocheD4_arduino_vers_brocheCLK_ecranNokia, brocheD5_arduino_vers_brocheDIN_ecranNokia, brocheD6_arduino_vers_brocheDC_ecranNokia, brocheD7_arduino_vers_brocheCE_ecranNokia, brocheD8_arduino_vers_brocheRST_ecranNokia);



// ========================
// Initialisation programme
// ========================
void setup() {

  // Initialisation de la liaison série (PC <-> Arduino Nano), juste en cas de besoin, au niveau débug
  Serial.begin(9600);
  Serial.println(F("================================================================="));
  Serial.println(F("Exemple #1 : écriture de texte, sur l'écran compatible Nokia 5110"));
  Serial.println(F("================================================================="));
  Serial.println("");

  // Allumage du rétroéclairage de l'écran
  pinMode(brocheD3_arduino_vers_brocheLIGHT_ecranNokia, OUTPUT);
  digitalWrite(brocheD3_arduino_vers_brocheLIGHT_ecranNokia, LOW);

  // Écran Nokia 5110
	ecranNokia5110.begin();             // Initialisation
  ecranNokia5110.setContrast(56);     // Changement du contraste (entre 0 et 127) → à ajuster soi-même, au besoin
  ecranNokia5110.setBias(4);          // Changement du biais (entre 0 et 7)       → à ajuster soi-même, au besoin
  delay(500);

}


// =================
// Boucle principale
// =================
void loop() {

  // Remarques :
  //    - clearDisplay() permet de vider la mémoire tampon de l'écran
  //    - display() permet d'envoyer le contenu de la mémoire tampon de l'écran à l'écran
  //    - setTextSize(taille) permet de sélectionner la taille du texte à afficher (tailles possibles : 1, 2, 3, …)
  //    - setTextColor(couleur) permet "d'écrire" de la couleur indiquée (par exemple, "BLACK" permet d'écrire en noir sur l'écran LCD)
  //    - setTextColor(couleur, fond) permet "d'écrire" de la couleur indiquée sur le fond spécifié (par exemple, "WHITE, BLACK" permet d'écrire en blanc sur fond noir)
  //    - setCursor(x,y) permet de positionner le "curseur" à la position (x,y) (x correspondant au nbre de pixels sur l'axe horizontal, et y le nbre de px sur l'axe vertical ; l'origine étant en haut/à gauche)
  //    - print(texte) permet d'écrire du texte, à la position courante du "curseur"
  //    - println(texte) permet d'écrire du texte à la position courante du "curseur", puis de faire un saut à la ligne (déplace le curseur vers le bas pour la ligne suivante, donc)
  //    - print(nombre, base) permet d'écrire un nombre à l'écran, dans la base indiquée, avec HEX (hexadécimal) pour la base 16, DEC (décimal) pour base 10, OCT (octal) pour base 8, et BIN (binaire) pour la base 2
  //      exemples : print(0xFF, HEX) affichera "FF", et print(0xFF, DEC) affichera 255 (puisque 0xFF en hexadécimal/base16 vaut 255 en décimal/base10)
  //    - setRotation(nombreDeFois90Degres) permet de faire tourner le sens d'écriture à l'écran, dans le sens inverse des aiguilles d'une montre
  //      (avec 0 = aucune rotation, 1 = 90° de rotation, 2 = 180°, et 3 = 270°)
  //    - certains accents s'affichent mal à l'écran, c'est pourquoi je les ai enlevé (et mis par exemple "Bonjour a tous", à la place de "Bonjour à tous"

  
  // Affiche le texte "Bonjour à tous" et "bienvenue" à l'écran
  ecranNokia5110.clearDisplay();
  ecranNokia5110.setTextSize(1);
  ecranNokia5110.setTextColor(BLACK);           // Texte en "noir sur fond blanc"
  ecranNokia5110.setCursor(0,10);
  ecranNokia5110.println("Salut a tous,");
  ecranNokia5110.setTextColor(WHITE, BLACK);    // Texte en "blanc sur fond noir"
  ecranNokia5110.setCursor(0,30);
  ecranNokia5110.println("et bienvenue !");
  ecranNokia5110.display();
  delay(3000);

  
  // Affiche du texte en taille 1, 2, 3, et 4
  ecranNokia5110.clearDisplay();
  ecranNokia5110.setTextColor(BLACK);
  ecranNokia5110.setCursor(0,0);
  ecranNokia5110.setTextSize(1);
  ecranNokia5110.print("1");
  ecranNokia5110.setTextSize(2);
  ecranNokia5110.print("2");
  ecranNokia5110.setTextSize(3);
  ecranNokia5110.print("3");
  ecranNokia5110.setTextSize(4);
  ecranNokia5110.print("4");
  ecranNokia5110.display();
  delay(3000);


  // Affiche le nombre "0xFF", en différent format (=FF en hexadécimal, =255 en décimal, =377 en octal, et =1111 1111 en binaire)
  int nombre = 0xFF;
  ecranNokia5110.clearDisplay();
  ecranNokia5110.setTextSize(1);
  ecranNokia5110.setCursor(0,0);
  ecranNokia5110.print("HEX = ");
  ecranNokia5110.println(nombre, HEX);
  ecranNokia5110.print("DEC = ");
  ecranNokia5110.println(nombre, DEC);
  ecranNokia5110.print("OCT = ");
  ecranNokia5110.println(nombre, OCT);
  ecranNokia5110.print("BIN = ");
  ecranNokia5110.println(nombre, BIN);
  ecranNokia5110.display();
  delay(3000);


  // Rotation du sens d'écriture à l'écran, en se servant de la fonction "setRotation(nbreDeFois90degres)"
  // Nota 1 : le sens de rotation est l'inverse de celui des aiguilles d'une montre
  // Nota 2 : pour simplifier, setRotation(0) = aucune rotation, setRotation(1) = 90°, setRotation(2) = 180°, et setRotation(3) = 270° de rotation
  ecranNokia5110.clearDisplay();
  for (int nbreDeFois90DegresAtourner = 0 ; nbreDeFois90DegresAtourner < 4 ; nbreDeFois90DegresAtourner++) {
    ecranNokia5110.setRotation(nbreDeFois90DegresAtourner);
    ecranNokia5110.setCursor(0,0);
    ecranNokia5110.print("Rota=");
    ecranNokia5110.print(nbreDeFois90DegresAtourner);
  }
  ecranNokia5110.display();
  delay(3000);


  // Et on reboucle à l'infini (après avoir remis l'écran dans le bon sens, bien entendu !)
  ecranNokia5110.setRotation(0);
  
}

En fait, comme vous pouvez le constater, le code est plutôt simple à décrypter, car divisé en blocs.

Du reste, une fois uploadé sur l’Arduino, voici ce qu’affiche le montage précédemment réalisé de mon côté (nota : 4 affichages se succèdent, avec trois secondes d’intervalle entre chaque) :

Je pense que c’est suffisamment parlant, ainsi, non ? 😉

Remarque : la partie Serial.begin/Serial.println du début de la fonction setup est parfaitement inutile dans ce code ; je l’ai simplement laissée par habitude, car cela me permet de faire du debug, à l’occasion !

Module Description Lien
Afficheur compatible nokia 5110 écran LCD monochrome avec headers à souder pour maintien sur support démontable électronique Écran compatible Nokia 5110
(afficheur LCD 84x48 pixels pilotable en SPI)

Code exemple #2 : dessiner des formes (rectangle, cercle, triangle, rectangle à bords arrondis, …)

Maintenant que nous avons vu comment écrire du texte à l’écran, sous différentes formes, voyons comment dessiner des formes graphiques sur l’écran nokia 5110 avec Arduino !

Mais avant tout, voyons quelles fonctions nous allons utiliser ici, de la librairie « PCF 8544 de Adafruit » (sans redétailler celles vues précédemment) :

  • drawRect(X, Y, largeur, hauteur, couleur) permet de dessiner un rectangle à partir de la position X,Y ; ce rectangle aura pour dimension « largeur x hauteur », et une couleur donnée (BLACK ou WHITE, pour noir ou transparent, dans le cas de notre écran monochrome)
  • fillRect permet la même chose, mais en remplissant l’intérieur du rectangle de la même couleur que le contour (alors que précédemment, on ne dessinait que le contour, en fait)
  • drawRoundRect(X, Y, largeur, hauteur, nb_pixels_angles, couleur) permet de dessiner un rectangle à bords arrondis à partir de la position X,Y ; ce rectangle aura pour dimension « largeur x hauteur », des angles arrondis de « nb_pixels_angles », et une couleur égale à BLACK (noir) ou WHITE (transparent)
  • fillRoundRect permet la même chose, mais avec l’intérieur rempli de la même couleur que le contour
  • drawCircle(X, Y, rayon, couleur) permet de dessiner un cercle, qui aura pour centre la position X,Y ; ce cercle aura pour rayon la valeur spécifiée, et un contour de couleur noir (BLACK) ou transparent (WHITE)
  • fillCircle permet la même chose, mais en remplissant l’intérieur de la même couleur que le contour
  • drawTriangle(X1, Y1, X2, Y2, X3, Y3, couleur) permet de dessiner un triangle, avec ses 3 sommets définis aux coordonnées X1/Y1, X2/Y2, et X3/Y3 ; ce triangle aura un contour de couleur BLACK ou WHITE (noir ou transparent, donc)
  • fillTriangle permet la même chose, en remplissant l’intérieur au passage
  • drawLine(X1, Y1, X2, Y2, couleur) permet de tracer une ligne, du point de coordonnées X1/Y1 au point X2/Y2 ; cette ligne sera tracée en noir ou transparent, selon si vous optez pour la couleur BLACK ou WHITE
  • drawPixel(X, Y, couleur) permet de fixer la couleur d’un pixel situé à la position X,Y ; à la couleur BLACK (noir) ou WHITE (transparent, dans notre cas)

Et voici ce que ça donne dans le code arduino, en pratique !

/*
   ______               _                  _///_ _           _                   _
  /   _  \             (_)                |  ___| |         | |                 (_)
  |  [_|  |__  ___  ___ _  ___  _ __      | |__ | | ___  ___| |_ _ __ ___  _ __  _  ___  _   _  ___
  |   ___/ _ \| __|| __| |/ _ \| '_ \_____|  __|| |/ _ \/  _|  _| '__/   \| '_ \| |/   \| | | |/ _ \
  |  |  | ( ) |__ ||__ | | ( ) | | | |____| |__ | |  __/| (_| |_| | | (_) | | | | | (_) | |_| |  __/
  \__|   \__,_|___||___|_|\___/|_| [_|    \____/|_|\___|\____\__\_|  \___/|_| |_|_|\__  |\__,_|\___|
                                                                                      | |
                                                                                      \_|
  Fichier :       prgArduino-2-DessinerDesFormesSimples.ino
  
  Description :   Programme permettant de dessiner des formes simples sur un écran compatible Nokia 5110 (PCD8544),
                  avec un Arduino Nano, via un convertisseur de niveau logique à 8 canaux (TXS0108E)
                  
  Remarques :     - la librairie utilisée ici sera la PCD8544 d'Adafruit (https://github.com/adafruit/Adafruit-PCD8544-Nokia-5110-LCD-library)
                  - certaines fonctionnalités d'affichage sont importées de la librairie GFX d'Adafruit (https://github.com/adafruit/Adafruit-GFX-Library)
                                    
  Auteur :        Jérôme TOMSKI (https://passionelectronique.fr/)
  Créé le :       06.12.2023

*/

// Inclusion de la librairie PCD8544 de Adafruit
#include <Adafruit_PCD8544.h>

// Définition des broches de raccordemenet Arduino ↔ convertisseur ↔ écranNokia
#define brocheD3_arduino_vers_brocheLIGHT_ecranNokia  3
#define brocheD4_arduino_vers_brocheCLK_ecranNokia    4
#define brocheD5_arduino_vers_brocheDIN_ecranNokia    5
#define brocheD6_arduino_vers_brocheDC_ecranNokia     6
#define brocheD7_arduino_vers_brocheCE_ecranNokia     7
#define brocheD8_arduino_vers_brocheRST_ecranNokia    8

// Instanciation de cette librairie, de telle sorte : "Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);"
Adafruit_PCD8544 ecranNokia5110 = Adafruit_PCD8544(brocheD4_arduino_vers_brocheCLK_ecranNokia, brocheD5_arduino_vers_brocheDIN_ecranNokia, brocheD6_arduino_vers_brocheDC_ecranNokia, brocheD7_arduino_vers_brocheCE_ecranNokia, brocheD8_arduino_vers_brocheRST_ecranNokia);



// ========================
// Initialisation programme
// ========================
void setup() {

  // Initialisation de la liaison série (PC <-> Arduino Nano), juste en cas de besoin, au niveau débug
  Serial.begin(9600);
  Serial.println(F("==========================================================================="));
  Serial.println(F("Exemple #2 : dessiner des formes simples, sur l'écran compatible Nokia 5110"));
  Serial.println(F("==========================================================================="));
  Serial.println("");

  // Allumage du rétroéclairage de l'écran
  pinMode(brocheD3_arduino_vers_brocheLIGHT_ecranNokia, OUTPUT);
  digitalWrite(brocheD3_arduino_vers_brocheLIGHT_ecranNokia, LOW);

  // Écran Nokia 5110
	ecranNokia5110.begin();             // Initialisation
  ecranNokia5110.setContrast(56);     // Changement du contraste (entre 0 et 127) → à ajuster soi-même, au besoin
  ecranNokia5110.setBias(4);          // Changement du biais (entre 0 et 7)       → à ajuster soi-même, au besoin
  delay(500);

}


// =================
// Boucle principale
// =================
void loop() {

  // Remarques :
  //    - clearDisplay() permet de vider la mémoire tampon de l'écran
  //    - display() permet d'envoyer le contenu de la mémoire tampon de l'écran à l'écran
  //    - drawRect(posX, posY, largeur, hauteur, couleur) permet de dessiner un rectangle (son contour) à l'écran, depuis la position (X,Y), avec pour dimension largeur x hauteur
  //    - fillRect(posX, posY, largeur, hauteur, couleur) fait la même chose que drawRect, mais rempli (noirci) à l'intérieur
  //    - drawRoundRect(posX, posY, largeur, hauteur, nbPixelsAngles, couleur) permet de dessiner un rectangle à bords arrondis (son contour) à l'écran, depuis la position (X,Y), avec dimensions largeur x hauteur, et des angles arrondis de nbPixelsAngles
  //    - fillRoundRect(posX, posY, largeur, hauteur, nbPixelsAngles, couleur) fait la même chose que drawRoundRect, mais rempli (noirci) à l'intérieur
  //    - drawCircle(posCentreX, posCentreY, rayon, couleur) permet de dessiner un cercle (son contour) à l'écran, avec pour centre la position (X,Y), et un rayon donné
  //    - fillCircle(posCentreX, posCentreY, rayon, couleur) fait la même chose que drawCircle, mais rempli (noirci) à l'intérieur
  //    - drawTriangle(Xhaut, Yhaut, Xgauche, Ygauche, Xdroite, Ydroite, couleur) permet de dessiner un triangle (son contour) à l'écran, avec (Xhaut, Yhaut) comme coordonnées pour le sommet, (Xgauche, Ygauche) pour l'angle gauche, et idem pour la droite
  //    - fillTriangle(Xhaut, Yhaut, Xgauche, Ygauche, Xdroite, Ydroite, couleur) fait la même chose que drawTriangle, mais rempli (noirci) à l'intérieur
  //    - drawLine(xDebut, yDebut, xFin, yFin, couleur) permet de dessiner une droite à l'écran, ayant pour point d'origine (xDebut, yDebut) et de fin (xFin, yFin)
  //    - drawPixel(posX, posY, couleur) permet de dessiner un point à l'écran, à la position (posX, posY)

  

  // Dessine un rectangle (son contour plutôt, devrais-je dire)
  ecranNokia5110.clearDisplay();
  ecranNokia5110.drawRect(10, 10, 64, 28, BLACK);
  ecranNokia5110.display();
  delay(2000);


  // Dessine un rectangle "plein"
  ecranNokia5110.clearDisplay();
  ecranNokia5110.fillRect(10, 10, 64, 28, BLACK);
  ecranNokia5110.display();
  delay(2000);


  // Dessine un rectangle à bords arrondis (son contour, uniquement)
  ecranNokia5110.clearDisplay();
  ecranNokia5110.drawRoundRect(10, 10, 64, 28, 8, BLACK);
  ecranNokia5110.display();
  delay(2000);


  // Dessine un rectangle "plein", à bords arrondis
  ecranNokia5110.clearDisplay();
  ecranNokia5110.fillRoundRect(10, 10, 64, 28, 8, BLACK);
  ecranNokia5110.display();
  delay(2000);


  // Dessine un cercle (son contour, uniquement) - nota : le rond ne sera pas très rond, à l'écran !
  ecranNokia5110.clearDisplay();
  ecranNokia5110.drawCircle(42, 24, 20, BLACK);
  ecranNokia5110.display();
  delay(2000);


  // Dessine un disque ("cercle rempli") - nota : le rond ne sera pas très rond à l'écran, là non plus !
  ecranNokia5110.clearDisplay();
  ecranNokia5110.fillCircle(42, 24, 20, BLACK);
  ecranNokia5110.display();
  delay(2000);


  // Dessine un triangle (son contour, uniquement)
  ecranNokia5110.clearDisplay();
  ecranNokia5110.drawTriangle(24, 4, 12, 40, 72, 40, BLACK);
  ecranNokia5110.display();
  delay(2000);


  // Dessine un triangle "rempli"
  ecranNokia5110.clearDisplay();
  ecranNokia5110.fillTriangle(24, 4, 12, 40, 72, 40, BLACK);
  ecranNokia5110.display();
  delay(2000);


  // Traçage de lignes aléatoires
  int xDebut, yDebut, xFin, yFin;
  ecranNokia5110.clearDisplay();
  for(int i = 0 ; i < 25 ; i++) {
    xDebut = random(0, 41);
    yDebut = random(0, 47);
    xFin = random(42, 83);
    yFin = random(0, 47);
    ecranNokia5110.drawLine(xDebut, yDebut, xFin, yFin, BLACK);
    ecranNokia5110.display();
    delay(200);
  }
  delay(2000);


  // Traçage de points aléatoires (comme des flocons de neige !)
  int posX, posY;
  ecranNokia5110.clearDisplay();
  for(int j = 0 ; j < 500 ; j++) {
    posX = random(0, 87);
    posY = random(0, 47);
    ecranNokia5110.drawPixel(posX, posY, BLACK);
    ecranNokia5110.display();
    delay(10);
  }
  delay(2000);


  // Et on reboucle ce programme à l'infini, pour le fun !
  
}

Comme vous pouvez le constater, le code permettant de dessiner les formes à l’écran est divisé en 10 parties, comprenant :

  • un rectangle « vide » (que le contour, j’entends)
  • un rectangle « plein » (rempli de la même couleur que le contour)
  • un rectangle à bords arrondis « vide »
  • un rectangle à bords arrondis « plein »
  • un cercle « vide »
  • un cercle « rempli »
  • un triangle « vide »
  • un triangle « plein »
  • 25 lignes qui se tracent un peu dans tous les sens, au fur et à mesure du temps
  • et 500 points, qui apparaissent là aussi au fur et à mesure, un peu partout à l’écran (comme de la neige !)

Avec une pause de 2 secondes, entre chaque changement d’affichage.

En images, voici ce que cela donne de mon côté :

Nota : le cercle est déformé, mais non volontairement ! En fait, cela vient de l’afficheur en lui même, dont les pixels sont « plus serrés » sur l’axe horizontal, que sur l’axe vertical. Oui… ça fait bizarre 😉

Module Description Lien
Afficheur compatible nokia 5110 écran LCD monochrome avec headers à souder pour maintien sur support démontable électronique Écran compatible Nokia 5110
(afficheur LCD 84x48 pixels pilotable en SPI)

Code exemple #3 : afficher une image (ou plusieurs, n’importe où à l’écran)

À présent, voyons comment afficher une image sur l’écran compatible Nokia 5110 via Arduino. Ainsi, vous saurez tout faire (ou presque !).

Ici, nous allons simplement utiliser la fonction drawBitmap(), de la librairie PCD8544 de chez Adafruit. Cette fonction s’utilise de la manière suivante : « drawBitmap(X, Y, image_a_afficher, largeur, hauteur, couleur) ». Avec :

  • X et Y les coordonnées à partir desquelles l’image doit être affichée
  • « image_a_afficher », un tableau de données, exprimé dans un format particulier, contenant au final des infos sur chacun des pixels composant l’image (=1 si pixel doit être allumé, et =0 si pixel doit être éteint)
  • largeur et hauteur, exprimant en fait la taille de l’image à afficher
  • et couleur, indiquant si l’image doit être affichée en BLACK (noir) ou WHITE (transparent ; très utile si le fond est noir !)

Nota : on peut bien évidemment afficher autant d’image que l’on souhaite à l’écran, en sachant que si des pixels se superposent, ce sont ceux de la dernière image qui « l’emporteront » !

Maintenant, me direz-vous : en pratique, comment faire pour afficher une image au format JPG, PNG, BMP, ou autre, sur un écran Nokia 5110 avec Arduino ? Car si vous avez bien suivi, nous aurons besoin d’un « tableau de données » correspondant à l’image à afficher.

Pour cela, nous utiliserons une petite application web, pour la conversion. Pour ma part, j’utilise le site en ligne https://javl.github.io/image2cpp/ pour faire cette transformation « fichier image » en « tableau de données arduino » ; je vous l’avais d’ailleurs déjà présenté dans un autre article, sur comment afficher une image sur un écran OLED i2c avec arduino.

Par exemple, prenons le logo du site passionelectronique.fr (au format 48×48 pixels, pour qu’il puisse rentrer dans notre écran LCD de 84×48 pixels !) :

Logo passion électronique 48x48, site passionelectronique.fr, pour transformation en code arduino pour aller dans programme exemple

Ici, il s’agit d’un fichier JPEG (extension .JPG). Pour le transformer en « code arduino », comme je vous le disais, il suffit d’aller sur le site « image2cpp ». En premier, il faut uploader ce logo JPG sur le site image2cpp (ce que j’ai fait, en cliquant sur « Sélect. fichiers », puis en allant chercher le fichier en question).

Utilisation du site image2cpp pour transformation fichier image JPG BMP PNG ou autre en code arduino programmé en mémoire, démo lcd screen

À noter que je n’ai touché aucun paramètre de la partie 2 du site (« Image Settings »), à l’exception de la case à cocher « Invert image colors » (comme visible ci-dessus). Ceci n’est pas évident à comprendre de prime abord, mais en optant pour une image blanche sur fond noir, cela nous permettra d’afficher une image noire sur fond transparent ; en fait, c’est juste une histoire d’interprétation des données (ne vous prenez pas la tête si vous ne comprenez pas ce point, dans l’immédiat !).

Du reste, sur la partie 4 du site (« Output »), j’ai sélectionné l’option « Arduino code, single bitmap » dans la première liste déroulante, et ai vidé le champ « Identifier/Prefix » (comme visible ci-dessous). Et en cliquant tout en bas sur « Generate code », j’ai pu obtenir le fameux « tableau de données arduino » (qui correspond donc à l’image à afficher, mais codé d’une façon particulière, que la fonction drawBitmap de notre librairie saura interpréter).

Exemple de code image2cpp pour affichage image sur écran piloté par arduino, version single bitmap avec tableau PROGMEM de valeurs

On retrouvera donc ces données dans le code arduino qui suit (avec un renommage de la variable-tableau au passage, de « NaN » à « image_a_afficher », pour que ce soit plus parlant !). En parlant du code, d’ailleurs, le voici :

/*
   ______               _                  _///_ _           _                   _
  /   _  \             (_)                |  ___| |         | |                 (_)
  |  [_|  |__  ___  ___ _  ___  _ __      | |__ | | ___  ___| |_ _ __ ___  _ __  _  ___  _   _  ___
  |   ___/ _ \| __|| __| |/ _ \| '_ \_____|  __|| |/ _ \/  _|  _| '__/   \| '_ \| |/   \| | | |/ _ \
  |  |  | ( ) |__ ||__ | | ( ) | | | |____| |__ | |  __/| (_| |_| | | (_) | | | | | (_) | |_| |  __/
  \__|   \__,_|___||___|_|\___/|_| [_|    \____/|_|\___|\____\__\_|  \___/|_| |_|_|\__  |\__,_|\___|
                                                                                      | |
                                                                                      \_|
  Fichier :       prgArduino-3-AfficherUneImage.ino
  
  Description :   Programme permettant d'afficher une image sur un écran compatible Nokia 5110 (PCD8544),
                  avec un Arduino Nano, via un convertisseur de niveau logique à 8 canaux (TXS0108E)
                  
  Remarques :     - la librairie utilisée ici sera la PCD8544 d'Adafruit (https://github.com/adafruit/Adafruit-PCD8544-Nokia-5110-LCD-library)
                  - la conversion "JPG" → "code arduino" de l'image sera fait depuis le site "image2cpp" (https://javl.github.io/image2cpp/)
                                    
  Auteur :        Jérôme TOMSKI (https://passionelectronique.fr/)
  Créé le :       06.12.2023

*/

// Inclusion de la librairie PCD8544 de Adafruit
#include <Adafruit_PCD8544.h>

// Définition des broches de raccordemenet Arduino ↔ convertisseur ↔ écranNokia
#define brocheD3_arduino_vers_brocheLIGHT_ecranNokia  3
#define brocheD4_arduino_vers_brocheCLK_ecranNokia    4
#define brocheD5_arduino_vers_brocheDIN_ecranNokia    5
#define brocheD6_arduino_vers_brocheDC_ecranNokia     6
#define brocheD7_arduino_vers_brocheCE_ecranNokia     7
#define brocheD8_arduino_vers_brocheRST_ecranNokia    8

// Instanciation de cette librairie, de telle sorte : "Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);"
Adafruit_PCD8544 ecranNokia5110 = Adafruit_PCD8544(brocheD4_arduino_vers_brocheCLK_ecranNokia, brocheD5_arduino_vers_brocheDIN_ecranNokia, brocheD6_arduino_vers_brocheDC_ecranNokia, brocheD7_arduino_vers_brocheCE_ecranNokia, brocheD8_arduino_vers_brocheRST_ecranNokia);

// Image à afficher
const unsigned char image_a_afficher [] PROGMEM = {
  // 'logo_pse_nb_48x48, 48x48px
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x38, 0x08, 0x00, 0x00, 0x00, 0x00, 0x19, 0x88, 0x00, 0x00, 0x00, 0x00, 0x19, 0x89, 0xc0, 0x00, 
  0x00, 0x01, 0x19, 0x89, 0xc0, 0x00, 0x00, 0x01, 0x99, 0x89, 0x80, 0x00, 0x00, 0x01, 0x99, 0x89, 
  0x80, 0x00, 0x00, 0x01, 0x19, 0x88, 0x80, 0x00, 0x00, 0x01, 0x99, 0x89, 0x80, 0x00, 0x00, 0x03, 
  0xff, 0xff, 0xc0, 0x40, 0x03, 0xf2, 0x00, 0x00, 0x4f, 0xe0, 0x03, 0xfa, 0x00, 0x02, 0x5f, 0xf0, 
  0x00, 0x02, 0x00, 0x03, 0x60, 0x40, 0x00, 0x02, 0x00, 0x03, 0x60, 0x00, 0x07, 0xfa, 0x1f, 0xf8, 
  0x48, 0x60, 0x07, 0xf2, 0x30, 0x0c, 0x5f, 0xf8, 0x00, 0x02, 0x30, 0x0c, 0x60, 0x00, 0x00, 0x02, 
  0x30, 0x0c, 0x60, 0x00, 0x3c, 0xf2, 0x30, 0x0c, 0x4b, 0x80, 0x3f, 0xfa, 0x30, 0x0c, 0x5f, 0x80, 
  0x38, 0x02, 0x30, 0x0c, 0x63, 0x80, 0x00, 0x02, 0x30, 0x0c, 0x60, 0x00, 0x00, 0x02, 0x30, 0x04, 
  0x60, 0x00, 0x00, 0xfa, 0x30, 0x0c, 0x5f, 0xe0, 0x00, 0x12, 0x1f, 0xf8, 0x68, 0x00, 0x00, 0x06, 
  0x00, 0x00, 0x60, 0x00, 0x03, 0x02, 0x00, 0x00, 0x40, 0x00, 0x07, 0xfa, 0x00, 0x00, 0x5f, 0x80, 
  0x03, 0x83, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x01, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x01, 0x91, 0x89, 0x80, 0x00, 0x00, 0x01, 0x91, 0x89, 0x80, 0x00, 0x00, 0x01, 
  0x91, 0x89, 0x80, 0x00, 0x00, 0x01, 0xb9, 0x99, 0x80, 0x00, 0x00, 0x01, 0xbd, 0x89, 0x80, 0x00, 
  0x00, 0x01, 0xb9, 0x88, 0x80, 0x00, 0x00, 0x01, 0x81, 0x81, 0xc0, 0x00, 0x00, 0x01, 0x01, 0x81, 
  0xc0, 0x00, 0x00, 0x00, 0x01, 0x81, 0x80, 0x00, 0x00, 0x00, 0x01, 0x80, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};

// ========================
// Initialisation programme
// ========================
void setup() {

  // Initialisation de la liaison série (PC <-> Arduino Nano), juste en cas de besoin, au niveau débug
  Serial.begin(9600);
  Serial.println(F("================================================================="));
  Serial.println(F("Exemple #3 : afficher une image sur l'écran compatible Nokia 5110"));
  Serial.println(F("================================================================="));
  Serial.println("");

  // Allumage du rétroéclairage de l'écran
  pinMode(brocheD3_arduino_vers_brocheLIGHT_ecranNokia, OUTPUT);
  digitalWrite(brocheD3_arduino_vers_brocheLIGHT_ecranNokia, LOW);

  // Écran Nokia 5110
	ecranNokia5110.begin();             // Initialisation
  ecranNokia5110.setContrast(56);     // Changement du contraste (entre 0 et 127)   → à ajuster soi-même, au besoin
  ecranNokia5110.setBias(4);          // Changement du biais (entre 0 et 7)         → à ajuster soi-même, au besoin
  delay(500);

  // Affichage de l'image sur l'écran
  ecranNokia5110.clearDisplay();
  ecranNokia5110.drawBitmap(18, 0, image_a_afficher, 48, 48, BLACK);        // drawBitmap(posX, posY, tableau_code_image, largeur, hauteur, couleur);
  ecranNokia5110.display();
  
}


// =================
// Boucle principale
// =================
void loop() {

  // Rien ici … !
  // (tout se passe dans la partie "setup", en fait !)
  
}

Je pense que ce code se passe de commentaires supplémentaires, étant donné le peu de ligne qu’il y a, comparé aux 2 programmes exemples précédents 😉

Remarque : là encore, le Serial.begin() et Serial.println() figurant dans le code ne servent à rien, au final (vous pouvez donc les ignorer !). Perso, ils me servent pour faire du debug, tout simplement !

Si tout se passe bien, voici ce que vous devriez voir s’afficher à l’écran :

Nota : oui, ça pixelise pas mal sur un aussi petit écran, de 84 x 48 pixels ! Ne pensez donc pas afficher de beaux chef d’œuvre, sur cet écran compatible Nokia 5110 😉

Liens utiles

Au besoin, vous pourrez retrouver les codes exemples précédents sur GitHub, à l’adresse suivante : https://github.com/JeromeTGH/Programmes-autour-de-l-ecran-Nokia-5110/.

Du reste, au niveau des composants utilisés, on retrouve :

Et pour alimenter le tout en extérieur, je me suis servi de ma petite alim USB portable fait-maison, à base d’accu Li-ion 18650.

Module Description Lien
Afficheur compatible nokia 5110 écran LCD monochrome avec headers à souder pour maintien sur support démontable électronique Écran compatible Nokia 5110
(afficheur LCD 84x48 pixels pilotable en SPI)

Ecran Nokia 5110 : conclusion !

Nous voici au terme de cet article d’introduction à l’afficheur compatible Nokia 5110 ! J’espère que ceci vous aura plu, même si ce genre d’écran LCD monochrome, faisant seulement 84 x 48 pixels est largement dépassé, de nos jours (sauf côté consommation, peut-être !).

Du reste, je vous partagerai prochainement la réalisation d’un petit voltmètre fait maison utilisant cette écran, ainsi, vous verrez un exemple d’utilisation pratique 😉

À très bientôt,
Jérôme.

À découvrir aussi : un Testeur de Servomoteur Arduino, pour apprendre l’électronique tranquillement !

Ce contenu vous plaît ? Alors abonnez-vous à la Newsletter pour ne rien louper !

(*) Mis à jour le 18/01/2024

7 commentaires sur “Tutorial Ecran Nokia 5110 : un afficheur monochrome 84×48 pixels (puce PCD8544), pilotable via Arduino !”

  1. Site passionelectronique.fr

    Bonjour Jérôme.

    Un grand merci pour cet excellent article (nickel comme toujours).
    Mais quelle est l’utilité de cette résistance de 10k ? (elle consomme 330µA en permanence).

    Au plaisir de te lire et relire. Jihelb

    1. Site passionelectronique.fr

      Salut !

      Concernant la résistance 10k sur la ligne OE du convertisseur, je dirais que c’est du zèle. En fait, elle figure sur le datasheet de Texas Instrument, qui préconise de la mettre en place (pour garantir un état de haute impédance en sortie de convertisseur, lors de la mise sous et hors tension).

      Dans notre cas, je dirais qu’on peut parfaitement s’en passer. Car si l’afficheur affiche n’importe quoi au démarrage ou à l’extinction de l’alim, ce n’est pas si grave (car entre ces phases éphémères, l’affichage sera nickel, d’autant plus qu’il sera rafraîchi très régulièrement).

      En espérant avoir bien répondu à ta question !

      Bonne journée à toi,
      Jérôme.

  2. Site passionelectronique.fr

    Bonjour.

    Un grand merci pour tes tutos clairs et efficaces.

    Que signifient contrast et bias et quel est leur effet (fonctions setContrast et setBias) ? J’ai une petite idée pour contrast mais pas pour bias !
    J’ai envie de les contrôler par 2 potentiomètres à côté de l’écran.

    Merci par avance de ta réponse.

    1. Site passionelectronique.fr

      Salut Jean !

      Alors :
      – « contrast » (valeur réglable de 0 à 127) sert à gérer le contraste des pixels à l’écran, comme tu t’en doutais 😉
      – et « bias » (valeur réglable de 0 à 7), d’après ce que j’ai compris et sauf erreur de ma part, conditionne la tension d’alimentation du panneau LCD interne (et impacte donc le contraste de l’afficheur, en modulant sa consommation électrique)

      Par contre, pour info, j’ai essayé tout un tas de valeurs différentes pour le contrast et le bias, sans réellement constater de différences d’affichage, de mon côté ; c’est pourquoi j’ai laissé une valeur fixe et médiane, dans mes programmes (ce qui convient d’ailleurs très bien, en pratique).

      Cela étant dit, mon modèle d’afficheur est peut-être particulier, et cela pourrait peut-être être différent d’un fabricant à l’autre … à voir, en faisant d’autres essais !

      Voilà ! Très bonne journée à toi,
      Jérôme.

  3. Site passionelectronique.fr

    Merci de ta réponse Jérôme.
    J’ai fait les mêmes essais et j’ai abouti aux mêmes constatations que toi.

    Cordialement.
    Jean.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Symbole danger point d'exclamation site PSE, triangle jaune avec contour noir, texte noir alerte au milieuAfin de filtrer au maximum les messages de type "spam" ou "inappropriés", chaque commentaire est soumis à modération, et validé manuellement. Du coup, il se peut que certains commentaires ne soient pas publiés, ou sinon, avec un peu de retard. Par ailleurs, j'ai malheureusement plus de messages à traiter que de temps pour y répondre ; c'est pourquoi je ne pourrais pas répondre à tout le monde. Désolé …