行動裝置可延伸人機介面系統及其快速建模平台

全文

(1)國立交通大學資訊科學系碩士論文. 行動裝置可延伸人機介面系統及其快速建模平台. Extensible MMI system for mobile device and it's rapidly prototyping environment. 研究生：黃明超指導教授：李嘉晃. 教授. 中華民國九十四年六月.

(2) 行動裝置可延伸人機介面系統及其快速建模平台. 研究生：黃明超. 指導教授：李嘉晃. 國立交通大學電機資訊學院. 教授. 資訊科學所碩士班. 中文摘要摘要由於科技的進步，使得行動電話外型日益新穎，而功能也愈加繁複。為使行動電話人機介面之畫面內容能產生豐富的外型變化，且能自訂功能選單以簡化操作方式，因此本論文設計 XMMI 2.0 讓使用者可藉由修改 MMDL 文件，而自訂行動電話人機介面。第二代可延伸人機介面系統(XMMI v2.0)由行動電話人機介面系統(MMIS)、行動電話人機介面描述語言(MMDL)與編輯系統構成。使用者可用編輯系統快速地設計行動電話人機介面並產生 MMDL 檔案，後將 MMDL 檔案上傳至使用 MMIS 的行動電話上，即完成人機介面的修改。. i.

(3) Extensible MMI system for mobile device and it's rapidly prototyping environment. Student: Ming-Chao Huang. Advisor: Prof. Chia-Hoang Lee. Department of Computer and Information Science National Chiao Tung University. 英文摘要 Abstract Due to the progress of technology, mobile phone has become more creative in appearance and complex in functions. The thesis purposes and designs an extensible man machine interface system, referred to XMMI 2.0, to allow users of mobile phone to personalize the visual interface as well as operational interface. The XMMI 2.0 consists of man machine interface system, referred to MMIS, man machine interface description language, referred to MMDL, and editing system. Users can use editor to design their own personalized interface and generate a MMDL file. Once MMDL is uploaded to mobile phone with MMIS, then the user interface becomes personalized.. ii.

(4) 目錄中文摘要 ................................................................. i 英文摘要 ................................................................ ii 目錄 ................................................................... iii 表目錄 .................................................................. iv 圖目錄 ................................................................... v 第一章緒論 ............................................................. 1 1.1 概述 ............................................................. 1 1.2 研究動機 ......................................................... 2 1.3 研究目標 ......................................................... 2 1.4 論文架構 ......................................................... 2 第二章文獻探討 ......................................................... 4 2.1 背景知識 ......................................................... 4. 2.2. 第三章 3.1. 3.2. 3.3 第四章 4.1 4.2 第五章 5.1 5.2. 2.1.1 可延伸標記語言(XML) ........................................ 4 2.1.2 文件格式定義(DTD) .......................................... 4 相關研究 ......................................................... 5 2.2.1 自訂佈景主題 ............................................... 5 2.2.2 可變式向量圖形(SVG) ........................................ 5 2.2.3 Macromedia FlashLite ....................................... 6 2.2.4 第一代可延伸人機介面系統(XMMI v1.0) ........................ 7 第二代可延伸人機介面系統(XMMI v2.0)設計與實作 ................... 10 行動電話人機介面描述語言(MMDL) .................................. 10 3.1.1 MMDL規劃設計 .............................................. 10 3.1.2 MMDL範例 .................................................. 17 行動電話人機介面系統(MMIS) ...................................... 18 3.2.1 MMIS核心架構 .............................................. 19 3.2.2 MMIS元件架構 .............................................. 20 3.2.3 MMIS變數架構 .............................................. 21 編輯系統 ........................................................ 21 系統應用實作與討論 .............................................. 25 建構行動電話人機介面 ............................................ 25 人機介面變更及個人化 ............................................ 30 結論 ............................................................ 32 研究總結 ........................................................ 32 未來方向 ........................................................ 32. 參考文獻 ................................................................ 33. iii.

(5) 表目錄表 1：個人資料之文件格式定義(DTD) ......................................... 4 表 2：Macromedia FlashLite 1.1 系統需求[10] ............................... 6 表 3：Phonebook與Messages之EUID檔案 ....................................... 9 表 4：SonyEricsson T630 人機介面圖 6 之畫面資源分類表 ..................... 11 表 5：MMDL之文件格式定義(DTD) ............................................ 13 表 6：mmi元素之意義 ...................................................... 14 表 7：control元素之意義 .................................................. 15 表 8：event元素之意義 .................................................... 15 表 9：resource元素之意義 ................................................. 15 表 10：variable元素之意義 ................................................ 16 表 11：link元素之意義 .................................................... 16 表 12：項目清單之MMDL範例 ................................................ 17 表 13：紅(R), 綠(G), 藍(B)色塊之MMDL檔案 ................................. 23. iv.

(6) 圖目錄圖 1：Siemens Xelibri系列與Nokia 7280 行動電話 ............................ 1 圖 2：Microsoft佈景主題產生器(Theme Generator)之範例 ...................... 5 圖 3：EUID元素分支圖 ...................................................... 7 圖 4：SonyEricsson T290i之 3 x 3 功能選單 .................................. 8 圖 5：XMMI v2.0 架構圖 ................................................... 10 圖 6：行動電話主要的人機介面狀態(以SonyEricsson T630 為例) ............... 11 圖 7：MMDL元素分支圖 ..................................................... 14 圖 8：MMIS系統架構圖 ..................................................... 18 圖 9：MMIS元件架構圖 ..................................................... 20 圖 10：編輯系統之操作畫面 ................................................ 22 圖 11：元素編輯視窗 ...................................................... 23 圖 12：紅(R), 綠(G), 藍(B)三色塊之狀態關聯圖 ............................. 24 圖 13：SonyEricsson T290i之待機狀態 ...................................... 圖 14：SonyEricsson T290i之 3 x 3 功能選單 ................................ 圖 15：SonyEricsson T290i之項目清單 ...................................... 圖 16：SonyEricsson T290i人機介面之狀態關聯圖 ............................ 圖 17：SonyEricsson T290i人機介面 ........................................ 圖 18：MMIS實作SonyEricsson T290i人機介面之結果 .......................... 圖 19：Phonebook, Messages, Calls之動畫 .................................. 圖 20：動畫功能選單 ....................................................... v. 25 26 27 28 29 29 30 31.

(7) 第一章. 緒論. 1.1 概述由於行動通訊技術的成熟，消費者在選購行動電話時，開始從外型和功能等多方面分析，以做為購買的依據。自 1983 年Motorola推出第一款商用行動電話DynaTAC 8000X[1]至今，由於通訊技術的進步，使得體積從當時的 13 x 1.75 x 3.5 英吋縮小至目前的 4.25 x 1.81 x 0.81 英吋(以非摺疊式行動電話Motorola E398 為例)。過去十五年來，行動電話的外型以小型化為主，今日體積已縮小至掌心大小，其未來發展已提升至另一層級。從 1998 年Nokia推出可更換外殼的行動電話，為其外型添加一股個人化的風潮後，近幾年Siemens Xelibri系列[2][3]與Nokia 7280 口紅機[4](圖 1)又賦予行動電話時尚的氣息，依此趨勢可看出未來行動電話外型必定會朝時尚與流行發展。. (A) Xelibri 4. (B) Xelibri 6 (C) Xelibri 8 (D) Nokia 7280 圖 1：Siemens Xelibri 系列與 Nokia 7280 行動電話. 當行動電話的外型改變後，使用者介面的畫面內容也必須做相對應的變化，以符合外型所要呈現的感覺。這必須由行動電話設計廠商在該款產品出廠前設定完成，然而因為畫面內容的修改必須由工程師和美工人員協力完成，因此使得這份工作格外困難。近年來，嵌入式系統之硬體漸趨成熟，使得行動電話的發展重點轉向提供使用者更豐富的功能，以滿足其多樣的需求。以近幾年推出的行動電話為例，新增的功能有. 1.

(8) 數位相機、MP3/AAC/M4A立體聲音樂播放器、FM立體聲收音機、3GPP/H.263/MPEG-4 播放器和XHTML瀏覽器[5]等等。行動電話設計廠商必須將新功能加至選單中，以讓使用者操作，但因為使用者對功能的需求各不相同，因此使得設計功能選單變得非常困難。雖然目前行動電話的人機介面系統提供自訂捷徑的功能，然而因為人機介面系統限制了自訂捷徑的個數，因此功能選單在項目的分群和排列上，顯得格外重要。. 1.2 研究動機過去由於嵌入式系統的運算速度及儲存容量的限制，使得開發人員在開發系統時，必須以執行效能為首要考量。傳統的人機介面系統其組態資料多以程式碼型式存在，使得每次修改組態資料皆需重新編譯連結。此外，行動電話人機介面狀態繁複，組態資料變得非常龐大而難以維護，導致行動電話設計廠商的專業人機介面工程師需要花費許多時間來維護系統。所以在此種情況下，使用者只能接受廠商預設的人機介面，無法做任何更動。. 1.3 研究目標為使行動電話設計廠商之人機介面工程師能專注於開發新的人機介面元件，美工人員和使用者能自行更改人機介面畫面內容及操作方式，因此設計第二代可延伸人機介面系統(XMMI v2.0)以達成目標。 XMMI v2.0 包含行動電話人機介面系統(MMIS)、行動電話人機介面描述語言(MMDL) 與編輯系統。MMIS 載入 MMDL 檔案，該檔案描述設定狀態之畫面內容及操作方式。另外，美工人員和使用者使用編輯系統設計所需的人機介面並產生 MMDL 檔案。. 1.4 論文架構第二章文獻探討將介紹背景知識及相關研究。 2.

(9) 第三章系統設計與實作將詳述行動電話人機介面描述語言(MMDL)、行動電話人機介面系統(MMIS)及編輯系統之設計及實作。第四章系統應用實例將以行動電話人機介面描述語言(MMDL)實際描寫目前行動電話的人機介面，再以行動電話人機介面系統(MMIS)呈現出該款行動電話的畫面內容及操作方式，並由修改 MMDL 得到不同之畫面及操作方式。第五章結論將總結 XMMI 2.0 及討論其未來發展方向。. 3.

(10) 第二章. 文獻探討. 2.1 背景知識 2.1.1 可延伸標記語言(XML) 可延伸標記語言(Extensible Markup Language, XML)[6]是由XML工作小組所制定，其目的為使開發人員能以XML為基礎，快速地發展新的標記語言及其處理程式。為使 XML 文件結構完整，XML 工作小組訂定基本語法規範以限制 XML 文件，基本語法如下所示： z z. 根元素(root)必須唯一，。元素(element)之標記必須以角括號(< >)括起，且非空元素其起始與結束標記必須成對存在，而空元素必須標註結束標記。. z. 屬性(attribute)之值必須以單引號(' ')或雙引號(" ")括起。. 若 XML 文件符合前述規範，則可稱此 XML 文件為格式良好(well-formed)的。. 2.1.2 文件格式定義(DTD) 文件格式定義(Document Type Definition, DTD)[6]是用以規範特定XML的內容架構。以描述個人資料之XML為例，若個人資料必須具備一個姓名、一個年齡、一個住址、零或數個電話，則可定義該描述個人資料之XML的DTD(表 1)以限制該XML文件。 <?xml version="1.0" encoding="UTF-8"?> <!ELEMENT person (address, phone*)> <!ATTLIST person name. CDATA #REQUIRED. age. CDATA #REQUIRED. >. 表 1：個人資料之文件格式定義(DTD) 表 1將姓名及年齡設為必須存在的屬性，而住址及電話則設為個人資料之子元素。. 4.

(11) 2.2 相關研究以下將依自訂佈景主題、可變式向量圖形、FlashLite、可延伸人機介面系統、風格化使用者介面之順序介紹相關研究內容。. 2.2.1 自訂佈景主題目前大部份的行動電話皆具有自訂佈景主題的功能。以使用Microsoft Windows CE 為作業系統的行動電話為例， Microsoft 即提供免費的佈景主題產生器 (Theme Generator v1.0 for Smartphone 2002[7])讓使用者可以在Microsoft Windows作業系統的電腦上，自行修改背景圖片、選單和字體顏色(圖 2)，再上傳至行動電話，創造屬於自己的佈景主題。. 圖 2：Microsoft 佈景主題產生器(Theme Generator)之範例其他廠商近幾年推出的行動電話，也提供了自訂佈景主題之功能，但此功能無法變更版面的編排和圖示，更無法更改行動電話之操作方式。. 2.2.2 可變式向量圖形(SVG) 可變式向量圖形(Scalable Vector Graphics, SVG)[8]架構於XML上，是一描述 2D圖形的標記語言。SVG可用向量圖形(矩形、圓形、橢圓)、圖片與文字三種圖形物件構築複雜圖形。由於SVG功能強大，因此需要運算能力較強的電腦，而由於行動裝置之運算能力不足，因此SVG Working Group設計Mobile SVG[9]以使行動裝置亦能支援向. 5.

(12) 量圖形。 Mobile SVG 是由限制 SVG 之功能來達到降低運算需求，其包含 SVGT(SVG Tiny) 與 SVGB(SVG Basic)兩種，是分別針對不同等級運算能力之行動裝置所設計。SVGT 適用於低階之行動裝置因此限制較多，而 SVGB 適用於高階之行動裝置。目前部分行動電話已支援 SVG Tiny 1.1，例如：Nokia 7710、SonyEricsson K700i, Z800i 等等。但因為 SVGT 格式內容無法接收行動電話相關事件，例如：訊號強度、來電等等，因此不適用於描述人機介面狀態。. 2.2.3 Macromedia FlashLite Macromedia Flash 是一封閉的向量圖形軟體，其功能與 SVG 相似，因為其功能強大，因此對硬體需求較高。為使行動電話能播放 Flash 檔案，因此 Macromedia 推出 FlashLite 以使行動電話能播放精簡的 Flash 檔案。目前FlashLite 1.1 已架構於Symbian及Microsoft Windows CE的行動電話上，部分行動電話已使用在瀏覽器、使用者介面、待機畫面等功能上，例如：Kyocera W21K, SonyEricsson W21S, Sanyo W21SA等等。表 2為其系統需求。項. 目. 需. 求. Minimum handset configuration. 1MB ROM, 50 MIPS, 2MB RAM 32 bit data bus. Memory. Content example: Most 20k content, requires 200 – 250k runtime memory. Code size. 280KB FL1.1 + 117KB SVG-T Note: code size listed were generated using ARM compiler. Final code size is dependant on CPU, compiler, and OS. 表 2：Macromedia FlashLite 1.1 系統需求[10]. 雖然 Flash 提供完整的開發環境予開發人員設計內容，但為保護開發人員在其上的創作，因此 Flash 採封閉式設計，意即無法由撥放檔還原至原始檔，也因此使得使用者難以修改 FlashLite 檔案之畫面內容及操作方式。. 6.

(13) 2.2.4 第一代可延伸人機介面系統(XMMI v1.0) 第一代可延伸人機介面系統(Extensible Man Machine Interface System version 1.0, XMMI v1.0)[11]可由使用者自訂行動電話人機介面狀態之畫面內容及操作方式。系統包含使用者介面解譯器(Embedded User Interface Interpreter, EUII)及使用者介面描述語言(Embedded User Interface Description, EUID)。EUII負責載入EUID 檔案，並呈現該檔案所描述之人機介面狀態。 EUID架構於XML上，包含euid, this, next, status, animation, image, autolink, right_func_key_down等元素。圖 3為EUID文件定義的樹狀圖。. 圖 3：EUID 元素分支圖. 7.

(14) 圖 4為SonyEricsson T290i之 3 x 3 功能選單的例子，表 3為該例之Phonebook及 Messages的EUID檔案。. 圖 4：SonyEricsson T290i 之 3 x 3 功能選單表 3為SonyEricsson T290i之 3 x 3 功能選單畫面(圖 4)的EUID檔案，而由於以EUID 描述之檔案過於龐大，因此僅節錄兩個狀態之描述。 menu9_phonebook.xml <euid alias="idle_screen"> <this> <image x="0" y="0" w="128" h="160" source="./wall.png"/> <status type="menu9" min="0" max="0"> <image x="0" y="0" w="32" h="32" source="./item1s.png"/> <image x="32" y="0" w="32" h="32" source="./item2.png"/> <image x="64" y="0" w="32" h="32" source="./item3.png"/> <image x="0" y="32" w="32" h="32" source="./item4.png"/> <image x="32" y="32" w="32" h="32" source="./item5.png"/> <image x="64" y="32" w="32" h="32" source="./item6.png"/> <image x="0" y="64" w="32" h="32" source="./item7.png"/> <image x="32" y="64" w="32" h="32" source="./item8.png"/> <image x="64" y="64" w="32" h="32" source="./item9.png"/> </status> </this>. 8.

(15) <next> <right_function_key_up linkto="./main_menu.xml"/> </next> </euid>. menu9_messages.xml <euid alias="idle_screen"> <this> <image x="0" y="0" w="128" h="160" source="./wall.png"/> <status type="menu9" min="0" max="0"> <image x="0" y="0" w="32" h="32" source="./item1.png"/> <image x="32" y="0" w="32" h="32" source="./item2s.png"/> <image x="64" y="0" w="32" h="32" source="./item3.png"/> <image x="0" y="32" w="32" h="32" source="./item4.png"/> <image x="32" y="32" w="32" h="32" source="./item5.png"/> <image x="64" y="32" w="32" h="32" source="./item6.png"/> <image x="0" y="64" w="32" h="32" source="./item7.png"/> <image x="32" y="64" w="32" h="32" source="./item8.png"/> <image x="64" y="64" w="32" h="32" source="./item9.png"/> </status> </this> <next> <right_function_key_up linkto="./main_menu.xml"/> </next> </euid>. 表 3：Phonebook 與 Messages 之 EUID 檔案由於 XMMI v1.0 之 EUID 狀態的設計侷限於固定不變之常數，因此若欲以 EUID 描述 3 x 3 功能選單將需以九個檔案分別描述，此外，由於 EUID 的連結只能指向靜態的 EUID 檔案，而缺乏可變性，故 EUID 無法描述項目清單。. 9.

(16) 第三章. 第二代可延伸人機介面系統(XMMI v2.0)設計與實作. 第二代可延伸人機介面系統(Extensible Man Machine Interface System version 2.0, XMMI v2.0)包含行動電話人機介面系統(MMIS)、行動電話人機介面描述語言(MMDL) 與編輯系統，系統架構如圖 5所示。 Mobile Phone. PC MMDL. Output (Screen, Speaker). MMIS. 編輯系統. RTOS 圖 5：XMMI v2.0 架構圖本系統之編輯系統架構於 Microsoft Windows 作業系統。使用者可用編輯系統設計行動電話人機介面並產生 MMDL 檔案，再以紅外線(Infrared)或藍芽(Bluetooth)等裝置，將 MMDL 檔案上傳至行動電話以讓 MMIS 使用。目前 MMIS 架構於 Microsoft Windows CE，但是實際上可架構於任何行動電話之即時作業系統(Real-Time Operating System, RTOS)上。RTOS 會將人機介面相關事件傳遞至 MMIS 處理後，MMIS 再以 RTOS 所提供之函數呈現該事件回應之資源。底下將依 MMDL、MMIS、編輯系統之順序介紹 XMMI v2.0。. 3.1 行動電話人機介面描述語言(MMDL) 行動電話人機介面描述語言(Mobile Phone Man-Machine Interface Description Language, MMDL)是用來描述行動電話人機介面狀態。. 3.1.1 MMDL 規劃設計依我們的觀察，行動電話的主要人機介面狀態既有三種類型，包括待機狀態、表. 10.

(17) 格式功能選單狀態與項目清單狀態。底下將以SonyEricsson T630 行動電話為例(圖 6)，說明人機介面狀態之各項特徵，包括畫面內容及操作方式。. (A) 待機狀態. (B) 3 x 4 功能選單. (C) 項目清單. 圖 6：行動電話主要的人機介面狀態(以 SonyEricsson T630 為例) 人機介面狀態之畫面內容可依類型(文字、圖片)和內容(靜態、動態)之差異來區隔各個畫面資源，請參考表 4。其中，資源內容分為靜態及動態兩種，靜態表示該資源內容為固定不變的常數，而動態表示該資源內容會隨系統變數更動，例如：圖 6A的中央功能鍵之提示圖片為靜態圖片，而左上角的訊號強度及右上角的電池剩餘電量為動態圖片。圖 6B的Select為文字類型的資源。. 類型內容靜. 動. 文. 字. 圖. 態. 態. 片. 中央功能鍵之提示圖片( ) 時間(01:33) 日期(13-Mar-05) 左右功能鍵之提示字串 (圖 6A: Calls, More，圖 6B和圖 6C: Select). 背景圖片訊號強度( ) 電池剩餘電量(. ). 表 4：SonyEricsson T630 人機介面圖 6之畫面資源分類表從表 4可得知資源元素的設計必須具有類型屬性以區分文字及圖片，而其內容必須可用固定資料或系統變數表示。人機介面狀態之操作方式可依內容區分為靜態及動態兩種。例如：在待機狀態， 11.

(18) 參考圖 6A，按下左功能鍵(Calls)，則狀態會轉移至通話清單。圖 6B和圖 6C之子狀態會隨選項之不同而轉移至不同狀態：在項目清單(圖 6C)選取文字(Text)項目的情況下，按下左功能鍵(Select)，則狀態會轉移至文字之項目清單，而若選取圖片(Picture) 項目，按下左功能鍵，則狀態會轉移至圖片之項目清單。因此狀態轉移元素的設計，其內容也必須可用固定資料及系統變數表示。為了讓使用者能在系統發生事件時，回應自己所設定之動作，因此事件元素的設計，必須允許以種類屬性區分不同事件，而以參數表示該事件種類之細項，例如：按鍵事件之參數可描述鍵值，而時間計數事件之參數可描述間隔時間之長短，如此即可讓使用者得到操作方式的個人化。由於一狀態之畫面與動作經常具有關聯性，以圖 6B為例，當使用者操控方向鍵選取不同項目時，畫面會即時反映目前選取之項目，而在使用者按下左功能鍵(Select) 時，會依目前焦點的位置而轉移至不同狀態。為了讓使用者能簡易的組態此類設定，而不需撰寫腳本(script)語言，因此設計了元件元素，該元素封裝複雜之畫面及動作，其處理交由MMIS以該元件之程式處理，其畫面內容及動作則由使用者用其他元素來組態設定。依前述規劃設計，底下為本系統所設計的 MMDL 文件格式定義。. <?xml version="1.0" encoding="UTF-8"?> <!ELEMENT mmi (control*, event*, resource*, variable*)> <!ELEMENT control (event*, resource*, variable*)> <!ATTLIST control type CDATA #REQUIRED > <!ELEMENT event (resource*, variable*, link*)> <!ATTLIST event name. CDATA #REQUIRED. parameter CDATA #REQUIRED > <!ELEMENT resource (#PCDATA | variable)*> <!ATTLIST resource. 12.

(19) type. CDATA #REQUIRED. x. CDATA #REQUIRED. y. CDATA #REQUIRED. width CDATA #REQUIRED height CDATA #REQUIRED > <!ELEMENT variable (#PCDATA)> <!ATTLIST variable name CDATA #REQUIRED > <!ELEMENT link (#PCDATA | variable)*>. 表 5：MMDL 之文件格式定義(DTD) 元件(control)元素包括使用者可以組態的畫面，例如：表格式功能選單、項目清單等等。元件元素之內容可為零或多個 event, resource, variable 等元素。資源(resource)元素顯示系統之狀態內容或 MMDL 指定內容，例如：時間、訊號強度，其內容可為字元資料或單一變數元素。變數(variable)元素存取 MMIS 系統之 MMIS 變數。變數元素之內容僅可為字元資料。連結(link)元素轉移 MMIS 系統狀態，其內容可為字元資料或單一變數元素。為使讀者能清楚瞭解MMDL之元素與子元素之關聯，因此整理MMDL之元素分支圖(圖 7)讓使用者能快速瞭解。. 13.

(20) <resource> <variable> <variable> <event> <link> <variable> <resource> <variable> <control> <variable>. <resource> <variable> <event> <mmi>. <variable>. <link> <variable> <resource> <variable>. <variable>. 圖 7：MMDL 元素分支圖接著將介紹各個元素及其屬性之意義，並舉例說明該元素之用法。元素 mmi. 元素之意義 MMDL 之根節點。描述一行動電話人機介面狀態。表 6：mmi 元素之意義. 範例：建立一行動電話人機介面狀態。 <mmi> </mmi>. 14.

(21) 元素 control type. 元素之意義描述一狀態所使用的元件。指定元件之類型。目前有效之元件類型有 menu, ninemenu, menuani, list。表 7：control 元素之意義. 範例：使用 menu 元件。 <control type="menu"> </control>. 元素 event type. 元素之意義描述事件回應方式。指定事件之名稱。目前有效之事件名稱有 keydown。. parameter 指定事件之參數，依事件名稱不同其參數意義也不同。表 8：event 元素之意義範例：設定使用者按下鍵碼為 88 之按鍵時，回應方式為。 <event type="keydown" parameter=""> ... </event>. 元素 resource. 元素之意義描述一狀態所使用的控制項及其組態參數與事件回應資訊。. type. 指定資源之類型。目前有效之資源類型有 color, text, image。. x. 指定資源之水平(X)座標。. y. 指定資源之垂直(Y)座標。. width. 指定資源之寬度。. height. 指定資源之高度。表 9：resource 元素之意義. 範例：將 backg.bmp 之圖片放置在(0,0)的位置，顯示視窗之大小為 128x160。 <resource type="image" x="0" y="0" width="128" height="160">backg.bmp</resource> 將 0xffffff(白色)之色塊放置在(16,16)的位置，顯示視窗之大小為 60x14。 <resource type="color" x="16" y="16" width="60" height="14">ffffff</resource>. 將 ISLab 之文字放置在(16,16)的位置，顯示視窗之大小為 60x14。 15.

(22) <resource type="text" x="16" y="16" width="60" height="14">ISLab</resource>. 元素 varialble name. 元素之意義存取行動電話人機介面系統變數。指定變數之名稱。表 10：variable 元素之意義. 範例：取得系統之 next 變數值。 <variable name=＂next＂/> 設定系統之 next 變數為 11000_phonebook.xml。 <variable name=＂next＂>11000_phonebook.xml</variable>. 元素 link. 元素之意義轉移狀態。表 11：link 元素之意義. 範例：轉移狀態至 00000_default.xml。 <link>00000_default.xml</link>. 16.

(23) 3.1.2 MMDL 範例表 12以SonyEricsson T630 的項目清單為範例解說各元素之用法。 1 <mmi> 2. <resource type="color" x="0" y="0" width="101" height="80">ffffff</resource>. 3. <event name="keyup" parameter="65">. 4 5 6. <link> <variable name="next"/> </link>. 7. </event>. 8. <event name="keyup" parameter="68">. 9. <link>10000_menu9.xml</link>. 10. </event>. 11. <control type="list">. 12. <variable name="lrange">5</variable>. 13. <variable name="llink">11100_callcontact.xml,11200_addcontact.xml, ...略</variable>. 14. <variable name="ltext">1Call contact,2Add contact, ...略</variable>. 15. <resource type="text" x="0" y="0" width="101" height="16">. 16. <variable name="ltext"/>. 17. </resource>. 18. <resource type="text" x="0" y="16" width="101" height="16">. 19. <variable name="ltext"/>. 20. </resource>. 21. <resource type="text" x="0" y="32" width="101" height="16">. 22. <variable name="ltext"/>. 23. </resource>. 24. <resource type="text" x="0" y="48" width="101" height="16">. 25. <variable name="ltext"/>. 26. </resource>. 27. <resource type="text" x="0" y="64" width="101" height="16">. 28. <variable name="ltext"/>. 29. </resource>. 30. <event name="focus" parameter="0">. 31. <resource type="color" x="0" y="0" width="101" height="16">ff00</resource>. 32. </event>. 33. </control>. 34 </mmi>. 表 12：項目清單之 MMDL 範例 Line 1, 34：MMDL 根元素，mmi 之開頭與結尾，將內容標示為一人機介面狀態。 Line 2：將純白色塊放置在(0,0)的位置，顯示視窗之大小為 101x80。. 17.

(24) Line 3~7：當按鍵事件發生且鍵值為 65 時，轉移至系統變數 next 值之狀態。 Line 8~10：當按鍵事件發生且鍵值為 68 時，轉移至 10000_menu9.xml 之狀態。 Line 11：此狀態包含 list(項目清單)元件。 Line 12：將 list 元件之 lrange 變數設為 5。 Line 13：將 list 元件之 llink 變數設為 11100_callcontact.xml, ...略。 Line 14：將 list 元件之 ltext 變數設為 1Call contact, ...略。 Line 15 ~ 29：分別指定五個資源之位置及寬高資訊，並顯示 ltext 之資訊。 Line 30 ~ 32：當元件之焦點事件發生時，顯示綠色色塊。. 3.2 行動電話人機介面系統(MMIS) 行動電話人機介面系統(Mobile Phone Man-Machine Interface System, MMIS) 是以MMDL檔案來設定行動電話人機介面狀態。此系統包含核心、元件和變數，其關係為核心載入MMDL檔案並依檔案之描述存取MMIS元件及MMIS變數，如圖 8所示。以下將依核心、元件、變數之順序介紹MMIS。 MMIS MMIS元件. MMIS變數. MMIS核心 MMIS 節點串列 MMDL. 節點管理. 事件處理. RTOS. 圖 8：MMIS 系統架構圖. 18. 資源呈現.

(25) 3.2.1 MMIS 核心架構 MMIS核心架構如圖 8之MMIS核心所示，其中包含資料結構為MMIS節點串列及節點管理、事件處理、資源呈現三模組，以下將先介紹MMIS節點串列再依序介紹各模組。由於行動電話人機介面之操作方式為樹狀結構，此種樹狀操作方式使得使用者欲使用其他功能時，必須先移至上一層之狀態，以選取其他功能。為減少重複載入相同之 MMDL 檔案，以節省電能並提升處理速度，因此 MMIS 節點串列採堆疊結構，在狀態切換後，並不立即釋放該節點，而是以堆疊結構儲存，在節點個數到達上限後，才釋放節點。 MMIS 節點管理模組細分為狀態轉移、配置與釋放三函數。狀態轉移函數負責檢查該狀態是否已存於 MMIS 節點串列中，若該狀態已存於 MMIS 節點串列，則此函數會直接切換至該狀態並送出重新載入(reload)事件，若該狀態不存在，則該函數會使用配置函數以載入該狀態之 MMDL 檔案，並送出載入(load)事件。配置函數負責載入 MMDL 檔案並放至 MMIS 節點串列。載入 MMDL 檔案時，會依其內容初始 MMIS 節點，而當 MMDL 檔案描述元件時，MMIS 會依元件元素之 type 屬性，將對應之 MMIS 元件變數放入 MMIS 節點，以使各個 MMIS 節點在使用相同之元件時，不致相干擾。而為降低 MMIS 對系統資源之負荷，以使更多資源可用在如影音處理等功能上，因此將 MMDL 檔案之格式及 DTD 驗證交由電腦處理，意即傳送至行動電話之 MMDL 必定是格式良好且有效的文件。釋放函數負責釋放 MMIS 節點串列尾端之節點，其使用時機是當配置函數欲將新節點放至 MMIS 節點串列前，檢查節點個數是否已到達上限，當串列已滿時，即會呼叫此函數。事件處理模組負責接收及處理 RTOS 事件，此模組在接收 RTOS 事件時，會先處理狀態之事件，即 mmi 子節點描述之事件，再將事件傳遞至此狀態各元件。資源呈現模組負責以 RTOS 提供之函數呈現 MMDL 之資源元素。當 MMIS 節點有資源欲呈現時，不論其資源內容為靜態或動態，皆可以交由資源呈現模組輸出。. 19.

(26) 3.2.2 MMIS 元件架構為使MMIS核心能使用MMIS元件，因此MMIS元件的定義必須具備元件名稱及alloc, init, proc, free四函數，MMIS核心會依事件之種類呼叫不同之元件函數，如圖 9所示。. 圖 9：MMIS 元件架構圖當 MMIS 核心載入 MMDL 檔案時，MMIS 核心會依檔案描述之元件，呼叫對應該元件之 alloc 函數，而 alloc 函數之動作流程依序為配置元件空間、初始元件之 MMIS 變數、將元件登錄至 MMIS 節點，最後將元件之 MMIS 變數登錄至 MMIS 系統，其中初始元件之 MMIS 變數是指依該元件元素之變數元素設定該 MMIS 變數。當 alloc 配置空間後，MMIS 核心會自動呼叫 init 函數以初始 MMIS 元件之內部變數。而在 MMIS 核心轉移狀態時，若發現目的狀態為目前狀態之子狀態，則會送出重新載入(reload)訊息，以重設元件之內部變數。當 MMIS 核心之事件處理模組收到 RTOS 之事件後，事件處理模組會自動呼叫元件之 proc 函數，並傳遞該事件，而 proc 函數負責事件之處理。而為使 alloc, init 及 free 函數在對應之事件發生時會確實被呼叫，因此這些函數仍會由 MMIS 核心直接呼叫。當 MMIS 核心欲釋放 MMIS 節點時，MMIS 核心會以 free 函數釋放該元件空間，包含內部變數及 MMIS 變數。當元件函數編寫完成後，需要至 regctrl.c 之 sys_init_ctrl 函數，以 reg_ctrl 20.

(27) 登錄該元件，以使 MMIS 核心能載入該元件。. 3.2.3 MMIS 變數架構 MMIS 變數分為系統 MMIS 變數與元件 MMIS 變數兩種。系統之 MMIS 變數為永久存在，例如標示下一狀態之 next 變數，不論狀態如何轉移皆可存取該變數。元件之 MMIS 變數則會隨著 MMIS 節點釋放而消失，例如標示項目清單內各項目字串的 ltext，即會隨節點釋放而消失。但不論是系統或元件之 MMIS 變數，其宣告皆相同。當使用 MMDL 之變數元素時，MMIS 核心即會依變數元素之名稱屬性存取對應之 MMIS 變數，以將 MMIS 變數之值回應至變數元素。為了讓 MMIS 變數更具彈性，使變數元素之描述能對應至一複雜的動作，因此將 MMIS 變數設計成一函數，以函數之參數對應至變數之儲存，而函數之回傳值對應至變數之取得。當系統之 MMIS 變數編寫完成後，需至 regvar.c 之 sys_init_var 函數，以 array_set 將該變數登錄至 MMIS 變數串列中，以供 MMIS 核心使用該變數。. 3.3 編輯系統由於MMDL檔案必須符合格式良好(well-formed)及驗證合格(validated). 兩. 要件，使得使用者不易以文字編輯器編寫MMDL檔案，因此設計編輯系統(圖 10)，讓使用者能以圖形化介面設計人機介面狀態。. 21.

(28) A B C. 圖 10：編輯系統之操作畫面使用者可在圖 10的A空白區域單擊滑鼠左鍵以新增行動電話人機介面狀態，編輯系統會以B矩形顯示該狀態之縮圖，而在矩形上雙擊滑鼠左鍵後，會出現C狀態編輯視窗。在狀態編輯視窗中，當使用者點選C, E, R, V, L按鈕欲新增元素時，即會出現元素編輯視窗(圖 11)讓使用者設定元素之屬性。由於MMDL之元素屬性皆不相同，因此元素編輯視窗會依MMDL之DTD對各元素屬性之描述而出現不同的屬性設定項目，如圖 11A 和圖 11B所示。. (A) 事件元素. (B) 資源元素. 22.

(29) 圖 11：元素編輯視窗. 在元素編輯視窗按下確定(OK)後，編輯系統即會以狀態編輯視窗元素樹所選取之元素循其父節點找尋並置於新元素至適合之位置，以維謢 MMDL 之分支架構。為了讓使用者在設計人機介面狀態時，能清楚瞭解各狀態之關聯，因此編輯系統以各狀態之MMDL檔案內的".xml"字串比對其他狀態之檔名，藉此連接各狀態。以表 13 所列之紅(R), 綠(G), 藍(B)色塊之MMDL檔案為例，由於紅色塊之MMDL檔案中出現 G.xml及B.xml兩字串，因此雖然B.xml為變數元素之值，仍會有一連線，請參考圖 12可看到R與G、B之連線。 R.xml <mmi> <resource type="color" x="0" y="0" width="101" height="80">ff</resource> <link>G.xml</link> <control type="list"> <variable name="llink">B.xml</variable> </control> </mmi> G.xml <mmi> <resource type="color" x="0" y="0" width="101" height="80">ff00</resource> </mmi> B.xml <mmi> <resource type="color" x="0" y="0" width="101" height="80">ff0000</resource> </mmi>. 表 13：紅(R), 綠(G), 藍(B)色塊之 MMDL 檔案. 23.

(30) 圖 12：紅(R), 綠(G), 藍(B)三色塊之狀態關聯圖. 24.

(31) 第四章. 系統應用實作與討論. 本章以SonyEricsson網頁之T290i試用話機[12]為範本，先以編輯系統建構T290i 人機介面之MMDL檔案，再以架構在Microsoft Windows CE的MMIS系統呈現T290i人機介面，並分析該話機人機介面與本系統人機介面之異同。最後以編輯系統將 3 x 3 功能選單置換為動畫功能選單，以說明XMMI 2.0 具有快速且強大的製作個人化的功能。. 4.1 建構行動電話人機介面 SonyEricsson T290i之待機狀態的畫面包含背景圖片、時間、訊號強度與電池剩餘電量，而操作方式為按下中央功能鍵，則移至 3 x 3 功能選單；按下選項功能鍵，則移至選項之項目清單。使用編輯系統建立此待機狀態牽涉下面步驟：首先放置背景圖片，接著分別建立 83(即為S鍵)及 90(即為Z鍵)兩鍵值之按鍵事件，在按下S鍵時，將狀態轉移至 3 x 3 功能選單的 10000_menu9.xml檔案，而在按下Z鍵時，將狀態轉移至選項之項目清單的 20000_options.xml檔案。如此編輯系統狀態編輯視窗已完成待機狀態之設定，並產生MMDL檔案。圖 13即為MMDL檔案在狀態編輯視窗之畫面結果。. 圖 13：SonyEricsson T290i 之待機狀態. 25.

(32) 接著將以編輯系統製做 3 x 3 功能選單。 SonyEricsson T290i之 3 x 3 功能選單的畫面包含一項目標題文字與九張項目片，而操作方式為按下左功能鍵(YES)，則移至目前選取項目之功能選單；按下. 圖右. 功能鍵(NO)，則移至待機狀態。使用編輯系統建立此 3 x 3 功能選單牽涉下面步驟：首先建立 65(即為A鍵)及 68(即為D鍵)兩鍵值之按鍵事件，在按下A鍵時，將狀態. 轉. 移至next變數之狀態，而在按下D鍵時，將狀態轉移至待機狀態的 00000_default.xml 檔案，接著放置 3 x 3 功能選單元件(ninemenu)，再設定該元件之ninemlink以控制各項目之狀態轉移與設定ninemimage以控制各項目之圖片，最後再放置一圖片資源以顯示元件狀態。如此編輯系統狀態編輯視窗已完成 3 x 3 功能. 選單之設定，並產生. MMDL檔案。圖 14即為MMDL檔案在狀態編輯視窗之畫面結果。. 圖 14：SonyEricsson T290i 之 3 x 3 功能選單由於 3 x 3 功能選單之圖片資源其內容為 MMIS 變數，而快速建模系統無法執行 MMIS 元件對該變數之運算，因此以圖片資源預設之灰色色塊顯示。. 26.

(33) 接著將以編輯系統製做項目清單。 SonyEricsson T290i之項目清單的畫面包含一功能標題文字、五個項目文字及反白效果(標示目前選取項目)，而操作方式為按下左功能鍵(YES)，則移至目前選取項目之功能選單；按下右功能鍵(NO)，則移至 3 x 3 功能選單。使用編輯系統建立此項目清單牽涉下面步驟：首先建立 65(即為A鍵)及 68(即為D鍵)兩鍵值之按鍵事件，在按下A鍵時，將狀態轉移至next變數之狀態，而在按下D鍵時，將狀態轉移至. 3. x 3 功能選單的 10000_menu9.xml檔案，接著放置項目清單元件(list)，再設定該元件之lrange以控制一頁的項目個數、設定llink以控制各項目之狀態轉移與設定ltext以控制各項目之文字，最後再放置五個(依lrange而定)文字資源以顯示元件. 狀態。如. 此編輯系統狀態編輯視窗已完成項目清單之設定，並產生MMDL檔案。圖 15即為MMDL檔案在狀態編輯視窗之畫面結果。. 圖 15：SonyEricsson T290i 之項目清單由於項目清單之文字資源其內容為 MMIS 變數，而快速建模系統無法執行 MMIS 元件對該變數之運算，因此以文字資源預設之 Empty 字串顯示。由於T290i試用話機之人機介面幾乎全部使用項目清單，因此只需建立一使用. 項. 目清單元件之MMDL檔案，再複製多份並更改llink及ltext兩MMIS變數，即建構出T290i 之人機介面，如圖 16所示。. 27.

(34) 圖 16：SonyEricsson T290i 人機介面之狀態關聯圖假設 MMIS 元件及相關圖片均具備之情況下，編輯系統只需花費 1 小時即可建構 SonyEricsson T290i 人機介面之所有狀態。其中多數時間皆花費在鍵入項目清單之項目文字上。為比較SonyEricsson T290i與MMIS模擬之T290i的差異，因此分別在兩款行動電話人機介面上執行以下步驟，結果請參考圖 17與圖 18。 1. 移至待機狀態。(圖 17與圖 18之A) 2. 按下中央功能鍵以進入 3 x 3 功能選單，焦點預設為電話簿(Phonebook)。 (圖 16 與圖 17 之 B) 3. 按下左功能鍵(YES)以進入電話簿之項目清單。(圖 17與圖 18之C) 4. 按下右功能鍵(NO)以退回 3 x 3 功能選單。(圖 17與圖 18之D) 5. 按下方向鍵(右，下)，以將焦點移至設定(Settings)。(圖 17與圖 18之E) 6. 按下左功能鍵(YES)以進入設定之項目清單。(圖 17與圖 18之F) 7. 按下右功能鍵(NO)以退回 3 x 3 功能選單。(圖 17與圖 18之G) 8. 按下方向鍵(右，下)，以將焦點移至遊戲(Games)。(圖 17與圖 18之H). 28.

(35) (A). (B). (E). (F) (G) 圖 17：SonyEricsson T290i 人機介面. (A). (E). (C). (B). (C). (F) (G) 圖 18：MMIS 實作 SonyEricsson T290i 人機介面之結果. (D). (H). (D). (H). 以畫面內容而言，圖 17與圖 18在C及F的項目清單之畫面呈現方式不盡相同，其差異在於功能標題文字與目前選項標示除刪除畫面上方功能標題文字以增加清單項目之空間外，主要差異在於 SonyEricsson T290i 對目前選項採用反白特效，而 MMIS 採用綠色色塊而因此造成差異，除此因素外，兩者之畫面內容即完全相同。以操作方式而言，兩者皆完全相同。以 E、F、G 之操作方式為例，當使用者由 E 狀態進入 F 狀態，再由 F 狀態進入 G 狀態(回到 E 狀態)時，該狀態必須保持原有的選項設定。由於 MMIS 系統具有載入(Load)及重新載入(Reload)事件的設計，因此可正確呈現該操作。. 29.

(36) 4.2 人機介面變更及個人化本節將以 3 x 3 功能選單置換為動畫功能選單為例，介紹本系統如何讓使用者能快速地製作個人化的人機介面。動畫功能選單是以播放連續圖片來呈現選項之變化，如圖 19所示，第一列的圖示即為由Phonebook切換至Messages時所播放之動畫。. 圖 19：Phonebook, Messages, Calls 之動畫使用編輯系統建立此動畫功能選單牽涉下面步驟：首先建立 65(即為A鍵)及 68(即為D鍵)兩鍵值之按鍵事件，在按下A鍵時，將狀態轉移至next變數之狀態，而在按下D 鍵時，將狀態轉移至待機狀態的 00000_default.xml檔案。接著放置動畫功能選單元件(menuani)，再設定該元件之bitmap以控制顯示圖片、與設定link以控制各項目之狀態轉移。如此編輯系統狀態編輯視窗已完成項目清單之設定，並產生MMDL檔案。圖 20 即為MMDL檔案在狀態編輯視窗之畫面結果。. 30.

(37) 圖 20：動畫功能選單由於動畫功能選單之圖片資源其內容為 MMIS 變數，而快速建模系統無法執行 MMIS 元件對該變數之運算，因此以圖片資源預設之灰色色塊顯示。在完成狀態設定後，尚需變更 3 x 3 功能選單之父功能及子功能之連結元素之靜態轉移內容，以達到將新狀態插入之目的。前述人機介面變更之實作，在已具備 MMIS 元件及相關圖片之情況下，僅需花費 10 分鐘便可完成此變更動作。. 31.

(38) 第五章. 結論. 5.1 研究總結本論文設計 XMMI v2.0 讓美工人員和使用者擁有自訂行動電話人機介面之能力。由第四章實際以編輯系統設計 SonyEricsson T290i 之過程及其耗費時間可得知，在行動電話使用 MMIS 為其人機介面系統之情況下，美工人員和使用者僅需短期的教育訓練即可用編輯系統快速地設計符合需求的人機介面。. 5.2 未來方向目前 MMIS 已可呈現色塊、文字及圖片資源，而 MMIS 元件已有表格式功能選單、動畫功能選單及項目清單，未來除繼續充實資源與 MMIS 元件外，尚有幾點有待努力，茲分述如下： z. 改善編輯系統之狀態關聯圖，使能清楚呈現行動電話人機介面狀態之拓樸，後以編輯系統建立多款行動電話人機介面，依此分析使用者對人機介面之喜好。. z. 改進編輯系統，讓使用者可在不瞭解 MMIS 元件之變數及資源放置的情況下，組態該元件。. z. 思考如何使 MMIS 與傳統的人機介面系統共存，讓使用者僅能修改特定人機介面，藉此保護人機介面系統之安全。. 32.

(39) 參考文獻 [1]. http://www.motorola.com/mediacenter/news/detail/0,,2467_2010_23,00.html. [2]. http://www.2nd-handys.de/handys/xelibri.html. [3]. http://communications.siemens.com/cds/frontdoor/0,2241,fr_fr_0_98128_rArNrNrNr N,00.html. [4]. http://www.nokia.com/nokia/0,,62356,00.html. [5]. http://www.nokia.com.tw/nokia/0,8764,72774,00.html. [6]. XML Core Working Group, "Extensible Markup Language (XML) 1.1", http://www.w3.org/TR/2004/REC-xml11-20040204/, 15 April 2004.. [7]. Microsoft, "Theme Generator v1.0 for Smartphone 2002", http://www.microsoft.com/downloads/details.aspx?amp;displaylang=en&familyid=1d 9f75aa-daa7-473c-a30f-cdc8c87ba75b&displaylang=en.. [8]. SVG Working Group, "Scalable Vector Graphics (SVG) 1.1 Specification", http://www.w3.org/TR/SVG/, 14 January 2003.. [9]. SVG Working Group, "Mobile SVG Profiles: SVG Tiny and SVG Basic", http://www.w3.org/TR/SVGMobile/, 14 January 2003.. [10]. http://www.macromedia.com/software/flashlite/productinfo/overview/datasheet_fram eset.html. [11]. 莊盟錫，「可延伸式人機介面系統」，國立交通大學，碩士論文，民國 93 年。. [12]. http://www.sonyericsson.com/spg.jsp?cc=tw&lc=zh&ver=4000&template=pp1_1_2 &zone=pp&lm=pp1&pid=10207. 33.

(40)