EEPW论坛

修订历史

1. 适用范围... 5

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

3. 功能概述... 7

4. 技术实现... 8

4.1 图标控件应用... 8

4.1.1 生成ICON图标... 8

4.1.2 插入图标控件... 9

4.2 动画控件应用... 10

4.2.1 动画控件属性窗口... 10

4.2.2 插入动画控件... 11

4.3 协同按钮控件... 12

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

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

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

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

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

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

1、 图标控件

建立画面中的图标与数据库之间的联系，可以反映设备真实的运作状况，或者可以反映工业中的真实生产状况；用图标控件协同文本控件还可以实现艺术字的显示,具体操作参考我司官网《工程技术笔记-如何在串口屏上实现艺术字文本显示》。

2、 动画控件

我们在画面中插入动画控件，可以更好的展示我们需要展示的内容，让产品的展示更加生动形象；还可以用动画控件设置屏幕的开机动画。

要使图标控件运作起来，首先要生成ICON图标，然后插入生成的ICON图标，最后协同按钮控件使用。动画控件也一样，插入GIF之后协同按钮控件使用。图标控件跟动画控件可以在同一个画面中协同按钮控件协作运作。

1、 打开VisualTFT软件，点击工具，选择“图标生成”，如图 4‑1所示。

图 4‑1 打开生成器

2、 点击增加帧，如图 4‑2所示

图 4‑2 增加帧

3、 点击打开可以依次添加预先准备好的ICON图标素材，如图 4‑3所示

图 4‑3 添加帧文件

4、 帧添加完成之后，我们通过拖动可以调整帧与帧之间的排列，帧的排列决定了最后生成图标的帧数，如图 4‑4所示，“停止运行”帧为第0帧；“启动运行”帧为第1帧；“透明帧”为第2帧。帧数添加排列完毕后点击生成图标。

图 4‑4 排列帧的顺序

5、 最后保存好生成的图标，如图 4‑5所示。

图 4‑5 保存图标

1、新建一个画面,在画面中插入准备好的美工背景图, 插入一个图标控件到图 4‑6中标示区域。

图 4‑6 插入图标

2、设置新插入的图标控件属性窗口，添加刚刚生成好的ICON文件，如图 4‑7所示。

图 4‑7 选择icon文件

3、插入完图标控件之后，鼠标右键设置图标为原始大小显示，如图 4‑8所示，图标插入设置完毕。

图 4‑8 设置原始大小显示

熟悉属性窗口可以更好地对动画控件的属性进行设置，如图 4‑9所示，为动画控件的属性窗口。

图 4‑9 动画控件属性窗口

1、初始化显示。选择“是”或者“否”。

A：选择“是”，开启初始化显示，在控件所在画面初始化显示，如图 4‑10所示。

（1）间隔时间：动画帧与帧之间播放的间隔时间。

（2）循环次数：动画播放循环次数。

（3）播放结束时：如图 4‑10标示区域，分为“不处理”、“发送通知”、“切换到下一画面”。

不处理：播放结束后，动画控件显示静态图片。

发送通知：播放结束后发送通知到屏幕。

切换到下一画面：播放结束后自动切换到动画控件所在画面的下一个画面。

图 4‑10 动画控件属性窗口

B：选择“否”，关闭初始化显示。

2、动画文件。为动画控件插入动画文件。

3、自动播放。选择“是”或者“否”。

A：选择“是”，在控件所在画面自动播放动画文件。

B：选择“否”，关闭动画控件自动播放，控件没有接收指令时，动画控件为静态图片。

1、在标示位置插入动画控件，如图 4‑11所示。

图 4‑11 插入动画控件

2、设置动画控件的属性窗口，插入预先准备好的动画控件。鼠标左键点击图 4‑12的1号标示区域，会弹出“...”展开标志,然后插入准备好的动画文件。

图 4‑12 插入动画文件

3、插入完动画之后，鼠标右键设置动画为原始大小显示，如图 4‑13所示，画面插入设置完毕。

图 4‑13 设置原始大小显示

通过按钮按下的指令发送，可以对插入的图标控件和动画控件起到控制的作用。

1、在“启动运行”、“停止运行”图标区域覆盖两个按钮控件，如图 4‑14所示。

图 4‑14

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

图 4‑15 按钮属性

设置按下时的对内指令：

按钮属性窗口中，鼠标左键点击错误！未找到引用源。的1号标示区域，会弹出“...”展开标志,然后粘贴指令进去,指令输入完毕之后点击确认。

注：指令可以从指令助手中调出，可以参考我司官网相关资料。这里用到的指令为：

显示运行帧的指令：EE B1 20 00 00 00 02 FF FC FF FF

动画控件启动指令：EE B1 23 00 00 00 01 01 FF FC FF FF

图 4‑16 对内按下时指令设置

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

图 4‑17 属性窗口设置

设置按下时的对内指令：

按钮属性窗口中，鼠标左键点击图 4‑18的1号标示区域，会弹出“...”展开标志,然后粘贴指令进去,指令输入完毕之后点击确认。

图 4‑18

注：指令可以从指令助手中调出，可以参考我司官网相关资料。这里用到的指令为：

显示停止帧的指令：EE B1 23 00 00 00 01 00 FF FC FF FF

动画控件停止指令： EE B1 21 00 00 00 02 FF FC FF FF

4、模拟仿真

编译无误后，运行模拟器测试效果，如图 4‑19所示。点击“启动运行”按钮，图标控件会显示运行帧、动画控件会动起来；点击“停止运行”按钮，图标控件会显示停止帧、动画控件会停止下来。

图 4‑19 模拟仿真