EEPW论坛

按钮控件应用

类别 内容 关键词 按钮控件 串口屏 摘 要

目 录

1. 适用范围... 1

2. 开发环境版本... 2

3. 功能概述... 3

3.1 按钮分类... 3

3.2 属性设置... 3

3.3 弹起时按下时图片... 4

3.4 裁剪功能... 5

3.5 查看ID.. 7

4. 技术实现... 8

4.1 切换画面... 8

4.2 开关描述... 9

4.3 自定义按键... 10

4.4 自定义指令... 12

4.5 弹出菜单... 12

1. 适用范围

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

2. 开发环境版本 1. VisualTFT软件版本：V3.0.0.636 及以上；

版本查看：打开VisualTFT，点击帮助->关于VisualTFT可以查看当前软件版本号；

最新版本可登陆www.gz-dc.com进行下载

2. . 串口屏硬件版本：V2.22.649.XXX及以上。

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

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

3. 功能概述 3.1 按钮分类

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

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

图 3‑1 按钮分类

3.2 属性设置

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

图 3‑2 属性设置

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

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

3、 弹起时（按下时）的图片以及裁剪功能：弹起或者按下时显示相应的UI，增强用户体验；视用户的UI选择是否裁剪，勾中选择“是”。

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

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

6、 触控的操作风格:

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

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

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

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

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

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

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

3.3 弹起时按下时图片

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

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

图 3‑3工程分辨率

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

图 3‑4 图片分辨率

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

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

图 3‑5

2、如图 3‑6所示，然后点击“...”的展开标志。

图 3‑6

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

3.4 裁剪功能 1. 不勾选裁剪功能

例程中，首页导航的美工图如错误！未找到引用源。所示，假如我们要设置按下时“文本”图标的图片。

图 3‑7首页导航图

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

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

图 3‑8 按下时美工图

2. 勾选裁剪功能

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

图 3‑9 首页导航图

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

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

图 3‑10 按下时美工图

此时按下“文本”图标时，效果如图 3‑11所示。

图 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所示，将整个“文本”图标设置为触控区域。

图 4‑1触控区域

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

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

图 4‑2文本属性

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

图 4‑3 虚拟串口屏

4.2 开关描述

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

会显示绿色运行帧

GIF图会闪动

图 4‑4开关描述

按如下步骤操作：

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

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

图 4‑5 按钮属性

设置按下时的对内指令：

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

图 4‑6

（2）如图 4‑7所示，然后点击“...”的展开标志。

图 4‑7

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

填充完必须确认

图 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所示。

图 4‑9插入美工图

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

发现分辨率不匹配。

鼠标右键弹出菜单

3、

插入文本控件

在美工图上分别放置好按钮控件，并在红色标记处插入一个文本控件，如图 4‑10所示。

图 4‑10 插入控件

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

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

键入字符“2”

图 4‑11 按钮属性

5、设置文本控件属性，如图 4‑12所示：清空文本；输入方式→自定义按键输入。

清空文本

图 4‑12 文本属性

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

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

4.4 自定义指令

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

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

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

图 4‑13自定义指令

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

4.5 弹出菜单

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

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

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

插入三个控件

图 4‑14

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

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

此处ID为当前控件ID

图 4‑15

按钮属性

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

清空文本

图 4‑16 文本属性

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

图 4‑17 菜单属性

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