Animation bitmap sur le bouclier d'affichage à écran tactile TFT ILI9341
Composants et fournitures
 |
| × | 1 | |||
| × | 1 |
Applications et services en ligne
 |
| |||
 |
|
À propos de ce projet
Boucliers d'écran tactile TFT basés sur ILI9341 sont des écrans d'affichage très populaires à faible coût pour Arduino . Visuino a eu un support pour eux pendant un certain temps, mais je n'ai jamais eu la chance d'écrire un tutoriel 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 tutoriel, je vais vous montrer à quel point il est facile de connecter le Shield à Arduino , et programmez-le avec Visuino pour animer un Bitmap pour se déplacer sur l'affichage.
Étape 1 : Composants
- Un Arduino Uno carte compatible (ça marche peut-être avec Mega aussi, mais je n'ai pas encore testé le shield avec)
- Un Shield écran tactile TFT 2.4" ILI9341 pour Arduino
Étape 2 :connectez le blindage d'écran tactile TFT ILI9341 à Arduino
Branchez le Shield TFT au-dessus de l'Arduino Uno comme indiqué sur les photos.
Étape 3 :Démarrez Visuino et ajoutez TFT Display Shield
Pour commencer à programmer l'Arduino, vous aurez besoin de l'Arduino IDE installé à partir d'ici :http://www.arduino.cc/.
Assurez-vous d'installer la version 1.6.7 ou supérieure, sinon ce tutoriel ne fonctionnera pas !
Le Visuino :https://www.visuino.com doit également être installé.
- Démarrer Visuino comme le montre la première photo
- Cliquez sur la "Flèche vers le bas " du composant Arduino pour ouvrir le menu déroulant (Image 1 )
- Dans le menu, sélectionnez "Ajouter des boucliers... " (Image 1 )
- Dans les "Boucliers " boîte de dialogue développez les "Affichages " et sélectionnez le "Écran tactile couleur TFT ILI9341 Shield ", puis cliquez sur le "+ " 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 :
- Dans l'inspecteur d'objets, cliquez sur le bouton "... " à côté de la valeur des "Eléments " propriété de l'"Affichage TFT " Élément (Image 1 )
- Dans l'éditeur d'éléments, sélectionnez « Dessiner du texte », puis cliquez sur le « + bouton " (Image 2 ) pour en ajouter un (Image 3 )
- Dans l'inspecteur d'objets, définissez la valeur de la "Couleur " de la propriété "Dessiner le texte1 " élément à "aclSilver " (Image 3 )
- Dans l'inspecteur d'objets, définissez la valeur de "Size " de la propriété "Dessiner le texte1 élément " à "4 " (Image 4 ). Cela agrandit le texte
- Dans l'inspecteur d'objets, définissez la valeur du "Texte " de la propriété "Dessiner le texte1 élément " à "Visuino " (Image 5 )
- Dans l'inspecteur d'objets, définissez la valeur du "X " de la propriété "Dessiner le texte1 élément " à "43 " (Image 6 )
- Dans l'inspecteur d'objets, définissez la valeur de "Y " de la propriété "Dessiner le texte1 élément " à "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 :
- 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 )
- Dans l'inspecteur d'objets, définissez la valeur de "Size " de la propriété "Dessiner le texte1 élément " à "4 " (Image 2 )
- Dans l'inspecteur d'objets, définissez la valeur du "Texte " de la propriété "Dessiner le texte1 élément " à "Visuino " (Image 3 )
- Dans l'inspecteur d'objets, définissez la valeur du "X " de la propriété "Dessiner le texte1 élément " à "40 " (Image 4 )
- Dans l'inspecteur d'objets, définissez la valeur de "Y " de la propriété "Dessiner le texte1 élément " à "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 :
- Dans l'éditeur d'éléments, sélectionnez « Dessiner un bitmap ”, puis cliquez sur le bouton "" (Image 1 ) pour en ajouter un (Image 2 )
- Dans l'inspecteur d'objets, cliquez sur le bouton "... " à côté de la valeur du "Bitmap " de la propriété "Dessiner Bitmap1 " Élément (Image 2 ) pour ouvrir le "Éditeur Bitmap " (Image 3 )
- Dans "Éditeur Bitmap " cliquez sur le bouton " Charger... bouton " (Image 3 ) pour ouvrir la boîte de dialogue d'ouverture de fichier (Image 4 )
- Dans la boîte de dialogue d'ouverture de fichier, sélectionnez le bitmap à dessiner et cliquez sur le bouton "Ouvrir bouton " (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
- Dans "Éditeur Bitmap " cliquez sur le " OK ." (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 Draw 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 :
- Dans l'inspecteur d'objets, cliquez sur le "Épingle " devant le " X " de la propriété "Dessiner Bitmap1 élément " (Image 1 ), et sélectionnez "Integer SinkPin " (Image 2 )
- Dans l'inspecteur d'objets, cliquez sur le "Épingle " devant le " Y " de la propriété "Dessiner Bitmap1 élément " (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 :
- Tapez "sine " dans la zone Filtre de la boîte à outils des composants, puis sélectionnez le "Générateur d'entiers sinusoïdaux composant " (Image 1 ), et supprimez deux d'entre eux dans la zone de conception
- Dans l'inspecteur d'objets, définissez la valeur de "Amplitude " propriété du SineIntegerGenerator1 composant à "96 " (Image 2 )
- Dans l'inspecteur d'objets, définissez la valeur du "Décalage " propriété du SineIntegerGenerator1 composant à "96 " (Image 3 )
- Dans l'inspecteur d'objets, définissez la valeur de la "Fréquence " propriété du SineIntegerGenerator1 composant à "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
- Dans l'inspecteur d'objets, définissez la valeur de "Amplitude " propriété du SineIntegerGenerator2 composant à "120 " (Image 1 )
- Dans l'inspecteur d'objets, définissez la valeur du "Décalage " propriété du SineIntegerGenerator2 composant à "120 " (Image 2 )
- Dans l'inspecteur d'objets, définissez la valeur de la "Fréquence " propriété du SineIntegerGenerator2 composant à "0,03 " (Image 3 )
- Connectez le "Sortie " broche de sortie du SineIntegerGenerator1 composant au "X " broche d'entrée du "Shields.TFT Sisplay.Elements.Draw Bitmap1 élément " de l'Arduino composant (Image 4 )
- Connectez le "Sortie " broche de sortie du SineIntegerGenerator2 composant au "Y " broche d'entrée du "Shields.TFT Display.Elements.Draw Bitmap1 élément " de l'Arduino composant (Image 5 )
Étape 10 :Dans Visuino :ajoutez et connectez les composants Start et Clock Multi Source
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" :
- Tapez "répéter " dans la zone Filtre de la boîte à outils des composants, puis sélectionnez " Répéter composant " (Image 1 ), et déposez-le dans la zone de conception (Image 2 )
- Tapez "multi " dans la zone Filtre de la boîte à outils des composants, puis sélectionnez " Clock Multi Source composant " (Image 2 ), et déposez-le dans la zone de conception (Image 3 )
- Connectez le "Sortie " broche de sortie du Repeat1 composant au "In " broche d'entrée de la ClockMultiSource1 composant (Image 3 )
- Connectez le "Pin[ 0 ] " broche de sortie du "Out " broches de la ClockMultiSource1 composant au "In " broche d'entrée du SineIntegerGenerator1 composant (Image 4 )
- Connectez le "Pin[ 0 ] " broche de sortie du "Out " broches de la ClockMultiSource2 composant au "In " broche d'entrée du SineIntegerGenerator1 composant (Image 5 )
- Connectez le "Épingle[ 1 ] " broche de sortie de la "Horloge " broche d'entrée du "Shields.TFT Display.Elements.Draw Bitmap1 élément " de l'Arduino composant (Image 6 )
Étape 11 :générer, compiler et télécharger le code Arduino
- En Visuino , Appuyez sur F9 ou cliquez sur le bouton affiché sur Image 1 pour générer le code Arduino et ouvrir l'IDE Arduino
- Dans l'IDE Arduino , cliquez sur Télécharger bouton, pour compiler et télécharger le code (Image 2 )
Étape 12 :Et jouez...
Félicitations ! Vous avez terminé le projet.
Images 2, 3, 4 et 5 et la Vidéo afficher 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 Image 1 vous pouvez voir le Visuino complet diagramme.Également joint le Visuino projet, que j'ai créé pour ce tutoriel, et le bitmap avec le Visuino logo. Vous pouvez le télécharger et l'ouvrir dans Visuino :https://www.visuino.com
FPHWHL0IV0AHJLX.zip
Processus de fabrication