ILI9341 Arduino : brancher l'écran TFT, tactile et images sur SD

Brancher un ILI9341 sur Arduino est le moyen le moins cher et le plus répandu d'ajouter à ton projet un écran de 240×320 pixels en 65 000 couleurs. Ces modules TFT de 2,4 et 2,8 pouces sur circuit rouge se connectent en SPI avec seulement quelques fils, et les versions tactiles embarquent aussi un contrôleur tactile XPT2046 et un lecteur de carte microSD. Avec un seul module, tu affiches des graphiques en couleur, des boutons tactiles et des images lues sur la carte. C'est idéal pour les menus, les tableaux de bord, les jeux et les cadres photo, là où un OLED ou un LCD à caractères ne suffit plus.

Dans ce guide, tu vas apprendre pas à pas comment fonctionne le module, comment relier sans risque les sorties 5 V de l'Arduino Uno aux entrées 3,3 V de l'écran, comment dessiner du texte, des formes et des couleurs avec les bibliothèques Adafruit_ILI9341 et Adafruit GFX, comment lire la dalle tactile et comment afficher des images BMP depuis une carte SD. Ensuite, on verra le dessin beaucoup plus rapide sur ESP32 avec TFT_eSPI, l'utilisation de MicroPython sur la Raspberry Pi Pico et toutes les causes du fameux "écran blanc", que presque tout le monde rencontre au moins une fois.

Qu'est-ce que l'écran TFT ILI9341 et comment fonctionne-t-il ?

L'ILI9341 est la puce de commande cachée derrière la vitre. Elle contient environ 172 Ko de mémoire d'image (GRAM) qui stocke les 240×320 pixels. L'Arduino envoie des commandes et des données de couleur dans cette mémoire via SPI, et la puce rafraîchit l'image toute seule des dizaines de fois par seconde. L'image n'a donc pas besoin d'être stockée dans la RAM de l'Arduino : même un Uno avec 2 Ko de RAM peut piloter un grand écran couleur. Pour dessiner, on choisit d'abord une fenêtre (x, y, largeur, hauteur), puis on envoie les pixels de cette fenêtre les uns après les autres. La broche DC indique si l'octet envoyé est une commande (LOW) ou une donnée (HIGH). Les couleurs sont généralement envoyées au format RGB565, soit 16 bits par pixel : 5 bits de rouge, 6 de vert et 5 de bleu. Le fonctionnement du bus SPI est détaillé dans Qu'est-ce que le SPI.

2,4 ou 2,8 pouces ? Module SPI ou shield pour Uno

Cet article traite du module SPI, car il fonctionne aussi avec l'ESP32 et la Pico et laisse libres la plupart des broches de l'Uno. Les deux modules SPI ont exactement les mêmes broches et le même code ; l'écran de 2,8 pouces a des pixels un peu plus grands, donc les boutons tactiles sont plus faciles à viser. Si ton écran est un shield qui s'enfiche directement sur l'Uno, les bibliothèques SPI ne peuvent pas le piloter et le résultat est généralement un écran blanc. Pour ce genre de shield, installe la bibliothèque MCUFRIEND_kbv, lis l'identifiant du contrôleur avec tft.readID() (0x9341 pour l'ILI9341) et démarre-le avec tft.begin(ID). Pour une alternative plus petite mais plus nette, vois Écran TFT ST7789, et pour comparer toutes les options, Les types d'écrans pour Arduino.

Brochage de l'ILI9341 et tableau de câblage

Sur un bord du module se trouve le connecteur principal à 14 broches : les 9 premières servent à l'écran, les 5 dernières, qui commencent par T_, au tactile. Les 4 broches du bord opposé (SD_CS, SD_MOSI, SD_MISO, SD_SCK) vont au lecteur de carte. Les trois composants peuvent partager le même bus SPI (SCK, MOSI, MISO) ; seules leurs broches CS doivent être séparées. Le tableau correspond à tous les programmes de cet article ; sur la Pico, le tactile est branché sur un bus SPI à part à cause de la différence de vitesse.

Conversion de niveau 3,3 V sur l'Arduino Uno

L'ESP32 et la Raspberry Pi Pico fonctionnent déjà en 3,3 V, tu peux donc brancher l'écran directement. Sur les cartes 5 V comme l'Uno, le Nano et le Mega, en revanche, chaque ligne qui va de l'Arduino vers l'écran doit être ramenée à 3,3 V : CS, DC, RESET, SCK, MOSI et, si tu utilises le tactile et la SD, T_CLK, T_DIN, T_CS, SD_CS, SD_MOSI et SD_SCK. Les lignes SDO, T_DO, SD_MISO et T_IRQ, qui vont de l'écran vers l'Arduino, n'ont pas besoin de convertisseur : l'Uno lit tout ce qui dépasse 3 V comme HIGH, et une sortie 3,3 V suffit. En pratique, il existe quatre solutions :

• Tampon 74HC4050 (la solution la plus propre) : il s'alimente en 3,3 V, accepte du 5 V sur ses entrées et convertit 6 lignes dans une seule puce. Il est rapide et fonctionne sans souci avec un SPI à 8 MHz. L'ancien CD4050 fonctionne aussi, mais il est lent ; si l'image se dégrade, il faudra baisser la vitesse du SPI. Pour l'écran seul, 5 lignes suffisent ; avec le tactile et la SD, T_CS et SD_CS portent le total à 7 : ajoute une deuxième puce ou un pont diviseur pour la septième.
• Ponts diviseurs à résistances : pour chaque ligne, place 1 kΩ entre la broche de l'Arduino et celle de l'écran, et 2 kΩ entre la broche de l'écran et GND ; tu obtiens 5 V × 2 / 3 ≈ 3,3 V. Tu peux calculer d'autres couples de résistances avec le calculateur de pont diviseur. C'est bon marché, mais 10 résistances pour 5 lignes encombrent la breadboard.
• Module convertisseur de niveau tout prêt : les modules 4 ou 8 canaux à MOSFET BSS138 se câblent facilement, mais leurs résistances de tirage adoucissent les fronts du signal à haute vitesse. Si l'image se dégrade, descends le SPI à 4 MHz avec tft.begin(4000000). Les méthodes sont comparées dans Convertisseur de niveau logique.
• La méthode à éviter : l'astuce courante de "la résistance de 10 kΩ en série sur chaque ligne" envoie la tension en trop dans les diodes de protection internes de la puce. Ça peut marcher un temps, mais c'est instable et cela peut abîmer l'écran à la longue.

Pas à pas : premier test avec Adafruit_ILI9341

1. Dans l'Arduino IDE, ouvre le gestionnaire de bibliothèques, cherche Adafruit ILI9341 et installe-la. Quand l'IDE demande les dépendances, choisis Install all pour installer aussi Adafruit GFX et Adafruit BusIO. Si c'est ta première bibliothèque, Ajouter une bibliothèque Arduino t'aidera.
2. Pour le tactile, installe aussi la bibliothèque XPT2046_Touchscreen de Paul Stoffregen. La bibliothèque SD est déjà fournie avec l'Arduino IDE.
3. Câble l'écran selon le tableau ci-dessus, via un convertisseur de niveau sur l'Uno. Pour le premier test, tu peux laisser libres les broches du tactile et de la SD.
4. Téléverse le programme ci-dessous et ouvre le moniteur série à 9600 bauds. Tu dois voir du texte et des formes à l'écran, et les codes de diagnostic de l'écran dans le moniteur série.
5. Essaie aussi les exemples fournis : Fichier > Exemples > Adafruit ILI9341 > graphicstest mesure combien de microsecondes prend chaque opération de dessin.

1#include <SPI.h>
2#include <Adafruit_GFX.h>
3#include <Adafruit_ILI9341.h>
4
5#define TFT_CS  10   // ekran seçme / chip select
6#define TFT_DC  9    // komut/veri seçimi / command/data select
7#define TFT_RST 8    // donanım reset / hardware reset
8
9Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);   // donanım SPI: D11 MOSI, D13 SCK / hardware SPI
10uint16_t orange;                                  // kendi rengimiz / our own colour
11
12void setup() {
13  Serial.begin(9600);
14  tft.begin();                                    // Uno'da 8 MHz SPI / 8 MHz SPI on Uno
15
16  // Teşhis: çalışan ekranda 0x94 ve 0xC0 beklenir / Diagnostics: a working display reports 0x94 and 0xC0
17  Serial.print(F("Power Mode: 0x"));
18  Serial.println(tft.readcommand8(ILI9341_RDMODE), HEX);
19  Serial.print(F("Self Diagnostic: 0x"));
20  Serial.println(tft.readcommand8(ILI9341_RDSELFDIAG), HEX);
21
22  tft.setRotation(1);                             // yatay, 320x240 / landscape, 320x240
23  tft.fillScreen(ILI9341_BLACK);
24  orange = tft.color565(255, 128, 0);             // RGB'den RGB565'e / RGB to RGB565
25
26  tft.setTextColor(ILI9341_WHITE);
27  tft.setTextSize(3);                             // 18x24 piksel karakter / 18x24 px characters
28  tft.setCursor(10, 10);
29  tft.print(F("BlueGrays"));
30  tft.setTextColor(ILI9341_CYAN);
31  tft.setTextSize(2);
32  tft.setCursor(10, 45);
33  tft.print(F("ILI9341 320x240"));
34
35  tft.fillRect(10, 75, 90, 60, ILI9341_RED);                  // dolu dikdörtgen / filled rectangle
36  tft.drawRect(115, 75, 90, 60, ILI9341_GREEN);               // çerçeve / outline
37  tft.fillCircle(265, 105, 30, ILI9341_BLUE);                 // dolu daire / filled circle
38  tft.fillRoundRect(10, 150, 140, 50, 10, orange);            // yuvarlak köşeli düğme / rounded button
39  tft.drawTriangle(180, 200, 240, 150, 300, 200, ILI9341_YELLOW);
40  tft.drawFastHLine(0, 220, 320, ILI9341_MAGENTA);            // yatay çizgi / horizontal line
41}
42
43void loop() {
44  // Arka plan rengiyle yazınca eski rakam silinir, ekran titremez / writing with a background colour erases the old digits, no flicker
45  tft.setTextColor(ILI9341_WHITE, orange);
46  tft.setTextSize(2);
47  tft.setCursor(22, 167);
48  tft.print(millis() / 1000);
49  tft.print(F(" s"));
50  delay(200);
51}

La bibliothèque fournit des constantes de couleur toutes prêtes (19, comme ILI9341_RED, ILI9341_NAVY et ILI9341_ORANGE) ; pour ta propre couleur, utilise color565(). Cette fonction place côte à côte les 5 bits de poids fort du rouge, les 6 du vert et les 5 du bleu : couleur = (R >> 3) << 11 | (G >> 2) << 5 | (B >> 3). Pour l'orange (255, 165, 0), par exemple, 31 << 11 = 0xF800 et 41 << 5 = 0x0520 se combinent en 0xFD20, exactement la valeur d'ILI9341_ORANGE dans la bibliothèque. Le vert reçoit un bit de plus parce que l'œil humain y est plus sensible.

Lire la dalle tactile XPT2046

Sur les modules tactiles, une fine couche résistive recouvre la vitre. Là où ton doigt ou un stylet appuie, deux couches conductrices se touchent ; la puce XPT2046 mesure la position X et Y de ce point avec un CAN 12 bits sous forme de valeurs brutes de 0 à 4095 et fournit aussi une valeur de pression (Z). La bibliothèque considère qu'il n'y a pas de contact si Z est inférieur à 400. La puce partage le bus SPI avec l'écran mais communique plus lentement, vers 2 MHz ; la bibliothèque règle elle-même la vitesse à chaque lecture. La broche T_IRQ passe à LOW lors d'un contact et évite au processeur des lectures inutiles. Le programme suivant transforme l'écran en petite ardoise : tu choisis une couleur dans les cases du haut et tu effaces l'écran avec le bouton "SIL" (effacer).

1#include <SPI.h>
2#include <Adafruit_GFX.h>
3#include <Adafruit_ILI9341.h>
4#include <XPT2046_Touchscreen.h>
5
6#define TFT_CS  10
7#define TFT_DC  9
8#define TFT_RST 8
9#define T_CS    7    // dokunmatik seçme / touch chip select
10#define T_IRQ   2    // dokununca LOW olur / goes LOW on touch
11#define SD_CS   4    // SD kullanılmıyor, HIGH tutulur / SD unused, kept HIGH
12
13// Kalibrasyon: Seri Monitör'deki ham değerlerle değiştir / Calibration: replace with the raw values from Serial Monitor
14#define TS_MINX 300
15#define TS_MAXX 3800
16#define TS_MINY 300
17#define TS_MAXY 3800
18
19Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);
20XPT2046_Touchscreen ts(T_CS, T_IRQ);
21
22uint16_t brush = ILI9341_YELLOW;                  // fırça rengi / brush colour
23
24void drawPalette() {
25  tft.fillRect(0, 0, 40, 40, ILI9341_RED);
26  tft.fillRect(40, 0, 40, 40, ILI9341_GREEN);
27  tft.fillRect(80, 0, 40, 40, ILI9341_BLUE);
28  tft.fillRect(120, 0, 40, 40, ILI9341_YELLOW);
29  tft.drawRect(260, 0, 60, 40, ILI9341_WHITE);    // silme düğmesi / clear button
30  tft.setTextColor(ILI9341_WHITE);
31  tft.setTextSize(2);
32  tft.setCursor(273, 13);
33  tft.print(F("SIL"));
34}
35
36void setup() {
37  Serial.begin(9600);
38  pinMode(SD_CS, OUTPUT);
39  digitalWrite(SD_CS, HIGH);                      // SD kart hattı meşgul etmesin / keep the SD card off the bus
40  tft.begin();
41  tft.setRotation(1);                             // ekran yatay / display landscape
42  ts.begin();
43  ts.setRotation(1);                              // dokunmatik de aynı yönde / touch in the same orientation
44  tft.fillScreen(ILI9341_BLACK);
45  drawPalette();
46}
47
48void loop() {
49  if (!ts.touched()) return;                      // dokunma yok / no touch
50  TS_Point p = ts.getPoint();                     // ham x, y (0-4095) ve basınç z / raw x, y and pressure z
51  Serial.print(p.x); Serial.print(',');
52  Serial.print(p.y); Serial.print(',');
53  Serial.println(p.z);
54
55  int16_t x = constrain(map(p.x, TS_MINX, TS_MAXX, 0, 319), 0, 319);   // ekran koordinatı / screen coordinate
56  int16_t y = constrain(map(p.y, TS_MINY, TS_MAXY, 0, 239), 0, 239);
57
58  if (y < 40) {                                   // üst şerit: palet ve düğme / top strip: palette and button
59    if (x < 40)        brush = ILI9341_RED;
60    else if (x < 80)   brush = ILI9341_GREEN;
61    else if (x < 120)  brush = ILI9341_BLUE;
62    else if (x < 160)  brush = ILI9341_YELLOW;
63    else if (x >= 260) { tft.fillScreen(ILI9341_BLACK); drawPalette(); }
64  } else {
65    tft.fillCircle(x, y, 3, brush);               // parmağın altına nokta / dot under the finger
66  }
67}

Les valeurs brutes ne valent pas 0 et 4095 pile dans les coins ; sur la plupart des modules, les bords se situent environ entre 200–400 et 3700–3900. Pour calibrer, ouvre le moniteur série, touche au stylet le coin supérieur gauche et le coin inférieur droit, puis reporte les valeurs x et y affichées dans les constantes TS_MINX, TS_MAXX, TS_MINY et TS_MAXY. Si le point apparaît en miroir par rapport à ton doigt, inverse le min et le max de cet axe dans map() ; si X et Y sont complètement échangés, essaie les valeurs 0 à 3 dans ts.setRotation(). Un vrai menu fonctionne de la même manière : tu dessines des boutons et tu regardes dans quel rectangle tombe le point touché. La couche résistive réagit aussi au doigt, mais une pointe de type stylet est plus précise pour les petits boutons.

Afficher des images BMP depuis la carte SD

Le lecteur microSD au dos du module te permet de stocker des logos, des fonds et des photos sur une carte et de les afficher. Pour préparer une image, réduis une photo à 320×240 pixels et enregistre-la dans Paint en Bitmap 24 bits (.bmp). Comme la bibliothèque SD d'Arduino fonctionne avec des noms de fichiers courts, choisis un nom de 8 caractères au maximum comme RESIM.BMP et formate la carte en FAT32. Les détails sur la carte elle-même et la solution à l'erreur initialization failed sont dans Module carte SD pour Arduino. N'oublie pas que ce lecteur est lui aussi en 3,3 V : sur l'Uno, les lignes SD_CS, SD_MOSI et SD_SCK doivent aussi passer par le convertisseur de niveau.

1#include <SPI.h>
2#include <SD.h>
3#include <Adafruit_GFX.h>
4#include <Adafruit_ILI9341.h>
5
6#define TFT_CS  10
7#define TFT_DC  9
8#define TFT_RST 8
9#define SD_CS   4
10#define T_CS    7
11#define CHUNK   20   // tek okumada 20 piksel (60 bayt) / 20 pixels (60 bytes) per read
12
13Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);
14
15uint16_t read16(File &f) {                        // BMP sayıları küçük uçlu / BMP numbers are little-endian
16  uint16_t lo = f.read();
17  uint16_t hi = f.read();
18  return lo | (hi << 8);
19}
20
21uint32_t read32(File &f) {
22  uint32_t lo = read16(f);
23  uint32_t hi = read16(f);
24  return lo | (hi << 16);
25}
26
27bool drawBmp(const char *name, int16_t x, int16_t y) {
28  File f = SD.open(name);
29  if (!f) return false;                                   // dosya yok / file not found
30  if (read16(f) != 0x4D42) { f.close(); return false; }  // "BM" imzası / "BM" signature
31  read32(f);                                              // dosya boyutu / file size
32  read32(f);                                              // ayrılmış alan / reserved
33  uint32_t offset = read32(f);                            // piksel verisinin başı / start of pixel data
34  read32(f);                                              // başlık boyutu / header size
35  int32_t w = (int32_t)read32(f);
36  int32_t h = (int32_t)read32(f);
37  read16(f);                                              // düzlem sayısı / colour planes
38  uint16_t depth = read16(f);
39  uint32_t comp = read32(f);
40  if (depth != 24 || comp != 0) { f.close(); return false; }   // yalnız 24 bit, sıkıştırmasız / 24-bit uncompressed only
41
42  bool bottomUp = true;                                   // BMP satırları alttan üste / rows are stored bottom-up
43  if (h < 0) { h = -h; bottomUp = false; }
44  uint32_t rowSize = (w * 3 + 3) & ~3UL;                  // satırlar 4 baytın katı / rows padded to 4 bytes
45  int32_t drawW = w, drawH = h;
46  if (x + drawW > tft.width())  drawW = tft.width() - x;   // ekrana sığmayanı kırp / clip to the screen
47  if (y + drawH > tft.height()) drawH = tft.height() - y;
48
49  uint8_t sdBuf[CHUNK * 3];
50  uint16_t line[CHUNK];
51  for (int32_t row = 0; row < drawH; row++) {
52    uint32_t pos = offset + (bottomUp ? (h - 1 - row) : row) * rowSize;
53    f.seek(pos);                                          // satırın başına git / jump to the start of the row
54    for (int32_t col = 0; col < drawW; col += CHUNK) {
55      int16_t n = drawW - col;
56      if (n > CHUNK) n = CHUNK;
57      f.read(sdBuf, n * 3);
58      for (int16_t i = 0; i < n; i++) {                   // BGR'den RGB565'e / BGR to RGB565
59        line[i] = tft.color565(sdBuf[i * 3 + 2], sdBuf[i * 3 + 1], sdBuf[i * 3]);
60      }
61      tft.drawRGBBitmap(x + col, y + row, line, n, 1);    // parçayı ekrana bas / push the chunk to the screen
62    }
63  }
64  f.close();
65  return true;
66}
67
68void setup() {
69  Serial.begin(9600);
70  pinMode(T_CS, OUTPUT);
71  digitalWrite(T_CS, HIGH);                       // dokunmatik hattı meşgul etmesin / keep touch off the bus
72  tft.begin();
73  tft.setRotation(1);                             // 320x240 yatay / landscape
74  tft.fillScreen(ILI9341_BLACK);
75  tft.setTextSize(2);
76
77  if (!SD.begin(SD_CS)) {                         // kart başlatılamadı / card init failed
78    tft.setTextColor(ILI9341_RED);
79    tft.setCursor(10, 10);
80    tft.print(F("SD kart bulunamadi"));
81    return;
82  }
83  uint32_t t = millis();
84  if (!drawBmp("RESIM.BMP", 0, 0)) {
85    tft.setTextColor(ILI9341_YELLOW);
86    tft.setCursor(10, 10);
87    tft.print(F("RESIM.BMP okunamadi"));
88  }
89  Serial.print(F("Cizim suresi / Draw time (ms): "));
90  Serial.println(millis() - t);
91}
92
93void loop() {
94}

Les 54 premiers octets d'un fichier BMP forment l'en-tête : on y trouve la signature "BM", l'endroit où commencent les données des pixels, la largeur, la hauteur et la profondeur de couleur. Les pixels sont stockés dans l'ordre bleu, vert, rouge (BGR) et normalement de bas en haut, et chaque ligne est complétée à un multiple de 4 octets. C'est pourquoi le programme saute au bon endroit du fichier pour chaque ligne de l'écran, lit 20 pixels (60 octets) d'un coup, les convertit en RGB565 et les affiche avec drawRGBBitmap(). Travailler par petits morceaux permet de tenir dans la RAM de l'Uno et laisse la carte SD et l'écran utiliser le même bus SPI à tour de rôle. Le temps de dessin s'affiche dans le moniteur série ; sur l'Uno, une image plein écran apparaît ligne par ligne en quelques secondes. Pour afficher du PNG ou du JPEG et dessiner bien plus vite, passe à un ESP32 avec les bibliothèques TFT_eSPI et TJpg_Decoder.

Dessin rapide sur ESP32 avec TFT_eSPI

L'ESP32 fonctionne en 3,3 V et peut pousser le SPI jusqu'à 40 MHz : pas besoin de convertisseur de niveau, et remplir tout l'écran ne prend plus qu'environ 31 millisecondes en théorie. Pour vraiment profiter de cette vitesse, on utilise en général la bibliothèque TFT_eSPI de Bodmer. Elle accède directement au matériel SPI de l'ESP32, gère les polices lissées et surtout des tampons hors écran appelés sprites. Tu dessines autant que tu veux dans un sprite en RAM, puis tu envoies le résultat à l'écran en une seule fois : même les graphiques qui changent vite ne scintillent pas. Particularité de TFT_eSPI : les broches ne se règlent pas dans le programme, mais dans le fichier User_Setup.h du dossier de la bibliothèque. Ouvre-le, mets en commentaire les lignes de broches ESP8266 (NodeMCU) actives par défaut et active celles-ci :

1// TFT_eSPI/User_Setup.h içinde yalnız bu satırlar açık kalsın / keep only these lines active in TFT_eSPI/User_Setup.h
2#define ILI9341_DRIVER
3
4#define TFT_MISO 19
5#define TFT_MOSI 23
6#define TFT_SCLK 18
7#define TFT_CS   15   // ekran seçme / chip select
8#define TFT_DC    2   // komut/veri / data/command
9#define TFT_RST   4   // sıfırlama / reset
10#define TOUCH_CS 21   // dokunmatik seçme (T_CS) / touch chip select (T_CS)
11
12#define LOAD_GLCD     // 1: 8 piksel yazı tipi / 8 px font
13#define LOAD_FONT2    // 2: 16 piksel / 16 px
14#define LOAD_FONT4    // 4: 26 piksel / 26 px
15#define LOAD_FONT7    // 7: 7 segment rakamlar / 7-segment digits
16#define LOAD_GFXFF    // Adafruit FreeFont'lar / Adafruit FreeFonts
17#define SMOOTH_FONT
18
19#define SPI_FREQUENCY       40000000   // kablolar uzunsa 27000000 / 27 MHz with long wires
20#define SPI_READ_FREQUENCY  20000000
21#define SPI_TOUCH_FREQUENCY  2500000

1#include <SPI.h>
2#include <TFT_eSPI.h>                     // pinler User_Setup.h içinde / pins are set in User_Setup.h
3
4TFT_eSPI tft = TFT_eSPI();
5TFT_eSprite graph = TFT_eSprite(&tft);    // ekran dışı çizim alanı / off-screen canvas
6
7// Touch_calibrate örneğinin verdiği 5 sayıyla değiştir / replace with the 5 numbers from the Touch_calibrate example
8uint16_t calData[5] = {286, 3534, 283, 3600, 6};
9
10const int GW = 300, GH = 100;             // grafik boyutu / graph size
11uint8_t samples[GW];                      // son 300 ölçüm / last 300 readings
12uint32_t frames = 0, fps = 0, lastFps = 0;
13
14void setup() {
15  tft.init();
16  tft.setRotation(1);                     // yatay, 320x240 / landscape, 320x240
17  tft.setTouch(calData);
18  tft.fillScreen(TFT_BLACK);
19  tft.setTextColor(TFT_WHITE, TFT_BLACK);
20  tft.drawString("ESP32 + TFT_eSPI", 10, 8, 4);   // 4 numaralı yazı tipi, 26 px / font 4, 26 px
21  graph.createSprite(GW, GH);             // 300x100x2 bayt = 60 KB RAM / 60 KB of RAM
22}
23
24void loop() {
25  memmove(samples, samples + 1, GW - 1);                          // grafiği sola kaydır / scroll the graph left
26  samples[GW - 1] = map(analogRead(34), 0, 4095, 0, GH - 1);       // GPIO 34'teki potansiyometre / pot on GPIO 34
27
28  graph.fillSprite(TFT_BLACK);
29  for (int y = 0; y < GH; y += 25) graph.drawFastHLine(0, y, GW, TFT_DARKGREY);   // ızgara / grid
30  for (int x = 1; x < GW; x++) {
31    graph.drawLine(x - 1, GH - 1 - samples[x - 1], x, GH - 1 - samples[x], TFT_GREEN);
32  }
33  graph.setTextColor(TFT_YELLOW);
34  graph.drawString(String(fps) + " FPS", 4, 4, 2);
35  graph.pushSprite(10, 50);               // tek seferde ekrana gönder, titreme yok / push in one go, no flicker
36
37  uint16_t tx, ty;
38  if (tft.getTouch(&tx, &ty)) {           // dokunulduysa / if touched
39    tft.fillRect(10, 170, 300, 30, TFT_BLACK);
40    tft.setTextColor(TFT_CYAN, TFT_BLACK);
41    tft.drawString("Dokunma / Touch: " + String(tx) + ", " + String(ty), 10, 175, 2);
42  }
43
44  frames++;
45  if (millis() - lastFps >= 1000) {       // saniyede bir FPS hesapla / compute FPS once per second
46    fps = frames;
47    frames = 0;
48    lastFps = millis();
49  }
50}

Le programme trace la valeur d'un potentiomètre relié au GPIO 34 sous forme de courbe défilante et affiche le nombre d'images par seconde (FPS) dans le coin du sprite. Un sprite de 300×100 pixels en couleur 16 bits occupe 60 Ko de RAM ; c'est environ 30 fois toute la mémoire de l'Uno, mais aucun souci pour l'ESP32. Pour le tactile, les broches T_CLK, T_DIN et T_DO rejoignent les lignes SCK, MOSI et MISO de l'écran, seule T_CS (GPIO 21) reste séparée. Pour obtenir tes propres valeurs de calibration, lance une fois l'exemple Generic > Touch_calibrate de TFT_eSPI, touche les flèches qui apparaissent dans les coins et copie dans le tableau calData les 5 nombres affichés dans le moniteur série. La ligne toute prête Setup42_ILI9341_ESP32.h de User_Setup_Select.h sélectionne les mêmes broches d'écran, mais tu dois y ajouter toi-même la ligne TOUCH_CS. Si tu débutes avec l'ESP32, lis d'abord Qu'est-ce que l'ESP32.

ILI9341 avec la Raspberry Pi Pico et MicroPython

La Pico est elle aussi une carte 3,3 V, l'écran se branche donc directement. Le pilote MicroPython le plus utilisé est la paire de fichiers ili9341.py et xpt2046.py du dépôt micropython-ili9341 de rdagger ; il suffit de copier les deux sur la Pico avec Thonny. Dans le code ci-dessous, l'écran est sur le SPI0 à 40 MHz et le tactile sur un bus SPI1 séparé à 1 MHz, ce qui règle la différence de vitesse entre les deux puces. Le code dessine du texte et des formes, puis place des points jaunes là où tu touches, pour une ardoise toute simple. Si tu utilises la Pico et Thonny pour la première fois, commence par Qu'est-ce que la Raspberry Pi Pico.

1from machine import Pin, SPI
2from time import sleep_ms
3from ili9341 import Display, color565      # ili9341.py Pico'da olmalı / must be on the Pico
4from xpt2046 import Touch                  # xpt2046.py Pico'da olmalı / must be on the Pico
5
6# Ekran: SPI0, 40 MHz / Display: SPI0, 40 MHz
7spi_tft = SPI(0, baudrate=40000000, sck=Pin(18), mosi=Pin(19), miso=Pin(16))
8tft = Display(spi_tft, cs=Pin(17), dc=Pin(20), rst=Pin(21), width=240, height=320, rotation=0)
9
10# Dokunmatik: ayrı SPI1, 1 MHz / Touch: separate SPI1, 1 MHz
11spi_touch = SPI(1, baudrate=1000000, sck=Pin(10), mosi=Pin(11), miso=Pin(12))
12touch = Touch(spi_touch, cs=Pin(13), width=240, height=320)
13
14WHITE = color565(255, 255, 255)
15YELLOW = color565(255, 255, 0)
16
17tft.clear(color565(0, 0, 0))                                   # ekranı temizle / clear the screen
18tft.draw_text8x8(10, 10, "BlueGrays + Pico", WHITE)
19tft.fill_rectangle(10, 30, 100, 50, color565(255, 0, 0))       # dolu dikdörtgen / filled rectangle
20tft.draw_rectangle(130, 30, 100, 50, color565(0, 255, 0))      # çerçeve / outline
21tft.fill_circle(60, 130, 30, color565(0, 128, 255))            # dolu daire / filled circle
22tft.draw_line(0, 175, 239, 175, color565(255, 0, 255))         # çizgi / line
23tft.draw_text8x8(10, 185, "Ekrana dokun / Touch me", YELLOW)
24
25while True:
26    raw = touch.raw_touch()                # dokunma yoksa None / None when not touched
27    if raw is not None:
28        x, y = touch.normalize(*raw)       # ham değeri piksele çevir / raw value to pixels
29        y = 319 - y                        # eksen ters ise / if the axis is inverted
30        x = min(max(x, 3), 236)            # ekran dışına taşma / keep inside the screen
31        y = min(max(y, 3), 316)
32        tft.fill_circle(x, y, 3, YELLOW)
33    sleep_ms(20)

En portrait (rotation=0), la largeur est de 240 et la hauteur de 320 ; pour utiliser l'écran en paysage, passe width=320 et height=240 avec rotation=90. La calibration par défaut du tactile (x_min=100, x_max=1962) ne convient pas à tous les modules ; si le point est décalé, affiche les valeurs de raw_touch() et donne à Touch() tes propres x_min, x_max, y_min et y_max. Pour les images, la fonction draw_image() du pilote lit des fichiers .raw convertis en RGB565 ; le script utils/img2rgb565.py du dépôt fait cette conversion sur ton ordinateur.

Écran blanc : causes et solutions

Le problème le plus célèbre de l'ILI9341, c'est un écran tout blanc alors que le rétroéclairage est allumé. Un écran blanc est en fait un indice : l'alimentation et le rétroéclairage fonctionnent, mais la puce de commande n'a jamais été initialisée. Quand la dalle ne reçoit aucune commande, les pixels laissent passer la lumière et l'écran paraît blanc. Le problème vient donc presque toujours de la communication. Parcours le tableau de haut en bas :

Autres erreurs fréquentes

• Couleurs fausses : si le rouge s'affiche en bleu, la dalle est en ordre BGR ; change le réglage TFT_RGB_ORDER dans TFT_eSPI. Si les couleurs ressemblent à un négatif, essaie tft.invertDisplay(true).
• Image à l'envers ou en miroir : change la valeur de setRotation() entre 0 et 3 et ajuste les axes du tactile en conséquence.
• L'écran marche, mais pas le tactile ou la SD : vérifie que T_CS et SD_CS correspondent aux broches du code. Sur certains modules, la sortie SDO de l'écran ne libère pas le bus ; dans ce cas, essaie de débrancher la broche SDO de l'écran, seule la lecture de diagnostic ne marchera plus.
• Le BMP ne s'affiche pas : la carte n'est pas en FAT32, le nom du fichier dépasse 8 caractères ou l'image n'est pas en 24 bits. Pense à choisir 24 bits dans Paint ; ce programme ne dessine pas les BMP 16 et 32 bits.
• Les accents ne s'affichent pas : la police par défaut de GFX ne contient pas les lettres accentuées comme é, è ou ç. Dans TFT_eSPI, tu peux créer ta propre police lissée ou utiliser une police GFX qui contient ces caractères.
• L'écran est lent : sur l'Uno, un rafraîchissement plein écran prend au moins 0,15 seconde. Pour les animations et les jeux, passe à un ESP32 ou une Pico et ne redessine que la zone qui change.
• Le module chauffe : il y a peut-être du 5 V sur VCC avec le pont J1 fermé, ou VCC et GND sont inversés ; coupe l'alimentation immédiatement.

Idées de projets avec l'ILI9341

• Panneau domotique tactile : commande lumières et relais avec de grands boutons à l'écran ; tu trouveras des idées dans Projet de maison connectée avec Arduino.
• Écran météo en couleur : affiche la météo récupérée sur internet par l'ESP32 avec des icônes et de grands chiffres (Station météo ESP32).
• Tableau de bord de capteurs : représente la température, l'humidité et la pression d'un BME280 sous forme de cadrans à aiguille avec une courbe des dernières 24 heures.
• Console de jeux rétro : joue au Snake, au Pong ou à Tetris en couleur ; ajoute un module joystick pour les commandes et pioche des idées dans Projets de jeux Arduino.
• Cadre photo numérique : fais défiler les images BMP de la carte SD toutes les quelques secondes.
• Mini oscilloscope : trace les valeurs d'analogRead sous forme d'onde fluide avec un sprite sur l'ESP32.
• Serrure tactile à code : dessine un pavé numérique à l'écran et ouvre un relais ou un servo quand le bon code est saisi.

L'ILI9341 est le moyen le plus économique de donner à tes projets une interface tactile en couleur : commence avec l'Uno pour apprendre les fonctions de dessin de base, puis passe à l'ESP32 avec TFT_eSPI quand tu as besoin de vitesse et d'animations fluides. Si tu préfères débuter avec un écran plus petit, Écran OLED (SSD1306) est un bon point de départ. Dans l'application BlueGrays, tu trouveras l'écran météo ESP32, l'enregistreur de température, le radar de recul et des projets de jeux avec écran, avec schémas de câblage et code pas à pas.