基于STM32的OLED多级菜单GUI实现（简化版智能手表）

��       前言：本文的OLED多级菜单UI为一个综合性的STM32小项目，使用多传感器与OLED显示屏实现智能终端的效果。项目中的多级菜单UI使用了较为常见的结构体索引法去实现功能与功能之间的来回切换，搭配DHT11，RTC，LED，KEY等器件实现高度智能化一体化操作。后期自己打板设计结构，可以衍生为智能手表等小玩意。目前，项目属于裸机状态（CPU占用率100%），后期可能会加上RTOS系统。（本项目源码在本文末尾进行开源！）

        硬件实物图：

效果图：

        温度计：

         游戏机：

引脚连接：

OLED模块：

VCC --> 3.3V

GND --> GND

SCL --> PB10

SDA --> PB11

DHT11模块：

DATA --> PB9

VCC --> 3.3V

GND --> GND

KEY模块（这部分笔者直接使用了正点原子精英板上的）：

KEY0 --> PE4

KEY1 --> PE3

KEY_UP --> PA0

一、多级菜单

        随着工业化和自动化的发展，如今基本上所有项目都离不开显示终端。而多级菜单更是终端显示项目中必不可少的组成因素，其实TFT-LCD屏幕上可以借鉴移植很多优秀的开源多级菜单（GUI，比如：LVGL），而0.96寸的OLED屏幕上通常需要自己去适配和编程多级菜单。

精美的多级菜单：

        网上的普遍采用的多级菜单的方案是基于索引或者结构树，其中，索引法居多。索引法的优点：可阅读性好，拓展性也不错，查找的性能差不多是最优，就是有点占用内存空间。

说明：本项目的多级菜单也是采用了索引法进行实现。

二、索引法多级菜单实现

        网上关于索引法实现多级菜单功能有很多基础教程，笔者就按照本项目中的具体实现代码过程给大家讲解一下索引法实现多级菜单。特别说明：本项目直接使用了正点原子的精英板作为核心板，所以读者朋友复现代码还是很简单的。

        首先，基于索引法实现多级菜单的首要条件是先确定项目中将使用到几个功能按键（比如：向前，向后，确定，退出等等）本项目中，笔者使用到了3个按键：下一个（next），确定（enter），退出（back）。所以，接下首先定义一个结构体，结构体中一共有5个变量（3+2），分别为：当前索引序号（current），向下一个（next），确定（enter），退出（back），当前执行函数（void）。其中，标红的为需要设计的按键（笔者这里有3个），标绿的则为固定的索引号与该索引下需要执行的函数。

typedef struct{    u8 current;    //当前状态索引号    u8 next; //向下一个    u8 enter;     //确定u8 back; //退出    void (*current_operation)(void); //当前状态应该执行的操作} Menu_table;

        接下来就是定义一个数组去决定整个项目菜单的逻辑顺序（利用索引号）

Menu_table  table[30]={    {0,0,1,0,(*home)},//一级界面（主页面） 索引，向下一个，确定，退出    {1,2,5,0,(*Temperature)},//二级界面 温湿度    {2,3,6,0,(*Palygame)},//二级界面 游戏    {3,4,7,0,(*Setting)},//二级界面 设置    {4,1,8,0,(*Info)},//二级界面 信息{5,5,5,1,(*TestTemperature)},//三级界面：DHT11测量温湿度{6,6,6,2,(*ControlGame)},//三级界面：谷歌小恐龙Dinogame{7,7,9,3,(*Set)},//三级界面：设置普通外设状态 LED{8,8,8,4,(*Information)},//三级界面：作者和相关项目信息{9,9,7,3,(*LED)},//LED控制};

        这里解释一下这个数组中各元素的意义，由于我们在前面先定义了Menu_table结构体，结构体成员变量分别与数组中元素对应。比如：{0,0,1,0,(*home)}，代表了索引号为0，按向下键（next）转入索引号为0，按确定键（enter）转入索引号为1，按退出键（back）转入索引号为0，索引号为0时执行home函数。

        在举一个例子帮助大家理解一下，比如，我们当前程序处在索引号为2（游戏界面），就会执行Playgame函数。此时，如果按下next按键，程序当前索引号就会变为3，并且执行索引号为3时候的Setting函数。如果按下enter按键，程序当前索引号就会变为6，并且执行索引号为6时候的ControlGame函数。如果按下back按键，程序当前索引号就会变为0，并且执行索引号为0时候的home函数。

        再接下就是按键处理函数：

uint8_t  func_index = 0;//主程序此时所在程序的索引值void  Menu_key_set(void){  if((KEY_Scan(1) == 1) && (func_index != 6))        //屏蔽掉索引6下的情况，适配游戏  {     func_index=table[func_index].next;//按键next按下后的索引号    OLED_Clear();   }  if((KEY_Scan(1) == 2) && (func_index != 6))  {    func_index=table[func_index].enter;//按键enter按下后的索引号    OLED_Clear();  }if(KEY_Scan(1) == 3)  {    func_index=table[func_index].back;//按键back按下后的索引号    OLED_Clear();   }  current_operation_index=table[func_index].current_operation;//执行当前索引号所对应的功能函数  (*current_operation_index)();//执行当前操作函数}//按键函数u8 KEY_Scan(u8 mode){static u8 key_up=1;if(mode)key_up=1; if(key_up&&(KEY0==0||KEY1==0||WK_UP==1)){HAL_Delay(100);//消抖key_up=0;if(KEY0==0)return 1;else if(KEY1==0)return 2;else if(WK_UP==1)return 3;}else if(KEY0==1&&KEY1==1&&WK_UP==0)key_up=1; return 0;}

说明2点：

（1）由于是目前本项目是裸机状态下运行的，所以CPU占用率默认是100%的，所以这里使用按键支持连按时，对于菜单的切换更好些。

（2）可能部分索引号下的执行函数，需要使用到已经定义的3个按键（比如，本项目中的DInogame中）。所以，可以在需要差别化的索引号下去屏蔽原先的按键功能。如下：

  if((KEY_Scan(1) == 1) && (func_index != 6))        //屏蔽掉索引6下的情况，适配游戏  {     func_index=table[func_index].next;//按键next按下后的索引号    OLED_Clear();   }  if((KEY_Scan(1) == 2) && (func_index != 6))        //屏蔽掉索引6下的情况，适配游戏  {    func_index=table[func_index].enter;//按键enter按下后的索引号    OLED_Clear();  }

（3）笔者这里是使用全屏刷新去切换功能界面，同时，没有启用高级算法去加速显示，所以可能在切换界面的时候效果一般。读者朋友可以试试根据自己的UI情况使用局部刷新，这样可能项目会更加丝滑一点。

本项目中的菜单索引图：

三、此项目内部功能实现（简化智能手表）

3.1 OLED显示

        OLED就是正常的驱动与显示，有能力的读者朋友可以使用高级算法去加速OLED屏幕的刷新率，可以使自己的多级菜单切换起来更丝滑。如果对OLED驱动与显示不太熟悉的朋友可以去看看本人另一篇博客：【强烈推荐】基于stm32的OLED各种显示实现（含动态图）_混分巨兽龙某某的博客-CSDN博客_stm32oled显示

        唯一需要注意的点就是需要去制作菜单里面的UI图标（注意图片大小是否合适）：

         如果是黑白图片的话，可以直接使用PCtoLCD2002完美版进行取模：

3.2 KEY按键

        KEY按键注意消抖（建议裸机情况下支持连续按动），同时注意自己实际硬件情况去进行编程（电阻是否存在上拉或者下拉）。

3.3 DinoGame实现

         谷歌公司最近比较流行的小游戏，笔者之前有文章进行了STM32的成功复刻。博客地址：基于STM32的小游戏——谷歌小恐龙（Chrome Dino Game）_混分巨兽龙某某的博客-CSDN博客_谷歌恐龙

3.4 LED控制和DHT11模块

        LED和DHT11模块其实都属于外设控制，这里读者朋友可以根据自己的实际情况去取舍。需要注意的是尽可能适配一下自己多级菜单（外设控制也需要注意一下按键安排，可以参考笔者项目的设计）。

四、CubeMX配置

1、RCC配置外部高速晶振（精度更高）——HSE；

2、SYS配置：Debug设置成Serial Wire（否则可能导致芯片自锁）；

 3、I2C2配置：这里不直接使用CubeMX的I2C2，使用GPIO模拟（PB10：CLK；PB11：SDA） 

4、RTC配置：年月日，时分秒；

5、TIM2配置：由上面可知DHT11的使用需要us级的延迟函数,HAL库自带只有ms的，所以需要自己设计一个定时器；

6、KEY按键配置：PE3，PE4和PA0设置为端口输入（开发板原理图）

7、时钟树配置： 

8、文件配置

五、代码

5.1 OLED驱动代码

        此部分OLED的基本驱动函数，笔者使用的是I2C驱动的0.96寸OLED屏幕。所以，首先需要使用GPIO模拟I2C通讯。随后，使用I2C通讯去驱动OLED。（此部分代码包含了屏幕驱动与基础显示，如果对OLED显示不太理解的朋友可以去看看上文提到的笔者的另一篇文章）

oled.h：

#ifndef __OLED_H#define __OLED_H #include "main.h" #define u8 uint8_t#define u32 uint32_t #define OLED_CMD  0//写命令#define OLED_DATA 1//写数据 #define OLED0561_ADD0x78  // OLED I2C地址#define COM0x00  // OLED #define DAT 0x40  // OLED  #define OLED_MODE 0#define SIZE 8#define XLevelL0x00#define XLevelH0x10#define Max_Column128#define Max_Row64#defineBrightness0xFF#define X_WIDTH 128#define Y_WIDTH 64  //-----------------OLED IIC GPIO进行模拟---------------- #define OLED_SCLK_Clr() HAL_GPIO_WritePin(GPIOB, GPIO_PIN_10, GPIO_PIN_RESET) //GPIO_ResetBits(GPIOB,GPIO_Pin_10)//SCL#define OLED_SCLK_Set() HAL_GPIO_WritePin(GPIOB, GPIO_PIN_10, GPIO_PIN_SET) //GPIO_SetBits(GPIOB,GPIO_Pin_10) #define OLED_SDIN_Clr() HAL_GPIO_WritePin(GPIOB, GPIO_PIN_11, GPIO_PIN_RESET) // GPIO_ResetBits(GPIOB,GPIO_Pin_11)//SDA#define OLED_SDIN_Set() HAL_GPIO_WritePin(GPIOB, GPIO_PIN_11, GPIO_PIN_SET) // GPIO_SetBits(GPIOB,GPIO_Pin_11)  //I2C GPIO模拟void IIC_Start();void IIC_Stop();void IIC_WaitAck();void IIC_WriteByte(unsigned char IIC_Byte);void IIC_WriteCommand(unsigned char IIC_Command);void IIC_WriteData(unsigned char IIC_Data);void OLED_WR_Byte(unsigned dat,unsigned cmd);  //功能函数void OLED_Init(void);void OLED_WR_Byte(unsigned dat,unsigned cmd); void OLED_FillPicture(unsigned char fill_Data);void OLED_SetPos(unsigned char x, unsigned char y);void OLED_DisplayOn(void);void OLED_DisplayOff(void);void OLED_Clear(void);void OLED_On(void);void OLED_ShowChar(u8 x,u8 y,u8 chr,u8 Char_Size);u32 oled_pow(u8 m,u8 n);void OLED_ShowNum(u8 x,u8 y,u32 num,u8 len,u8 size2);void OLED_ShowString(u8 x,u8 y,u8 *chr,u8 Char_Size); #endif

oled.c：

#include "oled.h"#include "asc.h"    //字库（可以自己制作）#include "main.h"   /********************GPIO 模拟I2C*******************///注意：这里没有直接使用HAL库中的模拟I2C/**********************************************//IIC Start**********************************************/void IIC_Start(){ OLED_SCLK_Set() ;OLED_SDIN_Set();OLED_SDIN_Clr();OLED_SCLK_Clr();} /**********************************************//IIC Stop**********************************************/void IIC_Stop(){OLED_SCLK_Set() ;OLED_SDIN_Clr();OLED_SDIN_Set(); } void IIC_WaitAck(){OLED_SCLK_Set() ;OLED_SCLK_Clr();}/**********************************************// IIC Write byte**********************************************/ void IIC_WriteByte(unsigned char IIC_Byte){unsigned char i;unsigned char m,da;da=IIC_Byte;OLED_SCLK_Clr();for(i=0;i