Arduino Uno: Bittikartta -animaatio ILI9341 TFT -kosketusnäytön suojassa Visuinolla: 12 vaihetta (kuvien kanssa)

2025 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2025-01-13 06:57

ILI9341 -pohjaiset TFT -kosketusnäyttönäytön suojat ovat erittäin suosittuja edullisia Arduinon näyttökilpiä. Visuino on tukenut heitä jo jonkin aikaa, mutta minulla ei ole koskaan ollut mahdollisuutta kirjoittaa opetusohjelmaa niiden käyttämisestä. Viime aikoina kuitenkin harvat ihmiset kysyivät näyttöjen käyttämisestä Visuinon kanssa, joten päätin tehdä opetusohjelman.

Tässä opetusohjelmassa näytän sinulle, kuinka helppoa on yhdistää kilpi Arduinoon ja ohjelmoida se Visuinon kanssa animoidaksesi bittikartan, jotta voit liikkua näytöllä.

Vaihe 1: Komponentit

1. Yksi Arduino Uno -yhteensopiva levy (se voi toimia myös Megan kanssa, mutta en ole vielä testannut kilpeä sen kanssa)
2. Yksi ILI9341 2,4 "TFT -kosketusnäyttökilpi Arduinolle

Vaihe 2: Yhdistä ILI9341 TFT -kosketusnäytön suojus Arduinoon

Kytke TFT -suoja Arduino Unon päälle kuvan mukaisesti

Vaihe 3: Käynnistä Visuino ja lisää TFT -näytön suoja

Arduinon ohjelmoinnin aloittamiseksi sinun on asennettava Arduino IDE täältä:

Varmista, että asennat 1.6.7 tai uudemman, muuten tämä Instructable ei toimi

Visuino: https://www.visuino.com on myös asennettava.

1. Käynnistä Visuino kuten ensimmäisessä kuvassa
2. Avaa pudotusvalikko napsauttamalla Arduino -komponentin "Nuoli alas" -painiketta (Kuva 1)
3. Valitse valikosta "Lisää kilvet …" (Kuva 1)
4. Laajenna "Kilvet" -valintaikkunassa "Näytöt" -luokka ja valitse "TFT -värikosketusnäyttö ILI9341 Shield" ja lisää se napsauttamalla "+" -painiketta (Kuva 2)

Vaihe 4: Visuino: Lisää Piirrä tekstielementti tekstin varjoon

Seuraavaksi meidän on lisättävä grafiikkaelementtejä tekstin ja bittikartan renderöimiseksi. Ensin lisäämme grafiikkaelementin piirtämään tekstin varjon:

1. Napsauta Object Inspectorissa "…" -painiketta "TFT -näyttö" -elementin "Elements" -ominaisuuden arvon vieressä (Kuva 1)
2. Valitse elementtieditorissa "Piirrä teksti" ja lisää se napsauttamalla "+" -painiketta (Kuva 2) (Kuva 3)
3. Aseta objektitarkastajan "Piirrä teksti1" -elementin "Väri" -ominaisuuden arvoksi "aclSilver" (Kuva 3)
4. Aseta objektitarkastajan "Piirrä teksti1" -elementin "Koko" -ominaisuuden arvoksi "4" (Kuva 4). Tämä tekee tekstistä isomman
5. Aseta objektitarkastajan "Piirrä teksti1" -elementin "Teksti" -ominaisuuden arvoksi "Visuino" (Kuva 5)
6. Aseta objektitarkastajan "Piirrä teksti1" -elementin "X" -ominaisuuden arvoksi "43" (Kuva 6)
7. Aseta objektitarkastajan "Piirrä teksti1" -elementin "Y" -ominaisuuden arvoksi "278" (Kuva 6)

Vaihe 5: Visuinossa: Lisää Piirrä tekstielementti tekstin etualalle

Nyt lisäämme grafiikkaelementtiä tekstin piirtämiseksi:

1. Valitse elementtieditorissa "Piirrä teksti" ja lisää sitten toinen napsauttamalla "+" -painiketta (Kuva 1) (Kuva 2)
2. Aseta objektitarkastajan "Piirrä teksti1" -elementin "Koko" -ominaisuuden arvoksi "4" (Kuva 2)
3. Aseta objektitarkastajan "Piirrä teksti1" -elementin "Teksti" -ominaisuuden arvoksi "Visuino" (Kuva 3)
4. Aseta objektitarkastajan "Piirrä teksti1" -elementin "X" -ominaisuuden arvoksi "40" (Kuva 4)
5. Aseta objektitarkastajan "Piirrä teksti1" -elementin "Y" -ominaisuuden arvoksi "275" (Kuva 4)

Vaihe 6: Visuinossa: Lisää Draw -bittikarttaelementti animaatioon

Seuraavaksi lisäämme grafiikkaelementin bittikartan piirtämiseksi:

1. Valitse elementtieditorissa "Piirrä bittikartta" ja lisää sitten yksi napsauttamalla "+" -painiketta (Kuva 1) (Kuva 2)
2. Napsauta Objektitarkastajassa "Piirrä bittikartta1" -elementin (Kuva 2) "Bitmap" -ominaisuuden arvon vieressä olevaa "…" -painiketta (kuva 2) avataksesi "Bitmap Editor" (Kuva 3)
3. Napsauta "Bittikarttaeditorissa" "Lataa …" -painiketta (Kuva 3) avataksesi Tiedoston avaus -valintaikkunan (Kuva 4)
4. Valitse piirrettävä bittikartta Tiedoston avaus -valintaikkunassa ja napsauta "Avaa" -painiketta (Kuva 4). Jos tiedosto on liian suuri, se ei ehkä mahdu Arduinon muistiin. Jos muisti loppuu kokoamisen aikana, sinun on ehkä valittava pienempi bittikartta
5. Napsauta "Bitmap Editor" -kohdassa "OK". -painiketta (Kuva 5) sulkeaksesi valintaikkunan

Vaihe 7: Visuinossa: Lisää piirtäjiä piirustusbittikarttaelementin X- ja Y -ominaisuuksiin

Bittikartan animoimiseksi meidän on hallittava sen X- ja Y -asemia. Tätä varten lisäämme nastat X- ja Y -ominaisuuksille:

1. Napsauta Object Inspectorissa "Pin Bitmap1" -elementin "X" -ominaisuuden edessä olevaa "Pin" -painiketta (Kuva 1) ja valitse "Integer SinkPin" (Kuva 2)
2. Napsauta Object Inspectorissa "Pin Bitmap1" -elementin "Y" -ominaisuuden edessä olevaa "Pin" -painiketta (Kuva 3) ja valitse "Integer SinkPin" (Kuva 4)

Vaihe 8: Visuino: Lisää 2 kokonaisluvun sinigeneraattoria ja määritä ensimmäinen

Käytämme 2 kokonaisluvun sinigeneraattoria bittikartan liikkeen animoimiseksi:

1. Kirjoita komponenttityökalun Suodatin -ruutuun "sini" ja valitse sitten "Sine Integer Generator" -komponentti (Kuva 1) ja pudota kaksi niistä suunnittelualueelle
2. Määritä SineIntegerGenerator1 -komponentin "Amplitude" -ominaisuuden arvoksi "Object Inspector" objektitarkastajassa "96" (Kuva 2)
3. Aseta objektitarkastajassa SineIntegerGenerator1 -komponentin "Offset" -ominaisuuden arvoksi "96" (Kuva 3)
4. Aseta SineIntegerGenerator1 -komponentin "Frequency" -ominaisuuden arvoksi Object Inspector -kohdassa "0.2" (Kuva 4)

Vaihe 9: Visuinossa: Määritä toinen sinigeneraattori ja liitä sinigeneraattorit bittikartan X- ja Y -koordinaattien nastoihin

1. Aseta SineIntegerGenerator2 -komponentin "Amplitude" -ominaisuuden arvoksi Object Inspectorissa "120" (Kuva 1)
2. Aseta objektitarkastajassa SineIntegerGenerator2 -komponentin "Offset" -ominaisuuden arvoksi "120" (Kuva 2)
3. Aseta SineIntegerGenerator2 -komponentin "Frequency" -ominaisuuden arvoksi Object Inspector -kohdassa "0.03" (Kuva 3)
4. Liitä SineIntegerGenerator1 -komponentin "Out" -lähtötappi Arduino -komponentin "Shields. TFT Sisplay. Elements. Draw Bitmap1" -elementin "X" -tulonappiin (Kuva 4)
5. Liitä SineIntegerGenerator2 -komponentin "Out" -lähtötappi Arduino -komponentin "Shields. TFT Display. Elements. Draw Bitmap1" -elementin "Y" -tulonappiin (Kuva 5)

Vaihe 10: Visuinossa: Lisää ja yhdistä monilähdekomponentit Käynnistä ja Kello

Jos haluat tehdä bittikartan aina, kun X- ja Y -asema päivitetään, meidän on lähetettävä kellosignaali "Piirrä bittikartta1" -elementtiin. Jotta voimme lähettää komennon sijaintien vaihtamisen jälkeen, tarvitsemme tavan synkronoida tapahtumat. Tätä varten käytämme Repeat -komponenttia jatkuvasti tapahtumien luomiseen ja Clock Multi Source -toimintoa kahden tapahtuman luomiseen peräkkäin. Ensimmäinen tapahtuma kellottaa sinigeneraattoreita päivittämään X- ja Y -asemat, ja toinen kello "Piirrä bittikartta1":

1. Kirjoita komponenttityökaluryhmän Suodatin -ruutuun "toista", valitse sitten "Toista" -komponentti (Kuva 1) ja pudota se suunnittelualueelle (Kuva 2)
2. Kirjoita komponenttityökaluryhmän Suodatin -ruutuun "multi", valitse sitten "Clock Multi Source" -komponentti (Kuva 2) ja pudota se suunnittelualueelle (Kuva 3)
3. Liitä Repeat1 -komponentin "Out" -lähtötappi ClockMultiSource1 -komponentin "In" -tulonastapaan (Kuva 3)
4. Liitä ClockMultiSource1 -komponentin "Out" -napojen "Pin [0]" -lähtötappi SineIntegerGenerator1 -komponentin "In" -tulonappiin (Kuva 4)
5. Liitä ClockMultiSource2 -komponentin "Out" -napojen "Pin [0]" -lähtötappi SineIntegerGenerator1 -komponentin "In" -tulonappiin (Kuva 5)
6. Liitä Arduino -komponentin "Shields. TFT Display. Elements. Draw Bitmap1" -elementin "Clock" -tulonapin "Pin [1]" ulostulonasta (Kuva 6)

Vaihe 11: Luo, käännä ja lähetä Arduino -koodi

1. Visuino -ohjelmassa paina F9 tai napsauta kuvassa 1 näkyvää painiketta Luo Arduino -koodi ja avaa Arduino IDE
2. Napsauta Arduino IDE: ssä Lataa -painiketta, niin voit koota ja lähettää koodin (Kuva 2)

Vaihe 12: Pelaa…

Onnittelut! Olet saattanut projektin päätökseen.

Kuvissa 2, 3, 4 ja 5 sekä videossa näkyy yhdistetty ja käynnistetty projekti. Näet bittikartan liikkuvan ILI9341 -pohjaisen TFT -kosketusnäytön kilven ympärillä, kuten videossa näkyy.

Kuvassa 1 näet koko Visuino -kaavion. Liitteenä on myös Visuino -projekti, jonka olen luonut tälle Instructablelle, ja bittikartta, jossa on Visuino -logo. Voit ladata ja avata sen Visuinossa: