新手人机界面设置按钮控件应用

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、编译无错后，运行“虚拟串口屏”进行验证。