Arduino Uno: Bitmap animacija na ILI9341 TFT zaslon na dotik na zaslonu z Visuinom: 12 korakov (s slikami)

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:08

TFT zasloni na dotik na osnovi ILI9341 so zelo priljubljeni poceni zasloni za Arduino. Visuino jih že nekaj časa podpira, vendar nikoli nisem imel priložnosti napisati vadnice, kako jih uporabljati. Pred kratkim pa je malo ljudi postavljalo vprašanja o uporabi zaslonov z Visuinom, zato sem se odločil, da naredim vadnico.

V tej vadnici vam bom pokazal, kako enostavno je povezati ščit z Arduinom in ga programirati z Visuinom, da animira bitno sliko za premikanje po zaslonu.

1. korak: Komponente

1. Ena združljiva plošča Arduino Uno (lahko deluje tudi z Mega, vendar ščita še nisem preizkusil z njo)
2. En ILI9341 2,4 -palčni TFT zaslon na dotik za Arduino

2. korak: Povežite ščit zaslona ILI9341 TFT z zaslonom na dotik na Arduino

Priključite TFT ščit na Arduino Uno, kot je prikazano na slikah

3. korak: Zaženite Visuino in dodajte ščit zaslona TFT

Če želite začeti programirati Arduino, morate imeti nameščen Arduino IDE tukaj:

Namestite 1.6.7 ali novejšo različico, sicer ta navodila ne bodo delovala

Namestiti je treba tudi Visuino:

1. Zaženite Visuino, kot je prikazano na prvi sliki
2. Kliknite gumb "Puščica navzdol" komponente Arduino, da odprete spustni meni (slika 1)
3. V meniju izberite "Dodaj ščite …" (Slika 1)
4. V pogovornem oknu "Ščiti" razširite kategorijo "Zasloni" in izberite "Barvni zaslon na dotik TFT ILI9341 ščit", nato kliknite gumb "+", da ga dodate (slika 2)

4. korak: V Visuinu: Dodajte element risanja besedila za senco besedila

Nato moramo dodati grafične elemente za upodabljanje besedila in bitne slike. Najprej bomo dodali grafični element, da narišemo senco besedila:

1. V Inšpektorju objektov kliknite gumb »…« poleg vrednosti lastnosti »Elementi« elementa »Zaslon TFT« (slika 1)
2. V urejevalniku elementov izberite »Nariši besedilo« in nato kliknite gumb »+« (slika 2), da ga dodate (slika 3)
3. V Inšpektorju objektov nastavite vrednost lastnosti "Color" elementa "Draw Text1" na "aclSilver" (Slika 3)
4. V Inšpektorju objektov nastavite vrednost lastnosti "Velikost" elementa "Nariši besedilo1" na "4" (slika 4). Zaradi tega je besedilo večje
5. V Inšpektorju objektov nastavite vrednost lastnosti "Text" elementa "Draw Text1" na "Visuino" (Slika 5)
6. V Inšpektorju objektov nastavite vrednost lastnosti "X" elementa "Nariši besedilo1" na "43" (Slika 6)
7. V Inšpektorju objektov nastavite vrednost lastnosti "Y" elementa "Nariši besedilo1" na "278" (Slika 6)

5. korak: V programu Visuino: Dodajte risalni besedilni element za ospredje besedila

Zdaj bomo za risanje besedila dodali grafični element:

1. V urejevalniku elementov izberite »Nariši besedilo« in nato kliknite gumb »+« (slika 1), da dodate drugo (slika 2)
2. V Inšpektorju objektov nastavite vrednost lastnosti "Velikost" elementa "Nariši besedilo1" na "4" (Slika 2)
3. V Inšpektorju objektov nastavite vrednost lastnosti "Text" elementa "Draw Text1" na "Visuino" (Slika 3)
4. V Inšpektorju objektov nastavite vrednost lastnosti "X" elementa "Nariši besedilo1" na "40" (slika 4)
5. V Inšpektorju objektov nastavite vrednost lastnosti "Y" elementa "Nariši besedilo1" na "275" (Slika 4)

Korak 6: V programu Visuino: Dodajte element risbe bitne slike za animacijo

Nato bomo za risanje bitne slike dodali grafični element:

1. V urejevalniku elementov izberite »Nariši bitno sliko« in kliknite gumb »+« (slika 1), da jo dodate (slika 2)
2. V Inšpektorju objektov kliknite gumb "…" poleg vrednosti lastnosti "Bitmap" elementa "Draw Bitmap1" (Slika 2), da odprete "Bitmap Editor" (Slika 3)
3. V urejevalniku bitnih slik kliknite gumb "Naloži …" (slika 3), da odprete pogovorno okno za odpiranje datoteke (slika 4)
4. V pogovornem oknu Odpri datoteko izberite slikovno sliko za risanje in kliknite gumb »Odpri« (slika 4). Če je datoteka prevelika, morda ne bo mogla stati v pomnilniku Arduino. Če vam pri sestavljanju zmanjka pomnilnika, boste morda morali izbrati manjšo bitno sliko
5. V urejevalniku bitnih slik kliknite »V redu«. gumb (slika 5), da zaprete pogovorno okno

7. korak: V Visuinu: Dodajte zatiče za lastnosti X in Y elementa risbe bitne slike

Za animacijo bitne slike moramo nadzorovati njen položaj X in Y. Za to bomo dodali zatiče za lastnosti X in Y:

1. V Inšpektorju objektov kliknite gumb "Pin" pred lastnostjo "X" elementa "Draw Bitmap1" (Slika 1) in izberite "Integer SinkPin" (Slika 2)
2. V Inšpektorju objektov kliknite gumb "Pin" pred lastnostjo "Y" elementa "Draw Bitmap1" (Slika 3) in izberite "Integer SinkPin" (Slika 4)

8. korak: V Visuinu: Dodajte 2 generatorja celih sinusov in konfigurirajte prvega

Za animacijo gibanja bitne slike bomo uporabili 2 generatorja celih sinusov:

1. V polje »Filter« orodjarne za komponente vnesite »sinus«, nato izberite komponento »Sine Integer Generator« (slika 1) in dve od njih spustite v območje oblikovanja
2. V Inšpektorju objektov nastavite vrednost lastnosti "Amplitude" komponente SineIntegerGenerator1 na "96" (Slika 2)
3. V Inšpektorju objektov nastavite vrednost lastnosti "Offset" komponente SineIntegerGenerator1 na "96" (Slika 3)
4. V Inšpektorju objektov nastavite vrednost lastnosti »Frekvenca« komponente SineIntegerGenerator1 na »0,2« (Slika 4)

9. korak: V Visuinu: Konfigurirajte drugi generator sinusov in generatorje sinusov povežite s koordinatnimi zatiči X in Y bitne slike

1. V Inšpektorju objektov nastavite vrednost lastnosti "Amplitude" komponente SineIntegerGenerator2 na "120" (Slika 1)
2. V Inšpektorju objektov nastavite vrednost lastnosti "Offset" komponente SineIntegerGenerator2 na "120" (Slika 2)
3. V Inšpektorju objektov nastavite vrednost lastnosti »Frekvenca« komponente SineIntegerGenerator2 na »0,03« (Slika 3)
4. Izhodni zatič "Out" komponente SineIntegerGenerator1 povežite z vhodnim zatičem "X" elementa "Shields. TFT Sisplay. Elements. Draw Bitmap1" komponente Arduino (slika 4)
5. Izhodni zatič "Out" komponente SineIntegerGenerator2 povežite z vhodnim zatičem "Y" elementa "Shields. TFT Display. Elements. Draw Bitmap1" komponente Arduino (slika 5)

10. korak: V Visuinu: Dodajte in povežite komponente Start in Clock z več viri

Za upodobitev bitne slike vsakič, ko se položaj X in Y posodobi, moramo poslati signal ure elementu "Draw Bitmap1". Za pošiljanje ukaza po spremembi položajev potrebujemo način za sinhronizacijo dogodkov. Za to bomo uporabili komponento Repeat za nenehno ustvarjanje dogodkov in Clock Multi Source za generiranje 2 dogodkov v zaporedju. Prvi dogodek bo sinhroniziral generatorje sinusov za posodobitev položajev X in Y, drugi pa uro "Nariši bitno sliko 1":

1. V polje »Filter« orodjarne za komponente vnesite »repeat«, nato izberite komponento »Repeat« (slika 1) in jo spustite v oblikovalsko območje (slika 2)
2. V polje »Filter« v orodjarni za komponente vnesite »multi«, nato izberite komponento »Ura z več viri« (slika 2) in jo spustite v območje oblikovanja (slika 3)
3. Priključite "Out" izhodni pin komponente Repeat1 na "In" vhodni pin komponente ClockMultiSource1 (slika 3)
4. Izhodni zatič "Pin [0]" izhodnih zatičev komponente ClockMultiSource1 povežite z vhodnim zatičem "In" komponente SineIntegerGenerator1 (slika 4)
5. Priključite izhodni zatič "Pin [0]" izhodnih nožic komponente ClockMultiSource2 na vhodni zatič "In" komponente SineIntegerGenerator1 (slika 5)
6. Priključite izhodni zatič "Pin [1]" na vhodnem zatiču "Clock" elementa "Shields. TFT Display. Elements. Draw Bitmap1" komponente Arduino (slika 6)

11. korak: Ustvarite, prevedite in naložite kodo Arduino

1. V Visuinu pritisnite F9 ali kliknite gumb, prikazan na sliki 1, da ustvarite kodo Arduino, in odprite Arduino IDE
2. V Arduino IDE kliknite gumb za nalaganje, da sestavite in naložite kodo (slika 2)

12. korak: In igrajte se …

Čestitamo! Projekt ste zaključili.

Slike 2, 3, 4 in 5 ter videoposnetek prikazujejo povezan in napajan projekt. Videli boste, da se bitna slika premika okrog TFT zaslona na dotik na osnovi ILI9341, kot je prikazano na videoposnetku.

Na sliki 1 si lahko ogledate celoten diagram Visuino, priložen pa je tudi projekt Visuino, ki sem ga ustvaril za ta Instructable, in bitna slika z logotipom Visuino. Lahko ga prenesete in odprete v Visuinu: