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

王 亮，卞正其，徐朝忠

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

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

王 亮，卞正其，徐朝忠

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

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

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

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

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

1 HMI界面布局

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

圖1 按鈕布置

2 菜單、按鈕、頁面

2.1 定義各級菜單按鈕的屬性

各級菜單賦予對應組按鈕以不同的屬性。其中，按鈕的屬性為當前按鈕上顯示的菜單選項的編號。

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

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

2.2 定義頁面的屬性

圖2 菜單選項編號的樹形圖

頁面的屬性為對應菜單選項打開的頁面的編號；任一級菜單編號為p對應相同編號為p的頁面、編號為10p的下一級頁面或保持當前顯示的頁面。

2.3 菜單選擇、頁面切換

通過菜單上的具有相應屬性的按鈕進行逐級選擇，界面將顯示相應的頁面。

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

3.1 指向頁面規(guī)則

對當前選擇的頁面進行控制操作。任一級菜單編號p首先對應相同編號為p的頁面；若無相同編號為p的頁面，對應編號為10p的下一級頁面；若既無相同編號為p的頁面，也無編號為10p的下一級頁面，則保持當前顯示的頁面。

3.2 按鈕高亮規(guī)則

當前打開的頁面編號為p，對應編號為p的按鈕高亮顯示；若無對應編號為p的按鈕，不觸發(fā)高亮。當1≤p＜10時，編號為p的按鈕高亮；當10m≤p＜10m+1時，編號為p/10m取整的一層菜單對應的按鈕高亮，其中m≥1，取整數(shù)。

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

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

5 后期的頁面增添

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

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

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

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

6 總結(jié)

這種按鈕和頁面的屬性命名、菜單層級的分配規(guī)則以及頁面的智能切換都具有實用性強的特點。

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

表1 菜單安排及按鈕名稱

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

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

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

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

[5]李 磊，黃梓瑜，李 剛.Simulink PLC Coder在貝加萊運動控制系統(tǒ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年揚州市科技成果轉(zhuǎn)化資助項目（YZ2015128）

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