一、目的
这一节我们学习如何使用我们的ESP32开发板来控制ILI9341 3.2寸TFT-LCD触摸屏进行LVGL图形化编程的第一步:显示中文。
二、环境
ESP32 + 3.2寸 ILI9341触摸屏 + Thonny IDE + 几根杜邦线 + Win10
接线方法:请看上一篇文章。
三、流程介绍
lv_micropython固件中默认不包含中文。如果想要显示中文汉字,需要进行如下的操作:
1,制作需要显示的汉字成为1个独立的文件(常用汉字有好几千个,不能都制作,ESP32没那 么大的存储空间)
2,python程序加载制作的字库文件
3,需要显示汉字的位置设置字体
四、安装制作中文字体的工具
想要制作需要显示的文字,需要一个工具,这个工具需要用如下的流程安装:以Windows为例。
1,安装nvm
从官方网站下载或者从文末百度网盘下载。直接默认安装即可。
官方下载地址:https://github.com/coreybutler/nvm-windows/releases
2,使用nvm安装node.js(包含npm)
用管理员方式打开windows 命令终端,输入nvm,验证nvm是否安装成功,如果输出以下信息则代表成功。
为了能够让nvm安装node时更快,分别执行下面2个命令:
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
下面安装node.js,命令如下:
nvm install 16.18.0
具体看下图:
注意:需要把16.18.0文件夹设置在系统变量PATH中
3,使用npm安装lvgl模块
安装lvgl字体生成模块。同样以管理员打开命令终端:
输入以下命令使用淘宝镜像,加速安装
npm config set registry https://registry.npm.taobao.org
然后输入以下命令:
npm i lv_font_conv -g
验证安装工具成功,打开一个新的命令行窗口,输入以下命令:
lv_font_conv
如果出现以下信息,则代表安装成功:
上述安装成功后会生成lv_font_conv工具,用这个工具制作。
五、制作中文字体
1,下载字库
当以上流程做完后,接下来可以我们来生成字体。想在ESP32上显示什么样的字体?
下面以阿里巴巴普惠体的字体库为例讲解:字体在文末下载哦!
2,制作
解压下载的压缩包,解压后是一个文件夹,进入这个文件夹。按下图输入CMD回车
输入以下命令:
lv_font_conv --size 20 --format bin --bpp 1 --font Alibaba-PuHuiTi-Medium.ttf --symbols 北京欢迎你 --no-compress -o alibabapuhuiti-20.bin
命令解释:
1,上面的命令表示生成一个文件,名字叫做alibabapuhuiti-20.bin
2,这个字体文件中只有北京欢迎你这5个字,所以非常小,这里修改为你需要制作的文字
注意:上述命令的空格一定是英文的空格,中文的空格会失败
这个字体文件文末下载。
六、显示中文
使用上面的字体文件,打开Thonny IDE,输入以下代码,我们来测试下:
import lvgl as lv
import time
from espidf import VSPI_HOST
from ili9XXX import ili9341
from xpt2046 import xpt2046
import fs_driver
# ------------------------------ 屏幕初始化操作 --start------------------------
# 屏幕宽高
WIDTH = 240
HEIGHT = 320
# 创建显示屏对象
disp = ili9341(miso=19, mosi=23, clk=18, cs=5, dc=26, rst=27, power=14, backlight=-1, backlight_on=0, power_on=0, rot=0x80,
spihost=VSPI_HOST, mhz=60, factor=16, hybrid=True, width=WIDTH, height=HEIGHT,
invert=False, double_buffer=True, half_duplex=False, initialize=True)
# 创建触摸屏对象
touch = xpt2046(cs=25, spihost=VSPI_HOST, mosi=-1, miso=-1, clk=-1, cal_y0 = 423, cal_y1=3948)
# ------------------------------ 屏幕初始化操作 --stop------------------------
# 1. 创建显示screen对象。将需要显示的组件添加到这个screen才能显示
scr = lv.obj() # scr====> screen 屏幕
fs_drv = lv.fs_drv_t()
fs_driver.fs_register(fs_drv, 'S')
scr = lv.scr_act()
scr.clean()
# 2. 封装的需要显示的按钮
class CounterBtn():
def __init__(self, scr):
self.cnt = 0
btn = lv.btn(scr) # 将当前按钮与screen对象进行关联
# btn.set_pos(20, 10) # 相对于屏幕左上角 x为20,y为10
btn.set_size(120, 50) # 设置按钮的宽度为120, 高度为50
btn.align(lv.ALIGN.CENTER,30,0) # 居中(第1个0表示x的偏移量,第2个0表示相对于y的偏移量)
self.myfont_cn = lv.font_load("S:./alibabapuhuiti-20.bin")
label = lv.label(btn) # 在按钮上创建一个标签Label,用来显示文字用
label.set_style_text_font(self.myfont_cn, 0) # set the font
label.set_text("北京欢迎你") # 设置文字内容
label.center() # 相对于父对象居中
# 3. 创建按钮
counterBtn = CounterBtn(scr)
# 4. 显示screen对象中的内容
lv.scr_load(scr)
# ------------------------------ 看门狗,用来重启ESP32设备 --start------------------------
try:
from machine import WDT
wdt = WDT(timeout=1000) # enable it with a timeout of 2s
print("提示: 按下Ctrl+C结束程序")
while True:
wdt.feed()
time.sleep(0.9)
except KeyboardInterrupt as ret:
print("程序停止运行,ESP32已经重启...")
time.sleep(10)
# ------------------------------ 看门狗,用来重启ESP32设备 --stop-------------------------
测试效果:
七、备注
中文显示知识,在研究的过程中参考的有价值的链接如下:
1,使用字体的demo:https://github.com/lvgl/lv_binding_micropython/blob/master/examples/Dynamic_loading_font_example.py
2, lv_font_conv的安装以及使用:https://github.com/lvgl/lv_font_conv
八、下载文件
链接: https://pan.baidu.com/s/1VZ5SeVN0Cr1Z1AVxGHpatA 提取码: pfk8 复制这段内容后打开百度网盘手机App,操作更方便哦