閱讀775 返回首頁    go 阿裏雲 go 技術社區[雲棲]

2KB內存單片機上實現彩屏GUI控件庫

一. 綜述

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

這些界麵庫都是在底層畫點畫線的驅動程序上實現的，基於我的XMOVE動作感應係統。基本具有硬件無關性。支持彩屏320*240的分辨率，由於考慮不同分辨率的開發過分複雜（想想看你需要計算每個點布局在哪個位置，這對安卓等係統都是大問題），因此我並沒有太過完善的考慮過其他分辨率。

我已經寫過一篇關於菜單切換和任務實現的文章，本文將介紹我在低內存嵌入式係統上實現的界麵GUI庫。當年開發這套界麵花費了大量的時間，不過搭載這些界麵庫和係統的硬件數量不超過3台，真是應了那句話：封閉的道路是難以求得長遠的發展的。不過，嵌入式的環境下，定製化和特別化也非常正常。玩麼，有什麼不可以？！

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

它有如下特點：

  • 豐富的控件元素，應對絕大多數場景

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

  • 動態界麵（簡單滑動和漸隱效果）

  • 對黑白和彩屏係統都可提供支持

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

下麵的視頻演示了動態的效果：

XMOVE手持終端演示視頻

二. 基本結構

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

通過控件組合,可以實現相當複雜的界麵顯示,如下圖所示:

三. 基本函數實現

考慮到底層驅動並不具有普遍性，我沒有給出底層驅動的接口實現。

下麵的函數給出了一部分GUI基本功能庫的功能函數。



    

  1. /* 
    2. 

  2. 函數：BoxGUI(unsigned char *title)  
    3. 

  3. 功能：在LCD上產生覆蓋屏幕的桌麵 
    4. 

  4. 參數：無 
    5. 

  5. */ 
    6. 

  6. void BoxGUI(unsigned char *title)    //圖形化界麵窗口函數 
    7. 

  7.  
    8. 

  8.  
    9. 

  9. /* 
    10. 

  10. 函數：TaskBoxGUI_P(u16 x1,u16 y1,u16 x2,u16 y2,u8 *title) 
    11. 

  11. 功能：在LCD上產生可變大小的任務底框 
    12. 

  12. 參數：（x1,y1）左上角坐標，(X2,Y2)右下角坐標,title為窗口標題 
    13. 

  13. */ 
    14. 

  14. void TaskBoxGUI_P(u16 x1,u16 y1,u16 x2,u16 y2,u8 *title,u8 MoveEN)    //圖形化界麵窗口函數 
    15. 

  15.  
    16. 

  16.  
    17. 

  17. /* 
    18. 

  18. 函數：ShowMountGUI(u16 x,u16 y,float Mount,u8 Range,u16 Color,u8 Font) 
    19. 

  19. 功能：在LCD上顯示可變位置的浮點值 
    20. 

  20. 參數：（x,y)數字左上角坐標值，mount要顯示的浮點數，range對該數顯示的長度，從左開始 
    21. 

  21. Color顯示顏色，Font字體類型，參見LCD使用說明 
    22. 

  22. */ 
    23. 

  23.  
    24. 

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

  25.  
    26. 

  26. /* 
    27. 

  27. 函數：void TaskBoxGUI(unsigned char *title)   
    28. 

  28. 功能：在LCD上顯示固定大小和位置的任務底框 
    29. 

  29. 參數：tilte:顯示的標題 
    30. 

  30. 返回值：無 
    31. 

  31. */ 
    32. 

  32. void TaskBoxGUI(unsigned char *title)   
    33. 

  33.  
    34. 

  34. /* 
    35. 

  35. 函數：unsigned char myListGUI(u8 x,u8 y,u8 ** list, u8 mount) 
    36. 

  36. 功能：在LCD上顯示固定大小，可變位置的列表型菜單界麵 
    37. 

  37. 參數：（x,y）要顯示坐標，**list存儲列表的指針數組，mount，要顯示的列表數量， 
    38. 

  38. 注意不能超過數組大小 
    39. 

  39. 返回值：0：表示用戶強行退出，1-mount：返回當前用戶的選擇項（注意：從1開始） 
    40. 

  40. */ 
    41. 

  41. unsigned char myListGUI(u8 x,u8 y,u8 ** list,u8 *title, u8 MaxMount,u8 LRMaxMount,u8 UDMaxMount,u8 OneLRLength,u8 OneUDLength) 
    42. 




三. 實際效果展示



1. 對話框功能：





複製代碼



/*

函數：unsigned char MessageGui(unsigned char *title,unsigned char *message,unsigned char Type)

功能：在LCD上顯示固定大小的是非型選擇界麵

參數：*title要顯示的標題，message：要顯示的信息，Type:顯示風格 0：僅有確定項，用於提示，1：有是否兩個選項，2：不經確認的提示項

返回值：1:用戶選擇是，0，用戶選擇否，若Type==0或2，返回值為1

*/

unsigned char MessageGui(unsigned char *title,unsigned char *message,unsigned char Type)



複製代碼













2. 列表控件



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





複製代碼



/*

函數：unsigned char ListGUI(unsigned char** list,unsigned char *title,unsigned char mount)

功能：在LCD上顯示固定大小和固定位置（在LCD中央）的列表型菜單界麵

參數：參見myListGUI()的函數聲明

返回值：參見myListGUI()的函數聲明

*/

unsigned char ListGUI(unsigned char** list,unsigned char *title,unsigned char mount)



複製代碼









3. 動態曲線控件



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





/*

函數：void CurveDraw(u16 x,u16 y,u16 Wide,u16 Long,u16 unit,u16 Color,u8 *title,float mount,u16 flag)

功能：LCD顯示曲線控件的圖形函數

參數：(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. 虛擬全鍵盤控件



我的係統僅僅提供了6個實體按鍵，為了解決複雜鍵盤輸入的問題，使用了虛擬全鍵盤控件。可以通過旋轉改變界麵中紅框的位置~當紅框移到虛擬按鍵上時,點選確定即可上屏.





/*

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

功能：虛擬全鍵盤的輸入子函數

參數：(x,y)控件左上角坐標，KeyX,KeyY表示當前在數字鍵盤上的X,Y坐標位置，範圍分別為0-10,0-4，Key為返回的選擇項，具體參見FullKeyBoardData[]數組聲明

返回值：0:用戶跳出或選擇特殊功能鍵，1：用戶選擇了普通的字符，其用法參見具體代碼

*/



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









5. 圖表控件



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





/*

函數：u8 HistogramGUI(u8** List,u16* Num,u8 num,u8* title)

功能：顯示柱狀圖控件

參數：List,存儲不同享標題的數組，Num存儲不同項的數值的數組，num要顯示的項的數量，title控件標題

返回值：0：兩數字不同，1：數據相同，

*/

u8 HistogramGUI(u8** List,u16* Num,u8 num,u8* title)









6. 滑動條控件



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





/*

函數：u8 SliderGUI(u16 x,u16 y,u16 Length,u8* title,u16 RangeLow,u16 RangeHigh,u8 step,u16* Data)

功能：滑動模式的數值選擇控件

參數：(x,y)控件左上角坐標，length，顯示的控件長度（從左到右）,RangeLow:數值最低可選值，RangeHigh:數值最高可選值，step：數據選擇步進，data:存儲數據的指針

返回值：0:控件錯誤或用戶取消選擇，1：用戶成功使用控件，數據存在data中

*/

u8 SliderGUI(u16 x,u16 y,u16 Length,u8* title,u16 RangeLow,u16 RangeHigh,u8 step,u16* Data)









7. 時間表顯示控件





/*

函數：void clock_GUI(u16 x,u16 y,u16 r,u8 *rdata,u8 TotalFreshEN)

功能：LCD顯示時間的時鍾控件

參數：(x,y)要顯示的控件左上角坐標，rdata表示存儲時間的全局變量指針，r表示圓麵半徑，注意不要超過LCD允許範圍

返回值：無

*/

void clock_GUI(u16 x,u16 y,u16 r,u8 *rdata,u8 TotalFreshEN)









8. 長整型數字輸入控件



9. 主菜單顯示控件



     係統目前支持多種菜單樣式,下麵的圖給出了其中兩種:





/*

函數：void DrawIconAndTitle(u16 x,u16 y,u8 Index, u8 PictSize,u8 Type,u8 TitleOrPict)

功能：主菜單界麵的子函數，用於產生單項

參數：(x,y)要顯示的控件左上角坐標，Index表示在子菜單列表中的具體位置，PictSize為要顯示的圖片大小，TYPE為反白選項0不反白，1反白,TitleOrPict控製來寫字或畫圖，這樣可以更快

返回值：無

*/

void DrawIconAndTitle(u16 x,u16 y,u8 Index, u8 PictSize,u8 Type,u8 TitleOrPict)









　和以下菜單樣式：







其他控件由於已經在其他相關文章中出現,因此省略.



四.總結



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


最後更新：2017-04-03 19:06:48
  上一篇：go 51單片機程序參考大全
  下一篇：go 黑客 vs 工程師