一. 綜述

嵌入式系統(tǒng)發(fā)展日新月異，安卓和ios已然戰(zhàn)勝了當(dāng)年雄霸天下的塞班，界面是我們特別看重的因素之一。不過(guò)你考慮過(guò)自己做一套系統(tǒng)，寫(xiě)一個(gè)界面庫(kù)么？在單片機(jī)上自制系統(tǒng)，可以很好的鍛煉編程能力和架構(gòu)設(shè)計(jì)能力。

這些界面庫(kù)都是在底層畫(huà)點(diǎn)畫(huà)線的驅(qū)動(dòng)程序上實(shí)現(xiàn)的，基于我的XMOVE動(dòng)作感應(yīng)系統(tǒng)。基本具有硬件無(wú)關(guān)性。支持彩屏320*240的分辨率，由于考慮不同分辨率的開(kāi)發(fā)過(guò)分復(fù)雜（想想看你需要計(jì)算每個(gè)點(diǎn)布局在哪個(gè)位置，這對(duì)安卓等系統(tǒng)都是大問(wèn)題），因此我并沒(méi)有太過(guò)完善的考慮過(guò)其他分辨率。

我已經(jīng)寫(xiě)過(guò)一篇關(guān)于菜單切換和任務(wù)實(shí)現(xiàn)的文章，本文將介紹我在低內(nèi)存嵌入式系統(tǒng)上實(shí)現(xiàn)的界面GUI庫(kù)。當(dāng)年開(kāi)發(fā)這套界面花費(fèi)了大量的時(shí)間，不過(guò)搭載這些界面庫(kù)和系統(tǒng)的硬件數(shù)量不超過(guò)3臺(tái)，真是應(yīng)了那句話(huà)：封閉的道路是難以求得長(zhǎng)遠(yuǎn)的發(fā)展的。不過(guò)，嵌入式的環(huán)境下，定制化和特別化也非常正常。玩么，有什么不可以？！

雖然功能依舊有限,不能像目前主流嵌入式系統(tǒng)的"美觀":如漸變等,但這是2KB,8MHz的單片機(jī)！根本不能實(shí)現(xiàn)快速移動(dòng)，否則會(huì)很卡很卡....各種圖片和特效都是我在大四寒假里花了大量時(shí)間反復(fù)優(yōu)化的，現(xiàn)在看看，當(dāng)年的很多工作，如果不拿出來(lái)，真的要徹底走入歷史的垃圾筐了。小傷感。

它有如下特點(diǎn)：

• 豐富的控件元素，應(yīng)對(duì)絕大多數(shù)場(chǎng)景
• 偽多線程顯示（單片機(jī)是沒(méi)有多線程一說(shuō)的，因此在視覺(jué)上同時(shí)更新不同控件是需要一定底層支持的）
• 動(dòng)態(tài)界面（簡(jiǎn)單滑動(dòng)和漸隱效果）
• 對(duì)黑白和彩屏系統(tǒng)都可提供支持

如果是開(kāi)發(fā)嵌入式界面的同仁，我相信我的文章會(huì)給您以一定的啟發(fā)。

下面的視頻演示了動(dòng)態(tài)的效果：

XMOVE手持終端演示視頻

二. 基本結(jié)構(gòu)

可以用如下的結(jié)構(gòu)圖表示整個(gè)控件庫(kù)：

通過(guò)控件組合,可以實(shí)現(xiàn)相當(dāng)復(fù)雜的界面顯示,如下圖所示:

三. 基本函數(shù)實(shí)現(xiàn)

考慮到底層驅(qū)動(dòng)并不具有普遍性，我沒(méi)有給出底層驅(qū)動(dòng)的接口實(shí)現(xiàn)。

下面的函數(shù)給出了一部分GUI基本功能庫(kù)的功能函數(shù)。

/*  
函數(shù)：BoxGUI(unsigned char *title)   
功能：在LCD上產(chǎn)生覆蓋屏幕的桌面  
參數(shù)：無(wú)  
*/ 
void BoxGUI(unsigned char *title)    //圖形化界面窗口函數(shù)  
 
 
/*  
函數(shù)：TaskBoxGUI_P(u16 x1,u16 y1,u16 x2,u16 y2,u8 *title)  
功能：在LCD上產(chǎn)生可變大小的任務(wù)底框  
參數(shù)：（x1,y1）左上角坐標(biāo)，(X2,Y2)右下角坐標(biāo),title為窗口標(biāo)題  
*/ 
void TaskBoxGUI_P(u16 x1,u16 y1,u16 x2,u16 y2,u8 *title,u8 MoveEN)    //圖形化界面窗口函數(shù)  
 
 
/*  
函數(shù)：ShowMountGUI(u16 x,u16 y,float Mount,u8 Range,u16 Color,u8 Font)  
功能：在LCD上顯示可變位置的浮點(diǎn)值  
參數(shù)：（x,y)數(shù)字左上角坐標(biāo)值，mount要顯示的浮點(diǎn)數(shù)，range對(duì)該數(shù)顯示的長(zhǎng)度，從左開(kāi)始  
Color顯示顏色，F(xiàn)ont字體類(lèi)型，參見(jiàn)LCD使用說(shuō)明  
*/ 
 
void ShowMountGUI(u16 x,u16 y,float Mount,u8 Range,u16 Color,u8 Font)  
 
/*  
函數(shù)：void TaskBoxGUI(unsigned char *title)    
功能：在LCD上顯示固定大小和位置的任務(wù)底框  
參數(shù)：tilte:顯示的標(biāo)題  
返回值：無(wú)  
*/ 
void TaskBoxGUI(unsigned char *title)     
 
/*  
函數(shù)：unsigned char myListGUI(u8 x,u8 y,u8 ** list, u8 mount)  
功能：在LCD上顯示固定大小，可變位置的列表型菜單界面  
參數(shù)：（x,y）要顯示坐標(biāo)，**list存儲(chǔ)列表的指針數(shù)組，mount，要顯示的列表數(shù)量，  
注意不能超過(guò)數(shù)組大小  
返回值：0：表示用戶(hù)強(qiáng)行退出，1-mount：返回當(dāng)前用戶(hù)的選擇項(xiàng)（注意：從1開(kāi)始）  
*/ 
unsigned char myListGUI(u8 x,u8 y,u8 ** list,u8 *title, u8 MaxMount,u8 LRMaxMount,u8 UDMaxMount,u8 OneLRLength,u8 OneUDLength) 

三. 實(shí)際效果展示

1. 對(duì)話(huà)框功能：

/*  
函數(shù)：unsigned char MessageGui(unsigned char *title,unsigned char *message,unsigned char Type)  
功能：在LCD上顯示固定大小的是非型選擇界面  
參數(shù)：*title要顯示的標(biāo)題，message：要顯示的信息，Type:顯示風(fēng)格 0：僅有確定項(xiàng)，用于提示，1：有是否兩個(gè)選項(xiàng)，2：不經(jīng)確認(rèn)的提示項(xiàng)  
返回值：1:用戶(hù)選擇是，0，用戶(hù)選擇否，若Type==0或2，返回值為1  
*/ 
unsigned char MessageGui(unsigned char *title,unsigned char *message,unsigned char Type) 

2. 列表控件

用戶(hù)可通過(guò)旋轉(zhuǎn)該終端選取不同項(xiàng)（需陀螺儀支持）

/*  
函數(shù)：unsigned char ListGUI(unsigned char** list,unsigned char *title,unsigned char mount)  
功能：在LCD上顯示固定大小和固定位置（在LCD中央）的列表型菜單界面  
參數(shù)：參見(jiàn)myListGUI()的函數(shù)聲明  
返回值：參見(jiàn)myListGUI()的函數(shù)聲明  
*/ 
unsigned char ListGUI(unsigned char** list,unsigned char *title,unsigned char mount) 

3. 動(dòng)態(tài)曲線控件

該曲線使用了我自己開(kāi)發(fā)的偽多線程技術(shù),多條曲線可以動(dòng)態(tài)顯示.本圖顯示了三軸加速度曲線實(shí)時(shí)顯示

/*  
函數(shù)：void CurveDraw(u16 x,u16 y,u16 Wide,u16 Long,u16 unit,u16 Color,u8 *title,float mount,u16 flag)  
功能：LCD顯示曲線控件的圖形函數(shù)  
參數(shù)：(x,y)要顯示的控件左上角坐標(biāo)，Wide表示控件寬度（上下計(jì)算，像素），LONG：長(zhǎng)度（左右計(jì)算，像素），Unit：最大可顯示的值，COLOR:要顯示的顏色  
title:顯示的標(biāo)題，float:顯示浮點(diǎn)值，flag:顯示的位置標(biāo)記位，當(dāng)flag==0的時(shí)候，控件全部刷新  
返回值：1:顯示成功 0.顯示失敗  
*/ 
u8 CurveDraw(u16 x,u16 y,u16 Wide,u16 Long,u16 unit,u16 Color,u8 *title,float mount,u16 flag) 

4. 虛擬全鍵盤(pán)控件

我的系統(tǒng)僅僅提供了6個(gè)實(shí)體按鍵，為了解決復(fù)雜鍵盤(pán)輸入的問(wèn)題，使用了虛擬全鍵盤(pán)控件?？梢酝ㄟ^(guò)旋轉(zhuǎn)改變界面中紅框的位置~當(dāng)紅框移到虛擬按鍵上時(shí),點(diǎn)選確定即可上屏.

/*  
函數(shù)：u8 VirtualFullKeyBoardInput(u16 x,u16 y,u8* KeyX,u8* KeyY,u8 *Key)  
功能：虛擬全鍵盤(pán)的輸入子函數(shù)  
參數(shù)：(x,y)控件左上角坐標(biāo)，KeyX,KeyY表示當(dāng)前在數(shù)字鍵盤(pán)上的X,Y坐標(biāo)位置，范圍分別為0-10,0-4，Key為返回的選擇項(xiàng)，具體參見(jiàn)FullKeyBoardData[]數(shù)組聲明  
返回值：0:用戶(hù)跳出或選擇特殊功能鍵，1：用戶(hù)選擇了普通的字符，其用法參見(jiàn)具體代碼  
*/ 
 
u8 VirtualFullKeyBoardInput(u16 x,u16 y,u8* KeyX,u8* KeyY,u8 *Key) 

5. 圖表控件

顯示柱狀圖,隨著菜單項(xiàng)的數(shù)量和大小,動(dòng)態(tài)的修改柱狀圖的位置,以獲得最佳顯示效果.

/*  
函數(shù)：u8 HistogramGUI(u8** List,u16* Num,u8 num,u8* title)  
功能：顯示柱狀圖控件  
參數(shù)：List,存儲(chǔ)不同享標(biāo)題的數(shù)組，Num存儲(chǔ)不同項(xiàng)的數(shù)值的數(shù)組，num要顯示的項(xiàng)的數(shù)量，title控件標(biāo)題  
返回值：0：兩數(shù)字不同，1：數(shù)據(jù)相同，  
*/ 
u8 HistogramGUI(u8** List,u16* Num,u8 num,u8* title) 

6. 滑動(dòng)條控件

可用于用戶(hù)通過(guò)移動(dòng)滑動(dòng)手柄位置修改值.

/*  
函數(shù)：u8 SliderGUI(u16 x,u16 y,u16 Length,u8* title,u16 RangeLow,u16 RangeHigh,u8 step,u16* Data)  
功能：滑動(dòng)模式的數(shù)值選擇控件  
參數(shù)：(x,y)控件左上角坐標(biāo)，length，顯示的控件長(zhǎng)度（從左到右）,RangeLow:數(shù)值最低可選值，RangeHigh:數(shù)值最高可選值，step：數(shù)據(jù)選擇步進(jìn)，data:存儲(chǔ)數(shù)據(jù)的指針  
返回值：0:控件錯(cuò)誤或用戶(hù)取消選擇，1：用戶(hù)成功使用控件，數(shù)據(jù)存在data中  
*/ 
u8 SliderGUI(u16 x,u16 y,u16 Length,u8* title,u16 RangeLow,u16 RangeHigh,u8 step,u16* Data) 

7. 時(shí)間表顯示控件

/*  
函數(shù)：void clock_GUI(u16 x,u16 y,u16 r,u8 *rdata,u8 TotalFreshEN)  
功能：LCD顯示時(shí)間的時(shí)鐘控件  
參數(shù)：(x,y)要顯示的控件左上角坐標(biāo)，rdata表示存儲(chǔ)時(shí)間的全局變量指針，r表示圓面半徑，注意不要超過(guò)LCD允許范圍  
返回值：無(wú)  
*/ 
void clock_GUI(u16 x,u16 y,u16 r,u8 *rdata,u8 TotalFreshEN) 

8. 長(zhǎng)整型數(shù)字輸入控件

9. 主菜單顯示控件

系統(tǒng)目前支持多種菜單樣式,下面的圖給出了其中兩種:

/*  
函數(shù)：void DrawIconAndTitle(u16 x,u16 y,u8 Index, u8 PictSize,u8 Type,u8 TitleOrPict)  
功能：主菜單界面的子函數(shù)，用于產(chǎn)生單項(xiàng)  
參數(shù)：(x,y)要顯示的控件左上角坐標(biāo)，Index表示在子菜單列表中的具體位置，PictSize為要顯示的圖片大小，TYPE為反白選項(xiàng)0不反白，1反白,TitleOrPict控制來(lái)寫(xiě)字或畫(huà)圖，這樣可以更快  
返回值：無(wú)  
*/ 
void DrawIconAndTitle(u16 x,u16 y,u8 Index, u8 PictSize,u8 Type,u8 TitleOrPict) 

和以下菜單樣式：

其他控件由于已經(jīng)在其他相關(guān)文章中出現(xiàn),因此省略.

四.總結(jié)

本文展示的界面控件僅僅是其中很小的一部分.其他還包括了密碼輸入控件,中文輸入法控件等,限于空間所限沒(méi)有一一顯示.這是當(dāng)年熱火加蛋疼的大四,在沒(méi)有代碼提示和簡(jiǎn)陋IDE下一行一行的寫(xiě)出來(lái)的代碼庫(kù).這套界面庫(kù)的代碼量約為3000行.

原文鏈接：http://www.cnblogs.com/buptzym/archive/2012/06/26/2564401.html