0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

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

GReq_mcu168 ? 來源:屋脊雀工作室 ? 作者:屋脊雀工作室 ? 2022-07-08 14:27 ? 次閱讀

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

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

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

代碼托管在github:

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

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

1、概述

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

6aebecd6-fe85-11ec-ba43-dac502259ad0.png ? 2、菜單框架設(shè)計

作為一個底層驅(qū)動工程師,驅(qū)動寫完了,是要寫硬件測試程序的。這個測試程序,一般給測試部/硬件工程師用來測試硬件, 也會給工廠產(chǎn)線測試準(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)程序空間。

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

索引擎找了很久,找到了兩個參考:

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

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

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

想來想去,這些菜單到底有什么不好?對于我來說,為什么不好用?得出下面結(jié)論:

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

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

3、改進(jìn)菜單

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


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

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


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

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


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

第2個1級菜單有3個子菜單,子菜單是2級菜單,其中第1個子菜單下面又有2個孫菜單(3級菜單)。

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

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

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

注意:運(yùn)行這個菜單需要有rtos,因為菜單代碼是while(1)的,陷進(jìn)去就不出來了。需要有其他線程(TASK)維護(hù)系統(tǒng),例如按鍵掃描。

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

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

當(dāng)前代碼:

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

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

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

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

顯示效果

128*64 OLED

6afa7d32-fe85-11ec-ba43-dac502259ad0.png

6b03b4b0-fe85-11ec-ba43-dac502259ad0.png

128*128 tft lcd

6b193ec0-fe85-11ec-ba43-dac502259ad0.png

6b2c43ee-fe85-11ec-ba43-dac502259ad0.png

320*240 tft lcd

6b473c1c-fe85-11ec-ba43-dac502259ad0.png

6b5e6f40-fe85-11ec-ba43-dac502259ad0.png

5、最后說明

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

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

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

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

文章出處:【微信公眾號:硬件攻城獅】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

審核編輯:彭靜

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 單片機(jī)
    +關(guān)注

    關(guān)注

    6023

    文章

    44376

    瀏覽量

    628296
  • 硬件
    +關(guān)注

    關(guān)注

    11

    文章

    3112

    瀏覽量

    65841
  • 二叉樹
    +關(guān)注

    關(guān)注

    0

    文章

    74

    瀏覽量

    12283
  • 菜單界面
    +關(guān)注

    關(guān)注

    0

    文章

    4

    瀏覽量

    8791
收藏 人收藏

    評論

    相關(guān)推薦

    計算機(jī)二叉樹的問題

    各位大神,本人馬上要考計算機(jī)級了,那個二叉樹老是弄不明白,比如一個題目,一棵二叉樹共有25個節(jié)點(diǎn),其中五個葉子節(jié)點(diǎn),則度為1的節(jié)點(diǎn)數(shù)為?
    發(fā)表于 09-04 09:45

    基于二叉樹的時序電路測試序列設(shè)計

    為了實現(xiàn)時序電路狀態(tài)驗證和故障檢測,需要事先設(shè)計一個輸入測試序列?;?b class='flag-5'>二叉樹節(jié)點(diǎn)和樹枝的特性,建立時序電路狀態(tài)二叉樹,按照電路二叉樹節(jié)點(diǎn)(狀態(tài))與樹枝(輸入)的層次邏輯
    發(fā)表于 07-12 13:57 ?0次下載
    基于<b class='flag-5'>二叉樹</b>的時序電路測試序列設(shè)計

    二叉樹層次遍歷算法的驗證

    實現(xiàn)二叉樹的層次遍歷算法,并對用”A(B(D,E(H(J,K(L,M(,N))))),C(F,G(,I)))”創(chuàng)建的二叉樹進(jìn)行測試。
    發(fā)表于 11-28 01:05 ?2023次閱讀
    <b class='flag-5'>二叉樹</b>層次遍歷算法的驗證

    二叉樹,一種基礎(chǔ)的數(shù)據(jù)結(jié)構(gòu)類型

    然后我們再定義一棵深度也為 3 的二叉樹,該二叉樹的 n 個結(jié)點(diǎn)(n≤7),當(dāng)從 1 到 n 的每個結(jié)點(diǎn)都與上圖中的編號結(jié)點(diǎn)一一對應(yīng)時,這二叉樹就稱為完全二叉樹
    的頭像 發(fā)表于 04-13 10:48 ?4172次閱讀
    <b class='flag-5'>二叉樹</b>,一種基礎(chǔ)的數(shù)據(jù)結(jié)構(gòu)類型

    詳解電源二叉樹到底是什么

    作為數(shù)據(jù)結(jié)構(gòu)的基礎(chǔ),分很多種,像 AVL 、紅黑、二叉搜索....今天我想分享的是關(guān)于二叉樹
    的頭像 發(fā)表于 06-06 15:05 ?9777次閱讀
    詳解電源<b class='flag-5'>二叉樹</b>到底是什么

    C語言二叉樹代碼免費(fèi)下載

    本文檔的主要內(nèi)容詳細(xì)介紹的是C語言二叉樹代碼免費(fèi)下載。
    發(fā)表于 08-27 08:00 ?1次下載

    紅黑(Red Black Tree)是一種自平衡的二叉搜索

    平衡(Balance):就是當(dāng)結(jié)點(diǎn)數(shù)量固定時,左右子樹的高度越接近,這棵二叉樹越平衡(高度越低)。而最理想的平衡就是完全二叉樹/滿二叉樹,高度最小的二叉樹。
    的頭像 發(fā)表于 07-01 15:05 ?5453次閱讀
    紅黑<b class='flag-5'>樹</b>(Red Black Tree)是一種自平衡的<b class='flag-5'>二叉</b>搜索<b class='flag-5'>樹</b>

    二叉樹操作的相關(guān)知識和代碼詳解

    是數(shù)據(jù)結(jié)構(gòu)中的重中之重,尤其以各類二叉樹為學(xué)習(xí)的難點(diǎn)。在面試環(huán)節(jié)中,二叉樹也是必考的模塊。本文主要講二叉樹操作的相關(guān)知識,梳理面試??嫉膬?nèi)容。請大家跟隨小編一起來復(fù)習(xí)吧。 本篇針對面
    的頭像 發(fā)表于 12-12 11:04 ?1946次閱讀
    <b class='flag-5'>二叉樹</b>操作的相關(guān)知識和代碼詳解

    二叉樹的前序遍歷非遞歸實現(xiàn)

    我們之前說了二叉樹基礎(chǔ)及二叉的幾種遍歷方式及練習(xí)題,今天我們來看一下二叉樹的前序遍歷非遞歸實現(xiàn)。 前序遍歷的順序是, 對于中的某節(jié)點(diǎn),先遍歷該節(jié)點(diǎn),然后再遍歷其左子樹,最后遍歷其右子
    的頭像 發(fā)表于 05-28 13:59 ?1856次閱讀

    C語言數(shù)據(jù)結(jié)構(gòu):什么是二叉樹?

    完全二叉樹:完全二叉樹是效率很高的數(shù)據(jù)結(jié)構(gòu)。對于深度為K,有n個節(jié)點(diǎn)的二叉樹,當(dāng)且僅當(dāng)每一個節(jié)點(diǎn)都與深度為K的滿二叉樹中編號從1至n的節(jié)點(diǎn)一一對應(yīng)時,稱為完全
    的頭像 發(fā)表于 04-21 16:20 ?2324次閱讀

    怎么就能構(gòu)造成二叉樹呢?

    一直跟著公眾號學(xué)算法的錄友 應(yīng)該知道,我在二叉樹:構(gòu)造二叉樹登場!,已經(jīng)講過,只有 中序與后序 和 中序和前序 可以確定一顆唯一的二叉樹。前序和后序是不能確定唯一的二叉樹的。
    的頭像 發(fā)表于 07-14 11:20 ?1381次閱讀

    使用C語言代碼實現(xiàn)平衡二叉樹

    這篇博客主要總結(jié)平衡二叉樹,所以,二叉排序樹知識不會提及,但是會用到。
    的頭像 發(fā)表于 09-21 11:00 ?964次閱讀

    二叉樹的代碼實現(xiàn)

    二叉樹的主要操作有遍歷,例如有先序遍歷、中序遍歷、后序遍歷。在遍歷之前,就是創(chuàng)建一棵二叉樹,當(dāng)然,還需要有刪除二叉樹的算法。
    的頭像 發(fā)表于 01-18 10:41 ?1117次閱讀
    <b class='flag-5'>二叉樹</b>的代碼實現(xiàn)

    C++構(gòu)建并復(fù)制二叉樹

    使用C++構(gòu)建一個二叉樹并復(fù)制、輸出。
    的頭像 發(fā)表于 01-10 15:17 ?902次閱讀
    C++構(gòu)建并復(fù)制<b class='flag-5'>二叉樹</b>

    C++自定義二叉樹并輸出二叉樹圖形

    使用C++構(gòu)建一個二叉樹并輸出。
    的頭像 發(fā)表于 01-10 16:29 ?1532次閱讀
    C++自定義<b class='flag-5'>二叉樹</b>并輸出<b class='flag-5'>二叉樹</b>圖形