王 亮，卞正其，徐朝忠

（江蘇揚(yáng)力數(shù)控機(jī)床有限公司，江蘇 揚(yáng)州 225009）

一種HMI的菜單設(shè)置及頁(yè)面切換控制方法

王 亮，卞正其，徐朝忠

（江蘇揚(yáng)力數(shù)控機(jī)床有限公司，江蘇 揚(yáng)州 225009）

HMI又稱人機(jī)交互界面，由菜單、控制按鈕和頁(yè)面組成。當(dāng)設(shè)計(jì)制作多達(dá)幾十、上百個(gè)頁(yè)面時(shí)，通過(guò)編程使如此多的頁(yè)面一一對(duì)應(yīng)眾多按鍵往往十分繁瑣。本文介紹一種頁(yè)面切換控制方法，不需重復(fù)編程來(lái)切換頁(yè)面，使菜單布置更簡(jiǎn)單，也給后期增添菜單和頁(yè)面帶來(lái)方便。

HMI；人機(jī)交互；頁(yè)面切換；菜單設(shè)置

HMI又稱人機(jī)交互界面，是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介，一般由菜單、控制按鈕和頁(yè)面組成，頁(yè)面上包含文字、圖片或者文本框等信息。一般來(lái)說(shuō)，HMI頁(yè)面切換的制作方法有兩種：一種是靜態(tài)切換，即一個(gè)按鍵指向一個(gè)頁(yè)面。此方法常用在簡(jiǎn)易的HMI控制上，這種切換方式不能使同一個(gè)按鍵指向不同的頁(yè)面，且后期增加頁(yè)面較為繁瑣、易出錯(cuò)；另一種是動(dòng)態(tài)切換，是通過(guò)程序控制頁(yè)面的切換。這種方法常用在復(fù)雜的HMI頁(yè)面控制上。很多動(dòng)態(tài)切換雖然也是通過(guò)程序控制的，但可擴(kuò)展性差，如果增加了新的頁(yè)面，需編寫(xiě)新的程序進(jìn)行鏈接控制。

當(dāng)開(kāi)發(fā)一套復(fù)雜的HMI頁(yè)面系統(tǒng)時(shí)，可能會(huì)制作不少于十個(gè)頁(yè)面甚至多達(dá)幾十、上百個(gè)頁(yè)面。通過(guò)編寫(xiě)程序，使如此多的頁(yè)面一一對(duì)應(yīng)如此多的按鍵，編寫(xiě)的程序可能會(huì)比較繁瑣。針對(duì)以上問(wèn)題，本文設(shè)計(jì)了一種菜單設(shè)置及頁(yè)面切換的控制方案。此控制方案具有控制簡(jiǎn)單、擴(kuò)展方便且操作流暢的特點(diǎn)。編程人員在HMI程序設(shè)計(jì)過(guò)程中不需要重復(fù)的編寫(xiě)頁(yè)面切換程序，且方便以后進(jìn)行頁(yè)面的擴(kuò)展。

1 HMI界面布局

界面設(shè)置由一級(jí)、二級(jí)、…、N級(jí)依次控制組成的菜單層級(jí)組成。一級(jí)菜單使用一組按鈕（主按鈕）進(jìn)行選擇，二級(jí)、…、N級(jí)菜單試用另外同一組按鈕（子按鈕）進(jìn)行選擇。菜單作為各按鈕的選項(xiàng)列表，按鈕在不同的層級(jí)狀態(tài)下依次設(shè)置指向相應(yīng)的頁(yè)面。如圖1所示為按鈕布局，主按鈕設(shè)置為一級(jí)菜單，子按鈕設(shè)置為二級(jí)及下級(jí)菜單。

圖1 按鈕布置

2 菜單、按鈕、頁(yè)面

2.1 定義各級(jí)菜單按鈕的屬性

各級(jí)菜單賦予對(duì)應(yīng)組按鈕以不同的屬性。其中，按鈕的屬性為當(dāng)前按鈕上顯示的菜單選項(xiàng)的編號(hào)。

以下對(duì)各級(jí)菜單選項(xiàng)進(jìn)行編號(hào)：設(shè)任一級(jí)菜單中的一菜單選項(xiàng)編號(hào)為p，則其下一級(jí)菜單的按鈕屬性依次改變?yōu)?10p、10p+1、10p+2、…、10p+q，其中 p、q為大于0的整數(shù)。

一級(jí)、二級(jí)、…、N級(jí)的菜單層級(jí)的菜單編號(hào)依次按10n進(jìn)行遞增編號(hào)，n≥1，n遞增且取整數(shù)。如圖2所示為菜單編號(hào)的樹(shù)形圖。

2.2 定義頁(yè)面的屬性

圖2 菜單選項(xiàng)編號(hào)的樹(shù)形圖

頁(yè)面的屬性為對(duì)應(yīng)菜單選項(xiàng)打開(kāi)的頁(yè)面的編號(hào)；任一級(jí)菜單編號(hào)為p對(duì)應(yīng)相同編號(hào)為p的頁(yè)面、編號(hào)為10p的下一級(jí)頁(yè)面或保持當(dāng)前顯示的頁(yè)面。

2.3 菜單選擇、頁(yè)面切換

通過(guò)菜單上的具有相應(yīng)屬性的按鈕進(jìn)行逐級(jí)選擇，界面將顯示相應(yīng)的頁(yè)面。

3 頁(yè)面切換規(guī)則設(shè)計(jì)

3.1 指向頁(yè)面規(guī)則

對(duì)當(dāng)前選擇的頁(yè)面進(jìn)行控制操作。任一級(jí)菜單編號(hào)p首先對(duì)應(yīng)相同編號(hào)為p的頁(yè)面；若無(wú)相同編號(hào)為p的頁(yè)面，對(duì)應(yīng)編號(hào)為10p的下一級(jí)頁(yè)面；若既無(wú)相同編號(hào)為p的頁(yè)面，也無(wú)編號(hào)為10p的下一級(jí)頁(yè)面，則保持當(dāng)前顯示的頁(yè)面。

3.2 按鈕高亮規(guī)則

當(dāng)前打開(kāi)的頁(yè)面編號(hào)為p，對(duì)應(yīng)編號(hào)為p的按鈕高亮顯示；若無(wú)對(duì)應(yīng)編號(hào)為p的按鈕，不觸發(fā)高亮。當(dāng)1≤p＜10時(shí)，編號(hào)為p的按鈕高亮；當(dāng)10m≤p＜10m+1時(shí)，編號(hào)為p/10m取整的一層菜單對(duì)應(yīng)的按鈕高亮，其中m≥1，取整數(shù)。

4 頁(yè)面切換程序設(shè)計(jì)

當(dāng)把頁(yè)面切換的程序按照要求編寫(xiě)完成后，程序就可以固定不變，后期不需要被大量修改或者不需要被修改。下面是一段在B&R觸摸屏上使用ST語(yǔ)言開(kāi)發(fā)的一段菜單控制程序：

5 后期的頁(yè)面增添

二級(jí)、…、N級(jí)菜單共用另一組按鈕（子按鈕），按鈕上設(shè)有變化的文字，按鈕上的變化文字分別對(duì)應(yīng)二級(jí)、…、N級(jí)菜單中任一菜單層級(jí)，即不同的菜單層級(jí)具有不同的按鈕文字，按鈕和文字分離設(shè)計(jì)，便于區(qū)分、辨別和操作。

通過(guò)對(duì)整個(gè)界面設(shè)置菜單層級(jí)、按鈕和頁(yè)面，對(duì)菜單按鈕設(shè)置單獨(dú)的圖層；然后，通過(guò)分別定義每級(jí)菜單對(duì)應(yīng)按鈕的屬性和頁(yè)面的屬性，實(shí)現(xiàn)對(duì)按鈕菜單選項(xiàng)的編號(hào)和頁(yè)面的編號(hào)。按鈕屬性的分配方式形成了一個(gè)樹(shù)形規(guī)律的分布，可方便以后的編排和定位尋找，且預(yù)留了空間，便于后續(xù)的頁(yè)面及菜單擴(kuò)展。頁(yè)面的屬性以與之相對(duì)應(yīng)的菜單編號(hào)進(jìn)行編號(hào)。根據(jù)頁(yè)面的設(shè)計(jì)需要，隨時(shí)可以省去不需要的頁(yè)面，或增添頁(yè)面。頁(yè)面與菜單按鈕可對(duì)應(yīng)顯示，也可跳級(jí)顯示，切換簡(jiǎn)單、有效，指向性明確。

頁(yè)面使用兩個(gè)圖層，設(shè)置兩組按鈕。其中，一級(jí)菜單使用一組按鈕（即主按鈕），二級(jí)、…、N級(jí)菜單共用另一組按鈕（即子按鈕）。在應(yīng)用中，根據(jù)實(shí)現(xiàn)菜單層級(jí)的不同，子按鈕的屬性跟隨頁(yè)面的屬性變化，實(shí)際按鈕圖形未變化，只是屬性變了。頁(yè)面的增添具有任意性，通過(guò)程序控制實(shí)現(xiàn)簡(jiǎn)單擴(kuò)充，節(jié)約了設(shè)計(jì)與調(diào)試的時(shí)間，提高了工作效率。

如果有新的頁(yè)面制作出來(lái)，確定與之對(duì)應(yīng)的一個(gè)按鈕，保證按鈕屬性與頁(yè)面命名順序一致即可。如表1菜單安排及按鈕名稱，給每一個(gè)菜單制定一個(gè)菜單名稱，且設(shè)定了指向的頁(yè)面屬性。按鈕的中英文名稱全部包含在這個(gè)表格里，當(dāng)HMI需要被切換成英文時(shí)，可實(shí)現(xiàn)一鍵切換，且可以便捷地進(jìn)行修改。

6 總結(jié)

這種按鈕和頁(yè)面的屬性命名、菜單層級(jí)的分配規(guī)則以及頁(yè)面的智能切換都具有實(shí)用性強(qiáng)的特點(diǎn)。

這種HMI頁(yè)面切換的控制方法結(jié)構(gòu)清晰，當(dāng)設(shè)計(jì)很多頁(yè)面時(shí)，頁(yè)面與頁(yè)面間沒(méi)有太多鏈接關(guān)系，整個(gè)HMI的開(kāi)發(fā)過(guò)程不會(huì)變得凌亂；利于后期升級(jí)開(kāi)發(fā)，當(dāng)后期增刪頁(yè)面時(shí)，對(duì)原設(shè)計(jì)頁(yè)面包括鏈接關(guān)系不干涉；可簡(jiǎn)單地制作導(dǎo)航頁(yè)面；菜單結(jié)構(gòu)易于改變，對(duì)整個(gè)HMI結(jié)構(gòu)重新編排時(shí)，僅對(duì)編號(hào)更改即可；有利于多語(yǔ)言制作；沒(méi)有瓶頸，不管開(kāi)發(fā)多少頁(yè)面、多少菜單，都令開(kāi)發(fā)變得一樣簡(jiǎn)單；易于更改按鈕風(fēng)格，如果需要更改按鈕的風(fēng)格（顏色、布局、字體），只需對(duì)頁(yè)面的這些按鈕進(jìn)行更改。

表1 菜單安排及按鈕名稱

[1]蓋樹(shù)松，王家龍.HMI在自動(dòng)化生產(chǎn)線控制系統(tǒng)中的應(yīng)用[J].現(xiàn)代技術(shù)陶瓷，2003，（3）：45-46.

[2]王東鵬.Internet應(yīng)用系統(tǒng)的菜單設(shè)計(jì)[J].計(jì)算機(jī)時(shí)代，2001，（1）：33-34.

[3]劉 瑞.觸摸屏技術(shù)及其性能分析[J].裝備制造技術(shù)，2010，（3）：69-70.

[4]杭久成，何衛(wèi)平.淺析數(shù)控機(jī)床觸摸屏人機(jī)交互界面設(shè)計(jì)[J].機(jī)械制造，2008，（3）：23-26.

[5]李 磊，黃梓瑜，李 剛.Simulink PLC Coder在貝加萊運(yùn)動(dòng)控制系統(tǒng)中的應(yīng)用[J].儀表技術(shù)，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）

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.

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

TP311

B

10.16316/j.issn.1672-0121.2017.03.018

1672-0121（2017）03-0064-04

2016-12-20；

2017-02-14

2015年揚(yáng)州市科技成果轉(zhuǎn)化資助項(xiàng)目（YZ2015128）

王 亮（1980-），男，電氣工程師，從事數(shù)控鈑金加工設(shè)備研究設(shè)計(jì)。E-mail：110888088@qq.com