Arduino Uno: Bitmap animacija na ILI9341 TFT ekranu osjetljivom na dodir sa Visuinom: 12 koraka (sa slikama)

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:08

TFT ekrani osjetljivi na dodir zasnovani na ILI9341 su vrlo popularni jeftini ekrani za Arduino. Visuino već neko vrijeme ima podršku za njih, ali nikada nisam imao priliku napisati Vodič o tome kako ih koristiti. Nedavno je, međutim, malo ljudi postavljalo pitanja o korištenju zaslona s Visuinom, pa sam odlučio napraviti vodič.

U ovom vodiču pokazat ću vam kako je jednostavno spojiti štit na Arduino i programirati ga s Visuinom za animaciju bitmape za kretanje po zaslonu.

Korak 1: Komponente

1. Jedna ploča kompatibilna s Arduino Uno (Možda će raditi i s Mega -om, ali još nisam testirao štit s njom)
2. Jedan ILI9341 2.4 "TFT zaslon osjetljiv na dodir za Arduino

Korak 2: Povežite ILI9341 TFT ekran osjetljiv na dodir na Arduino

Priključite TFT štit na vrh Arduino Uno kao što je prikazano na slikama

Korak 3: Pokrenite Visuino i dodajte TFT Display Shield

Da biste započeli programiranje Arduina, morat ćete instalirati Arduino IDE odavde:

Obavezno instalirajte 1.6.7 ili noviju verziju, u protivnom ovaj Instructable neće raditi

Takođe je potrebno instalirati Visuino:

1. Pokrenite Visuino kao što je prikazano na prvoj slici
2. Pritisnite gumb "Strelica prema dolje" komponente Arduino da otvorite padajući izbornik (slika 1)
3. Iz izbornika odaberite "Dodaj štitove …" (Slika 1)
4. U dijalogu "Štitovi" proširite kategoriju "Zasloni" i odaberite "TFT ekran u boji osjetljiv na dodir u boji ILI9341 štit", a zatim kliknite gumb "+" da biste ga dodali (Slika 2)

Korak 4: U Visuinu: Dodajte tekstualni element za crtanje za sjenu teksta

Zatim moramo dodati grafičke elemente za iscrtavanje teksta i bitmape. Prvo ćemo dodati grafički element da nacrtamo sjenu teksta:

1. U Inspektoru objekata kliknite na dugme "…" pored vrijednosti svojstva "Elements" elementa "TFT Display" (Slika 1)
2. U uređivaču elemenata odaberite "Nacrtaj tekst", a zatim kliknite gumb "+" (Slika 2) da biste je dodali (Slika 3)
3. U Object Inspectoru postavite vrijednost svojstva "Color" elementa "Draw Text1" na "aclSilver" (Slika 3)
4. U Inspectoru objekta postavite vrijednost svojstva "Size" elementa "Draw Text1" na "4" (Slika 4). Ovo tekst čini većim
5. U Object Inspector -u postavite vrijednost svojstva "Text" elementa "Draw Text1" na "Visuino" (Slika 5)
6. U Inspectoru objekta postavite vrijednost svojstva "X" elementa "Draw Text1" na "43" (Slika 6)
7. U Inspektoru objekata postavite vrijednost svojstva "Y" elementa "Nacrtaj tekst1" na "278" (Slika 6)

Korak 5: U Visuinu: Dodajte nacrtani tekstualni element za prednji plan teksta

Sada ćemo dodati grafički element za crtanje teksta:

1. U uređivaču elemenata odaberite "Nacrtaj tekst", a zatim kliknite gumb "+" (Slika 1) za dodavanje drugog (Slika 2)
2. U Inspektoru objekata postavite vrijednost svojstva "Size" elementa "Draw Text1" na "4" (Slika 2)
3. U Inspektoru objekata postavite vrijednost svojstva "Text" elementa "Draw Text1" na "Visuino" (Slika 3)
4. U Inspectoru objekta postavite vrijednost svojstva "X" elementa "Draw Text1" na "40" (Slika 4)
5. U Inspektoru objekata postavite vrijednost svojstva "Y" elementa "Nacrtaj tekst1" na "275" (Slika 4)

Korak 6: U Visuinu: Dodajte element crtanja bitmape za animaciju

Zatim ćemo dodati grafički element za crtanje bitmape:

1. U uređivaču elemenata odaberite "Nacrtaj bitmapu", a zatim kliknite gumb "+" (Slika 1) da biste je dodali (Slika 2)
2. U Inspectoru objekta kliknite gumb "…" pored vrijednosti svojstva "Bitmap" elementa "Draw Bitmap1" Element (Slika 2) da biste otvorili "Bitmap Editor" (Slika 3)
3. U "Uređivaču bitmapa" kliknite na dugme "Učitaj …" (Slika 3) da biste otvorili dijalog Otvaranje datoteke (Slika 4)
4. U dijalogu Otvaranje datoteke odaberite bitnu sliku koju želite nacrtati i kliknite gumb "Otvori" (Slika 4). Ako je datoteka prevelika, možda neće moći stati u Arduino memoriju. Ako vam tokom kompilacije nestane memorije, možda ćete morati odabrati manju bitmapu
5. U "Uređivaču bitmapa" kliknite na "U redu". dugme (Slika 5) da biste zatvorili dijalog

Korak 7: U Visuinu: Dodajte pinove za svojstva X i Y elementa za crtanje bitmape

Da bismo animirali bitmapu, moramo kontrolirati njen položaj X i Y. Za ovo ćemo dodati pinove za svojstva X i Y:

1. U Inspectoru objekta kliknite gumb "Pin" ispred svojstva "X" elementa "Draw Bitmap1" (Slika 1) i odaberite "Integer SinkPin" (Slika 2)
2. U Inspectoru objekta kliknite gumb "Pin" ispred svojstva "Y" elementa "Draw Bitmap1" (Slika 3) i odaberite "Integer SinkPin" (Slika 4)

Korak 8: U Visuinu: Dodajte 2 cjelobrojna sinusna generatora i konfigurirajte prvog

Koristit ćemo 2 Integer generatora sinusa za animiranje kretanja bitmape:

1. Upišite "sinus" u okvir za filtriranje okvira s alatima za komponente, a zatim odaberite komponentu "Sine Integer Generator" (slika 1) i ispustite dvije od njih u područje dizajna
2. U Inspektoru objekata postavite vrijednost svojstva "Amplitude" komponente SineIntegerGenerator1 na "96" (Slika 2)
3. U Inspektoru objekata postavite vrijednost svojstva "Offset" komponente SineIntegerGenerator1 na "96" (Slika 3)
4. U Inspektoru objekata postavite vrijednost svojstva "Frequency" komponente SineIntegerGenerator1 na "0,2" (Slika 4)

Korak 9: U Visuinu: Konfigurirajte drugi generator sinusa i spojite generatore sinusa na X i Y koordinatne pinove bitmape

1. U Object Inspectoru, postavite vrijednost svojstva "Amplitude" komponente SineIntegerGenerator2 na "120" (Slika 1)
2. U Inspektoru objekata postavite vrijednost svojstva "Offset" komponente SineIntegerGenerator2 na "120" (Slika 2)
3. U Inspektoru objekata postavite vrijednost svojstva "Frequency" komponente SineIntegerGenerator2 na "0,03" (Slika 3)
4. Spojite "Out" izlazni pin SineIntegerGenerator1 komponente na "X" ulazni pin "Shields. TFT Sisplay. Elements. Draw Bitmap1" elementa Arduino komponente (Slika 4)
5. Spojite "Out" izlazni pin SineIntegerGenerator2 komponente na "Y" ulazni pin "Shields. TFT Display. Elements. Draw Bitmap1" elementa Arduino komponente (Slika 5)

Korak 10: U Visuinu: Dodajte i povežite komponente s više izvora za početak i sat

Za iscrtavanje bitmape svaki put kada se X i Y položaj ažurira potrebno je poslati signal sata elementu "Draw Bitmap1". Za slanje naredbe nakon promjene položaja potreban nam je način za sinhronizaciju događaja. Za ovo ćemo koristiti komponentu Repeat za stalno generiranje događaja, a Clock Multi Source za generiranje 2 događaja u nizu. Prvi događaj će sinhronizirati generatore sinusa za ažuriranje položaja X i Y, a drugi će prikazati "Draw Bitmap1":

1. Upišite "repeat" u okvir za filtriranje okvira s alatima za komponente, zatim odaberite komponentu "Ponovi" (slika 1) i ispustite je u područje dizajna (slika 2)
2. Upišite "multi" u okvir za filtriranje okvira s alatima za komponente, zatim odaberite komponentu "Sat s više izvora" (slika 2) i ispustite je u područje dizajna (slika 3)
3. Spojite "Out" izlazni pin komponente Repeat1 na "In" ulazni pin komponente ClockMultiSource1 (Slika 3)
4. Spojite "Pin [0]" izlazni pin "Out" pinova komponente ClockMultiSource1 sa ulaznim pinom "In" komponente SineIntegerGenerator1 (Slika 4)
5. Spojite "Pin [0]" izlazni pin "Out" pinova komponente ClockMultiSource2 sa ulaznim pinom "In" komponente SineIntegerGenerator1 (Slika 5)
6. Spojite "Pin [1]" izlazni pin na "Clock" ulaznom pinu "Shields. TFT Display. Elements. Draw Bitmap1" elementa Arduino komponente (Slika 6)

Korak 11: Generirajte, kompajlirajte i prenesite Arduino kôd

1. U Visuinu pritisnite F9 ili kliknite gumb prikazan na slici 1 za generiranje Arduino koda, a zatim otvorite Arduino IDE
2. U Arduino IDE -u kliknite gumb Upload za sastavljanje i učitavanje koda (Slika 2)

Korak 12: I igrajte se …

Čestitamo! Završili ste projekat.

Slike 2, 3, 4 i 5 i Video prikazuju povezani i napajani projekt. Vidjet ćete da se bitmapa kreće oko TFT ekrana osjetljivog na dodir zasnovanog na ILI9341, kao što se vidi na videu.

Na slici 1 možete vidjeti kompletan Visuino dijagram. U prilogu je i Visuino projekt koji sam stvorio za ovu Instructable te bitmapa sa Visuino logom. Možete ga preuzeti i otvoriti u Visuinu: