什么是菜单控件?
![菜单控件如何使用?插图1 菜单控件如何使用?插图1](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
下拉选择框可以通过菜单控件来显示。用户可以设置按下按钮后弹出菜单,也可以通过发送指令弹出菜单,点击菜单后数据可以输出到文本控件或者选择控件,然后显示在串口屏上
本例程中介绍菜单控件常见的应用,结合工程中的画面介绍每一个应用的配置,常见的应用如下所示
- 下拉菜单应用:菜单数据输出到文本控件中。
- 外部主机修改选项:菜单数据输出到选择控件中,外部主机修改选择控件的选项
适用范围:全系列
例程下载链接:《菜单控件应用》(点击跳转)
10.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)
注:文字设置在后文的“菜单设置”中描述
图片
使用图片作为菜单控件的背景,可以设置弹起时的图片和按下时的图片,效果如下所示
![菜单控件如何使用?插图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)
菜单风格
设置菜单的显示风格
- 弹出菜单:即下拉菜单,可通过按钮触发弹出
- 固定菜单:菜单固定显示状态
菜单方向
设置菜单选项呈现样式
- 垂直,如下所示
- 水平,如下所示
![菜单控件如何使用?插图15 菜单控件如何使用?插图15](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
菜单项数
菜单选项的项数
语言数
菜单选项的数量。此选项与“多语言”功能配合。系统语言改变时,菜单选项将改变
10.2 下拉菜单应用-文本控件输入
按钮控件的触摸用途可以设置弹出菜单
画面配置
在【下拉菜单应用】画面的“背景图片”导入相应的美工图片。在该画面添加文本控件、菜单控件以及按钮控件,如下所示
![菜单控件如何使用?插图17 菜单控件如何使用?插图17](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
属性配置
菜单控件属性
设置【菜单控件】外观为“图片”,【菜单风格】为“弹出键盘”,通知方式为“按下和松开”,菜单方向为“水平”,菜单项数为”5“,菜单选项和图片上的文字对应,设置为”57.7V;100V;220V;380V;无效;“,如下所示
![菜单控件如何使用?插图19 菜单控件如何使用?插图19](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
文本控件属性
文本默认为“57.7V”,输入为“用户主机输入”,属性配置如下所示
![菜单控件如何使用?插图21 菜单控件如何使用?插图21](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
按钮控件属性
设置按钮的触摸用途为“弹出键盘”,菜单控件ID:菜单控件的ID,输入控件ID:文本控件的ID,属性如下所示
![菜单控件如何使用?插图23 菜单控件如何使用?插图23](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
运行预览
运行虚拟屏,VisualTFT软件和虚拟屏用“虚拟串口”建立联机。点击按钮弹出菜单,选择菜单选项显示到文本框,点击菜单选项,将子项内容更新到文本框并收起菜单控件,运行效果如下所示
![菜单控件如何使用?插图25 菜单控件如何使用?插图25](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
同时,在指令助手中,设置【画面ID】为“0”、【控件ID】为“3”、【文本控件ID】为“1”,勾选【显示下拉菜单】,点击“发送”。则在虚拟屏中,该菜单控件自动显示,如下所示
![菜单控件如何使用?插图27 菜单控件如何使用?插图27](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
MCU控制显示/隐藏下拉菜单
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现显示下拉菜单,则直接调用菜单显示函数ShowPopupMenu ( )即可,代码如下所示
/************************************************************************
** Function name : void ShowPopupMenu(uint16 screen_id,
** uint16 control_id,
** uint8 show,
** uint16 focus_control_id);
** Descriptions : 设置下拉菜单显示/隐藏
** input parameters :
** screen_id : 画面ID
** control_id:控件ID
** show: 0隐藏,1显示,为0时focus_control_id无效
** focus_control_id:关联的文本控件(菜单控件的内容输出到文本控件)
** output parameters: 无
** Returned value : 无
************************************************************************/
{
……
ShowPopupMenu(0,3,1,1); //显示画面0、控件3的菜单控件,并
//把输出结果显示在控件1的文本控件中
……
}
10.3 下拉菜单应用-滑动选择控件输入
【外部主机修改选项】画面,介绍使用滑动选择控件代替文本控件与菜单控件结合使用,此方法与文本控件的区别是,在使用外部单片机发送指令控件串口屏的情况下,文本控件的指令相对比较长,显示中文时还必须转换得到中文字符的编码。而因为选择控件的选项在工程编辑时就已写入,使用单片机控制时,发送相应的选项索引就可以显示对应的选项,指令相对简单,选项索引从0开始。
画面配置
和【下拉菜单应用-文本控件输入】章节类似,不在阐述
属性配置
菜单控件属性
和【下拉菜单应用-文本控件输入】章节类似,不在阐述
滑动选择控件属性配置
设置【用途】为“状态显示”、【数据选项[语言1]】设置为”57.7V;100V;220V;380V;无效;“
![菜单控件如何使用?插图29 菜单控件如何使用?插图29](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
按钮控件属性
和【下拉菜单应用-文本控件输入】章节类似,不在阐述
运行预览
运行虚拟屏,VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令助手】,选择左侧导航栏【滑动选择控件】,设置“设置滑动选择控件值”的指令参数。在指令助手中,设置【画面ID】为“1”、【控件ID】为“1”、【选项索引】为“2”,点击“发送”。则在虚拟屏中,该选择控件显示“220V”,运行效果如下所示
![菜单控件如何使用?插图31 菜单控件如何使用?插图31](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
MCU控制选择控件选项
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现选择控件显示预设的选项,则直接调用选择控件设置选项的函数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(1,1,2); //把画面1、控件1的滑动选择控件显示第2项
……
}