一种HMI的菜单设置及页面切换控制方法

一种HMI的菜单设置及页面切换控制方法

王 亮，卞正其，徐朝忠

（江苏扬力数控机床有限公司，江苏 扬州 225009）

摘要：HMI又称人机交互界面，由菜单、控制按钮和页面组成。当设计制作多达几十、上百个页面时，通过编程使如此多的页面一一对应众多按键往往十分繁琐。本文介绍一种页面切换控制方法，不需重复编程来切换页面，使菜单布置更简单，也给后期增添菜单和页面带来方便。

关键词：HMI；人机交互；页面切换；菜单设置

HMI又称人机交互界面，是系统和用户之间进行交互和信息交换的媒介，一般由菜单、控制按钮和页面组成，页面上包含文字、图片或者文本框等信息。一般来说，HMI页面切换的制作方法有两种：一种是静态切换，即一个按键指向一个页面。此方法常用在简易的HMI控制上，这种切换方式不能使同一个按键指向不同的页面，且后期增加页面较为繁琐、易出错；另一种是动态切换，是通过程序控制页面的切换。这种方法常用在复杂的HMI页面控制上。很多动态切换虽然也是通过程序控制的，但可扩展性差，如果增加了新的页面，需编写新的程序进行链接控制。

当开发一套复杂的HMI页面系统时，可能会制作不少于十个页面甚至多达几十、上百个页面。通过编写程序，使如此多的页面一一对应如此多的按键，编写的程序可能会比较繁琐。针对以上问题，本文设计了一种菜单设置及页面切换的控制方案。此控制方案具有控制简单、扩展方便且操作流畅的特点。编程人员在HMI程序设计过程中不需要重复的编写页面切换程序，且方便以后进行页面的扩展。

1 HMI界面布局

界面设置由一级、二级、…、N级依次控制组成的菜单层级组成。一级菜单使用一组按钮（主按钮）进行选择，二级、…、N级菜单试用另外同一组按钮（子按钮）进行选择。菜单作为各按钮的选项列表，按钮在不同的层级状态下依次设置指向相应的页面。如图1所示为按钮布局，主按钮设置为一级菜单，子按钮设置为二级及下级菜单。

图1 按钮布置

2 菜单、按钮、页面

2.1 定义各级菜单按钮的属性

各级菜单赋予对应组按钮以不同的属性。其中，按钮的属性为当前按钮上显示的菜单选项的编号。

以下对各级菜单选项进行编号：设任一级菜单中的一菜单选项编号为p，则其下一级菜单的按钮属性依次改变为 10p、10p+1、10p+2、…、10p+q，其中 p、q为大于0的整数。

一级、二级、…、N级的菜单层级的菜单编号依次按10n进行递增编号，n≥1，n递增且取整数。如图2所示为菜单编号的树形图。

2.2 定义页面的属性

图2 菜单选项编号的树形图

页面的属性为对应菜单选项打开的页面的编号；任一级菜单编号为p对应相同编号为p的页面、编号为10p的下一级页面或保持当前显示的页面。

2.3 菜单选择、页面切换

通过菜单上的具有相应属性的按钮进行逐级选择，界面将显示相应的页面。

3 页面切换规则设计

3.1 指向页面规则

对当前选择的页面进行控制操作。任一级菜单编号p首先对应相同编号为p的页面；若无相同编号为p的页面，对应编号为10p的下一级页面；若既无相同编号为p的页面，也无编号为10p的下一级页面，则保持当前显示的页面。

3.2 按钮高亮规则

当前打开的页面编号为p，对应编号为p的按钮高亮显示；若无对应编号为p的按钮，不触发高亮。当1≤p＜10时，编号为p的按钮高亮；当10m≤p＜10m+1时，编号为p/10m取整的一层菜单对应的按钮高亮，其中m≥1，取整数。

4 页面切换程序设计

当把页面切换的程序按照要求编写完成后，程序就可以固定不变，后期不需要被大量修改或者不需要被修改。下面是一段在B&R触摸屏上使用ST语言开发的一段菜单控制程序：

5 后期的页面增添

二级、…、N级菜单共用另一组按钮（子按钮），按钮上设有变化的文字，按钮上的变化文字分别对应二级、…、N级菜单中任一菜单层级，即不同的菜单层级具有不同的按钮文字，按钮和文字分离设计，便于区分、辨别和操作。

通过对整个界面设置菜单层级、按钮和页面，对菜单按钮设置单独的图层；然后，通过分别定义每级菜单对应按钮的属性和页面的属性，实现对按钮菜单选项的编号和页面的编号。按钮属性的分配方式形成了一个树形规律的分布，可方便以后的编排和定位寻找，且预留了空间，便于后续的页面及菜单扩展。页面的属性以与之相对应的菜单编号进行编号。根据页面的设计需要，随时可以省去不需要的页面，或增添页面。页面与菜单按钮可对应显示，也可跳级显示，切换简单、有效，指向性明确。

页面使用两个图层，设置两组按钮。其中，一级菜单使用一组按钮（即主按钮），二级、…、N级菜单共用另一组按钮（即子按钮）。在应用中，根据实现菜单层级的不同，子按钮的属性跟随页面的属性变化，实际按钮图形未变化，只是属性变了。页面的增添具有任意性，通过程序控制实现简单扩充，节约了设计与调试的时间，提高了工作效率。

如果有新的页面制作出来，确定与之对应的一个按钮，保证按钮属性与页面命名顺序一致即可。如表1菜单安排及按钮名称，给每一个菜单制定一个菜单名称，且设定了指向的页面属性。按钮的中英文名称全部包含在这个表格里，当HMI需要被切换成英文时，可实现一键切换，且可以便捷地进行修改。

6 总结

这种按钮和页面的属性命名、菜单层级的分配规则以及页面的智能切换都具有实用性强的特点。

这种HMI页面切换的控制方法结构清晰，当设计很多页面时，页面与页面间没有太多链接关系，整个HMI的开发过程不会变得凌乱；利于后期升级开发，当后期增删页面时，对原设计页面包括链接关系不干涉；可简单地制作导航页面；菜单结构易于改变，对整个HMI结构重新编排时，仅对编号更改即可；有利于多语言制作；没有瓶颈，不管开发多少页面、多少菜单，都令开发变得一样简单；易于更改按钮风格，如果需要更改按钮的风格（颜色、布局、字体），只需对页面的这些按钮进行更改。

表1 菜单安排及按钮名称

Index English chinese 1 Position 位置2 Program 程序3 System 系统4 Set 设置5 Graph 模拟40 Keyword 口令41 Rcpuser 配方42 Kidney 个性化43 Language 语言44 Repair 维护45 Debug 调试46 Modework 工作模式

参考文献：

[1]盖树松，王家龙.HMI在自动化生产线控制系统中的应用[J].现代技术陶瓷，2003，（3）：45-46.

[2]王东鹏.Internet应用系统的菜单设计[J].计算机时代，2001，（1）：33-34.

[3]刘 瑞.触摸屏技术及其性能分析[J].装备制造技术，2010，（3）：69-70.

[4]杭久成，何卫平.浅析数控机床触摸屏人机交互界面设计[J].机械制造，2008，（3）：23-26.

[5]李 磊，黄梓瑜，李 刚.Simulink PLC Coder在贝加莱运动控制系统中的应用[J].仪表技术，2011，（6）：59-61.

A control method of menu settings and page switching on HMI

WANG Liang,BIAN Zhengqi,XU Chaozhong
（Jiangsu Yangli CNC Machine Tool Co.,Ltd.,Yangzhou 225009,Jiangsu China）

Abstract：HMI is also called Human Machine Interface,which consists of the menu,control button and the page.When more than ten pages or up to hundreds of pages have been made,so many buttons which match so many pages have been required by very complex programming.By use of the control method of switching pages in the text,no competitive program has been needed to be edited.It makes setting of the menu more simple and convenient to add menu and pages in the future.

Keywords：HMI;Human machine interface;Page switching;Interface;Set menu

中图分类号：TP311

文献标识码：B

DOI：10.16316/j.issn.1672-0121.2017.03.018

文章编号：1672-0121（2017）03-0064-04

收稿日期：2016-12-20；

修订日期：2017-02-14

基金项目：2015年扬州市科技成果转化资助项目（YZ2015128）

作者简介：王 亮（1980-），男，电气工程师，从事数控钣金加工设备研究设计。E-mail：[e-mail]