什么是图标控件?
![图标控件如何使用?插图1 图标控件如何使用?插图1](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
图标控件为GIF或ICON格式的文件,默认索引从0开始。使用图标控件,形象地把变量的不同状态显示出来或修改背景图片
本例程中介绍图标控件常见的应用,结合工程中的画面介绍每一个应用的配置,常见的应用如下所示
- 状态显示:实现4种状态显示
- 修改背景图标:实现4个背景图的切换
适用范围:全系列
例程下载链接:《ICON控件应用》(点击跳转)
8.1 图标控件属性
本章节重点介绍图标控件的属性,属性窗口如下所示
![图标控件如何使用?插图3 图标控件如何使用?插图3](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
初始化显示
选择“是”或者“否”
图标文件
选择图标文件的路径
透明处理
可选为“使用透明色”或“与背景融合”
触摸设置
设置触摸设置,可配置如下选项
- 禁止触摸:不允许触摸
- 允许触摸:触摸时有通知有蜂鸣
- 水平滑动时换帧:水平向左、水平向右滑动时换帧
- 垂直滑动时换帧:水平向上、水平向下滑动时换帧
8.2 图标文件制作
在我司VisualTFT 上位机软件集成图标文件“ICON”的制作工具,本章节介绍如何生产“ICON”文件
- 在VisualTFT软件菜单栏,选择【工具】→“图标生成”,如下所示
- 点击【增加帧】,将准备好的素材添加进来。用户导入图片默认为原始的宽和高显示,也可以对宽度和高度的微调及任意拖动进行位置调整,最后点击“生成图标”。操作如下所示
![图标控件如何使用?插图7 图标控件如何使用?插图7](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
8.3 状态显示
【状态更新】画面,介绍用户设备和串口屏通讯时,用户设备向串口屏发送指令,更新图标控件的帧
画面配置
在【状态更新】画面的“背景图片”导入相应的美工图片。在画面中添加1个图标控件(控件ID:1),和3个按钮控件(控件ID:2-6)
属性配置
图标属性
设置【图标文件】为素材的路径。【透明处理】为“与背景融合”,配置如下所示
![图标控件如何使用?插图9 图标控件如何使用?插图9](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
【工作中】按钮属性
用于显示图标第0帧,“工作中”状态。在按钮控件(控件ID:2)的属性窗口中,设置【触摸虚框】为“否”、【按下时的图片】为对应的素材路径、【裁剪】为“勾选”、【初始状态】为“按下”、【操作风格】为“开关”,如下所示
![图标控件如何使用?插图11 图标控件如何使用?插图11](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
对“工作中”、“暂停”、“停止”、“隐藏”等按钮实现互斥效果:同时选中上述按钮,在菜单栏【编辑】-“开关按钮互斥(N)”,对应的按钮“对内指令”-“按下时”会自动填入一条互斥指令,操作如下所示
![图标控件如何使用?插图13 图标控件如何使用?插图13](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
填写图标对内指令
- 点击【对内指令】→“按下时”
- 弹出指令填写框,选择“指令助手”
- 在指令助手界面,左侧导航栏选择【图标控件】
- 设置“图标控件显示”区域的指令参数。如例程中,设置【状态显示】画面中的图标控件显示第0帧
- 复制指令,填写在对内指令框,如下所示
![图标控件如何使用?插图15 图标控件如何使用?插图15](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
运行预览
运行虚拟屏,VisualTFT软件和虚拟屏用“虚拟串口”建立联机。按下“暂停”按钮,图标控件显示对应的暂停帧。对【状态显示】画面中的图标控件(控件ID:1),填写相应换面ID和控件ID,如显示指定帧“2”,点击“显示”。则在虚拟屏中,显示“停止帧”,运行效果如下所示
![图标控件如何使用?插图17 图标控件如何使用?插图17](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
外部MCU控制
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义
MUC控制指定帧显示
例如用户需实现显示图标控件第1帧,则直接调用文本字库串显示函数AnimationPlayFrame ( )即可,代码如下所示
/************************************************************************
** Function name: void AnimationPlayFrame(uint16 screen_id,
** uint16 control_id,
** uint8 frame_id)
** Descriptions : 指定帧显示
** input parameters: screen_id: 画面ID
** control_id: 控件ID
** frame_id: 指定帧
** output parameters: 无
** Returned value : 无
************************************************************************/
{
……
AnimationPlayFrame (0, 1, 1) //画面ID0,控件ID1,显示图标控件第1帧
……
}
8.3 修改背景图片
画面配置
在【修改背景图片】画面的“背景图片”导入相应的美工图片。在画面中添加1个图标控件(控件ID:1),和3个按钮控件(控件ID:2-4),如下所示
![图标控件如何使用?插图19 图标控件如何使用?插图19](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
属性配置
图标属性
设置【图标文件】为素材的路径、【透明处理】为“与背景融合”,配置如下所示
![图标控件如何使用?插图21 图标控件如何使用?插图21](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
【上一张】按钮控件属性
控件属性配置
用于显示图标上一帧。在按钮控件(控件ID:2)的属性窗口中,设置【触摸虚框】为“否”、【弹起图片】为对应的素材路径、【裁剪】为“勾选”、【按下时的图片】为对应的素材路径、【裁剪】为“勾选”,属性配置如下所示
![图标控件如何使用?插图23 图标控件如何使用?插图23](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
填写上一帧对内指令
- 点击【对内指令】→“按下时”,弹出指令填写框
- 选择“指令助手”
- 在指令助手界面,左侧导航栏选择【图标控件】
- 设置“图标控件显示”区域的指令参数,如例程中,设置【修改背景图片】画面中的图标控件显示上一帧
- 复制此指令,关闭指令助手,将指令粘贴到指令框中,操作如下所示
![图标控件如何使用?插图25 图标控件如何使用?插图25](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
同理,按钮“下一帧”设置和按钮“上一帧”设置类似,只需在指令助手选择下一帧,在把指令复制到相应的按钮对内指令里面即可
运行预览
运行虚拟屏,VisualTFT软件和虚拟屏用“虚拟串口”建立联机。按下“下一张”按钮,图标控件对应切换下一帧显示,对【修改背景图片】画面中的图标控件(控件ID:1),填写相应换面ID和控件ID,点击“下一帧”。则在虚拟屏中,该图标控件显示为下一张背景效果,运行效果如下所示
![图标控件如何使用?插图27 图标控件如何使用?插图27](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
外部MCU控制
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义
MUC控制上一帧显示
例如用户需要控制图标控件显示上一帧,则直接调用API函数AnimationPlayPrev ( )即可,代码如下所示
/***********************************************************************
** Function name: void AnimationPlayPrev(uint16 screen_id,
** uint16 control_id)
** Descriptions : 上一帧显示
** input parameters : screen_id:画面ID
** control_id : 控件ID
** output parameters: 无
** Returned value : 无
***********************************************************************/
{
……
AnimationPlayPrev (0, 1) //设置画面ID0控件ID1的图标控件显示上一帧
……
}
MUC控制下一帧
例如用户需实控制图标控件显示下一帧,则直接调用API函数AnimationPlayNext ( )即可,代码如下所示
/***********************************************************************
** Function name: void AnimationPlayNext (uint16 screen_id,
** uint16 control_id)
** Descriptions : 上一帧显示
** input parameters : screen_id: 画面ID
** control_id: 控件ID
** output parameters: 无
** Returned value : 无
***********************************************************************/
{
……
AnimationPlayNext (0, 1) //设置画面ID0控件ID1的图标控件显示下一帧
……
}