Arduino Uno: Растрова анимация на ILI9341 TFT сензорен екран Щит на дисплея с Visuino: 12 стъпки (със снимки)

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:54

Щитовете за TFT сензорен дисплей, базирани на ILI9341, са много популярни нискоразходни екранни екрани за Arduino. Visuino има подкрепа за тях от доста време, но никога не съм имал възможност да напиша урок за това как да ги използвам. Наскоро обаче малко хора задаваха въпроси относно използването на дисплеи с Visuino, затова реших да направя урок.

В този урок ще ви покажа колко лесно е да свържете щита към Arduino и да го програмирате с Visuino, за да анимирате растерна карта, за да се движите по дисплея.

Стъпка 1: Компоненти

1. Една съвместима с Arduino Uno платка (може да работи и с Mega, но все още не съм тествал щита с нея)
2. Един ILI9341 2.4 "TFT сензорен екран щит за Arduino

Стъпка 2: Свържете щита на дисплея със сензорен екран ILI9341 TFT към Arduino

Включете TFT щита върху 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. В диалоговия прозорец "Щитове" разгънете категорията "Дисплеи" и изберете "TFT цветен сензорен екран ILI9341 щит", след което щракнете върху бутона "+", за да го добавите (Снимка 2)

Стъпка 4: Във Visuino: Добавете Draw Text Element за Text Shadow

След това трябва да добавим графични елементи за изобразяване на текст и растерно изображение. Първо ще добавим графичен елемент, за да нарисуваме сянката на текста:

1. В Инспектора на обекти щракнете върху бутона „…“до стойността на свойството „Елементи“на елемента „TFT дисплей“(Снимка 1)
2. В редактора на елементите изберете „Draw Text“и след това щракнете върху бутона „+“(Снимка 2), за да добавите такъв (Снимка 3)
3. В Object Inspector задайте стойността на свойството "Color" на елемента "Draw Text1" на "aclSilver" (Снимка 3)
4. В Object Inspector задайте стойността на свойството "Size" на елемента "Draw Text1" на "4" (Снимка 4). Това прави текста по -голям
5. В Object Inspector задайте стойността на свойството "Text" на елемента "Draw Text1" на "Visuino" (Снимка 5)
6. В Object Inspector задайте стойността на свойството "X" на елемента "Draw Text1" на "43" (Снимка 6)
7. В Object Inspector задайте стойността на свойството "Y" на елемента "Draw Text1" на "278" (Снимка 6)

Стъпка 5: Във Visuino: Добавете Draw Text Element за текстовия преден план

Сега ще добавим графичен елемент, за да нарисуваме текста:

1. В редактора на елементите изберете „Draw Text“и след това щракнете върху бутона „+“(Снимка 1), за да добавите втори (Снимка 2)
2. В Object Inspector задайте стойността на свойството "Size" на елемента "Draw Text1" на "4" (Снимка 2)
3. В Object Inspector задайте стойността на свойството "Text" на елемента "Draw Text1" на "Visuino" (Снимка 3)
4. В Object Inspector задайте стойността на свойството "X" на елемента "Draw Text1" на "40" (Снимка 4)
5. В Object Inspector задайте стойността на свойството "Y" на елемента "Draw Text1" на "275" (Снимка 4)

Стъпка 6: Във Visuino: Добавете Draw Bitmap Element за анимацията

След това ще добавим графичен елемент, за да нарисуваме растерното изображение:

1. В редактора на елементите изберете „Draw Bitmap“и след това щракнете върху бутона „+“(Снимка 1), за да добавите такава (Снимка 2)
2. В Инспектора на обекти щракнете върху бутона „…“до стойността на свойството „Bitmap“на елемента „Draw Bitmap1“(Снимка 2), за да отворите „Bitmap Editor“(Снимка 3)
3. В "Редактор на растерни карти" кликнете върху бутона "Зареждане …" (Снимка 3), за да отворите диалоговия прозорец за отваряне на файла (Снимка 4)
4. В диалоговия прозорец File Open (Отворете файла) изберете растерното изображение, което да нарисувате, и кликнете върху бутона "Open" (Снимка 4). Ако файлът е твърде голям, той може да не може да се побере в паметта на Arduino. Ако по време на компилацията излезете от грешка в паметта, може да се наложи да изберете по -малка растерна карта
5. В "Редактор на растерни карти" кликнете върху "OK". бутон (Снимка 5), за да затворите диалоговия прозорец

Стъпка 7: Във Visuino: Добавете щифтове за свойствата X и Y на елемента Draw Bitmap

За да анимираме растерната карта, трябва да контролираме нейната позиция X и Y. За това ще добавим щифтове за свойствата X и Y:

1. В Инспектора на обекти щракнете върху бутона "Закрепване" пред свойството "X" на елемента "Draw Bitmap1" (Снимка 1) и изберете "Integer SinkPin" (Снимка 2)
2. В Инспектора на обекти щракнете върху бутона "Закрепване" пред свойството "Y" на елемента "Draw Bitmap1" (Снимка 3) и изберете "Integer SinkPin" (Снимка 4)

Стъпка 8: Във Visuino: Добавете 2 целочислени синусоидателни генератора и конфигурирайте първия

Ще използваме 2 целочислени синусоидателни генератора, за да анимираме движението на растерната картина:

1. Въведете „синус“в полето Филтър на инструментариума за компоненти, след което изберете компонента „Генератор на синусово цяло число“(Снимка 1) и пуснете два от тях в областта за проектиране
2. В Object Inspector задайте стойността на свойството "Amplitude" на компонента SineIntegerGenerator1 на "96" (Снимка 2)
3. В Object Inspector задайте стойността на свойството "Offset" на компонента SineIntegerGenerator1 на "96" (Снимка 3)
4. В Object Inspector задайте стойността на свойството "Frequency" на компонента SineIntegerGenerator1 на "0.2" (Снимка 4)

Стъпка 9: Във Visuino: Конфигурирайте втория синусоидален генератор и свържете синусоидалните генератори към X и Y координатните щифтове на растерното изображение

1. В Object Inspector задайте стойността на свойството "Amplitude" на компонента SineIntegerGenerator2 на "120" (Снимка 1)
2. В Object Inspector задайте стойността на свойството "Offset" на компонента SineIntegerGenerator2 на "120" (Снимка 2)
3. В Object Inspector задайте стойността на свойството "Frequency" на компонента SineIntegerGenerator2 на "0,03" (Снимка 3)
4. Свържете изходния щифт "Out" на компонента SineIntegerGenerator1 към входния щифт "X" на елемента "Shields. TFT Sisplay. Elements. Draw Bitmap1" на компонента Arduino (Снимка 4)
5. Свържете изходния щифт "Out" на компонента SineIntegerGenerator2 към входния щифт "Y" на елемента "Shields. TFT Display. Elements. Draw Bitmap1" на компонента Arduino (Снимка 5)

Стъпка 10: Във Visuino: Добавете и свържете стартови и часовникови компоненти с множество източници

За да визуализираме растерната картина всеки път, когато позицията X и Y се актуализира, трябва да изпратим часовник към елемента "Draw Bitmap1". За да изпратим командата след промяна на позициите, се нуждаем от начин за синхронизиране на събитията. За това ще използваме компонент Repeat за постоянно генериране на събития и Clock Multi Source за генериране на 2 събития в последователност. Първото събитие ще синхронизира генераторите на синусоиди, за да актуализира позициите X и Y, а второто ще генерира "Draw Bitmap1":

1. Въведете „repeat“в полето Filter на инструментариума за компоненти, след това изберете компонента „Repeat“(снимка 1) и го пуснете в областта за проектиране (снимка 2)
2. Въведете „multi“в полето Filter на инструментариума за компоненти, след това изберете компонента „Clock Multi Source“(Снимка 2) и го пуснете в областта за проектиране (Снимка 3)
3. Свържете изходния извод "Out" на компонента Repeat1 към входния щифт "In" на компонента ClockMultiSource1 (Снимка 3)
4. Свържете изходния щифт "Pin [0]" на "Out" щифтовете на компонента ClockMultiSource1 към входния щифт "In" на компонента SineIntegerGenerator1 (Снимка 4)
5. Свържете изходния щифт "Pin [0]" на "Out" изводите на компонента ClockMultiSource2 към входния щифт "In" на компонента SineIntegerGenerator1 (Снимка 5)
6. Свържете изходния щифт "Pin [1]" на входния щифт "Clock" на елемента "Shields. TFT Display. Elements. Draw Bitmap1" на компонента Arduino (Снимка 6)

Стъпка 11: Генерирайте, компилирайте и качете кода на Arduino

1. Във Visuino натиснете F9 или щракнете върху бутона, показан на снимка 1, за да генерирате кода на Arduino, и отворете Arduino IDE
2. В IDE на Arduino кликнете върху бутона Качване, за да компилирате и качите кода (Снимка 2)

Стъпка 12: И играйте …

Честито! Приключихте проекта.

Снимки 2, 3, 4 и 5 и видеото показват свързания и захранван проект. Ще видите растерното изображение, движещо се около ILI9341 базирания на TFT сензорен екран щит на дисплея, както се вижда на видеото.

На снимка 1 можете да видите пълната диаграма на Visuino, Приложен е и проектът Visuino, който създадох за този Instructable, и растерното изображение с логото на Visuino. Можете да го изтеглите и отворите във Visuino: