基于STM32之OLED菜單界面框架搭建

ID:235201 · 發(fā)表于 2018-10-3 21:41

基于STM32驅(qū)動(dòng)OLED屏顯示三級(jí)菜單界面框架搭建
個(gè)人總結(jié)的一些經(jīng)驗(yàn)，寫的不好勿噴。

硬件要求
（1）處理器：STM32F103系列。
（2）OLED屏，SPI或IIC接口都可以。
（3）按鍵，用于控制界面的切換。

一個(gè)基本的菜單界面最少有有一個(gè)主界，所以所有先設(shè)計(jì)一個(gè)主界面。
1.什么是主界面？
/******** 這里說(shuō)的主界面是本次需要設(shè)計(jì)的主界面 ********/
主界面是電路上電程序啟動(dòng)完成后屏幕顯示的第一個(gè)界面，就是主界面。
主界面根據(jù)自己的愛好來(lái)設(shè)計(jì)，比如：

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

好，那么對(duì)應(yīng)的界面做好后，就是如何控制界面之間的切換。

/*********************************************
* 創(chuàng)建一個(gè)結(jié)構(gòu)體
* 存放界面標(biāo)志位
*/
typedef struct
{
u8 Interface_Mark; //界面狀態(tài)
u8 Task_Mark; //任務(wù)狀態(tài)
u8 Run_Task; //開始運(yùn)行任務(wù)
} Mark;
Mark Mark_Sign;//狀態(tài)標(biāo)志位
/*********************************************
* 創(chuàng)建一個(gè)枚舉
* 存放界面變量
*/
enum
{
Main_Interface = 0x10, /****主界面*****/
Menu_Interface = 0x20, /****菜單界面***/
Task_Interface = 0x30, /****任務(wù)界面***/
};
/*******************************************/
switch(Mark_Sign.Interface_Mark)
{
//狀態(tài)標(biāo)志位主界面
case Main_Interface:
Main_Interface_APP();//顯示主界面
break;
//狀態(tài)標(biāo)志位菜單界面
case Menu_Interface:
Menu_Interface_APP();//顯示菜單界面
break;
//狀態(tài)標(biāo)志位任務(wù)界面
case Task_Interface:
Function_Menu_APP();//顯示功能界面
break;
default:
break;

復(fù)制代碼

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

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

/*************左搖桿按鍵*****菜單確認(rèn)按鍵**********************/
if(DISABLE == KEY_Rocker_Left)
{
//當(dāng)按下菜單鍵時(shí)，判斷當(dāng)前界面
/************判斷當(dāng)前界面為主界面***********************/
if(Main_Interface == Mark_Sign.Interface_Mark)
{
/**************進(jìn)入菜單界面*************/
Mark_Sign.Interface_Mark = Menu_Interface;
}
/************判斷當(dāng)前界面為菜單界面*******************/
else if(Menu_Interface == Mark_Sign.Interface_Mark)
{
/***************進(jìn)入任務(wù)界面************/
Mark_Sign.Interface_Mark = Task_Interface;
/**************進(jìn)入指定的功能任務(wù)*******/
switch(Mark_Sign.Task_Mark)
{
/**************開始運(yùn)行2.4G任務(wù)*******/
case NRF24L01_Task:
Mark_Sign.Run_Task = NRF24L01_Task;
break;
/**************開始運(yùn)行藍(lán)牙任務(wù)*******/
case Bluetooth_Task:
Mark_Sign.Run_Task = Bluetooth_Task;
break;
/**************開始運(yùn)行WIFI任務(wù)*******/
case WIFI_Task:
Mark_Sign.Run_Task = WIFI_Task;
break;
/**************開始運(yùn)行USB任務(wù)*******/
case USB_Task:
Mark_Sign.Run_Task = USB_Task;
break;
/**************開始運(yùn)行設(shè)置任務(wù)*******/
case Set_Task:
Mark_Sign.Run_Task = Set_Task;
break;
default:
break;
}
}
/************判斷當(dāng)前界面為任務(wù)界面******************/
else if(Task_Interface == Mark_Sign.Interface_Mark)
{
/*******判斷當(dāng)前正在運(yùn)行的任務(wù)*******/
switch(Mark_Sign.Run_Task)
{
/*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
case NRF24L01_Task:
break;
/*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
case Bluetooth_Task:
break;
/*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
case WIFI_Task:
break;
/*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
case USB_Task:
break;
/*當(dāng)前正在運(yùn)行 2.4G任務(wù)*/
case Set_Task:
break;
default:
break;
}
}
}

復(fù)制代碼

上面這段代功能

/*
* 1,檢測(cè)當(dāng)前按下的按鍵為確認(rèn)鍵
* 2,檢測(cè)當(dāng)前的界面
* (1)如果是主界面，則進(jìn)入菜單界面
* (2)如果是菜單界面，則進(jìn)入任務(wù)界面
* (3)如果是任務(wù)界面，則開執(zhí)行被選中的任務(wù)
*/

復(fù)制代碼

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

/****************右搖桿按鍵****返回按鍵*************************/
if(DISABLE == KEY_Rocker_Right)
{
//當(dāng)按下返回鍵時(shí)，判斷當(dāng)前界面
/************判斷當(dāng)前界面為菜單界面*******************/
if(Menu_Interface == Mark_Sign.Interface_Mark)
{
/*******退出菜單界面***進(jìn)入主界面**/
Mark_Sign.Interface_Mark = Main_Interface;
}
/************判斷當(dāng)前界面為任務(wù)界面******************/
else if(Task_Interface == Mark_Sign.Interface_Mark)
{
/***退出正在運(yùn)行的任務(wù)***/
Mark_Sign.Run_Task = Stop;
/*******退出任務(wù)界面*****/
Mark_Sign.Interface_Mark = Menu_Interface;
}

復(fù)制代碼

上面這段代碼的功能

/*
* 1,檢測(cè)當(dāng)前按下的按鍵為返回鍵
* 2,檢測(cè)當(dāng)前的界面
* (1)如果是任務(wù)界面，則停止正在運(yùn)行的任務(wù)，返回到菜單界面
* (2)如果是菜單界面，則返回到主界面
*/

復(fù)制代碼

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

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

ID:584195 · 發(fā)表于 2023-3-24 13:21

多謝分享，下載下來(lái)學(xué)習(xí)一下。

ID:368227 · 發(fā)表于 2021-4-6 11:06

資料不錯(cuò)，DIY小玩意正好用得上

ID:877801 · 發(fā)表于 2021-1-18 17:57

看上去挺好的，完整工程，程序段全！

ID:695428 · 發(fā)表于 2020-5-12 19:40

感謝樓主的分享，很實(shí)用

ID:248659 · 發(fā)表于 2020-4-19 11:37

問(wèn)個(gè)問(wèn)題，代碼里面的#define Page(ARE) (ARE/2+1)這個(gè)是干啥的呢，跳轉(zhuǎn)過(guò)去找不到相關(guān)的

ID:333080 · 發(fā)表于 2020-4-14 09:14

不錯(cuò)的貼子

ID:707578 · 發(fā)表于 2020-4-1 11:34

下載之后怎么編譯？

ID:706151 · 發(fā)表于 2020-3-25 15:48

樓主的范例不錯(cuò)。學(xué)習(xí)了

ID:388929 · 發(fā)表于 2020-3-24 10:40

雖然我暫不需要，但看了下回復(fù)，好多人說(shuō)解說(shuō)的很好，所以先留個(gè)言作個(gè)MARK，日后有需要再來(lái)學(xué)習(xí)學(xué)習(xí)，感謝樓主分享

ID:248659 · 發(fā)表于 2020-3-23 23:39

在讀完代碼以后專程回來(lái)回復(fù)！不錯(cuò)的資源，有很多值得學(xué)習(xí)的地方！��！

ID:71535 · 發(fā)表于 2020-3-15 21:37

學(xué)習(xí)12864，感謝樓主的分享,希望能學(xué)會(huì)

ID:706151 · 發(fā)表于 2020-3-15 14:44

日常學(xué)習(xí)

ID:139301 · 發(fā)表于 2020-3-14 11:07

學(xué)習(xí)了，我也試試

ID:69829 · 發(fā)表于 2020-3-13 13:08

這個(gè)資料相當(dāng)給力，多謝分享！

ID:707578 · 發(fā)表于 2020-3-13 12:14

能給我發(fā)下代碼嗎？1342732985@qq.com

ID:707578 · 發(fā)表于 2020-3-13 12:13

有代碼嗎？

ID:375003 · 發(fā)表于 2020-2-8 22:36

這個(gè)三級(jí)菜單寫的好,說(shuō)明很詳細(xì).值得學(xué)習(xí)

ID:408363 · 發(fā)表于 2020-2-6 20:44

請(qǐng)問(wèn)2.8寸彩屏能使用嗎

ID:544005 · 發(fā)表于 2020-1-13 10:52

學(xué)習(xí)了謝謝!!!

ID:269639 · 發(fā)表于 2019-12-15 22:01

真的非常好啊，感謝樓主

ID:581602 · 發(fā)表于 2019-12-14 22:50

學(xué)習(xí)一下，感謝樓主分享。

ID:606788 · 發(fā)表于 2019-10-10 20:50

厲害了學(xué)習(xí)下怎么寫的

ID:607710 · 發(fā)表于 2019-10-9 11:09

這就是算法嗎？希望多一些這樣的教程

ID:58110 · 發(fā)表于 2019-10-8 08:42

很棒！謝謝分享！

ID:207341 · 發(fā)表于 2019-10-7 15:38

我記得下載了

ID:606788 · 發(fā)表于 2019-9-28 20:01

最近正在學(xué)習(xí)OLED，感謝樓主的分享👌

ID:610440 · 發(fā)表于 2019-9-11 14:50

你好,我最近有一個(gè)項(xiàng)目,需要用到stm32 oled屏顯示菜單界面的框架,但是不理解框架架構(gòu)關(guān)系,方便加我Q溝通探討下嗎?

ID:547459 · 發(fā)表于 2019-9-4 21:12

學(xué)習(xí)了

ID:606788 · 發(fā)表于 2019-9-4 18:04

謝謝分享

ID:302850 · 發(fā)表于 2019-8-30 06:42

先收藏，感覺肯定會(huì)有一天能用上！

ID:602925 · 發(fā)表于 2019-8-29 12:51

學(xué)習(xí)一下

ID:600035 · 發(fā)表于 2019-8-14 12:26

學(xué)習(xí)學(xué)習(xí)

ID:270932 · 發(fā)表于 2019-7-28 15:47

正好學(xué)習(xí)OLED，謝謝樓主資料分享

ID:586039 · 發(fā)表于 2019-7-28 11:53

請(qǐng)問(wèn)是要外接搖桿按鍵嗎，具體要怎么做呢

ID:64765 · 發(fā)表于 2019-7-24 13:30

頗有收獲，謝了。

ID:432611 · 發(fā)表于 2019-7-19 22:04

great，學(xué)習(xí)

ID:521623 · 發(fā)表于 2019-7-19 17:13

額，那個(gè)mini版燒進(jìn)去程序屏就黑了，咋啥都沒有，是不是燒了啊

ID:570493 · 發(fā)表于 2019-7-15 16:59

怎么我用IIC模式?jīng)]顯示，是不是我哪沒配置好？

ID:55591 · 發(fā)表于 2019-7-12 06:37

看著非常不錯(cuò)

ID:499409 · 發(fā)表于 2019-7-2 12:03

能發(fā)一下代碼嗎1813298696@qqcom

帳號(hào)		自動(dòng)登錄	找回密碼
密碼			立即注冊(cè)

久久久久久久999_99精品久久精品一区二区爱城_成人欧美一区二区三区在线播放_国产精品日本一区二区不卡视频_国产午夜视频_欧美精品在线观看免费

基于STM32之OLED菜單界面框架搭建

評(píng)分

瀏覽過(guò)的版塊