Начало работы с Arduino TFT Screen

Первые шаги по настройке Arduino TFT Screen

Примечание

Это устаревший продукт.

Arduino TFT Screen — это TFT LCD-экран с подсветкой и слотом для micro SD-карты на задней стороне. Вы можете рисовать текст, изображения и фигуры на экране с помощью библиотеки TFT.

Разъёмы экрана предназначены для удобной установки в разъём Arduino Esplora и Arduino Robot, но он может использоваться с любой платой Arduino.

Библиотека TFT включена в Arduino IDE 1.0.5 или более поздних версий.

Библиотека

Библиотека Arduino TFT расширяет библиотеки Adafruit GFX и Adafruit ST7735, на которых она основана. Библиотека GFX отвечает за процедуры рисования, а библиотека ST7735 специфична для экрана Arduino. Дополнения, специфичные для Arduino, были разработаны для максимально похожей работы с Processing API.

Библиотека обратно совместима, что означает, что вы всё ещё можете использовать функции Adafruit, описанные здесь.

Библиотека TFT зависит от библиотеки SPI, которая должна быть включена в любой скетч, использующий экран. Если вы хотите использовать SD-карту, вам также нужно включить библиотеку SD.

Компоновка экрана

По умолчанию экран ориентирован так, что он шире, чем высок. Верхняя часть экрана находится на той же стороне, что и текст «SD CARD». В этой ориентации экран имеет ширину 160 пикселей и высоту 128 пикселей.

При работе с координатами на экране представьте сетку. Каждый квадрат в сетке — это пиксель. Вы можете определить расположение пикселей с помощью конкретных координат. Точка в верхнем левом углу будет иметь координаты 0,0. Если эта точка переместится в верхний правый угол экрана, её координаты будут 0, 159; в нижнем левом углу координаты будут 127,0, а в нижнем правом — 127,159.

Можно использовать экран в вертикальной (также называемой «портретной») ориентации, вызвав setRotation(0). При вызове этой функции оси x и y изменятся соответственно, и вызовы screen.width() или screen.height() также изменятся.

Цвета

Экран способен отображать 16-битный цвет. Красный и синий каналы имеют 5-битное разрешение (32 уровня красного и синего), зелёный канал имеет 6-битное разрешение (64 различных уровня). Для согласованности с другими приложениями библиотека работает с 8-битными значениями для красного, зелёного и синего каналов (0-255) и соответствующим образом масштабирует цвета.

Аппаратный и программный интерфейс SPI

Экран можно настроить для использования двумя способами. Один — использовать аппаратный интерфейс SPI Arduino. Другой — объявить все контакты вручную. Функциональность экрана не отличается между двумя методами, но использование аппаратного SPI значительно быстрее при рисовании.

Если вы планируете использовать SD-карту на модуле TFT, вы должны использовать аппаратный SPI.

Все примеры написаны для использования с аппаратным SPI.

Подключение экрана

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

На передней панели Esplora есть разъём для экрана. Вставьте экран в разъём синей вкладкой с надписью «SD Card» ближе к USB-порту.

Подключение к другим платам Arduino

Для подключения экрана к другим платам Arduino прочитайте руководство по этой ссылке.

Написание первой программы

Для начала работы с экраном напишите программу, которая нарисует линию, а затем 2 прямоугольника горизонтально по экрану в разных цветах.

Первый набор инструкций — для Uno, Leonardo и аналогичных плат. Для использования с Esplora см. ниже.

Сначала объявите контакты, импортируйте необходимые библиотеки и создайте именованный экземпляр библиотеки TFT:

#include <TFT.h> // Аппаратно-специфичная библиотека
#include <SPI.h>

#define CS   10
#define DC   9
#define RESET  8

// определение контактов для Leonardo
// #define CS   7
// #define DC   0
// #define RESET  1

TFT myScreen = TFT(CS, DC, RESET);

В setup() нужно запустить библиотеку с помощью begin() и очистить экран, заполнив его чёрным цветом с помощью background().

void setup(){
  myScreen.begin();
  myScreen.background(0,0,0);  // очистка экрана чёрным цветом
  delay(1000);  // пауза для драматического эффекта
}

В loop() для рисования линии по экрану вызовите line(). line() принимает четыре аргумента: начальные координаты x и y и конечные координаты x и y. Для рисования прямоугольника используйте rect(). rect() также принимает четыре аргумента: координаты x и y верхнего левого угла, затем ширину в пикселях и высоту в пикселях. Между каждым из этих вызовов изменяйте цвет с помощью stroke() или fill().

stroke() изменяет цвет линии или контура фигуры. fill() изменяет внутренний цвет фигуры. Вызов noStroke() заставит библиотеку прекратить рисование контура вокруг последующих фигур. Если вызвать stroke() после noStroke(), экран снова будет рисовать линии.

void loop(){
  myScreen.stroke(255, 0, 0); // установить цвет обводки красным
  myScreen.line(0, 10, myScreen.width(), 10); // нарисовать линию по экрану
  delay(1000);

  myScreen.noStroke(); // не рисовать контур вокруг следующего прямоугольника
  myScreen.fill(0,255,0); // установить цвет заливки зелёным
  myScreen.rect(0,20,myScreen.width(),10); // нарисовать прямоугольник по экрану
  delay(1000);

  myScreen.fill(0,0,255); // установить цвет заливки синим
  myScreen.stroke(255,255,255); // обвести прямоугольник белой линией
  myScreen.rect(0,45,myScreen.width(),45); // нарисовать толстый прямоугольник
  delay(1000);

  myScreen.background(0,0,0); // очистить экран перед повторением
  delay(1000);
}

Если вы используете Esplora, структура программы точно такая же. Поскольку Esplora имеет разъём, предназначенный для экрана, и контакты для использования экрана фиксированы, при написании скетчей для этой платы создаётся объект, специфичный только для Esplora. Вы можете обращаться к экрану, подключённому к Esplora, через EsploraTFT.

Вам не нужно объявлять контакты в скетче; объект создаётся автоматически:

#include <TFT.h> // Аппаратно-специфичная библиотека
#include <SPI.h>
#include <Esplora.h>

void setup(){
  EsploraTFT.begin();
  EsploraTFT.background(0,0,0);  // очистка экрана чёрным цветом
  delay(1000);  // пауза для драматического эффекта
}

void loop(){
  EsploraTFT.stroke(255, 0, 0); // установить цвет обводки красным
  EsploraTFT.line(0, 10, EsploraLCD.width(), 10); // нарисовать линию по экрану
  delay(1000);

  EsploraTFT.noStroke(); // не рисовать контур вокруг следующего прямоугольника
  EsploraTFT.fill(0,255,0); // установить цвет заливки зелёным
  EsploraTFT.rect(0,20,EsploraTFT.width(),20); // нарисовать прямоугольник по экрану
  delay(1000);

  EsploraTFT.fill(0,0,255); // установить цвет заливки синим
  EsploraTFT.stroke(255,255,255); // обвести прямоугольник белой линией
  EsploraTFT.rect(0,45,EsploraTFT.width(),50); // нарисовать толстый прямоугольник
  delay(1000);

  EsploraTFT.background(0,0,0); // очистить экран перед повторением
  delay(1000);
}

Движение по экрану

Чтобы создать иллюзию движения, нужно быстро стирать и рисовать изображения на экране. При использовании Processing на мощном компьютере можно вызывать background() каждый раз в функции draw() для стирания содержимого окна и рисования объектов в новых позициях. Arduino не так быстр, и очистка экрана при вызове background() с библиотекой TFT занимает некоторое время.

Для создания иллюзии движения обычно лучше всего проверять, переместился ли объект, каждый раз при прохождении loop(). Если да — закрасить объект цветом фона, а затем перерисовать его в новом месте. Поскольку вы обновляете не все пиксели на экране, это помогает поддерживать иллюзию движения.

Этот пример рисует одну точку и заставляет её отскакивать по экрану. Вы настроите программу так же, как и ранее, добавив переменные для отслеживания текущего и предыдущего положения точки, а также скорости и направления точки.

#include <TFT.h> // Аппаратно-специфичная библиотека
#include <SPI.h>

#define CS   10
#define DC   9
#define RESET  8

// определение контактов для Leonardo
// #define CS   7
// #define DC   0
// #define RESET  1

TFT myScreen = TFT(CS, DC, RESET);

// начальная позиция точки — центр экрана
int xPos = 80;
int yPos = 64;

// направление и скорость
int xDir = 1;
int yDir = 1;

// переменные для отслеживания положения точки
int xPrev = xPos;
int yPrev = yPos;

void setup(){
  myScreen.begin();
  myScreen.background(0,0,0); // очистка экрана
}

В loop() сначала обновите позицию точки, добавив направление к переменным позиции x и y. После этого проверьте, отличается ли текущее положение от предыдущего. Если есть разница, закрасьте предыдущее положение цветом фона, затем нарисуйте новую точку в обновлённом месте. Если точка достигнет границ экрана, измените её направление на противоположное.

void loop(){
  // обновление положения точки
  xPos = xPos + xDir;
  yPos = yPos + yDir;

  // проверка отличия текущего положения от предыдущего
  if(xPos != xPrev || yPos != yPrev){
    myScreen.stroke(0,0,0); // установить цвет обводки чёрным
    myScreen.point(xPrev, yPrev); // закрасить предыдущую точку
  }

  // нарисовать точку в текущем положении
  myScreen.stroke(255,255,255);
  myScreen.point(xPos, yPos);

  // если позиция x или y на краю экрана, изменить направление
  if(xPos >= 160 || xPos <= 0){
    xDir = xDir*-1;
  }

  if(yPos >= 128 || yPos <= 0){
    yDir = yDir*-1;
  }

  // обновить предыдущее положение точки
  xPrev=xPos;
  yPrev=yPos;

  // задержка 33 мс означает обновление экрана 30 раз в секунду
  delay(33);
}

Версия для Esplora:

#include <TFT.h> // Аппаратно-специфичная библиотека
#include <SPI.h>
#include <Esplora.h>

// начальная позиция точки — центр экрана
int xPos = 80;
int yPos = 64;

// направление и скорость
int xDir = 1;
int yDir = 1;

// переменные для отслеживания положения точки
int xPrev, yPrev;

void setup(){
  EsploraTFT.begin();
  EsploraTFT.background(0,0,0);
}

void loop(){
  // обновление положения точки
  xPos = xPos + xDir;
  yPos = yPos + yDir;

  // проверка отличия текущего положения от предыдущего
  if(xPos != xPrev || yPos != yPrev){
    EsploraTFT.stroke(0,0,0); // установить цвет обводки чёрным
    EsploraTFT.point(xPrev, yPrev); // закрасить предыдущую точку
  }

  // нарисовать точку в текущем положении
  EsploraTFT.stroke(255,255,255);
  EsploraTFT.point(xPos, yPos);

  // если позиция x или y на краю экрана, изменить направление
  if(xPos >= 160 || xPos <= 0){
    xDir = xDir*-1;
  }

  if(yPos >= 128 || yPos <= 0){
    yDir = yDir*-1;
  }

  // обновить предыдущее положение точки
  xPrev=xPos;
  yPrev=yPos;

  // небольшая пауза
  delay(33);
}

Рисование текста

Библиотека TFT включает базовый шрифт для рисования текста на экране. По умолчанию символы имеют ширину 5 пикселей и высоту 8 пикселей. Размер шрифта можно изменить на 10x16, 15x24 или 20x32. Для получения дополнительной информации о базовых возможностях шрифтов см. страницу Adafruit о графических примитивах.

В этом примере вы создадите базовый счётчик, который будет обновлять число на экране каждые полсекунды. Как и в предыдущих примерах, подключите необходимые библиотеки и объявите переменные перед setup().

В setup() отправьте статический текст, который не будет изменяться, на экран. С помощью setTextSize() вы можете увеличить размер шрифта, чтобы выделить важные части. Динамический текст для экрана должен храниться в массиве char. Класс String упрощает обновление текста в массиве со временем.

#include <TFT.h> // Аппаратно-специфичная библиотека
#include <SPI.h>

#define CS   10
#define DC   9
#define RESET  8

// определение контактов для Leonardo
// #define CS   7
// #define DC   0
// #define RESET  1

TFT myScreen = TFT(CS, DC, RESET);

// переменная для отслеживания прошедшего времени
int counter = 0;
// массив char для вывода времени
char printout[4];

void setup(){
  myScreen.begin();
  myScreen.background(0,0,0); // очистка экрана

  myScreen.stroke(255,0,255);

  // статический текст
  myScreen.text("Running for",0,0);
  myScreen.text("seconds",0,30);

  // увеличение размера шрифта для текста в loop()
  myScreen.setTextSize(3);
}

В loop() получите текущее время и сохраните число в массиве char. Перед каждым завершением цикла сотрите ранее написанный текст, чтобы он не перезаписывал сам себя.

void loop(){
    // получить прошедшее время
    counter = millis();

    // преобразовать в строку
    String elapsedTime = String(counter/1000);

    // добавить в массив
    elapsedTime.toCharArray(printout,4);

    // вывести и стереть
    myScreen.stroke(255,255,255);
    myScreen.text(printout,0,10);
    delay(1000);
    myScreen.stroke(0,0,0);
    myScreen.text(printout,0,10);
}

Код для Esplora:

#include <TFT.h> // Аппаратно-специфичная библиотека
#include <SPI.h>
#include <Esplora.h>

// переменная для отслеживания прошедшего времени
long counter = 0;
// массив char для вывода времени
char printout[4];

void setup(){
  EsploraTFT.begin();
  EsploraTFT.background(0,0,0); // очистка экрана

  EsploraTFT.stroke(255,0,255);

  // статический текст
  EsploraTFT.text("Running for",0,0);
  EsploraTFT.text("seconds",0,30);

  // увеличение размера шрифта для текста в loop()
  EsploraTFT.setTextSize(3);
}

void loop(){
    // получить прошедшее время
    counter = millis();

    // преобразовать в строку
    String elapsedTime = String(counter/1000);

    // добавить в массив
    elapsedTime.toCharArray(printout,4);

    // вывести и стереть
    EsploraTFT.stroke(255,255,255);
    EsploraTFT.text(printout,0,10);
    delay(1000);
    EsploraTFT.stroke(0,0,0);
    EsploraTFT.text(printout,0,10);
}

Рисование изображения с SD-карты

Библиотека TFT способна считывать .bmp файлы с SD-карты и отображать их на экране. Изображения могут быть меньше или больше разрешения экрана (160x128), но в Arduino нет метода для манипулирования изображениями. Изображения должны быть изменены до нужного размера перед помещением на SD-карту.

В следующем примере битовая карта размером 160x128 пикселей с именем «arduino.bmp» находится в корневом каталоге SD-карты. При чтении библиотекой и отрисовке изображение заполнит весь экран.

Помимо библиотек, которые вы подключали до этого момента, вам также нужно подключить библиотеку SD. Вам также нужно объявить контакт CS для слота SD-карты.

Класс PImage используется для загрузки изображения и может также проверить, является ли изображение валидным файлом, который библиотека может прочитать.

После чтения изображение будет отрисовано с координат, которые вы укажете. В данном случае рисование начинается с верхнего левого угла экрана.

// подключение необходимых библиотек
#include <SPI.h>
#include <SD.h>
#include <TFT.h> // Аппаратно-специфичная библиотека

// определение контактов для Uno
#define SD_CS  11
#define LCD_CS 10
#define DC    9
#define RESET    8

// определение контактов для Leonardo
// #define SD_CS  8
// #define LCD_CS 7
// #define DC   0
// #define RESET  1

TFT myScreen = TFT(LCD_CS, DC, RESET);

// эта переменная представляет изображение для отрисовки на экране
PImage image;

void setup() {
  // инициализация последовательного порта
  Serial.begin(9600);

  while (!Serial) {
    // ожидание готовности последовательной линии
    // необходимо для Leonardo
  }

  // попытка доступа к SD-карте
  Serial.print("Initializing SD card...");

  if (!SD.begin(SD_CS)) {
    Serial.println("failed!");
    return;
  }

  Serial.println("OK!");

  // инициализация и очистка GLCD-экрана
  myScreen.begin();
  myScreen.background(255, 255, 255);

  // загрузка изображения с SD-карты
  image = myScreen.loadImage("arduino.bmp");

  // проверка корректности загрузки изображения
  if (image.isValid() != true) {
    Serial.println("error while loading arduino.bmp");
  }

  // отрисовка изображения на экране
  myScreen.image(image, 0, 0);
}

void loop(){
// здесь ничего не происходит
}

Для Esplora:

// подключение необходимых библиотек
#include <SPI.h>
#include <SD.h>
#include <TFT.h> // Аппаратно-специфичная библиотека
#include <Esplora.h>

// контакт CS SD-карты
#define SD_CS    8

// эта переменная представляет изображение для отрисовки на экране
PImage image;

void setup() {
  // инициализация последовательного порта
  Serial.begin(9600);

  while (!Serial) {
    // ожидание готовности последовательной линии
  }

  // попытка доступа к SD-карте
  Serial.print("Initializing SD card...");

  if (!SD.begin(SD_CS)) {
    Serial.println("failed!");
    return;
  }

  Serial.println("OK!");

  // инициализация и очистка GLCD-экрана
  EsploraTFT.begin();
  EsploraTFT.background(255, 255, 255);

  // загрузка изображения с SD-карты
  image = EsploraTFT.loadImage("arduino.bmp");

  // проверка корректности загрузки изображения
  if (image.isValid() != true) {
    Serial.println("error while loading arduino.bmp");
  }

  // отрисовка изображения на экране
  EsploraTFT.image(image, 0, 0);
}

void loop(){
// здесь ничего не происходит
}

Подключение к другим платам Arduino

Несмотря на то, что разъёмы экрана предназначены для установки в разъём Arduino Esplora или Arduino Robot, этот модуль совместим с любой Arduino на базе AVR (UNO, Leonardo и др.) или с Arduino Due. Если вы хотите использовать одну из этих плат, потребуются небольшие изменения в подключениях.

Контакты экрана.

Вы можете подключить экран через аппаратные контакты SPI или определить свой собственный набор контактов. Использование аппаратного SPI быстрее при рисовании на экране.

Arduino Uno

Подключите питание и землю к макетной плате.

Подключение макетной платы к плате.

Подключите экран к макетной плате. Разъёмы на стороне экрана с маленькой синей вкладкой и стрелкой должны быть теми, которые подключаются к плате. Обратите внимание на ориентацию экрана — на этих изображениях он перевёрнут.

Подключение экрана к макетной плате и плате.

Подключите контакты в соответствии с конфигурацией по умолчанию:

+5V:	+5V
MISO:	контакт 12
SCK:	контакт 13
MOSI:	контакт 11
LCD CS:	контакт 10
SD CS:	контакт 4
D/C:	контакт 9
RESET:	контакт 8
BL:	+5V
GND:	GND

Схема UNO и TFT-экрана.

Подключив контакты правильно, вы можете увидеть работу LCD-экрана с Uno (или Duemilanove), просто загрузив скетч «TFTBitmapLogo».

Фото схемы UNO и TFT-экрана.

Arduino Leonardo и Arduino Yun

Arduino Leonardo и Arduino Yun используют другие контакты для совместимости с LCD-экраном. Для установки контактов MISO, MOSI и SCK нужно использовать разъёмы ICSP.

+5V:	+5V
MISO:	Miso контакт (белый провод на ICSP)
SCK:	Sck контакт (коричневый провод на ICSP)
MOSI:	Mosi контакт (жёлтый провод на ICSP)
LCD CS:	контакт 7
SD CS:	контакт 8
D/C:	контакт 0
RESET:	контакт 1
BL:	+5V
GND:	GND

На изображении ниже показан Arduino Leonardo, но это также работает для Arduino Yun.

Схема Leonardo и TFT-экрана.

На экране появится сообщение: «Arduino TFT Bitmap Example. Open serial monitor to run the sketch». Откройте Serial Monitor, чтобы увидеть логотип Arduino.

Arduino Mega 2560 или Mega ADK

Для подключения LCD-экрана к плате Mega используйте следующую конфигурацию контактов:

+5V:	+5V
MISO:	50 на Mega 2560 (Miso на ADK)
SCK:	52 на Mega 2560 (Sck на ADK)
MOSI:	51 на Mega 2560 (Mosi на ADK)
LCD CS:	контакт 10
SD CS:	контакт 4
D/C:	контакт 9
RESET:	контакт 8
BL:	+5V
GND:	GND

Схема Mega и TFT-экрана.

Arduino Due

Для подключения LCD-экрана к Arduino Due используйте следующую конфигурацию контактов и не забудьте установить правильное значение переменной «sd_cs» (#define sd_cs 7) в скетче:

+5V:	+3.3V
MISO:	Miso контакт (белый провод на SPI)
SCK:	Sck контакт (коричневый провод на SPI)
MOSI:	Mosi контакт (жёлтый провод на SPI)
LCD CS:	контакт 10
SD CS:	контакт 7
D/C:	контакт 9
RESET:	контакт 8
BL:	+3.3V
GND:	GND

Схема Due и TFT-экрана.

Следующие шаги

Теперь, когда вы протестировали базовую функциональность экрана, посетите страницы библиотеки TFT для получения информации об API библиотеки и дополнительных примерах. Также рекомендуется посетить страницу графической библиотеки Adafruit для получения дополнительной информации о функциях, которые не были рассмотрены.