ESP32 C3 Super Mini - Écran Tactile TFT LCD ILI9341 ILI9488 ST7789 Interface SPI

Matériel Requis

Ou vous pouvez acheter les kits suivants:

À Propos de l'Écran TFT SPI

Un écran TFT SPI est un écran LCD couleur qui communique avec l'ESP32 C3 Super Mini via une liaison SPI rapide.

Caractéristiques Principales :

• Un circuit intégré pilote à l'intérieur du module stocke les pixels et exécute les commandes de dessin.
• Seuls quelques fils sont nécessaires - le SPI est un bus à 3 fils plus une sélection de puce (chip select) par périphérique.
• Fonctionne avec les fonctions de dessin Adafruit GFX, donc les formes, le texte, les polices et les bitmaps sont prêts à l'emploi.
• Les versions tactiles ajoutent un contrôleur XPT2046 sur le même bus SPI.
• La bibliothèque DIYables_TFT_SPI pilote à la fois l'écran et la dalle tactile avec une seule API.

Spécifications Techniques :

• ILI9341 : Couleur RGB565 16 bits, SPI jusqu'à 40 MHz.
• ILI9488 : Couleur RGB666 18 bits via SPI, jusqu'à 24 MHz.
• ST7789 : Couleur RGB565 16 bits, SPI jusqu'à 40 MHz.
• Niveau logique : 3,3V - parfaitement adapté à l'ESP32 C3 Super Mini.
• Tailles d'écran : 1,3, 1,54, 2,2, 2,4, 2,8, 3,2 et 3,5 pouces.

Recommandation : Si vous n'avez pas encore acheté d'écran, choisissez le pilote ST7789. Il est facile à trouver, fonctionne à la vitesse SPI maximale de 40 MHz et c'est le choix le plus simple pour un nouveau projet ESP32 C3 Super Mini.

Brochage

La plupart des écrans TFT LCD SPI possèdent les broches suivantes.

Broches de l'écran :

Broches de la carte SD (si votre application doit accéder à la carte SD) :

Pour les écrans TFT qui prennent en charge le tactile, il existe des broches tactiles supplémentaires (si votre application utilise la fonction tactile et que l'écran la prend en charge) :

Schéma de Câblage

Câblez l'écran TFT LCD aux broches SPI matérielles de l'ESP32 C3 Super Mini.

• Remarque : VCC se connecte uniquement à 3,3V. Le 5V peut endommager l'ESP32 C3 Super Mini et l'écran.
• Remarque : Les broches SPI matérielles de l'ESP32 C3 Super Mini sont SCK = GPIO4, MISO = GPIO5, MOSI = GPIO6.
• Remarque : Chaque périphérique sur le bus a besoin de sa propre broche CS. L'écran utilise GPIO3, le contrôleur tactile utilise GPIO10 et la carte SD utilise GPIO7.
• Remarque — SDO (MISO) est optionnelle : La ligne SDO (MISO) transporte uniquement 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.

Sans Tactile

Connectez MOSI à GPIO6, SCK à GPIO4 et MISO à GPIO5. CS, DC et RST peuvent être n'importe quelle GPIO libre — GPIO3, GPIO0 et GPIO1 sont utilisées dans les exemples.

Écran :

Carte SD (si votre application doit accéder à la carte SD) :

Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.

Avec Tactile

Connectez le contrôleur tactile XPT2046 au même bus SPI de l'ESP32 C3 Super Mini, en partageant GPIO6, GPIO4 et GPIO5 avec l'écran.

Écran :

Contrôleur tactile (si votre application utilise la fonction tactile et que l'écran la prend en charge) :

Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.

L'ESP32 C3 Super Mini dispose d'un seul bus SPI matériel sur les broches du connecteur, donc l'écran, la carte SD et le contrôleur tactile partagent tous les trois mêmes lignes de données (MOSI GPIO6, SCK GPIO4, MISO GPIO5). 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'écran et le contrôleur tactile XPT2046 via une seule API — aucune bibliothèque SPI séparée n'est nécessaire pour la partie tactile.

Installation de la Bibliothèque

Installez la bibliothèque une seule fois, et tous les exemples ci-dessous pourront être compilés.

• Connectez la carte : Branchez l'ESP32 C3 Super Mini à votre ordinateur avec un câble USB Type-C.
• Ouvrez Arduino IDE : Assurez-vous que ESP32 C3 Super Mini est sélectionné dans Outils > Carte, et choisissez le bon port.
• Ouvrez le Gestionnaire de Bibliothèques : Cliquez sur l'icône Libraries dans la barre latérale gauche.
• Recherchez la bibliothèque : Tapez "DIYables_TFT_SPI" dans le champ de recherche et trouvez l'entrée DIYables.
• Installez-la : Cliquez sur Install, puis sur Install All lorsque les dépendances sont proposées.

• Search for DIYables TFT SPI created by DIYables.io and click the Install button.

Sketch de Départ

Voici le plus petit sketch qui fait fonctionner l'écran TFT LCD sur l'ESP32 C3 Super Mini.

Ce Que Fait Ce Code :

• Inclut la bibliothèque DIYables_TFT_SPI.
• Définit les broches CS, DC et RST sur GPIO3, GPIO0 et GPIO1.
• Crée l'objet écran pour votre puce pilote.
• Démarre l'écran et le met en mode paysage.

Atelier - Dessiner des Formes

L'exemple DrawShapes utilise toutes les primitives de dessin Adafruit GFX sur l'ESP32 C3 Super Mini.

Ce Que Fait Ce Code :

• Dessine des cercles vides et pleins.
• Dessine des triangles vides et pleins.
• Dessine des rectangles et des rectangles à coins arrondis.
• Dessine des losanges à partir de simples lignes.
• Redessine tout le motif toutes les 10 secondes.

Étapes Rapides

• Nouveau avec l'ESP32 C3 Super Mini ? Suivez d'abord notre tutoriel ESP32 C3 Super Mini - Premiers pas pour configurer votre environnement de développement.
• Câblez les composants : Connectez le module TFT LCD en suivant le tableau ci-dessus. Utilisez 3,3V pour VCC.
• Connectez la carte : Branchez l'ESP32 C3 Super Mini à votre ordinateur avec un câble USB Type-C.
• Sélectionnez votre carte : Assurez-vous que ESP32 C3 Super Mini est sélectionné dans Outils > Carte, et choisissez le port COM.
• Copiez le code : Collez le code ci-dessus dans Arduino IDE.
• Téléversez le code : Cliquez sur Téléverser et attendez le message de fin.
• Observez le résultat : L'écran affiche un motif de formes colorées.
• Astuce Pro : Décommentez uniquement la ligne du pilote qui correspond à votre écran. Un mauvais pilote donne un écran vide ou parasité.

Référence des Méthodes

Atelier - Afficher du Texte et des Nombres

L'exemple ShowTextAndNumber affiche des chaînes de caractères et des nombres avec le moteur de texte GFX intégré.

Ce Que Fait Ce Code :

• Définit la couleur et la taille du texte.
• Affiche une valeur de température avec une décimale.
• Affiche une valeur d'humidité avec un signe pourcentage.
• Place chaque ligne à sa propre position en pixels.

Étapes Rapides

• Câblez et téléversez : Utilisez le même câblage que pour la station des formes, puis cliquez sur Téléverser.
• Observez le résultat : L'écran affiche des lignes de texte de différentes couleurs et tailles.
• Astuce Pro : La taille de texte 1 fait 6x8 pixels. La taille 3 est facile à lire depuis l'autre bout de la pièce.

Référence des Méthodes

Atelier - Dessiner une Image

Dans cette station, vous chargez une image bitmap RGB565 en couleur sur l'écran TFT LCD. Les données de pixels sont compilées dans le firmware sous forme de tableau PROGMEM dans bitmap.h. Sur l'ESP32 C3 Super Mini, les données PROGMEM résident en flash et sont mappées dans l'espace d'adressage, donc les données de l'image n'utilisent pas de SRAM.

Ce Que Fait Ce Code :

• Inclut le tableau de l'image depuis bitmap.h.
• Lit la largeur et la hauteur réelles de l'écran depuis le pilote.
• Centre l'image sur l'écran.
• Inverse les couleurs toutes les 2 secondes pour que vous puissiez voir le rafraîchissement.

Ajoutez un second onglet nommé bitmap.h au sketch et collez-y ces données d'image.

Étapes Rapides

• Créez l'onglet : Dans Arduino IDE, appuyez sur Ctrl+Shift+N et nommez le nouveau fichier bitmap.h.
• Collez les données : Copiez le code bitmap ci-dessus dans cet onglet.
• Câblez le module : Connectez le TFT LCD à l'ESP32 C3 Super Mini. Utilisez 3,3V pour VCC.
• Téléversez le code : Choisissez la carte et le port, puis cliquez sur Téléverser.
• Observez le résultat : L'image apparaît au centre de l'écran.
• Astuce Pro : Utilisez l'outil Image to Bitmap Converter pour transformer votre propre PNG ou JPG en tableau bitmap, puis mettez à jour img_width et img_height.

Référence des Méthodes

Atelier - Dessiner une Image depuis la Carte SD

Dans cette station, vous lisez en continu un fichier bitmap depuis une carte micro SD directement vers l'écran TFT LCD. Le module carte SD partage le bus SPI avec l'écran et n'a besoin que de sa propre broche CS.

Ce Que Fait Ce Code :

• Démarre la carte SD sur la broche de sélection de puce GPIO7.
• Lit l'en-tête BMP pour obtenir la largeur et la hauteur de l'image.
• Centre l'image sur l'écran.
• Dessine l'image ligne par ligne à partir du fichier.

Câblez le module SD aux mêmes broches SPI que l'écran (GPIO6, GPIO4, GPIO5 sur l'ESP32 C3 Super Mini). Connectez le CS de la SD à GPIO7, que le sketch appelle SD_CS.

Étapes Rapides

• Câblez le module SD : Partagez MOSI (GPIO6), SCK (GPIO4), MISO (GPIO5) avec l'écran. Connectez le CS de la SD à GPIO7.
• Préparez la carte : Copiez un fichier BMP 24 bits nommé diyables.bmp à la racine de la carte SD.
• Insérez la carte : Mettez la carte micro SD dans le module.
• Connectez la carte : Branchez l'ESP32 C3 Super Mini à votre ordinateur avec un câble USB Type-C.
• Téléversez le code : Choisissez la carte et le port, puis cliquez sur Téléverser.
• Observez le résultat : L'image lue depuis la carte SD apparaît sur l'écran TFT LCD.
• Astuce Pro : Gardez des noms de fichiers courts (8 caractères ou moins avant .bmp) pour une meilleure compatibilité avec la bibliothèque SD.

Référence des Méthodes

Atelier - Utiliser une Police Externe

Dans cette station, vous remplacez la police matricielle par défaut par une police personnalisée Adafruit GFX plus nette. Changer de police ne demande qu'un seul appel de fonction.

Ce Que Fait Ce Code :

• Inclut l'en-tête de la police FreeSansBold12pt7b.
• Définit cette police avant de dessiner du texte.
• Affiche les valeurs de température et d'humidité avec le nouveau style.
• Garde la taille du texte à 1, car les polices personnalisées ont déjà leur propre taille.

Étapes Rapides

• Câblez le module : Connectez le TFT LCD à l'ESP32 C3 Super Mini. Utilisez 3,3V pour VCC.
• Téléversez le code : Choisissez la carte et le port, puis cliquez sur Téléverser.
• Comparez le rendu : Regardez la police personnalisée à l'écran et comparez-la à la police intégrée.
• Astuce Pro : Passez NULL à setFont() pour revenir à tout moment à la police intégrée 5x7.

Référence des Méthodes

Atelier - Lire un Point Tactile

Dans cette station, vous lisez le contrôleur tactile XPT2046 avec l'ESP32 C3 Super Mini. Chaque point touché est affiché sur le Moniteur Série et marqué d'un point rouge à l'écran.

Ce Que Fait Ce Code :

• Démarre le contrôleur tactile sur la broche de sélection de puce GPIO10.
• Applique une plage de calibration par défaut.
• Affiche les valeurs tactiles X et Y sur le Moniteur Série.
• Dessine un petit point rouge à l'endroit où vous appuyez.

Câblage : partagez le bus SPI (GPIO6, GPIO4, GPIO5) entre le XPT2046 et l'écran. T_CS va à GPIO10. T_IRQ peut rester non connectée. Tous les signaux sont en 3,3V.

Étapes Rapides

• Câblez la dalle tactile : Connectez T_CS à GPIO10 et partagez le bus SPI avec l'écran.
• Connectez la carte : Branchez l'ESP32 C3 Super Mini à votre ordinateur avec un câble USB Type-C.
• Téléversez le code : Choisissez la carte et le port, puis cliquez sur Téléverser.
• Ouvrez le Moniteur Série : Réglez le débit en bauds sur 115200.
• Appuyez sur l'écran : Les valeurs X et Y apparaissent lorsque vous touchez.
• Astuce Pro : Si les nombres varient dans le mauvais sens, lancez la station TouchCalibration et copiez ses valeurs ici.

Référence des Méthodes

Atelier - Dessin Tactile

Dans cette station, vous construisez une application de dessin tactile sur l'ESP32 C3 Super Mini. Faites glisser un doigt pour tracer une ligne sur l'écran TFT LCD.

Ce Que Fait Ce Code :

• Démarre le XPT2046 sur le bus SPI partagé.
• Applique les valeurs de calibration pour que le toucher corresponde aux pixels.
• Lit le point tactile à chaque boucle.
• Dessine un petit cercle plein à chaque point.

Étapes Rapides

• Câblez la dalle tactile : Même câblage que pour la station Touch Get Point. T_CS va à GPIO10.
• Connectez la carte : Branchez l'ESP32 C3 Super Mini à votre ordinateur avec un câble USB Type-C.
• Téléversez le code : Choisissez la carte et le port, puis cliquez sur Téléverser.
• Dessinez à l'écran : Touchez et faites glisser votre doigt pour dessiner.
• Astuce Pro : Modifiez PEN_RADIUS pour rendre le pinceau plus épais ou plus fin.

Référence des Méthodes

Atelier - Bouton Tactile

Dans cette station, vous construisez un bouton à l'écran qui réagit à un appui du doigt. Le code vérifie si le point touché se trouve dans le rectangle du bouton.

Ce Que Fait Ce Code :

• Dessine un rectangle rouge qui affiche PRESS.
• Lit le point tactile calibré à chaque boucle.
• Rend le bouton gris et affiche PRESSED tant que vous le maintenez.
• Applique un anti-rebond au toucher pour qu'un appui corresponde à un seul événement.
• Affiche PRESSED et RELEASED sur le Moniteur Série.

T_IRQ est optionnelle ici. Le sketch passe -1 comme argument irq et fonctionne en mode scrutation (polling).

Étapes Rapides

• Câblez la dalle tactile : Connectez T_CS à GPIO10. T_IRQ peut rester non connectée.
• Connectez la carte : Branchez l'ESP32 C3 Super Mini à votre ordinateur avec un câble USB Type-C.
• Téléversez le code : Choisissez la carte et le port, puis cliquez sur Téléverser.
• Ouvrez le Moniteur Série : Réglez le débit en bauds sur 115200.
• Appuyez sur le bouton : Regardez-le s'illuminer et afficher son état.
• Astuce Pro : Modifiez BUTTON_X, BUTTON_Y, BUTTON_W et BUTTON_H pour construire toute une rangée de boutons.

Référence des Méthodes

Atelier - Calibration Tactile

Dans cette station, vous trouvez les quatre valeurs de calibration de votre propre écran. Touchez chaque coin lorsque le point clignote, et l'ESP32 C3 Super Mini affiche les valeurs dont vous avez besoin.

Ce Que Fait Ce Code :

• Fait clignoter un point rouge dans chacun des quatre coins, numérotés de 1 à 4.
• Fait la moyenne de dix échantillons bruts pour chaque coin.
• Affiche en direct les valeurs brutes Z, X et Y pendant que vous attendez.
• Affiche à la fin une ligne setTouchCalibration() prête à être collée.

Étapes Rapides

• Câblez la dalle tactile : Même câblage que pour la station Touch Get Point. T_CS va à GPIO10.
• Connectez la carte : Branchez l'ESP32 C3 Super Mini à votre ordinateur avec un câble USB Type-C.
• Téléversez le code : Choisissez la carte et le port, puis cliquez sur Téléverser.
• Ouvrez le Moniteur Série : Réglez le débit en bauds sur 115200.
• Touchez chaque coin : Appuyez et maintenez le point clignotant jusqu'à voir "Captured!".
• Copiez le résultat : Collez la ligne setTouchCalibration() affichée dans les autres sketchs tactiles.
• Astuce Pro : Utilisez un stylet en plastique, pas un ongle, pour obtenir les lectures de coins les plus reproductibles.

Référence des Méthodes

Atelier - SPI Personnalisé

Dans cette station, vous passez votre propre objet SPIClass au constructeur de l'écran. C'est utile lorsque vous voulez un contrôle total sur le bus SPI que l'ESP32 C3 Super Mini utilise pour l'écran.

Ce Que Fait Ce Code :

• Définit MY_SPI comme un pointeur vers un objet bus SPI.
• Passe ce pointeur comme dernier argument du constructeur.
• Dessine trois barres de couleur pour confirmer que le bus fonctionne.
• Affiche un court message au centre de l'écran.

Étapes Rapides

• Gardez le bus par défaut : L'ESP32 C3 Super Mini dispose d'un seul bus SPI sur le connecteur, donc laissez MY_SPI à &SPI.
• Câblez le module : Utilisez GPIO6 pour MOSI, GPIO4 pour SCK, GPIO5 pour MISO, GPIO3 pour CS.
• Connectez la carte : Branchez l'ESP32 C3 Super Mini à votre ordinateur avec un câble USB Type-C.
• Téléversez le code : Choisissez la carte et le port, puis cliquez sur Téléverser.
• Observez le résultat : Des barres rouge, verte et bleue remplissent l'écran avec une étiquette de texte.
• Astuce Pro : Passer l'objet SPI explicitement rend votre sketch facile à porter sur une carte qui possède deux bus SPI.

Référence des Méthodes

Dépannage

Utilisez ce tableau lorsque l'écran TFT LCD ne se comporte pas correctement.

Idées d'Applications et de Projets

Voici quelques projets amusants à construire avec un ESP32 C3 Super Mini et un écran tactile TFT LCD SPI.

• Thermostat Tactile : Affichez la température de la pièce et réglez la consigne avec des boutons à l'écran.
• Panneau Météo Wi-Fi : Récupérez les prévisions via Wi-Fi et dessinez des icônes sur l'écran TFT LCD.
• Cadre Photo : Faites défiler des images bitmap chargées depuis une carte micro SD.
• Tableau de Bord de Capteurs : Tracez les valeurs des capteurs en direct sous forme de barres ou d'un graphique défilant.
• Tablette à Dessin : Transformez l'écran tactile en bloc à dessin avec des boutons de couleur.
• Contrôleur de Menu : Construisez un menu tactile qui fait passer votre projet d'un mode à l'autre.

Mettez-vous au Défi

Essayez ces défis pour aller plus loin avec l'ESP32 C3 Super Mini et votre écran TFT LCD SPI.

• Facile : Changez les couleurs et la taille du texte dans l'exemple ShowTextAndNumber.
• Facile : Remplacez le bitmap dans bitmap.h par votre propre image.
• Moyen : Ajoutez un second bouton tactile qui efface l'écran de dessin.
• Moyen : Affichez une lecture analogique en direct sur l'écran, en vous rappelant que l'ADC renvoie 0-4095. RST est optionnelle, donc reliez la broche RESET de l'écran à 3,3V et utilisez la GPIO1 ainsi libérée pour le capteur.
• Avancé : Construisez un menu tactile de trois pages qui passe d'une horloge à une jauge puis à une page de paramètres.
• Avancé : Enregistrez chaque point touché sur la carte micro SD, puis redessinez toute l'image après une réinitialisation.

Plateformes Prises en Charge

La bibliothèque est entièrement construite sur les API standard d'Arduino et prend en charge toutes les plateformes compatibles Arduino (architectures=*).

Tutoriels connexes

• ESP32 C3 Super Mini - LCD
• ESP32 C3 Super Mini - LCD 20x4
• ESP32 C3 Super Mini - Affichage SSD1309 OLED 128x64 | Tutoriel OLED 2.42 pouces I2C
• ESP32 C3 Super Mini - Affichage OLED 128x64
• ESP32 C3 Super Mini - Affichage OLED 128x32
• ESP32 C3 Super Mini - Affichage TFT LCD Circulaire Rond 1.28 Pouces
• ESP32 C3 Super Mini - Station Météo Intelligente