Arduino Uno R4 - Interface SPI ILI9341 ILI9488 ST7789 Écran TFT LCD Tactile
L'Arduino Uno R4 — disponible en versions Minima et WiFi — apporte un processeur Renesas RA4M1 à 48 MHz et plus de SRAM que l'Uno classique, tout en conservant le même format de connecteur. Les broches SPI matérielles sont aux mêmes emplacements physiques, donc tout câblage TFT qui fonctionne sur l'Uno R3 fonctionne directement sur l'Uno R4 sans aucune modification.
Dans ce guide, vous allez :
- Câbler un écran TFT SPI à l'Arduino Uno R4.
- Dessiner des formes et remplir des zones avec de la couleur.
- Afficher du texte et des nombres à l'écran.
- Dessiner des images bitmap stockées en mémoire programme (PROGMEM).
- Dessiner des images bitmap chargées depuis une carte SD.
- Rendre du texte en utilisant une police externe personnalisée.
- Lire des coordonnées tactiles brutes depuis un contrôleur XPT2046.
- Dessiner à l'écran en faisant glisser un doigt sur l'affichage.
- Créer des boutons tactiles interactifs.
- Calibrer l'écran tactile.
- Utiliser un bus SPI secondaire ou personnalisé pour l'affichage.
Ce guide couvre les écrans TFT LCD SPI tactiles et non tactiles. Il fonctionne avec les panneaux de 1,3, 1,54, 2,2, 2,4, 2,8, 3,2 et 3,5 pouces pilotés par les puces ILI9341, ILI9488 ou ST7789.

Conseil — alternative plus simple et plus rapide : Si vous utilisez un Arduino Uno R4, envisagez le TFT Touch Shield à la place. Il se branche directement sur le connecteur Uno R4 — aucun fil de liaison ni convertisseur de niveau requis. Il utilise une interface parallèle 8 bits, qui transfère les données de pixels nettement plus rapidement que SPI.
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Démarrage DIYables STEM V4B IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Aperçu de l'Écran TFT SPI
Un écran TFT SPI est un panneau LCD couleur piloté par une puce contrôleur via le bus SPI. La bibliothèque DIYables_TFT_SPI prend en charge trois puces pilotes courantes :
- ILI9341 — couleur RGB565 16 bits, jusqu'à 40 MHz SPI.
- ILI9488 — couleur RGB666 18 bits, jusqu'à 24 MHz SPI.
- ST7789 — couleur RGB565 16 bits, jusqu'à 40 MHz SPI.
Recommandation : Si vous n'avez pas encore acheté d'écran, nous recommandons le pilote ST7789. Il est largement disponible, fonctionne à pleine vitesse SPI 40 MHz et est le choix le plus simple pour les nouveaux projets.
La bibliothèque étend Adafruit GFX, donc toutes les fonctions de dessin et de texte standard sont disponibles.
Brochage
La plupart des modules d'écran TFT LCD SPI ont les broches suivantes :
Broches d'affichage :
| Pin | Function |
|---|---|
| VCC | Power supply |
| GND | Ground |
| CS | Chip Select — pulled low to select the display on the SPI bus |
| DC / RS | Data / Command select — high for pixel data, low for commands |
| RST | Hardware reset — optional; tie to 3.3V if unused |
| MOSI / SDI / SDA | SPI data in (MCU → display) |
| SCK / CLK | SPI clock |
| MISO / SDO | SPI data out (display → MCU) — optional for display-only use |
| LED / BL / BLK | Backlight power — connect to 3.3V or a PWM pin for dimming |
Broches de la carte SD (si votre application a besoin d'accéder à la carte SD) :
| Pin | Function |
|---|---|
| SD_CS / TF_CS | SD card Chip Select |
| MOSI / SDI | MOSI — data from MCU to SD card |
| SCK / CLK | SCK — SPI clock |
| MISO / SDO | MISO — data from SD card to MCU |
Pour les écrans TFT qui prennent en charge le tactile, il y a des broches tactiles supplémentaires (si votre application utilise la fonction tactile et si l'écran la prend en charge) :
| Pin | Function |
|---|---|
| T_CS | Touch controller Chip Select |
| T_CLK | SCK — SPI clock |
| T_DIN | MOSI — data from MCU to touch controller |
| T_DO | MISO — data from touch controller to MCU |
| T_IRQ | Touch interrupt — optional; signals when the screen is being touched |
Remarque : Certains modules d'affichage non tactiles exposent également les broches T_CS, T_CLK, T_DIN, T_DO et T_IRQ. Celles-ci sont non fonctionnelles sur ces cartes — le circuit intégré du contrôleur tactile n'est pas monté. Elles apparaissent parce que le PCB réutilise la même conception que la version tactile pour réduire les variantes de fabrication.

Schéma de Câblage
⚠ Important — incompatibilité de tension : L'Arduino Uno R4 est une carte 5V. Ses broches GPIO délivrent une logique 5V, mais les écrans TFT SPI fonctionnent à 3,3V. Connecter les lignes de signal (MOSI, SCK, CS, DC, RST et T_CS si vous utilisez le tactile) directement de l'Uno R4 à l'écran endommagera l'écran. Vous devez utiliser un Convertisseur de Niveau 5V vers 3,3V sur chaque ligne de signal piloté par le MCU entre l'Uno R4 et l'écran. La ligne MISO (écran → MCU) n'a pas besoin de convertisseur de niveau. Un seul module 4 canaux suffit pour le câblage sans tactile ; le câblage avec tactile nécessite 6 canaux au total (ajouter T_CS), donc utilisez deux modules 4 canaux ou un module 8 canaux. Connectez le VCC du TFT à la broche 3,3V de l'Uno R4.
Sans Tactile
Connectez MOSI à D11, SCK à D13, MISO à D12 sur l'Uno R4. CS, DC et RST peuvent être n'importe quel GPIO disponible — D10, D9, D8 sont utilisés dans les exemples.
Affichage :
| TFT Pin | Arduino Uno R4 Pin | Description |
|---|---|---|
| VCC | 3.3V or 5V | Power supply |
| GND | GND | Ground |
| CS | D10 | Chip Select |
| DC / RS | D9 | Data / Command select |
| RST | D8 | Reset (optional) |
| MOSI / SDI | D11 | Hardware SPI MOSI |
| SCK | D13 | Hardware SPI clock |
| MISO / SDO | D12 | Hardware SPI MISO (optional) |
| LED / BL | 3.3V | Backlight power |
Carte SD (si votre application a besoin d'accéder à la carte SD) :
| SD Pin | Arduino Uno R4 Pin | Description |
|---|---|---|
| SD_CS / TF_CS | any free GPIO | SD card Chip Select |
| MOSI / SDI | D11 | Shared with display MOSI (D11) |
| SCK / CLK | D13 | Shared with display SCK (D13) |
| MISO / SDO | D12 | Shared with display MISO (D12) |

Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Avec Tactile
Connectez le contrôleur tactile XPT2046 au bus SPI de l'Arduino Uno R4, partageant D11, D13 et D12 avec l'affichage.
Affichage :
| TFT Pin | Arduino Uno R4 Pin | Description |
|---|---|---|
| VCC | 3.3V or 5V | Power supply |
| GND | GND | Ground |
| CS | D10 | Chip Select |
| DC / RS | D9 | Data / Command select |
| RST | D8 | Reset (optional) |
| MOSI / SDI | D11 | Hardware SPI MOSI |
| SCK | D13 | Hardware SPI clock |
| MISO / SDO | D12 | Hardware SPI MISO (optional) |
| LED / BL | 3.3V | Backlight power |
Contrôleur tactile (si votre application utilise la fonction tactile et si l'écran la prend en charge) :
| Touch Pin | Arduino Uno R4 Pin | Description |
|---|---|---|
| T_CS | any free GPIO | Touch Chip Select |
| T_IRQ | any free GPIO | Touch interrupt (optional) |
| T_DIN | D11 | Shared with display MOSI (D11) |
| T_CLK | D13 | Shared with display SCK (D13) |
| T_DO | D12 | Shared with display MISO (D12) |

Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Voir Comment alimenter l'Arduino UNO R4..
Si votre MCU dispose de deux interfaces SPI matérielles ou plus, vous pouvez assigner chaque périphérique (affichage, carte SD, contrôleur tactile) à son propre bus SPI dédié. Si votre MCU n'a qu'une seule interface SPI matérielle, les trois périphériques partagent les mêmes trois lignes de données (MOSI, SCK, MISO) — sur l'Uno R4 ce sont D11, D13 et D12. Chaque périphérique a sa propre broche CS, donc un seul est actif à la fois. La bibliothèque DIYables_TFT_SPI gère à la fois l'affichage et le contrôleur tactile XPT2046 via une seule API — aucune bibliothèque SPI séparée n'est nécessaire pour le côté tactile.
Comment Installer la Bibliothèque
- Branchez l'Arduino Uno R4 à votre ordinateur avec un câble USB Type-C.
- Dans l'Arduino IDE, vérifiez que la bonne carte (Arduino Uno R4 Minima ou WiFi) et le bon port série sont sélectionnés.
- Cliquez sur l'icône Bibliothèques dans la barre latérale gauche.
- Tapez "DIYables_TFT_SPI" dans la zone de recherche et localisez la bibliothèque publiée par DIYables.
- Cliquez sur Installer pour ajouter la bibliothèque. Lorsqu'on vous le demande, installez également la dépendance Adafruit GFX Library.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
Structure Minimale du Sketch
Tous les sketches utilisant la bibliothèque DIYables_TFT_SPI partagent ce squelette :
Passez les dimensions physiques en pixels de votre panneau au constructeur. Les modules avec la même puce pilote existent en différentes tailles.
Dessiner des Formes
L'exemple DrawShapes montre les primitives de dessin Adafruit GFX : cercles, triangles, rectangles, rectangles arrondis et lignes.
Comment Exécuter
- Câblez le module TFT à l'Arduino Uno R4 comme indiqué dans le schéma de câblage.
- Branchez le câble USB Type-C.
- Collez le code dans l'Arduino IDE, choisissez la bonne carte et le bon port, et appuyez sur Téléverser.
- L'écran affiche une grille de formes colorées qui se rafraîchit toutes les quelques secondes.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| begin() | Initialize the display controller. Call once in setup(). | TFT_display.begin(); |
| setRotation(r) | Rotate the coordinate system. 0=portrait, 1=landscape. | TFT_display.setRotation(1); |
| fillScreen(color) | Clear screen with a solid color. | TFT_display.fillScreen(WHITE); |
| colorRGB(r,g,b) | Build a 16-bit RGB565 color from 8-bit components. | colorRGB(0, 128, 255) |
| fillCircle(x,y,r,color) | Draw a solid circle. | TFT_display.fillCircle(80, 80, 40, RED); |
| fillRect(x,y,w,h,color) | Draw a solid rectangle. | TFT_display.fillRect(10, 10, 60, 40, BLUE); |
| drawRoundRect(x,y,w,h,r,color) | Draw a rounded rectangle outline. | TFT_display.drawRoundRect(5,5,100,50,10,GREEN); |
Afficher du Texte et des Nombres
L'exemple ShowTextAndNumber montre comment afficher des chaînes et des nombres à différentes tailles, couleurs et positions.
Comment Exécuter
- Câblez et téléversez comme ci-dessus.
- L'écran affiche plusieurs lignes de texte et de valeurs numériques.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| setTextColor(color) | Set text foreground color. | TFT_display.setTextColor(BLACK); |
| setTextSize(size) | Scale text. Size 1 is 6x8 pixels. | TFT_display.setTextSize(2); |
| setCursor(x, y) | Position the text cursor. | TFT_display.setCursor(10, 30); |
| print(value) | Print a string or number at the cursor. | TFT_display.print("Temp: "); |
| println(value) | Print and advance to next line. | TFT_display.println(25.4); |
Afficher une Image
L'exemple DrawImage affiche un bitmap couleur RGB565 stocké en mémoire programme. Les données d'image sont déclarées dans bitmap.h sous forme de tableau const uint16_t marqué PROGMEM. Cela conserve les données de pixels dans la flash plutôt que dans la SRAM, donc l'affichage fonctionne correctement même sur les cartes à RAM limitée. Copiez bitmap.h dans le dossier du sketch avant la compilation.
Comment Exécuter
- Placez bitmap.h dans le même dossier que le fichier de sketch.
- Câblez le module TFT à l'Arduino Uno R4 comme indiqué dans le schéma de câblage.
- Branchez le câble USB Type-C.
- Collez le code dans l'Arduino IDE, confirmez la carte et le port, et appuyez sur Téléverser.
- L'écran affiche l'image bitmap chargée depuis la mémoire programme.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| drawRGBBitmap(x,y,bitmap,w,h) | Draw an RGB565 PROGMEM bitmap starting at pixel (x, y). | TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320); |
| fillScreen(color) | Clear the screen before drawing the image. | TFT_display.fillScreen(BLACK); |
Afficher une Image depuis Carte SD
L'exemple DrawImageSDcard lit un fichier d'image binaire brut RGB565 depuis une carte micro SD et envoie les données de pixels directement vers l'écran par petits morceaux. Cette approche diffuse l'image sans jamais tenir l'image complète en RAM, ce qui la rend pratique pour les grands panneaux.
Connectez le module de carte SD au même bus SPI que l'écran. Partagez MOSI (D11), SCK (D13) et MISO (D12). Assignez une broche CS séparée au module SD — définissez-la comme SD_CS_PIN dans le sketch.
Comment Exécuter
- Câblez le module SD à l'Arduino Uno R4. Partagez le bus SPI (D11/D13/D12) avec l'écran et connectez SD CS à la broche choisie.
- Copiez un fichier d'image binaire brut RGB565 à la racine de la carte SD. Les dimensions de l'image doivent correspondre à la résolution du panneau.
- Branchez le câble USB Type-C.
- Collez le code dans l'Arduino IDE, confirmez la carte et le port, et appuyez sur Téléverser.
- L'image est lue depuis la carte et affichée à l'écran.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| startWrite() | Begin a direct SPI transaction, holding CS asserted. | TFT_display.startWrite(); |
| setAddrWindow(x0,y0,x1,y1) | Define the rectangular pixel region to write. | TFT_display.setAddrWindow(0, 0, 239, 319); |
| pushColors(buf, len) | Send a buffer of RGB565 pixel values to the display. | TFT_display.pushColors(buf, 512); |
| endWrite() | End the SPI transaction and release CS. | TFT_display.endWrite(); |
Utiliser une Police Externe
L'exemple UseExternalFont rend le texte à l'écran en utilisant une police personnalisée compatible Adafruit GFX. Par rapport à la police bitmap 5×7 intégrée, les polices personnalisées offrent une meilleure lisibilité et un meilleur style. Le fichier de police est inclus en tant qu'en-tête et activé par un seul appel à setFont().
Comment Exécuter
- Câblez le module TFT à l'Uno R4 comme indiqué dans le schéma de câblage.
- Branchez le câble USB Type-C.
- Collez le code dans l'Arduino IDE, confirmez la carte et le port, et appuyez sur Téléverser.
- L'écran rend le texte avec la police personnalisée. Notez la qualité améliorée des glyphes par rapport à la police intégrée.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| setFont(&FontName) | Activate a custom GFX-compatible font. Pass NULL to restore the built-in 5×7 font. | TFT_display.setFont(&FreeSans12pt7b); |
| setCursor(x, y) | Move the text cursor to the given position. | TFT_display.setCursor(10, 40); |
| setTextColor(color) | Set the text foreground color. | TFT_display.setTextColor(WHITE); |
| print(text) | Print a string at the current cursor position using the active font. | TFT_display.print("Hello!"); |
Obtenir un Point Tactile
L'exemple TouchGetPoint lit les coordonnées ADC brutes depuis un contrôleur tactile XPT2046 et les affiche dans le Moniteur Série. L'exécuter en premier vous aide à comprendre la plage numérique de votre panneau spécifique — données que vous utiliserez pour calibrer le tactile dans les exemples ultérieurs.
Câblage : T_CLK→D13, T_DIN→D11, T_DO→D12 (bus SPI partagé avec l'écran). T_CS→D7, T_IRQ→D6.
Comment Exécuter
- Câblez le contrôleur XPT2046 à l'Uno R4, partageant le bus SPI avec l'écran. T_CS à D7, T_IRQ à D6.
- Branchez le câble USB Type-C.
- Collez le code, confirmez la carte et le port, et appuyez sur Téléverser.
- Ouvrez le Moniteur Série à 9600 bauds. Appuyez et faites glisser sur l'écran pour voir les valeurs brutes X, Y et pression.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| initTouchSPI(cs, irq) | Initialize the XPT2046 on the shared SPI bus. Use -1 for irq if the interrupt pin is not connected. | TFT_display.initTouchSPI(7, 6); |
| readTouchRaw(x, y, z) | Return raw ADC touch values without applying any calibration. Returns true when pressed. | TFT_display.readTouchRaw(x, y, z); |
Dessin Tactile
L'exemple TouchDraw crée une simple application de dessin au doigt. Les coordonnées tactiles calibrées sont utilisées pour placer de petits cercles remplis à chaque point que le doigt touche, construisant un dessin continu à mesure qu'il se déplace.
Comment Exécuter
- Câblez le XPT2046 à l'Uno R4 comme décrit dans la section Touch Get Point ci-dessus.
- Branchez le câble USB Type-C.
- Collez le code, confirmez la carte et le port, et appuyez sur Téléverser.
- Faites glisser un doigt sur l'écran pour dessiner.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| initTouchSPI(cs, irq) | Set up the XPT2046 on the shared SPI bus. | TFT_display.initTouchSPI(7, 6); |
| setTouchCalibration(minX,maxX,minY,maxY) | Map raw ADC values to screen pixel coordinates. Get these values from the TouchCalibration example. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| getTouch(x, y) | Retrieve calibrated touch coordinates in screen pixels. Returns true when the screen is being pressed. | if (TFT_display.getTouch(x, y)) { ... } |
| fillCircle(x, y, r, color) | Draw a small dot at the touch point. | TFT_display.fillCircle(x, y, 3, RED); |
Bouton Tactile
L'exemple TouchButton dessine des boutons rectangulaires à l'écran et vérifie les coordonnées tactiles par rapport aux limites de chaque bouton. Lorsqu'un bouton est appuyé, il se met en surbrillance et effectue une action. Cela démontre comment créer une interface utilisateur tactile minimale.
La broche T_IRQ est optionnelle pour cet exemple. Passez -1 comme argument irq si vous préférez ne pas la connecter.
Comment Exécuter
- Connectez T_CS à D7. T_IRQ peut être laissé non connecté — réglez-le à -1 dans le sketch.
- Branchez le câble USB Type-C.
- Collez le code, confirmez la carte et le port, et appuyez sur Téléverser.
- Appuyez sur les boutons affichés à l'écran. Chaque bouton change de couleur lorsqu'il est appuyé.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| initTouchSPI(cs, irq) | Initialize the XPT2046. Pass -1 for irq to poll without the interrupt pin. | TFT_display.initTouchSPI(7, -1); |
| setTouchCalibration(minX,maxX,minY,maxY) | Apply calibration so getTouch() returns display-pixel coordinates. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| getTouch(x, y) | Get the current calibrated touch position. Returns true while the screen is pressed. | if (TFT_display.getTouch(x, y)) { ... } |
| fillRect(x, y, w, h, color) | Draw a solid colored rectangle for the button background. | TFT_display.fillRect(10, 10, 120, 60, BLUE); |
Calibration Tactile
L'exemple TouchCalibration vous guide pour mesurer la plage ADC brute de votre panneau tactile XPT2046. Touchez chaque coin lorsqu'on vous le demande et observez les valeurs X et Y minimales et maximales affichées dans le Moniteur Série. Utilisez ces quatre nombres dans l'appel à setTouchCalibration() dans tous vos autres sketches tactiles.
Comment Exécuter
- Câblez le XPT2046 à l'Uno R4 comme décrit dans la section Touch Get Point.
- Branchez le câble USB Type-C.
- Collez le code, confirmez la carte et le port, et appuyez sur Téléverser.
- Ouvrez le Moniteur Série à 9600 bauds. Suivez les instructions à l'écran pour toucher chaque coin de l'affichage.
- Enregistrez les quatre valeurs affichées et insérez-les dans setTouchCalibration() dans vos autres sketches tactiles.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| initTouchSPI(cs, irq) | Initialize the XPT2046 touch controller. | TFT_display.initTouchSPI(7, 6); |
| readTouchRaw(x, y, z) | Read raw ADC values to measure the calibration range. | TFT_display.readTouchRaw(x, y, z); |
| setTouchCalibration(minX,maxX,minY,maxY) | Store the calibration values so getTouch() maps correctly to pixel coordinates. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
SPI Personnalisé
L'exemple CustomSPI montre comment fournir une instance SPIClass explicite au constructeur de l'écran. Utilisez cette approche lorsque le bus SPI par défaut est occupé par un autre périphérique, lorsque vous avez besoin de partager le bus avec une configuration supplémentaire, ou lorsque vous souhaitez définir une fréquence d'horloge SPI personnalisée.
L'Uno R4 Minima et WiFi exposent chacun un seul bus SPI matériel sur D11/D13/D12. L'exemple montre comment passer &SPI explicitement et ajuster la vitesse d'horloge SPI maximale.
Comment Exécuter
- Câblez l'écran TFT à l'Uno R4 comme indiqué dans le schéma de câblage.
- Branchez le câble USB Type-C.
- Collez le code, confirmez la carte et le port, et appuyez sur Téléverser.
- L'écran démarre sur le bus SPI explicite et rend un motif de barres de couleur.
Référence Rapide des Méthodes
| Method | What It Does | Usage |
|---|---|---|
| DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) | Constructor variant that accepts a pointer to any SPIClass. Defaults to &SPI when the argument is omitted. | DIYables_ILI9341_SPI tft(240, 320, 10, 9, 8, &SPI); |
| begin() | Initialize the display on the configured SPI bus. | TFT_display.begin(); |
Dépannage
- Écran noir - Confirmez que CS, DC, MOSI et SCK sont tous connectés. Une ligne CS manquante laisse l'écran inactif.
- Mauvais pilote - Une seule ligne de constructeur doit être active. Les autres doivent être commentées.
- Image décalée ou coupée - La largeur et la hauteur dans le constructeur doivent correspondre à la taille physique du panneau.
- Le tactile ne fonctionne pas - Exécutez l'exemple TouchCalibration pour obtenir des valeurs de calibration spécifiques à votre panneau.
Compatibilité des Plateformes
La bibliothèque s'appuie exclusivement sur les API Arduino standard (SPI, digitalWrite, millis) et fonctionne sur toutes les plateformes compatibles Arduino, y compris l'Uno R4 Minima et WiFi.