什么是滑动选择控件?
![滑动选择控件如何使用?插图1 滑动选择控件如何使用?插图1](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
滑动选择控件主要方便用户设置参数和显示状态。本例程中介绍滑动选择控件常见的应用,结合工程中的画面介绍每一个应用的配置,常见的应用如下所示:
- 滑动选择:通过上下滑动屏幕来实现用户对参数设置的选定
- 状态显示:设置显示某种文字状态
适用范围:全系列
例程下载链接:《滑动选择控件应用》(点击跳转)
11.1 滑动选择控件属性介绍
滑块有两种模式,分别为滑动选择以及状态显示
滑动选择
![滑动选择控件如何使用?插图3 滑动选择控件如何使用?插图3](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
用途
上下滑动更改选项来设定用户所需要选择的参数
字体
更改显示文字的字体大小
文字颜色
指定被选中项的字体颜色,如下所示
![滑动选择控件如何使用?插图5 滑动选择控件如何使用?插图5](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
两端颜色
用于设置两端待选择项的字体颜色,如下所示
![滑动选择控件如何使用?插图7 滑动选择控件如何使用?插图7](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
两端待选项的字体与中间被选项字体大小的百分比例,缩放系数范围为[0-100],0表示不缩放,设置效果显示如下所示
![滑动选择控件如何使用?插图9 滑动选择控件如何使用?插图9](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
候选数
用于设置在控件可视范围内显示待选择项的数量,如下所示
![滑动选择控件如何使用?插图11 滑动选择控件如何使用?插图11](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
初始选项
设置初始化时默认选中的项,第一项标注以0开始,0代表所有项数里起始的第一项,如下所示
![滑动选择控件如何使用?插图13 滑动选择控件如何使用?插图13](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
语言数
设置显示文字语言类别的数量,最多可选择10项语言(M系列15种)。选择好语言数后,在后面数据选项各种语言中分别写入对应的语言,每一项之间必须用半角(;)隔开,最后一项也需要,如下所示
![滑动选择控件如何使用?插图15 滑动选择控件如何使用?插图15](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
状态显示
![滑动选择控件如何使用?插图17 滑动选择控件如何使用?插图17](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
用途
用于显示某种文字状态。
字体
设置显示文字的字体大小(此处只代表设置字体的大小)。
文字颜色
用于设置状态显示文字的颜色,如下所示
![滑动选择控件如何使用?插图19 滑动选择控件如何使用?插图19](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
初始选项
初始化时默认选中的文字状态,第一项标注以0开始,0代表所有项数里起始的第一项,如下所示
![滑动选择控件如何使用?插图21 滑动选择控件如何使用?插图21](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
水平对齐
文字在控件范围内水平方向上的对齐方式设置
垂直对齐
文字在控件范围内垂直方向上的对齐方式设置
语言数
设置显示文字语言类别的数量,最多可选择10项语言(M系列15种)。选择好语言数后,在后面数据选项各种语言中分别写入对应的语言,每一项之间必须用半角(;)隔开,最后一项也需要。
11.2 滑动选择功能
【滑动选择功能】画面,介绍用户如何配置一个通过上下滑动屏幕或者通过给屏幕发送指令来选择设定参数的滑动选择控件
画面配置
在【滑动选择功能】画面的“背景图片”导入相应的美工图片。在该画面中添加滑动选择控件,如下所示
![滑动选择控件如何使用?插图23 滑动选择控件如何使用?插图23](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
属性配置
以控件ID为1的滑动选择控件为例,设置【用途】为“滑动选择”、【字体】为“ASC_CHS_22”、【文字颜色】为“128;128;128”、【两端颜色】为“128;128;128”,【两端缩放】为“50”,【候选项数】为“5”,【初始选项】为“0”,【语言数】为“1”,【数据选项】设置为“10;20;30;40;50;60;70;80;90;100;”配置如下所示
![滑动选择控件如何使用?插图25 滑动选择控件如何使用?插图25](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
运行预览
运行虚拟屏,用户可以利用鼠标在虚拟屏上上下滑动来选定设置参数(若用户手上有实体屏,只需将配置好的工程下载进去,即可体验),同时也可以通过虚拟串口给虚拟屏发送指令来设置选择项(VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令助手】,选择左侧导航栏【滑动选择控件】,设置“设置滑动选择控件值”的指令参数。),例如设置画面0,控件1的滑动选择控件设定值为第三项,运行效果如下所示
![滑动选择控件如何使用?插图27 滑动选择控件如何使用?插图27](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
外部MCU控制
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现设置上述设置好的滑动选择控件数据选项中的第三项的“30”数值,则直接调用滑动选择控件值设置函数SetSelectorValue ( )即可,代码如下所示
/************************************************************************
** Function name: void SetSelectorValue (uint16 screen_id,
** uint16 control_id,
** uint8 item);
** Descriptions : 设置滑动选择控件值
** input parameters: screen_id: 画面ID
** control_id: 控件ID
** item: 设置的选项
** output parameters: 无
** Returned value : 无
************************************************************************/
{
……
SetSelectorValue (0, 1, 2) //画面ID0,控件ID1,设置的选项第三项
……
}
11.3 状态显示功能
【状态显示功能】画面,介绍如何去配置一个用来显示某种文字状态的滑动选择控件
画面配置
在【状态显示功能】画面的“背景图片”导入相应的美工图片。在画面中添加滑动选择控件,如下所示
![滑动选择控件如何使用?插图29 滑动选择控件如何使用?插图29](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
属性配置
设置【用途】为“状态显示”,【字体】为“ASC_CHS_30”,【文本颜色】为“255;255;255”,【初始选项】为“0”,【水平对齐】为“居中对齐”,【垂直对齐】为“居中对齐”,【语言数】为“1”,【数据选项】设置为“设备正常/Normal Equipment;设备暂停/Equipment Suspended;设备维修/equipment Maintenance;设备恢复/Equipment Recovery;”,配置如下所示
![滑动选择控件如何使用?插图31 滑动选择控件如何使用?插图31](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
运行预览
运行虚拟屏,VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令助手】,选择左侧导航栏【滑动选择控件】,设置“设置滑动选择控件值”的指令参数。例如设置画面1,控件1的滑动选择控件的设定值为第三项,运行效果如下所示
![滑动选择控件如何使用?插图33 滑动选择控件如何使用?插图33](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
外部MCU控制
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。
例如用户需实现设置上述设置好的滑动选择控件数据选项中的第三项的“设备维修/equipment Maintenance”文字,则直接调用滑动选择控件值设置函数SetSelectorValue ( )即可,代码如下所示
/************************************************************************
** Function name: void SetSelectorValue (uint16 screen_id,
** uint16 control_id,
** uint8 item);
** Descriptions : 设置滑动选择控件值
** input parameters: screen_id: 画面ID
** control_id: 控件ID
** item: 设置的选项
** output parameters: 无
** Returned value : 无
************************************************************************/
{
……
SetSelectorValue (0, 1, 2) //画面ID0,控件ID1,设置的选项第三项
……
}