Arduino Uno : animation bitmap sur écran tactile TFT ILI9341 avec Visuino : 12 étapes (avec images)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Les écrans d'affichage à écran tactile TFT basés sur ILI9341 sont des écrans d'affichage à faible coût très populaires pour Arduino. Visuino les prend en charge depuis un certain temps, mais je n'ai jamais eu l'occasion d'écrire un didacticiel sur la façon de les utiliser. Récemment, cependant, peu de personnes ont posé des questions sur l'utilisation des écrans avec Visuino, j'ai donc décidé de faire un tutoriel.

Dans ce didacticiel, je vais vous montrer à quel point il est facile de connecter le Shield à Arduino et de le programmer avec Visuino pour animer un bitmap afin de se déplacer sur l'écran.

Étape 1: Composants

1. Une carte compatible Arduino Uno (ça peut aussi fonctionner avec Mega, mais je n'ai pas encore testé le shield avec)
2. Un écran tactile TFT ILI9341 2.4" pour Arduino

Étape 2: connectez le blindage d'écran tactile ILI9341 TFT à Arduino

Branchez le TFT Shield sur l'Arduino Uno comme indiqué sur les photos

Étape 3: Démarrez Visuino et ajoutez le bouclier d'affichage TFT

Pour commencer à programmer l'Arduino, vous aurez besoin d'avoir l'IDE Arduino installé à partir d'ici:

Assurez-vous que vous installez 1.6.7 ou supérieur, sinon ce Instructable ne fonctionnera pas

Le Visuino: https://www.visuino.com doit également être installé.

1. Démarrez Visuino comme indiqué sur la première image
2. Cliquez sur le bouton "Flèche vers le bas" du composant Arduino pour ouvrir le menu déroulant (Image 1)
3. Dans le menu, sélectionnez "Ajouter des boucliers…" (Image 1)
4. Dans la boîte de dialogue "Shields", développez la catégorie "Displays", et sélectionnez le "TFT Color Touch Screen Display ILI9341 Shield", puis cliquez sur le bouton "+" pour l'ajouter (Image 2)

Étape 4: Dans Visuino: Ajoutez un élément de texte de dessin pour l'ombre de texte

Ensuite, nous devons ajouter des éléments graphiques pour rendre le texte et le bitmap. Nous allons d'abord ajouter un élément graphique pour dessiner l'ombre du texte:

1. Dans l'inspecteur d'objets, cliquez sur le bouton "…" à côté de la valeur de la propriété "Elements" de l'élément "TFT Display" (Image 1)
2. Dans l'éditeur d'éléments sélectionnez "Dessiner du texte", puis cliquez sur le bouton "+" (Image 2) pour en ajouter un (Image 3)
3. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Color" de l'élément "Draw Text1" sur "aclSilver" (Image 3)
4. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Size" de l'élément "Draw Text1" sur "4" (Image 4). Cela agrandit le texte
5. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Texte" de l'élément "Draw Text1" sur "Visuino" (Image 5)
6. Dans l'inspecteur d'objets, définissez la valeur de la propriété "X" de l'élément "Draw Text1" sur "43" (Image 6)
7. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Y" de l'élément "Draw Text1" sur "278" (Image 6)

Étape 5: Dans Visuino: ajoutez un élément de texte de dessin pour le premier plan du texte

Nous allons maintenant ajouter un élément graphique pour dessiner le texte:

1. Dans l'éditeur d'éléments, sélectionnez "Dessiner du texte", puis cliquez sur le bouton "+" (Image 1) pour en ajouter un deuxième (Image 2)
2. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Size" de l'élément "Draw Text1" sur "4" (Image 2)
3. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Texte" de l'élément "Draw Text1" sur "Visuino" (Image 3)
4. Dans l'inspecteur d'objets, définissez la valeur de la propriété "X" de l'élément "Draw Text1" sur "40" (Image 4)
5. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Y" de l'élément "Draw Text1" sur "275" (Image 4)

Étape 6: Dans Visuino: ajoutez l'élément Draw Bitmap pour l'animation

Ensuite, nous allons ajouter un élément graphique pour dessiner le bitmap:

1. Dans l'éditeur d'éléments, sélectionnez « Draw Bitmap », puis cliquez sur le bouton « + » (Image 1) pour en ajouter un (Image 2)
2. Dans l'inspecteur d'objets, cliquez sur le bouton "…" à côté de la valeur de la propriété "Bitmap" de l'élément "Draw Bitmap1" (Image 2) pour ouvrir l'"Éditeur Bitmap" (Image 3)
3. Dans "Bitmap Editor", cliquez sur le bouton "Charger…" (Image 3) pour ouvrir la boîte de dialogue d'ouverture de fichier (Image 4)
4. Dans la boîte de dialogue d'ouverture de fichier, sélectionnez le bitmap à dessiner et cliquez sur le bouton "Ouvrir" (Image 4). Si le fichier est trop volumineux, il risque de ne pas pouvoir tenir dans la mémoire Arduino. Si vous manquez de mémoire lors de la compilation, vous devrez peut-être sélectionner un bitmap plus petit
5. Dans le "Bitmap Editor", cliquez sur le bouton "OK". bouton (Image 5) pour fermer la boîte de dialogue

Étape 7: dans Visuino: ajoutez des épingles pour les propriétés X et Y de l'élément de dessin bitmap

Pour animer le Bitmap, nous devons contrôler sa position X et Y. Pour cela, nous allons ajouter des broches pour les propriétés X et Y:

1. Dans l'inspecteur d'objets, cliquez sur le bouton "Pin" devant la propriété "X" de l'élément "Draw Bitmap1" (Image 1) et sélectionnez "Integer SinkPin" (Image 2)
2. Dans l'inspecteur d'objets, cliquez sur le bouton "Pin" devant la propriété "Y" de l'élément "Draw Bitmap1" (Image 3) et sélectionnez "Integer SinkPin" (Image 4)

Étape 8: dans Visuino: ajoutez 2 générateurs sinusoïdaux entiers et configurez le premier

Nous utiliserons 2 générateurs de sinus Integer pour animer le mouvement du bitmap:

1. Tapez "sine" dans la zone Filtre de la boîte à outils des composants, puis sélectionnez le composant "Sine Integer Generator" (Image 1) et déposez-en deux dans la zone de conception
2. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Amplitude" du composant SineIntegerGenerator1 sur "96" (Image 2)
3. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Offset" du composant SineIntegerGenerator1 sur "96" (Image 3)
4. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Frequency" du composant SineIntegerGenerator1 sur "0.2" (Image 4)

Étape 9: dans Visuino: configurez le deuxième générateur sinusoïdal et connectez les générateurs sinusoïdaux aux broches de coordonnées X et Y du bitmap

1. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Amplitude" du composant SineIntegerGenerator2 sur "120" (Image 1)
2. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Offset" du composant SineIntegerGenerator2 sur "120" (Image 2)
3. Dans l'inspecteur d'objets, définissez la valeur de la propriété "Frequency" du composant SineIntegerGenerator2 sur "0.03" (Image 3)
4. Connectez la broche de sortie "Out" du composant SineIntegerGenerator1 à la broche d'entrée "X" de l'élément "Shields. TFT Sisplay. Elements. Draw Bitmap1" du composant Arduino (Image 4)
5. Connectez la broche de sortie "Out" du composant SineIntegerGenerator2 à la broche d'entrée "Y" de l'élément "Shields. TFT Display. Elements. Draw Bitmap1" du composant Arduino (Image 5)

Étape 10: dans Visuino: ajoutez et connectez les composants multi-sources de démarrage et d'horloge

Pour rendre le bitmap à chaque fois que les positions X et Y sont mises à jour, nous devons envoyer un signal d'horloge à l'élément "Draw Bitmap1". Pour envoyer la commande après que les positions ont été modifiées, nous avons besoin d'un moyen de synchroniser les événements. Pour cela, nous utiliserons le composant Repeat pour générer constamment des événements et Clock Multi Source pour générer 2 événements en séquence. Le premier événement cadencera les générateurs de sinus pour mettre à jour les positions X et Y, et le second cadencera le "Draw Bitmap1":

1. Tapez "répéter" dans la zone Filtre de la boîte à outils des composants, puis sélectionnez le composant "Répéter" (Image 1) et déposez-le dans la zone de conception (Image 2)
2. Tapez "multi" dans la zone Filtre de la boîte à outils des composants, puis sélectionnez le composant "Clock Multi Source" (Image 2) et déposez-le dans la zone de conception (Image 3)
3. Connectez la broche de sortie "Out" du composant Repeat1 à la broche d'entrée "In" du composant ClockMultiSource1 (Image 3)
4. Connectez la broche de sortie "Pin[0]" des broches "Out" du composant ClockMultiSource1 à la broche d'entrée "In" du composant SineIntegerGenerator1 (Image 4)
5. Connectez la broche de sortie "Pin[0]" des broches "Out" du composant ClockMultiSource2 à la broche d'entrée "In" du composant SineIntegerGenerator1 (Image 5)
6. Connectez la broche de sortie "Pin[1]" de la broche d'entrée "Clock" de l'élément "Shields. TFT Display. Elements. Draw Bitmap1" du composant Arduino (Image 6)

Étape 11: générer, compiler et télécharger le code Arduino

1. Dans Visuino, appuyez sur F9 ou cliquez sur le bouton affiché sur l'image 1 pour générer le code Arduino et ouvrez l'IDE Arduino
2. Dans l'IDE Arduino, cliquez sur le bouton Télécharger pour compiler et télécharger le code (Image 2)

Étape 12: Et jouez…

Toutes nos félicitations! Vous avez terminé le projet.

Les images 2, 3, 4 et 5 et la vidéo montrent le projet connecté et sous tension. Vous verrez le bitmap se déplacer autour du bouclier d'affichage à écran tactile TFT basé sur ILI9341, comme on le voit sur la vidéo.

Sur l'image 1, vous pouvez voir le diagramme Visuino complet. Le projet Visuino, que j'ai créé pour ce Instructable, et le bitmap avec le logo Visuino sont également joints. Vous pouvez le télécharger et l'ouvrir dans Visuino: