Guide professionnel : Animation bitmap sur écran tactile ILI9341 2,4″ avec Visuino

Composants et fournitures

Arduino UNO	×	1
Écran tactile TFT ILI9341 2,4″ Shield pour Arduino	×	1

Applications et services en ligne

Visuino - Environnement de développement graphique pour Arduino

Arduino IDE (version 1.6.7 ou supérieure requise)

À propos de ce projet

Les shields d'affichage TFT tactile basés sur l'ILI9341 sont des shields d'affichage très populaires et peu coûteux pour Arduino. Visuino les supporte depuis un certain temps, mais je n'avais pas encore rédigé de tutoriel à leur sujet. Récemment, plusieurs personnes m'ont posé des questions sur l'utilisation de ces écrans avec Visuino, j'ai donc décidé de créer ce guide.

Dans ce tutoriel, je vais vous montrer à quel point il est simple de connecter le shield à l'Arduino et de le programmer avec Visuino pour animer un bitmap qui se déplace sur l'écran.

Étape 1 : Composants

• Une carte Arduino Uno compatible (peut fonctionner avec un Mega, mais non testé)
• Un shield écran tactile TFT ILI9341 2,4″ pour Arduino

Étape 2 : Connecter le shield ILI9341 à l'Arduino

Enfichez simplement le shield TFT sur l'Arduino Uno comme illustré sur les photos.

Étape 3 : Démarrer Visuino et ajouter le shield d'affichage TFT

• Démarrez Visuino
• Cliquez sur le bouton « Flèche vers le bas » du composant Arduino pour ouvrir le menu déroulant
• Sélectionnez « Add Shields... »
• Dans la boîte de dialogue « Shields », développez la catégorie « Displays », sélectionnez « TFT Color Touch Screen Display ILI9341 Shield » et cliquez sur « + » pour l'ajouter

Étape 4 : Ajouter un élément « Draw Text » pour l'ombre du texte

• Dans l'inspecteur d'objets, cliquez sur le bouton « ... » à côté de la propriété « Elements » de l'élément « TFT Display »
• Dans l'éditeur d'éléments, sélectionnez « Draw Text » et cliquez sur « + »
• Définissez la propriété « Color » sur « aclSilver »
• Définissez la propriété « Size » sur « 4 »
• Définissez la propriété « Text » sur « Visuino »
• Définissez « X » sur « 43 » et « Y » sur « 278 »

Étape 5 : Ajouter un élément « Draw Text » pour le texte principal

• Ajoutez un second élément « Draw Text »
• Définissez « Size » sur « 4 », « Text » sur « Visuino »
• Définissez « X » sur « 40 » et « Y » sur « 275 » (légèrement décalé pour créer l'effet d'ombre)

Étape 6 : Ajouter un élément « Draw Bitmap » pour l'animation

• Dans l'éditeur d'éléments, sélectionnez « Draw Bitmap » et ajoutez-le
• Cliquez sur le bouton « ... » de la propriété « Bitmap » pour ouvrir l'« Éditeur de bitmap »
• Cliquez sur « Load... » et sélectionnez votre fichier bitmap (attention à la taille pour la mémoire Arduino)
• Validez par « OK »

Étape 7 : Ajouter des broches pour les propriétés X et Y du bitmap

• Cliquez sur le bouton « Pin » devant la propriété « X » de « Draw Bitmap1 » et sélectionnez « Integer SinkPin »
• Faites de même pour la propriété « Y »

Étape 8 : Ajouter et configurer deux générateurs de sinus entiers

• Dans la boîte à composants, tapez « sine », sélectionnez « Sine Integer Generator » et déposez-en deux dans la zone de conception
• SineIntegerGenerator1 (axe X) : Amplitude = 96, Offset = 96, Frequency = 0,2
• SineIntegerGenerator2 (axe Y) : Amplitude = 120, Offset = 120, Frequency = 0,03

Étape 9 : Connecter les générateurs aux coordonnées du bitmap

• Connectez la sortie « Out » de SineIntegerGenerator1 à l'entrée « X » de « Draw Bitmap1 »
• Connectez la sortie « Out » de SineIntegerGenerator2 à l'entrée « Y » de « Draw Bitmap1 »

Étape 10 : Ajouter et connecter les composants Repeat et Clock Multi Source

Pour synchroniser la mise à jour des positions et le rendu du bitmap :

• Ajoutez un composant « Repeat » (génère des événements en continu)
• Ajoutez un composant « Clock Multi Source » (génère 2 événements séquentiels)
• Connectez « Out » de Repeat1 à « In » de ClockMultiSource1
• Connectez « Pin[0] » de ClockMultiSource1 à « In » de SineIntegerGenerator1 ET SineIntegerGenerator2
• Connectez « Pin[1] » de ClockMultiSource1 à l'entrée « Clock » de « Draw Bitmap1 »

Étape 11 : Générer, compiler et téléverser le code Arduino

• Dans Visuino, appuyez sur F9 ou cliquez sur le bouton de génération pour créer le code Arduino et ouvrir l'IDE
• Dans l'Arduino IDE, cliquez sur Téléverser pour compiler et charger le programme

Étape 12 : Profitez du résultat !

Félicitations ! Votre projet est terminé. Le bitmap (logo Visuino) se déplace maintenant en animation fluide sur l'écran ILI9341.

Le projet Visuino complet et le bitmap sont disponibles en téléchargement : visuino.com