25 avril 2012

Juillet 2014 Je laisse cette page mais ce composant est obsolète et la leçon 20 présente son successeur.

Arduino leçon 19 : l'afficheur graphique

l'afficheur 128x64 pixels

Sur cet afficheur comme sur le mien, la broche 1 est à droite. Sur le 16x2, elle était à gauche. Sur le vôtre, pensez à vérifier.

La bibliothèque

Lors de l'installation basique d'Arduino, nous n'avions pas les fonctions de commande de cet afficheur.
Nous devons ajouter la bibliothèque spécifique.
La version actuelle s'appelle GLCD. La version précédente s'appelait ks0108.

installation

Il faut récupérer sur le web le fichier glcd-date.zip sur cette page.
La version que j'utilise a pour date 20111205 (5 déc 2011) mais prenez la plus récente que vous trouverez.
Sur votre PC, recherchez la bibliothèque .../Arduino/libraries/ et dézippez-y ce fichier.
Ça vous créera un sous-répertoire glcd dans lequel Arduino saura retrouver les fonctions nécessaires.

Les branchements

Voici le tableau des liaisons entre Arduino et l'afficheur :

afficheur	Arduino
7 DB0	22
8 DB1	23
9 DB2	24
10 DB3	25
11 DB4	26
12 DB5	27
13 DB6	28
14 DB7	29
.	.
15 CS1	33
16 CS2	34
17 RST	rst ou +5
5 R/W	35 ou gnd
4 RS	36
6 En	37
afficheur	autres
1	Ground
2	+5v
3	curseur du potentiomètre
18	extrêmité du potentiomètre
19	+5 via 270 ohms
20	Ground

Quelques broches spéciales réglage du contraste Pour le contraste, l'afficheur a besoin d'une tension négative sur la pin 3 et d'une tension positive sur la pin 19. La pin 19 est reliée au +5 par une résistance de 100 à 560 ohms qui limite le courant. La tension négative fournie à la pin 3 doit être ajustée avec précision et n'est pas forcément la même pour 2 afficheurs qui nous paraissent identiques, d'où la nécessité d'un potentiomètre. La pin 18 fournit une tension négative (contrairement aux autres pins, la 18 est une sortie). Un potentiomètre entre la pin 18 et la masse fournira en son point milieu une tension ajustable pour la pin 3. reset La broche 17 provoque le reset de l'afficheur quand elle est au niveau bas. On la reliera donc au +5 pour éviter ce reset. On peut aussi la relier à la broche RST d'Arduino si on veut provoquer un reset de l'afficheur quand on reset Arduino. Si on la laisse en l'air, on risque d'avoir des reset aléatoires.

Les fonctions graphiques

Elles sont nombreuses, du genre tracer un trait de (x1,y1) à (x2,y2) ou bien tracer un cercle de centre (x,y) et de rayon r.
En voici quelques une définies dans glcd.h :

// Graphic Functions void ClearScreen(int color = WHITE); void DrawVLine(int x, int y, int height, int color= BLACK); void DrawHLine(int x, int y, int width, int color= BLACK); void DrawLine(int x1, int y1, int x2, int y2, int color= BLACK); void DrawRect(int x, int y, int width, int height, int color= BLACK); void DrawRoundRect(int x, int y, int width, int height, int radius, int color= BLACK); void FillRect(int x, int y, int width, int height, int color= BLACK); void InvertRect(int x, int y, int width, int height); void DrawCircle(int xCenter, int yCenter, int radius, int color= BLACK); void FillCircle(int xCenter, int yCenter, int radius, int color= BLACK); void DrawBitmap(Image_t bitmap, int x, int y, int color= BLACK);

où les valeurs des abscisses vont de 0 à 127, celles des ordonnées de 0 à 63.

Programme

dessin bitmap

Notre programme va afficher un bitmap.
Ce bitmap est déjà converti en langage Arduino dans le fichier ArduinoIcon64x64.h du répertoire bitmaps.

#include <glcd.h>
#include "bitmaps/ArduinoIcon64x64.h" // bitmap
#include "fonts/SystemFont5x7.h" // system font
void setup()      {
      GLCD.Init(NON_INVERTED); // initialise the library, non inverted writes pixels onto a clear screen
      GLCD.ClearScreen();
      GLCD.DrawBitmap(ArduinoIcon64x64, 32,0, BLACK); //draw the bitmap at the given x,y position
      GLCD.SelectFont(System5x7); // switch to fixed width system font
//      countdown(15);
//      GLCD.ClearScreen();
}

void loop(){
      // on ne fait rien
}

Avant d'aller plus loin, on essaye ce programme. Ensuite, on va regarder comment est fait le bitmap dans ArduinoIcon64x64.h

dessin géométrique

Dans la partie gauche de l'afficheur, nous allons tracer un cercle et aussi des traits issus d'un angle.
Pour libérer de la place, nous activons les 2 lignes qui étaient en commentaire.

#include <glcd.h>
#include "fonts/Arial14.h" // proportional font
#include "fonts/SystemFont5x7.h" // system font
#include "bitmaps/ArduinoIcon.h" // bitmap

void showCharacters();
//void drawSpinner(byte pos, byte x, byte y);

unsigned long startMillis;
unsigned int loops = 0;
unsigned int iter = 0;

void setup()      {
      on supprime les // devant les 2 dernières lignes
}

void loop()      {
      iter = 0;
      startMillis = millis();
      while( millis() - startMillis < 1000){ // loop for one second
            GLCD.DrawRect(0, 0, 64, 61, BLACK);      // rectangle in left side of screen
            for(int i=0; i < 62; i += 4)
            GLCD.DrawLine(1,1,63,i, BLACK);     // draw lines from upper left down right side of rectangle
            GLCD.DrawCircle(32,31,30,BLACK);     // draw circle centered in the left side of screen
            //GLCD.FillRect(66,0,63,63, BLACK);      // clear previous spinner position
            //drawSpinner(loops++,96,32);          // draw new spinner position
            GLCD.CursorTo(5,5);            // locate curser for printing text
            GLCD.PrintNumber(++iter);     // print current iteration at the current cursor position
      }
}

 void countdown(int count)      {
       while(count--){ // do countdown
             GLCD.CursorTo(0,1); // first column, second row (offset is from 0)
             GLCD.PutChar(count + '0');
             delay(1000);
        }
  }

Testez ce programme.
Essayez de comprendre le rôle de la variable "iter".

animation

Nous allons maintenant créer une animation dans la partie droite de l'afficheur.
Pour cela, nous allons dessiner un trait, puis le remplacer par un autre légèrement incliné, puis par un davantage incliné etc...
On garde tout ce qu'on avait dans le programme, dans la boucle on supprime les //, et à la fin on ajoute :

    void drawSpinner(byte pos, byte x, byte y)         {
        switch(pos % 8)         {
            case 0 : GLCD.DrawLine( x , y-16, x, y+16, WHITE); break;
            case 1 : GLCD.DrawLine( x+6, y-14, x-6, y+14, WHITE); break;
            case 2 : GLCD.DrawLine( x+12, y-12, x-12, y+12, WHITE); break;
            case 3 : GLCD.DrawLine( x+14, y-6, x-14, y+6, WHITE); break;
            case 4 : GLCD.DrawLine( x+16, y , x-16, y , WHITE); break;
            case 5 : GLCD.DrawLine( x+14, y+6, x-14, y-6, WHITE); break;
            case 6 : GLCD.DrawLine( x+12, y+12, x-12, y-12, WHITE); break;
            case 7 : GLCD.DrawLine( x+6, y+14, x-6, y-14, WHITE); break;
        }
    }

aller plus loin ?

Si vous voulez afficher vos propres images, je vous propose une autre leçon supplémentaire qui risque d'être plus difficile.
Sinon, passez directement à la leçon 20.

haut de la page

Page Précédente : la liaison SPI

Leçon 19bis : suite sur les afficheurs Leçon 20 : l'afficheur couleur