一種嵌入式圖形用戶界面系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)*

潘寧喦，張 萌 ，王 超

(東南大學(xué)國家專用集成電路系統(tǒng)工程技術(shù)研究中心，南京210096)

嵌入式圖形用戶界面［1］(GUI，Graphic User Interface)系統(tǒng)作為嵌入式系統(tǒng)中的一大關(guān)鍵技術(shù)，為用戶提供設(shè)備的控制接口，其性能的好壞，界面的美觀程度，影響著用戶對產(chǎn)品的購買意愿和使用感受。

當(dāng)前嵌入式系統(tǒng)中GUI 的實(shí)現(xiàn)方式主要有兩種:一是采用現(xiàn)有的GUI 庫;第二種是開發(fā)商基于嵌入式操作系統(tǒng)設(shè)計(jì)特有的GUI 系統(tǒng)。采用第1種方式一般要對通用GUI 庫進(jìn)行剪裁和個(gè)性化定制，也往往要支出額外的成本來獲得軟件授權(quán)。相對而言，第2 種方法實(shí)現(xiàn)的GUI 占用資源較小、容易滿足嵌入式系統(tǒng)的實(shí)時(shí)性和個(gè)性化需求。

本文采用第2 種方式，在嵌入式Linux［2］下使用C 語言實(shí)現(xiàn)了一個(gè)界面美觀、輕量級、占用資源少、執(zhí)行效率高的圖形用戶界面系統(tǒng)SKY－GUI。本文的結(jié)構(gòu)如下:第1 部分介紹SKY－GUI 的基本結(jié)構(gòu);第2部分給出具體的模塊設(shè)計(jì);第3 部分給出其實(shí)驗(yàn)和測試結(jié)果;最后總結(jié)。

1 SKY－GUI 基本結(jié)構(gòu)

SKY－GUI 系統(tǒng)的功能主要有以下四點(diǎn):

(1)接收各種輸入設(shè)備的輸入。

(2)建立消息循環(huán)［3］，將設(shè)備的輸入翻譯為抽象的事件。

(3)建立窗口和控件對象系統(tǒng)，組織好各個(gè)抽象模塊的關(guān)系，處理各種GUI 事件。

(4)將GUI 對象通過具體形狀顯示在屏幕上，通過動(dòng)畫將系統(tǒng)的狀態(tài)變化呈現(xiàn)給用戶。

基于這樣的設(shè)計(jì)目標(biāo)，SKY－GUI 結(jié)構(gòu)如圖1 所示。

圖1 SKY－GUI 的整體架構(gòu)

它主要由輸入抽象層、顯示抽象層、事件系統(tǒng)和窗口系統(tǒng)四大部分組成。輸入抽象層管理所有的輸入設(shè)備，將用戶的操作轉(zhuǎn)化成消息送入事件系統(tǒng)。顯示抽象層操作顯示設(shè)備，提供給窗口系統(tǒng)繪畫、貼圖、顯示字體接口。事件系統(tǒng)為窗口系統(tǒng)提供消息獲取、存儲(chǔ)和處理的機(jī)制。窗口系統(tǒng)是SKY－GUI 的核心，定義了各種控件和窗口，描述它們之間的邏輯關(guān)系和消息循環(huán)關(guān)系。下面將分別對這四大組成部分的設(shè)計(jì)進(jìn)行介紹。

2 SKY－GUI 模塊設(shè)計(jì)

2.1 輸入抽象層

輸入抽象層為各種輸入設(shè)備對事件系統(tǒng)的輸入接口，它是一個(gè)單獨(dú)的線程，其流程如圖2 所示。

圖2 輸入抽象層流程

輸入抽象層首先對GUI 所需的各種輸入設(shè)備初始化，而后等待各個(gè)設(shè)備的輸入。當(dāng)接到設(shè)備輸入，就把用戶對設(shè)備的操作翻譯成消息，送至事件系統(tǒng)最底層消息隊(duì)列(在§2.3.2 詳細(xì)討論)中。

設(shè)備輸入的翻譯過程根據(jù)具體的輸入設(shè)備而定。對于鍵盤，只要將其鍵值和該鍵的狀態(tài)封成消息。對于鼠標(biāo)，除了要記錄其按鍵狀態(tài)，還要根據(jù)鼠標(biāo)當(dāng)前的位置和屏幕的大小將輸入的位移分量轉(zhuǎn)化成鼠標(biāo)的新位置封入消息。

2.2 顯示抽象層

顯示抽象層的作用是為窗口系統(tǒng)提供顯示接口函數(shù)，包括基本圖形接口(畫點(diǎn)、畫線、填充矩形、區(qū)域拷貝、Alpha 混合等)、貼圖接口和字體接口三大功能，其結(jié)構(gòu)如圖3 所示。

圖3 顯示抽象層的結(jié)構(gòu)

顯示抽象層在嵌入式Linux 下的基礎(chǔ)設(shè)備為幀緩沖［4］，對其按坐標(biāo)寫入或讀出顏色值即可實(shí)現(xiàn)基本的圖形接口的功能。

簡單的貼圖功能用基本圖形接口加bmp 格式的文件(圖片不經(jīng)過壓縮，其顏色分量按坐標(biāo)順序存儲(chǔ))就可以實(shí)現(xiàn)。為了讓界面更加美觀，SKY－GUI移植了開源的jpeg 庫和png 庫來解壓相應(yīng)格式的壓縮圖片文件，實(shí)現(xiàn)了對這兩種圖片格式的支持。

對字體的支持當(dāng)然必不可少。點(diǎn)陣字體把字體的位圖按12×12、16×16 等格式存入二進(jìn)制文件，可以比較容易地實(shí)現(xiàn)字體接口，但字體不能隨意放大縮小，且放大后字體有明顯的鋸齒。矢量字體用數(shù)學(xué)方程加字形上的關(guān)鍵點(diǎn)來描述字體，可以進(jìn)行無級縮放，為界面的繪制帶來極大的靈活性。SKYGUI 移植了開源的Freetype 庫［5］，用其尋址矢量字體文件并生成字體位圖，實(shí)現(xiàn)了對矢量字體的支持。

2.3 事件系統(tǒng)

事件系統(tǒng)為SKY－GUI 的其他三大部分提供消息發(fā)送、存儲(chǔ)、獲取和處理的功能。其核心為消息、消息隊(duì)列和消息處理函數(shù)。

2.3.1 消息定義

SKY－GUI 的消息定義為:

typedef struct __MSG {

HWND hWnd; //窗口指針

int event; //事件編號(hào)

void* wParam; //事件附加參數(shù)1

void* lParam; //事件附加參數(shù)2

}MSG;

hWnd 為指向窗口的指針，表明此消息需要發(fā)給哪個(gè)窗口。event 為事件編號(hào)，用不同的整數(shù)代表不同的事件。wParam 和lParam 為事件的附加參數(shù)，它們的含義根據(jù)事件類型的不同而定，例如，在鼠標(biāo)消息中這兩個(gè)參數(shù)就代表光標(biāo)在屏幕上的坐標(biāo)位置。

2.3.2 消息隊(duì)列

消息隊(duì)列是事件系統(tǒng)中的消息的暫存處，它由一個(gè)環(huán)形先入先出結(jié)構(gòu)的消息數(shù)組和一個(gè)消息鏈表組成。消息數(shù)組的空間是固定的，一旦被寫滿，后來的消息只好被丟棄;而消息鏈表則可以動(dòng)態(tài)擴(kuò)充大小。在SKY－GUI 中，消息數(shù)組主要用來存放底層輸入設(shè)備的事件(如鼠標(biāo)、鍵盤、時(shí)鐘等等)，而消息鏈表主要用來存放優(yōu)先級更高且不可丟棄的上層事件(窗口事件和顯示事件)。

2.3.3 消息操作接口

SKY－GUI 定義了三類消息操作接口:消息發(fā)送函數(shù)、消息獲取函數(shù)和事件處理函數(shù)。

消息發(fā)送函數(shù)為輸入抽象層和窗口系統(tǒng)提供消息發(fā)送接口，包括Post_Msg 函數(shù)和Send_Msg 函數(shù)，其作用都是向消息隊(duì)列發(fā)送消息，不同之處在于Post_Msg 發(fā)送的消息存入消息隊(duì)列的數(shù)組之中，而Send_Msg 發(fā)送的消息則存入鏈表之中。

消息獲取函數(shù)為Get_Msg 函數(shù)，它為窗口提供取得消息的接口。擁有獨(dú)立線程的窗口(§2.4 會(huì)描述其結(jié)構(gòu))調(diào)用它從消息隊(duì)列中取得一個(gè)消息，其中存在鏈表中的消息更為重要，優(yōu)先取出。

事件處理函數(shù)是窗口處理消息事件的函數(shù)接口，在SKY－GUI 中，擁有獨(dú)立線程的窗口調(diào)用Dispatch_Msg 函數(shù)來實(shí)現(xiàn)對自己消息處理函數(shù)的調(diào)用。

2.3.4 消息處理函數(shù)

Dispatch_Msg 只是事件處理的調(diào)用接口，窗口收到消息后所采取的具體措施是由消息處理函數(shù)決定的，其定義為:

int WndProc (HWND hwnd，int event，void *wParam，void* lParam);

每一個(gè)窗口都有一個(gè)函數(shù)指針指向自己的消息處理函數(shù)，其功能根據(jù)不同的窗口有所不同，但總體結(jié)構(gòu)是一樣的，如圖4 所示。

圖4 消息處理函數(shù)的結(jié)構(gòu)

其本質(zhì)上是一個(gè)消息處理的分類列表。當(dāng)窗口調(diào)用消息處理函數(shù)時(shí)，其根據(jù)消息類型的不同分別調(diào)用底層輸入消息、控件消息或顯示消息的處理函數(shù)，而后再根據(jù)具體的消息事件調(diào)用相應(yīng)的處理函數(shù)，實(shí)現(xiàn)對各種事件的響應(yīng)。

2.4 窗口系統(tǒng)

窗口系統(tǒng)為SKY－GUI 系統(tǒng)的核心，它維護(hù)了一個(gè)完整的窗口列表，定義了窗口系統(tǒng)和事件系統(tǒng)之間的關(guān)系，并制定了窗口之間的消息傳遞機(jī)制。

2.4.1 窗口的定義

SKY－GUI 中，窗口既包含桌面、對話框這種狹義的窗口，也包含窗口控件(如按鈕、下拉菜單、編輯框等等)這樣的廣義窗口，其定義為:

typedef struct __WINDOW {

STR32 caption; //窗口的名稱

RECT rect; //窗口的大小、位置

int style; //窗口的類型

MsgQueue* pMsgQ; //附屬于窗口的消息隊(duì)列

struct __WINDOW* pFocus; //活動(dòng)窗口指針

struct __WINDOW* pParent; //父窗口指針

struct __WINDOW* pChldHead;//子窗口列表

struct __WINDOW* pNext; //兄弟窗口或控件指針

struct __WINDOW* pCtrlHead; //控件列表

WNDPROC WndProc; //消息處理函數(shù)指針

void* data1; //窗口私有數(shù)據(jù)

void* data2; //窗口私有數(shù)據(jù)

void* data3; //窗口私有數(shù)據(jù)

int msg1; //窗口狀態(tài)變化消息

}WINDOW;

caption 為窗口的名稱;rect 為保存窗口位置和大小的矩形;style 為窗口的類型;pMsgQ 為窗口的消息隊(duì)列的指針;pFocus 指向當(dāng)前窗口的活動(dòng)子窗口或控件;pParent 指向當(dāng)前窗口的父窗口;pNext 指向當(dāng)前窗口的兄弟窗口;pChldHead 用來保存當(dāng)前窗口的子窗口列表;pCtrlHead 保存當(dāng)前窗口的控件列表。WndProc 指向當(dāng)前窗口的消息處理函數(shù);data1、data2、data3 為窗口的私有數(shù)據(jù)，msg1 為窗口狀態(tài)變化時(shí)需要發(fā)出的控件消息，它們的意義根據(jù)窗口的類型而定。

從窗口的定義可以看出，本文要實(shí)現(xiàn)的是一種樹形的窗口關(guān)系，整個(gè)系統(tǒng)可以擁有一個(gè)或多個(gè)主窗口，每個(gè)主窗口擁有自己的控件和子窗口，而子窗口又可以擁有各自的子窗口和控件，依此類推。

2.4.2 窗口與消息隊(duì)列的關(guān)系

窗口定義中含有指向消息隊(duì)列的指針，但并不是所有的窗口都有自己的消息隊(duì)列。主窗口(如桌面)需要隨時(shí)呈現(xiàn)在用戶的面前，可以擁有自己的消息隊(duì)列;其他的子窗口、控件則沒有必要擁有自己的消息隊(duì)列。這兩類窗口用不同的方式使用事件系統(tǒng)。

擁有消息隊(duì)列的主窗口必須擁有自己獨(dú)立的線程，其消息發(fā)送和處理的流程如圖5 所示。

圖5 擁有消息隊(duì)列的窗口的消息發(fā)送和處理流程

當(dāng)其他窗口或輸入抽象層需要操作主窗口時(shí)，就調(diào)用事件系統(tǒng)中的Post_Msg 或Send_Msg 函數(shù)向該窗口的消息隊(duì)列發(fā)送一個(gè)消息。而主窗口得知有消息輸入，就調(diào)用事件系統(tǒng)中的Get_Msg 函數(shù)取出消息，并使用Dispatch_Msg 調(diào)用自己的消息處理函數(shù)，找到相應(yīng)的事件處理方法處理事務(wù)。這種消息傳遞的特點(diǎn)是消息的發(fā)送和處理分別在不同的窗口線程中完成，一般用于兩個(gè)主窗口之間或者輸入抽象層和主窗口之間的消息通信。

沒有消息隊(duì)列的子窗口或控件處理消息的流程如圖6 所示。

圖6 沒有消息隊(duì)列的窗口的消息處理流程

主窗口調(diào)用事件系統(tǒng)中的Post_Msg 或Send_Msg 函數(shù)向子窗口或控件發(fā)送消息，由于該窗口沒有自己的消息隊(duì)列，事件系統(tǒng)不會(huì)將該消息保存，而是直接調(diào)用該窗口的消息處理函數(shù)找到具體的事件處理方式完成這次窗口操作。這種消息傳遞方式中，發(fā)送消息和處理消息都在主窗口的線程中完成，向一個(gè)窗口發(fā)送消息相當(dāng)于要求該窗口立刻對事件進(jìn)行處理。

SKY－GUI 只設(shè)置了一個(gè)主窗口，即桌面。其他所有的窗口或?qū)υ捒蚨甲鳛樽烂娴淖哟翱诙嬖?。這樣系統(tǒng)中只有一個(gè)窗口線程和一個(gè)消息隊(duì)列，第一種消息處理方式只存在于輸入抽象層和桌面之間，而窗口之間的消息處理都采用第二種方式，這樣系統(tǒng)的線程開銷和消息循環(huán)開銷會(huì)大大減少，從而提高其運(yùn)行效率。

2.4.3 窗口之間的消息傳遞

窗口之間的消息傳遞根據(jù)消息類型的不同有兩種不同方式。

主窗口從消息隊(duì)列中取得的消息在SKY－GUI中稱為底層消息。這類消息是由主窗口處理，還是交給子窗口或是控件處理，是根據(jù)窗口定義中的pFocus 變量而定的。當(dāng)一個(gè)窗口的pFocus 不為空時(shí)，表示該窗口上方有子窗口被用戶使用，消息應(yīng)該交給它指向的子窗口處理，而這個(gè)子窗口也檢查自己的pFocus 變量，依此類推;只有當(dāng)一個(gè)窗口的pFocus 為空，表示該窗口位于屏幕的最上方，得到的底層消息由窗口自身處理(如圖7 左邊流程)。

而當(dāng)控件的狀態(tài)變化產(chǎn)生控件消息時(shí)，其消息處理的過程正好跟上面的流程相反。控件產(chǎn)生的消息首先由自己處理，有必要時(shí)再送給pParent 指針指向的父窗口處理，而后還有必要的話再送給父窗口的父窗口處理，最后也可以由主窗口送入消息隊(duì)列(如圖7 右邊流程)。

圖7 從消息隊(duì)列讀出的消息處理流程(左)和控件產(chǎn)生的消息處理流程(右)

pFocus 變量和pParent 變量加上這樣樹形的窗口系統(tǒng)實(shí)質(zhì)上是實(shí)現(xiàn)了很多GUI 系統(tǒng)中的窗口的Z序［6］(窗口的上下順序)功能。該功能是建立在子窗口顯示在其父窗口之上，且控件顯示在其所屬窗口之上的思想上的。由于底層消息一般代表用戶對輸入設(shè)備的操作，所以應(yīng)該送給位于屏幕最上方的用戶正在使用的窗口處理，而控件消息一般代表著GUI 界面自上而下的圖形和數(shù)據(jù)變化過程，所以應(yīng)該從上到下逐層處理。

3 實(shí)驗(yàn)和測試

SKY－GUI 現(xiàn)已嵌入已有的視頻監(jiān)控系統(tǒng)項(xiàng)目中予以使用，它有下拉菜單、輸入框、密碼框、按鈕、軟鍵盤等十幾種控件，提供視頻監(jiān)控的操控界面和配置界面。其中的一個(gè)典型的界面如圖8 所示。

圖8 SKY－GUI 在視頻監(jiān)控系統(tǒng)中的典型界面

為了測試其的性能，本文利用SKY－GUI 和開源的Qt 界面庫［7］分別為視頻監(jiān)控系統(tǒng)［8］制作了一套用戶界面，其參數(shù)對比如表1 所示。

表1 SKY－GUI 與Qt 在視頻監(jiān)控系統(tǒng)中的性能比較

很顯然，Qt 在嵌入式監(jiān)控系統(tǒng)中占用資源過多，導(dǎo)致其運(yùn)行速度緩慢并影響到系統(tǒng)的正常編解碼。而SKY－GUI 加上其所需的開源圖片和字體庫大小也不超過1 M，運(yùn)行時(shí)只占用4 M 左右的內(nèi)存，這在典型的嵌入式Linux 系統(tǒng)中完全可以接受，也不會(huì)影響到監(jiān)控系統(tǒng)本身的性能?？梢钥闯?，Qt 要運(yùn)用在該監(jiān)控系統(tǒng)中還需進(jìn)行更深層次的剪裁和性能優(yōu)化，而SKY－GUI 則可滿足其對界面的功能和性能需求。

4 總結(jié)

本文描述了一種嵌入式Linux 平臺(tái)下GUI 的設(shè)計(jì)方案。實(shí)驗(yàn)證明此設(shè)計(jì)方案可行，可以滿足一般嵌入式平臺(tái)上的圖形界面要求。

［1］ 賀亞龍，張昱，金心宇.基于LINUX 的嵌入式GUI 輸入接口機(jī)制研究［J］.電子器件，2005(2): － .

［2］ 孫紀(jì)坤，張小全.嵌入式Linux 系統(tǒng)開發(fā)技術(shù)詳解—基于ARM［M］.北京:人民郵電出版社，2006:1－7.

［3］ 蔡學(xué)鏞.揭開消息循環(huán)的神秘面紗［J］. 程序員，2005(2):－ .

［4］ 趙霞.基于Framebuffer 的嵌入式GUI 系統(tǒng)實(shí)現(xiàn)［J］.微計(jì)算機(jī)信息，2007(35): － .

［5］ 范劍英，李鵬，陳妍.基于FreeType 的嵌入式媒體廣告終端中矢量字體的實(shí)現(xiàn)［J］.哈爾濱理工大學(xué)學(xué)報(bào)，2010(1): － .

［6］ 魏永明.MiniGUI 體系結(jié)構(gòu)之二——多窗口管理和控件及控件類［J/OL］. http://www. ibm. com/developerworks/cn/linux/embed/minigui/minigui－5/index.html.2001－01－01.

［7］ 唐浩，代少升.Qt/Embedded 在S3C2440 平臺(tái)上的移植與開發(fā)［J］.電視技術(shù)，2010(10): － .

［8］ 西剎子.安防天下—智能網(wǎng)絡(luò)視頻監(jiān)控技術(shù)詳解與實(shí)踐［M］.北京:清華大學(xué)出版社，2010:1－10.