Используйте цветной графический TFT-дисплей для отображения текста и графических элементов: иконок, картинок, графиков, кадров анимации.

В качестве примера возьмём управляющую платформу Arduino Uno. Общение с TFT-экраном происходит через шину SPI. Подключаем управляющие пины к Arduino через делители напряжения, чтобы не повредить дисплей. Руководствуйтесь схемой ниже: Для облегчения работы с TFT-экраном используйте библиотеку UTFT, которая включает в себя разнообразные готовые примеры. Библиотека подходит как для работы с контроллерами, основанными на AVR-платформе, так и с контроллерами на ARM-платформе.

Прошейте Arduino скетчем приведённым ниже. В результате на экране вы должны увидеть надпись «HelloWorld».

240x320_text_1.ino

// библиотека для работы с дисплеем
#include <UTFT.h>
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера пинов
// к которым подключаются линии SCK, SDI (MOSI), D/C, RESET, CS
UTFT myGLCD(TFT01_22SP, 9, 8, 12, 11, 10);
// объявления встроенного шрифта
extern uint8_t BigFont[];
 
void setup()
{
  // инициализируем дисплей
  myGLCD.InitLCD();
  // очищаем экран
  myGLCD.clrScr();
  // выбираем тип шрифта
  myGLCD.setFont(BigFont);
  // печатаем «Hello, world!» в центре верхней строки дисплея
  myGLCD.print("Hello, world!", CENTER, 0);
}
void loop()
{
}

Метод InitLCD – инициализирует дисплей и задает горизонтальную или вертикальную ориентацию. В качестве параметра указывается идентификатор ориентации. Будучи заданной без параметров команда устанавливает горизонтальную ориентацию. Если указать параметр PORTRAIT или 0 – будет выбрана вертикальная ориентация, если указать LANDSCAPE или 1 – горизонтальная.

Метод clrScr – очищает дисплей, стирая всю отображаемую на дисплее информацию и заливает его черным цветом. Параметров не имеет.

Метод print – выводит на дисплей текст, содержимое символьной переменной или объекта типа String. В качестве параметров передаются выводимый текст, координаты верхнего левого угла области печати. Эта команда предназначена для вывода текстовой информации. Координаты печати X и Y задаются в пикселях и могут быть переданы как явно, так и через целочисленные переменные или выражения. Существуют также три предопределенных идентификатора, предназначенные для использования в качестве координаты X:

• LEFT – текст выравнивается по левой границе дисплея
• CENTER – текст выравнивается по центру дисплея
• RIGHT – текст выравнивается по правой границе дисплея

Библиотека UTFT позволяет работать с подгружаемыми шрифтами. Шрифты хранятся в виде массивов данных, которые размещаются в отдельных файлах и подключаются к тексту программы. Исходная библиотека включает 3 шрифта.

• SmallFont – 95 символов 8×12
• BigFont – 95 символов 16×16
• SevenSegNumFont – 10 цифровых символов 32×50

Выводим текст с разными шрифтами и изменяем их ориентацию на дисплее:

240x320_text_2.ino

// библиотека для работы с дисплеем
#include <UTFT.h>
 
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера пинов
// к которым подключаются линии SCK, SDI (MOSI), D/C, RESET, CS
UTFT myGLCD(TFT01_22SP, 9, 8, 12, 11, 10);
 
// объявления встроенных шрифтов
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
 
void setup()
{
}
 
void loop()
{
  // инициализируем дисплей с вертикальной ориентацией
  myGLCD.InitLCD(0);
  // очищаем экран
  myGLCD.clrScr();
  // выбираем большой шрифт
  myGLCD.setFont(BigFont);
  // печатаем строку в центре верхней строки дисплея
  myGLCD.print("TFT01_22SP", CENTER, 0);
  // выбираем большой шрифт
  myGLCD.setFont(SmallFont);
  // печатаем строку в указанной строке позиции
  myGLCD.print("Hello from Amperka!", CENTER, 50);
  // выбираем семисегментный шрифт
  myGLCD.setFont(SevenSegNumFont);
  // печатаем строку в указанной строке позиции
  myGLCD.print("12345", CENTER, 100);
  // ждём 1 секунду
  delay(1000);
 
  // инициализируем дисплей с горизонтальной ориентацией
  myGLCD.InitLCD(1);
  // очищаем экран
  myGLCD.clrScr();
  // выбираем большой шрифт
  myGLCD.setFont(BigFont);
  // печатаем строку в центре верхней строки дисплея
  myGLCD.print("Hello, user!", CENTER, 0);
  // выбираем большой шрифт
  myGLCD.setFont(SmallFont);
  // печатаем строку в указанной строке позиции
  myGLCD.print("The screen is 2.2 diagonal", CENTER, 50);
  // выбираем семисегментный шрифт
  myGLCD.setFont(SevenSegNumFont);
  // печатаем строку в указанной строке позиции
  myGLCD.print("67890", CENTER, 100);
  // ждём 1 секунду
  delay(1000);
}

У каждого метода, отвечающего за цветность, есть три параметра: R, G, B. Допустимые значения для параметров – от 0 до 255. Задавайте уровень каждого цвета вручную или используйте готовые идентификаторы:

Добавим красок в строку «HelloWorld» и выведем несколько цветовых вариантов.

240x320_color_text.ino

// библиотека для работы с дисплеем
#include <UTFT.h>
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера пинов
// к которым подключаются линии SCK, SDI (MOSI), D/C, RESET, CS
UTFT myGLCD(TFT01_22SP, 9, 8, 12, 11, 10);
// объявления встроенного шрифта
extern uint8_t BigFont[];
void setup()
{
  // инициализируем дисплей с вертикальной ориентацией
  myGLCD.InitLCD(0);
  // очищаем экран
  myGLCD.clrScr();
  // выбираем большой шрифт
  myGLCD.setFont(BigFont);
  // устанавливаем красный цвет «чернил» для печати и рисования
  myGLCD.setColor(VGA_RED);
  // печатаем строку в указанной строке позиции
  myGLCD.print("Hello, World!", CENTER, 0);
  // устанавливаем синий цвет «чернил» для печати и рисования
  myGLCD.setColor(VGA_BLUE);
  // печатаем строку в указанной строке позиции
  myGLCD.print("Hello, World!", CENTER, 36);
  // устанавливаем зелёный цвет «чернил» для печати и рисования
  myGLCD.setColor(VGA_GREEN);
  // печатаем строку в указанной строке позиции
  myGLCD.print("Hello, World!", CENTER, 72);
  // устанавливаем серебряный цвет «чернил» для печати и рисования
  myGLCD.setColor(VGA_SILVER);
  // печатаем строку в указанной строке позиции
  myGLCD.print("Hello, World!", CENTER, 108);
}
void loop()
{
}

Опциональный параметр метода print позволяет печатать строки под углом от 0 до 359 градусов. Вращение задается относительно координат печати (левый верхний угол). Нулевое значение угла приводит к горизонтальной печати, далее, по мере увеличения угла, происходит вращение текста по часовой стрелке на заданный угол. Приведенный ниже пример позволяет получить необычный графический эффект:

240x320_rotate_text.ino

// библиотека для работы с дисплеем
#include <UTFT.h>
 
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера пинов
// к которым подключаются линии SCK, SDI (MOSI), D/C, RESET, CS
UTFT myGLCD(TFT01_22SP, 9, 8, 12, 11, 10);
 
// объявления встроенного шрифта
extern uint8_t BigFont[];
 
void setup()
{
  // инициализируем дисплей с вертикальной ориентацией
  myGLCD.InitLCD(0);
  // очищаем экран
  myGLCD.clrScr();
  // выбираем большой шрифт
  myGLCD.setFont(BigFont);
  // устанавливаем зелёный цвет «чернил» для печати и рисования
  myGLCD.setColor(VGA_GREEN);
}
void loop()
{
  // каждый цикл печатаем строку с поворотам на 20 градусов
  for (int deg = 0; deg < 360; deg += 20) {
    String text = "Amperka";
    myGLCD.print(text, 120, 160, deg);
  }
}

Методы печати не определяют выход за пределы дисплея. Так что за максимальной длиной строки придется следить самостоятельно. Если строка окажется слишком длинной, её «хвост» будет выводится поверх уже напечатанного текста.

Программно вывод геометрических фигур реализован через методы библиотеки UTFT, которые используют попиксельный вывод, массив 240x320 точек.

Выведем их на экран.

240x320_figure.ino

// библиотека для работы с дисплеем
#include <UTFT.h>
 
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера пинов
// к которым подключаются линии SCK, SDI (MOSI), D/C, RESET, CS
UTFT myGLCD(TFT01_22SP, 9, 8, 12, 11, 10);
 
void setup()
{
  // инициализируем дисплей с вертикальной ориентацией
  myGLCD.InitLCD(0);
  // очищаем экран
  myGLCD.clrScr();
}
 
void loop()
{
  // устанавливаем чёрный цвет «чернил» для печати и рисования
  myGLCD.setColor(0, 0, 0);
  // вывод закрашенного прямоугольника
  myGLCD.fillRect(1, 1, 240, 320);
 
  // выводим 5 прямоугольников разными цветами
  for (int i = 1; i < 6; i++) {
    switch (i) {
      case 1:
        myGLCD.setColor(255, 0, 255);
        break;
      case 2:
        myGLCD.setColor(255, 0, 0);
        break;
      case 3:
        myGLCD.setColor(0, 255, 0);
        break;
      case 4:
        myGLCD.setColor(0, 0, 255);
        break;
      case 5:
        myGLCD.setColor(255, 255, 0);
        break;
    }
    myGLCD.fillRect(40+(i*20), 30+(i*20), 100+(i*20), 90+(i*20));
  }
  delay(2000);
 
  // устанавливаем чёрный цвет «чернил» для печати и рисования
  myGLCD.setColor(0, 0, 0);
  // вывод закрашенного прямоугольника
  myGLCD.fillRect(1, 1, 240, 320);
 
  // выводим 5 прямоугольников разными цветами
  for (int i = 1; i < 6; i++) {
    switch (i) {
      case 1:
        myGLCD.setColor(255, 0, 255);
        break;
      case 2:
        myGLCD.setColor(255, 0, 0);
        break;
      case 3:
        myGLCD.setColor(0, 255, 0);
        break;
      case 4:
        myGLCD.setColor(0, 0, 255);
        break;
      case 5:
        myGLCD.setColor(255, 255, 0);
        break;
    }
    myGLCD.fillCircle(170-(i*20), 60+(i*20), 30);
  }
  delay(2000);
}

Мы рассмотрели команды рисования графических примитивов. Кстати, для библиотеки UTFT существует дополнение UTFT_Geometry, которое позволяет выводить на дисплей треугольники (контурные и заполненные), дуги окружностей и сектора кругов.

Метод drawBitmap позволяет выводить на дисплей специально подготовленное растровое изображение. В качестве параметров задаются координаты верхнего левого угла изображения, его размеры и имя массива, в котором хранится закодированное изображение. Опциональный параметр scale позволяет управлять масштабированием изображения при выводе на дисплей.

Подготовим изображение для вывода на дисплей. Нам понадобиться графический редактор GIMP и утилита ImageConverter565, которая поставляется вместе с библиотекой и располагается в папке Tools.

• В графическом редакторе GIMP откройте картинку, которую хотите отобразить на дисплее.
• Преобразуйте картинку до размеров дисплея, не больше чем 240x320. Советуем изменить только один параметр, второй автоматически откалибруется сам. Это позволит сохранить пропорции изображения.
• Теперь выставьте размер холста 240x320. Если всё сделано правильно, картинка не должна выходить за пределы холста.
• Сохраните изображение в формате .jpeg и откройте в программе ImageConverter565.
• Изображение размером 240x320 пикселей займет непозволительно много места в памяти контроллера, поэтому мы уменьшим его в 2 раза (120x160 пикселей) и воспользуемся масштабированием. Для этого установите флаг «Reduce size to» и задайте требуемые размеры картинки (120x160).
• В переключателе «Save As» выберем «.c»
• Для AVR-платформы, в переключателе «Target Board» выберем «AVR», для ARM-платформу — «ARM/PIC32»
• В поле «Array Name» задайте имя картинки и нажмите «Save».

В результате работы конвертера вы получите файл с расширением «.c», в котором будет храниться информация о картинке и закодированное изображение. Поместите этот файл в папку Вашего проекта и объявите в программе массив при помощи спецификатора extern так же, как мы это делали для шрифтов. Только в квадратных скобках обязательно нужно указать размер массива в 16-ричном формате. Это значение находится в первом элементе массива, его можно посмотреть открыв полученный в результате конвертирования файл в любом текстовом редакторе. Не забудьте после копирования и подключения массива закрыть и снова открыть файл программы. При этом файл массива откроется на соседней вкладке рядом с текстом программы.

Теперь выведем изображение на дисплей:

240x320_Bitmap.ino

// библиотека для работы с дисплеем
#include <UTFT.h>
 
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера пинов
// к которым подключаются линии SCK, SDI (MOSI), D/C, RESET, CS
UTFT myGLCD(TFT01_22SP, 9, 8, 12, 11, 10);
 
// объявления встроенного шрифта
extern uint8_t BigFont[];
 
// объявления двух массив изображений
extern unsigned int amperka[0x400];
extern unsigned int raspberry[0x400];
 
void setup()
{
  // инициализируем дисплей с горизонтальной ориентацией
  myGLCD.InitLCD();
}
 
void loop()
{
  // закрашиваем дисплей белым цветом
  myGLCD.fillScr(255, 255, 255);
  int x = 0;
  for (int s = 0; s < 4; s++) {
    x += (s*32);
    myGLCD.drawBitmap(x, 0, 32, 32, amperka, s+1);
  }
  x = 0;
  for (int s = 4; s > 0; s--) {
    myGLCD.drawBitmap(x, 224-(s*32), 32, 32, raspberry, s);
    x += (s*32);
  }
 
  delay(1000);
}

• Наименование: TFT01-22SP
• Контроллер: ILI9340C
• Диагональ: 2,2 дюйма
• Напряжение питание: 5 В
• Напряжение сигналов: 3,3 В
• Разрешение: 320×240 (RGB)
• Интерфейс: SPI
• Дополнительно: разъём для SD-карты
• Размер экрана: 48×37 мм
• Размер модуля: 67×40 мм

• Цветной графический TFT-экран 320×240 / 2,2” в магазине.
• Библиотека для работы с Arduino

• При длительной работе в закрытом корпусе возможен нагрев экрана. Нагрев можно уменьшить, если отключить подсветку экрана, или делать её менее яркой при помощи PWM через какой-нибудь транзистор в те моменты, когда экран не используется.