Arduino Uno: растровая анимация на сенсорном экране ILI9341 TFT Display Shield с Visuino: 12 шагов (с изображениями)

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:53

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

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

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

1. Одна плата, совместимая с Arduino Uno (она может работать и с Mega, но я еще не тестировал с ней щит)
2. Один ILI9341 2,4-дюймовый сенсорный экран TFT для Arduino

Шаг 2: Подключите экран сенсорного экрана TFT ILI9341 к 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. В диалоговом окне «Щиты» разверните категорию «Дисплеи» и выберите «Экран с цветным сенсорным экраном TFT ILI9341 Shield», затем нажмите кнопку «+», чтобы добавить его (Рисунок 2).

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

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

1. В Инспекторе объектов нажмите кнопку «…» рядом со значением свойства «Elements» элемента «TFT-дисплей» (рисунок 1).
2. В редакторе элементов выберите «Нарисовать текст», а затем нажмите кнопку «+» (рисунок 2), чтобы добавить его (рисунок 3).
3. В Инспекторе объектов установите значение свойства «Color» элемента «Draw Text1» на «aclSilver» (рисунок 3).
4. В Инспекторе объектов установите значение свойства «Размер» элемента «Нарисовать текст1» равным «4» (рисунок 4). Это делает текст больше
5. В Инспекторе объектов установите значение свойства «Text» элемента «Draw Text1» на «Visuino» (рисунок 5).
6. В инспекторе объектов установите значение свойства «X» элемента «Draw Text1» на «43» (рисунок 6).
7. В Инспекторе объектов установите значение свойства «Y» элемента «Draw Text1» на «278» (рисунок 6).

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

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

1. В редакторе элементов выберите «Нарисовать текст», а затем нажмите кнопку «+» (рисунок 1), чтобы добавить второй (рисунок 2).
2. В Инспекторе объектов установите значение свойства «Размер» элемента «Нарисовать текст1» равным «4» (рисунок 2).
3. В Инспекторе объектов установите значение свойства «Текст» элемента «Нарисовать текст1» на «Визуино» (рисунок 3).
4. В Инспекторе объектов установите значение свойства «X» элемента «Draw Text1» равным «40» (рисунок 4).
5. В Инспекторе объектов установите значение свойства «Y» элемента «Draw Text1» на «275» (рисунок 4).

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

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

1. В редакторе элементов выберите «Нарисовать растровое изображение», а затем нажмите кнопку «+» (рисунок 1), чтобы добавить его (рисунок 2).
2. В Инспекторе объектов нажмите кнопку «…» рядом со значением свойства «Bitmap» элемента «Draw Bitmap1» (рисунок 2), чтобы открыть «Bitmap Editor» (рисунок 3).
3. В «Редакторе растровых изображений» нажмите кнопку «Загрузить…» (рисунок 3), чтобы открыть диалоговое окно открытия файла (рисунок 4).
4. В диалоговом окне открытия файла выберите растровое изображение для рисования и нажмите кнопку «Открыть» (рисунок 4). Если файл слишком большой, он может не поместиться в памяти Arduino. Если во время компиляции возникает ошибка нехватки памяти, возможно, потребуется выбрать растровое изображение меньшего размера.
5. В «Редакторе растровых изображений» нажмите «ОК». кнопка (Рисунок 5), чтобы закрыть диалог

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

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

1. В инспекторе объектов нажмите кнопку «Закрепить» перед свойством «X» элемента «Рисовать Bitmap1» (рисунок 1) и выберите «Целочисленный SinkPin» (рисунок 2).
2. В инспекторе объектов нажмите кнопку «Закрепить» перед свойством «Y» элемента «Рисовать Bitmap1» (рисунок 3) и выберите «Целочисленный SinkPin» (рисунок 4).

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

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

1. Введите «синус» в поле «Фильтр» на панели инструментов компонентов, затем выберите компонент «Генератор целочисленных синусоидальных сигналов» (рисунок 1) и поместите два из них в область дизайна.
2. В инспекторе объектов установите значение свойства «Amplitude» компонента SineIntegerGenerator1 на «96» (рисунок 2).
3. В Инспекторе объектов установите значение свойства «Offset» компонента SineIntegerGenerator1 на «96» (рисунок 3).
4. В Инспекторе объектов установите значение свойства «Частота» компонента SineIntegerGenerator1 равным «0,2» (рисунок 4).

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

1. В инспекторе объектов установите значение свойства «Amplitude» компонента SineIntegerGenerator2 на «120» (рисунок 1).
2. В Инспекторе объектов установите значение свойства «Offset» компонента SineIntegerGenerator2 на «120» (рисунок 2).
3. В Инспекторе объектов установите значение свойства «Частота» компонента 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. Введите «повтор» в поле «Фильтр» на панели инструментов компонентов, затем выберите компонент «Повторить» (рисунок 1) и поместите его в область дизайна (рисунок 2).
2. Введите «multi» в поле «Фильтр» на панели инструментов компонентов, затем выберите компонент «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, и откройте IDE Arduino.
2. В среде Arduino IDE нажмите кнопку «Загрузить», чтобы скомпилировать и загрузить код (рисунок 2).

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

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

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

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