Растровая анимация на сенсорном экране TFT ILI9341

Приложения и онлайн-сервисы

	Visuino - графическая среда разработки для Arduino
	IDE Arduino

Об этом проекте

Экраны сенсорного экрана TFT на базе ILI9341 очень популярны недорогие Display Shield для Arduino . Visuino долгое время поддерживал их, но у меня никогда не было возможности написать Учебное пособие по их использованию. Однако в последнее время мало кто задавал вопросы об использовании дисплеев с Visuino . , поэтому я решил сделать учебник.

В этом руководстве я покажу вам, как легко подключить Shield к Arduino . и запрограммируйте его с помощью Visuino для анимации растрового изображения для перемещения по дисплею.

Шаг 1. Компоненты

• Один Arduino Uno совместимая плата (она может работать и с Mega, но я еще не тестировал щит с ней)

• Один ILI9341 2,4-дюймовый сенсорный экран TFT для Arduino

Шаг 2. Подключите экранную панель сенсорного экрана TFT ILI9341 к Arduino

Подключите экран TFT поверх Arduino Uno как показано на картинках.

Шаг 3. Запустите Visuino и добавьте экран TFT Display Shield

Чтобы начать программировать Arduino, вам понадобится Arduino IDE . устанавливается отсюда:http://www.arduino.cc/.

Убедитесь, что вы установили 1.6.7 или более позднюю версию, иначе это руководство не будет работать!

Visuino :https://www.visuino.com также необходимо установить.

• Запустите Visuino как показано на первом изображении

• Нажмите кнопку " Стрелка вниз ". "компонента Arduino, чтобы открыть раскрывающееся меню ( Рисунок 1 )

• В меню выберите « Добавить щиты ... "( Изображение 1 )

• В разделе « Щиты "диалоговое окно" развернуть " Дисплеи "и выберите" Цветной сенсорный экран TFT ILI9341 Shield ", затем нажмите" + ", чтобы добавить его ( Изображение 2 )

Шаг 4. В Visuino:добавьте текстовый элемент Draw для тени текста

Затем нам нужно добавить элементы Graphics для визуализации текста и растрового изображения. Сначала мы добавим графический элемент для рисования тени текста:

• В Инспекторе объектов нажмите " ... "рядом со значением" Элементы "свойство" TFT-дисплея "Элемент ( Изображение 1 )

• В редакторе элементов выберите « Нарисовать текст . », А затем нажмите« + "кнопка ( Изображение 2 ), чтобы добавить один ( Изображение 3 )

• В инспекторе объектов установите значение " Цвет "свойство" Draw Text1 "element to" aclSilver "( Изображение 3 )

• В инспекторе объектов установите значение " Размер . "свойство" Draw Text1 "элемент в" 4 "( Изображение 4 ). Это увеличивает текст

• В инспекторе объектов установите значение " Текст "свойство" Draw Text1 "элемент" в Visuino "( Изображение 5 )

• В инспекторе объектов установите значение « X "свойство" Draw Text1 "элемент в" 43 "( Изображение 6 )

• В инспекторе объектов установите значение " Y "свойство" Draw Text1 "элемент в" 278 "( Изображение 6 )

Шаг 5. В Visuino:добавьте текстовый элемент Draw для текста на переднем плане

Теперь мы добавим графический элемент для рисования текста:

• В редакторе элементов выберите « Нарисовать текст . », А затем нажмите кнопку« »( Изображение 1 ), чтобы добавить второй ( Изображение 2 )

• В инспекторе объектов установите значение " Размер . "свойство" Draw Text1 "элемент в" 4 "( Изображение 2 )

• В инспекторе объектов установите значение " Текст "свойство" Draw Text1 "элемент" в Visuino "( Изображение 3 )

• В инспекторе объектов установите значение « X "свойство" Draw Text1 "элемент в" 40 "( Изображение 4 )

• В инспекторе объектов установите значение " Y "свойство" Draw Text1 "элемент в" 275 "( Изображение 4 )

Шаг 6. В Visuino:добавьте элемент рисования растрового изображения для анимации

Затем мы добавим графический элемент для рисования растрового изображения:

• В редакторе элементов выберите « Рисовать растровое изображение . », А затем нажмите кнопку« »( Изображение 1 ), чтобы добавить один ( Изображение 2 )

• В Инспекторе объектов нажмите " ... "рядом со значением" Растровое изображение "свойство" Draw Bitmap1 "Элемент ( Изображение 2 ), чтобы открыть " Редактор растровых изображений "( Изображение 3 )

• В « Редакторе растровых изображений "нажмите кнопку" Загрузить ... "кнопка ( Изображение 3 ), чтобы открыть диалоговое окно открытия файла ( рисунок 4 )

• В диалоговом окне открытия файла выберите растровое изображение, которое нужно нарисовать, и нажмите кнопку « Открыть . "кнопка ( Изображение 4 ). Если файл слишком большой, он может не поместиться в памяти Arduino. Если во время компиляции возникает ошибка нехватки памяти, возможно, потребуется выбрать растровое изображение меньшего размера.

• В « Редакторе растровых изображений "нажмите" ОК . "кнопка ( Изображение 5 ), чтобы закрыть диалоговое окно

Шаг 7. В Visuino:добавьте булавки для свойств X и Y элемента Draw Bitmap

Чтобы анимировать растровое изображение, нам нужно контролировать его положение по осям X и Y. Для этого мы добавим контакты для свойств X и Y:

• В Инспекторе объектов нажмите " Закрепить "перед кнопкой" X "свойство" Draw Bitmap1 "элемент ( Изображение 1 ) и выберите " Целочисленный SinkPin "( Изображение 2 )

• В Инспекторе объектов нажмите " Закрепить "перед кнопкой" Y "свойство" Draw Bitmap1 "элемент ( Изображение 3 ) и выберите " Целочисленный SinkPin "( Изображение 4 )

Шаг 8:В Visuino:добавьте 2 генератора целочисленных синусов и настройте первый

Мы будем использовать 2 целочисленных генератора синуса для анимации движения растрового изображения:

• Введите " синус . "в поле" Фильтр "на панели инструментов компонентов, затем выберите" Генератор синусоидальных целых чисел "компонент ( Изображение 1 ) и отбросьте два из них это в области дизайна

• В Инспекторе объектов установите значение " Амплитуда ". "свойство SineIntegerGenerator1 компонент к " 96 "( Изображение 2 )

• В Инспекторе объектов установите значение " Смещение . "свойство SineIntegerGenerator1 компонент к " 96 "( Изображение 3 )

• В инспекторе объектов установите значение " Частота ". "свойство SineIntegerGenerator1 компонент к " 0.2 "( Изображение 4 )

Шаг 9:В Visuino:настройте второй генератор синусоид и подключите генераторы синусоид к контактам координат X и Y растрового изображения

• В Инспекторе объектов установите значение " Амплитуда ". "свойство SineIntegerGenerator2 компонент к " 120 "( Изображение 1 )

• В Инспекторе объектов установите значение " Смещение . "свойство SineIntegerGenerator2 компонент к " 120 "( Изображение 2 )

• В инспекторе объектов установите значение " Частота ". "свойство SineIntegerGenerator2 компонент к " 0,03 "( Изображение 3 )

• Подключите " Выход "выходной контакт SineIntegerGenerator1 компонент " X "входной контакт" Shields.TFT Sisplay.Elements.Draw Bitmap1 "элемент Arduino компонент ( рисунок 4 )

• Подключите " Выход "выходной контакт SineIntegerGenerator2 компонент " Y "входной контакт" Shields.TFT Display.Elements.Draw Bitmap1 "элемент Arduino компонент ( рисунок 5 )

Шаг 10. В Visuino:добавьте и подключите компоненты Start и Clock Multi Source

Для рендеринга растрового изображения каждый раз, когда обновляются позиции X и Y, нам нужно послать тактовый сигнал элементу «Draw Bitmap1». Чтобы отправить команду после смены позиций, нам нужен способ синхронизации событий. Для этого мы будем использовать компонент Repeat для постоянной генерации событий и Clock Multi Source для последовательной генерации 2 событий. Первое событие будет синхронизировать генераторы синуса для обновления позиций X и Y, а второе будет синхронизировать «Draw Bitmap1»:

• Введите " повтор . "в поле" Фильтр "на панели инструментов компонентов, затем выберите" Повторить "компонент ( Изображение 1 ) и поместите его в область дизайна ( Изображение 2 )

• Введите " мульти "в поле" Фильтр "на панели инструментов компонентов, затем выберите" Мульти-источник синхронизации . "компонент ( Изображение 2 ) и поместите его в область дизайна ( Изображение 3 )

• Подключите " Выход "выходной контакт Repeat1 компонент " In "входной контакт ClockMultiSource1 компонент ( рисунок 3 )

• Подключите " контакт [0] "выходной контакт" Out "контакты ClockMultiSource1 компонент " In "входной контакт SineIntegerGenerator1 компонент ( рисунок 4 )

• Подключите " контакт [0] "выходной контакт" Out "контакты ClockMultiSource2 компонент " In "входной контакт SineIntegerGenerator1 компонент ( рисунок 5 )

• Подключите " контакт [1] "выходной контакт" Часы "входной контакт" Shields.TFT Display.Elements.Draw Bitmap1 "элемент Arduino компонент ( рисунок 6 )

Шаг 11. Сгенерируйте, скомпилируйте и загрузите код Arduino

• В Visuino , Нажмите F9 или нажмите кнопку, показанную на Рисунке 1 для генерации кода Arduino и открытия IDE Arduino

• В Arduino IDE , нажмите Загрузить кнопку, чтобы скомпилировать и загрузить код ( Изображение 2 )

Шаг 12:И играем ...

Поздравляем! Вы завершили проект.

Рисунки 2, 3, 4 и 5 и видео показать подключенный и включенный проект. Вы увидите, как растровое изображение перемещается по экрану сенсорного экрана TFT на базе ILI9341 . как показано на видео .

На изображении 1 вы можете увидеть полную версию Visuino диаграмма. Также прилагается Visuino проект, который я создал для этого руководства, и растровое изображение с помощью Visuino логотип. Вы можете скачать и открыть его в Visuino . :https://www.visuino.com