Teach you how to make a menu on the display device

Abstract : The types of menus in the program and the menu-based program have obvious advantages. There are usually two ways to realize the program: one is based on the command line, that is, the corresponding function is realized by inputting instructions to drive the program; the other is based on the menu. That is, the different functions of the program are realized by selecting different menus. The biggest disadvantage of the former is that the instructions must be accurately mastered, which is not very convenient for the operator; for the latter, different functions can be realized as long as different menu items are selected. Therefore, it is easy to operate and becomes a program realization. Mainstream way.

The menu has been widely used in various programs. It is no exaggeration to say that almost all programs use a menu-driven approach. Therefore, it is very necessary to master the menu-based program development. There are many types of menus used in the program, the common ones are: pop-up menus, drop-down menus, icon menus, multi-level menus, etc., and the interface forms are also varied.

In this example, we can achieve this through a display screen and two buttons and small LED lights. Of course, the display device can be a TFT color screen, a 0.96 inch OLED small screen or other display devices. The buttons can also be replaced by a touch screen, LED lights It is the response operation of the corresponding menu, of course, it can also be replaced by other devices. Because the ideas are the same, you can design by yourself.

1. Menu design

Use a key to control the arrow to move up and down, that is, this key is equivalent to moving the cursor up and down; to select the current menu item by another key, this key is equivalent to the Enter key. Button 1 is used to realize the cursor movement function (the arrow moves up and down), and button 2 is used to realize the selection confirmation (Enter key) function.

2. Realization ideas

There are many ways to implement the menu. As far as the above-mentioned menu is concerned, it can be realized by the following methods.
(1) First, display the above initial screen.
(2) Then, keep capturing button 1 or button 2. If it is button 1, clear the screen first, and then place the arrow on the second item of the menu, the entire menu is displayed, so that it feels that the cursor has moved down; if the cursor is already at the last menu item, move to the first Menu Item. If it is button 2, it means that the menu item where the cursor is located is selected, and the corresponding function is executed. The switching of the menu is actually similar to the principle of animation.

3. Hardware circuit

The hardware part is very simple, involving only two buttons and two LEDs. According to the schematic diagram of the experiment board used, the corresponding pin relationship is:
(1) KEY1 is connected to pin PA0, and KEY2 is connected to pin PE4.
(2) LED0 is connected to pin PE6, and LED1 is connected to pin PE5.
(3) The display device uses its own existing screen as a display, both TFT color screen and OLED can be used.

4. Program flow chart

First draw the program flow chart, organize the display ideas and logic, and then follow the steps to write the driver code for the corresponding function. Finally, download the experimental display.

5. Specific code

Three menus are set up here, and the menu display functions are as follows:

void DisplayMenu(u8 t)
{
    
    	
	switch(t)
	{
    
    
		case 1:	
			LCD_Clear(WHITE);			
			LCD_ShowString(20,20,200,24,24,(u8*)"Select:");
			LCD_ShowString(20,50,200,24,24,(u8*)"-->");
			LCD_ShowString(60,50,200,24,24,(u8*)"light led0");
			LCD_ShowString(60,80,200,24,24,(u8*)"light led1");
			LCD_ShowString(60,110,200,24,24,(u8*)"light two led");
			break;		
		case 2:
			LCD_Clear(WHITE);			
			LCD_ShowString(20,20,200,24,24,(u8*)"Select:");
			LCD_ShowString(60,50,200,24,24,(u8*)"light led0");
			LCD_ShowString(20,80,200,24,24,(u8*)"-->");
			LCD_ShowString(60,80,200,24,24,(u8*)"light led1");
			LCD_ShowString(60,110,200,24,24,(u8*)"light two led");		
			break;
		case 3:
			LCD_Clear(WHITE);			
			LCD_ShowString(20,20,200,24,24,(u8*)"Select:");
			LCD_ShowString(60,50,200,24,24,(u8*)"light led0");
			LCD_ShowString(60,80,200,24,24,(u8*)"light led1");
			LCD_ShowString(20,110,200,24,24,(u8*)"-->");
			LCD_ShowString(60,110,200,24,24,(u8*)"light two led");
			break;
	}
}

Next is the detection of button presses and processing functions

DisplayMenu(1);//显示初始菜单1
while(1)
{
    
    
	t=KEY_Scan(0);//按键检测哪一个按键按下
	switch(t)
	{
    
    
		case 1: 			//KEY1 确定按键按下
				flag=0;
				ExecuteFunction(cur);//执行确定按键操作
				break;
		case 2: flag=1;		//KEY2 下移按键按下
			   if(cur==3)	//如果是最后一个菜单				   
				   cur=1;   //重新指向菜单1
			   else        //如果不是最后一个菜单	
				   cur++;  //重新指向菜单+1
			   break;		
	}	
	if(flag)
	{
    
    
		DisplayMenu(cur);//显示对应菜单画面
		flag=0;
	}
} 

The final result is as follows:

Summary: The switching of the menu is to constantly detect the corresponding button press, first clear the screen, and then place the arrow on the second item of the menu, or jump to the second screen, if the cursor is at the last menu item Or at the last screen, move to the first menu item. Press-clear screen-display, three steps.

WeChat official account backstage reply: menu , get the relevant code of this article.

Guess you like

Origin blog.csdn.net/qq_39400113/article/details/112509086