Arduino UNO Q - Écran Tactile LCD TFT SPI
Vous voulez ajouter un écran coloré à votre projet Arduino UNO Q avec seulement quelques fils ? Ce guide adapté aux débutants vous montre comment utiliser un écran LCD TFT SPI avec Arduino UNO Q — avec ou sans tactile — étape par étape.
Dans ce tutoriel, vous apprendrez :
- Ce qu'est un écran LCD TFT SPI et comment il fonctionne
- Comment câbler un écran TFT SPI à l'Arduino UNO Q
- Comment programmer le MCU (code Arduino C/C++) de l'Arduino UNO Q pour dessiner des formes et remplir des zones de couleur
- Comment afficher du texte et des nombres sur l'écran TFT
- Comment dessiner des images bitmap stockées dans la mémoire programme (PROGMEM)
- Comment dessiner des images bitmap chargées depuis une carte SD
- Comment afficher du texte avec une police externe personnalisée
- Comment lire les coordonnées tactiles brutes d'un contrôleur tactile XPT2046
- Comment dessiner à l'écran en faisant glisser un doigt sur l'afficheur
- Comment créer des boutons tactiles interactifs et calibrer l'écran tactile
- Comment utiliser un bus SPI secondaire ou personnalisé pour l'écran
- Comment programmer à la fois le côté Linux (Python) et le côté MCU (C/C++) pour que le côté Linux contrôle l'écran TFT via Bridge
- Comment utiliser Telegram pour envoyer des messages à l'Arduino UNO Q afin d'écrire sur l'écran et de lire les points tactiles
- Comment utiliser OpenClaw sur Arduino UNO Q pour contrôler l'écran TFT SPI
Ce guide couvre les écrans LCD TFT SPI tactiles et non tactiles. Il fonctionne avec les écrans de 1,3, 1,54, 2,2, 2,4, 2,8, 3,2 et 3,5 pouces pilotés par les puces contrôleur ILI9341, ILI9488 ou ST7789.

Astuce — alternative plus simple et plus rapide : Si vous voulez un écran qui ne nécessite aucun câblage, envisagez plutôt le Arduino UNO Q - Écran TFT LCD Tactile. Il se branche directement sur les connecteurs de l'Arduino UNO Q — aucun fil de connexion nécessaire. Il utilise une interface parallèle 8 bits, qui transfère les données de pixels nettement plus vite que le SPI.
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Remarque : Contrairement à une carte Arduino 5V, le MCU de l'Arduino UNO Q fonctionne déjà en logique 3,3V, donc aucun convertisseur de niveau 5V vers 3,3V n'est nécessaire pour ce câblage.
À propos de l'Écran LCD TFT SPI
Un écran TFT SPI est un panneau LCD couleur piloté par une puce contrôleur via le bus SPI.
Caractéristiques et fonctionnalités clés :
- Interface : SPI (4 fils) — seulement quelques fils de signal nécessaires
- Couleur : Couleur RGB complète, 16 bits ou 18 bits selon la puce de pilotage
- Tailles prises en charge : écrans de 1,3, 1,54, 2,2, 2,4, 2,8, 3,2 et 3,5 pouces
- Tactile (optionnel) : contrôleur tactile résistif XPT2046 / HR2046 / ADS7843 sur le même bus SPI
- Emplacement MicroSD : Présent sur la plupart des modules, également sur le bus SPI partagé
- Bibliothèque : DIYables_TFT_SPI — une seule bibliothèque pour l'écran et le contrôleur tactile
- Niveau logique : 3,3V — parfaitement adapté aux broches du MCU de l'Arduino UNO Q
La bibliothèque DIYables_TFT_SPI prend en charge trois puces de pilotage courantes :
- ILI9341 — couleur RGB565 16 bits, SPI jusqu'à 40 MHz
- ILI9488 — couleur RGB666 18 bits, SPI jusqu'à 24 MHz
- ST7789 — couleur RGB565 16 bits, SPI jusqu'à 40 MHz
Recommandation : Si vous n'avez pas encore acheté d'écran, nous recommandons le pilote ST7789. Il est largement disponible, fonctionne à la vitesse SPI maximale de 40 MHz et constitue le choix le plus simple pour les nouveaux projets.
La bibliothèque étend Adafruit GFX, donc toutes les fonctions standard de dessin et de texte sont disponibles.
Brochage
La plupart des écrans LCD TFT SPI ont les broches suivantes :
Broches de l'écran :
| Broche | Fonction |
|---|---|
| VCC | Alimentation |
| GND | Masse |
| CS | Chip Select — mise à l'état bas pour sélectionner l'écran sur le bus SPI |
| DC / RS | Sélection Données / Commande — haut pour les données de pixels, bas pour les commandes |
| RST | Réinitialisation matérielle — optionnelle ; relier à 3,3V si inutilisée |
| MOSI / SDI / SDA | Entrée de données SPI (du MCU vers l'écran) |
| SCK / CLK | Horloge SPI |
| MISO / SDO | Sortie de données SPI (de l'écran vers le MCU) — optionnelle pour un usage en affichage seul |
| LED / BL / BLK | Alimentation du rétroéclairage — connecter à 3,3V ou à une broche PWM pour la gradation |
Broches de la carte SD (si votre application doit accéder à la carte SD) :
| Broche | Fonction |
|---|---|
| SD_CS / TF_CS | Chip Select de la carte SD |
| MOSI / SDI | MOSI — données du MCU vers la carte SD |
| SCK / CLK | SCK — horloge SPI |
| MISO / SDO | MISO — données de la carte SD vers le MCU |
Pour les écrans TFT prenant en charge le tactile, il y a des broches tactiles supplémentaires (si votre application utilise la fonction tactile et que l'écran la prend en charge) :
| Broche | Fonction |
|---|---|
| T_CS | Chip Select du contrôleur tactile |
| T_CLK | SCK — horloge SPI |
| T_DIN | MOSI — données du MCU vers le contrôleur tactile |
| T_DO | MISO — données du contrôleur tactile vers le MCU |
| T_IRQ | Interruption tactile — optionnelle ; signale quand l'écran est touché |
Remarque : Certains modules d'écran non tactiles exposent aussi les broches T_CS, T_CLK, T_DIN, T_DO et T_IRQ. Elles ne sont pas fonctionnelles sur ces cartes — le circuit intégré du contrôleur tactile n'est pas monté. Elles apparaissent parce que le PCB reprend le même tracé que la version tactile pour réduire les variantes de fabrication.

Schéma de Câblage
Remarque — SDO (MISO) est optionnelle : La ligne SDO (MISO) ne transporte que les données de l'écran vers la carte. Aucun des exemples de code de ce tutoriel ne lit depuis l'écran, donc cette broche peut rester non connectée. Sur les modules où le contrôleur tactile partage le même bus SPI, une ligne SDO connectée peut perturber la communication, il est donc recommandé de la laisser non connectée.
L'écran se connecte aux broches SPI matérielles des connecteurs du MCU de l'Arduino UNO Q.
- Remarque : Les broches du MCU de l'Arduino UNO Q délivrent une logique 3,3V, ce qui correspond à l'écran TFT SPI — connectez les lignes de signal directement, aucun convertisseur de niveau nécessaire.
- Remarque : Connectez la broche VCC du TFT à la broche 3,3V de l'Arduino UNO Q, pas au 5V.
- Remarque : L'écran, la carte SD et le contrôleur tactile partagent tous MOSI (D11), SCK (D13) et MISO (D12). Chacun a sa propre broche CS, donc un seul est actif à la fois.
Sans Tactile
Connectez MOSI à D11, SCK à D13 et MISO à D12 sur l'Arduino UNO Q. CS, DC et RST peuvent être n'importe quel GPIO disponible — D10, D8, D9 sont utilisés dans les exemples.
Écran :
| Broche TFT | Broche MCU Arduino UNO Q | Description |
|---|---|---|
| VCC | 3.3V | Alimentation |
| GND | GND | Masse |
| CS | D10 | Chip Select |
| DC / RS | D8 | Sélection Données / Commande |
| RST | D9 | Réinitialisation (optionnelle) |
| MOSI / SDI | D11 | MOSI SPI matériel |
| SCK | D13 | Horloge SPI matérielle |
| MISO / SDO | D12 | MISO SPI matériel (optionnel) |
| LED / BL | 3.3V | Alimentation du rétroéclairage |
Carte SD (si votre application doit accéder à la carte SD) :
| Broche SD | Broche MCU Arduino UNO Q | Description |
|---|---|---|
| SD_CS / TF_CS | D4 | Chip Select de la carte SD |
| MOSI / SDI | D11 | Partagée avec le MOSI de l'écran (D11) |
| SCK / CLK | D13 | Partagée avec le SCK de l'écran (D13) |
| MISO / SDO | D12 | Partagée avec le MISO de l'écran (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 Q, en partageant D11, D13 et D12 avec l'écran.
Écran :
| Broche TFT | Broche MCU Arduino UNO Q | Description |
|---|---|---|
| VCC | 3.3V | Alimentation |
| GND | GND | Masse |
| CS | D10 | Chip Select |
| DC / RS | D8 | Sélection Données / Commande |
| RST | D9 | Réinitialisation (optionnelle) |
| MOSI / SDI | D11 | MOSI SPI matériel |
| SCK | D13 | Horloge SPI matérielle |
| MISO / SDO | D12 | MISO SPI matériel (optionnel) |
| LED / BL | 3.3V | Alimentation du rétroéclairage |
Contrôleur tactile (si votre application utilise la fonction tactile et que l'écran la prend en charge) :
| Broche tactile | Broche MCU Arduino UNO Q | Description |
|---|---|---|
| T_CS | D2 | Chip Select tactile |
| T_IRQ | D2 | Interruption tactile (optionnelle) |
| T_DIN | D11 | Partagée avec le MOSI de l'écran (D11) |
| T_CLK | D13 | Partagée avec le SCK de l'écran (D13) |
| T_DO | D12 | Partagée avec le MISO de l'écran (D12) |

Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Le MCU de l'Arduino UNO Q expose une seule interface SPI matérielle sur les connecteurs Uno, donc les trois périphériques — écran, carte SD et contrôleur tactile — partagent les mêmes trois lignes de données. La bibliothèque DIYables_TFT_SPI gère à la fois l'écran et le contrôleur tactile XPT2046 via une seule API, donc aucune bibliothèque SPI séparée n'est nécessaire pour la partie tactile.
Code Arduino UNO Q — Structure Minimale du Sketch
L'Arduino UNO Q dispose de deux processeurs qui fonctionnent ensemble :
- Le MCU STM32 pilote l'écran TFT SPI et lit le contrôleur tactile — il affiche tout le texte et les graphiques en temps réel
- Le MPU Qualcomm exécute Debian Linux et gère le Wi-Fi, Python et la connectivité cloud
- Dans cette section, seul le MCU est programmé — le côté Linux reste inactif. Une section ultérieure montre comment les deux processeurs fonctionnent ensemble via Bridge.
Tous les sketches utilisant la bibliothèque DIYables_TFT_SPI partagent ce squelette :
Passez les dimensions physiques en pixels de votre écran au constructeur. Les modules utilisant la même puce de pilotage existent en différentes tailles.
Code Arduino UNO Q — Dessiner des Formes
Le sketch ci-dessous présente les primitives de dessin Adafruit GFX sur votre écran TFT SPI : cercles, triangles, rectangles, rectangles arrondis et lignes.
Ce que fait le code :
- Crée l'objet écran pour votre puce de pilotage
- Initialise l'écran et définit la rotation en mode paysage
- Adapte la position de chaque forme à la taille réelle de l'écran
- Redessine toute la grille de formes colorées toutes les 10 secondes
Étapes Rapides
Première fois avec Arduino UNO Q ? Suivez le tutoriel Démarrer avec Arduino UNO Q pour préparer votre environnement de développement avant de continuer.
- Connecter : Câblez l'écran TFT SPI à l'Arduino UNO Q comme indiqué dans le schéma de câblage, puis branchez le câble USB-C.
- Ouvrir Arduino App Lab : Lancez Arduino App Lab et attendez qu'il détecte votre Arduino UNO Q — cela peut prendre plusieurs minutes au premier lancement.
- Créer une nouvelle application : Cliquez sur le bouton Créer une nouvelle application.

- Donnez un nom à l'application, par exemple : DIYables_TftSpi
- Cliquez sur Créer pour confirmer.
- Vous verrez un ensemble de dossiers et de fichiers générés dans votre nouvelle application.

- Trouvez le fichier sketch/sketch.ino — c'est là que vous collerez le sketch MCU.
- Install the library: Click the Add sketch library button (the open book icon with a + sign) in the left sidebar.

- Search for Arduino_RouterBridge created by Arduino and click the Install button.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
- Téléverser : Cliquez sur le bouton Exécuter dans Arduino App Lab pour compiler et téléverser sur le STM32.

L'écran affiche une grille de formes colorées qui se rafraîchit toutes les quelques secondes !
- Conseil Pro : Réglez la largeur et la hauteur dans le constructeur sur la taille réelle en pixels de votre écran. Une erreur à ce niveau est la cause la plus fréquente d'une image décalée ou tronquée.
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| begin() | Initialise le contrôleur de l'écran. À appeler une fois dans setup(). | TFT_display.begin(); |
| setRotation(r) | Fait pivoter le système de coordonnées. 0=portrait, 1=paysage. | TFT_display.setRotation(1); |
| fillScreen(color) | Efface l'écran avec une couleur unie. | TFT_display.fillScreen(WHITE); |
| colorRGB(r,g,b) | Construit une couleur RGB565 16 bits à partir de composantes 8 bits. | colorRGB(0, 128, 255) |
| fillCircle(x,y,r,color) | Dessine un cercle plein. | TFT_display.fillCircle(80, 80, 40, RED); |
| fillRect(x,y,w,h,color) | Dessine un rectangle plein. | TFT_display.fillRect(10, 10, 60, 40, BLUE); |
| drawRoundRect(x,y,w,h,r,color) | Dessine le contour d'un rectangle arrondi. | TFT_display.drawRoundRect(5,5,100,50,10,GREEN); |
Code Arduino UNO Q — Afficher du Texte et des Nombres
Ce sketch montre comment afficher des chaînes et des nombres avec différentes tailles, couleurs et positions sur l'écran TFT SPI.
Ce que fait le code :
- Remplit l'écran en blanc
- Définit une couleur de texte magenta et une grande taille de texte
- Affiche une valeur de température avec une décimale et un symbole de degré
- Affiche une valeur d'humidité sur la ligne suivante
Étapes Rapides
- Copiez le code ci-dessus et collez-le dans sketch/sketch.ino.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.

L'écran affiche les valeurs de température et d'humidité en grand texte magenta.
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| setTextColor(color) | Définit la couleur du texte. | TFT_display.setTextColor(BLACK); |
| setTextSize(size) | Met le texte à l'échelle. La taille 1 correspond à 6x8 pixels. | TFT_display.setTextSize(2); |
| setCursor(x, y) | Positionne le curseur de texte. | TFT_display.setCursor(10, 30); |
| print(value) | Affiche une chaîne ou un nombre à la position du curseur. | TFT_display.print("Temp: "); |
| println(value) | Affiche et passe à la ligne suivante. | TFT_display.println(25.4); |
Code Arduino UNO Q — Dessiner une Image
Ce sketch affiche une image bitmap RGB565 en couleur stockée dans la mémoire programme. Les données de l'image sont déclarées dans bitmap.h sous forme de tableau const uint16_t marqué PROGMEM. Cela conserve les données de pixels en mémoire flash plutôt qu'en SRAM, de sorte que l'écran fonctionne correctement même lorsque la RAM est limitée. Copiez bitmap.h dans le dossier du sketch avant de compiler.
Ce que fait le code :
- Inclut le tableau bitmap depuis bitmap.h
- Lit la taille réelle de l'écran pour centrer l'image
- Dessine le bitmap RGB565 à la position centrée
- Inverse les couleurs de l'écran toutes les 2 secondes comme effet simple
Étapes Rapides
- Copiez le code ci-dessus et collez-le dans sketch/sketch.ino.
- Créez un nouveau fichier nommé bitmap.h dans le même dossier que le sketch :
- Dans Arduino App Lab, faites un clic droit sur le dossier sketch/ et choisissez Nouveau fichier.
- Nommez-le bitmap.h.
- Copiez le tableau bitmap ci-dessous et collez-le dans bitmap.h. Ce tableau contient le logo DIYables.
- Mettez à jour img_width et img_height dans le sketch avec les dimensions de votre image.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.
- Préparez votre image (format JPEG ou PNG).
- Convertissez-la en tableau bitmap avec l'outil Image to Bitmap Converter.
- Téléversez votre image et réglez la taille pour qu'elle s'adapte à votre écran.
- Pour les PNG transparents, choisissez une couleur d'arrière-plan.
- Cliquez sur Convert, puis copiez le tableau généré dans bitmap.h.
- Mettez à jour img_width et img_height, puis cliquez à nouveau sur Exécuter.

L'écran affiche l'image bitmap chargée depuis la mémoire programme.
Pour utiliser votre propre image, suivez ces étapes :

Remarque : Si vous modifiez bitmap.h et que le sketch ne se recompile pas, ajoutez un espace n'importe où dans le fichier sketch pour forcer une recompilation.
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| drawRGBBitmap(x,y,bitmap,w,h) | Dessine un bitmap RGB565 en PROGMEM à partir du pixel (x, y). | TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320); |
| fillScreen(color) | Efface l'écran avant de dessiner l'image. | TFT_display.fillScreen(BLACK); |
| invertDisplay(flag) | Active ou désactive l'inversion des couleurs de l'écran. | TFT_display.invertDisplay(true); |
Code Arduino UNO Q — Dessiner une Image depuis une Carte SD
Ce sketch lit un fichier image BMP 24 bits depuis une carte micro SD et envoie les données de pixels à l'écran par petits morceaux. Cette approche diffuse l'image sans jamais la garder entièrement en RAM, ce qui la rend pratique pour les grands écrans.
Connectez la carte SD au même bus SPI que l'écran. Partagez MOSI (D11), SCK (D13) et MISO (D12). Attribuez une broche CS séparée au module SD — elle est définie comme SD_CS dans le sketch (D4).
Ce que fait le code :
- Initialise la carte SD sur sa propre broche CS
- Lit l'en-tête BMP pour obtenir la largeur et la hauteur de l'image
- Centre l'image sur l'écran
- Diffuse les pixels ligne par ligne et les dessine sur l'écran TFT
- Affiche les messages de progression et d'erreur dans la console App Lab
Étapes Rapides
- Téléchargez diyables.bmp et copiez-le à la racine de votre carte Micro SD.
- Insérez la carte Micro SD dans l'emplacement du module d'écran.
- Copiez le code ci-dessus et collez-le dans sketch/sketch.ino.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.

- Ouvrez l'onglet Console et sélectionnez le sous-onglet Serial Monitor pour voir les messages de progression.
L'image est lue depuis la carte et affichée à l'écran.
Pour utiliser votre propre image :
- Utilisez l'outil Image to Bitmap Converter pour convertir votre image — cliquez sur Save as Bitmap pour télécharger le fichier .bmp.
- Gardez un nom de fichier court (moins de 9 caractères, sans compter .bmp).
- Copiez le fichier .bmp sur la carte Micro SD, mettez à jour le nom du fichier dans le sketch et cliquez sur Exécuter.
Sortie Console App Lab
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| SD.begin(cs) | Initialise la carte SD sur sa propre broche Chip Select. | SD.begin(SD_CS); |
| SD.open(name) | Ouvre un fichier stocké sur la carte SD. | File f = SD.open("diyables.bmp"); |
| width() / height() | Obtient la taille actuelle de l'écran après rotation. | uint16_t w = TFT_display.width(); |
| drawPixel(x,y,color) | Dessine un seul pixel dans la couleur donnée. | TFT_display.drawPixel(10, 20, color); |
Code Arduino UNO Q — Utiliser une Police Externe
Ce sketch affiche du texte à l'écran avec une police personnalisée compatible Adafruit GFX. Par rapport à la police bitmap 5x7 intégrée, les polices personnalisées offrent une meilleure lisibilité et un meilleur style. Le fichier de police est inclus comme en-tête et activé par un simple appel à setFont().
Ce que fait le code :
- Inclut l'en-tête de police FreeSansBold12pt7b
- Active la police avec setFont()
- Affiche les mêmes valeurs de température et d'humidité qu'auparavant, désormais dans la police personnalisée
Étapes Rapides
- Copiez le code ci-dessus et collez-le dans sketch/sketch.ino.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.

L'écran affiche le texte dans la police personnalisée. Remarquez la meilleure qualité des glyphes par rapport à la police intégrée.
Important : Certaines polices personnalisées n'incluent pas les caractères spéciaux comme le symbole de degré. La police intégrée les prend en charge.
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| setFont(&FontName) | Active une police personnalisée compatible GFX. Passez NULL pour revenir à la police 5x7 intégrée. | TFT_display.setFont(&FreeSans12pt7b); |
| setCursor(x, y) | Déplace le curseur de texte à la position donnée. | TFT_display.setCursor(10, 40); |
| setTextColor(color) | Définit la couleur du texte. | TFT_display.setTextColor(WHITE); |
| print(text) | Affiche une chaîne à la position actuelle du curseur avec la police active. | TFT_display.print("Hello!"); |
Code Arduino UNO Q — Lire un Point Tactile
Ce sketch lit les coordonnées tactiles du contrôleur tactile XPT2046, les affiche dans la console Arduino App Lab et dessine un point rouge à l'endroit touché. L'exécuter en premier vous aide à voir la plage numérique de votre écran spécifique.
Câblage : T_CLK sur D13, T_DIN sur D11, T_DO sur D12 (bus SPI partagé avec l'écran). T_CS sur D7, T_IRQ sur D2 ou laissée non connectée.
Ce que fait le code :
- Initialise le XPT2046 sur le bus SPI partagé
- Applique les valeurs de calibration tactile par défaut
- Attend un toucher et lit les coordonnées à l'écran
- Affiche les coordonnées dans la console et marque le point d'un point rouge
Étapes Rapides
- Copiez le code ci-dessus et collez-le dans sketch/sketch.ino.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.

- Ouvrez l'onglet Console et sélectionnez le sous-onglet Serial Monitor.
- Touchez l'écran et regardez les coordonnées apparaître !
Sortie Console App Lab
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| initTouchSPI(cs, irq) | Initialise le XPT2046 sur le bus SPI partagé. Utilisez -1 pour irq si la broche d'interruption n'est pas connectée. | TFT_display.initTouchSPI(7, 2); |
| setTouchCalibration(minX,maxX,minY,maxY) | Fait correspondre les valeurs ADC brutes aux coordonnées en pixels de l'écran. | TFT_display.setTouchCalibration(300, 3700, 300, 3700); |
| getTouch(x, y) | Récupère les coordonnées tactiles calibrées en pixels d'écran. Renvoie true lorsque l'écran est pressé. | if (TFT_display.getTouch(x, y)) { ... } |
| readTouchRaw(x, y, z) | Renvoie les valeurs tactiles ADC brutes sans appliquer de calibration. | TFT_display.readTouchRaw(x, y, z); |
Code Arduino UNO Q — Dessin Tactile
Ce sketch transforme l'écran tactile TFT SPI en une simple tablette de dessin au doigt. Les coordonnées tactiles calibrées placent de petits cercles pleins à chaque point de contact du doigt, formant un dessin continu au fil de son déplacement.
Ce que fait le code :
- Configure l'écran et le contrôleur tactile XPT2046
- Vérifie en continu si l'écran est pressé
- Dessine un petit point rouge à chaque point de contact
Étapes Rapides
- Copiez le code ci-dessus et collez-le dans sketch/sketch.ino.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.

Vous pouvez maintenant dessiner sur l'écran :
- Touchez et faites glisser sur l'écran pour peindre.
- Levez le doigt pour arrêter de dessiner.
- Touchez à nouveau pour continuer.
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| initTouchSPI(cs, irq) | Configure le XPT2046 sur le bus SPI partagé. | TFT_display.initTouchSPI(7, -1); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Inverse l'axe tactile lorsque X ou Y est en miroir sur votre écran. À appeler AVANT setTouchCalibration(). | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | Récupère les coordonnées tactiles calibrées. Renvoie true tant que l'écran est pressé. | if (TFT_display.getTouch(x, y)) { ... } |
| fillCircle(x, y, r, color) | Dessine un petit point au point de contact. | TFT_display.fillCircle(x, y, 3, RED); |
Code Arduino UNO Q — Bouton Tactile
Ce sketch dessine un bouton rectangulaire à l'écran et compare les coordonnées tactiles aux limites du bouton. Lorsque le bouton est touché, il se met en surbrillance et affiche un événement dans la console App Lab. C'est la façon la plus simple de créer une interface utilisateur tactile.
La broche T_IRQ est optionnelle pour cet exemple. Passez -1 comme argument irq si vous préférez ne pas la connecter.
Ce que fait le code :
- Dessine un bouton rouge portant l'étiquette "PRESS"
- Vérifie si chaque toucher tombe à l'intérieur du rectangle du bouton
- Applique un anti-rebond à l'appui pour qu'un seul toucher donne un seul événement
- Redessine le bouton en gris avec "PRESSED" et enregistre les événements d'appui et de relâchement
Étapes Rapides
- Copiez le code ci-dessus et collez-le dans sketch/sketch.ino.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.

- Ouvrez l'onglet Console et sélectionnez le sous-onglet Serial Monitor.
- Touchez le bouton à l'écran — il change de couleur pendant l'appui.
Sortie Console App Lab
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| initTouchSPI(cs, irq) | Initialise le XPT2046. Passez -1 pour irq pour interroger sans la broche d'interruption. | TFT_display.initTouchSPI(7, -1); |
| setTouchCalibration(minX,maxX,minY,maxY) | Applique la calibration pour que getTouch() renvoie des coordonnées en pixels de l'écran. | TFT_display.setTouchCalibration(300, 3700, 300, 3700); |
| getTouch(x, y) | Obtient la position tactile calibrée actuelle. Renvoie true tant que l'écran est pressé. | if (TFT_display.getTouch(x, y)) { ... } |
| fillRect(x, y, w, h, color) | Dessine un rectangle de couleur unie pour le fond du bouton. | TFT_display.fillRect(10, 10, 120, 60, BLUE); |
Code Arduino UNO Q — Calibration Tactile
Les exemples tactiles ci-dessus utilisent des valeurs de calibration par défaut et fonctionnent sur la plupart des écrans. Si la position tactile n'est pas précise, exécutez ce sketch pour mesurer la plage ADC brute de votre propre écran XPT2046. Touchez chaque coin lorsque cela vous est demandé, puis copiez les quatre nombres affichés dans setTouchCalibration() de vos autres sketches tactiles.
La calibration est nécessaire car la couche tactile résistive ne s'aligne pas parfaitement avec les pixels de l'écran en raison des différences de fabrication. Elle ne doit être effectuée qu'une seule fois par écran.
Ce que fait le code :
- Fait clignoter un point rouge dans chacun des quatre coins, numérotés de 1 à 4
- Fait la moyenne de plusieurs lectures brutes pendant que vous maintenez chaque coin
- Affiche en direct les valeurs brutes Z, X et Y pour que vous puissiez confirmer la détection du toucher
- Affiche à la fin une ligne setTouchCalibration() prête à l'emploi
Étapes Rapides
- Copiez le code ci-dessus et collez-le dans sketch/sketch.ino.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.

- Ouvrez l'onglet Console et sélectionnez le sous-onglet Serial Monitor.
- Appuyez et maintenez chaque point de coin clignotant dans l'ordre : haut-gauche, haut-droit, bas-droit, bas-gauche.
- Copiez la ligne setTouchCalibration() affichée dans le setup() de vos autres sketches tactiles.
Sortie Console App Lab
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| initTouchSPI(cs, irq) | Initialise le contrôleur tactile XPT2046. | TFT_display.initTouchSPI(7, 2); |
| readTouchRaw(x, y, z) | Lit les valeurs ADC brutes pour mesurer la plage de calibration. | TFT_display.readTouchRaw(x, y, z); |
| setTouchCalibration(minX,maxX,minY,maxY) | Enregistre les valeurs de calibration pour que getTouch() corresponde correctement aux coordonnées en pixels. | TFT_display.setTouchCalibration(305, 3696, 297, 3703); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Inverse l'axe tactile lorsque X ou Y est en miroir sur votre écran. À appeler AVANT d'exécuter la calibration pour que les valeurs enregistrées correspondent. | TFT_display.setTouchInvertY(true); |
Code Arduino UNO Q — Bus SPI Personnalisé
Ce sketch montre comment fournir une instance SPIClass explicite au constructeur de l'écran. Utilisez cette approche lorsque vous voulez nommer le bus explicitement, le partager avec une configuration supplémentaire, ou déplacer l'écran vers une seconde interface SPI sur les cartes qui en possèdent une.
Le MCU de l'Arduino UNO Q expose un seul bus SPI matériel sur D11, D13 et D12, donc MY_SPI reste &SPI ici. Le même sketch fonctionne sans modification sur les cartes à deux bus en changeant simplement ce define.
Ce que fait le code :
- Définit MY_SPI comme un pointeur vers le bus SPI à utiliser
- Passe ce pointeur comme dernier argument du constructeur
- Dessine une mire de test à barres de couleur rouge, verte et bleue
- Affiche une étiquette de confirmation par-dessus les barres
Étapes Rapides
- Copiez le code ci-dessus et collez-le dans sketch/sketch.ino.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.

L'écran démarre sur le bus SPI explicite et affiche la mire de test à barres de couleur.
Référence Rapide des Méthodes
| Méthode | Fonction | Utilisation |
|---|---|---|
| DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) | Variante du constructeur qui accepte un pointeur vers n'importe quelle SPIClass. Vaut &SPI par défaut lorsque l'argument est omis. | DIYables_ILI9341_SPI tft(240, 320, 10, 9, 8, &SPI); |
| begin() | Initialise l'écran sur le bus SPI configuré. | TFT_display.begin(); |
Bridge : Linux + MCU
Cette section montre comment programmer les deux processeurs de l'Arduino UNO Q pour que le côté Linux puisse contrôler l'écran TFT SPI et lire l'entrée tactile à distance :
- L'écran TFT SPI et le contrôleur tactile XPT2046 sont connectés au MCU (STM32) — le MCU affiche toute la sortie et lit chaque toucher
- Le MPU ne peut pas piloter le TFT ni lire le tactile directement — il doit demander les résultats au MCU via Bridge.call(), qui déclenche le callback Bridge.provide() correspondant sur le MCU
- Le MPU dispose du Wi-Fi — exécutant Debian Linux complet, il peut accéder à Internet, appeler des API REST et envoyer des mises à jour d'affichage depuis n'importe où
- Arduino_RouterBridge permet la communication RPC entre les deux processeurs — le service Arduino Router sous Linux gère tout le trafic
- ⚠️ /dev/ttyHS1 (Linux) et Serial1 (MCU) sont RÉSERVÉS par le routeur — ne les ouvrez jamais dans le code utilisateur
En résumé : MCU pilote l'écran TFT SPI et lit le tactile → MPU demande les commandes et les données tactiles → MPU les utilise via Internet.
Code MCU (Bridge)
Code Python (Bridge)
Étapes Rapides
- Connecter : Câblez l'écran TFT SPI et le contrôleur tactile XPT2046 à l'Arduino UNO Q, puis branchez le câble USB-C.
- Ouvrir Arduino App Lab : Lancez Arduino App Lab et attendez la détection de la carte.
- Créer une nouvelle application : Cliquez sur Créer une nouvelle application, nommez-la DIYables_TftSpiBridge, puis cliquez sur Créer.
- Coller le sketch MCU : Copiez le code MCU Bridge ci-dessus et collez-le dans sketch/sketch.ino.
- Coller le code Python : Copiez le code Python Bridge ci-dessus et collez-le dans le fichier Python de l'application.
- Install the library: Click the Add sketch library button (the open book icon with a + sign) in the left sidebar.

- Search for Arduino_RouterBridge created by Arduino and click the Install button.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
- Téléverser : Cliquez sur le bouton Exécuter dans Arduino App Lab.

- Remarque : Assurez-vous que Bridge.begin() est appelé dans le sketch MCU et que le sketch est téléversé avant d'exécuter le script Python côté Linux.
- ⚠️ Avertissement : N'ouvrez jamais directement /dev/ttyHS1 (sous Linux) et n'utilisez jamais Serial1 (sur le MCU) dans votre code — ils sont réservés par l'Arduino Router et y accéder cassera le Bridge.
Sortie Console App Lab
Telegram
Contrôlez l'écran TFT SPI depuis n'importe où avec Telegram. Envoyez un message depuis votre téléphone et l'écran se met à jour en temps réel — et demandez à la carte où vous avez touché l'écran pour la dernière fois.
Si vous n'avez pas encore de bot Telegram, consultez Arduino UNO Q - Bot Telegram pour obtenir votre token de bot avant de continuer.
Cette section couvre :
- L'exécution d'un script Python côté Linux de l'Arduino UNO Q pour écouter les messages Telegram
- Le transfert des commandes de Telegram vers le côté MCU pour écrire sur l'écran TFT SPI
- Le renvoi du résultat du MCU — l'état de l'écran ou le dernier point tactile — sous forme de réponse Telegram
Sketch MCU : Conservez le même sketch MCU de la section Bridge précédente — aucune modification nécessaire. Assurez-vous qu'il est déjà téléversé et en cours d'exécution sur le STM32 avant de continuer.
Code Python (Telegram)
Étapes Rapides
- Remplacez YOUR_TELEGRAM_BOT_TOKEN par votre vrai token de bot de BotFather.
- Remplacez YOUR_CHAT_ID par votre identifiant de chat Telegram.
- Collez ce code Python dans le fichier Python de votre application, en conservant le même sketch MCU de la section Bridge.
- Cliquez sur le bouton Exécuter dans Arduino App Lab.

- Ouvrez Telegram et envoyez /start à votre bot pour voir la liste des commandes.
- Remarque : Remplacez YOUR_BOT_TOKEN par le token obtenu auprès de @BotFather sur Telegram.
Sortie Console App Lab
ArduinoBot
OpenClaw
You can adapt the OpenClaw to this tutorial by refering the instruction on Arduino UNO Q - OpenClaw Tutorial
Dépannage
Si l'écran ne se comporte pas comme prévu, vérifiez d'abord ces points :
- Écran noir — Vérifiez 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 deux autres doivent rester commentées.
- Image décalée ou tronquée — La largeur et la hauteur dans le constructeur doivent correspondre à la taille physique de l'écran.
- Rien ne s'affiche avec un rétroéclairage lumineux — Vérifiez que VCC et LED / BL sont sur 3,3V, pas sur 5V.
- Le tactile ne fonctionne pas — Exécutez le sketch de calibration tactile pour obtenir des valeurs de calibration propres à votre écran.
- Axe tactile inversé — Appelez setTouchInvertX(true) ou setTouchInvertY(true) avant setTouchCalibration().
Compatibilité des Plateformes
La bibliothèque DIYables_TFT_SPI repose uniquement sur les API Arduino standard — SPI, digitalWrite et millis :
- Elle fonctionne sur le MCU de l'Arduino UNO Q (STM32) via Arduino App Lab
- Les mêmes sketches fonctionnent aussi sans modification sur d'autres cartes compatibles Arduino
- Seuls les numéros de broches et la taille de l'écran dans le constructeur doivent être ajustés d'une carte à l'autre
Idées de Projets
Vous pouvez réaliser de nombreux projets créatifs avec un écran TFT SPI et l'Arduino UNO Q :
- Tableau de bord météo Wi-Fi : Le côté Linux récupère une prévision depuis une API en ligne et le MCU l'affiche sur l'écran TFT
- Panneau de commande tactile : Dessinez des boutons à l'écran qui commutent des LED, des relais ou des moteurs câblés au MCU
- Tableau de messages à distance : Envoyez un texte via Telegram qui apparaît instantanément sur l'écran, où que vous soyez dans le monde
- Cadre photo : Faites défiler les images BMP stockées sur la carte Micro SD en diaporama
- Tablette de signature : Capturez une signature dessinée au doigt et laissez le côté Linux l'envoyer dans le cloud
- Moniteur de capteurs en direct : Affichez les lectures de température, d'humidité ou de distance en grands chiffres faciles à lire
Relevez le Défi
Prêt à aller plus loin avec l'écran TFT SPI sur Arduino UNO Q ? Essayez ces défis :
- Facile : Changez la couleur et le rayon du stylo dans le sketch Dessin Tactile pour que chaque nouveau toucher peigne dans une couleur différente.
- Moyen : Ajoutez un second bouton à l'écran à côté du premier, et affichez un message différent pour chaque bouton dans la console App Lab.
- Avancé : Construisez un tableau de bord contrôlé par Telegram : le côté Python récupère des données météo en direct via Wi-Fi, les envoie via Bridge, et le MCU dessine une jauge de température avec une barre colorée sur l'écran TFT SPI.