Демонстрация TFT-дисплея ILI9341: графика и анимация мяча на Arduino

Введение

Цветные TFT-дисплеи — отличный способ добавить насыщенную визуальную обратную связь в ваши проекты на Arduino. В этом руководстве мы будем управлять TFT-дисплеем 240x320 на базе ILI9341 с помощью библиотек Adafruit ILI9341 и Adafruit GFX. Вы узнаете, как подключить дисплей, установить необходимые библиотеки и написать код, который рисует статические элементы интерфейса и анимирует прыгающий мяч. Всё это работает прямо в вашем браузере с симулятором Velxio — никакого оборудования не требуется!

Обзор схемы

Давайте начнём с изучения схемы. Она проста: Arduino Uno общается с дисплеем ILI9341 по интерфейсу SPI (Serial Peripheral Interface).

Вот полный список подключений:

• SCK (Serial Clock) и MOSI (Master Out Slave In) — линии данных SPI. Они передают тактовый сигнал и данные от Arduino к дисплею.
• CS (Chip Select) сообщает дисплею, когда нужно слушать команды SPI. Активный уровень — низкий.
• D/C (Data/Command) выбирает, является ли передача SPI командой или данными пикселей.
• RST (Reset) сбрасывает контроллер дисплея. Мы подключаем его к цифровому пину, чтобы при необходимости выполнить аппаратный сброс.
• LED управляет подсветкой. Мы установим на нём HIGH, чтобы включить подсветку.

Внешние компоненты не требуются — дисплей работает с логикой 5 В (большинство модулей ILI9341 совместимы с 5 В), а пины SPI подключены напрямую.

Обзор кода

Теперь давайте разберём код. Мы будем использовать библиотеку Adafruit ILI9341 вместе с библиотекой Adafruit GFX для графических примитивов. Эти библиотеки необходимо установить через Менеджер библиотек.

Откройте Менеджер библиотек (Tools > Manage Libraries) и найдите “Adafruit ILI9341” и “Adafruit GFX Library”. Установите обе. Библиотека SPI подключается автоматически.

Вот полный код:

// TFT ILI9341 Display Demo (240x320)
// Library: Adafruit ILI9341 + Adafruit GFX
// Connect: CS=10, DC/RS=9, RST=8, LED=7, MOSI=11(SPI), SCK=13(SPI)

#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
#include <SPI.h>

#define TFT_CS   10
#define TFT_DC    9
#define TFT_RST   8
#define TFT_LED   7

Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);

// Background color: blue (visible on dark simulator canvas)
#define BG_COLOR 0x001F

// Ball state
int ballX = 120, ballY = 200;
int ballDX = 3, ballDY = 2;
const int BALL_R = 10;

// Play-field boundaries
const int FX = 5, FY = 110, FW = 230, FH = 200;

void drawStaticUI() {
  tft.fillScreen(BG_COLOR);

  // Title
  tft.setTextSize(3);
  tft.setTextColor(tft.color565(255, 220, 0));
  tft.setCursor(20, 10);
  tft.print("VELXIO TFT");

  // Subtitle
  tft.setTextSize(2);
  tft.setTextColor(tft.color565(180, 180, 255));
  tft.setCursor(30, 50);
  tft.print("ILI9341 Demo");

  // Color palette bars
  tft.fillRect(10, 82, 70, 18, tft.color565(220, 50, 50));
  tft.fillRect(85, 82, 70, 18, tft.color565(50, 200, 50));
  tft.fillRect(160, 82, 70, 18, tft.color565(50, 100, 240));

  // Play-field border
  tft.drawRect(FX, FY, FW, FH, tft.color565(80, 80, 130));
}

void setup() {
  pinMode(TFT_LED, OUTPUT);
  digitalWrite(TFT_LED, HIGH);

  tft.begin();
  drawStaticUI();
}

void loop() {
  // Erase old ball
  tft.fillCircle(ballX, ballY, BALL_R, BG_COLOR);

  // Update position
  ballX += ballDX;
  ballY += ballDY;

  // Bounce off field borders
  if (ballX < FX + BALL_R + 1 || ballX > FX + FW - BALL_R - 1) ballDX = -ballDX;
  if (ballY < FY + BALL_R + 1 || ballY > FY + FH - BALL_R - 1) ballDY = -ballDY;

  // Draw ball
  tft.fillCircle(ballX, ballY, BALL_R, tft.color565(255, 140, 0));

  delay(30);
}

Ключевые моменты в коде

• Определение пинов: Мы определяем TFT_CS, TFT_DC, TFT_RST и TFT_LED как пины 10, 9, 8 и 7 соответственно. Это соответствует нашей схеме подключения.
• Инициализация библиотеки: Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST); создаёт объект дисплея. Библиотека сама управляет связью по SPI.
• Управление подсветкой: В setup() мы устанавливаем пин 7 в HIGH, чтобы включить подсветку. Без этого экран будет тёмным.
• Статический интерфейс: drawStaticUI() заполняет экран синим фоном, выводит две строки текста, рисует три цветных прямоугольника в качестве палитры и обводит прямоугольник игрового поля.
• Цикл анимации: В loop() мы стираем мяч, рисуя закрашенный круг цветом фона, обновляем его позицию, проверяем столкновения с границами игрового поля и перерисовываем мяч оранжевым цветом. delay(30) управляет частотой кадров.
• Преобразование цветов: tft.color565(r, g, b) преобразует 8-битные значения RGB в 16-битный формат 565, используемый дисплеем.

Ключевые концепции для студентов

1. Связь по SPI: Дисплей использует SPI — синхронный последовательный протокол. Arduino является ведущим устройством, дисплей — ведомым. Для передачи данных нужны только три провода (SCK, MOSI, CS); D/C и RST — дополнительные линии управления.
2. Графические примитивы: Библиотека Adafruit GFX предоставляет функции, такие как fillScreen(), fillRect(), drawRect(), fillCircle(), setCursor(), print() и setTextSize(). Они упрощают рисование фигур и текста.
3. Двойная буферизация (концепция): Мы стираем старый мяч перед рисованием нового. Это предотвращает размазывание. В более сложных проектах можно использовать кадровый буфер.
4. Обнаружение столкновений: Логика прыгающего мяча проверяет, находится ли центр мяча на расстоянии BALL_R пикселей от границы. Если да, направление меняется на противоположное.
5. Глубина цвета: ILI9341 поддерживает 262K цветов (18 бит), но библиотека использует 16 бит (65K цветов) для скорости. color565() упаковывает RGB в формат 5-6-5 бит.

Частые ошибки и советы по отладке

• Подсветка выключена: Если экран остаётся тёмным, убедитесь, что на пине 7 установлен HIGH. В симуляторе проверьте, подключён ли провод к пину LED.
• Неправильные пины: Перепроверьте, что CS, DC, RST, MOSI и SCK соответствуют коду. Один неправильный провод может привести к искажённому выводу или отсутствию изображения.
• Библиотека не установлена: Код не скомпилируется без библиотек Adafruit. Установите их через Менеджер библиотек.
• Конфликты SPI: Если у вас есть другие устройства SPI, убедитесь, что их пины CS не активны одновременно. В данном случае только TFT использует SPI.
• Мяч исчезает: Если мяч выходит за пределы игрового поля, проверьте границы столкновений. В условии используется FX + BALL_R + 1 для учёта радиуса мяча.

Предлагаемые расширения

Когда базовый демонстрационный проект заработает, попробуйте эти улучшения:

• Добавьте второй мяч с другой скоростью и цветом.
• Отображайте данные с датчика (например, с потенциометра) в виде столбчатой диаграммы или числа.
• Создайте простую игру, например Pong или таймер реакции.
• Используйте сенсорный ввод, если ваш дисплей имеет сенсорный контроллер (например, XPT2046).
• Оптимизируйте производительность, используя startWrite() и endWrite() для группировки транзакций SPI.

Попробуйте сами!

Готовы увидеть это в действии? Откройте живой пример в Velxio и нажмите кнопку Run.

Вы также можете изучить панель инструментов холста, чтобы масштабировать, перемещать и проверять симуляцию.

Если вы хотите собрать это с нуля, используйте панель выбора компонентов, чтобы добавить Arduino Uno и дисплей ILI9341.

Нажмите на ссылку ниже, чтобы открыть пример и начать экспериментировать:

Открыть демонстрацию TFT-дисплея ILI9341 на Velxio

Удачного программирования!