TFT_eSPI. Мощная и быстрая библиотека для работы с TFT дисплеями  

Библиотека TFT_eSPI предназначена для работы с TFT-дисплеями через SPI интерфейс. Одной из главных особенностей является ее быстродействие. Это особенно важно для устройств, которые должны быстро реагировать на пользовательский ввод. Библиотека поддерживает множество различных TFT-дисплеев, включая такие модели, как ST7735, ILI9341, ILI9163 и др. Это означает, что она может быть использована для работы с большим количеством различных устройств, что делает ее более универсальной и удобной для использования.

Введение

В статьях Подключение TFT дисплея к ESP8266 и Подключение OLED дисплея к Arduino и ESP8266 я рассказывал о способах выводах графики на OLED и TFT дисплеи с помощью библиотеки Adafruit GFX. Это весьма простой и удобный вариант для небольших проектов где требуется выводить какую либо информацию на экран, не особо заморачиваясь с оптимизацией памяти и быстродействием. Но в сложных проектах, когда приходится экономить каждый байт памяти и считать каждый такт процессора все же требуется более быстрое и легкое решение. Либо же наоборот, захочется удивить конечного пользователя устройства красивыми визуальными эффектами и плавностью анимации интерфейса, но стандартными средствами Adafruit GFX этого достичь не получается. И, наконец, поросту использовать какой-либо нестандартный дисплей, который библиотека от Adafruit не поддерживает. К счастью существует такая замечательная библиотека для работы с графическими дисплеями, как TFT_ESPi. Давайте рассмотрим ее более подробно.

Сравнение библиотек Adafruit GFX и TFT_eSPI

Adafruit GFX и TFT_eSPI - это две широко используемые библиотеки для работы с TFT-дисплеями на платформе Arduino. Рассмотрим сравнение этих двух библиотек.

1. Производительность

TFT_eSPI обеспечивает более высокую производительность, поскольку использует быстрые алгоритмы рендеринга и написана на языке C++. Adafruit GFX, с другой стороны, написана на языке С и не так быстро работает, особенно при работе с большими объемами графических данных.

2. Поддержка дисплеев

Обе библиотеки поддерживают широкий спектр дисплеев, но TFT_eSPI обладает большей гибкостью в настройке параметров дисплея и предоставляет больше возможностей для настройки разрешения и размера.

3. Удобство использования

Обе библиотеки достаточно просты в использовании, но Adafruit GFX может быть удобнее для начинающих разработчиков, поскольку имеет более простой интерфейс.

4. Объем кода

Обе библиотеки занимают определенный объем памяти, но Adafruit GFX может занимать меньше места в памяти, особенно при использовании только основных функций библиотеки.

5. Поддержка

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

В целом, обе библиотеки имеют свои преимущества и недостатки, и выбор между ними зависит от конкретных требований проекта и опыта разработчика. TFT_eSPI обеспечивает лучшую производительность и большую гибкость в настройке параметров дисплея, тогда как Adafruit GFX более проста в использовании и может занимать меньше места в памяти.

Настройка библиотеки

Настройка библиотеки TFT_eSPI на платформе ESP8266 включает несколько шагов:

1. Установка библиотеки

Сначала необходимо установить библиотеку TFT_eSPI. Это можно сделать через менеджер библиотек Arduino IDE или загрузив библиотеку из репозитория на Github.

2. Подключение дисплея

Далее нужно подключить дисплей к ESP8266. Как правило, дисплей подключается к пинам SPI, а также к пину Chip Select (CS) и пину Data/Command (DC).

3. Настройка библиотеки

Для настройки библиотеки TFT_eSPI на платформе ESP8266 необходимо в файле User_Setup.h определить параметры дисплея, такие как тип дисплея, разрешение, ширина шины данных, частота SPI и т.д. Этот файл должен быть расположен в каталоге TFT_eSPI в директории libraries.
 

Пример файла User_Setup.h для дисплея ST7735:

#define USER_SETUP_INFO "User_Setup"
#define ST7735_DRIVER // Define additional parameters below for this display
#define TFT_WIDTH 128
#define TFT_HEIGHT 160
#define ST7735_BLACKTAB
#define TFT_CS PIN_D8 // Chip select control pin D8
#define TFT_DC PIN_D1 // Data Command control pin
#define TFT_RST PIN_D6 // Reset pin (could connect to NodeMCU RST, see next line)
#define LOAD_GLCD // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2 // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4 // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6 // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7 // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8 // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
//#define LOAD_FONT8N // Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
#define LOAD_GFXFF // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts

// Comment out the #define below to stop the SPIFFS filing system and smooth font code being loaded
// this will save ~20kbytes of FLASH
#define SMOOTH_FONT
#define SPI_FREQUENCY 27000000
#define SPI_READ_FREQUENCY 20000000
#define SPI_TOUCH_FREQUENCY 2500000

Данный файл настроек неплохо документирован и, в целом, весь процесс настройки сводится к удалению символов комментария (//) на интересующих нас параметрах.

Коротко пройдемся по основным:

#define ST7735_DRIVER - выбор типа драйвера дисплея. Выбираем из списка какой дисплей у нас используется в проекте и удаляем символ комментария перед ним. Внимательно следим за тем, чтобы драйвер был выбран только один! Остальные следует закомментировать.

#define TFT_WIDTH 128 #define TFT_HEIGHT 160 - прописываем разрешение экрана в ПОРТРЕТНОЙ ориентации. Первый параметр ширина, второй высота

#define ST7735_BLACKTAB - данный параметр относится только к дисплею ST7735. Если на изображении есть артефакты, точки или полосы по краям попробуйте поэкспериментировать с данным параметром. Список всех возможных значений есть в User_Setup.h

#define TFT_CS PIN_D8  #define TFT_DC PIN_D1  #define TFT_RST PIN_D6 - указываем к каким выводам ESP8266 подключены пины дисплея CS, DC и RST

#define LOAD_GLCD  #define LOAD_FONT2  #define LOAD_FONT4 ... - подключаем дополнительные шрифты. Если они вам не нужны, то просто ставим знак комментария на ненужных. Позволяет значительно экономить память. По умолчанию используется шрифт LOAD_GLCD, так что для вывода текста  можно оставить только его.

#define SPI_FREQUENCY 27000000 - настройка частоты шины SPI. Чем она выше тем дисплей быстрее рисует графику, но и повышается вероятность артефактов и ошибок изображения. Также можно дополнительно установить частоту шины для тачскрина и чтения данных от TFT дисплея. Если в этом нет необходимости, то просто закомментируйте.

Схема подключения дисплея

Контакты SPI дисплея подключается к SPI пинам вашего микроконтроллера вашего микроконтроллера. CS, DC и RST дисплея к пинам указанным в User_Setup.h. LED и VCC к пину 3.3 или 5V. GND к GND. Более наглядно это представлено на схеме ниже.

Использование библиотеки

После настройки библиотеки TFT_eSPI можно использовать ее функции, например, для вывода текста на дисплей.

Пример кода для вывода текста на дисплей

#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI(); // создаем экземпляр объекта TFT_eSPI

void setup() {
 tft.init(); // инициализируем дисплей
 tft.setRotation(1); // поворачиваем дисплей на 90 градусов
 tft.fillScreen(TFT_BLACK); // очищаем экран черным цветом
}

void loop() {
 tft.setCursor(0, 0); // устанавливаем позицию курсора
 tft.setTextColor(TFT_WHITE, TFT_BLACK); // устанавливаем цвет текста и фона
 tft.setTextSize(2); // устанавливаем размер шрифта
 tft.println("Hello, World!"); // выводим текст на дисплей
 delay(2000)
}

В данном примере мы создали экземпляр объекта TFT_eSPI и проинициализировали его в функции setup(). Затем в бесконечном цикле выводим на дисплей текст "Hello, World!" белым цветом на черном фоне с размером шрифта 2

Пример отображения графика функции

#include <TFT_eSPI.h>
#include <math.h>
TFT_eSPI tft = TFT_eSPI();

void setup() {
 tft.init();
 tft.setRotation(0);
 tft.fillScreen(TFT_BLACK);
 tft.drawLine(0, 64, 128, 64, TFT_WHITE);
 tft.drawLine(64, 0, 64, 128, TFT_WHITE);
 for (int i = 0; i < 127; i++) {
 tft.drawPixel(i, 64 - sin(i / 16.0) * 32, TFT_GREEN);
 }
}

void loop() {}

Использование градиентного цвета

#include <TFT_eSPI.h>
TFT_eSPI tft = TFT_eSPI();

void setup() {
 tft.init();
 tft.setRotation(0);
 tft.fillScreen(TFT_BLACK);
 tft.fillRectGradient(0, 0, 128, 128, TFT_RED, TFT_YELLOW);
}

void loop() {}

Изменение цвета фона и шрифта

#include <TFT_eSPI.h>
TFT_eSPI tft = TFT_eSPI();

void setup() {
 tft.init();
 tft.setRotation(0);
 tft.fillScreen(TFT_BLACK);
 tft.setCursor(0, 0);
 tft.setTextSize(2);
 tft.setTextColor(TFT_WHITE, TFT_BLACK);
 tft.println("Hello World!");
 tft.setTextColor(TFT_YELLOW);
 tft.println("This is a test.");
 tft.setTextColor(TFT_RED, TFT_GREEN);
 tft.println("Colors can be changed too!");
 tft.setTextColor(TFT_WHITE, TFT_BLUE);
 tft.println("Have fun with tft-espi!");
}

void loop() {}

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

Также можно использовать функцию tft.pushImage(x, y, width, height, image), чтобы вывести изображение на дисплей.

#include <TFT_eSPI.h>
#include "image.h" // подключаем файл с изображением

TFT_eSPI tft = TFT_eSPI(); // создаем экземпляр объекта TFT_eSPI

void setup() {
 tft.init(); // инициализируем дисплей
 tft.setRotation(1); // поворачиваем дисплей на 90 градусов
 tft.fillScreen(TFT_BLACK); // очищаем экран черным цветом
}

void loop() {
 tft.pushImage(0, 0, 128, 128, image); // выводим изображение на дисплей
 delay(5000); // задержка 5 секунд
}

В данном примере мы использовали функцию tft.pushImage(), чтобы вывести изображение на дисплей. В качестве аргументов функции передали координаты x и y, ширину и высоту изображения, а также массив с данными изображения.

Конвертировать изображение в массив данных можно с помощью специальной утилиты на сайте.

Основные функции

Установка ориентации дисплея

tft.setRotation(1); // установка альбомной ориентации

Эта функция используется для установки ориентации дисплея. В качестве аргумента передается значение от 0 до 3, соответствующее ориентации: 0 - портретный режим, 1 - альбомный режим, 2 - портретный режим (обратная сторона), 3 - альбомный режим (обратная сторона).

Инвертирование цветов дисплея

tft.invertDisplay(true); // инвертирование цветов на дисплее

Эта функция используется для инвертирования цветов на дисплее. В качестве аргумента передается значение true или false, в зависимости от того, нужно ли инвертировать цвета.

Установка размера шрифта

tft.setTextSize(2); // установка размера шрифта 2

Эта функция используется для установки размера шрифта. В качестве аргумента передается значение от 1 до 8, соответствующее размеру шрифта.

Выбор шрифта

#include  // подключение шрифта FreeSansBold9pt7b
tft.setFont(&FreeSansBold9pt7b); // выбор шрифта для вывода текста

Эта функция используется для выбора шрифта, который будет использоваться для вывода текста на дисплей. В качестве аргументов передаются указатель на массив данных шрифта, код первого и последнего символа шрифта и смещение, если необходимо.

Установка позиции курсора

tft.setCursor(50, 50); // установка позиции курсора в точку (50, 50)

Эта функция используется для установки текущей позиции курсора для вывода текста. В качестве аргументов передаются координаты позиции курсора.

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

tft.print("Hello World!"); // вывод текста на дисплей

Эта функция используется для вывода текста на дисплей. В качестве аргумента передается указатель на строку с текстом.

Вывод строки на дисплей с указанными координатами

tft.drawString("Hello, World!", 50, 50); // вывод строки на дисплей

Эта функция используется для вывода текста на дисплей. В качестве аргументов передаются указатель на строку с текстом, координаты начала вывода и номер шрифта, который будет использоваться для вывода текста (по умолчанию - 1).

Функции работы с графикой

Следующий набор функций служит для вывода на дисплей различных геометрических фигур

Закрашивание экрана

tft.fillScreen(TFT_RED); // заполнение экрана красным цветом

Эта функция заполняет весь экран заданным цветом. В качестве аргумента передается 32-битное значение цвета.

Нарисовать пиксель

tft.drawPixel(50, 50, TFT_RED); // закраска пикселя в красный цвет

Эта функция используется для закраски пикселя на дисплее в указанный цвет. В качестве аргументов передаются координаты пикселя и цвет в формате RGB565.

Рисование линии

tft.drawLine(10, 10, 100, 100, TFT_BLUE); // рисование линии синего цвета

Эта функция используется для рисования линии на дисплее. В качестве аргументов передаются координаты начальной и конечной точки линии и цвет в формате RGB565.

Рисование прямоугольника

tft.drawRect(20, 20, 50, 50, TFT_GREEN); // рисование прямоугольника зеленого цвета

Эта функция используется для рисования прямоугольника на дисплее. В качестве аргументов передаются координаты левого верхнего угла, ширина, высота и цвет в формате RGB565.

Рисование закрашенного прямоугольника

tft.fillRect(30, 30, 70, 70, TFT_YELLOW); // заполнение прямоугольника желтым цветом

Эта функция используется для заполнения прямоугольника на дисплее указанным цветом. В качестве аргументов передаются координаты левого верхнего угла, ширина, высота и цвет в формате RGB565.

Рисование круга

tft.drawCircle(50, 50, 30, TFT_MAGENTA); // рисование круга пурпурного цвета

Эта функция используется для рисования круга на дисплее. В качестве аргументов передаются координаты центра круга, радиус и цвет в формате RGB565.

Рисование закрашенного круга

tft.fillCircle(100, 100, 50, TFT_CYAN); // заполнение круга голубым цветом

Эта функция используется для заполнения круга на дисплее указанным цветом. В качестве аргументов передаются координаты центра круга, радиус и цвет в формате RGB565.

Это только небольшая часть функций, доступных в библиотеке TFT_eSPI. Большинство из них предназначены для работы с текстом, настройки цвета и прозрачности, а также для управления настройками дисплея, такими как яркость, ориентация и т.д.

Русификация библиотеки TFT_eSPI

Несмотря на множество достоинств, есть у TFT_eSPI один существенный недостаток. Она совершенно не умеет выводить на экран русские шрифты. К счастью это очень легко исправить средствами самой библиотеки.

Подготовка

Для добавления собственных шрифтов в библиотеке в существует специальная утилита Create Font, расположенная по адресу TFT_eSPI\Tools\Create_Smooth_Font\Create_font. Она представляет собой скрипт на Processing - среде разработки приложений под Windows. Так что перед тем как заняться портирование собственных шрифтов переходим на официальный сайт processing.org, качаем свежую версию программы и устанавливаем её. После успешной установки, возвращаемся к папке с библиотекой TFT_eSPI и запускаем скрипт Create_font.pde, расположенный по пути TFT_eSPI\Tools\Create_Smooth_Font\Create_font. Откроется окно программы Processing c текстом скрипта. Самое время переходить к настройке.

Настройка скрипта.

Программа просканирует установленные в системе шрифты и сохранит их в файле TFT_eSPI\Tools\Create_Smooth_Font\Create_font\FontFiles\System_Font_List.txt
Откройте полученный файл, найдите интересующий вас шрифт и запомните его порядковый номер написанных в квадратных скобках.

Для примера возьмем системный шрифт Windows 10 Calibri. В списке он обозначен как [41] Calibri. Запоминаем цифру 41 и возвращаемся в Processing. 

Пролистываем код программы до следующего текста

// >>>>>>>>>> USER CONFIGURED PARAMETERS START HERE <<<<<<<<<<

// Use font number or name, -1 for fontNumber means use fontName below, a value >=0 means use system font number from list.
// When the sketch is run it will generate a file called "systemFontList.txt" in the sketch folder, press Ctrl+K to see it.
// Open the "systemFontList.txt" in a text editor to view the font files and reference numbers for your system.

int fontNumber = 41; // << Use [Number] in brackets from the fonts listed.

// OR use font name for ttf files placed in the "Data" folder or the font number seen in IDE Console for system fonts
// the font numbers are listed when the sketch is run.
// | 1 2 | Maximum filename size for SPIFFS is 31 including leading /
// 1234567890123456789012345 and added point size and .vlw extension, so max is 25
String fontName = "Calibri"; // Manually crop the filename length later after creation if needed
 // Note: SPIFFS does NOT accept underscore in a filename!
String fontType = ".ttf";
//String fontType = ".otf";


// Define the font size in points for the TFT_eSPI font file
int fontSize = 10;

int fontNumber = 41; - меняем на номер нужного нам шрифта

String fontName = "Calibri"; - в кавычках пишем под каким именем сохранить новый шрифт

String fontType = ".ttf"; - тип исходного шрифта .otf или .ttf

int  fontSize = 10; - размер шрифта

Пролистываем ниже и раскомментируем следующие 2 строки

0x0400, 0x04FF, //Cyrillic, 256, 256, Cyrillic (254 characters), Inherited (2 characters)
 0x0500, 0x052F, //Cyrillic Supplement, 48, 48, Cyrillic

На этом настройка завершена! Запускаем скрипт еще раз и в появившемся окне проверяем правильность отображения нашего нового шрифта

Если результат вас полностью устраивает, то можно либо закрыть Processing и перейти к следующему шагу, либо продолжить редактирование.

Добавление русского шрифта в ваш проект

Конвертированные вами шрифты хранятся в папке TFT_eSPI\Tools\Create_Smooth_Font\Create_font\FontFiles. Для того чтобы добавить их в ваш проект необходимо скопировать файлы шрифтов в файловую систему ESP8266. Как это сделать я подробно рассказывал здесь. После копирования всех необходимых файлов следует подключить шрифты и в самой программе. Как это сделать мы подробно разберем в небольшом примере.

Пример программы вывода русского текста на экран.

Откройте Arduino IDE и скопируйте в нее следующий текст программы

/*
 There are four different methods of plotting anti-aliased fonts to the screen.

 This sketch uses method 1, using tft.print() and tft.println() calls.

 In some cases the sketch shows what can go wrong too, so read the comments!
 
 The font is rendered WITHOUT a background, but a background colour needs to be
 set so the anti-aliasing of the character is performed correctly. This is because
 characters are drawn one by one.
 
 This method is good for static text that does not change often because changing
 values may flicker. The text appears at the tft cursor coordinates.

 It is also possible to "print" text directly into a created sprite, for example using
 spr.println("Hello"); and then push the sprite to the screen. That method is not
 demonstrated in this sketch.
 
*/
// The fonts used are in the sketch data folder, press Ctrl+K to view.

// Upload the fonts and icons to SPIFFS (must set at least 1M for SPIFFS) using the
// "Tools" "ESP8266 (or ESP32) Sketch Data Upload" menu option in the IDE.
// To add this option follow instructions here for the ESP8266:
// https://github.com/esp8266/arduino-esp8266fs-plugin
// or for the ESP32:
// https://github.com/me-no-dev/arduino-esp32fs-plugin

// Close the IDE and open again to see the new menu option.

// A processing sketch to create new fonts can be found in the Tools folder of TFT_eSPI
// https://github.com/Bodmer/TFT_eSPI/tree/master/Tools/Create_Smooth_Font/Create_font

// This sketch uses font files created from the Noto family of fonts:
// https://www.google.com/get/noto/

#define FONT_10 "Arial10"
#define FONT_11 "Arial11"
#define FONT_12 "Arial12"
#define FONT_14 "Arial14"
#define FONT_16 "Arial16"
#define FONT_18 "Arial18"
#define FONT_20 "Arial20"
#define FONT_22 "Arial22"
#define FONT_25 "Arial25"
#define FONT_30 "Arial30"

#include <FS.h>// Файлы шрифтов хранятся в SPIFFS, поэтому загрузите библиотеку
#include <SPI.h>
#include <TFT_eSPI.h> // Библиотека для конкретного оборудования

TFT_eSPI tft = TFT_eSPI();


void setup(void) {

 Serial.begin(250000);
 tft.begin();
 tft.setRotation(1);

//****** проверка загрузки шрифтов
 if (!SPIFFS.begin()) {
 Serial.println("Ошибка инициализации SPIFFS!");
 while (1) yield(); // Оставайся здесь, бездельничая, ожидая
 } 
}


void loop() {

 tft.fillScreen(TFT_BLACK);
 tft.setTextColor(TFT_WHITE, TFT_BLACK); // Set the font colour AND the background colour
 // so the anti-aliasing works

 tft.setCursor(0, 0); // Set cursor at top left of screen


 tft.loadFont(FONT_10); // загружаем шрифт
 tft.print(FONT_10); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти Французские Булочки"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт 
 
 // tft.setCursor(0, 22); // Set cursor at top left of screen
 tft.loadFont(FONT_11); // Загружаем шрифт 
 tft.print(FONT_11); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти Французские Булочки"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт
 

 tft.loadFont(FONT_12); // загружаем шрифт
 tft.print(FONT_12); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти Французские Булочки"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт 
 

 tft.loadFont(FONT_14); // Загружаем шрифт 
 tft.print(FONT_14); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти Французские Булочки"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт
 

 tft.loadFont(FONT_16); // Загружаем шрифт 
 tft.print(FONT_16); // Выводим название шрифта
 // tft.println(" - Потрогай Еще Эти Французские Бу"); // Натпись про БУЛКИ
 tft.println(" - Потрогай Еще Эти Французские Бу"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт
 

 tft.loadFont(FONT_18); // Загружаем шрифт 
 tft.print(FONT_18); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти Французск"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт
 

 tft.loadFont(FONT_20); // Загружаем шрифт 
 tft.print(FONT_20); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти Францу"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт
 
 tft.loadFont(FONT_22); // Загружаем шрифт 
 tft.print(FONT_22); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти Фра"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт
 


 tft.loadFont(FONT_25); // Загружаем шрифт 
 tft.print(FONT_25); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт
 
 
 
 tft.loadFont(FONT_30); // Загружаем шрифт 
 tft.print(FONT_30); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт
 delay(200000);
}

В папке с проектом создайте папку data и скопируйте в нее файлы из архива с русскими шрифтами. Загрузите шрифты в файловую систему ESP*266 через меню Инструменты > ESP8266 Sketch Data Upload (Tools > ESP8266 Sketch Data Upload). Когда загрузка будет завершена, статусная панель IDE Arduino покажет сообщение «SPIFFS Image Uploaded», что значит «образ SPIFFS загружен».

Далее загрузите скетч в ваш ESP8266. Если все прошло без ошибок, то на дисплее вы увидите следующее

Комментарии к тексту программы

Для лучшего понимания алгоритма работы программы стоит остановиться на некоторых участках кода более подробно.

#define FONT_10 "Arial10"
#define FONT_11 "Arial11"
#define FONT_12 "Arial12"
#define FONT_14 "Arial14"
#define FONT_16 "Arial16"
#define FONT_18 "Arial18"
#define FONT_20 "Arial20"
#define FONT_22 "Arial22"
#define FONT_25 "Arial25"
#define FONT_30 "Arial30"

Здесь мы просто объявляем все используемы в программе шрифты для более удобного обращения к ним. Текст в кавычках это имя файла шрифта который мы скопировали в файловую систему ESP8266. То есть, если ваш шрифт называется Calibri10.vlw, то объявлять его нужно так

#define FONT_10 "Calibri10"

Далее обязательно ожидаем загрузки файловой системы устройства

//****** проверка загрузки шрифтов
 if (!SPIFFS.begin()) {
 Serial.println("Ошибка инициализации SPIFFS!");
 while (1) yield(); // Оставайся здесь, бездельничая, ожидая
 } 
}

После того как все успешно прошло переходим к основному этапу - выводу текста

tft.loadFont(FONT_10); // загружаем шрифт
 tft.print(FONT_10); // Выводим название шрифта
 tft.println(" - Потрогай Еще Эти Французские Булочки"); // Натпись про БУЛКИ
 tft.unloadFont(); // выгрузить шрифт 

С помощью tft.loadFont(FONT_10), загружаем шрифт в видеобуфер дисплея. С помощью tft.println() выводим текст на экран. И через tft.unloadFont()  выгружаем шрифт из памяти. Как видите, вывод русского текста на дисплей силами TFT_eSPI, гораздо более простая задача нежели в библиотеке Adafruit_GFX.

Подключение TFT дисплея к ESP8266
Начало работы с библиотекой LVGL. Первые шаги в создании графических интерфейсов
Изучение библиотеки LVGL. Базовые свойства объектов
Изучение библиотеки LVGL. Cоздание красивых интерфейсов с помощью стилей
Изучение библиотеки LVGL. Свойства стилей