Профессиональное руководство по анимации битмапов на TFT-экране ILI9341 2.4" с Visuino

Компоненты и материалы

• Arduino UNO — 1 шт.
• TFT Touchscreen Shield ILI9341 2.4" для Arduino — 1 шт.

Программное обеспечение

• Visuino — графическая среда разработки для Arduino
• Arduino IDE (версия 1.6.7 или выше)

О проекте

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

Пошаговая инструкция

Шаг 1: Комплектующие

• Arduino Uno (или совместимая плата)
• TFT Touchscreen Shield ILI9341 2.4"

Шаг 2: Подключение щита

Установите TFT-щит сверху на Arduino Uno — контакты совпадают автоматически. Никакой проводки не требуется.

Шаг 3: Запуск Visuino и добавление дисплея

1. Запустите Visuino.
2. Нажмите стрелку вниз у компонента Arduino → Add Shields…
3. В категории Displays выберите TFT Color Touch Screen Display ILI9341 Shield и нажмите +.

Шаг 4: Добавление текстового элемента (тень)

1. В Object Inspector нажмите … у свойства Elements компонента TFT Display.
2. Добавьте элемент Draw Text.
3. Настройте: Color = aclSilver, Size = 4, Text = "Visuino", X = 43, Y = 278.

Шаг 5: Добавление текстового элемента (передний план)

1. Добавьте второй элемент Draw Text.
2. Настройте: Size = 4, Text = "Visuino", X = 40, Y = 275.
3. Цвет по умолчанию (чёрный) создаёт эффект тени вместе с первым элементом.

Шаг 6: Добавление элемента Draw Bitmap для анимации

1. Добавьте элемент Draw Bitmap.
2. Нажмите … у свойства Bitmap → Load… → выберите файл битмапа (не слишком большой, иначе не поместится в память Arduino).
3. Нажмите OK.

Шаг 7: Создание пинов для координат X и Y битмапа

1. В Object Inspector нажмите кнопку Pin у свойства X элемента Draw Bitmap1 → выберите Integer SinkPin.
2. То же для свойства Y.

Шаг 8: Добавление и настройка двух генераторов синуса

1. В Component Toolbox найдите Sine Integer Generator и перетащите два экземпляра в область дизайна.
2. SineIntegerGenerator1 (для X): Amplitude = 96, Offset = 96, Frequency = 0.2.

Шаг 9: Настройка второго генератора и соединение

1. SineIntegerGenerator2 (для Y): Amplitude = 120, Offset = 120, Frequency = 0.03.
2. Соедините Out первого генератора с пином X битмапа.
3. Соедините Out второго генератора с пином Y битмапа.

Шаг 10: Синхронизация через Repeat и Clock Multi Source

1. Добавьте компонент Repeat (генератор периодических событий).
2. Добавьте Clock Multi Source (последовательный генератор нескольких тактовых импульсов).
3. Соедините: Repeat.Out → ClockMultiSource.In.
4. ClockMultiSource.Pin[0] → SineIntegerGenerator1.In и SineIntegerGenerator2.In (обновление координат).
5. ClockMultiSource.Pin[1] → Draw Bitmap1.Clock (прорисовка кадра).

Шаг 11: Генерация, компиляция и загрузка

1. В Visuino нажмите F9 — сгенерируется код и откроется Arduino IDE.
2. В Arduino IDE нажмите Upload.

Шаг 12: Готово!

Битмап будет плавно двигаться по экрану по траектории Лиссажу. Полный проект Visuino и логотип доступны для скачивания.