熊 杰，劉新德，馮仁劍

（北京航空航天大學(xué) 儀器科學(xué)與光電工程學(xué)院，北京100191）

0 引 言

圖形用戶界面 （graphical user interface，GUI）的引入為嵌入式設(shè)備提供了圖形化的監(jiān)控和控制界面，提升了嵌入式系統(tǒng)的整體功能并降低了復(fù)雜性［1］。針對嵌入式系統(tǒng)，現(xiàn)有的GUI開發(fā)主要有自下而上逐步開發(fā)和使用嵌入式GUI系統(tǒng)兩種方式［2］。自下而上的GUI開發(fā)方式易于實現(xiàn)，但沒有將GUI作為一個軟件層從應(yīng)用程序中剝離，導(dǎo)致開發(fā)效率不高，代碼復(fù)用性差。嵌入式GUI系統(tǒng)將顯示邏輯和數(shù)據(jù)處理邏輯劃分開，使得圖形界面開發(fā)相對獨立，且避免了代碼重復(fù)，便于實現(xiàn)應(yīng)用程序開發(fā)。

目前，國內(nèi)外針對嵌入式應(yīng)用研究開發(fā)了一些GUI系統(tǒng)。Microwindows是Century Software公司開發(fā)的將GUI引入到小型設(shè)備平臺的項目［3］。Microwindows的圖形引擎開發(fā)比較完善，采用標(biāo)準(zhǔn)客戶/服務(wù)器結(jié)構(gòu)，具有一定靈活性。但該結(jié)構(gòu)占用更多系統(tǒng)資源，降低了系統(tǒng)效率。Trolltech公司在QT的基礎(chǔ)上開發(fā)實現(xiàn)的QT/Embedded［4］，使用C＋＋開發(fā)，功能完善。但其代碼所占用空間較大，且依賴于Linux操作系統(tǒng)，移植性差。MiniGUI是一種為嵌入式系統(tǒng)提供圖形用戶界面支持的中間件技術(shù)，早期由魏永明先生主持開發(fā)［5］。MiniGUI的窗口系統(tǒng)和應(yīng)用開發(fā)接口完善，但基于Linux開發(fā)，難以移植到非POSIX標(biāo)準(zhǔn)的目標(biāo)平臺，且過多注重于窗口模型的接口抽象，開發(fā)過于繁瑣。

為解決工業(yè)控制設(shè)備中的圖形顯示問題，有必要針對上述嵌入式GUI系統(tǒng)存在的平臺依賴性和輕型性等方面的不足，設(shè)計并實現(xiàn)一種輕量級嵌入式圖形用戶界面LIGUI系統(tǒng)。LIGUI采用雙向鏈表結(jié)構(gòu)組織窗口，避免復(fù)雜的窗口剪切和操作；利用輸入輸出抽象層屏蔽具體硬件平臺的不一致，實現(xiàn)系統(tǒng)的移植；提供應(yīng)用編程接口和配置選項，易裁剪和配置；核心層采用微內(nèi)核的設(shè)計思想，具有輕量級的特點。

1 LIGUI體系結(jié)構(gòu)設(shè)計

LIGUI系統(tǒng)采用分層體系結(jié)構(gòu)，每層負(fù)責(zé)內(nèi)部的具體實現(xiàn)，底層通過接口為上層提供服務(wù)，實現(xiàn)將層次內(nèi)部的修改隔離，不影響上層調(diào)用底層完成相應(yīng)功能。

如圖1所示，LIGUI總體上分為3層，分別為硬件抽象層，GUI核心層和應(yīng)用接口層。

圖1 LIGUI系統(tǒng)體系結(jié)構(gòu)

其中，硬件抽象層為上層模塊提供一致接口，解決移植問題；GUI核心層完成圖形圖像繪制，窗口的組織和消息管理；應(yīng)用接口層為用戶提供應(yīng)用編程接口和配置選項，可以實現(xiàn)系統(tǒng)擴展。

1.1 硬件抽象層

由于嵌入式應(yīng)用硬件平臺的多樣性，為實現(xiàn)LIGUI系統(tǒng)在不同底層設(shè)備之間的移植，抽象了輸入輸出設(shè)備的功能，并且提供一致的接口。針對不同的輸入輸出設(shè)備編寫硬件驅(qū)動程序，在此基礎(chǔ)上將輸入輸出抽象層獨立出來，封裝底層系統(tǒng)和硬件設(shè)備的功能函數(shù)，使得上層的界面繪制和輸入處理在訪問不同硬件設(shè)備時，無需考慮系統(tǒng)和設(shè)備差異帶來的影響。硬件抽象層包括輸入抽象層和輸出抽象層。

1.1.1 輸入抽象層

輸入抽象層將輸入設(shè)備的功能抽象為統(tǒng)一的輸入接口［6］。任何獨立按鍵、矩陣鍵盤、虛擬鍵盤的按下動作都可以抽象出鍵值和敲擊次數(shù)；對于鼠標(biāo)移動和觸摸屏的點擊輸入，可以提取坐標(biāo)值和按壓狀態(tài)信息。

1.1.2 輸出抽象層

輸出抽象層的主要功能是為圖形圖像的繪制輸出提供顯示設(shè)備接口，上層圖形程序的編寫只需調(diào)用接口數(shù)據(jù)結(jié)構(gòu)提供的函數(shù)，而不用考慮針對不同底層顯示設(shè)備的具體實現(xiàn)。

顯示輸出最終都要對應(yīng)到單個像素點的操作，所以在數(shù)據(jù)結(jié)構(gòu)中定義屏幕像素點的信息，抽象出SetPixel和GetPixel接口。顯示設(shè)備接口用結(jié)構(gòu)體LCDAPI來表示。

typedef struct｛

void （＊InitLcd）（）；

void （＊SetPixel）（Pixel pixel，int x，int y）；

void （＊GetPixel）（Pixel＊pPixel，int x，int y）；

int（＊GetXSize）（）；

int（＊GetYSize）（）；

U8（＊GetBPP）（）；

void （＊InitPalette）（U8bpp）；

｝LCDAPI；

提供讀取顯示設(shè)備的屬性信息接口，包括屏幕尺寸GetXSize和GetYSize，每個像素點的位數(shù)GetBPP，以及初始化調(diào)色板InitPalette。

1.2 應(yīng)用接口層

應(yīng)用接口層負(fù)責(zé)給用戶提供系統(tǒng)的應(yīng)用編程接口，方便系統(tǒng)擴展。用戶程序通過調(diào)用應(yīng)用接口層封裝的接口函數(shù)完成界面設(shè)計以及數(shù)據(jù)邏輯的處理，LIGUI負(fù)責(zé)輸入事件響應(yīng)，消息的接受和分發(fā)，以及顯示的更新。

應(yīng)用編程接口為用戶提供如下對象的操作：

作圖原語集：完成LIGUI的繪圖功能；

窗口類對象：實現(xiàn)對窗口的組織和操作；

控件類對象：完成對控件的管理和使用。

應(yīng)用接口層提供可配置選項，可以實現(xiàn)對LIGUI系統(tǒng)的裁剪和配置，以滿足具體應(yīng)用環(huán)境的需求。

2 LIGUI系統(tǒng)內(nèi)核設(shè)計與實現(xiàn)

核心層實現(xiàn)LIGUI的關(guān)鍵功能，采用模塊化設(shè)計，模塊之間低耦合，內(nèi)部結(jié)構(gòu)的修改不影響其接口，可以有效支持裁剪，滿足系統(tǒng)輕量級的需求［7］。核心層包括圖形圖像模塊、窗口管理模塊和消息系統(tǒng)。

圖形圖像模塊提供圖形、文本和各種圖像的繪制，窗口與消息模塊完成窗口組織和操作，輸入輸出事件消息和窗口消息的分發(fā)。

2.1 圖形圖像模塊

圖形圖像模塊實現(xiàn)圖形圖像和文本的繪制輸出，調(diào)用輸出抽象層提供的顯示設(shè)備接口，在單個像素點繪制的基礎(chǔ)上完成圖形圖像的繪制。向上層以作圖原語集的形式為應(yīng)用提供調(diào)用接口。

2.1.1 基本圖形繪制

向上層LIGUI對象提供基本繪圖原語的圖形服務(wù)，完成基本幾何圖形的繪制和填充，如點、直線、圓、矩形、橢圓、多邊形等。

支持與設(shè)備無關(guān)的圖形操作，所有繪圖函數(shù)都以顯示設(shè)備接口SetPixel為基礎(chǔ)，從繪制一個像素點出發(fā)，而線段是由點連接組成，多邊形的繪制、填充也是由點和線段組合而成的，進(jìn)而完成全部顯示區(qū)域的繪制。

對于圖形圖像繪制而言，直線和圓弧作為描述所有圖形的基礎(chǔ)，其效率直接影響到整個LIGUI系統(tǒng)的顯示效率。采用改進(jìn)的Bresenham算法繪制直線和圓弧，充分利用圖形斜率的幾何特性和點與點之間的相關(guān)性，一次可計算出若干個點，提高了繪制效率［8］。

2.1.2 文本輸出

文本輸出功能向屏幕顯示字符和漢字，完成字符在字符集中的查找和繪制輸出。

為提高顯示效率和節(jié)省資源空間，LIGUI采用點陣字體，單獨用數(shù)組來定義每個字符的點陣，然后將每一個字符的信息用CHAR＿INFO結(jié)構(gòu)體來表示。

typedef struct｛

U8XSize；

U8YSize；

U8BytesPerLine；

const U8＊pData；

｝CHAR＿INFO；

結(jié)構(gòu)體中定義的字符信息包括字符點陣的高和寬，每行的字節(jié)數(shù)，以及字符點陣數(shù)據(jù)指針。

將所有字符信息存入一個數(shù)組中構(gòu)成字符集。由于漢字的機內(nèi)碼不連續(xù)，是區(qū)間分布的，所以將所有漢字分成若干個字符集區(qū)段，各個字符集區(qū)段以鏈表組織起來。如下的FONT＿INFO為字符集區(qū)段的數(shù)據(jù)結(jié)構(gòu)，包括字符集區(qū)段中首末字符的索引FirstChar和LastChar，首個字符信息的指針pCharInfo和指向下一個字符集區(qū)段的指針pNext。

typedef struct｛

U16FirstChar；

U16LastChar；

const CHAR＿INFO＊pCharInfo；

const FONT＿INFO＊pNext；

｝FONT＿INFO；

利用漢字的機內(nèi)碼對字符集鏈表進(jìn)行索引，先找到要顯示字符所在的字符集區(qū)段，返回字符集區(qū)段的指針，再根據(jù)字符相對字符集區(qū)段中第一個字符地址的偏移量，找到要顯示字符的字符信息。

2.1.3 圖像模塊

LIGUI支持顯示BMP格式的圖像文件，BMP文件本身就包含了設(shè)備無關(guān)位圖格式，經(jīng)文件調(diào)用讀入內(nèi)存，再結(jié)合顯示設(shè)備特性轉(zhuǎn)換成設(shè)備相關(guān)位圖［9］。

同時，LIGUI支持其它圖像格式繪制的接口，其文件解碼都使用第三方標(biāo)準(zhǔn)庫來完成，然后將位圖選入到圖形設(shè)備上下文中，以便上層應(yīng)用程序進(jìn)行繪圖操作。

2.2 窗口管理模塊

窗口管理模塊負(fù)責(zé)窗口組織、窗口繪制和窗口操作，是LIGUI系統(tǒng)組織圖形圖像輸出，處理外設(shè)輸入的基礎(chǔ)。

由于嵌入式應(yīng)用的顯示屏一般不大，窗口可以獨占整個屏幕，不必考慮相互剪切的位置關(guān)系。LIGUI系統(tǒng)的窗口組織采用雙向鏈表結(jié)構(gòu)，如圖2所示。

圖2 窗口組織結(jié)構(gòu)

窗口創(chuàng)建時即建立一個節(jié)點，窗口中的控件繼承了窗口的特性，并且加入窗口節(jié)點。節(jié)點與節(jié)點之間組成一個鏈表。當(dāng)刪除窗口時，將窗口從窗口鏈表中移除，并遞歸銷毀其所有子控件。窗口鏈表還能表示窗口之間的覆蓋關(guān)系，鏈表后端的窗口覆蓋前端的窗口，所以對窗口進(jìn)行前置、后置操作即相當(dāng)于在窗口鏈表上向前或向后移動窗口節(jié)點。

LIGUI用WIN＿Obj結(jié)構(gòu)體來描述窗口，這個結(jié)構(gòu)中記錄了窗口對象的基本性質(zhì)和窗口函數(shù)等屬性。

typedef struct｛

int hWin；

int x0，y0，x1，y1；

U8＊title；

WIN＿Obj＊pPre；

WIN＿Obj＊pNext；

int hFocussedChild；

int WidgetNum；

void（＊WinManage）（MSG＿Obj＊pMsg）；

int StatusFlag；

｝WIN＿Obj；

其中，hWin是系統(tǒng)中窗口對象全局唯一的標(biāo)識，即窗口對象的句柄；x0，y0，x1，y1是窗口矩形區(qū)域的坐標(biāo)值，存儲窗口的位置和大??；title指向窗口標(biāo)題字符串；pPre和pNext為指向鏈表中上一個窗口節(jié)點和下一個節(jié)點的指針；hFocussedChild為處于焦點的子控件的句柄，Widget－Num為窗口子控件的數(shù)目；WinManage是窗口過程函數(shù)指針，完成各種消息的響應(yīng)處理；StatusFlag存儲窗口的狀態(tài)信息。

2.3 消息系統(tǒng)

LIGUI系統(tǒng)采用事件驅(qū)動機制。消息系統(tǒng)是事件驅(qū)動的圖形用戶界面的關(guān)鍵，保障整個系統(tǒng)流程有序進(jìn)行，消息由事件產(chǎn)生［10］，LIGUI的事件包括輸入設(shè)備事件，窗口操作事件，以及系統(tǒng)定時、用戶自定義等其它事件。

事件的產(chǎn)生具有隨機性，LIGUI用消息表示各種事件。在外設(shè)驅(qū)動和輸入抽象層提供的硬件接口基礎(chǔ)上，用消息結(jié)構(gòu)封裝實現(xiàn)用戶輸入事件，轉(zhuǎn)化為輸入消息；系統(tǒng)運行過程中引起的窗口狀態(tài)改變，會產(chǎn)生與窗口操作相關(guān)的邏輯消息；同時，用戶可以自定義消息和響應(yīng)處理。

將不同類型的消息用一個消息結(jié)構(gòu)表示，并且定義類型字段來區(qū)分各種消息類型。如下MSG＿Obj為消息對象結(jié)構(gòu)體，用于表示事件消息。

typedef struct｛

int MsgID；

int hWinTag；

int hWinSrc；

int MsgData；

void＊p；

｝MSG＿Obj；

其中，用MsgID作為類型字段來區(qū)分不同的消息類型；hWinTag和hWinSrc分別為接受消息的目標(biāo)窗口句柄和消息源窗口句柄；MsgData用于存儲消息具體數(shù)據(jù)，如果數(shù)據(jù)超過整形范圍可以用數(shù)據(jù)指針p表示。

2.3.1 消息系統(tǒng)結(jié)構(gòu)

消息系統(tǒng)結(jié)構(gòu)如圖3所示，包括消息隊列、消息循環(huán)和窗口過程等。

圖3 消息系統(tǒng)結(jié)構(gòu)

同步消息經(jīng)過消息循環(huán)直接交給窗口過程函數(shù)處理，異步消息進(jìn)入消息隊列等待處理。

消息隊列組織異步消息，負(fù)責(zé)事件壓縮和過濾重復(fù)無用的事件消息。

消息循環(huán)從消息隊列讀取消息，發(fā)送至目標(biāo)窗口，窗口過程函數(shù)將消息結(jié)構(gòu)作為參數(shù)，執(zhí)行相應(yīng)的消息響應(yīng)過程。

2.3.2 消息循環(huán)

消息循環(huán)是消息系統(tǒng)和圖形用戶界面應(yīng)用程序的核心部分，是將從消息隊列輪詢獲得的消息分發(fā)至目標(biāo)窗口的循環(huán)過程［11］。消息循環(huán)流程如圖4所示。

圖4 消息循環(huán)

消息循環(huán)不斷輪詢消息隊列，若隊列為空，則執(zhí)行空消息處理，若不為空且不是退出消息，則調(diào)用消息發(fā)送函數(shù)進(jìn)行分發(fā)和投遞，送達(dá)目的窗口，即調(diào)用指定窗口的窗口過程函數(shù)，并傳遞消息為其參數(shù)。目標(biāo)窗口的窗口過程負(fù)責(zé)解釋所接收的消息，由MsgID確定具體的消息類型，進(jìn)行分類處理。處理結(jié)束后，重新進(jìn)入消息循環(huán)，當(dāng)收到退出消息時，退出消息循環(huán)。

LIGUI系統(tǒng)采用的這種消息機制支持用戶自定義消息，利用自定義的消息傳遞數(shù)據(jù)，并且在窗口過程對自定義消息類型進(jìn)行處理，滿足了嵌入式GUI系統(tǒng)對擴展性的需求。

3 應(yīng)用實例

LIGUI系統(tǒng)現(xiàn)已應(yīng)用在太陽能控制器配套的手持設(shè)備中，用于對太陽能控制器進(jìn)行參數(shù)設(shè)定和管理。手持控制器如圖5所示。

圖5 手持控制器

手持控制器采用基于Cortex－M3內(nèi)核的STM32F103VBT6處理器，外擴Flash存儲器采用SST25VF016B芯片，用于存儲字庫和位圖的點陣文件，其它外設(shè)包括液晶顯示屏、紅外收發(fā)器、矩陣鍵盤、蜂鳴器、LED指示燈和RS232/485通信口。

手持控制器作為太陽能控制器的圖形化顯示和操作控制終端，采用2.6寸TFT彩色液晶，像素點總數(shù)為320×240。其圖形用戶界面的顯示基于LIGUI體系結(jié)構(gòu)實現(xiàn)，采用層次化、模塊化的結(jié)構(gòu)設(shè)計來組織各參數(shù)設(shè)置界面之間的邏輯關(guān)系，界面顯示及切換流暢，使用方便、靈活。其界面結(jié)構(gòu)圖如圖6所示。

圖6 界面結(jié)構(gòu)

實現(xiàn)手持控制器的界面顯示，LIGUI核心部分代碼所占用靜態(tài)存儲空間不足30KB。通過調(diào)用LIGUI系統(tǒng)提供的應(yīng)用編程接口和修改配置選項，編程開發(fā)者只需編寫底層硬件驅(qū)動和進(jìn)行數(shù)據(jù)邏輯處理，開發(fā)周期短，效率高。

4 結(jié)束語

采用分層次和模塊化的結(jié)構(gòu)體系，設(shè)計并實現(xiàn)了一種輕量級嵌入式圖形用戶界面LIGUI系統(tǒng)。系統(tǒng)通過硬件抽象層來隔離不同底層設(shè)備；采用高效的算法進(jìn)行圖形圖像繪制；在應(yīng)用接口層為用戶提供已封裝的應(yīng)用編程接口，提高了開發(fā)編程效率。

將實現(xiàn)的LIGUI系統(tǒng)作為圖形顯示模塊應(yīng)用于手持控制設(shè)備，解決了自底層到頂層的GUI開發(fā)方法導(dǎo)致的開發(fā)效率低、代碼復(fù)用性差的問題。實際應(yīng)用表明，LIGUI系統(tǒng)具有輕型的特點，占用資源少，且功能齊全，能夠支持運行在低端配置的系統(tǒng)。系統(tǒng)配置選項提供窗口、控件等模塊的裁剪，可以實現(xiàn)具體嵌入式環(huán)境下的定制和擴展。

［1］Bjelica M Z，Teslic N，Papp I，et al.A characterization to evaluate graphical user interface frameworks for television receivers［C］.The 9th International Conference on Telecommunication in Modern Satellite，Cable，and Broadcasting Services（TELSIKS），2009：285－288.

［2］Scoditti A，Stuerzlinger W.A new layout method for graphical user interfaces ［C］.The IEEE Toronto International Con－ference on Science and Technology for Humanity.2009：642－647.

［3］Greg Haerr.The Nano－X Window system ［EB/OL］.http：//www.microwindows.org，2010.

［4］Trolltech Inc Qt/Embedded Whitepaper ［EB/OL］.http：//www.trolltech.com/files/pdf/qt－4.6－whitepaper，2009.

［5］Beijing Feynman Software Technology Co，Ltd.MiniGUI technology white paper ［EB/OL］.http：//www.minigui.org/fileadmin/minigui＿org＿downloads/MiniGUITechWhitePaper－2.0－4E.pdf，2007.

［6］Bode S，Riebisch M.Usability－focused architectural design for graphical user interface components ［C］.The International Conference on Computational Intelligence for Modelling Control＆ Automation，2008：1246－1251.

［7］Lamberti F，Sanna A.Extensible GUIs for remote application control on mobile devices ［J］.IEEE Computer Graphics and Applications，2008，28 （4）：50－57.

［8］LOU Jiantao，WANG Xiuhe.Anti－aliasing line drawing algorithm based on symmetry ［J］.Computer Engineering and Applications，2011，47 （1）：173－175 （in Chinese）. ［樓劍濤，王秀和.基于對稱的反走樣直線生成算法 ［J］.計算機工程與應(yīng)用，2011，47 （1）：173－175.］

［9］Luostarinen R，Manner J，M tt J，et al.User－centered design of graphical user interfaces ［C］.Military Communications Conference，2010：50－55.

［10］Yoshida M.A succinct graphical user interface programming model for low－end embedded devices ［C］.The 13th IEEE International Symposium on Consumer Electronics，2009：920－921.

［11］HE Xiang，MENG Xiaohua.Design and implementation of humancomputer interface in embedded intelligent home system ［J］.Computer Engineering and Design，2010，31 （10）：2166－2168 （in Chinese）.［賀翔，孟小華.嵌入式智能家居終端人機界面設(shè)計與實現(xiàn) ［J］.計算機工程與設(shè)計，2010，31 （10）：2166－2168.］