什么是菜单控件?

菜单控件如何使用?插图1

下拉选择框可以通过菜单控件来显示。用户可以设置按下按钮后弹出菜单,也可以通过发送指令弹出菜单,点击菜单后数据可以输出到文本控件或者选择控件,然后显示在串口屏上

本例程中介绍菜单控件常见的应用,结合工程中的画面介绍每一个应用的配置,常见的应用如下所示

  1. 下拉菜单应用:菜单数据输出到文本控件中。
  2. 外部主机修改选项:菜单数据输出到选择控件中,外部主机修改选择控件的选项

适用范围:全系列

例程下载链接:《菜单控件应用》(点击跳转)

10.1 菜单控件属性

本章节重点介绍菜单控件的属性,属性窗口如下所示

菜单控件如何使用?插图3

菜单外观

单色、图片、图片与文字,如下所示

菜单控件如何使用?插图5
单色

可以直接使用软件生成一个简单的菜单外观,

  • 字体:字体样式和大小
  • 背景色:菜单底色
  • 前景色:菜单的字体和分割线颜色
菜单控件如何使用?插图7

注:文字设置在后文的“菜单设置”中描述

图片

使用图片作为菜单控件的背景,可以设置弹起时的图片和按下时的图片,效果如下所示

菜单控件如何使用?插图9
图片与文字

同时显示单色功能和图片功能的内容。可以使用自定义底图,然后文字使用属性设置的字体

菜单控件如何使用?插图11

菜单风格

设置菜单的显示风格

  • 弹出菜单:即下拉菜单,可通过按钮触发弹出
  • 固定菜单:菜单固定显示状态

菜单方向

设置菜单选项呈现样式

  • 垂直,如下所示菜单控件如何使用?插图13
  • 水平,如下所示
菜单控件如何使用?插图15

菜单项数

菜单选项的项数

语言数

菜单选项的数量。此选项与“多语言”功能配合。系统语言改变时,菜单选项将改变

10.2 下拉菜单应用-文本控件输入

按钮控件的触摸用途可以设置弹出菜单

画面配置

在【下拉菜单应用】画面的“背景图片”导入相应的美工图片。在该画面添加文本控件、菜单控件以及按钮控件,如下所示

菜单控件如何使用?插图17

属性配置

菜单控件属性

设置【菜单控件】外观为“图片”,【菜单风格】为“弹出键盘”,通知方式为“按下和松开”,菜单方向为“水平”,菜单项数为”5“,菜单选项和图片上的文字对应,设置为”57.7V;100V;220V;380V;无效;“,如下所示

菜单控件如何使用?插图19
文本控件属性

文本默认为“57.7V”,输入为“用户主机输入”,属性配置如下所示

菜单控件如何使用?插图21
按钮控件属性

设置按钮的触摸用途为“弹出键盘”,菜单控件ID:菜单控件的ID,输入控件ID:文本控件的ID,属性如下所示

菜单控件如何使用?插图23

运行预览

运行虚拟屏,VisualTFT软件和虚拟屏用“虚拟串口”建立联机。点击按钮弹出菜单,选择菜单选项显示到文本框,点击菜单选项,将子项内容更新到文本框并收起菜单控件,运行效果如下所示

菜单控件如何使用?插图25

同时,在指令助手中,设置【画面ID】为“0”、【控件ID】为“3”、【文本控件ID】为“1”,勾选【显示下拉菜单】,点击“发送”。则在虚拟屏中,该菜单控件自动显示,如下所示

菜单控件如何使用?插图27

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
按钮控件属性

和【下拉菜单应用-文本控件输入】章节类似,不在阐述

运行预览

运行虚拟屏,VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令助手】,选择左侧导航栏【滑动选择控件】,设置“设置滑动选择控件值”的指令参数。在指令助手中,设置【画面ID】为“1”、【控件ID】为“1”、【选项索引】为“2”,点击“发送”。则在虚拟屏中,该选择控件显示“220V”,运行效果如下所示

菜单控件如何使用?插图31

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项
    ……
}

相关新闻

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

cloud@modbus.cn

QQ
微信