搖桿操作OLED多級菜單

隨著越來越多的人機交互需求，帶有屏幕的嵌入式設(shè)備需要展示的信息也越來越多，多種菜單隨著按鍵輸入進行各種深入、各種切換操作。如何方便的管理不同菜單之間的切換操作呢？本篇通過實驗來介紹多級菜單的實現(xiàn)思路。

1. 多級菜單介紹

在各種屏幕操作中，多級菜單其實是一種思路或者說是一種固定的編程框架。簡單來說就是當(dāng)按鍵觸發(fā)時，根據(jù)按鍵定義從數(shù)組中取出當(dāng)前按鍵需要跳轉(zhuǎn)的界面索引，然后根據(jù)索引去執(zhí)行響應(yīng)的界面函數(shù)。

2. 具體實現(xiàn)

1. 首先，我們要定義一個結(jié)構(gòu)體，結(jié)構(gòu)體成員變量一般包括界面索引號、界面函數(shù)指針和與實際按鍵對應(yīng)的變量，用來存儲按鍵表示的索引號。其中，索引號與界面函數(shù)指針是對應(yīng)的。

typedef struct
{
  unsigned char index;
  unsigned char up;
  unsigned char down;
  unsigned char left;
  unsigned char right;
  void (*operation)(void);
} KEY_TABLE;

本實驗中定義了四個按鍵，故定義了up、down、left、right四個按鍵變量。

2. 使用定義的結(jié)構(gòu)體類型來定義一個結(jié)構(gòu)體數(shù)組，有多少個界面，數(shù)組的元素個數(shù)就是多少。

KEY_TABLE table[9] =
{
  {0, 0, 0, 0, 0, (*menu11)},
  {1, 0, 0, 0, 0, (*menu12)},
  {2, 0, 0, 0, 0, (*menu21)},
  {3, 0, 0, 0, 0, (*menu22)},
  {4, 0, 0, 0, 0, (*menu23)},
  {5, 0, 0, 0, 0, (*menu31)},
  {6, 0, 0, 0, 0, (*menu32)},
  {7, 0, 0, 0, 0, (*menu33)},
  {8, 0, 0, 0, 0, (*menu34)},
};

本實驗中定義了9個界面，所以如上數(shù)組元素有9個，其中界面索引號從0到8，分別對應(yīng)其界面函數(shù)指針。本實驗中一級菜單有2個，二級菜單有3個，三級菜單有4個。

3. 確定各按鍵按下需要跳轉(zhuǎn)的界面索引。這一步驟確定了各界面之間的切換關(guān)系，非常重要。

在此之前可以通過草圖來整理菜單之間切換關(guān)系，如下所示為本實驗9個界面之間的關(guān)聯(lián)圖。

多級菜單結(jié)構(gòu)

舉幾個例子：

在index為0，即menu11界面下,確定{0, 0, 0, 0, 0, (*menu11)}中四個按鍵變量的值：

• 當(dāng)按下up鍵時，顯示menu11界面，即index為0的界面，那么此時up=0；
• 當(dāng)按下down鍵時，顯示menu12界面，即index為1的界面，那么此時down=1；
• 當(dāng)按下left鍵時，顯示menu11界面，即index為0的界面，那么此時down=0；
• 當(dāng)按下right鍵時，顯示menu21界面，即index為2的界面，那么此時down=2；

故得到{0, 0, 1, 0, 2, (*menu11)}

在index為5，即menu31界面下,確定{5, 0, 0, 0, 0, (*menu31)}中四個按鍵變量的值：

• 當(dāng)按下up鍵時，顯示menu31界面，即index為5的界面，那么此時up=5；
• 當(dāng)按下down鍵時，顯示menu32界面，即index為6的界面，那么此時down=6；
• 當(dāng)按下left鍵時，顯示menu21界面，即index為2的界面，那么此時down=2；
• 當(dāng)按下right鍵時，顯示menu31界面，即index為5的界面，那么此時down=5；

故得到{5, 5, 6, 2, 5, (*menu31)}

各個界面之間的跳轉(zhuǎn)關(guān)系根據(jù)實際的需求進行確立，如下為本實驗中完整的結(jié)構(gòu)體數(shù)組變量賦值情況。

KEY_TABLE table[9] =
{
  {0, 0, 1, 0, 2, (*menu11)},
  {1, 0, 1, 1, 4, (*menu12)},
  {2, 2, 3, 0, 5, (*menu21)},
  {3, 2, 3, 0, 7, (*menu22)},
  {4, 4, 4, 1, 4, (*menu23)},
  {5, 5, 6, 2, 5, (*menu31)},
  {6, 5, 6, 2, 6, (*menu32)},
  {7, 7, 8, 3, 7, (*menu33)},
  {8, 7, 8, 3, 8, (*menu34)},
};

4. 根據(jù)實際按鍵返回值對應(yīng)的功能，獲取按鍵對應(yīng)的界面索引號，然后根據(jù)索引號找到并執(zhí)行對應(yīng)的界面函數(shù)。

switch (keyValue)//獲取按鍵對應(yīng)序號
    {
      case 1: funIndex = table[funIndex].right; break;
      case 2: funIndex = table[funIndex].left; break;
      case 3: funIndex = table[funIndex].down; break;
      case 4: funIndex = table[funIndex].up; break;
    }
current = table[funIndex].operation;//根據(jù)需要獲取對應(yīng)需要執(zhí)行的函數(shù)
(*current)();//執(zhí)行獲取到的函數(shù)

3. 實驗材料

• Uno R3開發(fā)板
• 配套USB數(shù)據(jù)線
• 面包板及配套連接線
• 雙軸按鍵搖桿模塊
• OLED顯示屏

4. 實驗步驟

1. 根據(jù)原理圖搭建電路圖。

OLED屏的VCC、GND分別連接開發(fā)板的3.3V、GND，OLED屏的SDA和SCL分別連接開發(fā)板的A4和A5。雙軸按鍵搖桿模塊的VCC、GND分別連接開發(fā)板的5V、GND，模塊的X軸輸出、Y軸輸出分別連接開發(fā)板的模擬引腳A0、A1。

實驗原理圖如下圖所示：

實驗原理圖

2. 新建sketch，拷貝代碼替換自動生成的代碼并進行保存。

由于代碼較長，完整代碼可在文末獲取。

3. 連接開發(fā)板，設(shè)置好對應(yīng)端口號和開發(fā)板類型，進行程序下載。

程序下載