„Arduino Uno“: „Bitmap“animacija naudojant „ILI9341 TFT“jutiklinio ekrano ekraną su „Visuino“: 12 žingsnių (su nuotraukomis)

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:49

ILI9341 pagrįsti TFT jutiklinio ekrano ekranai yra labai populiarūs pigūs „Arduino“ekrano skydai. Visuino jau kurį laiką juos palaiko, bet aš niekada neturėjau galimybės parašyti mokymo programos, kaip juos naudoti. Tačiau pastaruoju metu nedaugelis žmonių uždavė klausimų apie ekranų naudojimą su „Visuino“, todėl nusprendžiau parengti vadovėlį.

Šioje pamokoje aš jums parodysiu, kaip lengva prijungti skydą prie „Arduino“ir užprogramuoti jį su „Visuino“, kad animuotų „Bitmap“, kad galėtumėte judėti ekrane.

1 žingsnis: komponentai

1. Viena su „Arduino Uno“suderinama plokštė (ji gali veikti ir su „Mega“, bet aš dar neišbandžiau skydo)
2. Vienas „ILI9341“2,4 colio TFT jutiklinio ekrano skydas, skirtas „Arduino“

2 veiksmas: prijunkite „ILI9341 TFT“jutiklinio ekrano ekrano skydą prie „Arduino“

Prijunkite TFT skydą prie „Arduino Uno“, kaip parodyta paveikslėliuose

3 veiksmas: paleiskite „Visuino“ir pridėkite TFT ekrano skydą

Norėdami pradėti programuoti „Arduino“, turėsite įdiegti „Arduino IDE“iš čia:

Įsitikinkite, kad įdiegėte 1.6.7 ar naujesnę versiją, kitaip ši instrukcija neveiks

Taip pat reikia įdiegti „Visuino“:

1. Paleiskite Visuino, kaip parodyta pirmoje nuotraukoje
2. Spustelėkite „Arduino“komponento mygtuką „Rodyklė žemyn“, kad atidarytumėte išskleidžiamąjį meniu (1 paveikslas)
3. Meniu pasirinkite „Pridėti skydus …“(1 paveikslas)
4. Dialogo lange „Skydai“išplėskite kategoriją „Ekranai“ir pasirinkite „TFT spalvotas jutiklinio ekrano ekranas ILI9341 skydas“, tada spustelėkite mygtuką „+“, kad jį pridėtumėte (2 paveikslas)

4 veiksmas: „Visuino“: pridėkite piešti teksto elementą teksto šešėliui

Toliau turime pridėti grafikos elementų, kad pateiktume tekstą ir bitų žemėlapį. Pirmiausia pridėsime grafikos elementą, kad nupieštume teksto šešėlį:

1. Objektų inspektoriuje spustelėkite mygtuką „…“, esantį šalia „TFT ekrano“elemento ypatybės „Elements“(1 pav.).
2. Elemento redaktoriuje pasirinkite „Piešti tekstą“, tada spustelėkite mygtuką „+“(2 paveikslas), kad jį pridėtumėte (3 paveikslas)
3. Objektų tikrintojuje elemento „Piešti tekstą 1“ypatybės „Spalva“reikšmę nustatykite į „aclSilver“(3 pav.)
4. Objektų tikrintojuje elemento „Piešti tekstą 1“ypatybės „Dydis“reikšmę nustatykite į „4“(4 pav.). Dėl to tekstas tampa didesnis
5. Objektų inspektoriuje elemento „Draw Text1“ypatybės „Text“reikšmę nustatykite į „Visuino“(5 pav.)
6. Objektų inspektoriuje elemento „Draw Text1“savybės „X“reikšmę nustatykite į „43“(6 pav.)
7. Objektų inspektoriuje elemento „Draw Text1“ypatybės „Y“reikšmę nustatykite į „278“(6 pav.)

5 veiksmas: „Visuino“: pridėkite piešimo teksto elementą teksto priekiniame plane

Dabar tekstui piešti pridėsime grafikos elementą:

1. Elemento redaktoriuje pasirinkite „Piešti tekstą“, tada spustelėkite mygtuką „+“(1 paveikslas), kad pridėtumėte antrąjį (2 paveikslas)
2. Objektų inspektoriuje elemento „Draw Text1“ypatybės „Size“reikšmę nustatykite į „4“(2 pav.)
3. Objektų inspektoriuje elemento „Draw Text1“ypatybės „Text“reikšmę nustatykite į „Visuino“(3 pav.)
4. Objektų tikrintojuje elemento „Draw Text1“ypatybės „X“reikšmę nustatykite į „40“(4 pav.)
5. Objektų inspektoriuje elemento „Draw Text1“ypatybės „Y“reikšmę nustatykite į „275“(4 pav.)

6 veiksmas: „Visuino“: pridėkite animacijos „Draw Bitmap“elementą

Toliau pridėsime grafikos elementą, kad nubrėžtume bitų žemėlapį:

1. Elemento redaktoriuje pasirinkite „Piešti bitkartę“, tada spustelėkite mygtuką „+“(1 paveikslėlis), kad jį pridėtumėte (2 paveikslas)
2. Norėdami atidaryti „Bitmap Editor“, objektų tikrintuve spustelėkite mygtuką „…“šalia elemento „Draw Bitmap1“ypatybės „Bitmap“vertės (2 pav.).
3. „Bitmap Editor“spustelėkite mygtuką „Load…“(3 paveikslas), kad atidarytumėte failo atidarymo dialogo langą (4 pav.)
4. Dialogo lange „Failų atidarymas“pasirinkite norimą piešti bitų žemėlapį ir spustelėkite mygtuką „Atidaryti“(4 pav.). Jei failas yra per didelis, jis gali netilpti „Arduino“atmintyje. Jei kompiliavimo metu išeina iš atminties klaidos, gali tekti pasirinkti mažesnį bitų žemėlapį
5. „Bitmap Editor“spustelėkite „OK“. mygtuką (5 pav.), kad uždarytumėte dialogo langą

7 veiksmas: „Visuino“: pridėkite smeigtukus „Draw Bitmap“elemento X ir Y ypatybėms

Norėdami animuoti „Bitmap“, turime valdyti jo X ir Y padėtį. Norėdami tai padaryti, pridėsime X ir Y savybių kaiščius:

1. Objektų inspektoriuje spustelėkite mygtuką „PIN“, esantį elemento „Draw Bitmap1“ypatybės „X“(1 paveikslas), ir pasirinkite „Integer SinkPin“(2 paveikslas)
2. Objektų inspektoriuje spustelėkite mygtuką „PIN“, esantį elemento „Draw Bitmap1“ypatybės „Y“(3 pav.), Ir pasirinkite „Integer SinkPin“(4 pav.)

8 veiksmas: „Visuino“: pridėkite 2 sveikųjų sinusų generatorius ir sukonfigūruokite pirmąjį

Mes naudosime 2 sveikojo sinuso generatorius, norėdami animuoti bitų žemėlapių judėjimą:

1. Komponentų įrankių rinkinio filtro laukelyje įveskite „sinusas“, tada pasirinkite komponentą „Sinusinių skaičių generatorius“(1 pav.) Ir nuleiskite du iš jų į projektavimo sritį
2. Objektų tikrintuve nustatykite komponento „SineIntegerGenerator1“ypatybės „Amplitude“reikšmę į „96“(2 pav.)
3. Objektų inspektoriuje nustatykite „SineIntegerGenerator1“komponento ypatybės „Ofsetas“reikšmę į „96“(3 pav.)
4. Objektų inspektoriuje nustatykite „SineIntegerGenerator1“komponento ypatybės „Dažnis“reikšmę į „0,2“(4 pav.)

9 veiksmas: „Visuino“: sukonfigūruokite antrąjį sinuso generatorių ir prijunkite sinuso generatorius prie bitų žemėlapio X ir Y koordinačių kaiščių

1. Objektų tikrintuve nustatykite komponento „SineIntegerGenerator2“ypatybės „Amplitude“reikšmę į „120“(1 pav.)
2. Objektų inspektoriuje nustatykite „SineIntegerGenerator2“komponento ypatybės „Ofsetas“reikšmę į „120“(2 pav.)
3. Objektų tikrintuve nustatykite „SineIntegerGenerator2“komponento ypatybės „Dažnis“reikšmę į „0,03“(3 pav.)
4. Prijunkite „SineIntegerGenerator1“komponento „Out“išvesties kaištį prie „Shields. TFT Sisplay. Elements. Draw Bitmap1“„Arduino“komponento elemento „X“įvesties kaiščio (4 pav.)
5. Prijunkite „SineIntegerGenerator2“komponento „Out“išvesties kaištį prie „Shields. TFT Display. Elements. Draw Bitmap1“„Arduino“komponento elemento „Y“įvesties kaiščio (5 pav.)

10 veiksmas: „Visuino“: pridėkite ir prijunkite pradžios ir laikrodžio kelių šaltinių komponentus

Norėdami pateikti bitų žemėlapį kiekvieną kartą, kai atnaujinama X ir Y padėtis, turime nusiųsti laikrodžio signalą į elementą „Draw Bitmap1“. Norėdami išsiųsti komandą pakeitus pozicijas, mums reikia įvykių sinchronizavimo būdo. Tam mes naudosime „Repeat“komponentą nuolatiniam įvykių generavimui, o „Clock Multi Source“- 2 įvykius iš eilės. Pirmasis įvykis stebės sinusų generatorius, kad atnaujintų X ir Y pozicijas, o antrasis - „Lygiosios bitkartės 1“:

1. Komponentų įrankių rinkinio laukelyje Filtras įveskite „pakartoti“, tada pasirinkite komponentą „Kartoti“(1 pav.) Ir nuleiskite jį į projektavimo sritį (2 pav.)
2. Komponentų įrankių rinkinio laukelyje Filtras įveskite „multi“, tada pasirinkite „Clock Multi Source“komponentą (2 pav.) Ir nuleiskite jį į dizaino sritį (3 pav.)
3. Prijunkite „Repeat1“komponento „Out“išvesties kaištį prie „ClockMultiSource1“komponento „In“įvesties kaiščio (3 pav.)
4. Prijunkite „ClockMultiSource1“komponento „Out“kaiščių „Pin [0]“išvesties kaištį prie „SineIntegerGenerator1“komponento įvesties kaiščio (4 pav.)
5. Prijunkite „ClockMultiSource2“komponento „Out“kaiščių „Pin [0]“išvesties kaištį prie „SineIntegerGenerator1“komponento įvesties kaiščio (5 pav.)
6. Prijunkite „Shields. TFT Display. Elem. Draw Bitmap1“elemento „Shields. TFT Display. Elements. Draw Bitmap1“elemento „Shields. TFT Display. Elements. Draw Bitmap1“įvesties kaiščio „Clock [1]“išvesties kaištį (6 pav.)

11 veiksmas: sukurkite, sukompiliuokite ir įkelkite „Arduino“kodą

1. „Visuino“paspauskite F9 arba spustelėkite mygtuką, parodytą 1 paveikslėlyje, kad sugeneruotumėte „Arduino“kodą, ir atidarykite „Arduino IDE“
2. „Arduino IDE“spustelėkite mygtuką Įkelti, kad surinktumėte ir įkeltumėte kodą (2 pav.)

12 žingsnis: ir žaisti …

Sveikinu! Jūs baigėte projektą.

2, 3, 4 ir 5 paveikslėliuose ir vaizdo įraše rodomas prijungtas ir įjungtas projektas. Pamatysite „Bitmap“, judantį aplink ILI9341 pagrįstą TFT jutiklinio ekrano ekraną, kaip parodyta vaizdo įraše.

1 paveiksle galite pamatyti visą „Visuino“diagramą. Taip pat pridedamas „Visuino“projektas, kurį sukūriau šiam „Instructable“, ir bitų žemėlapis su „Visuino“logotipu. Galite atsisiųsti ir atidaryti „Visuino“: