Démo d'affichage TFT ILI9341 — Graphismes et balle rebondissante sur Arduino

Introduction

Les affichages TFT couleur sont un excellent moyen d’ajouter un retour visuel riche à vos projets Arduino. Dans ce tutoriel, nous piloterons un TFT 240x320 basé sur ILI9341 en utilisant les bibliothèques Adafruit ILI9341 et Adafruit GFX. Vous apprendrez à câbler l’affichage, installer les bibliothèques nécessaires et écrire du code qui dessine des éléments d’interface statiques et anime une balle rebondissante. Tout cela s’exécute directement dans votre navigateur avec le simulateur Velxio — aucun matériel requis !

Présentation du circuit

Commençons par examiner le circuit. Le schéma est simple : un Arduino Uno communique avec l’affichage ILI9341 via SPI (Serial Peripheral Interface).

Voici la liste complète des connexions :

• SCK (Serial Clock) et MOSI (Master Out Slave In) sont les lignes de données SPI. Elles transportent l’horloge et les données de l’Arduino vers l’affichage.
• CS (Chip Select) indique à l’affichage quand écouter les commandes SPI. Actif à l’état bas.
• D/C (Data/Command) sélectionne si la transmission SPI est une commande ou des données de pixels.
• RST (Reset) réinitialise le contrôleur de l’affichage. Nous le connectons à une broche numérique pour pouvoir effectuer une réinitialisation matérielle si nécessaire.
• LED contrôle le rétroéclairage. Nous le mettrons à l’état HAUT pour allumer le rétroéclairage.

Aucun composant externe n’est requis — l’affichage fonctionne en logique 5V (la plupart des modules ILI9341 tolèrent le 5V) et les broches SPI sont connectées directement.

Présentation du code

Plongeons maintenant dans le code. Nous utiliserons la bibliothèque Adafruit ILI9341 ainsi que la bibliothèque Adafruit GFX pour les primitives graphiques. Ces bibliothèques doivent être installées via le Gestionnaire de bibliothèques.

Ouvrez le Gestionnaire de bibliothèques (Outils > Gérer les bibliothèques) et recherchez “Adafruit ILI9341” et “Adafruit GFX Library”. Installez les deux. La bibliothèque SPI est incluse automatiquement.

Voici le code complet :

// TFT ILI9341 Display Demo (240x320)
// Library: Adafruit ILI9341 + Adafruit GFX
// Connect: CS=10, DC/RS=9, RST=8, LED=7, MOSI=11(SPI), SCK=13(SPI)

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

#define TFT_CS   10
#define TFT_DC    9
#define TFT_RST   8
#define TFT_LED   7

Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);

// Background color: blue (visible on dark simulator canvas)
#define BG_COLOR 0x001F

// Ball state
int ballX = 120, ballY = 200;
int ballDX = 3, ballDY = 2;
const int BALL_R = 10;

// Play-field boundaries
const int FX = 5, FY = 110, FW = 230, FH = 200;

void drawStaticUI() {
  tft.fillScreen(BG_COLOR);

  // Title
  tft.setTextSize(3);
  tft.setTextColor(tft.color565(255, 220, 0));
  tft.setCursor(20, 10);
  tft.print("VELXIO TFT");

  // Subtitle
  tft.setTextSize(2);
  tft.setTextColor(tft.color565(180, 180, 255));
  tft.setCursor(30, 50);
  tft.print("ILI9341 Demo");

  // Color palette bars
  tft.fillRect(10, 82, 70, 18, tft.color565(220, 50, 50));
  tft.fillRect(85, 82, 70, 18, tft.color565(50, 200, 50));
  tft.fillRect(160, 82, 70, 18, tft.color565(50, 100, 240));

  // Play-field border
  tft.drawRect(FX, FY, FW, FH, tft.color565(80, 80, 130));
}

void setup() {
  pinMode(TFT_LED, OUTPUT);
  digitalWrite(TFT_LED, HIGH);

  tft.begin();
  drawStaticUI();
}

void loop() {
  // Erase old ball
  tft.fillCircle(ballX, ballY, BALL_R, BG_COLOR);

  // Update position
  ballX += ballDX;
  ballY += ballDY;

  // Bounce off field borders
  if (ballX < FX + BALL_R + 1 || ballX > FX + FW - BALL_R - 1) ballDX = -ballDX;
  if (ballY < FY + BALL_R + 1 || ballY > FY + FH - BALL_R - 1) ballDY = -ballDY;

  // Draw ball
  tft.fillCircle(ballX, ballY, BALL_R, tft.color565(255, 140, 0));

  delay(30);
}

Points clés du code

• Définitions des broches : Nous définissons TFT_CS, TFT_DC, TFT_RST et TFT_LED comme les broches 10, 9, 8 et 7 respectivement. Cela correspond à notre câblage.
• Initialisation de la bibliothèque : Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST); crée l’objet d’affichage. La bibliothèque gère la communication SPI en interne.
• Contrôle du rétroéclairage : Dans setup(), nous mettons la broche 7 à l’état HAUT pour allumer le rétroéclairage. Sans cela, l’écran resterait sombre.
• Interface statique : drawStaticUI() remplit l’écran avec un fond bleu, affiche deux lignes de texte, dessine trois rectangles colorés comme palette et délimite un rectangle de jeu.
• Boucle d’animation : Dans loop(), nous effaçons la balle en dessinant un cercle rempli de la couleur de fond, mettons à jour sa position, vérifions les collisions avec les bords du terrain de jeu et redessinons la balle en orange. Un delay(30) contrôle la fréquence d’images.
• Conversion des couleurs : tft.color565(r, g, b) convertit les valeurs RVB 8 bits au format 16 bits 565 utilisé par l’affichage.

Concepts clés pour les étudiants

1. Communication SPI : L’affichage utilise SPI, un protocole série synchrone. L’Arduino est le maître, l’affichage est l’esclave. Seuls trois fils (SCK, MOSI, CS) sont nécessaires pour les données ; D/C et RST sont des lignes de contrôle supplémentaires.
2. Primitives graphiques : La bibliothèque Adafruit GFX fournit des fonctions comme fillScreen(), fillRect(), drawRect(), fillCircle(), setCursor(), print() et setTextSize(). Elles facilitent le dessin de formes et de texte.
3. Double tampon (concept) : Nous effaçons l’ancienne balle avant d’en dessiner une nouvelle. Cela évite les traînées. Dans des projets plus avancés, vous pourriez utiliser un tampon d’image.
4. Détection de collision : La logique de la balle rebondissante vérifie si le centre de la balle se trouve à moins de BALL_R pixels du bord. Si c’est le cas, la direction est inversée.
5. Profondeur de couleur : L’ILI9341 supporte 262K couleurs (18 bits), mais la bibliothèque utilise 16 bits (65K couleurs) pour la vitesse. color565() empaquette le RVB en bits 5-6-5.

Pièges courants et conseils de débogage

• Rétroéclairage éteint : Si l’écran reste sombre, assurez-vous que la broche 7 est à l’état HAUT. Dans le simulateur, vérifiez que le fil de la broche LED est connecté.
• Mauvaises broches : Vérifiez que CS, DC, RST, MOSI et SCK correspondent au code. Une seule erreur de câblage peut provoquer un affichage illisible ou absent.
• Bibliothèque non installée : Le code ne compilera pas sans les bibliothèques Adafruit. Utilisez le Gestionnaire de bibliothèques pour les installer.
• Conflits SPI : Si vous avez d’autres périphériques SPI, assurez-vous que leurs broches CS ne sont pas actives simultanément. Ici, seul le TFT utilise SPI.
• La balle disparaît : Si la balle quitte le terrain de jeu, vérifiez les limites de collision. La condition utilise FX + BALL_R + 1 pour tenir compte du rayon de la balle.

Extensions suggérées

Une fois la démonstration de base opérationnelle, essayez ces améliorations :

• Ajoutez une deuxième balle avec une vitesse et une couleur différentes.
• Affichez des données de capteur (par exemple, d’un potentiomètre) sous forme de graphique à barres ou de nombre.
• Créez un jeu simple comme Pong ou un chronomètre de réaction.
• Utilisez une entrée tactile si votre affichage possède un contrôleur tactile (par exemple, XPT2046).
• Optimisez les performances en utilisant startWrite() et endWrite() pour regrouper les transactions SPI.

Essayez par vous-même !

Prêt à voir cela en action ? Ouvrez l’exemple en direct dans Velxio et appuyez sur le bouton Run.

Vous pouvez également explorer la barre d’outils du canevas pour zoomer, vous déplacer et inspecter la simulation.

Si vous souhaitez construire cela à partir de zéro, utilisez le sélecteur de composants pour ajouter un Arduino Uno et un affichage ILI9341.

Cliquez sur le lien ci-dessous pour ouvrir l’exemple et commencer à expérimenter :

Ouvrir la démo d’affichage TFT ILI9341 sur Velxio

Bon code !