Цветной графический tft экран

Цветной графический tft экран

Используйте цветной графический 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-ричном формате. Это значение находится в первом элементе массива, его можно посмотреть открыв полученный в результате конвертирования файл в любом текстовом редакторе. Не забудьте после копирования и подключения массива закрыть и снова открыть файл программы. При этом файл массива откроется на соседней вкладке рядом с текстом программы.

Читайте также:  Как можно оформить детскую комнату

Общие сведения:

Цветной графический дисплей 2.8 и цветной графический дисплей 2.8 с TouchScreen — дисплеи, разработанные нашей компанией специально для работы с Arduino UNO / MEGA.

Благодаря поддержке огромного количества цветов (более 260 тысяч), а так же библиотекам UTFT и TouchScreen, вы сможете выводить на дисплеи разноцветные фигуры, анимацию, а так же текст (цвет и форму которого вы тоже сможете выбрать).

Дисплеи оснащены преобразователем уровней, благодаря чему вы можете подключать их как к 3В, так и к 5В логике!

Данные дисплеи поддерживают возможность регулировки яркости подсветки, а конструкция их такова, что они удобно устанавливаются в ПВХ-конструктор даже без дополнительной фиксации. Впрочем, если вам понадобится дополнительная жёсткость, то для этого на дисплеях имеется 4 крепёжных петли.

Видео:

Спецификация:

Дисплей без сенсорной панели

  • Разрешение: 320×240 точек;
  • Цветопередача: 262 тысячи цветов;
  • Диагональ: 2.8 дюйма;
  • Интерфейс подключения: SPI;
  • Крепёжные отверстия: М3;
  • Размер: 75мм х 65мм;

Дисплей с сенсорной панелью

  • Разрешение: 320×240 точек;
  • Цветопередача: 262 тысячи цветов;
  • Диагональ: 2.8 дюйма;
  • Тип сенсора:резистивный;
  • Интерфейс подключения: SPI;
  • Крепёжные отверстия: 3мм;
  • Размер: 75мм х 65мм;

Подключение:

Для удобства подключения к Arduino воспользуйтесь Trema Shield, Trema Power Shield, Motor Shield или Trema Set Shield.

Выводы дисплея без сенсорной панели Выводы Arduino
GND (обязательно) GND
VCC (обязательно) 5V
D/C (обязательно) Любой вывод
RST (обязательно) Любой вывод
CS (обязательно) Любой вывод
SCK (обязательно) Любой вывод
MOSI (обязательно) Любой вывод
LED (регулировка яркости, опционально) Любой вывод
MISO (опционально) Любой вывод
Выводы дисплея с сенсорной панелью Выводы Arduino
GND (обязательно) GND
VCC (обязательно) 5V
D/C (обязательно) Любой вывод
RST (обязательно) Любой вывод
CS (обязательно) Любой вывод
SCK (обязательно) Любой вывод
MOSI (обязательно) Любой вывод
LED (регулировка яркости, опционально) Любой вывод
MISO (опционально) Любой вывод
YU (Y+) (обязательно) Любой аналоговый вывод
XR (X-) (обязательно) Любой аналоговый вывод
YD (Y-) (обязательно) Любой вывод
XL (X+) (обязательно) Любой вывод

Далее, в примерах подключения и в примерах скетчей будет выполнено подключение согласно следующей таблиц:

Выводы дисплея Выводы Arduino
GND GND
VCC 5V
D/C 4
RST 5
CS 6
SCK 7
MOSI 8
LED 9
MISO 10 (кроме примера с SD картой)
YU (Y+) А0
XR (X-) А1
YD (Y-) А2
XL (X+) А3

Модуль удобно подключать 3 способами, в зависимости от ситуации:

Способ – 1 : Используя проводной шлейф и Piranha UNO

Используя провода «Папа — Мама», подключаем напрямую к контроллеру Piranha UNO

Дисплей без сенсорной панели

Дисплей с сенсорной панелью

Способ – 2 : Используя проводной шлейф и Shield

Дисплей без сенсорной панели

Дисплей с сенсорной панелью

Способ – 3 : Используя проводной шлейф и Arduino Mega

Используя провода «Папа — Мама», подключаем напрямую к контроллеру Arduino MEGA

Дисплей без сенсорной панели

Дисплей с сенсорной панелью

Питание:

Данный дисплей питается от постоянного источника напряжения 5В.

Библиотеки для работы с дисплеями:

Для работы с дисплеями существует несколько библиотек, каждая из которых может вам пригодится в разных проектах. Опишем кратко каждую из них:

  • Библиотека UTFT для работы с цветными графическими дисплеями (описание функций и примеры смотрите тут)
  • Библиотека TouchScreen для работы с сенсорными экранами (описание функций и примеры смотрите тут)

Форм-фактор:

Данный дисплей выпущен в нашем новом формате, который был специально спроектирован с учётом размеров и расположения отверстий в ПВХ-конструкторе, благодаря чему дисплей легко и удобно в нём закрепить.

Помимо этого, мы разработали специально для данных дисплеев крепёжную пластину, которая так же подходит к нашим ПВХ-корпусам Set Box и Set Box XL.

Подробнее о дисплее:

На нашей Wiki имеются статьи, в которых мы очень подробно разобрали все особенности работы с дисплеями того или иного типа. Ниже вы найдёте ссылки на эти статьи:

  • Информацию о том, как работать с графическим дисплеем вы найдёте тут.
  • Информацию о том, как работать с графическим дисплеем с touchscreen вы найдёте тут.

Координатная сетка

Начало координатной сетки лежит в верхнем левом углу как показано на рисунках ниже.

Примеры:

Вывод текста на дисплей

Вывод фигур на дисплей

Вывод изображения часов на дисплей

Создание программы для рисования, которая использует TouchScreen

Регулировка яркости подсветки:

Как подключить

Вывод LED подключается к любому выводу ARDUINO, который поддерживает ШИМ (выводы со знаком "

" тильды на шелкографии платы). Яркость регулируется изменением процента заполнения ШИМ. Например, вызов analogWrite(dispLED, 128) установит половину яркости.

Пример работы подсветки дисплея (при использовании датчика освещённости)

Работа с SD-картами:

Используя в связке с дисплеем модуль SD-карт, вы можете выводить анимацию и изображения, которые физически не могут быть размещены в памяти микроконтроллера.

Как подключить

Используя провода «Папа — Мама», подключаем напрямую к контроллеру Piranha UNO

Читайте также:  Спатифиллум с красным цветком

В данном примере Адаптер карт microSD подключается к Piranha UNO следующим образом:

Выводы Адаптера Выводы Arduino
INS
MISO 12
GND GND
VCC 5V
MOSI 11
SCK 13
SS(CS) 10

Дисплей без сенсорной панели

Дисплей с сенсорной панелью

Библиотека

Поддерживаемые дисплеи

Дисплеи Инициализация
Цветной графический дисплей 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

Данный дисплей совместим только с Arduino Mega.

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 можно использовать для подключения других модулей.

Выводы не подписанные на рисунке, не используются дисплеем.

Цветной графический дисплей 2.8 TFT 320×240 UNO
Данный дисплей совместим только с Arduino Uno.

UTFT myGLCD(TFT28UNO, A2, A1, A3, A4, A0);

Если Вы не планируете использовать SD карту, то выводы 10-13 можно использовать для подключения других модулей.

Выводы не подписанные на рисунке, не используются дисплеем.

Описание работы с сенсорным экраном находится в разделе Wiki работа с TouchScreen

Цветной графический дисплей 2.4 TFT 240×320
Данный дисплей совместим с любыми Arduino.

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 по последовательной шине данных.

Данный дисплей совместим с любыми Arduino.

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( color );
Выбор цвета для фона текста, выводимого после данной функции.

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( int , x , y [, len [, sym ] ] );
Выводит на дисплей целые числа или содержимое целочисленных переменных.

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( float , dec, x , y [, sym1 [, len [, sym2 ] ] ] );
Выводит на дисплей вещественные числа или содержимое переменных вещественного типа.

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"

Ссылка на основную публикацию
Adblock detector