Vous êtes sur la page 1sur 35

Interface Écran LCD graphique

Nokia 5110 avec Arduino

Vous vous souvenez de l'époque pré-iPhone où les téléphones portables


avaient des boutons et que vous ne touchiez ce petit écran noir et blanc que si
vous aviez besoin de le nettoyer? Nokia a utilisé ces petits écrans LCD dans
ses téléphones portables 3310 et 5110.

Au fur et à mesure que la technologie évoluait, ces écrans trouvaient enfin leur
nouvelle place dans le monde du bricolage. Bientôt, ils sont devenus
populaires parmi les amateurs car ces écrans sont petits (environ 1,5 ″), peu
coûteux, faciles à utiliser, assez peu puissants et peuvent afficher du texte
ainsi que des bitmaps.

Pilote LCD PCD8544


Au cœur du module se trouve un puissant contrôleur de pilote LCD CMOS à
faible puissance à puce unique de Philips - PCD8544 .

La puce est conçue pour piloter un affichage graphique de 84 × 48 pixels. Il


s'interface avec les microcontrôleurs via une interface de bus série similaire à
SPI.

Grâce à la polyvalence du contrôleur PCD8544, il inclut la génération sur puce


d'alimentation LCD et de tensions de polarisation, ce qui se traduit par une
faible consommation d'énergie, ce qui le rend adapté aux applications
sensibles à l'alimentation. Dans un état normal, l'écran LCD ne consomme que
6 à 7 mA.

Selon la fiche technique, cette puce fonctionne dans la plage de 2,7 à 3,3 V et a
des niveaux de communication 3v. Ainsi, pour tout microcontrôleur logique 5V
comme Arduino, une sorte de décalage de niveau logique est nécessaire
(sinon, l'affichage peut être endommagé).

LCD rétro-éclairage
L'écran LCD est également livré avec un rétroéclairage de différentes couleurs,
à savoir. Rouge, vert, bleu et blanc.

Le rétroéclairage n'est rien d'autre que quatre LED espacées sur les bords de
l'écran.

Si vous souhaitez modifier le rétroéclairage de l'écran LCD, retirez simplement


l'écran LCD de la carte en poussant les clips métalliques à l'arrière. Lorsque
l'écran s'éteint, vous remarquerez les quatre LED soudées sur les bords de
l'écran. Remplacez simplement les LED par des LED de couleur souhaitée.

Avertissement:

Il existe de nombreuses versions de ces écrans LCD qui ne sont livrées avec
aucune résistance de limitation de courant. Cela signifie que vous devez être
prudent lors de la connexion de l'alimentation électrique. Par mesure de
précaution, vous pouvez placer une résistance de limitation de courant de 330
Ω en série avec la broche «Rétroéclairage».
Carte mémoire LCD du Nokia 5110
Le pilote LCD PCD8544 possède une RAM de données d'affichage
graphique (GDDRAM) intégrée de 504 octets pour l'écran contenant le motif de
bits à afficher. Cette zone mémoire est organisée en 6 banques (de 0 à
5). Chaque banque contient 84 colonnes / segments (de 0 à 83). Et chaque
colonne peut stocker 8 bits de données (de 0 à 7). Cela nous dit sûrement que
nous avons

6 banques x 84 segments x 8 bits de données = 4032 bits = 504 octets

L'ensemble de la carte mémoire avec les banques, les segments et les


données est mis en évidence ci-dessous.

Chaque bit représente un pixel particulier sur l'écran qui peut être activé ou
désactivé par programme.

Voici les spécifications complètes:

Technologie d'affichage Écran LCD à matrice de points

Interface MCU SPI

Taille de l'écran 1,5 pouces de diamètre

Résolution 84 × 48 pixels

Tension de fonctionnement 2,7 V à 3,3 V


Courant de fonctionnement 50 mA max

Angle de vue 180 °

Brochage du module d'affichage LCD Nokia


5110
Avant de plonger dans le branchement et les exemples de code, examinons
d'abord son brochage.

RSTla broche réinitialise l'affichage. C'est une signification de broche basse


active; vous pouvez réinitialiser l'affichage en le tirant vers le bas. Vous pouvez
également connecter cette broche à la réinitialisation Arduino afin qu'elle
réinitialise automatiquement l'écran.
CE (puce activée)broche est utilisée pour sélectionner l'un des nombreux
périphériques connectés partageant le même bus SPI. C'est aussi une broche
basse active.
D / C (données / commande) pin indique à l'écran si les données qu'il reçoit sont
une commande ou des données affichables.
VACARME est une broche de données série pour l'interface SPI.
CLK est une broche d'horloge série pour l'interface SPI.
VCC broche alimente l'écran LCD que nous connectons à la broche 3,3 V volts
de l'Arduino.
BL (rétroéclairage)pin contrôle le rétroéclairage de l'écran. Pour contrôler sa
luminosité, vous pouvez ajouter un potentiomètre ou connecter cette broche à
n'importe quelle broche Arduino compatible PWM.
GND doit être connecté à la terre d'Arduino

Câblage du module d'affichage LCD Nokia


5110 à Arduino Uno
Avant de télécharger le code et d'envoyer des données à l'écran, connectons
l'écran à l'Arduino.

Les connexions sont assez simples. Au fur et à mesure que nous


implémentons le logiciel SPI, nous avons des options de broches
flexibles. Vous pouvez connecter des broches de transmission de données à
n'importe quelle broche d'E / S numériques. Dans notre cas, l'horloge série
(CLK), les données série (DIN), les données / commande (DC), l'activation de la
puce (CE) et les broches de réinitialisation (RST) sont connectées de la broche
7 à la broche 3 sur Arduino.

Mais malheureusement, l'écran LCD a des niveaux de communication 3v, nous


ne pouvons donc pas connecter directement ces broches à l'Arduino. Nous
avons besoin d'une certaine protection. Cela peut être fait en changeant les
niveaux.

L'un des moyens les plus économiques et les plus simples de changer de
niveau consiste à ajouter des résistances en ligne avec chaque broche de
transmission de données. Ajoutez simplement des résistances de 10 kΩ entre
les broches CLK, DIN, D / C et RST et une résistance de 1 kΩ entre CE.
Enfin, la broche du rétroéclairage (BL) est connectée à 3,3 V via une résistance
de limitation de courant de 330 Ω. Vous pouvez ajouter un potentiomètre ou
connecter cette broche à n'importe quelle broche Arduino compatible PWM, si
vous souhaitez contrôler sa luminosité.

Le diagramme suivant vous montre comment tout câbler.

Câblage du module LCD Nokia 5110 avec Arduino UNO

Avec cela, vous êtes maintenant prêt à télécharger du code et à imprimer


l'écran.

Installation de la bibliothèque pour le module


LCD Nokia 5110
Le contrôleur LCD PCD8544 possède des pilotes flexibles mais
complexes. Une connaissance approfondie de l'adressage de la mémoire est
nécessaire pour utiliser le contrôleur PCD8544. Heureusement, la bibliothèque
LCD PCD8544 Nokia 5110 d'Adafruit a été écrite pour cacher toutes les
complexités afin que nous puissions émettre des commandes simples pour
contrôler l'affichage.
Pour installer la bibliothèque, accédez à Sketch> Inclure la bibliothèque> Gérer
les bibliothèques… Attendez que Library Manager télécharge l'index des
bibliothèques et met à jour la liste des bibliothèques installées.

Filtrez votre recherche en tapant «nokia». Il devrait y avoir quelques


entrées. Recherchez la bibliothèque LCD Adafruit PCD8544 Nokia
5110. Cliquez sur cette entrée, puis sélectionnez Installer.
Cette bibliothèque est une bibliothèque spécifique au matériel qui gère les
fonctions de niveau inférieur. Il doit être associé à la bibliothèque Adafruit GFX
pour afficher des primitives graphiques comme des points, des lignes, des
cercles, des rectangles, etc. Installez également cette bibliothèque.
Bien que le PCD8544 dispose d'une GDDRAM intégrée pour l'écran, nous ne
pouvons pas en lire le contenu. Par conséquent, il n'est pas possible de
manipuler le tampon d'écran pour effectuer des opérations mathématiques.

Comme alternative, la bibliothèque alloue 504 octets de mémoire de


ATmega328P comme tampon. Ainsi, il peut manipuler le tampon d'écran, puis
effectuer un transfert en masse de la mémoire de l'ATmega328P vers la
mémoire interne du contrôleur PCD8544.

Code Arduino - Affichage du texte


Maintenant vient les choses intéressantes!

Le croquis de test suivant imprimera "Hello World!" message sur l'écran. Il


comprend également

 Affichage du texte inversé

 Affichage des nombres

 Affichage des nombres avec la base (Hex, Dec)

 Affichage des symboles ASCII

 Rotation du texte

Cela vous donnera une compréhension complète de l'utilisation de l'écran LCD


du Nokia 5110 et peut servir de base à des expériences et des projets plus
pratiques. Essayez le croquis et nous le disséquerons en détail.

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

// Declare LCD object for software SPI


// Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);
Adafruit_PCD8544 display = Adafruit_PCD8544(7, 6, 5, 4, 3);

int rotatetext = 1;

void setup() {
Serial.begin(9600);

//Initialize Display
display.begin();

// you can change the contrast around to adapt the display for the
best viewing!
display.setContrast(57);

// Clear the buffer.


display.clearDisplay();

// Display Text
display.setTextSize(1);
display.setTextColor(BLACK);
display.setCursor(0,0);
display.println("Hello world!");
display.display();
delay(2000);
display.clearDisplay();

// Display Inverted Text


display.setTextColor(WHITE, BLACK); // 'inverted' text
display.setCursor(0,0);
display.println("Hello world!");
display.display();
delay(2000);
display.clearDisplay();

// Scaling Font Size


display.setTextColor(BLACK);
display.setCursor(0,0);
display.setTextSize(2);
display.println("Hello!");
display.display();
delay(2000);
display.clearDisplay();

// Display Numbers
display.setTextSize(1);
display.setCursor(0,0);
display.println(123456789);
display.display();
delay(2000);
display.clearDisplay();

// Specifying Base For Numbers


display.setCursor(0,0);
display.print("0x"); display.print(0xFF, HEX);
display.print("(HEX) = ");
display.print(0xFF, DEC);
display.println("(DEC)");
display.display();
delay(2000);
display.clearDisplay();

// Display ASCII Characters


display.setCursor(0,0);
display.setTextSize(2);
display.write(3);
display.display();
delay(2000);
display.clearDisplay();

// Text Rotation
while(1)
{
display.clearDisplay();
display.setRotation(rotatetext); // rotate 90 degrees counter
clockwise, can also use values of 2 and 3 to go further.
display.setTextSize(1);
display.setTextColor(BLACK);
display.setCursor(0,0);
display.println("Text Rotation");
display.display();
delay(1000);
display.clearDisplay();
rotatetext++;
}
}

void loop() {}

L'esquisse commence par inclure trois bibliothèques à savoir. SPI.h,


Adafruit_GFX.h et Adafruit_PCD8544.h. Ensuite, nous devons créer un objet
LCD. Cet objet prend 5 paramètres et spécifie quelles broches Arduino sont
connectées aux broches CLK, Din, D / C, CE et RST de l'écran LCD. Nous avons
également défini une rotatetextvariable qui aura du sens un peu plus tard.

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

// Initialize LCD object for software SPI


// Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);
Adafruit_PCD8544 display = Adafruit_PCD8544(7, 6, 5, 4, 3);

int rotatetext = 1;

Dans la fonction de configuration: nous devons initialiser l'objet LCD à l'aide de


la begin()fonction. Nous devons également régler le contraste de l'affichage à
l'aide de la setContrast(value)fonction avec une valeur pouvant être comprise
entre 0 et 100. Cependant, une valeur comprise entre 50 et 60 donne
d'excellents résultats.

Ensuite, nous effaçons la mémoire tampon avant d'imprimer notre premier


message à l'écran.

//Initialize Display
display.begin();

// you can change the contrast around to adapt the display for the best
viewing!
display.setContrast(57);

// Clear the buffer.


display.clearDisplay();

Affichage de texte simple (Hello World)


// Display Text
display.setTextSize(1);
display.setTextColor(BLACK);
display.setCursor(0,0);
display.println("Hello world!");
display.display();
delay(2000);
display.clearDisplay();

Pour afficher du texte à l'écran, nous devons définir la taille de la police. Cela


peut être fait en appelant setTextSize()et en passant la taille de la police (à
partir de 1) comme paramètre.

Ensuite, nous devons définir la couleur de la police en appelant la


fonction setTextColor(). Passez le paramètre BLACK pour le fond sombre et
passez WHITE pour un fond clair. Maintenant, avant d'imprimer le message,
nous devons définir la position du curseur en appelant la
fonction setCursor(X,Y).

Les pixels à l'écran sont adressés par leurs coordonnées horizontales (X) et
verticales (Y). Le système de coordonnées place l'origine (0,0) dans le coin
supérieur gauche, avec X positif augmentant vers la droite et Y positif
augmentant vers le bas.

Nous pouvons utiliser simple print(" ")ou println(" ")fonction pour imprimer


le message à l'écran, tout comme nous imprimons des données sur un
moniteur série. Rappelez-vous, println()déplacera le curseur sur la nouvelle
ligne.
Pour que la bibliothèque effectue des opérations mathématiques
extrêmement rapides sur le tampon d'écran (plus de 100 images par seconde),
les appels aux fonctions d'impression ne transfèrent pas immédiatement le
contenu du tampon d'écran vers le contrôleur
PCD8544. Une display()commande est requise pour indiquer à la bibliothèque
d'exécuter le transfert en bloc de la mémoire tampon d'écran de
l'ATmega328P vers la mémoire interne du contrôleur PCD8544. Dès que la
mémoire est transférée, les pixels correspondant à la mémoire tampon de
l'écran s'affichent sur l'écran LCD.

Affichage du texte inversé

// Display Inverted Text


display.setTextColor(WHITE, BLACK);
display.setCursor(0,0);
display.println("Hello world!");
display.display();
delay(2000);
display.clearDisplay();

Pour afficher du texte inversé, nous appellerons


à setTextColor(FontColor,BackgroundColor) nouveau la fonction. Si vous faites
attention, vous savez que nous n'avons passé qu'un seul paramètre à cette
fonction auparavant, mais maintenant nous passons deux paramètres. Cela
est possible en raison de quelque chose appelé surcharge de fonction . La
surcharge de fonctions est la possibilité de créer plusieurs fonctions du même
nom mais avec un ensemble de paramètres différent. Les appels à une
fonction surchargée exécuteront une implémentation spécifique de cette
fonction en fonction des paramètres passés.

Dans notre cas, le passage setTextColor(BLACK, WHITE)rendra le texte noir sur


fond rempli.

Mise à l'échelle de la taille de la police

// Scaling Font Size


display.setTextColor(BLACK);
display.setCursor(0,0);
display.setTextSize(2);
display.println("Hello!");
display.display();
delay(2000);
display.clearDisplay();

Plus tôt dans ce didacticiel, nous avons appelé setTextSize()function pour


définir la taille de la police et avons passé 1 comme paramètre. Vous pouvez
utiliser cette fonction pour mettre à l'échelle la police en passant n'importe
quel entier non négatif.

Les caractères sont rendus dans un rapport de 5: 7. Cela signifie que passer la
taille de police 1 rendra le texte à 5 × 7 pixels par caractère; passer 2 rendra le
texte à 10 × 14 pixels par caractère et ainsi de suite.

ASTUCE
La bibliothèque Adafruit_GFX est responsable du rendu de la police. Par
défaut, la police à espacement unique est sélectionnée. Cependant, des
versions plus récentes de la bibliothèque Adafruit GFX offrent la possibilité
d'utiliser des polices alternatives. Plusieurs polices alternatives sont fournies
avec la bibliothèque, et il est possible d'en ajouter de nouvelles.

Affichage des nombres

// Display Numbers
display.setTextSize(1);
display.setCursor(0,0);
display.println(123456789);
display.display();
delay(2000);
display.clearDisplay();

Les nombres peuvent être affichés sur l'écran LCD en appelant


simplement print()ou en println()fonctionnant. Une implémentation
surchargée de ces fonctions accepte des entiers non signés 32 bits, vous ne
pouvez donc afficher que les nombres de 0 à 4 294 967 295.

Spécification de la base pour les nombres


// Specifying Base For Numbers
display.setCursor(0,0);
display.print("0x"); display.print(0xFF, HEX);
display.print("(HEX) = ");
display.print(0xFF, DEC);
display.println("(DEC)");
display.display();
delay(2000);
display.clearDisplay();

Les fonctions print()& println()ont un deuxième paramètre facultatif qui


spécifie la base (format) à utiliser; les valeurs autorisées sont BIN (binaire ou
base 2), OCT (octal ou base 8), DEC (décimal ou base 10), HEX (hexadécimal
ou base 16). Pour les nombres à virgule flottante, ce paramètre spécifie le
nombre de décimales à utiliser. Par example:

 print (78, BIN) donne «1001110»

 print (78, OCT) donne «116»

 print (78, DEC) donne "78"

 print (78, HEX) donne «4E»

 println (1.23456, 0) donne "1"

 println (1.23456, 2) donne "1.23"

 println (1.23456, 4) donne "1.2346"

Affichage des symboles ASCII


// Display ASCII Characters
display.setCursor(0,0);
display.setTextSize(2);
display.write(3);
display.display();
delay(2000);
display.clearDisplay();

Les fonctions print()& println()envoient des données à l'écran sous forme de


texte ASCII lisible par l'homme tandis que la write()fonction envoie des
données binaires à l'écran. Ainsi, vous pouvez utiliser cette fonction pour
afficher des symboles ASCII. Dans notre exemple, l'envoi du numéro 3
affichera le symbole du cœur.

Rotation du texte

// Text Rotation
while(1)
{
display.clearDisplay();
display.setRotation(rotatetext);
display.setTextSize(1);
display.setTextColor(BLACK);
display.setCursor(0,0);
display.println("Text Rotation");
display.display();
delay(1000);
display.clearDisplay();
rotatetext++;
}

Vous pouvez faire pivoter le contenu de l'affichage en appelant


la setRotation()fonction. Il vous permet de visualiser votre écran en mode
portrait ou de le retourner.

La fonction n'accepte qu'un seul paramètre correspondant à 4 rotations


cardinales. Cette valeur peut être n'importe quel entier non négatif
commençant à 0. Chaque fois que vous augmentez la valeur, le contenu de
l'affichage pivote de 90 degrés dans le sens inverse des aiguilles d'une
montre. Par example:

 0 - Maintient l'écran dans l'orientation paysage standard.

 1 - Fait pivoter l'écran de 90 ° vers la droite.

 2 - Retourne l'écran à l'envers.

 3 - Fait pivoter l'écran de 90 ° vers la gauche.

Code Arduino - Dessins de base


Dans cet exemple, nous allons essayer quelques dessins de base. Cette
esquisse montre de nombreuses fonctions de dessin, notamment des
rectangles, des rectangles ronds, des cercles et des triangles. Essayez le
croquis et nous le disséquerons en détail.

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

// Declare LCD object for software SPI


// Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);
Adafruit_PCD8544 display = Adafruit_PCD8544(7, 6, 5, 4, 3);

void setup() {
Serial.begin(9600);

//Initialize Display
display.begin();

// you can change the contrast around to adapt the display for the
best viewing!
display.setContrast(57);

// Clear the buffer.


display.clearDisplay();

// Draw Rectangle
display.drawRect(0, 0, 60, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Filled Rectangle


display.fillRect(0, 0, 60, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Round Rectangle


display.drawRoundRect(0, 0, 60, 40, 8, BLACK);
display.display();
delay(2000);
display.clearDisplay();
//Draw Filled Round Rectangle
display.fillRoundRect(0, 0, 60, 40, 8, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Circle
display.drawCircle(20, 20, 20, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Filled Circle


display.fillCircle(20, 20, 20, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Triangle
display.drawTriangle(20, 0, 0, 40, 40, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Filled Triangle


display.fillTriangle(20, 0, 0, 40, 40, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();
}

void loop() {}

La plupart du code (y compris les bibliothèques et l'initialisation de l'affichage)


est identique à l'exemple de code ci-dessus, à l'exception des extraits de code
suivants pour dessiner des dessins de base.
Rectangle de dessin

// Draw Rectangle
display.drawRect(0, 0, 60, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Filled Rectangle


display.fillRect(0, 0, 60, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();

Vous pouvez dessiner un rectangle sur l'écran en utilisant


la drawRect()fonction. La fonction prend cinq paramètres à savoir. Coordonnée
X, coordonnée Y, largeur, hauteur et couleur. En fait, cette fonction dessine un
rectangle creux avec une bordure de 1 pixel. Vous pouvez dessiner un
rectangle rempli en utilisant la fillRect()fonction.

Dessin d'un rectangle rond


//Draw Round Rectangle
display.drawRoundRect(0, 0, 60, 40, 8, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Filled Round Rectangle


display.fillRoundRect(0, 0, 60, 40, 8, BLACK);
display.display();
delay(2000);
display.clearDisplay();

Vous pouvez dessiner un rectangle rond sur l'écran en utilisant


la drawRoundRect()fonction. Cette fonction prend les mêmes paramètres que
la drawRect()fonction à l'exception d'un paramètre supplémentaire - Rayon
d'arrondi des coins. En fait, cette fonction dessine un rectangle rond creux
avec une bordure de 1 pixel. Vous pouvez dessiner un rectangle rond rempli en
utilisant la fillRoundRect()fonction.

Cercle de dessin
//Draw Circle
display.drawCircle(20, 20, 20, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Filled Circle


display.fillCircle(20, 20, 20, BLACK);
display.display();
delay(2000);
display.clearDisplay();

Vous pouvez dessiner un cercle sur l'écran en utilisant


la drawCircle()fonction. La fonction prend quatre paramètres à
savoir. Coordonnée X du centre, coordonnée Y du centre, rayon et
couleur. Cette fonction dessine un cercle creux avec une bordure de 1
pixel. Vous pouvez dessiner un cercle rempli en utilisant
la fillCircle()fonction.

Triangle de dessin
//Draw Triangle
display.drawTriangle(20, 0, 0, 40, 40, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Filled Triangle


display.fillTriangle(20, 0, 0, 40, 40, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();

Vous pouvez dessiner un triangle sur l'écran en utilisant


la drawTriangle()fonction. La fonction prend sept paramètres à savoir. 3
coordonnées X & Y (x0, y0, x1, y1, x2 & y2) des sommets du triangle et de la
couleur. (X0, y0) représente le sommet supérieur, (x1, y1) représente le
sommet gauche et (x2, y2) représente le sommet droit.

Cette fonction dessine un triangle creux avec une bordure de 1 pixel. Vous


pouvez dessiner un triangle rempli en utilisant la fillTriangle()fonction.

Code Arduino - Affichage du bitmap


Ce dernier exemple montre comment dessiner des images bitmap sur l'écran
LCD du Nokia 5110. Ceci est utile pour créer des écrans de démarrage de
logos d'entreprise, créer des sprites ou simplement créer des graphiques
amusants pour afficher des informations. Copiez le code suivant, collez-le
dans l'IDE Arduino et cliquez sur télécharger.

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

// Declare LCD object for software SPI


// Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);
Adafruit_PCD8544 display = Adafruit_PCD8544(7, 6, 5, 4, 3);

// 'Marilyn Monroe 84x48', 84x48px


const unsigned char MarilynMonroe [] PROGMEM = {
0x00, 0x00, 0x00, 0x7f, 0x00, 0x02, 0xfe, 0xf8, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0xbe, 0x00,
0x00, 0x1f, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20, 0x00,
0x00, 0x3f, 0x80, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0xf0, 0x00, 0x00, 0x1f, 0xe1, 0x80, 0x00,
0x00, 0x00, 0x00, 0x00, 0xc0,
0x00, 0x00, 0x0f, 0xf1, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x0e, 0xd8, 0xe0,
0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0x80, 0x00, 0x07, 0xe0, 0x70,
0x00, 0x00, 0x00, 0x00, 0x03,
0x3f, 0xe0, 0x00, 0x07, 0xf0, 0x78, 0x00, 0x00, 0x00, 0x00, 0x01,
0xe0, 0x70, 0x00, 0x0f, 0xee,
0x7c, 0x00, 0x00, 0x00, 0x00, 0x03, 0xc0, 0x00, 0x00, 0x0f, 0xf7,
0x1c, 0x00, 0x00, 0x00, 0x00,
0x07, 0x80, 0x00, 0x0f, 0xc7, 0xf3, 0x1e, 0x00, 0x00, 0x00, 0x00,
0x07, 0xc0, 0x00, 0x0f, 0xf3,
0xdf, 0x7f, 0x80, 0x00, 0x00, 0x00, 0x07, 0xfe, 0x00, 0x08, 0x7d,
0xef, 0xff, 0xc0, 0x00, 0x00,
0x00, 0x7f, 0xff, 0x80, 0x30, 0x0f, 0xfc, 0xe0, 0xc0, 0x00, 0x00,
0x01, 0x9e, 0x73, 0xc0, 0xe0,
0x07, 0xf8, 0xc1, 0xc0, 0x00, 0x00, 0x03, 0xfc, 0x00, 0x01, 0xc0,
0x0f, 0xfd, 0xe1, 0x80, 0x00,
0x00, 0x03, 0xf8, 0x00, 0x01, 0x9c, 0x0f, 0xff, 0xc1, 0xc0, 0x00,
0x00, 0x02, 0xc0, 0x00, 0x01,
0x9f, 0xbf, 0xfe, 0x01, 0x40, 0x00, 0x00, 0x02, 0x60, 0x00, 0x03,
0x07, 0xef, 0xff, 0x01, 0x40,
0x00, 0x00, 0x00, 0x60, 0x00, 0x07, 0x01, 0xf7, 0xff, 0x80, 0xc0,
0x00, 0x00, 0x00, 0x50, 0x01,
0xdf, 0x00, 0x7f, 0xff, 0x1c, 0x80, 0x00, 0x00, 0x00, 0x40, 0x01,
0xff, 0x00, 0x1f, 0xff, 0x1e,
0xe0, 0x00, 0x00, 0x02, 0x08, 0x00, 0x3f, 0x80, 0x07, 0xef, 0x03,
0xe0, 0x00, 0x00, 0x06, 0x08,
0x00, 0x03, 0xc0, 0x07, 0xdf, 0x07, 0xc0, 0x00, 0x00, 0x06, 0x08,
0x0f, 0x81, 0x80, 0x1f, 0xdf,
0x1f, 0x80, 0x00, 0x00, 0x03, 0x08, 0x1f, 0x98, 0x00, 0x3f, 0xfe,
0x19, 0x80, 0x00, 0x00, 0x18,
0x08, 0x3f, 0xfe, 0x00, 0x7f, 0xfe, 0x3f, 0x00, 0x00, 0x00, 0x08,
0x08, 0x30, 0x3f, 0x00, 0xff,
0xff, 0x3f, 0x00, 0x00, 0x00, 0x01, 0xe0, 0x76, 0x0f, 0x89, 0xff,
0xff, 0x9f, 0x00, 0x00, 0x00,
0x03, 0xe0, 0x7f, 0xc3, 0x81, 0xff, 0xfe, 0x9f, 0x80, 0x00, 0x00,
0x03, 0xf0, 0x7f, 0xf3, 0xc3,
0xff, 0xfe, 0x1f, 0x00, 0x00, 0x00, 0x03, 0xf0, 0x7f, 0xfd, 0xc3,
0xff, 0xfe, 0x5e, 0x00, 0x00,
0x00, 0x03, 0xf0, 0x7f, 0xff, 0xc3, 0xff, 0xf3, 0x1e, 0x00, 0x00,
0x00, 0x03, 0xf0, 0x71, 0xff,
0x87, 0xff, 0xe3, 0xff, 0x00, 0x00, 0x00, 0x07, 0xf0, 0x7c, 0x3f,
0x87, 0xff, 0xe3, 0xfe, 0x00,
0x00, 0x00, 0x0f, 0xf0, 0x3c, 0xff, 0x05, 0xff, 0xf3, 0xfc, 0x00,
0x00, 0x00, 0x0f, 0xf0, 0x0f,
0xfe, 0x09, 0xff, 0xf7, 0xfc, 0x00, 0x00, 0x00, 0x08, 0xf8, 0x01,
0xfc, 0x19, 0xff, 0xff, 0xf8,
0x00, 0x00, 0x00, 0x0c, 0x78, 0x00, 0x00, 0x13, 0xff, 0xff, 0xf8,
0x00, 0x00, 0x00, 0x0e, 0x78,
0x00, 0x00, 0x23, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x0e, 0xf8,
0x00, 0x00, 0x47, 0xff, 0xff,
0xf0, 0x00, 0x00, 0x00, 0x0c, 0xfa, 0x00, 0x01, 0x8f, 0xff, 0xff,
0xe0, 0x00, 0x00, 0x00, 0x08,
0x7b, 0x00, 0x03, 0x3f, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x0c,
0x3b, 0xf8, 0x0f, 0xff, 0xff,
0xff, 0xe0, 0x00, 0x00, 0x00, 0x0f, 0xbb, 0xff, 0xff, 0xff, 0xff,
0xff, 0xf0, 0x00, 0x00, 0x00,
0x07, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00,
0x00, 0x71, 0xff, 0xff, 0xff,
0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x41, 0xff, 0xff, 0xff,
0xff, 0xff, 0xe0, 0x00, 0x00
};

void setup() {
Serial.begin(9600);

//Initialize Display
display.begin();

// you can change the contrast around to adapt the display for the
best viewing!
display.setContrast(57);

// Clear the buffer.


display.clearDisplay();

// Display bitmap
display.drawBitmap(0, 0, MarilynMonroe, 84, 48, BLACK);
display.display();

// Invert Display
//display.invertDisplay(1);
}

void loop() {}

Voici à quoi ressemble la sortie.

Pour afficher l'image bitmap sur l'écran LCD du Nokia 5110, nous devons
appeler la drawBitmap()fonction. Il faut six paramètres à savoir. Coordonnée X
du coin supérieur gauche, coordonnée Y du coin supérieur gauche, tableau
d'octets du bitmap monochrome, largeur du bitmap en pixels, hauteur du
bitmap en pixels et couleur.

Dans notre exemple, l'image bitmap a une taille de 84 × 48. Ainsi, les


coordonnées X et Y sont définies sur 0 tandis que la largeur et la hauteur sont
définies sur 84 et 48.

// Display bitmap
display.drawBitmap(0, 0, MarilynMonroe, 84, 48, BLACK);
display.display();

Mais, avant de pouvoir appeler la drawBitmap()fonction, nous avons d'abord


besoin d'une image à dessiner. N'oubliez pas que la résolution de l'écran LCD
du Nokia 5110 est de 84 × 48 pixels, donc les images plus grandes ne
s'afficheront pas correctement. Pour obtenir une image correctement
dimensionnée, vous pouvez utiliser vos programmes de dessin préférés
comme Inkscape, Photoshop, Paint, etc., en définissant la taille du canevas sur
84 × 48 pixels.

Nous avons pris l'image de Marilyn Monroe en train de rire comme exemple et
l'avons convertie en 84 × 48 pixels à l'aide de Paint et enregistrée au format
.bmp.

Une fois que vous avez un bitmap, il est temps de le convertir en un tableau
que le contrôleur PCD8544 peut comprendre. Cela peut être fait de deux
manières: Méthode en ligne à l'aide de image2cpp et méthode hors ligne à
l'aide de l'assistant LCD.
Générateur de tableaux de bitmap en ligne - image2cpp
Il existe une application en ligne appelée image2cpp
- http://javl.github.io/image2cpp/ qui peut convertir votre image en un
tableau. Image2cpp est plus récent et beaucoup plus puissant que LCD
Assistant (solution ultérieure). Cela vous permettra de:

 Convertissez plusieurs images simultanément.

 Mettre à l'échelle votre fichier image - Étirer / Ajuster à la taille / Original

 Ajustez le seuil de luminosité entre le noir et le blanc.

 Recentrer l'image verticalement et / ou horizontalement.

 Inverser les couleurs de l'image

Cet outil est si puissant qu'il peut également fonctionner hors


ligne. Enregistrez simplement la page sur votre PC et ouvrez-la dans votre
navigateur. Merci à Jasper van Loenen pour son excellente contribution.

Pour commencer, ouvrez image2cpp dans votre navigateur et sélectionnez


n'importe quelle image que vous souhaitez afficher à l'écran.

Les dimensions de votre image s'afficheront dans l'option Taille du canevas


sous Paramètres de l'image. Si vous avez sélectionné une image plus grande
que 84 × 48, changez-la en 84 × 48 et sélectionnez l'option de mise à l'échelle
appropriée. Vous pouvez afficher la sortie dans la section Aperçu.

Vous pouvez modifier la couleur d'arrière-plan ou inverser les couleurs de


l'image si nécessaire.

Enfin, modifiez l'option la plus importante - Seuil de luminosité selon vos


besoins. Le réglage du seuil rendra les pixels au-dessus de ce niveau blancs et
inférieurs au noir. Dans notre cas, nous l'avons réglé à 171 pour obtenir de jolis
détails sur Marilyn Monroe.

Ce petit aperçu reflète les modifications que vous apportez à vos


paramètres. Vous pouvez modifier les paramètres tout en gardant un œil
dessus.

Une fois que vous êtes satisfait du résultat, vous pouvez continuer à générer le
tableau de données. Sélectionnez simplement le format de sortie du code en
tant que code Arduino et cliquez sur le bouton Générer le code.

Juste pour votre information, il existe une option appelée mode Dessin. Il crée
en fait une image selon le modèle de numérisation de l'affichage. Si votre
image semble tout foirée sur votre écran, essayez de changer de mode.
C'est ça. Le tableau d'octets de votre bitmap sera généré. Vous pouvez utiliser
la sortie directement avec notre exemple de code. Assurez-vous simplement
de le nommer de manière appropriée. Appelez ensuite votre tableau dans
la drawBitmap()fonction.

Générateur de tableaux bitmap hors ligne - Assistant


LCD
Il existe une autre application appelée assistant LCD
- http://en.radzio.dxp.pl/bitmap_converter/ qui peut convertir votre image
bitmap en tableau de données. Ce n'est pas aussi puissant que image2cpp
mais toujours populaire parmi les amateurs.

Pour commencer, vous devez convertir votre image en bitmap monochrome


84 × 48 1 bit. Vous pouvez utiliser vos programmes de dessin préférés comme
Inkscape, Photoshop, Paint, etc. pour le faire, tout comme nous l'avons fait
dans MS Paint.

Ouvrez votre fichier dans MS Paint et redimensionnez-le à 84 × 48.

Maintenant, enregistrez votre fichier en tant que bitmap. Lors de


l'enregistrement du fichier, choisissez Enregistrer sous le type: Bitmap
monochrome (*. Bmp; *. Dib). Cela générera une image bitmap 1 bit / binaire
qui n'a que deux valeurs possibles pour chaque pixel, à savoir 0 (noir) ou 1
(blanc).
Le seul inconvénient est que vous ne pouvez pas définir le niveau de seuil de
luminosité. Il est réglé sur 50% par défaut et ne peut pas être modifié.

Quoi qu'il en soit maintenant, téléchargez le programme d'assistant


LCD. Ouvrez l'exécutable et chargez votre bitmap à partir du menu Fichier.
Il n'y a rien que vous puissiez faire avec cet outil. Alors, allez simplement dans
le menu Fichier et cliquez sur l'option Enregistrer la sortie. Enregistrez le fichier
en tant que fichier texte.

Juste pour votre information, il existe une option appelée Byte Orientation. Il
crée en fait une image selon le modèle de numérisation de l'affichage. Si votre
image semble tout foirée sur votre écran, essayez de changer de mode.

C'est ça. Une fois votre tableau créé, collez-le dans votre code. Assurez-vous
simplement de le nommer de manière appropriée. Appelez ensuite votre
tableau dans la drawBitmap()fonction.

Vous aimerez peut-être aussi