2KB內存單片機上實現(xiàn)彩屏GUI控件庫

一. 綜述

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

這些界面庫都是在底層畫點畫線的驅動程序上實現(xiàn)的，基于我的XMOVE動作感應系統(tǒng)?；揪哂杏布o關性。支持彩屏320*240的分辨率，由于考慮不同分辨率的開發(fā)過分復雜（想想看你需要計算每個點布局在哪個位置，這對安卓等系統(tǒng)都是大問題），因此我并沒有太過完善的考慮過其他分辨率。

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

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

它有如下特點：

豐富的控件元素，應對絕大多數(shù)場景

偽多線程顯示（單片機是沒有多線程一說的，因此在視覺上同時更新不同控件是需要一定底層支持的）

動態(tài)界面（簡單滑動和漸隱效果）

對黑白和彩屏系統(tǒng)都可提供支持

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

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

XMOVE手持終端演示視頻

二. 基本結構

可以用如下的結構圖表示整個控件庫：

通過控件組合,可以實現(xiàn)相當復雜的界面顯示,如下圖所示:

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

考慮到底層驅動并不具有普遍性，我沒有給出底層驅動的接口實現(xiàn)。

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

/* 
函數(shù)：BoxGUI(unsigned char *title) 
功能：在LCD上產生覆蓋屏幕的桌面 
參數(shù)：無 
*/ 
void BoxGUI(unsigned char *title) //圖形化界面窗口函數(shù) 


/* 
函數(shù)：TaskBoxGUI_P(u16 x1,u16 y1,u16 x2,u16 y2,u8 *title) 
功能：在LCD上產生可變大小的任務底框 
參數(shù)：（x1,y1）左上角坐標，(X2,Y2)右下角坐標,title為窗口標題 
*/ 
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上顯示可變位置的浮點值 
參數(shù)：（x,y)數(shù)字左上角坐標值，mount要顯示的浮點數(shù)，range對該數(shù)顯示的長度，從左開始 
Color顯示顏色，F(xiàn)ont字體類型，參見LCD使用說明 
*/ 

void ShowMountGUI(u16 x,u16 y,float Mount,u8 Range,u16 Color,u8 Font) 

/* 
函數(shù)：void TaskBoxGUI(unsigned char *title) 
功能：在LCD上顯示固定大小和位置的任務底框 
參數(shù)：tilte:顯示的標題 
返回值：無 
*/ 
void TaskBoxGUI(unsigned char *title) 

/* 
函數(shù)：unsigned char myListGUI(u8 x,u8 y,u8 ** list, u8 mount) 
功能：在LCD上顯示固定大小，可變位置的列表型菜單界面 
參數(shù)：（x,y）要顯示坐標，**list存儲列表的指針數(shù)組，mount，要顯示的列表數(shù)量， 
注意不能超過數(shù)組大小 
返回值：0：表示用戶強行退出，1-mount：返回當前用戶的選擇項（注意：從1開始） 
*/ 
unsigned char myListGUI(u8 x,u8 y,u8 ** list,u8 *title, u8 MaxMount,u8 LRMaxMount,u8 UDMaxMount,u8 OneLRLength,u8 OneUDLength) 
三. 實際效果展示

1. 對話框功能：

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

2. 列表控件

用戶可通過旋轉該終端選取不同項（需陀螺儀支持）

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

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

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

/*
函數(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)要顯示的控件左上角坐標，Wide表示控件寬度（上下計算，像素），LONG：長度（左右計算，像素），Unit：最大可顯示的值，COLOR:要顯示的顏色
title:顯示的標題，float:顯示浮點值，flag:顯示的位置標記位，當flag==0的時候，控件全部刷新
返回值：1:顯示成功 0.顯示失敗
*/
u8 CurveDraw(u16 x,u16 y,u16 Wide,u16 Long,u16 unit,u16 Color,u8 *title,float mount,u16 flag)

4. 虛擬全鍵盤控件

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

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

u8 VirtualFullKeyBoardInput(u16 x,u16 y,u8* KeyX,u8* KeyY,u8 *Key)

5. 圖表控件

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

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

6. 滑動條控件

可用于用戶通過移動滑動手柄位置修改值.

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

7. 時間表顯示控件

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

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

9. 主菜單顯示控件

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

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

和以下菜單樣式：

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

四.總結

本文展示的界面控件僅僅是其中很小的一部分.其他還包括了密碼輸入控件,中文輸入法控件等,限于空間所限沒有一一顯示.這是當年熱火加蛋疼的大四,在沒有代碼提示和簡陋IDE下一行一行的寫出來的代碼庫.這套界面庫的代碼量約為3000行.