Arduino Uno: Bitmap -animasie op ILI9341 TFT -raakskerm met visuino: 12 stappe (met foto's)

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:27

ILI9341 -gebaseerde TFT -raakskermskerms is baie gewild vir lae koste vir Arduino. Visuino het al 'n geruime tyd ondersteuning vir hulle, maar ek kon nooit 'n handleiding skryf oor hoe om dit te gebruik nie. Onlangs het min mense egter vrae gevra oor die gebruik van skerms met Visuino, so ek het besluit om 'n handleiding te maak.

In hierdie handleiding sal ek u wys hoe maklik dit is om die skild aan Arduino te koppel en dit met Visuino te programmeer om 'n bitmap te animeer om op die skerm te beweeg.

Stap 1: Komponente

1. Een Arduino Uno -versoenbare bord (dit kan ook met Mega werk, maar ek het die skild nog nie daarmee getoets nie)
2. Een ILI9341 2.4 "TFT -raakskermskerm vir Arduino

Stap 2: Koppel die ILI9341 TFT -raakskermskermskerm aan op Arduino

Koppel die TFT -skild bo -op die Arduino Uno soos op die foto's

Stap 3: Begin Visuino en voeg TFT -skermskerm by

Om die Arduino te begin programmeer, moet u die Arduino IDE van hier af laat installeer:

Maak seker dat u 1.6.7 of hoër installeer, anders werk hierdie instruksie nie

Die Visuino: https://www.visuino.com moet ook geïnstalleer word.

1. Begin Visuino soos op die eerste foto getoon
2. Klik op die "Arrow Down" -knoppie van die Arduino -komponent om die afrolkieslys oop te maak (prent 1)
3. Kies "Voeg skilde by …" in die spyskaart (prent 1)
4. Vou die kategorie "Displays" in die dialoog "Shields" uit en kies die "TFT -kleur raakskerm skerm ILI9341 Shield", klik dan op die "+" knoppie om dit by te voeg (prent 2)

Stap 4: In Visuino: Voeg Draw Text -element by vir die tekstskadu

Vervolgens moet ons grafiese elemente byvoeg om teks en bitmap weer te gee. Eerstens voeg ons 'n grafiese element by om die skaduwee van die teks te teken:

1. Klik in die Object Inspector op die "…" knoppie langs die waarde van die "Elements" eienskap van die "TFT Display" Element (prent 1)
2. Kies 'Tekst teken' in die Elements -redakteur en klik dan op die '+' - knoppie (prent 2) om een by te voeg (prent 3)
3. Stel in die Object Inspector die waarde van die "Kleur" -eienskappe van die "Teken teks1" -element in op "aclSilver" (prent 3)
4. Stel in die Object Inspector die waarde van die "Size" eienskap van die "Draw Text1" element op "4" (prent 4). Dit maak die teks groter
5. Stel in die Object Inspector die waarde van die "Text" -eienskappe van die "Draw Text1" -element in op "Visuino" (prent 5)
6. Stel in die Object Inspector die waarde van die "X" eienskap van die "Draw Text1" element op "43" (prent 6)
7. Stel in die Object Inspector die waarde van die "Y" eienskap van die "Draw Text1" element op "278" (prent 6)

Stap 5: In Visuino: Voeg Draw Text -element by vir die teksvoorgrond

Nou sal ons 'n grafiese element byvoeg om die teks te teken:

1. Kies 'Tekst teken' in die Elements -redakteur en klik dan op die '+' - knoppie (prent 1) om die tweede een by te voeg (prent 2)
2. Stel in die Object Inspector die waarde van die "Size" eienskap van die "Draw Text1" element op "4" (prent 2)
3. Stel in die Object Inspector die waarde van die "Text" -eienskappe van die "Draw Text1" -element in op "Visuino" (prent 3)
4. Stel in die Object Inspector die waarde van die "X" eienskap van die "Draw Text1" element op "40" (prent 4)
5. Stel in die Object Inspector die waarde van die "Y" eienskap van die "Draw Text1" element op "275" (prent 4)

Stap 6: In Visuino: Voeg Draw Bitmap -element by vir die animasie

Vervolgens voeg ons grafiese element by om die bitmap te teken:

1. Kies 'Draw Bitmap' in die Elements -redakteur en klik dan op die '+' - knoppie (prent 1) om een by te voeg (prent 2)
2. Klik in die Object Inspector op die "…" knoppie langs die waarde van die "Bitmap" eienskap van die "Draw Bitmap1" Element (prent 2) om die "Bitmap Editor" (prent 3) oop te maak
3. Klik in die "Bitmap -redakteur" op die "Laai …" -knoppie (prent 3) om die dialoog oop te maak (prent 4)
4. Kies die bitmap wat u wil teken in die dialoog Open lêer, en klik op die knoppie "Open" (prent 4). As die lêer te groot is, kan dit moontlik nie in die Arduino -geheue pas nie. As u tydens die opstel uit die geheuefout kom, moet u moontlik 'n kleiner bitmap kies
5. Klik in die 'Bitmap Editor' op die 'OK'. knoppie (prent 5) om die dialoog te sluit

Stap 7: In Visuino: Voeg penne by vir die X- en Y -eienskappe van die teken -bitmap -element

Om die bitmap te animeer, moet ons die X- en Y -posisie daarvan beheer. Hiervoor sal ons penne vir die X- en Y -eienskappe byvoeg:

1. Klik in die Object Inspector op die "Pin" knoppie voor die "X" eienskap van die "Draw Bitmap1" element (prent 1) en kies "Integer SinkPin" (prent 2)
2. Klik in die Object Inspector op die "Pin" -knoppie voor die "Y" -eienskappe van die "Draw Bitmap1" -element (prent 3) en kies "Integer SinkPin" (prent 4)

Stap 8: In Visuino: Voeg 2 heelgetal sinusgenerators by en stel die eerste in

Ons sal 2 heelgetal sinusopwekkers gebruik om die bitmapbeweging te animeer:

1. Tik "sinus" in die filterkassie van die komponentgereedskap, kies dan die komponent "Sinese heelgetalgenerator" (prent 1) en laat twee daarvan in die ontwerparea val
2. Stel in die Object Inspector die waarde van die "Amplitude" -eienskappe van die SineIntegerGenerator1 -komponent op "96" (prent 2)
3. Stel in die Object Inspector die waarde van die "Offset" -eienskappe van die SineIntegerGenerator1 -komponent op "96" (prent 3)
4. Stel in die Object Inspector die waarde van die "Frequency" eienskap van die SineIntegerGenerator1 komponent op "0.2" (prent 4)

Stap 9: In Visuino: Stel die tweede sinusgenerator op en koppel die sinusgenerators aan die X- en Y -koördinaatpenne van die bitmap

1. Stel in die Object Inspector die waarde van die "Amplitude" -eienskappe van die SineIntegerGenerator2 -komponent op "120" (prent 1)
2. Stel in die Object Inspector die waarde van die "Offset" -eienskappe van die SineIntegerGenerator2 -komponent op "120" (prent 2)
3. Stel in die Object Inspector die waarde van die "Frequency" eienskap van die SineIntegerGenerator2 komponent op "0.03" (prent 3)
4. Koppel die "Out" -uitsetpen van die SineIntegerGenerator1 -komponent aan die "X" -invoerpen van die "Shields. TFT Sisplay. Elements. Draw Bitmap1" -element van die Arduino -komponent (prent 4)
5. Koppel die "Out" -uitgangspen van die SineIntegerGenerator2 -komponent aan die "Y" -invoerpen van die "Shields. TFT Display. Elements. Draw Bitmap1" -element van die Arduino -komponent (prent 5)

Stap 10: In Visuino: Voeg by en verbind Start en klok multi -bron komponente

Om die bitmap weer te gee elke keer as die X- en Y -posisie opgedateer word, moet ons 'n kloksignaal na die "Draw Bitmap1" -element stuur. Om die opdrag te stuur nadat die posisies verander is, benodig ons 'n manier om die gebeure te sinchroniseer. Hiervoor gebruik ons die herhaalkomponent om voortdurend gebeurtenisse te genereer, en Clock Multi Source om twee gebeurtenisse in volgorde te genereer. Die eerste gebeurtenis sal die sinusopwekkers klok om die X- en Y -posisies op te dateer, en die tweede sal die 'Draw Bitmap1' teken:

1. Tik "herhaal" in die filtervak van die komponentgereedskap, kies dan die "Herhaal" -komponent (prent 1) en laat dit in die ontwerparea val (prent 2)
2. Tik "multi" in die filterkassie van die komponentgereedskap, kies dan die "Klok multi -bron" -komponent (prent 2) en laat dit in die ontwerparea val (prent 3)
3. Koppel die "Out" -uitgangspen van die Repeat1 -komponent aan die "In" -invoerpen van die ClockMultiSource1 -komponent (prent 3)
4. Koppel die "Pin [0]" uitvoerpen van die "Out" penne van die ClockMultiSource1 komponent aan die "In" invoerpen van die SineIntegerGenerator1 komponent (prent 4)
5. Koppel die "Pin [0]" uitvoerpen van die "Out" penne van die ClockMultiSource2 komponent aan die "In" invoerpen van die SineIntegerGenerator1 komponent (prent 5)
6. Koppel die "Pin [1]" uitvoerpen van die "Clock" invoerpen van die "Shields. TFT Display. Elements. Draw Bitmap1" element van die Arduino komponent (prent 6)

Stap 11: Genereer, stel op en laai die Arduino -kode op

1. Druk in Visuino F9 of klik op die knoppie op prent 1 om die Arduino -kode te genereer en maak die Arduino IDE oop
2. Klik in die Arduino IDE op die oplaai -knoppie om die kode saam te stel en op te laai (prent 2)

Stap 12: En speel …

Baie geluk! U het die projek voltooi.

Foto's 2, 3, 4 en 5 en die video toon die aangeslote en aangeskakel projek. U sal sien hoe die bitmap om die ILI9341 -gebaseerde TFT -raakskermskerm beweeg soos op die video.

Op prent 1 kan u die volledige Visuino -diagram sien. Die Visuino -projek wat ek vir hierdie instruksies geskep het, en die bitmap met die Visuino -logo is ook hierby aangeheg. U kan dit aflaai en oopmaak in Visuino: