基于二叉樹的多層的液晶菜單界面設(shè)計(jì)

以前用單片機(jī)做用戶交互的菜單的時(shí)候，都比較痛苦，如何寫一個(gè)復(fù)用性高，方便維護(hù)，可擴(kuò)展性高的GUI框架呢？當(dāng)然可以自己動(dòng)手寫一個(gè)，這個(gè)過程充滿了艱辛和挑戰(zhàn)，現(xiàn)在我推薦一個(gè)很棒的框架，直接拿來用就行，也可以借鑒和學(xué)習(xí)其中的思路，一定會(huì)收獲頗豐。

知道有多少人折騰過液晶顯示的菜單，我覺得很多人都應(yīng)該搞過，我還記得以前大學(xué)參加電子設(shè)計(jì)競(jìng)賽獲獎(jiǎng)的作品，我就用到了一個(gè)12864，里面有菜單功能。

以前可能覺得菜單高大上，其實(shí)并不是想象中的復(fù)雜，本文為大家分享一個(gè)用單色屏做的菜單框架。

代碼托管在github：

https://github.com/wujique/stm32f407/tree/sw_arch

公眾號(hào)回復(fù)"菜單"也可獲得源碼.

1、概述

本處所說的菜單是用在128*64這種小屏幕的菜單，例如下面這種，不是彩屏上的GUI。

? 2、菜單框架設(shè)計(jì)

作為一個(gè)底層驅(qū)動(dòng)工程師，驅(qū)動(dòng)寫完了，是要寫硬件測(cè)試程序的。這個(gè)測(cè)試程序，一般給測(cè)試部/硬件工程師用來測(cè)試硬件， 也會(huì)給工廠產(chǎn)線測(cè)試準(zhǔn)成品。

開始的人偷懶，不想一秒就直接上，所有菜單都這樣做，一層套一層

1voidtest_main(void) 2{ 3while(1) 4{ 5get_key(&key); 6switch(key) 7{ 8case1: 9test_key(); 10break; 11case2: 12test_lcd(); 13break; 14.... 15} 16} 17}

當(dāng)菜單越來越多，就開始糾結(jié)了，這樣寫維護(hù)不便，看起來也不美，還浪費(fèi)程序空間。

作為一個(gè)天天看《編程之美》的碼農(nóng)，決定改變現(xiàn)狀。

搜索引擎找了很久，找到了兩個(gè)參考：

《基于二叉樹的多層的液晶菜單界面設(shè)計(jì)》

《基于節(jié)點(diǎn)編號(hào)的通用樹狀菜單設(shè)計(jì)方法與實(shí)現(xiàn).pdf》

按照他們的設(shè)計(jì)方法，鼓搗了一個(gè)版本，能用，挺好，但是也糾結(jié)。因?yàn)樗麄冇昧藰溥@種數(shù)據(jù)結(jié)構(gòu)。對(duì)于程序運(yùn)行來說，非常好，效率高。但是對(duì)于我來說，菜單代碼是一次性的，但是菜單內(nèi)容，卻是會(huì)經(jīng)常改的。讓我用人腦去維護(hù)一個(gè)包含幾十個(gè)上百個(gè)菜單的樹，不容易。

想來想去，這些菜單到底有什么不好？對(duì)于我來說，為什么不好用？得出下面結(jié)論：

管得太寬 菜單，你就管菜單切換就行了，到了最低一層，也就是實(shí)際的測(cè)試功能，就不要管了。菜單切換是類似的，實(shí)際測(cè)試都是不同的。比如在菜單中，按鍵1，是進(jìn)入第一個(gè)菜單。但是在測(cè)試中，按鍵1，功能都不一樣。如果菜單連這個(gè)也要管，相同動(dòng)作功能太多，無法進(jìn)行統(tǒng)一抽象，就很難模塊化。

出發(fā)點(diǎn)不一樣 上面說到的菜單，出發(fā)點(diǎn)都是如何設(shè)計(jì)一個(gè)好的菜單數(shù)據(jù)結(jié)構(gòu)，讓程序快速，高效運(yùn)行。我想要的卻是一個(gè)容易維護(hù)的菜單結(jié)構(gòu)，至于菜單的代碼有多亂多糾結(jié)，沒關(guān)系， 而且，幾百上千個(gè)菜單，就算用輪詢的方法，也不過幾百us吧，沒關(guān)系。

3、改進(jìn)菜單

根據(jù)需求，我重新設(shè)計(jì)了一個(gè)菜單結(jié)構(gòu)體

1/** 2*@brief菜單對(duì)象 3*/ 4typedefstruct_strMenu 5{ 6MenuLell;///<菜單等級(jí) 7????char?cha[MENU_LANG_BUF_SIZE];???///中文 8????char?eng[MENU_LANG_BUF_SIZE];???///英文 9????MenuType?type;??///菜單類型 10????s32?(*fun)(void);??///測(cè)試函數(shù) 11 12}?MENU;

是的，就這么簡(jiǎn)單，每一個(gè)菜單都是這個(gè)結(jié)構(gòu)體 用這個(gè)結(jié)構(gòu)體填充一個(gè)列表，就是我們的菜單了、

1constMENUEMenuListTest[]= 2{ 3MENU_L_0,//菜單等級(jí) 4"測(cè)試程序",//中文 5"test",//英文 6MENU_TYPE_LIST,//菜單類型 7NULL,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 8 9MENU_L_1,//菜單等級(jí) 10"LCD",//中文 11"LCD",//英文 12MENU_TYPE_LIST,//菜單類型 13NULL,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 14MENU_L_2,//菜單等級(jí) 15"VSPIOLED",//中文 16"VSPIOLED",//英文 17MENU_TYPE_FUN,//菜單類型 18test_oled,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 19 20MENU_L_2,//菜單等級(jí) 21"I2COLED",//中文 22"I2COLED",//英文 23MENU_TYPE_FUN,//菜單類型 24test_i2coled,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 25 26 27MENU_L_1,//菜單等級(jí) 28"聲音",//中文 29"sound",//英文 30MENU_TYPE_LIST,//菜單類型 31NULL,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 32MENU_L_2,//菜單等級(jí) 33"蜂鳴器",//中文 34"buzzer",//英文 35MENU_TYPE_FUN,//菜單類型 36test_test,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 37 38MENU_L_2,//菜單等級(jí) 39"DAC音樂",//中文 40"DACmusic",//英文 41MENU_TYPE_FUN,//菜單類型 42test_test,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 43 44MENU_L_2,//菜單等級(jí) 45"收音",//中文 46"FM",//英文 47MENU_TYPE_FUN,//菜單類型 48test_test,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 49 50 51MENU_L_1,//菜單等級(jí) 52"觸摸屏",//中文 53"tp",//英文 54MENU_TYPE_LIST,//菜單類型 55NULL,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 56 57MENU_L_2,//菜單等級(jí) 58"校準(zhǔn)",//中文 59"calibrate",//英文 60MENU_TYPE_FUN,//菜單類型 61test_cal,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 62 63MENU_L_2,//菜單等級(jí) 64"測(cè)試",//中文 65"test",//英文 66MENU_TYPE_FUN,//菜單類型 67test_tp,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 68 69MENU_L_1,//菜單等級(jí) 70"按鍵",//中文 71"KEY",//英文 72MENU_TYPE_FUN,//菜單類型 73test_key,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 74 75/*最后的菜單是結(jié)束菜單，無意義*/ 76MENU_L_0,//菜單等級(jí) 77"END",//中文 78"END",//英文 79MENU_TYPE_NULL,//菜單類型 80NULL,//菜單函數(shù)，功能菜單才會(huì)執(zhí)行，有子菜單的不會(huì)執(zhí)行 81};

這個(gè)菜單列表有什么特點(diǎn)和要求呢？1 需要一個(gè)根節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn) 2 子節(jié)點(diǎn)必須跟父節(jié)點(diǎn)，類似下面結(jié)構(gòu)

1----------------------------------------------- 2根節(jié)點(diǎn) 3第1個(gè)1級(jí)菜單 4第1個(gè)子菜單 5第2個(gè)子菜單 6第3個(gè)子菜單 7第2個(gè)1級(jí)菜單 8第1個(gè)子菜單 9第1個(gè)孫菜單 10第2個(gè)孫菜單 11第2個(gè)子菜單 12第3個(gè)子菜單 13第3個(gè)1級(jí)菜單 14第4個(gè)1級(jí)菜單 15第5個(gè)1級(jí)菜單 16結(jié)束節(jié)點(diǎn) 17------------------------------------------------

第2個(gè)1級(jí)菜單有3個(gè)子菜單，子菜單是2級(jí)菜單，其中第1個(gè)子菜單下面又有2個(gè)孫菜單（3級(jí)菜單）。

維護(hù)菜單，就是維護(hù)這個(gè)列表，添加刪除修改，非常容易。那菜單程序怎么樣呢？管他呢。定義好菜單后，通過下面函數(shù)運(yùn)行菜單，

1emenu_run(WJQTestLcd,(MENU*)&WJQTestList[0],sizeof(WJQTestList)/sizeof(MENU),FONT_SONGTI_1616,2);

-第1個(gè)參數(shù)是在哪個(gè)LCD上顯示菜單， -第2個(gè)是菜單列表， -第3個(gè)是菜單長度， -第4個(gè)四字體， -第5則是行間距

注意：運(yùn)行這個(gè)菜單需要有rtos，因?yàn)椴藛未a是while(1)的，陷進(jìn)去就不出來了。需要有其他線程(TASK)維護(hù)系統(tǒng)，例如按鍵掃描。

4、菜單實(shí)現(xiàn)效果

相關(guān)文件：emenu.c、emenu.h、emenu_test.c

當(dāng)前代碼：

1實(shí)現(xiàn)了雙列菜單，用數(shù)字鍵選擇進(jìn)入下一層。每頁最多顯示8個(gè)菜單（4*4鍵盤用1-8鍵）

2 實(shí)現(xiàn)了單列菜單，通過上下翻查看菜單，確認(rèn)鍵進(jìn)入菜單。3 天頂菜單未實(shí)現(xiàn)，誰有興趣可以加上。

3 基于LCD驅(qū)動(dòng)架構(gòu)，這個(gè)簡(jiǎn)易菜單自適應(yīng)于多種LCD。

效果如下，有需要的盡管拿去，不用謝。

顯示效果

128*64 OLED

128*128 tft lcd

320*240 tft lcd

5、最后說明

以上菜單框架來源屋脊雀工作室，適合初學(xué)者練習(xí)。我看下這個(gè)菜單框架，其實(shí)還有很多改進(jìn)地方。

我當(dāng)初大學(xué)電子設(shè)計(jì)競(jìng)賽用到類似結(jié)構(gòu)體方式，但我那菜單框架用到了二級(jí)指針，可以做到無限極擴(kuò)展，而且可以指向（跳轉(zhuǎn)）任意菜單，方便按鍵進(jìn)入、返回等操作。

本文就分享到這里，感興趣的讀者可以自己寫一個(gè)菜單框架。

原文標(biāo)題：值得學(xué)習(xí)的單片機(jī)菜單框架(附源碼)

文章出處：【微信公眾號(hào)：硬件攻城獅】歡迎添加關(guān)注！文章轉(zhuǎn)載請(qǐng)注明出處。