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

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:37

TFT zasloni osjetljivi na dodir zasnovani na ILI9341 vrlo su popularni jeftini zaslonski zasloni za Arduino. Visuino već neko vrijeme ima podršku za njih, ali nikada nisam imao priliku napisati Tutorial 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 koliko je jednostavno spojiti štit na Arduino i programirati ga s Visuinom kako bi animirao bitnu kartu za kretanje po zaslonu.

Korak 1: Komponente

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

Korak 2: Spojite ILI9341 TFT zaslon osjetljiv na dodir na Arduino

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

Korak 3: Pokrenite Visuino i dodajte TFT zaslon štit

Za početak programiranja Arduina morat ćete instalirati Arduino IDE odavde:

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

Visuino: https://www.visuino.com također je potrebno instalirati.

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. Na izborniku odaberite "Dodaj štitove …" (Slika 1)
4. U dijalogu "Štitovi" proširite kategoriju "Zasloni" i odaberite "TFT zaslon 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 kako bismo nacrtali sjenu teksta:

1. U Inspectoru objekta kliknite gumb "…" 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 Inspectoru objekta 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). Time se tekst povećava
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 Object Inspector -u postavite vrijednost svojstva "Y" elementa "Draw Text1" na "278" (Slika 6)

Korak 5: U Visuinu: Dodajte tekstualni element za crtanje 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 Inspectoru objekta postavite vrijednost svojstva "Size" elementa "Draw Text1" na "4" (Slika 2)
3. U Object Inspector -u postavite vrijednost svojstva "Text" elementa "Draw Text1" na "Visuino" (Slika 3)
4. U Object Inspectoru postavite vrijednost svojstva "X" elementa "Draw Text1" na "40" (Slika 4)
5. U Object Inspector -u postavite vrijednost svojstva "Y" elementa "Draw Text1" 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 gumb "Učitaj …" (Slika 3) da biste otvorili dijalog Otvaranje datoteke (Slika 4)
4. U dijalogu Otvaranje datoteke odaberite bitnu kartu za crtanje i kliknite gumb "Otvori" (Slika 4). Ako je datoteka prevelika, možda neće moći stati u Arduino memoriju. Ako tijekom kompilacije nestane memorije, možda ćete morati odabrati manju bitmapu
5. U "Uređivaču bitmapa" kliknite "U redu". gumb (Slika 5) za zatvaranje dijaloga

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 to ćemo dodati igle za svojstva X i Y:

1. U Object Inspectoru kliknite gumb "Pin" ispred svojstva "X" elementa "Draw Bitmap1" (Slika 1) i odaberite "Integer SinkPin" (Slika 2)
2. U Object Inspectoru 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

Za animiranje kretanja bitmape koristit ćemo 2 generatora cijelih sinusa.

1. Upišite "sinus" u okvir za filtriranje okvira s alatima za komponente, a zatim odaberite komponentu "Generator sinusnog cijelog broja" (slika 1) i ispustite dvije od njih u područje dizajna
2. U Inspectoru objekta 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 Inspectoru objekta postavite vrijednost svojstva "Amplitude" komponente SineIntegerGenerator2 na "120" (Slika 1)
2. U Object Inspectoru 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 komponente SineIntegerGenerator2 na ulazni pin "Y" elementa "Shields. TFT Display. Elements. Draw Bitmap1" komponente Arduino (Slika 5)

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

Za generiranje bitmape svaki put kada se ažuriraju položaj X i Y moramo poslati signal sata elementu "Draw Bitmap1". Za slanje naredbe nakon promjene položaja potreban nam je način za sinkronizaciju događaja. Za to ćemo koristiti Repeat komponentu 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 Filter Toolbox Component Toolbox, zatim odaberite komponentu "Repeat" (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 izlazni pin "Pin [0]" na "Out" pinovima 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 i otvorite Arduino IDE
2. U Arduino IDE -u kliknite gumb Upload za sastavljanje i prijenos koda (Slika 2)

Korak 12: I igrajte se …

Čestitamo! Završili ste projekt.

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 projekt Visuino koji sam stvorio za ovaj Instructable te bitmapa s Visuino logom. Možete ga preuzeti i otvoriti u Visuinu: