Работа с цветным графическим дисплеем

Библиотека

Для работы с данными дисплеями отлично подойдет библиотека UTFT. Библиотеку необходимо скачать с нашего сайта, так как в нее добавлена поддержка дисплеев 2.8 TFT 320x240 UNO, 3.95 TFT 480x320 UNO, 3.2 TFT 480x320 MEGA.

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

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

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

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

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

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

Распиновка дисплея 2,8 TFT 320 x 240
Цветной графический дисплей 3.2 TFT 480x320 MEGA
Данный дисплей совместим только с Arduino Mega.

UTFT myGLCD(TFT32MEGA, 38,39,40,41);

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

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

Распиновка дисплея 3,2 TFT 480 x 320

Цветной графический дисплей 3.95 TFT 480x320 UNO
Данный дисплей совместим только с Arduino Uno.

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

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

UTFT myGLCD(TFT01_22SP, 9, 8, 12, 11, 10);

Если Вы не планируете использовать SD карту, то дисплей можно подключать к любым выводам Arduino: UTFT myGLCD(TFT01_22SP, SDI/MOSI, SCK, CS, RESET, DC/RS);

Уровень логической «1» на входах дисплея ≤ 3,3 В.
Если Вы используете 5 В логику, то подключайте входы дисплея через делители:

Схема подключения 2.2 TFT 320x240 дисплея к Arduino Uno

Если Вы собираетесь использовать библиотеку UTFT для работы с другими дисплеями, то закомментируйте строку с названием Вашего дисплея в файле «memorysaver.h». А для экономии памяти, раскомментируйте остальные строки кода файла «memorysaver.h».

#1 Пример

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

#include <UTFT.h>                                      // подключаем библиотеку UTFT
extern uint8_t SmallFont[];                            // подключаем маленький шрифт
extern uint8_t BigFont[];                              // подключаем большой шрифт
extern uint8_t SevenSegNumFont[];                      // подключаем цифровой шрифт
   UTFT myGLCD(TFT28UNO,  A2,A1,A3,A4,A0);             // тип дисплея 2,8  UNO  (320x240 chip ILI9341)
// UTFT myGLCD(TFT395UNO, A2,A1,A3,A4,A0);             // тип дисплея 3,95 UNO  (480x320 chip ILI9327)
// UTFT myGLCD(TFT32MEGA, 38,39,40,41);                // тип дисплея 3,2  MEGA (480x320 chip ILI9481)
void setup()
{
  myGLCD.InitLCD();                                    // инициируем дисплей
}
void loop()
{
//Стираем все с экрана
  myGLCD.clrScr();                                     // стираем всю информацию с дисплея
  myGLCD.setFont(SmallFont);                           // устанавливаем маленький шрифт
  myGLCD.setColor(VGA_WHITE);                          // устанавливаем цвет текста
  myGLCD.print("iarduino.ru | SmallFont", CENTER, 50); // выводим текст на дисплей
  myGLCD.setFont(BigFont);                             // устанавливаем большой шрифт
  myGLCD.setColor(VGA_BLUE);                           // устанавливаем цвет текста
  myGLCD.print("BigFont", CENTER, 100);                // выводим текст на дисплей
  myGLCD.print("iarduino.ru", CENTER, 115);            // выводим текст на дисплей
  myGLCD.setFont(SevenSegNumFont);                     // устанавливаем цифровой шрифт
  myGLCD.setColor(VGA_FUCHSIA);                        // устанавливаем цвет текста
  myGLCD.print("1234567890", CENTER, 150);             // выводим текст на дисплей
  delay(20000);
}
#2 Пример

Заливаем весь дисплей различными цветами:

#include <UTFT.h>                                      // подключаем библиотеку UTFT
   UTFT myGLCD(TFT28UNO,  A2,A1,A3,A4,A0);             // тип дисплея 2,8  UNO  (320x240 chip ILI9341)
// UTFT myGLCD(TFT395UNO, A2,A1,A3,A4,A0);             // тип дисплея 3,95 UNO  (480x320 chip ILI9327)
// UTFT myGLCD(TFT32MEGA, 38,39,40,41);                // тип дисплея 3,2  MEGA (480x320 chip ILI9481)
void setup()
{
  myGLCD.InitLCD();                                    // инициируем дисплей
  myGLCD.clrScr();                                     // стираем всю информацию с дисплея
}
void loop()
{
  myGLCD.fillScr(VGA_RED   ); delay(1000);             // заливаем экран красным     цветом
  myGLCD.fillScr(VGA_GREEN ); delay(1000);             // заливаем экран зелёным     цветом
  myGLCD.fillScr(VGA_BLUE  ); delay(1000);             // заливаем экран синим       цветом
  myGLCD.fillScr(VGA_SILVER); delay(1000);             // заливаем экран серебристым цветом
  myGLCD.fillScr(VGA_MAROON); delay(1000);             // заливаем экран бордовым    цветом
  myGLCD.fillScr(VGA_NAVY  ); delay(1000);             // заливаем экран тем. синим  цветом
}
#3 Пример

Рисуем различные графические элементы:

#include <UTFT.h>                                      // подключаем библиотеку UTFT
   UTFT myGLCD(TFT28UNO,  A2,A1,A3,A4,A0);             // тип дисплея 2,8  UNO  (320x240 chip ILI9341)
// UTFT myGLCD(TFT395UNO, A2,A1,A3,A4,A0);             // тип дисплея 3,95 UNO  (480x320 chip ILI9327)
// UTFT myGLCD(TFT32MEGA, 38,39,40,41);                // тип дисплея 3,2  MEGA (480x320 chip ILI9481)
void setup()
{
  myGLCD.InitLCD();                                    // инициируем дисплей
}
void loop()
{
  myGLCD.clrScr();                                     // стираем всю информацию с дисплея
  myGLCD.setColor(VGA_RED);                            // Устанавливаем красный цвет
  myGLCD.drawLine(10,10,150,10);                       // рисуем линию (через точки с координатами 10x10 - 150x10)
  myGLCD.drawRect(10,20,150,80);                       // рисуем прямоугольник (с противоположными углами в координатах 10x20 - 150x80)
  myGLCD.drawRoundRect(10,90,150,160);                 // рисуем прямоугольник со скруглёнными углами (с противоположными углами в координатах 10x90 - 150x160)
  myGLCD.fillRect(10,170,150,230);                     // рисуем закрашенный прямоугольник (с противоположными углами в координатах 10x170 - 150x230)
  myGLCD.drawCircle(260,60,40);                        // рисуем окружность (с центром в точке 260x60 и радиусом 40)
  myGLCD.fillCircle(260,160,40);                       // рисуем закрашенную окружность (с центром в точке 260x160 и радиусом 40)
  delay(20000);
}


Функции:

Все функции:
  • 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]); – Вывод на дисплей картинки из массива.
  • loadBitmap(x1,y1,x2,y2,"fileName.raw"); – Вывод на дисплей картинки из файла на SD карте.
    Для работы функции loadBitmap, нужно установить и подключить библиотеки: UTFT_tinyFAT и tinyFAT.
Очистка экрана:
clrScr();
Очистка экрана с заливкой дисплея чёрным цветом
Параметр: Без параметров.
fillScr( color );
Очистка экрана с заливкой заданным цветом.


fillScr(VGA_RED); // красный цвет

Параметр:
    Цет можно задать тремя способами:
  • color: По названию цвета - VGA_RED
  • color: В формате RGB565 - 0x001F
  • color: В формате RGB - 255,100,0
myGLCD.clrScr();                                       // очистка экрана с заливкой черным цветом
myGLCD.fillScr(VGA_RED);                               // заливаем красным цветом
myGLCD.fillScr(0xF800);                                // заливаем красным цветом (формат RGB565)
myGLCD.fillScr(255,0,0);                               // заливаем красным цветом (формат RGB)
Выбор цвета:
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
myGLCD.fillScr(VGA_RED);                               // заливаем красным цветом
myGLCD.fillScr(0xF800);                                // заливаем красным цветом (формат RGB565)
myGLCD.fillScr(255,0,0);                               // заливаем красным цветом (формат RGB)

Удобнее всего устанавливать цвет по его названию:
Полный перечень цветов: 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 - шрифт имитирующий семисегментный индикатор
#include <UTFT.h>                                      // подключаем библиотеку UTFT
extern uint8_t BigFont[];                              // обязательно подключаем шрифт
   UTFT myGLCD(TFT28UNO,  A2,A1,A3,A4,A0);             // тип дисплея 2,8  UNO  (320x240 chip ILI9341)
// UTFT myGLCD(TFT395UNO, A2,A1,A3,A4,A0);             // тип дисплея 3,95 UNO  (480x320 chip ILI9327)
// UTFT myGLCD(TFT32MEGA, 38,39,40,41);                // тип дисплея 3,2  MEGA (480x320 chip ILI9481)
void setup()
{ 
  myGLCD.InitLCD();                                    // инициируем дисплей
  myGLCD.clrScr();                                     // стираем всю информацию с дисплея
  myGLCD.setFont(BigFont);                             // устанавливаем большой шрифт
  myGLCD.setColor(VGA_BLUE);                           // устанавливаем синий цвет текста
  myGLCD.print("BigFont", CENTER, 100);                // выводим текст "BigFont" на дисплей
}
void loop(){
}
Вывод текста:
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"

Параметры:
  • float: вещественное число или содержимое переменной вещественного типа.
  • dec: количество выводимых знаков после запятой.
    допускается только значение больше 0
  • x: координата X
  • y: координата Y
  • координаты верхнего левого угла области печати.
    (x можно указать как число или LEFT / RIGHT / CENTER)
  • sym1: символ заменяющий запятую при выводе.
    необязательный параметр, по умолчанию: '.'
  • len: количество всех выводимых знаков и символов числа int.
    игнорируется если len меньше количества знаков и символов.
    необязательный параметр, по умолчанию: 0
  • sym2: символ заменяющий недостающие разряды.
    необязательный параметр, по умолчанию: ' '
    (если len больше чем количество знаков и символов в числе int, то недостающие разряды перед числом будут заменены на sym2.)
#include <UTFT.h>                                      // подключаем библиотеку UTFT
extern uint8_t BigFont[];                              // обязательно подключаем шрифт
   UTFT myGLCD(TFT28UNO,  A2,A1,A3,A4,A0);             // тип дисплея 2,8  UNO  (320x240 chip ILI9341)
// UTFT myGLCD(TFT395UNO, A2,A1,A3,A4,A0);             // тип дисплея 3,95 UNO  (480x320 chip ILI9327)
// UTFT myGLCD(TFT32MEGA, 38,39,40,41);                // тип дисплея 3,2  MEGA (480x320 chip ILI9481)
void setup()
{ 
  myGLCD.InitLCD();                                    // инициируем дисплей
  myGLCD.clrScr();                                     // стираем всю информацию с дисплея
  myGLCD.setFont(SmallFont);                           // устанавливаем маленький шрифт
  myGLCD.setColor(VGA_RED);                            // устанавливаем красный цвет текста
  myGLCD.print("iarduino.ru",0,0)                      // выводим текст "iarduino.ru"
  myGLCD.printNumI(123456,0,100);                      // выводим целое число
  myGLCD.printNumF(-234.3442, 0, 200);                 // выводим вещественное число
}
void loop(){
}
Графические функции:
drawPixel( x , y );
Выводит на дисплей точку.


drawPixel(50,50);

Параметры:
  • x: координата X
  • y: координата Y
drawLine( x1 , y1 , x2 , y2 );
Выводит на дисплей линию заданную координатами двух точек.


drawLine(10,10,50,50);

Параметры:
  • x1: координата X, первой точки
  • y1: координата Y, первой точки
  • x2: координата X, второй точки
  • y2: координата Y, второй точки
drawRect( x1 , y1 , x2 , y2 );
Выводит на дисплей прямоугольник, заданный координатами двух противоположных углов.


drawRect(10,10,50,50);

Параметры:
  • x1: координата X, первого угла
  • y1: координата Y, первого угла
  • x2: координата X, второго угла
  • y2: координата Y, второго угла
drawRoundRect( x1 , y1 , x2 , y2 );
Выводит на дисплей прямоугольник со скругленными углами, заданный координатами двух противоположных углов.


drawRoundRect(10,10,50,50);

Параметры:
  • x1: координата X, первого угла
  • y1: координата Y, первого угла
  • x2: координата X, второго угла
  • y2: координата Y, второго угла
fillRect( x1 , y1 , x2 , y2 );
Выводит на дисплей закрашенный прямоугольник, заданный координатами двух противоположных углов.


fillRect(10,10,50,50);

Параметры:
  • x1: координата X, первого угла
  • y1: координата Y, первого угла
  • x2: координата X, второго угла
  • y2: координата Y, второго угла
drawCircle( x , y , R );
Выводит на дисплей окружность, определяемую координатами центра и радиусом.


drawCircle(50,50,25);

Параметры:
  • x: координата X, центра окружности
  • y: координата Y, центра окружности
  • R: радиус окружности
fillCircle( x , y , R );
Выводит на дисплей закрашенный текущим цветом круг, определяемый координатами центра и радиусом.


fillCircle(50,50,25);

Параметры:
  • x: координата X, центра окружности
  • y: координата Y, центра окружности
  • R: радиус окружности
#include <UTFT.h>                                      // подключаем библиотеку UTFT
   UTFT myGLCD(TFT28UNO,  A2,A1,A3,A4,A0);             // тип дисплея 2,8  UNO  (320x240 chip ILI9341)
// UTFT myGLCD(TFT395UNO, A2,A1,A3,A4,A0);             // тип дисплея 3,95 UNO  (480x320 chip ILI9327)
// UTFT myGLCD(TFT32MEGA, 38,39,40,41);                // тип дисплея 3,2  MEGA (480x320 chip ILI9481)
void setup()
{
  myGLCD.InitLCD      ();                              // инициируем дисплей<span class="redactor-invisible-space"></span>
  myGLCD.clrScr       ();                              // стираем всю информацию с дисплея
  myGLCD.setColor     (VGA_RED);                       // Устанавливаем красный цвет
  myGLCD.drawPixel    (5  , 5            );            // рисуем точку с координатами 5x5
  myGLCD.drawLine     (10 , 10 , 150, 10 );            // рисуем линию (через точки с координатами 10x10 - 150x10)
  myGLCD.drawRect     (10 , 20 , 150, 80 );            // рисуем прямоугольник (с противоположными углами в координатах 10x20 - 150x80)
  myGLCD.drawRoundRect(10 , 90 , 150, 160);            // рисуем прямоугольник со скруглёнными углами (с противоположными углами в координатах 10x90 - 150x160)
  myGLCD.fillRect     (10 , 170, 150, 230);            // рисуем закрашенный прямоугольник (с противоположными углами в координатах 10x170 - 150x230)
  myGLCD.drawCircle   (260, 60 , 40      );            // рисуем окружность (с центром в точке 260x60 и радиусом 40)
  myGLCD.fillCircle   (260, 160, 40      );            // рисуем закрашенную окружность (с центром в точке 260x160 и радиусом 40)
}
void loop(){
}
Выводим на дисплей картинки с SD карты:

Для вывод картинок понадобится установить и подключить библиотеки UTFT_tinyFAT и tinyFAT.

Картинки необходимо конвертировать с помощью специальной программы ImageConverter565, которая находится в папке Tools библиотеки UTFT.

Картинки используемые в нашем примере вы можете найти в папке image библиотеки UTFT.

loadBitmap( x1 , y1 , x2 , y2 , "fileName.raw" );
Вывод на дисплей картинки из файла на SD карте.
Параметры:
  • x1: координата X, левого верхнего угла
  • y1: координата Y, левого верхнего угла
  • x2: координата X, правого нижнего угла
  • y2: координата Y, правого нижнего угла
  • NameFile: Название файла изображения на SD карте
  • Изображение выводиться в прямоугольную область, заданную двумя точками
#include <tinyFAT.h>                                   // подключаем библиотеку tinyFAT
#include <UTFT.h>                                      // подключаем библиотеку UTFT
#include <UTFT_tinyFAT.h>                              // подключаем библиотеку UTFT_tinyFAT
   UTFT myGLCD(TFT28UNO,  A2,A1,A3,A4,A0);             // тип дисплея 2,8  UNO  (320x240 chip ILI9341)
// UTFT myGLCD(TFT395UNO, A2,A1,A3,A4,A0);             // тип дисплея 3,95 UNO  (480x320 chip ILI9327)
// UTFT myGLCD(TFT32MEGA, 38,39,40,41);                // тип дисплея 3,2  MEGA (480x320 chip ILI9481)
   UTFT_tinyFAT myFiles(&myGLCD);                      // объявляем переменную myFiles (объект класса библиотеки UTFT_tinyFAT) с передачей ссылки на созданный объект myGLCD<span class="redactor-invisible-space"></span>
void setup()
{
  myGLCD.InitLCD();                                    // инициируем дисплей
  myGLCD.clrScr();                                     // стираем всю информацию с дисплея
  file.initFAT();                                      // инициируем работу с SD картой
}
void loop()
{
// ВНИМАНИЕ!!! Файлы картинок ia_1.raw и ia_2.raw, лежат в папке с библиотекой,
// их необходимо записать в корень SD карты и установить её слот на плате дисплея
myFiles.loadBitmap(0, 0, 320, 240, "ia_1.raw");        // выводим на дисплей картинку из файла ia_1.raw
delay(2000);
myFiles.loadBitmap(0, 0, 320, 240, "ia_2.raw");        // выводим на дисплей картинку из файла ia_2.raw
delay(2000);
}

Ссылки:

Обсуждение

Присоединяйся

На главную