====== Цветной графический TFT-экран 480×320 ======
Используйте [[amp>product/tft-color-display-480x320?utm_source=man&utm_campaign=tft&utm_medium=wiki|цветной графический TFT-дисплей]] для отображения текста и графических элементов: иконок, картинок, графиков, кадров анимации.
{{ :продукты:tft-lcd-480x320:cte32hr_overview.jpg?nolink |}}
===== Видеообзор =====
{{youtube>EYP4E9p1-co?large}}
===== Подключение и настройка =====
Общение с TFT-экраном происходит через 16-битный параллельный интерфейс. 

Для работы с платформами форм-фактора Arduino mega 2560, вставьте дисплей сверху методом «бутерброда». {{ :продукты:tft-lcd-480x320:cte32hr_cte32hr_mega2560.png?nolink |}}Для коммуникации микроконтроллером дисплей задействует пины: D25-D28, D32-D40, D44-D53. Остальные пины можно использовать по своему усмотрению.

Для облегчения работы с TFT-экраном используйте библиотеку [[https://github.com/amperka/UTFT|UTFT]], которая включает в себя разнообразные готовые примеры. Библиотека подходит как для работы с контроллерами, основанными на AVR-платформе, так и с контроллерами на ARM-платформе.
===== Работа с дисплеем =====
==== Вывод текста ====
Прошейте Arduino скетчем приведённым ниже. В результате на экране вы должны увидеть надпись «HelloWorld».
<code CPP TFT_480x320_text_1.ino>
// библиотека для работы с дисплеем
#include <UTFT.h>
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера управляющих пинов
UTFT myGLCD(CTE32HR, 38, 39, 40, 41);
// объявления встроенного шрифта
extern uint8_t BigFont[];

void setup()
{
  // инициализируем дисплей
  myGLCD.InitLCD();
  // очищаем экран
  myGLCD.clrScr();
  // выбираем тип шрифта
  myGLCD.setFont(BigFont);
  // печатаем «Hello, world!» в центре верхней строки дисплея
  myGLCD.print("Hello, world!", CENTER, 0);
}
void loop()
{
}
</code>
Метод ''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

Выводим текст с разными шрифтами и изменяем их ориентацию на дисплее:
<code CPP TFT_480x320_text_2.ino>
// библиотека для работы с дисплеем
#include <UTFT.h>
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера управляющих пинов
UTFT myGLCD(CTE32HR, 38, 39, 40, 41);
// объявления встроенных шрифтов
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("CTE32HR", CENTER, 0);
  // выбираем большой шрифт
  myGLCD.setFont(SmallFont);
  // печатаем строку в указанной строке позиции
  myGLCD.print("Hello from Amperka!", CENTER, 100);
  // выбираем семисегментный шрифт
  myGLCD.setFont(SevenSegNumFont);
  // печатаем строку в указанной строке позиции
  myGLCD.print("12345", CENTER, 200);
  // ждём 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 3.2 diagonal", CENTER, 100);
  // выбираем семисегментный шрифт
  myGLCD.setFont(SevenSegNumFont);
  // печатаем строку в указанной строке позиции
  myGLCD.print("67890", CENTER, 200);
  // ждём 1 секунду
  delay(1000);
}
</code>
=== Система кодирования цветов ===
У каждого метода, отвечающего за цветность, есть три параметра: R,G,B. Допустимые значения для параметров – от 0 до 255. Задавайте уровень каждого цвета вручную или используйте готовые идентификаторы:
^  Идентификатор цвета  ^  Цвет  ^
|  VGA_SILVER  |  серебряный  |
|  VGA_GRAY  |  серый  |
|  VGA_WHITE  |  белый  |
|  VGA_MAROON  |  красно-коричневый  |
|  VGA_RED  |  красный  |
|  VGA_PURPLE  |  пурпурный  |
|  VGA_FUCHSIA  |  фуксия  |
|  VGA_GREEN  |  зеленый  | 
|  VGA_LIME  |  лайм  |
|  VGA_NAVY  |  темно-синий  |
|  VGA_BLUE  |  синий  |
|  VGA_TEAL  |  сине-зеленый  |
|  VGA_AQUA  |  морская волна  |
Добавим красок в строку «HelloWorld» и выведем её несколько цветных вариантов.
<code CPP TFT_480x320_color_text.ino>
// библиотека для работы с дисплеем
#include <UTFT.h>
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера управляющих пинов
UTFT myGLCD(CTE32HR, 38, 39, 40, 41);
// объявления встроенного шрифта
extern uint8_t BigFont[];
void setup()
{
  // инициализируем дисплей с вертикальной ориентацией
  myGLCD.InitLCD();
  // очищаем экран
  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()
{
}
</code>
=== Поворот строки ===
Еще один опциональный параметр метода ''print'' позволяет печатать строки под углом от 0 до 359 градусов. Вращение задается относительно координат печати (левый верхний угол). Нулевое значение угла приводит к горизонтальной печати, далее, по мере увеличения угла, происходит вращение текста по часовой стрелке на заданный угол. Приведенный ниже пример позволяет получить необычный графический эффект:
<code CPP TFT_480x320_rotate_text.ino>
// библиотека для работы с дисплеем
// библиотека для работы с дисплеем
#include <UTFT.h>
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера управляющих пинов
UTFT myGLCD(CTE32HR, 38, 39, 40, 41);
// объявления встроенного шрифта
extern uint8_t BigFont[];

void setup()
{
  // инициализируем дисплей с горизонтальной ориентацией
  myGLCD.InitLCD();
  // очищаем экран
  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, 240, 160, deg);
  }
}
</code>
Методы печати не умеют определять выход за пределы дисплея. Так что за максимальной длиной строки придется следить самостоятельно. Если строка окажется слишком длинной, то ее «хвост» может быть выведен поверх уже напечатанного текста.
==== Вывод геометрических фигур ====
Программно вывод геометрических фигур реализован через методы библиотеки ''UTFT'', которые используют попиксельный вывод, массив 480×320 точек:

^  Метод  ^  Описание  ^  Параметры  ^
| ''drawPixel(x, y)'' | Вывод пикселя  | x, y координата пикселя  |
| ''drawLine(x1, y1 ,x2 ,y2)'' | Вывод линии  | x1, y1 и x2, y2 координаты начальной и конечной точки линии  |
| ''drawRect(x1, y1 ,x2 ,y2)'' | Вывод прямоугольника  | x1, y1 и x2, y2 координаты двух противоположных углов  |
| ''drawFillRect(x1, y1 ,x2 ,y2)'' | Вывод закрашенного прямоугольника  | x1, y1 и x2, y2 координаты двух противоположных углов  |
| ''drawCircle(x, y, r)'' | Вывод окружности  | x, y координаты центра окружности, r радиус  |
| ''drawfillCircle(x, y, r)'' | Вывод закрашенной окружности  | x, y координаты центра окружности, r радиус  |
Выведем их на экран.
<code CPP TFT_480x320_figure.ino>
// библиотека для работы с дисплеем
#include <UTFT.h>
// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера управляющих пинов
UTFT myGLCD(CTE32HR, 38, 39, 40, 41);
void setup()
{
  // инициализируем дисплей с вертикальной ориентацией
  myGLCD.InitLCD();
  // очищаем экран
  myGLCD.clrScr();
}

void loop()
{
  // устанавливаем чёрный цвет «чернил» для печати и рисования
  myGLCD.setColor(0, 0, 0);
  // очищаем экран
  myGLCD.clrScr();

  // выводим 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(70+(i*20), 60+(i*20), 150+(i*20), 140+(i*20));
  }
  delay(2000);

  // устанавливаем чёрный цвет «чернил» для печати и рисования
  myGLCD.setColor(0, 0, 0);
  // очищаем экран
  myGLCD.clrScr();

  // выводим 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(300-(i*20), 100+(i*20), 40);
  }
  delay(2000);
}
</code>
Мы рассмотрели команды рисования графических примитивов. Кстати, для библиотеки ''UTFT'' существует дополнение UTFT_Geometry, которое позволяет выводить на дисплей треугольники (контурные и заполненные), дуги окружностей и сектора кругов.
==== Вывод изображений ====
Метод ''drawBitmap'' позволяет выводить на дисплей специально подготовленное растровое графическое изображение. В качестве параметров задаются координаты верхнего левого угла изображения, его размеры и имя массива, в котором хранится закодированное изображение. Опциональный параметр scale позволяет управлять масштабированием изображения при выводе на дисплей.

Подготовим изображение для вывода на дисплей. Для этого понадобится сделать ряд действий описанных ниже, а также графический редактор [[http://gimp.org|GIMP]] и специальная утилита ''ImageConverter565'', которая поставляется вместе с библиотекой и располагается в папке Tools.
  * В графическом редакторе GIMP откройте картинку, которую хотите отобразить на дисплее.
  * Далее преобразуйте картинку, так чтоб она вписалась в дисплей, то есть не больше чем 480x320. Советуем менять, только один параметр картинки, а второй откалибруется сам, что бы сохранилась пропорция изображения.
  * Теперь выставьте размер холста 480x320, при это если всё правильно сделали картинка не должна выходить за пределы холста.
  * Сохраните изображение в формате .jpeg и откройте в программе ImageConverter565.
  * Фоновое изображение размером 480x320 пикселей займет непозволительно много места в памяти контроллера, поэтому мы используем изображение, уменьшенное в 2 раза (240x160 пикселей) и воспользуемся масштабированием. Для этого установите флаг «Reduce size to» и задайте требуемые размеры картинки (240x160).
  * В переключателе «Save As» выберем «.c»
  * Если используете AVR-платформу, то в переключателе «Target Board» выберем «AVR», а если ARM-платформу, то —  «ARM/PIC32»"
  * В поле «Array Name» задайте имя картинки и нажмите «Save».

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

Теперь выведем изображение на дисплей:
<code CPP TFT_480x320_Bitmap.ino>
// библиотека для работы с дисплеем
#include <UTFT.h>

// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера управляющих пинов
UTFT myGLCD(CTE32HR, 38, 39, 40, 41);

// объявления двух массив изображений
extern unsigned int amperka[0x1000];
extern unsigned int raspberry[0x1000];

void setup()
{
  // инициализируем дисплей с горизонтальной ориентацией
  myGLCD.InitLCD();
}

void loop()
{
  // закрашиваем дисплей белым цветом
  myGLCD.fillScr(255, 255, 255);
  // выводим изображение
  int x = 0;
  for (int s = 0; s < 3; s++) {
    x += (s*96);
    myGLCD.drawBitmap(x, 0, 64, 64, amperka, s+1);
  }
  x = 0;
  for (int s = 3; s > 0; s--) {
    myGLCD.drawBitmap(x, 320-(s*64), 64, 64, raspberry, s);
    x += (s*64);
  }
  
  delay(1000);
}
</code>
==== Вывод изображений с SD-карты ====
Если вам не хватает объёма памяти микроконтроллера для хранения изображений, вы можете загружать их прямо с SD-карты. 
Для облегчения работы c выводом изображений на дисплей вам понадобится скачать и подключить библиотеки {{:продукты:tft-lcd-480x320:utft_sdraw.zip|UTFT_SdRaw}} и {{:продукты:tft-lcd-480x320:sdfat.zip|SdFat}}.

Метод ''load'' библиотеки ''UTFT_SdRaw''позволяет выводить на дисплей специально подготовленное растровое графическое изображение.
<code cpp>
myFiles.load(x, y, sizeX, sizeY, name, scale)
</code>
В качестве параметров задаются координаты верхнего левого угла изображения, его размеры, имя массива, в котором хранится закодированное изображение. Опциональный параметр scale позволяет управлять масштабированием изображения при выводе на дисплей.

Подготовим изображение для вывода на дисплей. Для этого понадобится:
  * Графический редактор [[http://gimp.org|GIMP]].
  * Утилита ''ImageConverter565'', которая поставляется вместе с библиотекой ''UTFT'' и располагается в директории ''Tools''.
Далее необходимо выполнить некоторый ряд действий:
  - В графическом редакторе GIMP откройте картинку.
  - Далее преобразуйте изображение, так чтоб оно вписалось в дисплей, то есть не больше чем 480x320.
  - Теперь выставьте размер холста 480x320, при это если всё правильно сделали картинка не должна выходить за пределы холста.
  - Сохраните изображение в формате ''.jpeg''.
  - Откройте картинку в программе ImageConverter565.
  - Установите флаг «Reduce size to» и задайте требуемые размеры картинки (480x320).
  - В переключателе «Save As» выберите ''.raw''
  - Если используете AVR-платформу, то в переключателе «Target Board» выберем «AVR», а если ARM-платформу, то — «ARM/PIC32»"
  - В поле «Array Name» задайте имя изображения и нажмите «Save».

В результате работы конвертера вы получите файл с расширением ''.raw'', в котором будет храниться информация о картинке и закодированное изображение. Скопируйте этот файл на SD-карту.
Далее вставьте SD-карту в слот с обратной стороны дисплея и прошейте Arduino скетчем приведённым ниже.
<code CPP TFT_480x320_SD_Bitmap.ino>
/*
В качестве примера скопируйте файл «Arduino.raw» 
входящим в состав библиотеки «UTFT_SdRaw» на SD-карту
*/

#include <SPI.h>
// расширенная библиотека для работы с SD-картой
#include <SdFat.h>
// библиотека для работы с дисплеем
#include <UTFT.h>
// библиотека для вывода изображений на дисплей с SD-карты
#include <UTFT_SdRaw.h>

// пин ChipSelect к которому подключена SD-карта
#define SD_CHIP_SELECT  53

// создаём объект работы с SD-картой
SdFat sd;

// создаём объект класса UTFT
// и передаём идентификатор модели дисплея и номера управляющих пинов
UTFT myGLCD(CTE32HR, 38, 39, 40, 41);

// объявления встроенного шрифта
extern uint8_t BigFont[];

// создаём объект для работы и вывода изображений на дисплей
UTFT_SdRaw myFiles(&myGLCD);

void setup()
{
  // инициализируем дисплей с вертикальной ориентацией
  myGLCD.InitLCD();
  // очищаем экран
  myGLCD.clrScr();
  // выбираем большой шрифт
  myGLCD.setFont(BigFont);

  // ждём успешной инициализации SD-карты
  while (!sd.begin(SD_CHIP_SELECT)) {
    // устанавливаем красный цвет «чернил» для печати и рисования
    myGLCD.setColor(VGA_RED);
    // печатаем строку в указанной строке позиции
    myGLCD.print("SD Card failed!", CENTER, 100);
    delay(1000);
  }

  // устанавливаем зелёный цвет «чернил» для печати и рисования
  myGLCD.setColor(VGA_GREEN);
  // печатаем строку в указанной строке позиции
  myGLCD.print("SD Card initialised", CENTER, 100);
  // ждём 1 секунду
  delay(1000);

  // выводим изображение с SD-карты на дисплей
  myFiles.load(0, 0, 480, 320, "Arduino.raw");
}

void loop()
{
}
</code>


===== Характеристики =====
  * Наименование: CTE32HR
  * Контроллер: HX8357B
  * Диагональ: 3,2 дюйма
  * Рабочее напряжение: 3,3-5 В
  * Разрешение: 480×320 (RGB)
  * Интерфейс: 16-битный параллельный интерфейс 
  * Дополнительно: разъём для SD-карты
  * Размер экрана: 70×43 мм
  * Размер модуля: 89×54 мм

===== Ресурсы =====
  * [[https://github.com/amperka/UTFT|Библиотека для работы с Arduino]]
  * Библиотеки {{:продукты:tft-lcd-480x320:utft_sdraw.zip|UTFT_SdRaw}} и {{:продукты:tft-lcd-480x320:sdfat.zip|SdFat}} для вывода изображений на дисплей с SD-карты.
  * [[amp>product/tft-color-display-480x320?utm_source=man&utm_campaign=tft&utm_medium=wiki|Цветной графический TFT-экран 480×320 ]] в магазине.