黃潔逢，吳先球

（華南師范大學(xué) 物理與電信工程學(xué)院，廣州510006）

黃潔逢（碩士研究生），研究方向?yàn)榍度胧较到y(tǒng)應(yīng)用。

引 言

以STM32為代表的ARM Cortex－M 系列微處理器，具有優(yōu)越的處理性能和豐富的片內(nèi)外設(shè)，被廣泛應(yīng)用于工業(yè)控制、儀器儀表和智能家電等領(lǐng)域。由于該系列處理器主要偏向于控制應(yīng)用，對(duì)圖形顯示方面的支持不是很好，導(dǎo)致其人機(jī)交互體驗(yàn)難以得到提升。在硬件上，過(guò)去常用的做法是采用8080或6800接口驅(qū)動(dòng)分辨率較低的16位彩色液晶屏，在軟件上，一般采用Micrium 公司的μC／GUI系統(tǒng)，但是最終設(shè)計(jì)出來(lái)的人機(jī)界面缺乏美觀性，操作體驗(yàn)較差。

ST 公司推出的STM32F4x9 系列微控制器，內(nèi)存控制器增加了對(duì)SDRAM 的支持，內(nèi)置LCD－TFT 控制器，并 配 備 專 用 DMA 控 制 器 Chrom－Art Accelerator（DMA2D），在很大程度上彌補(bǔ)了STM32 圖形顯示方面的缺陷。為了在STM32上實(shí)現(xiàn)良好的人機(jī)交互體驗(yàn)，需要設(shè)計(jì)一種新的嵌入式GUI 實(shí)現(xiàn)方法，以充分利用Chrom－Art圖形加速器的硬件功能，因此本文提出一種基于智能區(qū)域的嵌入式GUI架構(gòu)，實(shí)驗(yàn)證明其具有較強(qiáng)的可行性。

1 圖形架構(gòu)原理

STM32的Chrom－Art圖形加速器實(shí)際上就是一個(gè)專門用于傳送顯示數(shù)據(jù)的DMA 控制器，其主要功能包括數(shù)據(jù)復(fù)制、格式轉(zhuǎn)換和顏色混合，如圖1 所示。Chrom－Art能將矩形內(nèi)存區(qū)域S1 和矩形內(nèi)存區(qū)域S2進(jìn)行顏色混合，并 將 數(shù) 據(jù) 轉(zhuǎn) 換 成RGB555 格式后寫入矩形內(nèi)存區(qū)域D1。

在實(shí)際應(yīng)用中，利用Chrom－Art可以方便地實(shí)現(xiàn)：①對(duì)位圖進(jìn)行局部截取并顯示到液晶屏的指定位置；②同時(shí)使用多種不同RGB數(shù)據(jù)格式的位圖；③多圖層透明顯示。

圖1 Chrom－Art功能示意圖

本文提出的基于智能區(qū)域的GUI圖形架構(gòu)，能夠充分利用Chrom－Art加速器的功能，在減輕CPU 負(fù)擔(dān)的同時(shí)提高了顯示效率。智能區(qū)域是用于圖形管理的基本單元，包含了區(qū)域的位置、尺寸、屬性字和從屬關(guān)系等信息，通過(guò)這些信息可以快速地對(duì)區(qū)域進(jìn)行查找定位，并做相應(yīng)的顯示輸出及觸摸輸入檢測(cè)等操作。區(qū)域間的顯示關(guān)系及邏輯結(jié)構(gòu)如圖2所示，不同區(qū)域通過(guò)相互嵌套建立父子關(guān)系，隸屬于同一父區(qū)域的子區(qū)域?yàn)椴⑿袇^(qū)域，子區(qū)域繼承了父區(qū)域的顯示范圍、相對(duì)位置、透明度等信息。父區(qū)域與其第一個(gè)子區(qū)域通過(guò)雙向鏈表連接，并行子區(qū)域同樣以雙向鏈表連接，其連接順序由區(qū)域圖層號(hào)決定（圖2右半部分中標(biāo)號(hào)為區(qū)域圖層號(hào)）。

圖2 區(qū)域間的顯示關(guān)系及邏輯結(jié)構(gòu)

2 圖形架構(gòu)設(shè)計(jì)與實(shí)現(xiàn)

整個(gè)架構(gòu)采用面向?qū)ο蟮木幊趟枷耄褂肁NSI C編寫，每種特定功能的智能區(qū)域?qū)?yīng)一個(gè)對(duì)象類型，能夠非常方便地進(jìn)行裁剪與擴(kuò)展。程序分為以下幾個(gè)功能模塊。

2.1 智能區(qū)域管理

區(qū)域?qū)ο笸ㄟ^(guò)結(jié)構(gòu)體進(jìn)行定義，一個(gè)通用區(qū)域的結(jié)構(gòu)體包含以下基本成員，其他功能區(qū)域會(huì)根據(jù)需要增加額外的成員。

typedef struct CArea｛

unsigned int attr； ／／區(qū)域?qū)傩宰?/p>

struct CArea＊prev；／／上一個(gè)區(qū)域指針struct CArea＊next；／／下一個(gè)區(qū)域指針struct CArea＊par；／／父區(qū)域指針

struct CArea＊chd；／／第一個(gè)子區(qū)域指針

Afun fun； ／／繪制區(qū)域的回調(diào)函數(shù)指針int x； ／／區(qū)域相對(duì)橫坐標(biāo)int y； ／／區(qū)域相對(duì)縱坐標(biāo)unsigned shortw； ／／區(qū)域?qū)挾萿nsigned shorth； ／／區(qū)域高度｝CArea；

對(duì)區(qū)域的管理包括以下操作：①區(qū)域創(chuàng)建包括申請(qǐng)內(nèi)存空間、設(shè)置屬性字、注冊(cè)回調(diào)函數(shù)；②區(qū)域嵌套包括設(shè)置父區(qū)域指針、根據(jù)圖層號(hào)添加鏈表節(jié)點(diǎn)；③區(qū)域刪除包括刪除鏈表節(jié)點(diǎn)、清除父區(qū)域指針、釋放內(nèi)存空間。

根據(jù)功能不同，智能區(qū)域分為以下幾種類型，并可根據(jù)需要繼續(xù)擴(kuò)展：

①普通區(qū)域CArea，最常用，占用資源最少；

②按鍵區(qū)域BArea，具有自鎖和互斥功能；

③自由區(qū)域FArea，可透過(guò)區(qū)域窗口顯示更大的虛擬空間；

④頁(yè)面區(qū)域PArea，區(qū)域容器，用于區(qū)域間的切換；

⑤列表區(qū)域LArea，可滾動(dòng)顯示多個(gè)列表成員的區(qū)域；

⑥文本區(qū)域TArea，專門用于文本輸入支持的區(qū)域；

⑦擴(kuò)展區(qū)域EArea，擴(kuò)展出一個(gè)子工作空間。

2.2 區(qū)域的顯示輸出

為了使區(qū)域顯示在正確的圖層上，所有區(qū)域的輸出順序遵循兩個(gè)原則：①先輸出父區(qū)域，后輸出子區(qū)域；②并行區(qū)域按照鏈表連接順序依次輸出。

架構(gòu)通過(guò)定義一個(gè)頂層區(qū)域，作為顯示輸出和觸摸檢測(cè)的入口，某些情況下用戶只需要刷新與操作某一局部區(qū)域，將其設(shè)置為頂層區(qū)域，可以極大地提高處理效率。由于每個(gè)智能區(qū)域都是等價(jià)的操作對(duì)象，可采用迭代方式進(jìn)行處理，使程序更加高效的同時(shí)減少了代碼量。

2.3 觸摸操作檢測(cè)

區(qū)域的輸入檢測(cè)過(guò)程與顯示輸出類似，不同的是兩者對(duì)區(qū)域的查找順序剛好相反：優(yōu)先檢測(cè)子區(qū)域，再檢測(cè)父區(qū)域，并行區(qū)域則按照鏈表連接順序逆向檢測(cè)。

根據(jù)實(shí)際需求設(shè)置以下7種觸摸操作模式：

①短觸發(fā)，第一次檢測(cè)到觸摸屏被按下；

②長(zhǎng)觸發(fā)，按下觸摸屏一定時(shí)間，且位置不改變；

③短按，按下觸摸屏并在短時(shí)間內(nèi)松開，且位置不改變；

④長(zhǎng)按，按下觸摸屏一定時(shí)間后松開，且位置不改變；

⑤拖拽，按下觸摸屏后位置發(fā)生改變；

⑥慣性滾動(dòng)，拖拽模式下松開觸摸屏，且松開時(shí)速度不為零；

⑦位置恢復(fù)，由于拖拽或慣性滾動(dòng)使區(qū)域位置超出限定邊界。

其中慣性滾動(dòng)模式和位置恢復(fù)模式不是必需的，但加入這兩種模式能夠使操作方便，且顯示效果生動(dòng)。

2.4 事件處理

事件采用動(dòng)態(tài)注冊(cè)的方式，每種操作對(duì)應(yīng)一個(gè)事件鏈表，注冊(cè)事件就是根據(jù)操作類型往相應(yīng)的鏈表上掛接事件節(jié)點(diǎn)。當(dāng)某一操作發(fā)生時(shí)，該模塊就會(huì)對(duì)相應(yīng)的事件鏈表進(jìn)行掃描，判斷鏈表上每個(gè)事件的區(qū)域指針是否與當(dāng)前操作區(qū)域相符，若相符，則執(zhí)行事件回調(diào)函數(shù)。

2.5 效果處理

效果處理模塊為用戶提供了自定義動(dòng)態(tài)效果支持，效果對(duì)象的結(jié)構(gòu)體定義如下：

通過(guò)該模塊可以實(shí)現(xiàn)區(qū)域的水平移動(dòng)、垂直移動(dòng)及透明度變化等動(dòng)態(tài)效果（可以同時(shí)建立多個(gè)獨(dú)立效果來(lái)實(shí)現(xiàn)組合效果），具體實(shí)現(xiàn)方式有兩種：①設(shè)定目標(biāo)值dval，程序通過(guò)簡(jiǎn)單的差補(bǔ)計(jì)算自動(dòng)完成；②指定動(dòng)態(tài)數(shù)組array，目標(biāo)參數(shù)將嚴(yán)格按照數(shù)組值變化。

2.6 圖片素材與字符的顯示

圖形架構(gòu)僅負(fù)責(zé)區(qū)域的管理及功能實(shí)現(xiàn)，為了設(shè)計(jì)出美觀的界面，往往需要大量的圖片素材，這時(shí)可以在系統(tǒng)初始化的時(shí)候，動(dòng)態(tài)地將界面素材從外部存儲(chǔ)設(shè)備載入SDRAM，整個(gè)硬件系統(tǒng)工作過(guò)程如圖3所示。系統(tǒng)從U盤或SD 卡載入素材后，圖形架構(gòu)會(huì)根據(jù)區(qū)域的位置及屬性信息調(diào)用相應(yīng)的素材，裁剪出可見(jiàn)區(qū)域，然后交給Chrom－Art加速器進(jìn)行處理并傳送到顯存，最后由LCDTFT 控制器刷新顯示到顯示屏上。

圖3 硬件工作過(guò)程

在字符顯示上加入了對(duì)矢量字體的支持，F(xiàn)reeType2是一款占用空間小、高效、高度可定制的開源字體引擎，經(jīng)過(guò)功能裁剪，可以用來(lái)解析常見(jiàn)的TrueType字體文件，它能夠輸出任意大小、帶256灰度階的字模，把字模數(shù)據(jù)作為區(qū)域的透明通道就可以顯示帶有鋸齒效果的字符。

3 圖形架構(gòu)應(yīng)用

這里使用該圖形架構(gòu)設(shè)計(jì)一個(gè)操作界面來(lái)測(cè)試實(shí)際效果，主控制器采用STM32F429IGT6，工作頻率為180 MHz，外擴(kuò)32 MB SDRAM，外接分辨率為480×272的24位彩色液晶顯示屏，實(shí)現(xiàn)效果如圖4所示。

圖4 界面效果圖

由于采用了帶透明通道的ICO 圖標(biāo)和矢量字體，整個(gè)界面美觀性大大提升，觸摸操作支持單擊圖標(biāo)、下拉通知欄、切換頁(yè)面、滾動(dòng)列表、移動(dòng)窗口等常見(jiàn)操作方式，且屏幕刷新率平均可以達(dá)到25fps（幀率受限于界面復(fù)雜度），動(dòng)態(tài)效果流暢，人機(jī)交互體驗(yàn)良好。界面資源占用情況如表1所列，資源使用量較少，能夠滿足實(shí)際應(yīng)用需求，由此證明本圖形架構(gòu)具有良好的可行性與實(shí)用性。

結(jié) 語(yǔ)

本文設(shè)計(jì)的基于Chrom－Art的GUI圖形架構(gòu)相對(duì)于以往的GUI系統(tǒng)做出了很大改進(jìn)，不僅界面設(shè)計(jì)變得簡(jiǎn)單高效，而且資源占用少、可擴(kuò)展性強(qiáng)。隨著STM32 系列微處理器在很多領(lǐng)域的廣泛應(yīng)用，需要人機(jī)交互的場(chǎng)合都可以使用該架構(gòu)進(jìn)行界面開發(fā)，從而大大簡(jiǎn)化開發(fā)過(guò)程，具有一定的實(shí)際應(yīng)用價(jià)值。

［1］劉軍.例說(shuō)STM32［M］.北京：北京航空航天大學(xué)出版社，2011.

［2］王蘭英.基于STM32 嵌入式系統(tǒng)的μC／GUI移植與實(shí)現(xiàn)［J］.四川理工學(xué)院學(xué)報(bào)：自然科學(xué)版，2012（1）.

［3］肖林京，于鵬杰，于志豪，等.基于STM32和emWin圖形庫(kù)的液晶顯示系統(tǒng)設(shè)計(jì)［J］.電視技術(shù)，2015（1）. 25 22

［4］李建紅，劉丹，徐展.基于μC／GUI庫(kù)的外擴(kuò)中文字庫(kù)研究與實(shí)現(xiàn)［J］.計(jì)算機(jī)工程，2014（2）.

［5］王愛(ài)林，王晨.基于μC／GUI和S1D13513的圖形顯示設(shè)計(jì)［J］.工業(yè)控制計(jì)算機(jī)，2013（6）.

［6］金鋒，武志輝.輕量級(jí)嵌入式Linux圖形驅(qū)動(dòng)程序與圖形用戶接口［J］.北京理工大學(xué)學(xué)報(bào)，2008，28（3）.

［7］黃秀珍，何加銘，邰曉英.基于FreeType 嵌入式矢量字體引擎的研究［J］.寧波大學(xué)學(xué)報(bào)：理工版，2010，23（4）.

［8］宮勇，楊穎，張三元，等.圖形面板布局特征對(duì)人機(jī)交互效率的影響［J］.計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2012，24（9）.

［9］單筱秋.淺議人機(jī)交互界面研發(fā)中的用戶體驗(yàn)設(shè)計(jì)［J］.南京藝術(shù)學(xué)院學(xué)報(bào)：美術(shù)與設(shè)計(jì)版，2013（6）.

［10］何巖.淺析計(jì)算機(jī)圖形技術(shù)及其應(yīng)用系統(tǒng)［J］.消費(fèi)電子，2013（8）.