Русский текст на TFT SPI дисплее: гайд по настройке

02.05.2024Вольтик.руПодключение модулей Arduino, Программирование в Arduino IDE2

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

В этой статье мы подробно рассмотрим, как настроить TFT SPI-дисплей для отображения русского текста. Мы обсудим не только технические аспекты настройки, но и шаги по подготовке соответствующих файлов шрифтов (в форматах.ttf или.otf) для загрузки на микроконтроллер.

В качестве примера мы будем использовать модуль Node MCU, основанный на ESP32, и TFT SPI-дисплей.

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

Дисплей подключается к контроллеру по шине SPI. Ниже представлена таблица подключения.

TFT SPI Дисплей	Node MCU 32S
VCC	VIN (5V)
GND	GND
CS	D19
RESET	D18
A0	D4
SDA	D27
SCK	D26
LED	5V через резистор 220 Ом

Русский текст на TFT SPI дисплее: гайд по настройке

Контакт LED используется для включения подсветки. Он подключается к источнику питания 5 В через резистор сопротивлением 220 Ом.
Контакт A0 предназначен для выбора между отправкой команды или данных на дисплей.
Пин CS используется для выбора конкретного дисплея в шине SPI.
Пин SCK служит для синхронизации тактового сигнала.
По проводу SDA передаются команды и данные на дисплей.
Контакт RESET используется для сброса данных.

Библиотеки для arduino IDE

Для работы с дисплеем мы будем использовать библиотеку TFT_eSPI.

Откройте Arduino IDE и перейдите в меню Скетч > Подключить библиотеку > Управление библиотеками. Откроется Менеджер библиотек. Найдите библиотеку TFT_eSPI. Выберите библиотеку TFT_eSPI от Bodmer и установите ее.

Подключение сенсорного TFT дисплея к ESP32: Схема и пример кода

Подготовка файла конфигурации

Чтобы библиотека TFT_eSPI работала правильно, необходимо правильно настроить файл конфигурации с именем User_Setup.h. Он находиться в папке с библиотекой TFT_eSPI. Обычно, это папка находится по следующему пути: C:\Users\<username>\Documents\Arduino\libraries\TFT_eSPI.

Откройте файл User_Setup.h и заполните его, как показано ниже:

#define USER_SETUP_INFO "User_Setup"

#define ST7735_DRIVER
#define ST7735_INITB

#define TFT_RGB_ORDER TFT_RGB

#define TFT_WIDTH  128
#define TFT_HEIGHT 160

#define TFT_INVERSION_ON

#define TFT_MOSI 27
#define TFT_SCLK 26
#define TFT_CS   19
#define TFT_DC   4
#define TFT_RST  18

#define SMOOTH_FONT

#define SPI_FREQUENCY  27000000
#define SPI_READ_FREQUENCY  20000000
#define SPI_TOUCH_FREQUENCY  2500000

#define USER_SETUP_INFO "User_Setup"

#define ST7735_DRIVER

#define ST7735_INITB

#define TFT_RGB_ORDER TFT_RGB

#define TFT_WIDTH 128

#define TFT_HEIGHT 160

#define TFT_INVERSION_ON

#define TFT_MOSI 27

#define TFT_SCLK 26

#define TFT_CS 19

#define TFT_DC 4

#define TFT_RST 18

#define SMOOTH_FONT

#define SPI_FREQUENCY 27000000

#define SPI_READ_FREQUENCY 20000000

#define SPI_TOUCH_FREQUENCY 2500000

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

Подготовка шрифта

Для создания русского текста мы воспользуемся шрифтом «Times New Roman». Этот шрифт представлен в векторном формате TrueType и имеет расширение .ttf. Однако для его использования на микроконтроллере необходимо преобразовать его в растровый формат. Для этой задачи мы воспользуемся дополнительной программой Processing.

Вы можете выбрать любой другой шрифт в форматах .ttf или .otf, который вам нравится.

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

C:\Users\<username>\Documents\Arduino\libraries\TFT_eSPI\Tools\Create_Smooth_Font\Create_font\data

После этого запустите программу Processing и откройте скетч для растеризации изображений. Для этого выберите «Файл» -> «Открыть» в меню программы.

Необходимый скетч можно найти в папке с библиотекой TFT_eSPI:

C:\Users\<username>\Documents\Arduino\libraries\TFT_eSPI\Tools\Create_Smooth_Font\Create_font\Create_font.pde

Далее нужно изменить некоторые параметры в скетче:

Имя файла шрифта, который вы планируете использовать. При этом, сам файл должен лежать в папке data, внутри папки скетча. Имя файла записывается без расширения, также важно соблюдать регистр в названии.

String fontName = "timesNewRoman";

130	String fontName = "timesNewRoman";

Тип файла: ttf или otf.

String fontType = ".ttf";

132	String fontType = ".ttf";

Размер шрифта.

int  fontSize = 48;

137	int fontSize = 48;

Нужно указать, какие символы мы хотим растеризовать. Нам нужна кириллица, поэтому раскомментируем следующую строку:

0x0400, 0x04FF, //Cyrillic, 256, 256, Cyrillic (254 characters), Inherited (2 characters)

169	0x0400, 0x04FF, //Cyrillic, 256, 256, Cyrillic (254 characters), Inherited (2 characters)

Далее нажмите кнопку «Запустить» в верхней части экрана (как в Arduino IDE). В результате в папку data появиться файл с расширением .vlw, который мы будем использовать.

Осталось загрузить получившийся шрифт в память контроллера:

В папке с ваши скетчем создайте папку «data» и скопируйте в неё полученный на предыдущем шаге шрифт.
Воспользуйтесь плагином arduino-esp32fs-plugin для загрузки файла в память контроллера.

На этом подготовка шрифта завершена и можно приступать к написанию кода.

Пример кода

#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

void setup() {  
    // Инициализируем дисплей
    tft.init();
    tft.setRotation(1);
    tft.fillScreen(TFT_BLACK);


    // Инициализируем файловую систему
    if (!SPIFFS.begin()) {
        while (1) yield();
    }  

    // Загружаем шрифт
    tft.loadFont("timesNewRoman24");

    // Устанавливаем курсор примерно на середину экрана
    tft.setCursor(40, 70);

    // Задаем оранжевый цвет текста на чёрном фоне
    tft.setTextColor(TFT_ORANGE, TFT_BLACK);

    // Выводим сообщение
    tft.println("Привет Мир!");

    // Выгружаем шрифт, освобождаем память
    tft.unloadFont();
}

void loop() {
    // loop() в данном примере не задействован
}

#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

void setup() {

// Инициализируем дисплей

tft.init();

tft.setRotation(1);

tft.fillScreen(TFT_BLACK);

// Инициализируем файловую систему

if (!SPIFFS.begin()) {

while (1) yield();

}

// Загружаем шрифт

tft.loadFont("timesNewRoman24");

// Устанавливаем курсор примерно на середину экрана

tft.setCursor(40, 70);

// Задаем оранжевый цвет текста на чёрном фоне

tft.setTextColor(TFT_ORANGE, TFT_BLACK);

// Выводим сообщение

tft.println("Привет Мир!");

// Выгружаем шрифт, освобождаем память

tft.unloadFont();

}

void loop() {

// loop() в данном примере не задействован

}

Мы изучили процесс настройки TFT SPI дисплея для отображения текста на русском языке с использованием шрифта Times New Roman. Для этого нужно сначала преобразовать выбранный шрифт в растровый формат с помощью программы Processing.

Надеемся, что этот гайд поможет вам успешно настроить отображение русского текста на вашем TFT SPI дисплее и сделает ваши проекты ещё более функциональными!

Вольтик.ру

Вольтик - это слаженная команда амбициозных и заядлых инженеров. Мы создали этот проект с целью вовлечения вас, талантливых и начинающих профессионалов, в увлекательный мир мейкерской микроэлектроники!

2 комментария. Оставить новый

Сократ

21.11.2024 11:56

Здравствуйте. У Вас в примере шрифт загружается в память устройства, но мне хотелось бы реализовать это через файл с расширением .h, который тоже создается скриптом в processing. Пример такого использования шрифта можно найти, если набрать в поисковике “Correct way to add Custom Fonts?”. Проблема только в том, что библиотека требует для загрузки шрифта раздел GFXglyph, но скрипт processing его не создает. Было бы полезно, если Вы пояснили бы, что это за глифы и как их получать. Может где-то есть обновленный скрипт, чтобы создавал все как надо?

Ответить

supportvoltiq

21.11.2024 16:23

Здравствуйте! Похоже, что библиотека TFT_eSPI получила обновление, в котором был добавлен новый способ загрузки шрифтов. В новой версии библиотеки также был обновлён скрипе для Processing, который теперь также генерирует .h файл для шрифта и сохраняет его в папке <путь до библиотеки>/Tools/Create_Smooth_Font/Create_font.

Если вы хотите воспользоваться этим способом, в таком случае вам не нужно загружать в память микроконтроллера .vlw файл. Вместо этого нужно подключить сгенерированный заголовочный файл со шрифтом. Для этого в начале программы для Arduino нужно добавить строку #include "<путь до файла>/<имя файла со шрифтом>.h".

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