Arduino Uno: Bitmap animatsioon ILI9341 TFT puutetundliku ekraani ekraanil Visuinoga: 12 sammu (piltidega)

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:50

ILI9341 põhinevad TFT puuteekraaniga ekraanikilbid on Arduino jaoks väga populaarsed odavad ekraanikilbid. Visuino on neid juba mõnda aega toetanud, kuid mul pole kunagi olnud võimalust kirjutada nende kasutamise õpetust. Hiljuti aga küsisid vähesed inimesed kuvarite kasutamise kohta Visuinoga, nii et otsustasin teha õpetuse.

Selles õpetuses näitan teile, kui lihtne on ühendada kilp Arduinoga ja programmeerida see Visuinoga, et animeerida ekraanil liikumiseks Bitmap.

Samm: komponendid

1. Üks Arduino Uno ühilduv plaat (see võib töötada ka Mega puhul, kuid ma pole sellega veel kilpi testinud)
2. Üks ILI9341 2,4 -tolline TFT puutetundlik ekraan Arduino jaoks

Samm: ühendage ILI9341 TFT puuteekraaniga ekraanikilp Arduinoga

Ühendage TFT -kilp Arduino Uno peal, nagu piltidel näidatud

Samm: käivitage Visuino ja lisage TFT -ekraanikilp

Arduino programmeerimise alustamiseks peab teil olema Arduino IDE installitud siit:

Veenduge, et installite 1.6.7 või uuema versiooni, vastasel juhul see juhend ei tööta

Samuti tuleb installida Visuino:

1. Käivitage Visuino, nagu on näidatud esimesel pildil
2. Rippmenüü avamiseks klõpsake Arduino komponendi nuppu "Noole alla" (pilt 1)
3. Valige menüüst "Lisa kilbid …" (pilt 1)
4. Laiendage dialoogis "Shields" kategooriat "Displays" ja valige "TFT värviline puutetundlik ekraan ILI9341 Shield", seejärel klõpsake selle lisamiseks nuppu "+" (joonis 2)

Samm 4: Visuino puhul: lisage tekstivari jaoks joonistusteksti element

Järgmisena peame teksti ja bitikaardi renderdamiseks lisama graafikaelemente. Esmalt lisame teksti varju joonistamiseks graafilise elemendi:

1. Objektiinspektoris klõpsake elemendi "TFT -ekraan" atribuudi "Elements" väärtuse kõrval nuppu "…" (joonis 1)
2. Valige elementide redaktoris „Joonista tekst” ja seejärel klõpsake selle lisamiseks nuppu „+” (pilt 2) (pilt 3)
3. Määrake objektiinspektoris elemendi "Draw Text1" atribuudi "Color" väärtuseks "aclSilver" (joonis 3)
4. Määrake objektide inspektoris elemendi "Joonista tekst1" atribuudi "Suurus" väärtuseks "4" (joonis 4). See muudab teksti suuremaks
5. Määrake objektiinspektoris elemendi "Joonista tekst1" atribuudi "Tekst" väärtuseks "Visuino" (joonis 5)
6. Määrake objektiinspektoris elemendi "Draw Text1" atribuudi "X" väärtuseks "43" (joonis 6)
7. Määrake objektiinspektoris elemendi "Joonista tekst1" atribuudi "Y" väärtuseks "278" (joonis 6)

5. samm: Visuinos: lisage teksti esiplaanile joonistustekst

Nüüd lisame teksti joonistamiseks graafilise elemendi:

1. Valige elementide redaktoris „Joonista tekst” ja seejärel klõpsake teise lisamiseks nuppu „+” (pilt 1) (pilt 2)
2. Määrake objektiinspektoris elemendi "Joonista tekst1" atribuudi "Suurus" väärtuseks "4" (joonis 2)
3. Määrake objektiinspektoris elemendi "Joonista tekst1" atribuudi "Tekst" väärtuseks "Visuino" (joonis 3)
4. Määrake objektiinspektoris elemendi "Draw Text1" atribuudi "X" väärtuseks "40" (joonis 4)
5. Määrake objektiinspektoris elemendi "Joonista tekst1" atribuudi "Y" väärtuseks "275" (joonis 4)

6. samm: Visuino: lisage animatsiooni jaoks joonistusbittkaardi element

Järgmisena lisame bitikaardi joonistamiseks graafilise elemendi:

1. Valige elementide redaktoris „Joonista bitikaart” ja klõpsake selle lisamiseks nuppu „+” (pilt 1) (pilt 2)
2. Objektiinspektoris klõpsake elemendi "Joonista Bitmap1" atribuudi "Bitmap" väärtuse kõrval olevat nuppu "…" (joonis 2), et avada "Bitmap Editor" (joonis 3)
3. Failide avamise dialoogi avamiseks klõpsake "Bitmap Editoris" nuppu "Laadi …" (joonis 3) (joonis 3).
4. Valige failide avamise dialoogiboksis joonistatav bitikaart ja klõpsake nuppu "Ava" (joonis 4). Kui fail on liiga suur, ei pruugi see Arduino mällu mahtuda. Kui kompileerimise ajal saate mälust viga, peate võib -olla valima väiksema bitikaardi
5. Klõpsake "Bitmap Editoris" nuppu "OK". nuppu (pilt 5) dialoogi sulgemiseks

Samm 7: Visuinos: lisage joonistamise bitikaardi elemendi X ja Y atribuutide jaoks tihvtid

Bitmapi animeerimiseks peame kontrollima selle X ja Y positsiooni. Selleks lisame tihvtid X ja Y omaduste jaoks:

1. Objektiinspektoris klõpsake elemendi "Draw Bitmap1" atribuudi "X" ees olevat nuppu "Pin" (joonis 1) ja valige "Integer SinkPin" (joonis 2)
2. Objektiinspektoris klõpsake elemendi "Draw Bitmap1" atribuudi "Y" ees olevat nuppu "Pin" (joonis 3) ja valige "Integer SinkPin" (joonis 4)

8. samm: Visuino: lisage 2 täisarvulist siinusgeneraatorit ja konfigureerige esimene

Bittkaardi liikumise animeerimiseks kasutame kahte täisarvulist siinusgeneraatorit:

1. Sisestage komponenditööriista kasti Filter kasti "siinus", seejärel valige komponent "Sine Integer Generator" (joonis 1) ja visake kaks neist kujundusalale
2. Määrake objektide inspektoris komponendi SineIntegerGenerator1 atribuudi "Amplitude" väärtuseks "96" (joonis 2)
3. Määrake objektide inspektoris komponendi SineIntegerGenerator1 atribuudi "Offset" väärtuseks "96" (joonis 3)
4. Määrake objektide inspektoris komponendi SineIntegerGenerator1 omaduse "Sagedus" väärtuseks "0,2" (joonis 4)

9. samm: Visuinos: seadistage teine siinusgeneraator ja ühendage siinusgeneraatorid bitikaardi X- ja Y -koordinaattihvtidega

1. Määrake objektide inspektoris komponendi SineIntegerGenerator2 atribuudi "Amplitude" väärtuseks "120" (joonis 1)
2. Määrake objektide inspektoris komponendi SineIntegerGenerator2 atribuudi "Offset" väärtuseks "120" (joonis 2)
3. Määrake objektide inspektoris komponendi SineIntegerGenerator2 atribuudi "Sagedus" väärtuseks "0,03" (joonis 3)
4. Ühendage SineIntegerGenerator1 komponendi väljundpistik "Out" Arduino komponendi elemendi "Shields. TFT Sisplay. Elements. Draw Bitmap1" sisendpoldiga "X" (joonis 4)
5. Ühendage SineIntegerGenerator2 komponendi väljundpistik "Out" Arduino komponendi elemendi "Shields. TFT Display. Elements. Draw Bitmap1" sisendpoldiga "Y" (joonis 5)

10. samm: Visuino: lisage ja ühendage mitme lähtekohaga komponendid Start ja Clock

Bitkaardi renderdamiseks iga kord, kui X- ja Y -positsiooni uuendatakse, peame saatma kella signaali elemendile "Joonista Bitmap1". Käsu saatmiseks pärast positsioonide muutmist vajame sündmuste sünkroonimise viisi. Selleks kasutame sündmuste pidevaks genereerimiseks kordamiskomponenti ja kahe sündmuse järjestikuseks genereerimiseks Clock Multi Source. Esimene sündmus jälgib siinusgeneraatoreid, et värskendada X ja Y positsioone, ja teine kellaaeg "Joonista bitikaart1":

1. Sisestage komponendi tööriistakasti filtrikasti "kordus", seejärel valige komponent "Korda" (joonis 1) ja visake see kujundusalale (joonis 2)
2. Sisestage komponendi tööriistakasti filtrikasti "multi", seejärel valige komponent "Clock Multi Source" (joonis 2) ja visake see kujundusalale (joonis 3)
3. Ühendage komponendi Repeat1 väljundpistik „Out“komponendi ClockMultiSource1 sisendpoldiga „In“(joonis 3)
4. Ühendage komponendi ClockMultiSource1 väljundpistikute väljundnõel "Pin [0]" väljundpistikuga komponendi SineIntegerGenerator1 sisendpoldiga "In" (joonis 4)
5. Ühendage komponendi ClockMultiSource2 komponentide "Out" tihvtide "Pin [0]" väljundnõel komponendi SineIntegerGenerator1 sisendpoldiga "In" (joonis 5)
6. Ühendage Arduino komponendi elemendi "Shields. TFT Display.

Samm: looge, kompileerige ja laadige üles Arduino kood

1. Visuinos vajutage Arduino koodi genereerimiseks F9 või klõpsake pildil 1 näidatud nuppu ja avage Arduino IDE
2. Klõpsake Arduino IDE -s koodi koostamiseks ja üleslaadimiseks nuppu Laadi üles (pilt 2)

12. samm: mängige…

Palju õnne! Olete projekti lõpetanud.

Pildid 2, 3, 4 ja 5 ning video näitavad ühendatud ja sisselülitatud projekti. Näete, kuidas Bitmap liigub ILI9341 -põhise TFT puutetundliku ekraaniekraani ümber, nagu on näha videol.

Pildil 1 näete täielikku Visuino diagrammi. Lisatud on ka Visuino projekt, mille ma selle juhendi jaoks lõin, ja Visuino logoga bitikaart. Saate selle alla laadida ja avada Visuinos: