Arduino Uno: ILI9341 TFT сенсордук дисплейдеги Bitmap Animation Visuino менен: 12 кадам (сүрөттөр менен)

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:42

ILI9341 негизделген TFT сенсордук дисплей калканчтары Arduino үчүн абдан популярдуу арзан экрандар. Visuino аларды бир топ убакыттан бери колдоп келет, бирок мен аларды кантип колдонуу боюнча окуу куралын жазууга эч качан мүмкүнчүлүк болгон эмес. Жакында, бирок Visuino менен дисплейди колдонуу боюнча бир нече киши суроолорду берди, ошондуктан мен үйрөткүч жасоону чечтим.

Бул үйрөткүчтө мен сизге Shieldды Arduino менен туташтыруу жана аны Visuino менен программалоо, Bitmapти жандандыруу үчүн дисплейде жылышын көрсөтөм.

1 -кадам: Компоненттер

1. Бир Arduino Uno шайкеш келген такта (Бул Мега менен да иштеши мүмкүн, бирок мен азырынча аны менен калканды сынап көрө элекмин)
2. Ардуино үчүн бир ILI9341 2.4 "TFT сенсордук экраны

2 -кадам: ILI9341 TFT сенсордук экран калканчын Arduino менен туташтырыңыз

TFT Shield'ди Arduino Unoнун үстүнө сүрөттөрдө көрсөтүлгөндөй сайыңыз

3 -кадам: Visuino иштетип, TFT Display Shield кошуңуз

Arduino программасын баштоо үчүн, бул жерден Arduino IDE орнотулган болушу керек:

1.6.7 же андан жогору орнотконуңузду текшериңиз, антпесе бул Нускоо иштебейт

Visuino: https://www.visuino.com да орнотулушу керек.

1. Visuino программасын биринчи сүрөттө көрсөтүлгөндөй баштаңыз
2. Ардуино компонентинин "Жебе ылдый" баскычын чыкылдатып, ачылуучу менюну ачыңыз (Picture 1)
3. Менюдан "Калканчтарды кошуу …" дегенди тандаңыз (1 -сүрөт)
4. "Калканчтар" диалогунда "Дисплейлер" категориясын кеңейтүү жана "TFT түстүү сенсордук экран дисплейи ILI9341 Shield" тандоо, андан кийин аны кошуу үчүн "+" баскычын басыңыз (Picture 2)

4 -кадам: Visuinoдо: Текст көлөкөсү үчүн Draw Text Элементин кошуңуз

Андан кийин текстти жана битмапты көрсөтүү үчүн Графика элементтерин кошушубуз керек. Алгач тексттин көлөкөсүн тартуу үчүн графикалык элементти кошобуз:

1. Объект инспекторунда, "TFT Display" элементинин "Elements" касиетинин маанисинин жанындагы "…" баскычын басыңыз (Picture 1)
2. Elements редакторунда "Текстти чийүү" тандап, анан кошуу үчүн "+" баскычын (2 -сүрөт) басыңыз (3 -сүрөт)
3. Объект инспекторунда "Текстти тартуу1" элементинин "Түсү" касиетинин маанисин "aclSilver" деп коюңуз (3 -сүрөт)
4. Объект инспекторунда "Draw Text1" элементинин "Size" касиетинин маанисин "4" кылып коюңуз (Picture 4). Бул текстти чоңойтот
5. Объект инспекторунда "Текстти тартуу" элементинин "Текст" касиетинин маанисин "Visuino" деп коюңуз (5 -сүрөт)
6. Объект инспекторунда "Текстти тартуу1" элементинин "X" касиетинин маанисин "43" кылып коюңуз (6 -сүрөт)
7. Объект инспекторунда "Draw Text1" элементинин "Y" касиетинин маанисин "278" деп коюңуз (6 -сүрөт)

5 -кадам: Visuinoдо: Тексттин фонуна Draw Text Элементин кошуңуз

Эми биз текстти тартуу үчүн графикалык элементти кошобуз:

1. Elements редакторунда "Текстти чийүү" тандап, экинчисин кошуу үчүн "+" баскычын (1 -сүрөт) басыңыз (2 -сүрөт)
2. Объект инспекторунда "Draw Text1" элементинин "Size" касиетинин маанисин "4" кылып коюңуз (Picture 2)
3. Объект инспекторунда "Текстти тартуу" элементинин "Текст" касиетинин маанисин "Visuino" кылып коюңуз (3 -сүрөт)
4. Объект инспекторунда "Текстти чийүү1" элементинин "X" касиетинин маанисин "40" кылып коюңуз (Picture 4)
5. Объект инспекторунда "Draw Text1" элементинин "Y" касиетинин маанисин "275" кылып коюңуз (Picture 4)

6 -кадам: Visuinoдо: Анимация үчүн Draw Bitmap элементин кошуңуз

Андан кийин биз битмапты тартуу үчүн графикалык элементти кошобуз:

1. Elements редакторунда "Битмап тартуу" тандап, анан кошуу үчүн "+" баскычын (1 -сүрөт) басыңыз (2 -сүрөт)
2. Объект инспекторунда "Bitmap Draw" элементинин "Bitmap" касиетинин маанисинин жанындагы "…" баскычын чыкылдатыңыз (Picture 2) "Bitmap Editorду" ачуу үчүн (Picture 3)
3. "Битмап редакторунда" "Жүктөө …" баскычын чыкылдатыңыз (3 -сүрөт) Файлды ачуу диалогун ачыңыз (4 -сүрөт)
4. Файлды ачуу диалогунда, чийүү үчүн разрядды тандап, "Ачуу" баскычын чыкылдатыңыз (Picture 4). Эгерде файл өтө чоң болсо, анда ал Arduino эс тутумуна батпай калышы мүмкүн. Эгерде сиз компиляция учурунда эс тутумунан ката кетирсеңиз, кичине битмапты тандашыңыз керек болот
5. "Битмап редакторунда" чыкылдатыңыз "OK". баскычын (5 -сүрөт) диалогду жабуу үчүн

7 -кадам: Visuinoдо: Draw Bitmap элементинин X жана Y касиеттери үчүн казыктарды кошуңуз

Битмапты жандандыруу үчүн анын X жана Y абалын көзөмөлдөшүбүз керек. Бул үчүн биз X жана Y касиеттери үчүн казыктарды кошобуз:

1. Объект инспекторунда "Bitmap1 Draw" элементинин "X" касиетинин маңдайындагы "Pin" баскычын чыкылдатыңыз (1 -сүрөт) жана "Integer SinkPin" тандаңыз (2 -сүрөт)
2. Объект инспекторунда "Bitmap1 Draw" элементинин "Y" касиетинин маңдайындагы "Pin" баскычын чыкылдатыңыз (Picture 3) жана "Integer SinkPin" тандаңыз (Picture 4)

8 -кадам: Visuinoдо: 2 бүтүн синус генераторун кошуп, биринчисин конфигурациялаңыз

Биз 2 бүтүн синус генераторун колдонуп, битмап кыймылын жандандырабыз:

1. Компоненттер инструменттеринин кутусунун Чыпкасы кутусуна "синус" деп териңиз, андан кийин "Синус бүтүн генератор" компонентин тандаңыз (Сүрөт 1) жана анын экөөсүн дизайн чөйрөсүнө таштаңыз.
2. Объект инспекторунда SineIntegerGenerator1 компонентинин "Amplitude" касиетинин маанисин "96" га коюңуз (Picture 2)
3. Объект инспекторунда SineIntegerGenerator1 компонентинин "Офсет" касиетинин маанисин "96" га коюңуз (Picture 3)
4. Объект инспекторунда SineIntegerGenerator1 компонентинин "Frequency" касиетинин маанисин "0.2" ге коюңуз (Picture 4)

9 -кадам: Visuinoдо: Экинчи Синус Генераторун конфигурациялаңыз жана Синус Генераторлорун Битмаптын X жана Y Координаттарына туташтырыңыз

1. Объект инспекторунда SineIntegerGenerator2 компонентинин "Amplitude" касиетинин маанисин "120" га коюңуз (Picture 1)
2. Объект инспекторунда SineIntegerGenerator2 компонентинин "Офсет" касиетинин маанисин "120" га коюңуз (Picture 2)
3. Объект инспекторунда SineIntegerGenerator2 компонентинин "Frequency" касиетинин маанисин "0.03" кылып коюңуз (Picture 3)
4. SineIntegerGenerator1 компонентинин "Out" чыгаруу пинин Arduino компонентинин "Shields. TFT Sisplay. Elements. Draw Bitmap1" элементинин "X" киргизүү пинине туташтырыңыз (Picture 4)
5. SineIntegerGenerator2 компонентинин "Out" чыгаруу пинин Arduino компонентинин "Shields. TFT Display. Elements. Draw Bitmap1" элементинин "Y" киргизүү пинине туташтырыңыз (Picture 5)

10 -кадам: Visuinoдо: Start and Clock Multi Source компоненттерин кошуп туташтырыңыз

X жана Y позициясы жаңыртылган сайын битмапты көрсөтүү үчүн биз "Draw Bitmap1" элементине саат сигналын жөнөтүшүбүз керек. Позициялар өзгөртүлгөндөн кийин буйрукту жөнөтүү үчүн, биз окуяларды шайкештештирүү жолуна муктажбыз. Бул үчүн биз дайыма окуяларды жаратуу үчүн Кайталоо компонентин колдонобуз, жана 2 окуяны ырааттуулукта түзүү үчүн Саат Көп Булакты колдонобуз. Биринчи иш -чара синус генераторлорун X жана Y позицияларын жаңыртууга, экинчиси "Bitmap1 Draw" саатын көрсөтөт:

1. Компоненттердин куралдар кутусунун Чыпкасы кутусуна "кайталоо" деп териңиз, андан кийин "Кайталоо" компонентин тандаңыз (1 -сүрөт) жана аны дизайн чөйрөсүнө таштаңыз (2 -сүрөт)
2. Компоненттер инструменттеринин кутусунун Фильтр кутусуна "көп" деп териңиз, андан кийин "Сааттын көп булагы" компонентин тандаңыз (2 -сүрөт) жана аны дизайн чөйрөсүнө таштаңыз (3 -сүрөт)
3. Repeat1 компонентинин "Out" чыгаруу пинин ClockMultiSource1 компонентинин "In" киргизүү пинине туташтырыңыз (3 -сүрөт)
4. ClockMultiSource1компонентинин "Чыгуу" казыктарынын "Pin [0]" чыгаруу пинин SineIntegerGenerator1 компонентинин "In" кирүү пинине туташтырыңыз (Picture 4)
5. ClockMultiSource2 компонентинин "Чыгуу" казыктарынын "Pin [0]" чыгаруу пинин SineIntegerGenerator1 компонентинин "In" кирүү пинине туташтырыңыз (Picture 5)
6. Arduino компонентинин "Shields. TFT Display. Elements. Draw Bitmap1" элементинин "Clock" киргизүү пининин "Pin [1]" чыгаруу пинин туташтырыңыз (Picture 6)

11 -кадам: Arduino кодун түзүү, түзүү жана жүктөө

1. Visuinoдо F9 баскычын басыңыз же Arduino кодун чыгаруу үчүн 1 -сүрөттө көрсөтүлгөн баскычты басыңыз жана Arduino IDE ачыңыз.
2. Arduino IDEде, кодду түзүү жана жүктөө үчүн Жүктөө баскычын чыкылдатыңыз (Picture 2)

12 -кадам: Жана ойноо…

Куттуктайм! Сиз долбоорду бүтүрдүңүз.

2, 3, 4 жана 5 -сүрөттөр жана Видео туташкан жана иштетилген долбоорду көрсөтөт. Сиз Bitmapти видеодо көрүнүп тургандай ILI9341 негизделген TFT сенсордук дисплей калканынын айланасында кыймылдап жатканын көрөсүз.

1 -сүрөттө сиз Visuino диаграммасын көрө аласыз, ошондой эле Visuino долбоору тиркелет, мен бул инструкция үчүн түздүм жана Visuino логотиби менен битмап. Аны Visuino'до жүктөп, ача аласыз: