標(biāo)題: 基于STM32之OLED菜單界面框架搭建 [打印本頁]
作者: xiaolibo    時間: 2018-10-3 21:41
標(biāo)題: 基于STM32之OLED菜單界面框架搭建
基于STM32驅(qū)動OLED屏顯示三級菜單界面框架搭建
個人總結(jié)的一些經(jīng)驗，寫的不好勿噴。
一個基本的菜單界面最少有有一個主界，所以所有先設(shè)計一個主界面。
1.什么是主界面？
/******** 這里說的主界面是本次需要設(shè)計的主界面 ********/
主界面是電路上電程序啟動完成后屏幕顯示的第一個界面，就是主界面。
主界面根據(jù)自己的愛好來設(shè)計，比如：

界面中的圖形和文字可自己設(shè)計，這里我設(shè)計的就如上圖所示。
主界面設(shè)計好后，那么根據(jù)自己的需求來添加多級界面。
我這里就設(shè)計了三級菜單界面。


好，那么對應(yīng)的界面做好后，就是如何控制界面之間的切換。
  1. /*********************************************
  2. * 創(chuàng)建一個結(jié)構(gòu)體
  3. * 存放界面標(biāo)志位
  4. */
  5. typedef struct
  6. {
  7.     u8 Interface_Mark;     //界面狀態(tài)
  8.     u8 Task_Mark;          //任務(wù)狀態(tài)
  9.     u8 Run_Task;           //開始運(yùn)行任務(wù)
  10. } Mark;
  11. Mark Mark_Sign;//狀態(tài)標(biāo)志位

  13. /*********************************************
  14. * 創(chuàng)建一個枚舉
  15. * 存放界面變量
  16. */
  17. enum
  18. {
  19.     Main_Interface = 0x10, /****主界面*****/
  20.     Menu_Interface = 0x20, /****菜單界面***/
  21.     Task_Interface = 0x30, /****任務(wù)界面***/
  22. };
  23. /*******************************************/
  24. switch(Mark_Sign.Interface_Mark)
  25. {
  26.         //狀態(tài)標(biāo)志位 主界面
  27.         case Main_Interface:
  28.             Main_Interface_APP();//顯示主界面
  29.     break;

  31.         //狀態(tài)標(biāo)志位 菜單界面
  32.         case Menu_Interface:
  33.             Menu_Interface_APP();//顯示菜單界面
  34.     break;

  36.         //狀態(tài)標(biāo)志位 任務(wù)界面
  37.         case Task_Interface:
  38.                     Function_Menu_APP();//顯示功能界面
  39.     break;
  40. default:
  41.     break;

復(fù)制代碼

上面這段代碼用來判斷是三級中哪一級界面。
里面創(chuàng)建了一個結(jié)構(gòu)體，通過改變結(jié)構(gòu)體里面的一個標(biāo)志位來控制三級界面之間的切換。

那么就要用到按鍵來改變標(biāo)志位的值，這里我采用了外部中斷來控制。


  1. <font color="rgb(79, 79, 79)"><font face="-apple-system, &quot;"><font style="font-size: 16px">/*************左搖桿按鍵*****菜單 確認(rèn)按鍵**********************/
  2.     if(DISABLE == KEY_Rocker_Left)
  3.     {
  4.         //當(dāng)按下菜單鍵時，判斷當(dāng)前界面
  5.         /************判斷當(dāng)前界面為主界面***********************/
  6.         if(Main_Interface == Mark_Sign.Interface_Mark)
  7.         {
  8.             /**************進(jìn)入菜單界面*************/
  9.             Mark_Sign.Interface_Mark = Menu_Interface;
  10.         }
  11.         /************判斷當(dāng)前界面為菜單界面*******************/
  12.         else if(Menu_Interface == Mark_Sign.Interface_Mark)
  13.         {
  14.             /***************進(jìn)入任務(wù)界面************/
  15.             Mark_Sign.Interface_Mark = Task_Interface;

  17.             /**************進(jìn)入指定的功能任務(wù)*******/
  18.             switch(Mark_Sign.Task_Mark)
  19.             {
  20.             /**************開始運(yùn)行2.4G任務(wù)*******/
  21.             case NRF24L01_Task:
  22.                 Mark_Sign.Run_Task = NRF24L01_Task;
  23.                 break;
  24.             /**************開始運(yùn)行藍(lán)牙任務(wù)*******/
  25.             case Bluetooth_Task:
  26.                 Mark_Sign.Run_Task = Bluetooth_Task;
  27.                 break;
  28.             /**************開始運(yùn)行WIFI任務(wù)*******/
  29.             case WIFI_Task:
  30.                 Mark_Sign.Run_Task = WIFI_Task;
  31.                 break;
  32.             /**************開始運(yùn)行USB任務(wù)*******/
  33.             case USB_Task:
  34.                 Mark_Sign.Run_Task = USB_Task;
  35.                 break;
  36.             /**************開始運(yùn)行設(shè)置任務(wù)*******/
  37.             case Set_Task:
  38.                 Mark_Sign.Run_Task = Set_Task;
  39.                 break;
  40.             default:
  41.                 break;
  42.             }
  43.         }
  44.         /************判斷當(dāng)前界面為任務(wù)界面******************/
  45.         else if(Task_Interface == Mark_Sign.Interface_Mark)
  46.         {
  47.             /*******判斷當(dāng)前正在運(yùn)行的任務(wù)*******/
  48.             switch(Mark_Sign.Run_Task)
  49.             {
  50.             /*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
  51.             case NRF24L01_Task:

  53.                 break;
  54.             /*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
  55.             case Bluetooth_Task:

  57.                 break;
  58.             /*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
  59.             case WIFI_Task:

  61.                 break;
  62.             /*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
  63.             case USB_Task:

  65.                 break;
  66.             /*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
  67.             case Set_Task:
  68.             
  69.                 break;
  70.             default:
  71.                 break;
  72.             }
  73.         }
  74.     }
  75. </font></font></font>
復(fù)制代碼

上面這段代功能

  1. <font color="rgb(79, 79, 79)"><font face="-apple-system, &quot;"><font style="font-size: 16px">/*
  2. * 1,檢測當(dāng)前按下的按鍵為確認(rèn)鍵
  3. * 2,檢測當(dāng)前的界面
  4. *                (1)如果是主界面，則進(jìn)入菜單界面
  5. *                (2)如果是菜單界面，則進(jìn)入任務(wù)界面
  6. *                (3)如果是任務(wù)界面，則開執(zhí)行被選中的任務(wù)
  7. */
  8. </font></font></font>
復(fù)制代碼

那么可以從主界面進(jìn)入，那怎么退出呢？
同樣這里采用外部中斷來控制

  1. <font color="rgb(79, 79, 79)"><font face="-apple-system, &quot;"><font style="font-size: 16px">/****************右搖桿按鍵****返回按鍵*************************/
  2.     if(DISABLE == KEY_Rocker_Right)
  3.     {
  4.         //當(dāng)按下返回鍵時，判斷當(dāng)前界面
  5.         /************判斷當(dāng)前界面為菜單界面*******************/
  6.         if(Menu_Interface == Mark_Sign.Interface_Mark)
  7.         {
  8.             /*******退出菜單界面***進(jìn)入主界面**/
  9.             Mark_Sign.Interface_Mark = Main_Interface;
  10.         }
  11.         /************判斷當(dāng)前界面為任務(wù)界面******************/
  12.         else if(Task_Interface == Mark_Sign.Interface_Mark)
  13.         {
  14.             /***退出正在運(yùn)行的任務(wù)***/
  15.             Mark_Sign.Run_Task = Stop;
  16.             /*******退出任務(wù)界面*****/
  17.             Mark_Sign.Interface_Mark = Menu_Interface;
  18.         }

  20. </font></font></font>
復(fù)制代碼

上面這段代碼的功能

  1. <font color="rgb(79, 79, 79)"><font face="-apple-system, &quot;"><font style="font-size: 16px">/*
  2. * 1,檢測當(dāng)前按下的按鍵為返回鍵
  3. * 2,檢測當(dāng)前的界面
  4. *             (1)如果是任務(wù)界面，則停止正在運(yùn)行的任務(wù)，返回到菜單界面
  5. *             (2)如果是菜單界面，則返回到主界面
  6. */</font></font></font>
復(fù)制代碼


好
通過確認(rèn)按鍵控制從主界面到菜單界面到任務(wù)界面的切換。
通過返回按鍵控制從任務(wù)界面到菜單界面到主界面的切換。

以上就是菜單界面的內(nèi)容，不管你是小白還是正在學(xué)習(xí)STM32的你，根據(jù)這套框架你一樣可以寫出霸氣的菜單界面，如果你們還有更好的寫法，歡迎一起討論。





IMG_20181001_141038.jpg (2.12 MB, 下載次數(shù): 186)

IMG_20181001_141038.jpg

STM32_OLED_三級菜單框架.rar

397.21 KB, 下載次數(shù): 799, 下載積分: 黑幣 -5

作者: ebingyu    時間: 2018-10-11 15:58
學(xué)習(xí)了
作者: cxy760307    時間: 2018-11-2 16:03
學(xué)習(xí)了，不錯！
作者: 雨落冰心    時間: 2018-11-12 00:28
最近正在學(xué)習(xí)OLED，感謝樓主的分享
作者: j182010    時間: 2018-11-12 15:51
多謝分享
作者: 陽ing    時間: 2018-11-23 17:08
多謝共享
作者: gl542400    時間: 2018-11-24 16:19

最近正在學(xué)習(xí)OLED
作者: quanhengwen    時間: 2018-12-17 16:35
感謝樓主 分享，學(xué)習(xí)一下
作者: yjwpm    時間: 2018-12-17 17:44
最近正在學(xué)習(xí)OLED
作者: tonyhy1975    時間: 2018-12-19 22:47
不錯，值得學(xué)習(xí)
作者: 2262744322    時間: 2019-2-12 21:18
仔細(xì) 學(xué)習(xí) 一下  最近在學(xué)習(xí)怎么 寫一個 菜單 的程序
作者: qq286907986    時間: 2019-2-23 13:52
學(xué)習(xí)一下
作者: 1843    時間: 2019-4-11 16:31
666，學(xué)習(xí)一下
作者: 1843    時間: 2019-4-12 11:57
怎么判斷按下的是哪一個按鍵，DISABLE跳轉(zhuǎn)到了stm32f10x.h了，有點(diǎn)看不懂，請教一下。
作者: bohe    時間: 2019-5-23 22:23
謝謝分享，
作者: 111aou    時間: 2019-6-20 13:44
剛好需要，學(xué)習(xí)一下
作者: 111aou    時間: 2019-6-20 13:46
學(xué)習(xí)一下，剛好需要
作者: 1813298696    時間: 2019-7-2 12:03
能發(fā)一下代碼嗎1813298696@qqcom
作者: 右走    時間: 2019-7-12 06:37
看著非常不錯
作者: 1245303587    時間: 2019-7-15 16:59
怎么我用IIC模式?jīng)]顯示，是不是我哪沒配置好？
作者: 木易吶    時間: 2019-7-19 17:13
額，那個mini版燒進(jìn)去程序屏就黑了，咋啥都沒有，是不是燒了 啊
作者: lyw98    時間: 2019-7-19 22:04
great，學(xué)習(xí)
作者: lyl_420819    時間: 2019-7-24 13:30
頗有收獲，謝了。
作者: 有夢即遠(yuǎn)方    時間: 2019-7-28 11:53
請問是要外接搖桿按鍵嗎，具體要怎么做呢
作者: ww1647346515    時間: 2019-7-28 15:47
正好學(xué)習(xí)OLED，謝謝樓主資料分享
作者: w296532983    時間: 2019-8-14 12:26
學(xué)習(xí)學(xué)習(xí)
作者: sunjixiangok    時間: 2019-8-29 12:51
學(xué)習(xí)一下
作者: prettytank    時間: 2019-8-30 06:42
先收藏，感覺肯定會有一天能用上！
作者: yupengwei    時間: 2019-9-4 18:04
謝謝分享
作者: mayorma    時間: 2019-9-4 21:12
學(xué)習(xí)了
作者: yupengcheng    時間: 2019-9-11 14:50
你好,我最近有一個項目,需要用到stm32 oled屏顯示菜單界面的框架,但是不理解框架架構(gòu)關(guān)系,方便加我Q溝通探討下嗎?
作者: yupengwei    時間: 2019-9-28 20:01
最近正在學(xué)習(xí)OLED，感謝樓主的分享&#128076;
作者: renjianbo    時間: 2019-10-7 15:38
我記得下載了
作者: lyMarvin    時間: 2019-10-8 08:42
很棒！謝謝分享！
作者: 完完全全    時間: 2019-10-9 11:09
這就是算法嗎？希望多一些這樣的教程
作者: yupengwei    時間: 2019-10-10 20:50
厲害了  學(xué)習(xí)下怎么寫的
作者: w1685188403    時間: 2019-12-14 22:50
學(xué)習(xí)一下，感謝樓主分享。
作者: wyy19970316    時間: 2019-12-15 22:01
真的非常好啊，感謝樓主
作者: ben0148    時間: 2020-1-13 10:52
學(xué)習(xí)了謝謝!!!
作者: phy123    時間: 2020-2-6 20:44
請問2.8寸彩屏能使用嗎
作者: guangshi_wq    時間: 2020-2-8 22:36
這個三級菜單寫的好,說明很詳細(xì).值得學(xué)習(xí)
作者: 1342732985    時間: 2020-3-13 12:13
有代碼嗎？
作者: 1342732985    時間: 2020-3-13 12:14
能給我發(fā)下代碼嗎？1342732985@qq.com
作者: kanwoe    時間: 2020-3-13 13:08
這個資料相當(dāng)給力，多謝分享！
作者: 小刀hait    時間: 2020-3-14 11:07
學(xué)習(xí)了，我也試試
作者: quicklee    時間: 2020-3-15 14:44
日常學(xué)習(xí)
作者: waerdeng    時間: 2020-3-15 21:37
學(xué)習(xí)12864，感謝樓主的分享,希望能學(xué)會
作者: xda    時間: 2020-3-23 23:39
在讀完代碼以后專程回來回復(fù)！不錯的資源，有很多值得學(xué)習(xí)的地方�。�！
作者: billaj    時間: 2020-3-24 10:40
雖然我暫不需要，但看了下回復(fù)，好多人說解說的很好，所以先留個言作個MARK，日后有需要再來學(xué)習(xí)學(xué)習(xí)，感謝樓主分享
作者: quicklee    時間: 2020-3-25 15:48
樓主的范例不錯。學(xué)習(xí)了
作者: 1342732985    時間: 2020-4-1 11:34
下載之后怎么編譯？
作者: zhangkaiy1220    時間: 2020-4-14 09:14
不錯的貼子
作者: xda    時間: 2020-4-19 11:37
問個問題，代碼里面的#define Page(ARE) (ARE/2+1)這個是干啥的呢，跳轉(zhuǎn)過去找不到相關(guān)的
作者: 云夢空間    時間: 2020-5-12 19:40
感謝樓主的分享，很實(shí)用
作者: andyliu82    時間: 2021-1-18 17:57
看上去挺好的，完整工程，程序段全！
作者: @陌途    時間: 2021-4-6 11:06
資料不錯，DIY小玩意正好用得上
作者: zyluglugl    時間: 2023-3-24 13:21
多謝分享，下載下來學(xué)習(xí)一下。



歡迎光臨 (http://www.torrancerestoration.com/bbs/) Powered by Discuz! X3.1