使用Arduino TFT_eSPI库自定义中文字库
DIY攻城狮
2022年01月01日 15:45
收录于文集
共5篇

0、背景

        最近做了一个基于ESP8266+1.3寸TFT液晶屏的WIFI小电视,其中图形界面都是使用TFT_eSPI库开发的,十分便捷,因为开发过程中需要使用显示中文,因此必须自定义适合的中文字库,这篇专栏主要是用来记录和分享如何使用TFT_eSPI库提供的示例来自定义中文字库。

1、安装Arduino及TFT_eSPI库

Arduino IDE安装资源及教程很多,这里不在重复说明。

安装完Arduino IDE后,依次点击 工具 -> 管理库 ->输入TFT_eSPI,即可安装TFT_eSPI库,安装完成之后,到Arduino的安装库的文件夹下,就可以找到TFT_eSPI。库函数的安装目录一般在这个路径中:C:\Users\Administrator\Documents\Arduino\libraries\TFT_eSPI

找到安装的库函数,在子文件夹中即可找到官方提供的自定义库函数的程序,路径如下:...TFT_eSPI\Tools\Create_Smooth_Font\Create_font

在这个目录下有3个文件

data : 存放我们的字体文件,用ttf结尾的,这个文件可在电脑自带系统找到,路径如下:C:\Windows\Fonts。找到喜欢的字体后将其复制到data文件夹下。

FontFiles : 存放我们制作出来的字库文件,制作出来后是vlw结尾的

Create_font.pde : 官方提供的示例程序,通过该程序来制作字库文件。

3、使用Processing创建字库

        使用processing打开Create_font.pde文件(https://processing.org/ 下载processing软件,并且安装,下载速度较慢,可以在网络上找绿色安装包,我用的Processing3.5.4,和Arduino IDE几乎完全一样,就是换了颜色,哈哈)。只需修改几个地方就可以,如下所示:

代码块
JavaScript
自动换行
复制代码
...........
String fontName = "STXINGKA";  // Manually crop the filename length later after creation if needed//定义存放在data文件夹中的字体文件的文件名
                                     // Note: SPIFFS does NOT accept underscore in a filename!
String fontType = ".ttf";//定义存放在data文件夹中的字体文件的后缀
//String fontType = ".otf";

// Define the font size in points for the TFT_eSPI font file
int  fontSize = 50;//自定义字库的大小,中文应不低于16,太小了就模糊看不清了。

// Font size to use in the Processing sketch display window that pops up (can be different to above)
int displayFontSize = 50;	//这个是程序运行后弹出对话框,输出字库里的所有字符。

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Next we specify which unicode blocks from the the Basic Multilingual Plane (BMP) are included in the final font file. //
// Note: The ttf/otf font file MAY NOT contain all possible Unicode characters, refer to the fonts online documentation. //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

static final int[] unicodeBlocks = {//输如Unicode编码编码的起始码值和结束码值
  // The list below has been created from the table here: https://en.wikipedia.org/wiki/Unicode_block
  // Remove // at start of lines below to include that unicode block, different code ranges can also be specified by
  // editting the start and end-of-range values. Multiple lines from the list below can be included, limited only by
  // the final font file size!
  //0x0021, 0x007E, //Basic Latin, 128, 128, Latin (52 characters), Common (76 characters)
};

// Here we specify particular individual Unicodes to be included (appended at end of selected range)
static final int[] specificUnicodes = {//输入需要生成字库的汉字的码值
0x64b8,0x8d77,0x8896,0x5b50,0x52a0,0x6cb9,0x5e72,0xff01//撸起袖子加油干!
};
复制成功

       每个汉字对应的unicode码值可以通过在线转换工具获取,然后将转换后的/u替换为0x即可。

      完成修改后,点击运行,弹出对话框显示自定义库中的所有字符,同时在FontFiles文件夹中生成一个STXINGKA50.vlw文件,存放我们制作出来的字库文件。

4、使用在线转换工具将将vlw文件转换成Arduin使用的字库文件

        通过https://tomeko.net/online_tools/file_to_hex.php?lang=zh,将vlw文件转换成Arduin使用的字库文件xxxFont.h

        将生成的16进制数据按照下列各式存放在font_50.h文件中

代码块
JavaScript
自动换行
复制代码
#include <pgmspace.h>
const uint8_t  font_50[] PROGMEM = {
0x00, 0x00, 0x00, 0x08, 0x00, 0x00, 0x00, 0x0B, 0x00, 0x00, 0x00, 0x32, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x1D, 0x00, 0x00, 0x00, 0x0A, 0x00, 0x00, 0x52, 0xA0, 0x00, 0x00, 0x00, 0x1F, 
0x00, 0x00, 0x00, 0x28, 0x00, 0x00, 0x00, 0x32, 0x00, 0x00, 0x00, 0x1F, 0x00, 0x00, 0x00, 0x02, 
... 
0x00, 0x00, 0x00, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x6C, 0xB9, 0x00, 0x00, 0x00, 0x26, 
0x00, 0x00, 0x00, 0x25, 0x00, 0x00, 0x00, 0x32, 0x00, 0x00, 0x00, 0x20, 0x00, 0x00, 0x00, 0x07, 
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x88, 0x96, 0x00, 0x00, 0x00, 0x26, 0x00, 0x00, 0x00, 0x29, 
};
复制成功

5、应用实例

代码块
JavaScript
自动换行
复制代码
#include <TFT_eSPI.h> 
#include "font_50.h"//字库
TFT_eSPI tft = TFT_eSPI();  // 引脚请自行配置tft_espi库中的 User_Setup.h文件

void setup()
{
  //tft液晶屏初始化设置
  tft.init();
  tft.setRotation(0);
  tft.fillScreen(0x0000);
  tft.setTextColor(TFT_RED, TFT_BLUE);//红色汉字,蓝色背景
  tft.loadFont(font_50); //指定tft屏幕对象载入font_50字库
  tft.drawString("撸起袖子",0,100); //在坐标0,0位置输出汉字,就可以在tft显示出来了
  tft.drawString("加油干!",0,150); 
  tft.unloadFont(); //释放字库文件,节省资源
}
void loop(){
  while(1){
    delay(2000);
  }
}
复制成功

显示效果如下: