Цветной сенсорный TFT-экран 320×240 / 3,2”
Выводите яркие текста, рисуйте информативные графики и создавайте игры с помощью цветного TFT-экрана. Встроенный тачскрин превратит дисплейный модуль в настоящий пульт управления.
Подключение и настройка
Напрямую к управляющей платформе дисплей подключить не удастся:
Проблему совместимости решает плата расширения для TFT-дисплеев — это прослойка между экраном и управляющей платформой формата Arduino Mega.
Для экономии памяти микроконтроллера, храните изображение на SD-карте. Установите флешку в картридер на обратной стороне дисплея.
Аппаратное оборудование настроено — смело переходите к примерам работы.
Элементы платы
Экран
Дисплей модуля выполнен по технологии LCD TFT с диагональю 2,8 дюйма. Разрешение экрана составляет 320×240 точек с глубиной 65536 цветов.
Матрица экрана подключена к встроенному чипу ILI9341, который выполняет роль моста между экраном и микроконтроллером.
Систему координат дисплея удобно представить в виде сетки, каждая ячейка которой является отдельным пикселем. Местоположение пикселя задается парой координат «x» и «y».
Контактные пины
Условно дисплейный модуль состоит из трёх устройств:
Все линии питания и управления дисплейным модулем выведены на отдельную контактную колодку с 2×20 пинами.
| Вывод | Сигнал | Устройство | Описание |
|---|---|---|---|
| 1 | GND | Все | Земля |
| 2 | DB0 | Дисплей | Шина данных (16-ти битный режим) |
| 3 | VCC | Все | Питание |
| 4 | DB1 | Дисплей | Шина данных (16-ти битный режим) |
| 5 | NC | — | Не подключён |
| 6 | DB2 | Дисплей | Шина данных (16-ти битный режим) |
| 7 | RS | Дисплей | Выбор передачи: данные или команда |
| 8 | DB3 | Дисплей | Шина данных (16-ти битный режим) |
| 9 | WR | Дисплей | Сигнал записи. Активный низкий уровень. |
| 10 | DB4 | Дисплей | Шина данных (16-ти битный режим) |
| 11 | RD | Дисплей | Сигнал считывания. Активный низкий уровень. |
| 12 | DB5 | Дисплей | Шина данных (16-ти битный режим) |
| 13 | DB8 | Дисплей | Шина данных (8-ми или 16-ти битный режим) |
| 14 | DB6 | Дисплей | Шина данных (16-ти битный режим) |
| 15 | DB9 | Дисплей | Шина данных (8-ми или 16-ти битный режим) |
| 16 | DB7 | Дисплей | Шина данных (16-ти битный режим) |
| 17 | DB10 | Дисплей | Шина данных (8-ми или 16-ти битный режим) |
| 18 | T_CLK | Тачпад | Тактирование |
| 19 | DB11 | Дисплей | Шина данных (8-ми или 16-ти битный режим) |
| 20 | T_CS | Тачпад | Чипселект сенсорной панели. Активный низкий уровень. |
| 21 | DB12 | Дисплей | Шина данных (8-ми или 16-ти битный режим) |
| 22 | T_DIN | Тачпад | Входные данные |
| 23 | DB13 | Дисплей | Шина данных (8-ми или 16-ти битный режим) |
| 24 | T_BUSY | Тачпад | Статус |
| 25 | DB14 | Дисплей | Шина данных (8-ми или 16-ти битный режим) |
| 26 | T_DOUT | Тачпад | Выходные данные |
| 27 | DB15 | Дисплей | Шина данных (8-ми или 16-ти битный режим) |
| 28 | T_IRQ | Тачпад | Прерывание |
| 29 | CS | Дисплей | Чипселект дисплея. Активный низкий уровень. |
| 30 | SD_SO | SD-карта | Выходные данные |
| 31 | NC | — | Не подключён |
| 32 | SD_SCK | SD-карта | Тактирование |
| 33 | RST | Дисплей | Аппаратный сброс дисплея. Активный низкий уровень. |
| 34 | SD_SI | SD-карта | Входные данные |
| 35 | NC | — | Не подключён |
| 36 | SD_NSS | SD-карта | Чипселект карты памяти. Активный низкий уровень. |
| 37 | LED | Дисплей | Подсветка дисплея |
| 38 | NC | — | Не подключён |
| 39 | NC | — | Не подключён |
| 40 | NC | — | Не подключён |
Преобразователь напряжения
Понижающий линейный преобразователь LM1117 с выходом 3,3 вольта обеспечивает питание и подсветку дисплея. Максимальный выходной ток составляет 800 мА.
Драйвер тачскрина
За контроль сенсорной панели отвечает драйвер XPT2046
Цветной графический TFT-экран 240×320
Используйте цветной графический TFT-дисплей для отображения текста и графических элементов: иконок, картинок, графиков, кадров анимации. 
Видеообзор
Подключение и настройка
Внимание! Дисплей работает от источника питания 5 вольт, а работа логики — 3,3 вольта. Если вы используете Arduino c 5-вольтовой логикой, то подключайте управляющие пины дисплея к Arduino через резистивные делители. В противном случае TFT-экран может выйти из строя. Для плат с 3,3 вольтовой логикой резистивные делители не нужны.
В качестве примера возьмём управляющую платформу Arduino Uno. Общение с TFT-экраном происходит через шину SPI. Подключаем управляющие пины к Arduino через делители напряжения, чтобы не повредить дисплей. Руководствуйтесь схемой ниже: 
Для облегчения работы с TFT-экраном используйте библиотеку UTFT, которая включает в себя разнообразные готовые примеры. Библиотека подходит как для работы с контроллерами, основанными на AVR-платформе, так и с контроллерами на ARM-платформе.
Работа с дисплеем
Вывод текста
Прошейте Arduino скетчем приведённым ниже. В результате на экране вы должны увидеть надпись «HelloWorld».
Метод InitLCD – инициализирует дисплей и задает горизонтальную или вертикальную ориентацию. В качестве параметра указывается идентификатор ориентации. Будучи заданной без параметров команда устанавливает горизонтальную ориентацию. Если указать параметр PORTRAIT или 0 – будет выбрана вертикальная ориентация, если указать LANDSCAPE или 1 – горизонтальная.
Метод clrScr – очищает дисплей, стирая всю отображаемую на дисплее информацию и заливает его черным цветом. Параметров не имеет.
Метод print – выводит на дисплей текст, содержимое символьной переменной или объекта типа String. В качестве параметров передаются выводимый текст, координаты верхнего левого угла области печати. Эта команда предназначена для вывода текстовой информации. Координаты печати X и Y задаются в пикселях и могут быть переданы как явно, так и через целочисленные переменные или выражения. Существуют также три предопределенных идентификатора, предназначенные для использования в качестве координаты X :
Встроенные шрифты
Библиотека UTFT позволяет работать с подгружаемыми шрифтами. Шрифты хранятся в виде массивов данных, которые размещаются в отдельных файлах и подключаются к тексту программы. Исходная библиотека включает 3 шрифта.
Выводим текст с разными шрифтами и изменяем их ориентацию на дисплее:
Система кодирования цветов
У каждого метода, отвечающего за цветность, есть три параметра: 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» и выведем несколько цветовых вариантов.
Поворот строки
Опциональный параметр метода print позволяет печатать строки под углом от 0 до 359 градусов. Вращение задается относительно координат печати (левый верхний угол). Нулевое значение угла приводит к горизонтальной печати, далее, по мере увеличения угла, происходит вращение текста по часовой стрелке на заданный угол. Приведенный ниже пример позволяет получить необычный графический эффект:
Методы печати не определяют выход за пределы дисплея. Так что за максимальной длиной строки придется следить самостоятельно. Если строка окажется слишком длинной, её «хвост» будет выводится поверх уже напечатанного текста.
Вывод геометрических фигур
Программно вывод геометрических фигур реализован через методы библиотеки UTFT , которые используют попиксельный вывод, массив 240×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 радиус |
Выведем их на экран.
Мы рассмотрели команды рисования графических примитивов. Кстати, для библиотеки UTFT существует дополнение UTFT_Geometry, которое позволяет выводить на дисплей треугольники (контурные и заполненные), дуги окружностей и сектора кругов.
Вывод изображений
Метод drawBitmap позволяет выводить на дисплей специально подготовленное растровое изображение. В качестве параметров задаются координаты верхнего левого угла изображения, его размеры и имя массива, в котором хранится закодированное изображение. Опциональный параметр scale позволяет управлять масштабированием изображения при выводе на дисплей.
Подготовим изображение для вывода на дисплей. Нам понадобиться графический редактор GIMP и утилита ImageConverter565 , которая поставляется вместе с библиотекой и располагается в папке Tools.
В результате работы конвертера вы получите файл с расширением «.c», в котором будет храниться информация о картинке и закодированное изображение. Поместите этот файл в папку Вашего проекта и объявите в программе массив при помощи спецификатора extern так же, как мы это делали для шрифтов. Только в квадратных скобках обязательно нужно указать размер массива в 16-ричном формате. Это значение находится в первом элементе массива, его можно посмотреть открыв полученный в результате конвертирования файл в любом текстовом редакторе. Не забудьте после копирования и подключения массива закрыть и снова открыть файл программы. При этом файл массива откроется на соседней вкладке рядом с текстом программы.
Работа с цветными графическими дисплеями TFT (библиотека UTFT)
Библиотека
Поддерживаемые дисплеи
| Дисплеи | Инициализация |
|---|---|
Цветной графический дисплей 2.8 TFT 320х240  | Данный дисплей совместим с любыми Arduino. |
UTFT myGLCD(TFT01_24SP, 6, 5, 4, 3, 2);
Дисплей можно подключать к любым выводам Arduino указав № выводов при объявлении объекта myGLCD библиотеки UTFT:
UTFT myGLCD(TFT01_24SP, SDI/MOSI, SCK, CS, RESET, DC/RS);
На дисплее установлен преобразователь уровней, так что его можно подключать и к 3В и к 5В логике.
Описание работы с сенсорным экраном находится в разделе Wiki работа с TouchScreen
UTFT myGLCD(TFT32MEGA, 38, 39, 40, 41); // дисплей на чипе ILI9341.
или
UTFT myGLCD(TFT32MEGA_2, 38, 39, 40, 41); // дисплей на чипе HX8357C.
Дисплеи поставляются на базе чипа ILI9341 или HX8357C. Если изображение на дисплее отображается зеркально, то измените тип дисплея: укажите либо TFT32MEGA, либо TFT32MEGA_2.
Если Вы не планируете использовать SD карту, то выводы 50-53 можно использовать для подключения других модулей.
Выводы не подписанные на рисунке, не используются дисплеем.
UTFT myGLCD(TFT28UNO, A2, A1, A3, A4, A0);
Если Вы не планируете использовать SD карту, то выводы 10-13 можно использовать для подключения других модулей.
Выводы не подписанные на рисунке, не используются дисплеем.
Описание работы с сенсорным экраном находится в разделе Wiki работа с TouchScreen
UTFT myGLCD(TFT01_24SP, 5, 4, 8, 7, 6);
Дисплей можно подключать к любым выводам Arduino указав № выводов при объявлении объекта myGLCD библиотеки UTFT:
UTFT myGLCD(TFT01_24SP, SDI/MOSI, SCK, CS, RESET, DC/RS);
Уровень логической «1» на входах дисплея ≤ 3,3 В.
Если Вы используете 5 В логику, то подключайте входы дисплея через делители:
При питании от 3,3 В необходимо замкнуть перемычку J1 на обратной стороне платы дисплея.
Если Вы желаете использовать SD-карту, то выводы SD_CS, SD_MOSI, SD_MISO и SD_SCK необходимо подключить к Arduino по аппаратной шине SPI:
Если аппаратный вывод CS(SS) Arduino занят, то вывод SD_CS можно подключить к любому другому выводу Arduino, указав его номер в скетче (см пример в файле image_SD библиотеки UTFT).
TouchScreen можно подключать к любым выводам Arduino указав № выводов при объявлении объекта myTouch библиотеки URTouch:
URTouch myTouch( T_CLK, T_CS, T_DIN, T_OUT, T_IRQ);
Например: URTouch myTouch(13, 12, 11, 10, 9);
Указанные в примере выводы Arduino для подключения TouchScreen пересекаются с выводами аппаратной шины SPI на платах Arduino Uno, Pro Mini, Nano и т.д. Если Вы желаете использовать на этих платах и TouchScreen, и SD-карту , то для TouchScreen нужно выбрать другие выводы Arduino, например, аналоговые выводы A0-A4, указав их в скетче при объявлении объекта:
URTouch myTouch(A0, A1, A2, A3, A4);
Описание работы с сенсорным экраном со встроенным контроллером функций TouchScreen находится в разделе Wiki работа с TouchScreen по последовательной шине данных.
UTFT myGLCD(TFT01_22SP, 5, 4, 8, 7, 6);
UTFT myGLCD(TFT18SHLD, 5, 4, 8, 7, 6);
Дисплей можно подключать к любым выводам Arduino указав № выводов при объявлении объекта myGLCD библиотеки UTFT:
UTFT myGLCD(TFT01_22SP, SDI/MOSI, SCK, CS, RESET, DC/RS);
Уровень логической «1» на входах дисплея ≤ 3,3 В.
Если Вы используете 5 В логику, то подключайте входы дисплея через делители:
Если Вы желаете использовать SD-карту, то выводы SD_CS, SD_MOSI, SD_MISO и SD_SCK необходимо подключить к Arduino по аппаратной шине SPI:
Если аппаратный вывод CS(SS) Arduino занят, то вывод SD_CS можно подключить к любому другому выводу Arduino, указав его номер в скетче (см пример в файле image_SD библиотеки UTFT).
Если Вы собираетесь использовать библиотеку UTFT для работы с другими дисплеями, то закомментируйте строку с названием Вашего дисплея в файле «memorysaver.h». А для экономии памяти, раскомментируйте остальные строки кода файла «memorysaver.h».
#1 Пример
Выводим на дисплей текст тремя базовыми шрифтами:
#2 Пример
Заливаем весь дисплей различными цветами:
#3 Пример
Рисуем различные графические элементы:
Базовые функции:
Все функции:
- InitLCD([положение]); – Инициирует начало работы с дисплеем. Необязательный параметр может принимать одно из двух значений: PORTRAIT (вертикальная ориентация) или LANDSCAPE (горизонтальная ориентация — по умолчанию).
- clrScr(); – Очищает дисплей, стирая всю отображаемую на дисплее информацию и заливая дисплей черным цветом.
- fillScr(color); – Очищает дисплей, стирая всю отображаемую на дисплее информацию и заливая его указанным в качестве параметра цветом фона.
- getDisplayXSize(); – Возвращает количество пикселей дисплея по горизонтали, число типа int.
- getDisplayYSize(); – Возвращает количество пикселей дисплея по вертикали, число типа int.
- setColor(color); – Выбор цвета для текста и фигур, выводимых после данной функции.
- getColor(); – Возвращает установленный цвет для текста и фигур в формате RGB565, число типа word.
- setBackColor(color); – Выбор цвета для фона текста, выводимого после данной функции.
- getBackColor(); – Возвращает установленный цвет для фона текста в формате RGB565, число типа word.
- setFont(fontName); – Выбор шрифта для текста выводимого после данной функции.
- getFont(); – Возвращает указатель на выбранный шрифт.
- getFontXsize(); – Возвращает количество пикселей в одном символе шрифта, по ширине.
- getFontYsize(); – Возвращает количество пикселей в одном символе шрифта, по высоте.
- print(str,x,y[,r]); – Вывод на дисплей строк или содержимого строковых переменных.
- printNumI(int,x,y[,len[,sym]]); – Вывод на дисплей целого числа или содержимого целочисленной переменной.
- printNumF(float,dec,x,y[,sym1[,len[,sym2]]]); – Вывод на дисплей вещественного числа или содержимого переменной вещественного типа
- drawPixel(x,y); – Вывод на дисплей точки. Цвет точки определяется текущим значением цвета, устанавливаемым командой setColor().
- drawLine(x1,y1,x2,y2); – Вывод на дисплей линии, заданной координатами двух точек.
- drawRect(x1,y1,x2,y2); – Вывод на дисплей прямоугольника, противоположные углы которого заданы координатами двух точек.
- drawRoundRect(x1,y1,x2,y2); – Вывод на дисплей прямоугольника со скругленными углами.
- fillRect(x1,y1,x2,y2); – Вывод на дисплей закрашенного прямоугольника.
- drawCircle(x,y,R); – Вывод на дисплей окружности, определяемую координатами центра и радиусом.
- fillCircle(x,y,R); – Вывод на дисплей закрашенной окружности.
- drawBitmap(x1,y1,x2,y2,data[,scale]); – Вывод на дисплей картинки из массива.
- Для вывода на дисплей картинки из файла с SD-карты нужно вызвать функцию load(x1,y1,x2,y2,data); объекта библиотеки UTFT_SdRaw.
Для работы функции load, нужно установить и подключить библиотеки: UTFT_SdRaw и SdFat.
Инициализация работы с дисплеем:
| InitLCD( [положение] ); Инициализация работы с дисплеем, с указанием его положения. |
InitLCD(PORTRAIT); // инициализация (вертикальное положение)
- Положение может быть горизонтальным или вертикальным:
- положение: PORTRAIT — вертикальное
- положение: LANDSCAPE — горизонтальное (по умолчанию)
Очистка экрана:
| clrScr(); Очистка экрана с заливкой дисплея чёрным цветом | Параметр: Без параметров. |
| fillScr( color ); Очистка экрана с заливкой заданным цветом. |
fillScr(VGA_RED); // красный цвет
- Цет можно задать тремя способами:
- color: По названию цвета — VGA_RED
- color: В формате RGB565 — 0x001F
- color: В формате RGB — 255,100,0
Выбор цвета:
| setColor( color ); Выбор цвета для текста и фигур, выводимых после данной функции. |
setColor(0,0,255); // синий цвет
- Цет можно задать тремя способами:
- color: По названию цвета — VGA_RED
- color: В формате RGB565 — 0x001F
- color: В формате RGB — 255,100,0
Выбор цвета для фона текста, выводимого после данной функции.
setBackColor(2016); // зелёный цвет
- Цет можно задать тремя способами:
- color: По названию цвета — VGA_RED
- color: В формате RGB565 — 0x001F
- color: В формате RGB — 255,100,0
Удобнее всего устанавливать цвет по его названию:
Полный перечень цветов: VGA_BLACK, VGA_WHITE, VGA_RED, VGA_GREEN, VGA_BLUE, VGA_SILVER, VGA_GRAY, VGA_MAROON, VGA_YELLOW, VGA_OLIVE, VGA_LIME, VGA_AQUA, VGA_TEAL, VGA_NAVY, VGA_FUCHSIA, VGA_PURPLE, VGA_TRANSPARENT.
Выбор шрифта:
| setFont( fontName ); Выбор шрифта для текста выводимого после данной функции. |
setFont(SmallFont); // маленький шрифт
- По умолчанию в библиотеке есть 3 шрифта:
- fontName: SmallFont — маленький шрифт
- fontName: BigFont — большой шрифт
- fontName: SevenSegNumFont — шрифт имитирующий семисегментный индикатор
Вывод текста:
| print( str , x , y [, r] ); Выводит на дисплей строки или содержимое строковых переменных. |
print(«iarduino», 50, 50); // текст «iarduino» горизонтально
print(«iarduino», 50, 50, 90); // текст «iarduino» вертикально
- str: строка или содержимое строковой переменной
- x: координата X
- y: координата Y координаты верхнего левого угла области печати
(x можно указать как число или LEFT / RIGHT / CENTER) - r: поворот текста в градусах, вокруг точки x,y
r — необязательный параметр
Выводит на дисплей целые числа или содержимое целочисленных переменных.
printNumI(2000,50,50); // результат: «2000»
printNumI(2000,50,50,0); // результат: «2000»
printNumI(2000,50,50,5); // результат: » 2000″
printNumI(2000,50,50,6,’0′); // результат: «002000»
- int: целое число или содержимое целочисленной переменной
- x: координата X
- y: координата Y координаты верхнего левого угла области печати
(x можно указать как число или LEFT / RIGHT / CENTER) - len: количество выводимых разрядов числа int.
игнорируется если len меньше количества разрядов int.
необязательный параметр, по умолчанию: 0 - sym: символ заменяющий недостающие разряды.
необязательный параметр, по умолчанию: ‘ ‘
(если len больше чем количество разрядов числа int, то недостающие разряды перед числом будут заменены на sym.)
Выводит на дисплей вещественные числа или содержимое переменных вещественного типа.
printNumF(-234.3442,2,50,50); // результат «-234.34»
printNumF(-234.3442,3,50,50); // результат «-234.344»
printNumF(-234.3442,4,50,50,’*’); // результат «-234*3442»
printNumF(-234.3442,1,50,50,’,’,1); // результат «-234,3»
printNumF(-234.3442,1,50,50,’,’,7); // результат » -234,3″
printNumF(-234.3442,1,50,50,’,’,7,’0′); // результат «-0234,3»
detector