一.前言
本文主要是介紹以 NXP LPC55S69 平台開發的 E-Lock 方案之「使用者介面系統架構說明」。
現今電子產品，大多會需要讓使用者可以與產品裝置進行溝通、互動、操作使用 … 等。
從最基本的裝置上LED指示燈，到複雜的手機、電腦等物品，都算是具備使用者操作介面的功能，而一個產品的使用者操作介面設計，會直接帶給使用者直觀的體驗與感受。
接下來的文章，將說明本方案的「使用者介面架構之設計及運作」。
二.使用者介面系統規劃
要如何開始進行產品的使用者介面的設計呢 !!
首先要有產品功能規格書，根據規格需求產生出系統運作流程圖，有了系統運作流程圖後才進行軟體的開發作業，藉由按鍵、顯示器、語音提示 … 等，達到互動式的使用者操作介面。
使用者介面系統規劃流程說明 :
Step 1. 完整產品功能規格書的制定
Step 2. 使用者介面系統運作流程圖
根據功能規格定義，整理並繪製出詳細的系統運作流程圖 (本方案有11項功能)
Step 3. 使用者介面系統軟體建構開發
根據系統運流程圖，開始進行軟體架構的開發建構
Step 4. 使用者介面選單功能呈現
三.使用者介面軟體系統之設計概念
從上述章節瞭解進行軟體開發前，需事先準備 「使用者介面系統運作流程圖」，可有助於軟體開發時更加理解操作選單的脈絡，使系統規劃層級組織的更好。
使用者介面軟體系統之設計解析 :
1.使用者介面流程圖的運作說明
如下圖為 「添加管理員」的操作流程圖。
每一個框為當下執行狀態，搭配按鍵的操作，則會有上一層選單或是下一層選單
舉例 :
在「密碼用戶管理」的選單狀態 ,
則上一層選單，為「主選單」狀態。下一層選單，為「密碼設置操作」狀態。
且在「密碼用戶管理」選單狀態下會有 「添加管理員」、「添加用戶」、「刪除管理員」、「刪除用戶」的選項進行操作切換。
由此範例說明，可瞭解在每一選單狀態下，會有各別不相同的事件要進行處理，因此整理出「使用者介面系統運作流程圖」，便可明確掌握系統運作時的相關性。
2.使用者介面的系統管理解析
本方案的使用者介面流程圖共有 11 項，功能不算少。要如何完成這些的選單邏輯設計呢 !
首先，這個方案採用「狀態機」機制進行設計。
如下圖示與說明，由狀態機負責管理目前選單狀態的運作，當輸入單元有事件發生，即刻將資訊傳遞至狀態機系統，由狀態機系統進行狀態的切換及運作。
① 當 按鍵事件為「*」 上一層 , 則將狀態切換至 「主選單-設置密碼」
② 當 按鍵事件為「#」 下一層 , 則將狀態切換至 「密碼設置操作-輸入密碼」
③ 當 按鍵事件為「8」 選項切換 , 則將狀態切換至 「密碼用戶管理-添加用戶」
四.軟體系統解析說明
1.狀態機運作
在 appUI.h 的 typedef enum UIType_Status 為本方案所使用到的選單狀態機 Index列舉宣告。每增加一個選單狀態操作，則需要在此列舉宣告新增。
在密碼管理員操作，則會有「密碼管理員選單」、「密碼管理員新增」、「密碼管理員刪減」這三個狀態選單 Index 宣告。
本文主要是介紹以 NXP LPC55S69 平台開發的 E-Lock 方案之「使用者介面系統架構說明」。
現今電子產品，大多會需要讓使用者可以與產品裝置進行溝通、互動、操作使用 … 等。
從最基本的裝置上LED指示燈，到複雜的手機、電腦等物品，都算是具備使用者操作介面的功能，而一個產品的使用者操作介面設計，會直接帶給使用者直觀的體驗與感受。
接下來的文章，將說明本方案的「使用者介面架構之設計及運作」。
二.使用者介面系統規劃
要如何開始進行產品的使用者介面的設計呢 !!
首先要有產品功能規格書，根據規格需求產生出系統運作流程圖，有了系統運作流程圖後才進行軟體的開發作業，藉由按鍵、顯示器、語音提示 … 等，達到互動式的使用者操作介面。
使用者介面系統規劃流程說明 :
Step 1. 完整產品功能規格書的制定
|
1.解鎖方式 : 密碼解鎖、刷卡解鎖、指紋 … 等 2.互動方式 : 語音導覽、OLED 顯示指引、按鍵操作 3.低電量提醒 : 當電量低於 25% 時的語音提醒 4.密碼管理 : 新增、刪減 : : … 等等 |
Step 2. 使用者介面系統運作流程圖
根據功能規格定義，整理並繪製出詳細的系統運作流程圖 (本方案有11項功能)
Step 3. 使用者介面系統軟體建構開發
根據系統運流程圖，開始進行軟體架構的開發建構
Step 4. 使用者介面選單功能呈現
三.使用者介面軟體系統之設計概念
從上述章節瞭解進行軟體開發前，需事先準備 「使用者介面系統運作流程圖」，可有助於軟體開發時更加理解操作選單的脈絡，使系統規劃層級組織的更好。
使用者介面軟體系統之設計解析 :
1.使用者介面流程圖的運作說明
如下圖為 「添加管理員」的操作流程圖。
每一個框為當下執行狀態，搭配按鍵的操作，則會有上一層選單或是下一層選單
舉例 :
在「密碼用戶管理」的選單狀態 ,
則上一層選單，為「主選單」狀態。下一層選單，為「密碼設置操作」狀態。
且在「密碼用戶管理」選單狀態下會有 「添加管理員」、「添加用戶」、「刪除管理員」、「刪除用戶」的選項進行操作切換。
由此範例說明，可瞭解在每一選單狀態下，會有各別不相同的事件要進行處理，因此整理出「使用者介面系統運作流程圖」，便可明確掌握系統運作時的相關性。
2.使用者介面的系統管理解析
本方案的使用者介面流程圖共有 11 項，功能不算少。要如何完成這些的選單邏輯設計呢 !
首先，這個方案採用「狀態機」機制進行設計。
如下圖示與說明，由狀態機負責管理目前選單狀態的運作，當輸入單元有事件發生，即刻將資訊傳遞至狀態機系統，由狀態機系統進行狀態的切換及運作。
① 當 按鍵事件為「*」 上一層 , 則將狀態切換至 「主選單-設置密碼」
② 當 按鍵事件為「#」 下一層 , 則將狀態切換至 「密碼設置操作-輸入密碼」
③ 當 按鍵事件為「8」 選項切換 , 則將狀態切換至 「密碼用戶管理-添加用戶」
四.軟體系統解析說明
1.狀態機運作
在 appUI.h 的 typedef enum UIType_Status 為本方案所使用到的選單狀態機 Index列舉宣告。每增加一個選單狀態操作，則需要在此列舉宣告新增。
在密碼管理員操作，則會有「密碼管理員選單」、「密碼管理員新增」、「密碼管理員刪減」這三個狀態選單 Index 宣告。
2.使用者介面主程式
void UI_Handler(void) 為使用者介面系統的主要處理程式。
UIType.Status 為紀錄目前操作選單的 「狀態機Index」
利用 switch case 將各狀態操作選單進行區隔運作
3.主選單程式解析說明
將從 MainMenu()「主選單」這一個狀態選單，來進行軟體架構解析說明
每一個狀態選單大致上都是由這四區塊所組成 :
①選單超時 ( Timer out ) 機制
負責選單超時運作。
在此狀態選單發生超時情況，狀態機將會切換至 UI_AdminCheck 選單頁面。
void MainMenu(void)
{
if(UIType.TimeOut == 0)
{
UIType.MainMenuCURPos = 0;
UIType.MainMenuFirstLine = 0;
UIType.Init = true;
UIType.Status = UI_AdminCheck;
return;
}
:
:
:
}②狀態初始化
更新此狀態選單 OLED 標題資訊及相關配置
if(UIType.Init)
{
UIType.Init = false;
OLED_Cls();
if(SysCfg.Language == CHINESE)
{
OLED_ShowStr(32, 0, "<");
OLED_ShowCH(40, 0, ch_zcd);
OLED_ShowStr(88, 0, ">");
}
else OLED_ShowStr(20, 0, "");
}
③按鍵操作事件處理
按鍵中斷發生後，取出按鍵操作值，依照選單功能進行操作
「2」、「8」為上下移動選單內的項目
「*」 回到上一層選單狀態
「#」 進入下一層選單狀態
if(CapTouchType.Interrupt)
{
CapTouchType.KeyValue = capt_read();
if((CapTouchType.KeyValue == '2') && (UIType.MainMenuCURPos != 0))
UIType.MainMenuCURPos--;
:
else if((CapTouchType.KeyValue == '8') && (UIType.MainMenuCURPos != 2))
UIType.MainMenuCURPos++;
:
else if(CapTouchType.KeyValue == '*')
UIType.Status = UI_AdminCheck;
:
else if(CapTouchType.KeyValue == '#')
{
switch (UIType.MainMenuCURPos)
{
case 0 : UIType.Status = UI_Admin_PWMenu; return;
case 1 : UIType.Status = UICardUserManage; return;
case 2 : UIType.Status = UISysCfg; return;
}
}
}④操作狀態即時更新
當有任何事件變化，則會更新 OLED 顯示資訊
if(UIType.ScreenRefresh)
{
UIType.ScreenRefresh = false;
:
:
OLED_ShowCHHighlight(center, 2, ch_mmyhgl, UIType.MainMenuCURPos+1);
OLED_ShowCHHighlight(center, 4, ch_kpyhgl, UIType.MainMenuCURPos);
OLED_ShowCHHighlight(center, 6, ch_xtsz, UIType.MainMenuCURPos-1);
:
}
以上說明，則是單一個狀態選單的軟體運作架構
參照「使用者介面系統運作流程圖」一個一個環節進行組成，即可完成使用者介面系統的開發。
五. 參考資料
① NXP 官網 : https://www.nxp.com/
② NXP LPC55S69 Doc ( Datasheet、User manual )