1. 适用范围

文档适合经济型、基本型、物联型、86盒系列等串口屏产品。

2. 开发环境版本

1. VisualTFT软件版本：V3.0.0.749 及以上；

版本查看：

（1）打开软件,右下角显示的软件版本号。

（2） 打开VisualTFT，点击帮助->关于VisualTFT可以查看当前软件版本号。

 最新版本可登陆大彩官网进行下载

2. 串口屏硬件版本：V2.22.915.XXX及以上。（本文以大彩串口屏操作为实例）

版本查看：

(1) 查看屏幕背面版本号贴纸。

(2) VisualTFT与屏幕联机成功后，右下角显示的版本号。

3. 功能概述

3.1 按钮分类

按钮，如同生活中的开关一样，按下即可以实现其控制的作用。不同的按钮，都有其不同的用途，这里将介绍按钮的使用及其实现的一些复合功能。

根据按钮的触控用途可分为五种：切换画面、开关描述、自定义按键、自定义指令、弹出菜单。如图 3 1所示。刚放置的按钮默认状态为开关描述，要实现按钮不同的功能，可以切换触控用途。

 3 1 按钮分类

3.2 属性设置

属性窗口是对控件属性进行更改的一个界面，熟悉属性窗口可以更好地对控件功能进行应用。以图 3 2的开关描述属性窗口为例进行解释，其它触控用途的属性设置类似。

图 3 2 属性设置（详细教程请查看附件）

1、 触控虚框：选择“是”，按钮按下时按钮周围闪现虚框；选择“否”关闭。

2、 事件通知：选择“是”，按下按钮，系统做出相应的消息响应；选择“否”关闭。

3、 弹起时（按下时）的图片以及裁剪功能：用户可以设置弹起（按下时）的图片；勾中裁剪，图片将裁剪显示。

4、 文字状态：选择“是”，可以设置弹起时按下时文本的显示及显示的属性，需要用到多语言时，不同语言文本以半角分号隔开。

5、 触控用途：要实现按钮控件不同的功能可以进行切换。

6、 初始状态：设置按钮初始为弹起或按下状态。

7、 触控的操作风格：

a) 瞬变：按下后，开关自动弹起，类似轻触开关功能。

b) 开关：按下后，开关由弹起变成按下或由按下变成弹起，类似带锁开关功能。

c) 置位：开关只能由弹起变成按下。

d) 复位：开关只能由按下变成弹起。

e) 长按：不断地发出通知。

8、 对内指令：是按钮按下或者弹起后，对内部执行的指令。

9、 对外指令：是按钮按下或者弹起后，对外发送的指令，命令任意编制，但是不能含有“FF FC FF FF”，或者会与常规指令冲突，可以设置间隔时间。

3.3 弹起时按下时图片（详细教程请查看附件）

设置弹起时或者按下时的UI可以增强用户体验，但是用户设置时必须注意分辨率。

新建的工程尺寸分辨率必须和图片UI的尺寸分辨率一致，如图 3 3所示，新建工程选型为基本型7寸，分辨率为800*480。比如我们设置首页导航图分辨率，和按下时的首页导航图分辨率都必须一致。

 3 3工程分辨率

    如果我们不确定图片分辨率是否跟建的工程一致，我们可以打开图片属性查看图片的分辨率，首页导航图的分辨率为800*480。

 3 4 图片分辨率（详细教程请查看附件）

弹起时(按下时)的图片设置方法：

1、在按钮属性窗口中，鼠标左键点击图 3 5标示区域，会弹出“…”的展开标志。

 3 5

2、然后点击“...”的展开标志。

 3 6（详细教程请查看附件）

3、选择预先准备好的美工。

3.4 裁剪功能

1. 不勾选裁剪功能

例程中，首页导航的美工图，假如我们要设置按下时“文本”图标的图片。

 3 7首页导航图（详细教程请查看附件）

如果我们不勾选裁剪功能，效果相当于按下时直接填充图片到按钮控件的覆盖区域，我们可以把美工图片做成。

注：按下时的美工图分辨率必须和“文本”图标的分辨率相同，才能实现良好的按下效果

图 3 8 按下时美工图（本文以大彩串口屏操作为实例）

2. 勾选裁剪功能

首页导航的美工图，假如我们要设置按下时“文本”图标的图片。

图 3 9 首页导航图

这时我们准备如图 3 10所示的按下时美工图。

注：按下时的美工图的分辨率必须和首页导航的美工图分辨率一致，且所有图标的坐标、宽度、高度也必须与首页导航图一致，否则按下时对应的位置不能相对应

3 10 按下时美工图（详细教程请查看附件）

    此时按下“文本”图标时

 3 11 按下效果（详细教程请查看附件）

错误示范：如果我们准备的是如图 3 10所示的按下时美工图，而又没有勾选裁剪功能，那么按下时的效果是这样子的，此时按下“文本”图标时，效果如图 3 12所示，相当于把整个图 3 10填充进了按钮控件的覆盖区域，这种设置一般是漏了勾选裁剪功能。

 3 12 错误示范

3.5 查看ID

     要完成控件的功能技术应用，前提必须知道怎么查看控件和画面的ID。

1、查看控件ID的方法:如图 3 13所示，当前画面图标左上角的数字即为控件的ID，这里图 3 13展示的是例程中的控件ID。

 3 13控件ID

    2、查看画面ID的方法：如图 3 14所示，点击资源窗口，可以查看每个画面对应的ID，这里图 3 14展示的是例程的画面ID。

 3 14 画面ID

4. 技术实现

4.1 切换画面

切换画面，即按下按钮可以切换到指定的画面。如用户要实现点击“文本”图标后切换到“文本”指定画面的功能，按如下步骤操作：

1、将整个“文本”图标设置为触控区域。

4 1触控区域

2、 对文本控件的属性窗口进行设置，：按下时的图片→选择按下时的图片UI；选中裁剪；触控用途→切换画面；目标画面→“wenben”。

注：目标画面即为点击按钮后跳转到的指定画面，必须要选择目标画面，否则编译时会提示错误。

4 2文本属性

3、编译无错后，运行“虚拟串口屏”进行效果验证。

 4 3 虚拟串口屏

4.2 开关描述

开关描述，即把按钮作为一个按下或弹起的开关功能。用户按下“启动运行”的图标，图标控件会显示运行帧、GIF图会闪动起来。

 4 4开关描述

按如下步骤操作：

1、将整个“启动运行”图标设置为触控区域。

2、如图 4 5所示，在属性窗口设置：按下时的图片→选择按下时的图片UI；选中裁剪；触控用途→开关描述；操作风格→瞬变；设置按下时对内指令（下面会详细解释）。

 4 5 按钮属性

 设置按下时的对内指令：

（1）在按钮属性窗口中，鼠标左键点击 标示区域，会弹出“...”的展开标志。

（2）4 7所示，然后点击“...”的展开按钮。

 4 7

（3）展开后，可对指令进行输入、添加、删除、确定操作。从指令助手中调出指令复制到输入框中，输入指令添加完后点击确认。

 4 8 指令编辑

注：指令可以从指令助手中调出，可以参考大彩科技网相关资料。这里用到的指令为：

显示运行帧的指令：EE B1 23 00 03 00 01 01 FF FC FF FF。

动画控件启动指令：EE B1 20 00 03 00 02 FF FC FF FF 。

3、“停止运行”图标设置方法同上。

4、编译无错后，运行“虚拟串口屏”进行验证。

4.3 自定义按键

自定义按键，即把相应按钮转换成键值输入。需要配合自定义键盘输入的文本控件使用，可以将按钮控件设计为自定义键盘，用户需要把按钮控件当做自定义按键，按如下步骤操作：

1、新建一个画面，在画面中放置一个图片控件，插入准备好的键盘美工素材，如图 4 9所示。

插入美工图

2、插入的图片控件必须要设置图片为原始大小，否则，选用裁剪功能使用的时候会

发现分辨率不匹配。

3、在美工图上分别放置好按钮控件，并在红色标记处插入一个文本控件

 插入控件

4、对所有按钮分别进行属性设置，如图 4 12所示。比如要把自定义键盘键值设置为2，在属性窗口设置：按下时的图片→选择按下时的图片UI；裁剪→“勾中”；触控用途→自定义按键；类型→字符；字符→“2”。其他按钮键值设置方法同上。

注：键值类型除了字符外，还可以选择“Enter”、“Clear”、“Backspace”、“Esc”或“Shift”特殊功能键。

 按钮属性

5、设置文本控件属性，清空文本；输入方式→自定义按键输入。

文本属性

6、编译无错后，运行“虚拟串口屏”进行效果验证。

注：随着用户使用不同美工图片，我们内置的系统键盘将无法完美匹配用户美工，这时候我们可以使用自定义键盘来替代系统的键盘，具体操作参考大彩官网资料下载栏的《如何修改系统弹出键盘》。

自定义指令

自定义指令，即为用户设置按下某个按钮后，设备上传自定义的数据串列，比如用户设置按下“自定义指令”按钮后，屏幕要发送指令： FF 01 AA FF。步骤如下：

1、将整个“自定义指令”图标设置为触控区域。

    2、对自定义指令按钮进行属性设置，按下时的图片→选择按下时的图片UI；裁剪→“勾中”；触控用途→自定义指令；按下时对外指令→“FF 01 AA FF”。

 4 14自定义指令

     注：自定义指令中不能包含 FF FC FF FF 组合字符，否则会与常规指令冲突。

4.5 弹出菜单

注：串口屏硬件版本号V2.22.793.XXX以前，包括793在内的产品，弹出菜单功能不支持直接设置按钮控件触控用途为“弹出菜单”，否则工程下载到硬件时将导致弹出菜单功能不能正常使用；如需正常使用弹出菜单，请使用上面介绍的开关描述功能进行设置。我司后续新产品将全面支持此功能。

弹出菜单功能，需要协同菜单控件和文本控件使用，实现点击按钮即可弹出菜单，用户在选择弹出的菜单后，配合文本控件，把所选数据显示出来的功能。

1、设置准备好的背景美工图，在图标示区域分别放置了一个ID为1的按钮控件、一个ID为2的文本控件、一个ID为3的菜单控件。

    2、对放置的三个控件分别进行属性窗口设置。

   （1）对按钮控件进行属性窗口设置：触控用途→弹出菜单；菜单控件ID→“2”；文本控件ID→“3”。

按钮属性

   （2）对文本控件进行属性窗口设置，清空文本；对齐方式→居中对齐；输入方式→用户主机输入。

文本属性

   （3）对菜单控件进行属性窗口设置，菜单风格→弹出菜单；菜单方向→水平；菜单项数→“4”；菜单数据→“1；2；3；4；”。

 菜单属性

    3、编译无错后，运行“虚拟串口屏”进行验证。

正在下载，请等待……

下载附件需0积分！