17.3. 串口触摸屏的界面设计¶

在使用串口屏之前,我们需要先通过它的上位机软件创建一个工程,工程中进行串口屏界面的设计,包括文本控件、按钮控件等。

创建工程

首先,在电脑上安装串口屏的上位机软件,安装包在上面的资料中有。安装完成后,双击打开。点击菜单栏中的新建,创建一个新的工程。

python 模拟触屏 micropython触摸屏_micropython应用触摸屏

点击之后会弹框让你选择保存的路径以及工程名,这个根据自己喜好设置即可,没有要求。我这里的工程名设置为test。

python 模拟触屏 micropython触摸屏_上位机_02

接着会让你选择产品型号,串口屏对应的型号在背面可以看到。

python 模拟触屏 micropython触摸屏_上位机_03

我手里的这款就是基本型的,型号为TJC3224T024_011,在软件中选择对应的型号即可。

python 模拟触屏 micropython触摸屏_串口_04

我个人比较喜欢横屏显示,所以在显示选项中选择了横屏90度,大家也可以根据喜好自行设置。设置完点击OK完成创建。

python 模拟触屏 micropython触摸屏_micropython应用触摸屏_05

制作工程

软件左侧可以看到工具箱选区,这里我们添加一个滚动文本控件。点击滚动文本,该控件会自动添加到软件中间的界面区域中。

python 模拟触屏 micropython触摸屏_micropython应用触摸屏_06

python 模拟触屏 micropython触摸屏_串口_07

接下来我们需要设置要显示的文本,找到软件的右下角控件属性区,修改txt属性的值就是要显示的文本。

python 模拟触屏 micropython触摸屏_micropython应用触摸屏_08

但是改了之后,发现界面中还是没有文字显示,这是因为我们还需要添加字库。第一次用的话,需要我们制作一个新的字库。若不是,软件左下角字库区点击“+”即可添加现有字库。

这里我们制作一个新字库,点击菜单栏工具->字库制作。

python 模拟触屏 micropython触摸屏_控件_09

选择字体、字高,其它默认,输入字库名称,点击生成字库。选择保存的本地目录。

python 模拟触屏 micropython触摸屏_控件_10

保存后,提示是否添加刚才生成的字库,点击是进行添加。

python 模拟触屏 micropython触摸屏_python 模拟触屏_11

添加后,你会看到字库区多了一条字库信息,第一个字符0表示字库唯一ID,后面是刚才输入的字库名称,括号内是一些我们设置的参数。

python 模拟触屏 micropython触摸屏_上位机_12

这时我们回到控件的属性区,修改的文字就可以在界面中显示了。这里我把txt改为Hello TPYBoard。提示超出字符长度的话,把txt_maxl改大点就行。

python 模拟触屏 micropython触摸屏_python 模拟触屏_13

python 模拟触屏 micropython触摸屏_python 模拟触屏_14

如果你想更换字库的话,在控件属性修改font的值,这个值填写的是字库的ID,默认为0。