Arduino Uno: Visuino ilə ILI9341 TFT Toxunma Ekran Qalxanındakı Bitmap Animasiyası: 12 Addım (Şəkillərlə)

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:48

ILI9341 əsaslı TFT Toxunma Ekranı Qalxanları, Arduino üçün çox populyar aşağı qiymətli Ekran Qalxanlarıdır. Visuinonun uzun müddətdir ki, onlara dəstəyi var, amma onlardan necə istifadə olunacağına dair bir dərs yazmaq şansım olmayıb. Son vaxtlar az adam Visuino ilə ekranlardan istifadə ilə bağlı suallar verdi, buna görə də bir dərs hazırlamaq qərarına gəldim.

Bu Dərslikdə, Shield'i Arduinoya bağlamağın və Ekranda hərəkət etmək üçün Bitmap canlandırmaq üçün Visuino ilə proqramlaşdırmağın nə qədər asan olduğunu sizə göstərəcəyəm.

Addım 1: Komponentlər

1. Bir Arduino Uno uyğun lövhə (Mega ilə də işləyə bilər, amma hələ də qalxanı sınamamışam)
2. Arduino üçün bir ILI9341 2.4 "TFT Toxunma Qalxanı

Addım 2: ILI9341 TFT Toxunma Ekran Qalxanı Arduinoya qoşun

TFT Shield -i şəkillərdə göstərildiyi kimi Arduino Uno -nun üstünə bağlayın

Addım 3: Visuinonu işə salın və TFT Ekran Qalxanı əlavə edin

Arduino proqramlaşdırmağa başlamaq üçün Arduino IDE -ni buradan yükləməlisiniz:

1.6.7 və ya daha yüksək bir versiyanı quraşdırdığınızdan əmin olun, əks halda bu Təlimat işləməyəcək

Visuino: https://www.visuino.com da quraşdırılmalıdır.

1. Visuino'yu ilk şəkildə göstərildiyi kimi başladın
2. Açılır Menyu açmaq üçün Arduino komponentinin "Arrow Down" düyməsini basın (Şəkil 1)
3. Menyudan "Qalxan əlavə et …" seçin (Şəkil 1)
4. "Qalxan" informasiya qutusunda "Göstərişlər" kateqoriyasını genişləndirin və "TFT Rəngli Dokunmatik Ekran Ekranı ILI9341 Qalxanı" seçin, sonra əlavə etmək üçün "+" düyməsini basın (Şəkil 2)

Addım 4: Visuinoda: Mətn Kölgəsi üçün Draw Text Element əlavə edin

Sonra mətn və bitmap göstərmək üçün Qrafik elementləri əlavə etməliyik. Əvvəlcə mətnin kölgəsini çəkmək üçün qrafik elementi əlavə edəcəyik:

1. Object Inspector'da, "TFT Display" Elementinin "Elements" xüsusiyyətinin dəyərinin yanındakı "…" düyməsini basın (Şəkil 1)
2. Elements redaktorunda "Mətn çək" seçin və sonra əlavə etmək üçün "+" düyməsini (Şəkil 2) basın (Şəkil 3)
3. Obyekt Müfəttişində "Mətn Çək1" elementinin "Rəng" xüsusiyyətinin dəyərini "aclSilver" olaraq təyin edin (Şəkil 3)
4. Object Inspector -də "Draw Text1" elementinin "Size" xüsusiyyətinin dəyərini "4" olaraq təyin edin (Şəkil 4). Bu mətni daha böyük edir
5. Obyekt Müfəttişində "Mətn Çək1" elementinin "Mətn" xüsusiyyətinin dəyərini "Visuino" olaraq təyin edin (Şəkil 5)
6. Obyekt Müfəttişində "Mətn Çək1" elementinin "X" xüsusiyyətinin dəyərini "43" olaraq təyin edin (Şəkil 6)
7. Obyekt Müfəttişində "Mətn Çək1" elementinin "Y" xüsusiyyətinin dəyərini "278" olaraq təyin edin (Şəkil 6)

Addım 5: Visuino'da: Mətn Ön Planı üçün Draw Text Element əlavə edin

İndi mətni çəkmək üçün qrafik elementi əlavə edəcəyik:

1. Elements redaktorunda "Mətn çək" seçin və ikincisini əlavə etmək üçün "+" düyməsini (Şəkil 1) vurun (Şəkil 2)
2. Obyekt Müfəttişində "Mətn Çək1" elementinin "Ölçüsü" xüsusiyyətinin dəyərini "4" olaraq təyin edin (Şəkil 2)
3. Obyekt Müfəttişində "Mətn Çək1" elementinin "Mətn" xüsusiyyətinin dəyərini "Visuino" olaraq təyin edin (Şəkil 3)
4. Obyekt Müfəttişində "Mətn Çək1" elementinin "X" xüsusiyyətinin dəyərini "40" olaraq təyin edin (Şəkil 4)
5. Obyekt Müfəttişində "Mətn Çək1" elementinin "Y" xüsusiyyətinin dəyərini "275" olaraq təyin edin (Şəkil 4)

Addım 6: Visuino'da: Animasiya üçün Draw Bitmap Elementi əlavə edin

Sonra bitmap çəkmək üçün qrafik elementi əlavə edəcəyik:

1. Elements redaktorunda "Bitmap Çək" seçin və sonra əlavə etmək üçün "+" düyməsini (Şəkil 1) basın (Şəkil 2)
2. "Bitmap Redaktoru" nu açmaq üçün Obyekt Müfəttişində "Bitmap Çək" Elementinin (Şəkil 2) "Bitmap" xüsusiyyətinin yanındakı "…" düyməsini basın (Şəkil 3)
3. "Bitmap Redaktoru" nda "Yüklə …" düyməsini (Şəkil 3) tıklayaraq Fayl Aç Dialogunu açın (Şəkil 4)
4. Fayl Aç Dialogunda, çəkmək üçün bitmap seçin və "Aç" düyməsini basın (Şəkil 4). Fayl çox böyükdürsə, Arduino yaddaşına sığmayacaq. Kompilyasiya zamanı yaddaş səhvindən qurtarsanız, daha kiçik bir bitmap seçməyiniz lazım ola bilər
5. "Bitmap Redaktoru" nda "OK" düyməsini basın. dialoqu bağlamaq üçün düyməni (Şəkil 5) basın

Addım 7: Visuino'da: Draw Bitmap Elementinin X və Y Xassələri üçün Pinlər əlavə edin

Bitmapi canlandırmaq üçün onun X və Y mövqeyini idarə etməliyik. Bunun üçün X və Y xassələri üçün sancaqlar əlavə edəcəyik:

1. Obyekt Müfəttişində "Bitmap1 Çək" elementinin "X" xüsusiyyətinin qarşısındakı "Pin" düyməsini vurun (Şəkil 1) və "Integer SinkPin" seçin (Şəkil 2)
2. Obyekt Müfəttişində "Bitmap1 Çiz" elementinin "Y" xüsusiyyətinin qarşısındakı "Pin" düyməsini vurun (Şəkil 3) və "Integer SinkPin" seçin (Şəkil 4)

Addım 8: Visuino'da: 2 ədəd Tam Sinus Generatoru əlavə edin və birincisini konfiqurasiya edin

Bitmap hərəkətini canlandırmaq üçün 2 Integer sinus generatorundan istifadə edəcəyik:

1. Komponent Alətlər Qutusunun Filtr qutusuna "sinus" yazın, sonra "Sinus Tamsayı Generatoru" komponentini seçin (Şəkil 1) və ikisini dizayn sahəsinə atın.
2. Object Inspector'da SineIntegerGenerator1 komponentinin "Amplitude" xüsusiyyətinin dəyərini "96" olaraq təyin edin (Şəkil 2)
3. Object Inspector'da SineIntegerGenerator1 komponentinin "Ofset" xüsusiyyətinin dəyərini "96" olaraq təyin edin (Şəkil 3)
4. Object Inspector'da, SineIntegerGenerator1 komponentinin "Frequency" xüsusiyyətinin dəyərini "0.2" olaraq təyin edin (Şəkil 4)

Addım 9: Visuino -da: İkinci Sinus generatorunu konfiqurasiya edin və Sinus generatorlarını Bitmapin X və Y Koordinat Pinlərinə bağlayın

1. Object Inspector'da SineIntegerGenerator2 komponentinin "Amplitude" xüsusiyyətinin dəyərini "120" olaraq təyin edin (Şəkil 1)
2. Object Inspector'da SineIntegerGenerator2 komponentinin "Ofset" xüsusiyyətinin dəyərini "120" olaraq təyin edin (Şəkil 2)
3. Object Inspector'da, SineIntegerGenerator2 komponentinin "Frequency" xüsusiyyətinin dəyərini "0.03" olaraq təyin edin (Şəkil 3)
4. SineIntegerGenerator1 komponentinin "Çıxış" çıxış pinini Arduino komponentinin "Shields. TFT Sisplay. Elements. Draw Bitmap1" elementinin "X" giriş pininə qoşun (Şəkil 4)
5. SineIntegerGenerator2 komponentinin "Çıxış" çıxış pinini Arduino komponentinin "Shields. TFT Display. Elements. Draw Bitmap1" elementinin "Y" giriş pininə qoşun (Şəkil 5)

Addım 10: Visuinoda: Başlanğıc və Saata Çoxlu Mənbə Komponentləri əlavə edin və qoşun

X və Y mövqeyi hər dəfə yeniləndikdə bitmap göstərmək üçün "Bitmap1 Çək" elementinə bir saat siqnalı göndərməliyik. Vəzifələr dəyişdirildikdən sonra əmri göndərmək üçün hadisələri sinxronizasiya etmək üçün bir yola ehtiyacımız var. Bunun üçün davamlı olaraq hadisələr yaratmaq üçün Təkrar komponentini, ardıcıl olaraq 2 hadisəni yaratmaq üçün Saat Çox Mənbədən istifadə edəcəyik. Birinci hadisə, sinus generatorlarını X və Y mövqelərini yeniləyəcək, ikincisi isə "Bitmap1 Çək" i saatlayacaq:

1. Komponent Alətlər Qutusunun Filtr qutusuna "təkrar et" yazın, sonra "Təkrarla" komponentini seçin (Şəkil 1) və dizayn sahəsinə buraxın (Şəkil 2)
2. Komponent Alətlər Qutusunun Filtr qutusuna "çoxlu" yazın, sonra "Saat Çox Mənbə" komponentini seçin (Şəkil 2) və dizayn sahəsinə buraxın (Şəkil 3)
3. Repeat1 komponentinin "Çıxış" çıxış pinini ClockMultiSource1 komponentinin "Giriş" giriş pininə qoşun (Şəkil 3)
4. ClockMultiSource1komponentinin "Çıxış" pinlərinin "Pin [0]" çıxış pinini SineIntegerGenerator1 komponentinin "Giriş" giriş pininə qoşun (Şəkil 4)
5. ClockMultiSource2componentinin "Çıxış" pinlərinin "Pin [0]" çıxış pinini SineIntegerGenerator1 komponentinin "In" giriş pininə qoşun (Şəkil 5)
6. Arduino komponentinin "Shields. TFT Display. Elements. Draw Bitmap1" elementinin "Saat" giriş pininin "Pin [1]" çıxış pinini qoşun (Şəkil 6)

Addım 11: Arduino Kodunu yaradın, tərtib edin və yükləyin

1. Visuinoda F9 düyməsini basın və ya Arduino kodunu yaratmaq üçün Şəkil 1 -də göstərilən düyməni basın və Arduino IDE -ni açın.
2. Arduino IDE -də kodu tərtib etmək və yükləmək üçün Yüklə düyməsini vurun (Şəkil 2)

Addım 12: Və oynayın …

Təbrik edirik! Layihəni tamamlamısınız.

Şəkillər 2, 3, 4 və 5 və Videoda bağlı və gücləndirilmiş layihə göstərilir. Bitmap, Videoda göründüyü kimi ILI9341 əsaslı TFT Touchscreen Display Shield ətrafında hərəkət etdiyini görəcəksiniz.

Şəkil 1 -də tam Visuino diaqramını görə bilərsiniz. Əlavə olaraq bu Təlimat üçün yaratdığım Visuino layihəsi və Visuino loqotipi olan bitmap. Visuino'da yükləyə və aça bilərsiniz: