STM32 simple multi-level menu (array table lookup method)

MCU development , Sometimes the screen is used to display content , When you need to display content level by level , You need to use the form of multi-level menu .

1 Multilevel menu

Implementation of multi-level menu , There are two kinds of design ideas ：

• It is realized by two-way linked list

• Through the array look-up table to achieve

The general idea is to connect the interfaces of the menu , You can jump from the upper menu to the lower menu , You can also return to the upper menu from the lower menu .

The way of array table lookup is relatively simple , Easy to understand , This article will use the array to look up the table and send it to STM32 Realize the display of multi-level menu on .

2 Code implementation

2.1 Array lookup table

First, you need to define a structure ：

typedef struct{    uchar current;    uchar up;// Turn up the index number     uchar down;// Turn down the index number     uchar enter;// Confirm index number     void (*current_operation)();} key_table;

• current： Current page The index number of

• up： Press down “ Turn up “ The index number of the page to jump to after the button

• down： Press down “ Turn down “ The index number of the page to jump to after the button

• enter： Press down “ confirm “ The index number of the page to jump to after the button

• current_operation： The index number of the current page is the display function to be executed , This is a function pointer

Be careful ： For the operation of menu display , Yes 3 A button , They are down 、 Down and confirm , If the on the MCU IO Resources are tight , You can also put “ Turn up ” Button omitted , Only pass “ Turn down ” Button to achieve circular access , The corresponding structure can also remove the member .

Then define a table , Used to define how to jump between pages

key_table table[30]={    // The first 0 layer     {0,0,0,1,(*fun_0)},        // The first 1 layer     {1,4,2, 5,(*fun_a1)},    {2,1,3, 9,(*fun_b1)},    {3,2,4,13,(*fun_c1)},           {4,3,1, 0,(*fun_d1)},        // The first 2 layer     {5,8,6,17,(*fun_a21)},                      {6,5,7,18,(*fun_a22)},    {7,6,8,19,(*fun_a23)},                                              {8,7,5, 1,(*fun_a24)},        { 9,12,10,20,(*fun_b21)},                       {10, 9,11,21,(*fun_b22)},    {11,10,12,22,(*fun_b23)},                                               {12,11, 9, 2,(*fun_b24)},        {13,16,14,23,(*fun_c21)},                       {14,13,15,24,(*fun_c22)},                                       {15,14,16,25,(*fun_c23)},                                       {16,15,13, 3,(*fun_c24)},        // The first 3 layer     {17,17,17,5,(*fun_a31)},                                    {18,18,18,6,(*fun_a32)},                                {19,19,19,7,(*fun_a33)},        {20,20,20, 9,(*fun_b31)},                                       {21,21,21,10,(*fun_b32)},                                   {22,22,22,11,(*fun_b33)},        {23,23,23,13,(*fun_c31)},                                   {24,24,24,14,(*fun_c32)},                                   {25,25,25,15,(*fun_c33)},                               };

Here's how the table works ：

• This table , According to the 4 Display relationship of level menu （ Pay attention to the 0 Layer is actually just a welcome interface ）

• First level menu , Only 4 An option , Therefore, only 4 That's ok （ Note that the last option is used to return to the previous level , No actual meaning ）

• The second level menu , It's the first level menu 3 Two practical options for further introduction , Each introduction has 4 Is the item （ Note that the last option is also used to return to the previous level , No actual meaning ）, therefore , The second level menu here lists 3x4=12 That's ok

• The third level menu , It further introduces the sub items in the second layer menu （3 A classification , Each kind has 3 Is the item ）, So the third level menu lists 9 That's ok

• Notice the... Of each row in the array 1 An array , It's a quotation mark , First, give a practical example for analysis ：

The picture above is a real 4 What to display in the level menu , Each item is currently , Index number marked （0~25）, That is, the index number of the corresponding array in the definition .

For example, the array is about 0 Tier and tier 1 Definition of layer :

// The first 0 layer {0,0,0,1,(*fun_0)},​// The first 1 layer {1,4,2, 5,(*fun_a1)},{2,1,3, 9,(*fun_b1)},{3,2,4,13,(*fun_c1)},       {4,3,1, 0,(*fun_d1)},

• First look at the first line ： The index is 0, Show welcome screen ; The back two 0 Means to press “ Turn up ” and “ Down turn ” Invalid , Continue to display the welcome interface ; And the back 1 Press down “ confirm ” After button , Jump to index 1 It's about （ The second page is displayed 1 Level directory , And point to the 1 The second level of 1 Is the item ）; Last Is the specific content to be displayed in this index ,fun_0 Is to control the screen to display the welcome interface

• Look at the second line ： The index is 1, According to the first 1 Level directory , And point to the 1 The second level of 1 Is the item （ The weather ）; hinder 4 Means to press “ Turn up ” Jump to index 4, The second page is displayed 1 Level directory , And point to the 1 The second level of 4 Is the item （Return）; And the back 2 Means to press “ Down turn ” Jump to index 2, The second page is displayed 1 Level directory , And point to the 1 The second level of 2 Is the item （ music ）; And the back 5 Press down “ confirm ” After button , Jump to index 5 It's about （ The second page is displayed 2 Level directory , And point to the 2 The second level of 1 Is the item - Hangzhou ）; Last Is the specific content to be displayed in this index ,fun_a1 Is to control the screen display 1 Level directory , And point to the 1 The second level of 1 Is the item （ The weather ）

• Other lines have similar meanings

Through analysis , It's not hard to find out , The spatial relationship of these arrays ：

For the bottom of the menu , Because there are no functional requirements for turning up and down , So before each line 3 Both numbers are the current index number ：

// The first 3 layer {17,17,17,5,(*fun_a31)},                                {18,18,18,6,(*fun_a32)},                            {19,19,19,7,(*fun_a33)},​{20,20,20, 9,(*fun_b31)},                                   {21,21,21,10,(*fun_b32)},                               {22,22,22,11,(*fun_b33)},​{23,23,23,13,(*fun_c31)},                               {24,24,24,14,(*fun_c32)},                               {25,25,25,15,(*fun_c33)},   

2.2 Specific display function

For the specific content to be displayed by the function , Display according to your own implementation needs .

What I'm using here is OLED The screen , With the help of U8g2 Graphics library for content display , The following is a partial display example ：

/********* The first 1 layer ***********/void fun_a1()   {       u8g2_DrawStr(&u8g2,0,16,">");    u8g2_DrawStr(&u8g2,16,16,"[1]Weather");    u8g2_DrawStr(&u8g2,16,32,"[2]Music");    u8g2_DrawStr(&u8g2,16,48,"[3]Device Info");    u8g2_DrawStr(&u8g2,16,64,"<--");                                                                                    }​void fun_b1()   {       u8g2_DrawStr(&u8g2,0,32,">");    u8g2_DrawStr(&u8g2,16,16,"[1]Weather");    u8g2_DrawStr(&u8g2,16,32,"[2]Music");    u8g2_DrawStr(&u8g2,16,48,"[3]Device Info");    u8g2_DrawStr(&u8g2,16,64,"<--");                                                                                        }​void fun_c1()     {       u8g2_DrawStr(&u8g2,0,48,">");    u8g2_DrawStr(&u8g2,16,16,"[1]Weather");    u8g2_DrawStr(&u8g2,16,32,"[2]Music");    u8g2_DrawStr(&u8g2,16,48,"[3]Device Info");    u8g2_DrawStr(&u8g2,16,64,"<--");                                                                                    }​void fun_d1()     {       u8g2_DrawStr(&u8g2,0,64,">");    u8g2_DrawStr(&u8g2,16,16,"[1]Weather");    u8g2_DrawStr(&u8g2,16,32,"[2]Music");    u8g2_DrawStr(&u8g2,16,48,"[3]Device Info");    u8g2_DrawStr(&u8g2,16,64,"<--");                                                                                            }​/********* The first 2 layer ***********/void fun_a21()     {       u8g2_DrawStr(&u8g2,0,16,">");    u8g2_DrawStr(&u8g2,16,16,"* HangZhou");    u8g2_DrawStr(&u8g2,16,32,"* BeiJing");    u8g2_DrawStr(&u8g2,16,48,"* ShangHai");    u8g2_DrawStr(&u8g2,16,64,"<--");                                                                                        }// Omit ...

2.3 Press the key to switch the page

Page switching , Here is a simple example of button polling , such as Initially display the status of the welcome interface Next , After pressing different keys , Look up the table through the array , Determine the index number to jump to , Then according to the index number , Execute the display function corresponding to the index number through the function pointer , That is to achieve a page switching .

then , Namely In the new page state , Receive the next button command , Then switch to the next display state .

void (*current_operation_index)(); // Define a function pointer ​//...while(1){    if((KEY1==0)||(KEY2==0)||(KEY3==0))    {        delay_ms(10);// Desquamation         if(KEY1==0)        {            func_index = table[func_index].up;    // Turn up             while(!KEY1);// Let go of the test         }        if(KEY2==0)        {            func_index = table[func_index].down;    // Turn down             while(!KEY2);        }        if(KEY3==0)        {            func_index = table[func_index].enter;    // confirm             while(!KEY3);        }    }   ​    if (func_index != last_index)    {        current_operation_index = table[func_index].current_operation;​        u8g2_ClearBuffer(&u8g2);         (*current_operation_index)();// Execute the current operation function         u8g2_SendBuffer(&u8g2);​        last_index = func_index;    }}

3 demonstration

The test results are as follows ：

https://www.bilibili.com/video/BV1r5411R7eA

4 summary

This paper introduces a simple display method of multi-level menu , The essence is to look up a table through an array , Realize each page of menus at all levels （ state ） Handoff （ Jump ）, And in STM32 Programming on , adopt OLED The screen , And with the help of U8g2 Graphics library , Tested the display function of multi-level menu .