Arduino Uno. Bitmap Animation ILI9341 TFT Touchscreen Display Shield With Visuino. 12 քայլ (նկարներով)

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:51

ILI9341- ի վրա հիմնված TFT Touchscreen Display Shields- ը Arduino- ի համար շատ տարածված ցածր գնով ցուցադրվող վահաններ են: Visuino- ն նրանց աջակցում էր բավականին երկար ժամանակ, բայց ես երբեք առիթ չեմ ունեցել գրել դրանք օգտագործելու վերաբերյալ ձեռնարկ: Վերջերս, սակայն, քչերն էին հարցեր տալիս Visuino- ով ցուցադրումներ օգտագործելու վերաբերյալ, ուստի ես որոշեցի պատրաստել ձեռնարկ:

Այս ձեռնարկում ես ձեզ ցույց կտամ, թե որքան հեշտ է միացնել Shield- ը Arduino- ին և այն ծրագրավորել Visuino- ի հետ ՝ Bitmap- ը կենդանացնելու համար ՝ Displayուցադրման վրա շարժվելու համար:

Քայլ 1: Բաղադրիչներ

1. Մեկ Arduino Uno համատեղելի տախտակ (այն կարող է աշխատել նաև Mega- ի հետ, բայց ես դեռ չեմ փորձարկել վահանը դրա հետ)
2. Մեկ ILI9341 2.4 "TFT Touchscreen Shield Arduino- ի համար

Քայլ 2. Միացրեք ILI9341 TFT Touchscreen Display Shield- ը Arduino- ին

Միացրեք TFT Shield- ը Arduino Uno- ի վերևում, ինչպես ցույց է տրված նկարներում

Քայլ 3: Սկսեք Visuino- ն և ավելացրեք TFT Display Shield

Arduino- ի ծրագրավորումը սկսելու համար ձեզ հարկավոր է տեղադրել Arduino IDE- ն այստեղից ՝

Համոզվեք, որ տեղադրում եք 1.6.7 կամ ավելի նոր տարբերակ, հակառակ դեպքում այս Հրահանգը չի գործի:

Visuino- ն ՝ https://www.visuino.com- ը նույնպես պետք է տեղադրվի:

1. Սկսեք Visuino- ն, ինչպես ցույց է տրված առաջին նկարում
2. Կտտացրեք Arduino բաղադրիչի «Սլաքը ներքև» կոճակին ՝ բացվող ընտրացանկը բացելու համար (Նկար 1)
3. Մենյուից ընտրեք «Ավելացնել վահան …» (Նկար 1)
4. «Վահաններ» երկխոսության մեջ ընդլայնեք «plaուցադրություններ» կատեգորիան և ընտրեք «TFT գունավոր հպումային էկրանով ցուցադրում ILI9341 Shield», այնուհետև այն ավելացնելու համար կտտացրեք «+» կոճակին (Նկար 2)

Քայլ 4. Visuino- ում. Ավելացրեք Draw Text Element տեքստի ստվերի համար

Հաջորդը մենք պետք է ավելացնենք գրաֆիկական տարրեր `տեքստը և բիթմապը մատուցելու համար: Սկզբում մենք կավելացնենք գրաֆիկական տարր ՝ տեքստի ստվերը գծելու համար.

1. Օբյեկտի տեսուչում կտտացրեք «…» կոճակին «TFT ցուցադրում» տարրի «Elements» հատկության արժեքի կողքին (նկար 1)
2. Elements խմբագրում ընտրեք «Նկարել տեքստ», այնուհետև կտտացրեք «+» կոճակին (Նկար 2) ՝ մեկը ավելացնելու համար (Նկար 3)
3. Օբյեկտի տեսուչում «Գծիր տեքստ 1» տարրի «Գույն» հատկության արժեքը սահմանեք «aclSilver» (նկար 3)
4. Օբյեկտի տեսուչում սահմանեք «Նկարել տեքստ 1» տարրի «Չափ» հատկության արժեքը «4» (Նկար 4): Սա մեծացնում է տեքստը
5. Օբյեկտի տեսուչում «Նկարել տեքստ 1» տարրի «Տեքստ» հատկության արժեքը սահմանել «Visuino» (Նկար 5)
6. Օբյեկտի տեսուչում «Draw Text1» տարրի «X» հատկության արժեքը սահմանեք «43» (Նկար 6)
7. Օբյեկտի տեսուչում «Draw Text1» տարրի «Y» հատկության արժեքը սահմանել «278» (Նկար 6)

Քայլ 5. Visuino- ում. Ավելացրեք Draw Text Element տեքստի առաջին պլանի համար

Այժմ մենք կավելացնենք գրաֆիկական տարր ՝ տեքստը նկարելու համար.

1. Elements խմբագրում ընտրեք «Նկարել տեքստ», այնուհետև կտտացրեք «+» կոճակին (Նկար 1) ՝ երկրորդը ավելացնելու համար (Նկար 2)
2. Օբյեկտի տեսուչում «Գծիր տեքստ 1» տարրի «Չափ» հատկության արժեքը սահմանեք «4» (Նկար 2)
3. Օբյեկտի տեսուչում «Նկարել տեքստ 1» տարրի «Տեքստ» հատկության արժեքը սահմանել «Visuino» (Նկար 3)
4. Օբյեկտի տեսուչում «Draw Text1» տարրի «X» հատկության արժեքը սահմանել «40» (Նկար 4)
5. Օբյեկտի տեսուչում «Draw Text1» տարրի «Y» հատկության արժեքը սահմանել «275» (Նկար 4)

Քայլ 6. Visuino- ում. Ավելացրեք ոչ ոքի Bitmap տարր անիմացիայի համար

Հաջորդը մենք կավելացնենք գրաֆիկական տարր `bitmap- ը գծելու համար.

1. Elements խմբագրում ընտրեք «Նկարեք Bitmap», այնուհետև կտտացրեք «+» կոճակին (Նկար 1) ՝ մեկը ավելացնելու համար (Նկար 2)
2. Օբյեկտի տեսուչում կտտացրեք «…» կոճակին, որը գտնվում է «Նկարել Bitmap1» տարրի «Bitmap» հատկության արժեքին (նկար 2) ՝ «Bitmap Editor» - ը բացելու համար (նկար 3)
3. «Bitmap խմբագիր» -ում կտտացրեք «Բեռնել …» կոճակին (Նկար 3) ՝ Ֆայլի բաց երկխոսությունը բացելու համար (Նկար 4)
4. Ֆայլի բաց երկխոսության մեջ ընտրեք նկարելու bitmap- ը և կտտացրեք «Բաց» կոճակին (Նկար 4): Եթե ֆայլը չափազանց մեծ է, այն չի կարող տեղավորվել Arduino հիշողության մեջ: Եթե կազմման ընթացքում դուրս եք գալիս հիշողության սխալից, գուցե անհրաժեշտ լինի ընտրել ավելի փոքր բիտ քարտեզ
5. «Bitmap Editor» - ում կտտացրեք «OK»: կոճակը (Նկար 5) երկխոսությունը փակելու համար

Քայլ 7. Visuino- ում. Ավելացրեք գծագրեր Draw Bitmap տարրի X և Y հատկությունների համար

Bitmap- ը կենդանացնելու համար մենք պետք է վերահսկենք դրա X և Y դիրքերը: Դրա համար մենք կավելացնենք քորոցներ X և Y հատկությունների համար.

1. Օբեկտների տեսուչում կտտացրեք «Pin» կոճակին ՝ «Draw Bitmap1» տարրի «X» հատկության դիմաց (Նկար 1) և ընտրեք «Integer SinkPin» (Նկար 2)
2. Օբյեկտի տեսուչում կտտացրեք «Քաշել» կոճակին ՝ «Draw Bitmap1» տարրի «Y» հատկության դիմաց (Նկար 3) և ընտրեք «Integer SinkPin» (Նկար 4)

Քայլ 8. Visuino- ում. Ավելացրեք 2 ամբողջական սինուսային գեներատոր և կազմաձևեք առաջինը

Մենք կօգտագործենք 2 ամբողջ թվային սինուս գեներատոր `բիթմապի շարժումը կենդանացնելու համար.

1. Մուտքագրեք «sine» բաղադրիչի գործիքի տուփի Filter վանդակում, ապա ընտրեք «Sine Integer Generator» բաղադրիչը (նկար 1) և դրանցից երկուսը թողեք նախագծման տարածքում:
2. Object Inspector- ում SineIntegerGenerator1 բաղադրիչի «Amplitude» հատկության արժեքը սահմանեք «96» (Նկար 2)
3. Object Inspector- ում SineIntegerGenerator1 բաղադրիչի «Offset» հատկության արժեքը սահմանեք «96» (Նկար 3)
4. Օբյեկտի տեսուչում SineIntegerGenerator1 բաղադրիչի «Հաճախականություն» հատկության արժեքը սահմանեք «0.2» (Նկար 4)

Քայլ 9. Visuino- ում. Կարգավորեք երկրորդ սինուսների գեներատորը և միացրեք սինուսների գեներատորները Bitmap- ի X և Y կոորդինատային կապերին:

1. Object Inspector- ում SineIntegerGenerator2 բաղադրիչի «Amplitude» հատկության արժեքը սահմանեք «120» (Նկար 1)
2. Object Inspector- ում SineIntegerGenerator2 բաղադրիչի «Offset» հատկության արժեքը սահմանեք «120» (Նկար 2)
3. Օբյեկտի տեսուչում SineIntegerGenerator2 բաղադրիչի «Հաճախականություն» հատկության արժեքը սահմանեք «0.03» (Նկար 3)
4. Միացրեք SineIntegerGenerator1 բաղադրիչի «Ելք» ելքային կապը Arduino բաղադրիչի «Shields. TFT Sisplay. Elements. Draw Bitmap1» տարրի «X» մուտքի քորոցին (Նկար 4)
5. Միացրեք SineIntegerGenerator2 բաղադրիչի «Ելք» ելքային կապը Arduino բաղադրիչի «Shields. TFT Display. Elements. Draw Bitmap1» տարրի «Y» մուտքագրման քորոցին (Նկար 5)

Քայլ 10. Visuino- ում. Ավելացրեք և միացրեք Start և Clock Multi Source բաղադրիչները

Ամեն անգամ, երբ X և Y դիրքերը թարմացվում են, bitmap- ը պետք է ժամացույցի ազդանշան ուղարկենք «Draw Bitmap1» տարրին: Դիրքերը փոխվելուց հետո հրաման ուղարկելու համար մեզ անհրաժեշտ է միջոցներ համաժամանակացնել իրադարձությունները: Դրա համար մենք կօգտագործենք Repeat բաղադրիչը `իրադարձություններ անընդհատ գեներացնելու համար, և Clock Multi Source- ը` հաջորդաբար 2 իրադարձություն: Առաջին իրադարձությունը կհանգեցնի սինուս գեներատորների ՝ X և Y դիրքերը թարմացնելու համար, իսկ երկրորդը ՝ «Draw Bitmap1»:

1. Մուտքագրեք «կրկնել» բաղադրիչի գործիքի տուփի terտիչ դաշտում, այնուհետև ընտրեք «Կրկնել» բաղադրիչը (Նկար 1) և թողեք այն նախագծման տարածքում (Նկար 2)
2. Component Toolbox- ի Filter box- ում մուտքագրեք «multi», այնուհետև ընտրեք «Clock Multi Source» բաղադրիչը (նկար 2) և թողեք այն նախագծման տարածքում (նկար 3)
3. Միացրեք Repeat1 բաղադրիչի «Ելք» ելքային կապը ClockMultiSource1 բաղադրիչի «In» մուտքի քորոցին (Նկար 3)
4. Միացրեք ClockMultiSource1 բաղադրիչի «Ելք» կապերի «Pin [0]» ելքային քորոցը SineIntegerGenerator1 բաղադրիչի «In» մուտքի քորոցին (Նկար 4)
5. Միացրեք ClockMultiSource2 բաղադրիչի «Ելք» կապերի «Pin [0]» ելքային քորոցը SineIntegerGenerator1 բաղադրիչի «In» մուտքի քորոցին (նկար 5)
6. Միացրեք Arduino բաղադրիչի «Shields. TFT Display. Elements. Draw Bitmap1» տարրի «ockամացույց» մուտքագրման քորոցի «Pin [1]» ելքային քորոցը (Նկար 6)

Քայլ 11. Ստեղծեք, կազմեք և վերբեռնեք Arduino ծածկագիրը

1. Visuino- ում սեղմեք F9 կամ կտտացրեք Նկար 1 -ում ցուցադրվող կոճակին ՝ Arduino ծածկագիրը գեներացնելու համար և բացեք Arduino IDE- ն:
2. Arduino IDE- ում կտտացրեք Վերբեռնման կոճակին ՝ ծածկագիրը կազմելու և վերբեռնելու համար (Նկար 2)

Քայլ 12: Եվ խաղալ …

Շնորհավորում եմ: Դուք ավարտել եք նախագիծը:

2 -րդ, 3 -րդ, 4 -րդ և 5 -րդ նկարները և Տեսանյութը ցույց են տալիս միացված և հզորացված նախագիծը: Դուք կտեսնեք, որ Bitmap- ը շարժվում է ILI9341- ի վրա հիմնված TFT Touchscreen Display Shield- ի շուրջ, ինչպես երևում է տեսանյութում:

Նկար 1 -ում դուք կարող եք տեսնել Visuino- ի ամբողջական դիագրամը: Նաև կցված է Visuino նախագիծը, որը ես ստեղծել եմ այս Instructable- ի համար, և bitmap- ը Visuino- ի լոգոյով: Դուք կարող եք ներբեռնել և բացել այն Visuino- ում ՝