STM32+ESP8266水墨屏天气时钟:简易多级菜单（数组查表法）

news2024/12/29 7:42:11

项目背景

本次的水墨屏幕项目需要做一个多级菜单的显示，所以写出来一起学习，本篇文章不单单适合于水墨屏，像0.96OLED屏幕也适用，区别就是修改显示函数。
在这里插入图片描述

设计思路

多级菜单的实现，一般有两种实现的方法
1.通过双向链表实现
2.通过数组查表实现
两种方法的思路都是把所有的界面连接在同一个连接中，上级菜单跳转下级菜单。
数组查表比较简单，此次的项目就用数组查表的方法。

实现代码

1.确定好菜单的逻辑，也就是菜单的显示关系。
在这里插入图片描述

在开机的时候，显示开机界面，然后按下任意按键，就跳转到菜单显示，可以通过上按键，下按键和确认按键选择相对应的显示。
2.代码逻辑实现。
首先定义一个结构体，分别为上按键，下按键和确认按键，当前页面索引号，当前页面索引号执行的函数。

typedef struct
{
	uchar current;//当前页面索引号
	uchar up;     //向上翻索引号
	uchar down;   //向下翻索引号
	uchar enter;  //确认索引号
	void (*current_operation)();  //当前页面索引号执行的函数,指针函数
} key_table;

数组方法实现多级菜单的原理就是把每一个显示界面编上一个号码，称为当前页面索引号。比如开机显示界面为0，菜单显示为1。每当选择到一个号码，就去运行前页面索引号函数，也就是显示相对应的界面。例如下面的数组key_table table【】，当选择到0编码，就去运行(*fun_0)这个指针函数，把要显示的开机界面写在(*fun_0)就可以。

key_table table[30]=
{
	 //第0层
	{0,1,1,1,(*fun_0)},//开机界面
	
    //第1层
	{1,2,2, 2,(*fun_a1)},//主菜单界面
	{2,6,3, 7,(*fun_b1)},//显示WIFI下划线
	{3,2,4, 8,(*fun_c1)},//显示万年历下划线
	{4,3,5, 9,(*fun_d1)},//显示时钟下划线
	{5,4,6, 10,(*fun_e1)},//显示小说下划线
	{6,5,2, 0,(*fun_f1)},//显示返回下划线
		
    //第2层
	{7,7,7,1,(*fun_a21)},	//连接WIFI
	{8,8,8,1,(*fun_b21)},	//显示时间
	{9,9,9,1,(*fun_c21)},	//倒计时
							
};

//开机界面
void fun_0()
{
    u2_printf("hello world\r\n");
	Refresh();//刷新屏幕
    EPD_ShowString(125,55,"Hello",24,BLACK);	
	EPD_PartDisplay(Image_BW);
	delay_ms(20);
}

那么是怎么实现上级菜单跳转到下级菜单的尼，比如初始显示欢迎界面的状态下，按下不同按键后，通过数组查表，确定要跳转到的索引号，然后根据索引号，通过函数指针执行索引号对应的显示函数，即实现了一次页面切换。然后，就是在新的页面状态，收到下一个按钮指令，再切换到下一个显示状态。
我们看下key_table table[30]数组里面的元素。

	 //第0层
	{0,1,1,1,(*fun_0)},//开机界面
	 //第1层
	{1,2,2, 2,(*fun_a1)},//主菜单界面
	{2,6,3, 7,(*fun_b1)},//显示WIFI下划线
	{3,2,4, 8,(*fun_c1)},//显示万年历下划线
	{4,3,5, 9,(*fun_d1)},//显示时钟下划线
	{5,4,6, 10,(*fun_e1)},//显示小说下划线
	{6,5,2, 0,(*fun_f1)},//显示返回下划线
	//第2层
	{7,7,7,1,(*fun_a21)},	//连接WIFI
	{8,8,8,1,(*fun_b21)},	//显示时间
	{9,9,9,1,(*fun_c21)},	//倒计时

元素是一开始我们定义好的结构体，依次为当前页面索引号，上按键，下按键，确认按键，执行的函数。当我们在索引号1的主菜单界面按上按键，下按键，确认按键，都会跳转到索引号2的显示WIFI下划线界面，然后按上按键，就去跳转到索引号6的显示返回下划线界面，或者按下按键跳转到索引号3的显示WIFI下划线界面,按确认键就跳转到第2层的连接WIFI。在索引号7的连接WIFI界面中，按上按键和下按键都是跳到当前索引号7，从而显示按键按下不跳其他界面的功能，只有按确认按键才会跳到当前索引号1的主菜单界面。
通过分析，不难发现，这些数组在空间上的关系：

在这里插入图片描述