Arduino Uno: Bitmap Animation në ILI9341 TFT Touchscreen Shield Shield Me Visuino: 12 hapa (me fotografi)

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:27

Mburojat e ekranit me prekje TFT me bazë ILI9341 janë shumë të njohura Mburoja e ekranit me kosto të ulët për Arduino. Visuino ka pasur mbështetje për ta për një kohë të gjatë, por unë kurrë nuk kam pasur rastin të shkruaj një Tutorial se si t'i përdor ato. Kohët e fundit sidoqoftë pak njerëz bënë pyetje në lidhje me përdorimin e ekraneve me Visuino, kështu që vendosa të bëj një mësim.

Në këtë Tutorial, unë do t'ju tregoj se sa e lehtë është, të lidhësh Shield me Arduino dhe ta programosh me Visuino për të animuar një Bitmap për të lëvizur në ekran.

Hapi 1: Përbërësit

1. Një bord i pajtueshëm Arduino Uno (Mund të funksionojë edhe me Mega, por unë ende nuk e kam testuar mburojën me të)
2. Një ILI9341 2.4 "TFT Touchscreen Shield për Arduino

Hapi 2: Lidhni Mburojën e ekranit me prekje ILI9341 TFT me Arduino

Lidheni Mburojën TFT në krye të Arduino Uno siç tregohet në fotografi

Hapi 3: Filloni Visuino dhe Shtoni TFT Display Shield

Për të filluar programimin e Arduino, do t'ju duhet të keni të instaluar Arduino IDE nga këtu:

Sigurohuni që të instaloni 1.6.7 ose më të lartë, përndryshe ky Instructable nuk do të funksionojë

Visuino: https://www.visuino.com gjithashtu duhet të instalohet.

1. Filloni Visuino siç tregohet në foton e parë
2. Klikoni në butonin "Shigjeta poshtë" të komponentit Arduino për të hapur menunë Drop Down (Figura 1)
3. Nga Menyja zgjidhni "Shto Mburoja …" (Figura 1)
4. Në dialogun "Shields" zgjeroni kategorinë "Displays" dhe zgjidhni "TFT Color Touch Screen Display ILI9341 Shield", pastaj klikoni në butonin "+" për ta shtuar atë (Figura 2)

Hapi 4: Në Visuino: Shtoni elementin e vizatimit të tekstit për hijen e tekstit

Tjetra ne duhet të shtojmë elemente Graphics për të dhënë tekst dhe bitmap. Së pari ne do të shtojmë element grafik për të nxjerrë hijen e tekstit:

1. Në Inspektorin e Objekteve, klikoni në butonin "…" pranë vlerës së vetisë "Elemente" të Elementit "TFT Display" (Figura 1)
2. Në redaktorin e Elementeve zgjidhni "Vizatoni Tekst" dhe më pas klikoni në butonin "+" (Figura 2) për të shtuar një (Figura 3)
3. Në Object Inspector vendosni vlerën e vetisë "Color" të elementit "Draw Text1" në "aclSilver" (Figura 3)
4. Në Object Inspector vendosni vlerën e vetisë "Size" të elementit "Draw Text1" në "4" (Figura 4). Kjo e bën tekstin më të madh
5. Në Object Inspector vendosni vlerën e vetisë "Text" të elementit "Draw Text1" në "Visuino" (Figura 5)
6. Në Object Inspector vendosni vlerën e vetisë "X" të elementit "Draw Text1" në "43" (Figura 6)
7. Në Object Inspector vendosni vlerën e vetisë "Y" të elementit "Draw Text1" në "278" (Figura 6)

Hapi 5: Në Visuino: Shtoni elementin e tekstit të vizatimit për tekstin në plan të parë

Tani do të shtojmë element grafik për të vizatuar tekstin:

1. Në redaktorin e Elementeve zgjidhni "Vizatoni Tekst" dhe më pas klikoni në butonin "+" (Figura 1) për të shtuar të dytin (Figura 2)
2. Në Object Inspector vendosni vlerën e vetisë "Size" të elementit "Draw Text1" në "4" (Figura 2)
3. Në Object Inspector vendosni vlerën e vetisë "Text" të elementit "Draw Text1" në "Visuino" (Figura 3)
4. Në Object Inspector vendosni vlerën e vetisë "X" të elementit "Draw Text1" në "40" (Figura 4)
5. Në Inspektorin e Objektit vendosni vlerën e vetisë "Y" të elementit "Draw Text1" në "275" (Figura 4)

Hapi 6: Në Visuino: Shtoni Element Draw Bitmap për Animacionin

Tjetra ne do të shtojmë element grafik për të vizatuar bitmap:

1. Në redaktorin e Elementeve zgjidhni "Vizatoni Bitmap", dhe pastaj klikoni në butonin "+" (Figura 1) për të shtuar një (Figura 2)
2. Në Inspektorin e Objekteve, klikoni në butonin "…" pranë vlerës së vetisë "Bitmap" të Elementit "Draw Bitmap1" (Figura 2) për të hapur "Redaktuesin e Bitmap" (Figura 3)
3. Në "Bitmap Editor" klikoni në butonin "Load …" (Figura 3) për të hapur Dialogun e Hapur të Skedarit (Figura 4)
4. Në Dialogun File Open, zgjidhni bitmap -in për ta vizatuar dhe klikoni në butonin "Open" (Figura 4). Nëse skedari është shumë i madh mund të mos jetë në gjendje të futet në kujtesën Arduino. Nëse dilni nga gabimi i kujtesës gjatë përpilimit, mund t'ju duhet të zgjidhni një hartë më të vogël
5. Në "Bitmap Editor" klikoni në "OK". butoni (Figura 5) për të mbyllur dialogun

Hapi 7: Në Visuino: Shtoni kunjat për vetitë X dhe Y të elementit të vizatimit të bitmapit

Për të gjallëruar Bitmap, ne duhet të kontrollojmë pozicionin e tij X dhe Y. Për këtë ne do të shtojmë kunjat për vetitë X dhe Y:

1. Në Inspektorin e Objekteve klikoni në butonin "Pin" në frontin e vetisë "X" të elementit "Draw Bitmap1" (Figura 1), dhe zgjidhni "Integer SinkPin" (Figura 2)
2. Në Inspektorin e Objekteve klikoni në butonin "Pin" përpara pronës "Y" të elementit "Draw Bitmap1" (Figura 3), dhe zgjidhni "Integer SinkPin" (Figura 4)

Hapi 8: Në Visuino: Shtoni 2 gjeneratorë të sinusit të plotë dhe konfiguroni të parin

Ne do të përdorim 2 gjeneratorë sinus të plotë për të gjallëruar lëvizjen bitmap:

1. Shkruani "sinus" në kutinë e Filtrit të Kutisë së Komponentit të Veglave dhe më pas zgjidhni përbërësin "Sine Integer Generator" (Figura 1) dhe hidhni dy prej tyre në zonën e projektimit
2. Në Object Inspector, vendosni vlerën e vetisë "Amplitude" të komponentit SineIntegerGenerator1 në "96" (Figura 2)
3. Në Object Inspector, vendosni vlerën e vetisë "Offset" të komponentit SineIntegerGenerator1 në "96" (Figura 3)
4. Në Object Inspector, vendosni vlerën e vetisë "Frekuenca" të komponentit SineIntegerGenerator1 në "0.2" (Figura 4)

Hapi 9: Në Visuino: Konfiguroni gjeneratorin e dytë të sinusit dhe lidhni gjeneratorët e sinusit me kunjat e koordinatave X dhe Y të Bitmap

1. Në Object Inspector, vendosni vlerën e vetisë "Amplitude" të komponentit SineIntegerGenerator2 në "120" (Figura 1)
2. Në Object Inspector, vendosni vlerën e vetisë "Offset" të komponentit SineIntegerGenerator2 në "120" (Figura 2)
3. Në Object Inspector, vendosni vlerën e vetisë "Frekuenca" të komponentit SineIntegerGenerator2 në "0.03" (Figura 3)
4. Lidhni pinin dalës "Out" të komponentit SineIntegerGenerator1 me pinin hyrës "X" të elementit "Shields. TFT Sisplay. Elements. Wraw Bitmap1" të komponentit Arduino (Figura 4)
5. Lidhni pinin dalës "Out" të komponentit SineIntegerGenerator2 me pinin hyrës "Y" të elementit "Shields. TFT Display. Elements. Wraw Bitmap1" të komponentit Arduino (Figura 5)

Hapi 10: Në Visuino: Shtoni dhe Lidhni Komponentët e Fillimit dhe të Sahatit me Shumë Burime

Për ta bërë bitmap -in sa herë që pozicioni X dhe Y azhurnohet ne duhet të dërgojmë një sinjal të orës në elementin "Vizato Bitmap1". Për të dërguar komandën pasi pozicionet janë ndryshuar, ne kemi nevojë për një mënyrë për të sinkronizuar ngjarjet. Për këtë ne do të përdorim komponentin Repeat për të gjeneruar vazhdimisht ngjarje, dhe Clock Multi Source për të gjeneruar 2 ngjarje me radhë. Ngjarja e parë do të rregullojë gjeneratorët e sinusit për të azhurnuar pozicionet X dhe Y, dhe e dyta do të shënojë "Vizatoni Bitmap1":

1. Shkruani "përsëris" në kutinë e Filtrit në Kutinë e Veglave të Komponentit, pastaj zgjidhni përbërësin "Përsëriteni" (Figura 1) dhe hidheni atë në zonën e projektimit (Figura 2)
2. Shkruani "multi" në kutinë e Filtrit të Kutisë së Komponentit të Veglave, më pas zgjidhni përbërësin "Clock Multi Source" (Figura 2) dhe hidheni atë në zonën e projektimit (Figura 3)
3. Lidhni pinin dalës "Out" të komponentit Repeat1 me pinin hyrës "In" të komponentit ClockMultiSource1 (Figura 3)
4. Lidhni pinin dalës "Pin [0]" të kunjave "Out" të komponentit ClockMultiSource1 me pinin hyrës "In" të komponentit SineIntegerGenerator1 (Figura 4)
5. Lidhni pinin dalës "Pin [0]" të kunjave "Out" të komponentit ClockMultiSource2 me pinin hyrës "In" të komponentit SineIntegerGenerator1 (Figura 5)
6. Lidhni pinin dalës "Pin [1]" të pinit hyrës "Ora" të elementit "Shields. TFT Display. Elements. Wraw Bitmap1" të komponentit Arduino (Figura 6)

Hapi 11: Gjeneroni, përpiloni dhe ngarkoni kodin Arduino

1. Në Visuino, Shtypni F9 ose klikoni në butonin e treguar në Figurën 1 për të gjeneruar kodin Arduino dhe hapni Arduino IDE
2. Në Arduino IDE, klikoni në butonin Ngarko, për të përpiluar dhe ngarkuar kodin (Figura 2)

Hapi 12: Dhe Luaj…

Urime! Ju e keni përfunduar projektin.

Fotografitë 2, 3, 4 dhe 5 dhe Video tregojnë projektin e lidhur dhe fuqizuar. Ju do të shihni që Bitmap të lëvizë në mburojën e ekranit me prekje TFT të bazuar në ILI9341 siç shihet në Video.

Në figurën 1 mund të shihni diagramin e plotë Visuino. Gjithashtu i bashkëngjitet projekti Visuino, që kam krijuar për këtë Instructable, dhe bitmap me logon Visuino. Mund ta shkarkoni dhe hapni atë në Visuino: