開發一適用於眼動儀實驗室之學習平台

全文

(1)國立臺灣師範大學工業教育學系碩士論文指導教授：黃奇武教授. 開發一適用於眼動儀實驗室之學習平台 Developing an E-learning Platform for Eye-tracking Laboratory. 研究生：林宥宇中華民國 105 年 07 月.

(2) 謝誌在師大工教所念碩士班的生涯中，首先必須特別感謝我的指導教授黃奇武及共同指導教授張吉正兩位老師。在我做研究及寫論文的過程中遇到困難時，或者感到身心疲憊時，兩位老師總是會給予最大的鼓勵，讓我有繼續做下去的動力。在每次的實驗室會議中，兩位老師也總是很熱心的提供各方面的指點，讓我對接下來的研究工作有了方向，亦即才知道下一步該做哪些工作，也因此讓我訓練出良好的邏輯思考能力，相信這點在未來職場上非常受用，這都要感謝兩位老師的指導。同時，也特別感謝我的口試委員雲科大電子工程系楊博惠老師，在我口試的時候根據我的研究內容提供了許多寶貴的建議，以及給予許多關於論文的意見，讓我對這方面的知識更加深印象以及讓我的論文更加完整。而由於工教所規定學生必須做一項研究計畫，因此也要特別感謝吳明振老師，提供一個計劃的職缺讓我加入，讓我達到應有的畢業門檻，在做計畫的過程中，我也向吳老師學習到許多寶貴的知識，真的讓我受益良多。此外，在我從事研究及寫論文過程中，實驗室裡的同學劭謙、勇志，學弟友名、峻維、唯傑，學長士誠都是我很感謝的恩人，因為有你們，才讓我的碩士生涯不感到無聊，在遇到瓶頸時第一時間總是可以跟你們互相討論，互相交換意見，所以絕大部分的問題最後都能順利解決。最後，我要感謝我的家人，在我的碩士班生涯中，家人常常給我鼓勵，三不五時的會打電話來關心，同時也常常幫我處理一些生活上的問題，讓我有更有動力在碩士班奮鬥下去。.

(3) 摘要論文名稱：開發一適用於眼動儀實驗室之學習平台校. 頁. 數：58 頁. 名：國立臺灣師範大學. 校所名：工業教育學系碩士班—電機電子組畢業時間：一百零四年度第二學期. 學. 研究生：林宥宇. 位：碩士. 指導教授：黃奇武教授. 近來來資訊科技日新月異，其中眼動儀為一項熱門的新興領域，越來越多的大學生及研究生投入眼動儀的開發與研究工作。然而，眼動儀不是一項容易理解的領域，且目前亦無任何眼動儀領域相關的學習平台，因此許多學生若要進行眼動儀的研究，必須研讀許多書籍及論文等相關資料，如此甚為麻煩，為了解決上述問題，因此本論文即提出一套眼動儀學習平台，提供給有意願從事眼動儀領域的學生學習使用，讓學生瞭解眼動儀的基礎知識，以便於學生後續之研究。本學習平台包含六個學習模組及一個模擬器模組。學習模組部份介紹眼動儀基礎知識，含簡介、名詞釋義、操作流程、瞳孔偵測、校正及凝視點預估，後三者以互動式面板方式呈現，以取代傳統大量文字說明之方式，讓使用者易於瞭解其意義；模擬器模組部份提供了眼動儀常用的校正方式之模擬，以及本實驗室所發現之更為精確的區域校正方法之模擬。最後，平台還提供兩支模擬小程式，分別為九點校正模擬及頭動補償模擬，此部份是以更生動的方式來呈現，讓使用者更加瞭解其原理。. 關鍵詞：眼動儀、數位學習、模擬器. i.

(4) ABSTRACT Title：Developing an E-learning Platform for Eye-tracking Laboratory Pages：58 School：Nation Taiwan Normal University Department：Industrial Education Time：July 2016. Degree：Master. Researcher：Yu-Yu Lin. Advisor：Chi-Wu Huang. Recently, the information technology becomes popular, including eye-tracking. technology. Many undergraduate students and graduate students involve in this field. However, this field is hard to realize for students, and there is no learning platforms of eye-tracking. So, if students hope to learn this field they should read many textbooks and papers, it is a difficult work. To solve the above problem, this paper prevents an e-learning platform which is used to let students who wish to learn eye-tracking know this field so that they can study this field smoothly later. This platform contains six learning modules and a simulator module. The learning modules include introduction, definition of terms, operation flow, pupil detection, calibration and POG estimation, and the last three modules provide interactive panel that replace traditional education methods. The simulator. module provides simulators of popular calibration methods and the better calibration method which is discovered by our lab. And, this platform provides two more interesting simulators, 2D mapping simulator and head-movement compensation simulator, so that students can know the theory more easily. Keywords: Eye tracker, E-learning, Simulator. ii.

(5) 目次. 摘要 ...................................................................................................................... i ABSTRACT ........................................................................................................ ii 目次 ................................................................................................................... iii 表次 .................................................................................................................... v 圖次 ................................................................................................................... vi 第一章緒論....................................................................................................... 1 1.1 研究背景 ............................................................................................. 1 1.2 研究動機 ............................................................................................. 5 1.3 研究目的 ............................................................................................. 5 1.4 研究方法 ............................................................................................. 6 1.5 論文架構 ............................................................................................. 7 第二章眼動儀介紹........................................................................................... 9 2.1 文獻探討 ............................................................................................. 9 2.2 新校正方法─區域校正 ................................................................... 14 2.3 進階探討─頭動補償 ....................................................................... 15 第三章平台系統架構..................................................................................... 19 3.1 系統構思 ........................................................................................... 19 3.2 系統架構 ........................................................................................... 20 第四章學習平台介面..................................................................................... 25 iii.

(6) 4.1 首頁 ................................................................................................... 25 4.2 眼動儀學習頁面 ............................................................................... 27 第五章結論與建議......................................................................................... 55 5.1 結論 ................................................................................................... 55 5.2 建議 ................................................................................................... 56 參考文獻 ........................................................................................................... 57. iv.

(7) 表次. 表 2.1 上半區與傳統方式之誤差比較........................................................... 15 表 2.2 下半區與傳統方式之誤差比較........................................................... 15 表 3.1 六大學習模組之內容 ........................................................................... 23 表 4.1 校正 Example 範例數值 ...................................................................... 37 表 4.2 範例數值之係數答案 ........................................................................... 38. v.

(8) 圖次. 圖 1.1 使用者戴上眼動儀操作電腦之情形...................................................... 2 圖 1.2 用眼動儀玩打地鼠遊戲 .......................................................................... 2 圖 1.3 用眼動儀玩切水果遊戲 ......................................................................... 3 圖 1.4 利用眼動儀做心理學實驗...................................................................... 3 圖 1.5 實景眼動儀應用 ...................................................................................... 4 圖 1.6 平板附上眼動儀功能 .............................................................................. 4 圖 2.1 螢幕眼動儀使用情況 .............................................................................. 9 圖 2.2 實景眼動儀使用情況 ............................................................................ 10 圖 2.3 T60XL Eye Tracker ................................................................................ 10 圖 2.4 Tobii Glasses 2 ....................................................................................... 10 圖 2.5 本實驗室開發之眼動儀 ....................................................................... 11 圖 2.6 映射示意圖 ........................................................................................... 11 圖 2.7 校正畫面 ............................................................................................... 13 圖 2.8 區域校正平面 ........................................................................................ 14 圖 2.9 兩平面轉角示意圖 ................................................................................ 16 圖 2.10 二維與三維向量轉換示意圖.............................................................. 17 圖 3.1 傳統學習方式 ...................................................................................... 19 圖 3.2 透過 E-learning 學習方式 .................................................................... 20 圖 3.3 會員機制示意圖 .................................................................................. 21 圖 3.4 回饋機制示意圖 .................................................................................. 22 圖 3.5 字彙查詢面板 ...................................................................................... 22 圖 3.6 字彙查詢面板，以輸入 eye tracker 為例 .......................................... 23 vi.

(9) 圖 3.7 本平台之整體架構 .............................................................................. 23 圖 3.8 主版頁面架構 ...................................................................................... 24 圖 4.1 首頁(登入頁面) ................................................................................... 26 圖 4.2 帳號密碼錯誤訊息頁面 ...................................................................... 26 圖 4.3 註冊頁 .................................................................................................. 27 圖 4.4 註冊成功訊息 ...................................................................................... 27 圖 4.5 眼動儀學習頁面 ................................................................................... 28 圖 4.6 Introduction 初始頁面 .......................................................................... 28 圖 4.7 Introduction 點選三個按鈕後畫面 ...................................................... 29 圖 4.8 Definition of Terms 頁面 ...................................................................... 29 圖 4.9 Operation Flow 頁面 ............................................................................ 30 圖 4.10 眼動追蹤技術介紹頁面..................................................................... 31 圖 4.11 瞳孔偵測模組頁面 ............................................................................. 32 圖 4.12 點選 Input image 按鈕 ....................................................................... 32 圖 4.13 點選 Gray scale 按鈕.......................................................................... 33 圖 4.14 點選 Thresholding 按鈕 ..................................................................... 33 圖 4.15 點選 Blob detection 按鈕 ................................................................... 33 圖 4.16 點選 Calculate pupil center 按鈕 ....................................................... 34 圖 4.17 點選 Output image 按鈕 ..................................................................... 34 圖 4.18 校正原理之互動式面板..................................................................... 35 圖 4.19 校正原理互動式面板經點選完之結果 ............................................ 36 圖 4.20 校正 Example 互動式面板 ................................................................ 36 圖 4.21 校正 Example 互動式面板點完九點並點選 Solve 之畫面 ............. 37 圖 4.22 凝視點預估互動式面板..................................................................... 38 圖 4.23 模擬器頁面 ......................................................................................... 39 vii.

(10) 圖 4.24 六點校正-二次多項式頁面 ............................................................... 40 圖 4.25 六點校正之校正計算完成之頁面..................................................... 41 圖 4.26 六點校正之顯示出凝視點預估計算之頁面 .................................... 41 圖 4.27 六點校正之做完凝視點預估模擬之頁面 ........................................ 42 圖 4.28 九點校正-二次多項式頁面 ............................................................... 42 圖 4.29 九點校正之校正計算完成之頁面..................................................... 43 圖 4.30 九點校正之顯示出凝視點預估計算之頁面 .................................... 43 圖 4.31 九點校正之做完凝視點預估模擬之頁面 ........................................ 44 圖 4.32 區域校正頁面 ..................................................................................... 44 圖 4.33 區域校正模擬頁面 ............................................................................. 45 圖 4.34 上區域校正模擬完成之頁面............................................................. 46 圖 4.35 下區域校正模擬完成之頁面............................................................. 46 圖 4.36 區域校正之凝視點預估模擬計算，以上區域為例 ........................ 47 圖 4.37 區域校正之凝視點預估模擬計算，以下區域為例 ........................ 47 圖 4.38 頭動補償頁面 ..................................................................................... 48 圖 4.39 2D Mapping 模擬小程式 ................................................................... 49 圖 4.40 點完九點之程式畫面 ......................................................................... 49 圖 4.41 代入多項式計算出係數之程式畫面................................................. 50 圖 4.42 模擬預估凝視點之程式畫面............................................................. 51 圖 4.43 頭動補償模擬小程式 ........................................................................ 51 圖 4.44 模擬頭部不動時設置四點之程式畫面 ............................................ 52 圖 4.45 模擬頭動後設置四點之程式畫面..................................................... 53 圖 4.46 模擬頭動後偵測瞳孔座標之程式畫面 ............................................ 53 圖 4.47 模擬頭動補償後偵測瞳孔座標之程式畫面 .................................... 54. viii.

(11) 第一章緒論 1.1 研究背景眼動儀（Eye tracker）為一種可用來偵測人眼凝視點（Point of Gaze, POG）或凝視軌跡的裝置，亦即我們可得知受試者正在觀看電腦螢幕或實際景象中的哪些位置[1][2][3][16]，圖 1.1 為一位使用者戴上眼動儀後正在觀看電腦螢幕，系統會偵測出使用者在螢幕上之凝視點位置，此種技術稱為眼球追蹤技術（Eye-tracking）。近年來，眼動儀逐漸被廣泛應用於各個領域，包含教育、心理學、醫學及娛樂等等，由此可見此項科技產品日益重要。早在 1980 年代，就有學者提出提供給身障人士使用的眼動儀[4]，身障人士戴上眼動儀後即可自由操作電腦，而不需再使用鍵盤或滑鼠來操控。而後眼動儀經常應用於許多研究領域之中，例如研究人員欲瞭解受試者於電腦螢幕或實際景象中的凝視位置時，須讓受試者戴上眼動儀，便可偵測出凝視點或凝視軌跡，此例常用於教育與心理學研究領域，目的通常是為了推估受試者對於凝視物體的看法，藉由受試者的凝視位置或凝視軌跡來推測受試者的心理狀態，如圖 1.4 所示為師大教育神經科學實驗室在做的一項研究，即讓使用者戴上眼動儀並觀看數學教科書內容，研究者可得知使用者的凝視位置，此研究即可推估使用者是否清楚此數學理論的重點；圖 1.5 為另一項心理學研究之應用，使用者須戴上實景眼動儀做測試，然後觀看實際商店裡的商品，同理研究者可得知使用者觀看了哪些位置，進而推測使用者對於哪些商品較感興趣。此外，在娛樂方面近年來也被廣泛應用，像是各式各樣的電玩遊戲，以打地鼠及切水果遊戲為例（如圖 1.2 與圖 1.3），使用者戴上眼動儀便可用眼睛來進行打地鼠與切水果的動作。更特別的是，近年來甚至還有眼動儀可應用於智慧型手機或平板電腦上，以雙眼取代雙手，亦即可用 1.

(12) 眼睛來操控手機或平板，如圖 1.6 為日本富士通所開發之眼動平板，使用者可用眼睛來瀏覽網頁，極為方便。. 圖 1.1 使用者戴上眼動儀操作電腦之情形 (資料來源：[7]). 圖 1.2 用眼動儀玩打地鼠遊戲 (資料來源：[9]). 2.

(13) 圖 1.3 用眼動儀玩切水果遊戲 (資料來源：[10]). 圖 1.4 利用眼動儀做心理學實驗 (資料來源：[13]). 3.

(14) 圖 1.5 實景眼動儀應用 (資料來源：[11]). 圖 1.6 平板附上眼動儀功能 (資料來源：[11]). 由上述可知，眼動儀之應用相當廣泛，在我們生活當中已逐漸成為重要的一項技術，而由於眼動儀之開發過程中皆須使用攝影機拍攝眼睛影像並透過影像處理技術偵測出瞳孔中心位置，此為與影像處理領域息息相關的一門技術。因此現今已有許多大專院校之影像處理相關的實驗室正進行眼動儀的相關研究，甚至成立眼動儀專屬實驗室並投入眼動儀的開發工作， 4.

(15) 且至今幾乎無任何關於眼動儀領域的學習平台，因此本論文即開發一套眼動儀之學習平台供有意願從事此領域的學生學習使用。. 1.2 研究動機由於近年來資訊科技日益成熟，且由第一節內容敘述可知眼動儀在生活中的應用非常廣泛，已有許多大專院校紛紛成立眼動儀實驗室或影像處理實驗室進行眼動儀開發之相關研究，然而，眼動儀技術並不是一項簡易的技術，它包含了線性代數基礎知識、影像處理知識及眼動儀核心知識，對於新進實驗室之學生或有意願進入實驗室進行相關研究之學生，皆無法在短時間內全面瞭解，必須上網查詢相關的論文資料，以及跑圖書館找尋相關書籍，如此對於學生來說極為麻煩，不但花時間而且又花精神，甚至可能會降低學生的學習意願，如果能透過數位學習（E-learning）的方式讓學生進行學習，可減少學生困擾以及省去不少時間。雖然近年來由於資訊技術的發達，目前已有許多專家學者開發出良好的數位學習平台（E-learning platform）供學習者使用，如數學、物理、英文、影像處理及電子學等各領域的學習平台[14][15]。然而，現今卻沒有一套與眼動儀相關的學習平台供學生學習使用，如此甚為可惜。因此本論文開發一套學習平台，提供給眼動儀實驗室之學生學習使用，以便於學生之後續研究工作能順利進行。. 1.3 研究目的欲研究從事眼動儀研究之學生（大學專題生及研究生）於實驗室中進行研究工作時，必須先瞭解：「何謂眼動儀及其相關名詞」，然後方可開始進行眼動儀相關研究，而眼動儀相關知識主要可包含三個主題，分別為瞳 5.

(16) 孔偵測、校正及凝視點預估，此三項主題亦為眼動儀領域之中學生最應具備的重要基礎知識，學生若沒有具備這些基礎概念，那進入實驗室作研究必然會感到較為吃力，也希望透過本學習平台提供的知識能幫助學生在實驗室可順利進行研究。本學習平台之整體架構包含有六個學習模組及模擬器，學習模組分別為簡介、名詞釋義、操作原理、瞳孔偵測、校正及凝視點預估，而後三項模具互動式面板取代大量文字說明，模擬器的部分包含六點與九點校正、區域校正及頭動補償，所以被列為本平台之設計重點，希望讓使用者更加瞭解其意義。綜合以上敘述，本學習平台之主要目的可歸納出以下三項： 1.. 讓學生瞭解何謂眼動儀. 2.. 讓學生能在實驗室順利進行研究. 3.. 讓學生瞭解眼動儀常見的校正方式及比較其優缺. 1.4 研究方法本研究之研究方法大致可分為兩個階段。首先參考、蒐集各個相關的資料、文獻，意即眼動儀領域的相關資料，此部份之相關資料於第二章第一節做說明，而本實驗室亦於 Matlab 模擬計算而發現出一種較為準確的校正方式，稱為區域校正，其誤差比傳統方式小，然後亦探討頭動補償相關技術，然後進行彙整、分析與討論，徹底熟悉、瞭解眼動儀相關的知識，此為本研究的第一階段。第二階段為將上述所整理的眼動儀之相關知識、理論製作成一套眼動儀的教學平台，其開發工具主要使用微軟（Microsoft）所提供的開發平台 ASP.NET，以 VB.NET 撰寫程式及設計介面，並搭配 SQL 資料庫來存放會員資料及英文字彙資料，本學習平台主要包含六個學習模組及模擬器，其 6.

(17) 六個學習模組分別為簡介、名詞釋義、操作流程、瞳孔偵測、校正及凝視點預估。並附有字彙查詢面板供使用者查詢不熟悉的字彙。後三項學習模組為眼動儀領域的核心知識，因此以互動式面板之方式來呈現其意義，取代傳統以大量文字敘述的方式，讓使用者較能容易瞭解其意義。最後，平台之一項重點為設有一套模擬器，供使用者自行輸入數值作模擬並觀看結果，在製作模擬器之前均先以 Matlab 模擬過數次，確認理論無誤才放上平台。. 1.5 論文架構本論文共包含五個章節，第二章為眼動儀介紹，介紹眼動儀文獻相關的基礎理論，以及本實驗室提出的新校正方法與頭動補償探討。第三章為平台系統架構，介紹本學習平台的架構與設計方式，包含設計理念、平台整體架構及本平台含有的兩種機制。第四章為學習平台介面，主要介紹本學習平台的各頁面之內容及功能，含六個學習模組頁面及模擬器模組，六個學習模組頁面包含簡介頁面、名詞釋義頁面、操作流程頁面、瞳孔偵測頁面、校正頁面及凝視點預估頁面，模擬器模組包含三個部份分別為傳統的校正方式、區域校正及頭動補償探討。第五章為最後一章，為本論文之結論與建議。. 7.

(18) 8.

(19) 第二章眼動儀介紹本研究為開發一個專門提供給眼動儀實驗室學生的學習平台，本章第一節說明眼動儀相關文獻之理論，第二、三節分別說明本實驗室所實驗之區域校正方法及頭動補償技術探討，這些皆會設計於學習平台中。. 2.1 文獻探討一般如以功能來做區分，眼動儀可分為兩種，分別為螢幕眼動儀與實景眼動儀[5][6]。前者的攝影機設置於電腦螢幕周圍，功能為偵測受試者於電腦螢幕上的凝視點或凝視軌跡，其實際情況如圖 2.1 所示；後者之攝影機則直接設置於眼動儀裝置上，其可偵測受試者於實際景象中的凝視點或凝視軌跡，實際情況如圖 2.2 所示。下圖 2.3 與圖 2.4 為知名大廠 Tobii 所開發、販售之眼動儀，圖 2.3 為一台螢幕眼動儀，其攝影機設置於螢幕下方；而圖 2.4 為一副實景眼動儀，屬於穿戴式類型，可用於各種實際環境之凝視點分析。圖 2.5 為本實驗室開發螢幕-實景兩用之眼動儀[5]。. 圖 2.1 螢幕眼動儀使用情況 (資料來源：[12]). 9.

(20) 圖 2.2 實景眼動儀使用情況 (資料來源：[7]). 圖 2.3 T60XL Eye Tracker (資料來源：[8]). 圖 2.4 Tobii Glasses 2 (資料來源：[8]). 10.

(21) 圖 2.5 本實驗室開發之眼動儀. 一般眼動儀的操作程序大致上可分為三個步驟，包含瞳孔偵測（Pupil detection）、校正（Calibration）及凝視點預估（POG estimation），而其瞳孔偵測必須使用到影像處理技術來偵測出使用者的瞳孔中心座標，最常用的演算法之步驟為先將攝影機拍到的彩色瞳孔影像作灰階化（Gray scale），再將灰階影像作二值化（Thresholding），然後再作斑點偵測（Blob detection），最後計算出瞳孔中心，並藉由瞳孔轉動產生之向量，透過數學函數，映射（mapping）到螢幕上，最後即可預估出使用者在螢幕上的凝視點座標。. 2.1.1 映射(Mapping). 圖 2.6 映射示意圖. 本實驗室所設計之眼動儀採用 2D Mapping 技術[3]，如圖 2.6 所示。攝影機會拍攝到一瞳孔影像並偵測到瞳孔中心，再由瞳孔轉動方向產生之 11.

(22) 向量投射到螢幕平面上。而兩平面之間點對點投射的對應數學關係式有許多種，本研究採用之數學關係式為一組二次多項式函數，如(2.1)與(2.2)兩式。其中 Sx 與 Sy 代表螢幕上的點，x 與 y 表攝影機偵測到的瞳孔中心座標，a0-a5 及 b0-b5 為係數。. sx  a0  a1 x  a2 y  a3 xy  a4 x 2  a5 y 2 (2.1). s y  b0  b1 x  b2 y  b3 xy  b4 x 2  b5 y 2. (2.2). 2.2.2 校正(Calibration) 上述之式(2.1)與式(2.2)各有 6 個係數 a0-a5 及 b0-b5，其值與使用者之眼球座標、眼動儀位置等各項因素有關。故在映射之前，受試者被要求依序凝視螢幕上的許多定點(Sx,Sy)，一般為 9 點或 25 點，因這些點為預設的，故 Sx 與 Sy 為已知數，而同時攝影機拍攝到瞳孔影像並偵測出瞳孔中心座標(x,y)，故 x 與 y 亦為已知數，再將(Sx,Sy)及(x,y)代入二次多項式函數中，即可求得係數 a0-a5 及 b0-b5。此解出係數的過程即稱為校正[3][5][6]。實際校正畫面如圖 2.7 所示，其為本實驗室開發眼動儀系統所設計的校正畫面，畫面上具有九個預設的定點，使用者即須依序凝視這九個定點，且每看完一點使用者須用滑鼠點擊一下，同時系統即會記錄使用者此時的瞳孔中心座標，當看完這九個定點後，即將這些座標值代入二次多項式函數進行計算，其計算採用奇異值分解（Singular value decomposition, SVD）的方式，求出其 12 個係數。. 12.

(23) 圖 2.7 校正畫面. 2.2.3 凝視點預估(POG estimation) 此處 POG 為凝視點(Point of Gaze)的簡稱。透過上述之二次多項式函數，經校正解出 a0-a5 及 b0-b5 共 12 個係數後，即可進行凝視點預估，即每當使用者凝視螢幕上之任何位置時，攝影機亦會偵測到瞳孔中心座標(x,y)，然後再將(x,y)及 12 個係數代入二次多項式函數中即可求得新的凝視點座標(Sx,Sy)，亦即可偵測出受試者在觀看螢幕上的哪些位置，這也就是眼動儀的主要功能[3][5][6]。因此，這組多項式可用於校正及預估凝視點兩種計算，校正時(Sx,Sy) 與(x,y)為已知數，而所求的 12 個係數(a0-a5 及 b0-b5)為未知數；預估凝視點時則(x,y)與(a0-a5 及 b0-b5)為已知數，而所求(Sx,Sy)為未知數。. 上述為眼動儀的基本介紹，是欲從事相關研究的學生或新進實驗室學生須具備的基礎知識，本研究即將這些觀念及知識彙整，製作為一套學習平台。. 13.

(24) 2.2 新校正方法─區域校正上述的校正理論為傳統校正方式，而本實驗室發現透過另一種校正方式比傳統校正方式之結果更加準確，即區域校正，以上下區域為例，說明如下：. 2.2.1 原理我們將校正畫面分成上下兩個區域，上區域及下區域均各有九個校正點，其中中間的三個點重複。校正時，使用者依序採用上區域及下區域做校正，等於做了兩次的九點校正，因此上區域與下區域做完後都各解出一組係數。後續做凝視點預估時，若使用者凝視於上區域，就採用上區域解出的係數代入二次多項式做計算；同理，若使用者凝視於下區域的點，則採用下區域解出的係數做計算。. 2.2.2 模擬本實驗室利用先前學長所做實驗取得的資料，以 Matlab 做模擬計算，發現其結果的確較傳統方法準確。其誤差計算為平面上之定點與預估凝視點之間的距離，以 Pixel 為單位。. 圖 2.8 區域校正平面以上圖 2.8 為例，於上半區我們挑選其中兩個凝視點做模擬，分別為 (683,475)及(1346,657)，以 Matlab 做計算之誤差如表 2.1。 14.

(25) 表 2.1 上半區與傳統方式之誤差比較凝視點. 預估 POG 之誤差(上半. 預估 POG 之誤差(傳統方. 區). 式). (683,475). 6.765. 6.8366. (1346,657). 4.803. 19.9519. 同理，於下半區同樣取兩個凝視點做模擬計算，分別為(683,293)及 (1346,111)，以 Matlab 做計算之誤差如表 2.2。表 2.2 下半區與傳統方式之誤差比較凝視點. 預估 POG 之誤差(上半. 預估 POG 之誤差(傳統方. 區). 式). (683,293). 6.4342. 28.1273. (1346,111). 4.3844. 14.4505. 由上述之模擬計算結果得知，利用區域方式校正後的誤差會比傳統校正方式小，亦即較為準確。此部分亦為本實驗室之一大貢獻，亦設計於學習平台中，包含原理說明及模擬，讓使用者了解此種新方式之結果較為精確。. 2.3 進階探討─頭動補償 2.3.1 限制上述之眼動儀理論有一項限制，即當校正完成，後續作預估凝視點時，除了眼球可自由轉動外，頭部及眼動儀皆須保持固定不動，由於頭部偏離而使螢幕平面與眼睛平面之間產生角度與距離之改變，進而使誤差超出預估。因此進行眼動實驗時，使用者的須用頭架(chin rest)支撐頭部以保持固 15.

(26) 定，但長時間使用頭架必定會感到不舒適。因此本節提出一項方法可解決此限制，不但在測試時不必使用頭架，即頭部可自由移動，又能使誤差不超出預估，除了增加使用者的舒適感又可節省購置頭架之成本，乃一舉兩得。. 2.3.2 頭動補償觀念介紹使用者操作眼動儀時，有一負責拍攝眼睛影像(eye plane)的攝影機，當頭部保持固定時攝影機拍到的畫面為 PL1，PL2 則為頭部移動後所拍攝到之畫面，因此會呈現出兩個不同形狀與大小的四邊形。由此可知使用者頭部移動會造成影像平面之旋轉，自然會增加凝視點預估之誤差值，若能測出其旋轉量，且將其反轉之，即等於讓頭再從移動後之位置扳回至原先位置，如此自然就可將因頭部移動增加之誤差予以消除，此技術即稱之為頭動補償(Head-movement compensation)。如圖 2.9，若將 PL2 平移至 PL1，且令兩平面之座標原點重合，即可得兩平面之轉角，PL1 與 PL2 兩平面上之向量 T1 與 T2 亦有夾角，而此兩向量不在同一平面上，其夾角處於三維空間，固須將其轉成三維向量才可測出旋轉量。. 圖 2.9 兩平面轉角示意圖. 此轉換觀念繪製於圖 2.10 所示，以 T2 及 P2 兩向量為例，圖中二維向量 T2(x,y)轉成三維向量 P2(x’,y’,q)，其中 q 為不等於零之任何值，表示向 16.

(27) 量 P2 有無窮多個，但無窮多個 P2 之角度與方向皆相同，且轉回成二維向量時僅有 T2(x,y)一個向量，此圖以 q=0.5, 1, 2 為例繪出三個向量 P2，分別為(0.5x,0.5y,0.5)、(x,y,1)及(2x,2y,2)。. 圖 2.10 二維與三維向量轉換示意圖. 二維向量 T1 及 T2 分別轉成三維向量 P1 及 P2，其轉角可用式(2.3)與 (2.4)表示。其中式(2.3)表示 P1 正轉至 P2，式(2.4)表示 P2 反轉至 P1。. P2  M12 P1 P1  M12 1 P2. (2.3) (2.4). M12 與 M12-1 分別是兩者之正轉矩陣與反轉矩陣，其旋轉方向相反但旋轉之相應量相同，我們可在 eye plane 上預定一組四個定點以及二維與三維之座標轉換即可求出 M12 與 M12-1，然後將 PL2 上的向量 P2 反轉至 P1，再作凝視點預估，如此原先因頭動而新產生的誤差即被消除或稱被補償。此項技術亦呈現於本平台。. 17.

(28) 18.

(29) 第三章平台系統架構本章分為兩節，分別為系統構思及系統架構。前者主要介紹本系統的設計理念；後者的介紹包含本學習平台的兩種機制以及本平台的整體架構。其詳細情形將於以下說明。. 3.1 系統構思眼動儀為一用來追蹤與測量眼球運動軌跡或位置的設備，近年來在心理學、教育學等各學術領域中已被廣泛應用，可見此項新興科技之重要性。由於現今學者所開發的學習平台中，有關於眼動儀領域之學習平台寥寥無幾，學生若是要學習則須上網搜尋論文或是跑圖書館閱讀相關書籍才進入實驗室開始進行研究工作，如此頗為麻煩，因此本系統即以眼動儀為主題，設計一套供學生學習使用的平台，目的在於減少學生學習困擾，此設計理念於圖 3.1 與圖 3.2 所示，圖 3.1 為學生傳統之學習方式，須透過研讀教科書及相關論文再進行眼動儀之研究，較為費時費力，圖 3.2 為學生僅透過使用本學習平台學習後即可進行眼動儀之研究，較為省時省力。. Student. Textbooks , papers 圖 3.1 傳統學習方式. 19. Research in lab.

(30) Student. E-Learning Platform. Research in lab. 圖 3.2 透過 E-learning 學習方式. 3.2 系統架構 3.2.1 系統機制由於本平台專門提供給眼動儀實驗室之學生學習使用，為了能提供個人專屬的學習環境，因此具有會員機制及回饋機制。. 1.會員機制如圖 3.3 為本學習平台之會員機制示意圖，使用者若為第一次使用，即非本系統之會員，必須先行註冊，輸入相關資料，其輸入的資料須符合格式，若不符格式系統會出現錯誤訊息告知使用者，若格式均符合即註冊成功，成為會員，緊接著系統直接進入首頁，即登入畫面，使用者須輸入帳號及密碼登入本系統。登入的帳號與密碼須與註冊之帳號與密碼相同，若不相同即為登入失敗，此時系統將會跳至錯誤訊息頁面以告知使用者輸入之帳號及密碼有誤。若登入成功，即可進入本學習平台進行學習。若使用完時須點選登出按鈕，登出後系統將再跳至首頁。. 20.

(31) Homepage No. Register. Are you a. Yes Input username. Yes. and password. Confirm. No. No. Confirm the username and. Error Yes Log in. successfully Learning Platform. End of. Yes Log out 圖 3.3 會員機制示意圖. 2.回饋機制如圖 3.4 為系統之回饋機制示意圖，系統會提出問題或呈現出互動式 21. No.

(32) 面板，使用者再進行操作或作答，系統再回饋給使用者答案或相關訊息。互動式面板為本學習平台之一大特色，在瞳孔偵測、校正及凝視點預估三個學習模組即設有互動式面板，目的在於取代傳統上以文字敘述的方式，以簡易明瞭的介面來呈現，學習者不需要花時間閱讀任何操作手冊即能輕鬆進行學習，在面板下方皆有一列訊息區（Message）會告知使用者操作步驟，省去學生閱讀資料的時間，並加深學生印象，讓學生清楚瞭解其意義。此外，本平台也含有字彙查詢的功能，同樣設計為互動式面板的方式呈現於每一頁面，使用者在使用本平台的過程中，若遇到不懂的字彙，可輸入其英文單字並按下按鈕，系統便會回饋中文給使用者，以便於使用者提升專業英文字彙能力。其字彙查詢面板外觀於圖 3.5 所示，而圖 3.6 為以使用者輸入 eye tracker 後點選按鈕為例所呈現之畫面。. Provide questions or panels System. Operate or enter solutions Feedback the solutions or messages 圖 3.4 回饋機制示意圖. 圖 3.5 字彙查詢面板 22. User.

(33) 圖 3.6 字彙查詢面板，以輸入 eye tracker 為例. 3.2.2 平台整體架構本學習平台包含許多提供使用者學習眼動儀原理及技術的學習模組，其整體架構如圖 3.7 所示。頁面大多採用主版頁面（Master page）的架構（如圖 3.8 所示），每一學習模組均以一個內容頁面呈現，其學習模組包含簡介（Introduction）、名詞釋義（Definition of Terms）、操作流程（Operation Flow）、瞳孔偵測（Pupil Detection）、校正（Calibration）及凝視點預估（POG Estimation）。此六個學習模組之簡要內容列於表 3.1。此外，本平台亦包含較為進階的模組為模擬器（Simulator），模擬器提供使用者進行校正及凝視點預估之模擬以讓使用者更加瞭解其原理，另外也融入頭動補償之介紹。. E-learning Plaform. Introduction. Definition of Terms. Operation Flow. Pupil Detection. Calibration. 圖 3.7 本平台之整體架構. 表 3.3 六大學習模組之內容學習模組. 內容 23. POG Estimation. Simulator.

(34) Introduction. 簡介何謂眼動儀及其應用。. Definition of Terms. 列出眼動儀領域之重要名詞。. Operation Flow. 列出眼動儀的操作流程及各步驟之運作原理。. Pupil Detection. 以互動式面板呈現瞳孔偵測之意義。. Calibration. 以互動式面板呈現眼動儀校正的意義。. POG Estimation. 以互動式面板呈現凝視點預估之意義。. 上述提及之主版頁面為本平台之頁面架構，此為 ASP.NET 支援的設計技巧，其觀念類似 Microsoft Word 之頁首頁尾，亦即每一頁均要呈現出來的部份。以圖 3.8 所示，上方綠色區塊稱為主版區塊（Master page block），即每一頁均要呈現的部份，所以在此放置了本學習平台的六個學習模組按鈕、模擬器模組按鈕及登出按鈕，下方紅色區塊稱為內容頁面（Content page），根據使用者點選上方主版區塊的模組按鈕，將其內容呈現於此區塊。這樣的架構之目的在於讓使用者操作較為便利。. 圖 3.8 主版頁面架構. 24.

(35) 第四章學習平台介面本章介紹本眼動儀學習平台各個頁面的內容及功能，其各頁面與內容將於以下詳細說明。. 4.1 首頁系統之首頁即為登入畫面，如圖 4.1 所示。已成為會員之使用者須輸入帳號及密碼，若帳號及密碼無誤即登入成功而進入眼動儀學習頁面。若帳號或密碼有誤則會跳至錯誤訊息頁面（如圖 4.2），告知使用者帳號密碼有誤。如果使用者為第一次使用，須進行註冊，點選註冊按鈕後可進入註冊頁面（如圖 4.3），使用者須依序填入資料，若資料有誤時皆會在旁邊顯示紅字錯誤訊息告知使用者，例如欄位空白、確認密碼與密碼不相符或 E-mail 25.

(36) 格式錯誤等。若輸入資料皆正確並點選 Register 按鈕即會跳出一註冊成功訊息（如圖 4.4），在按下確定後頁面將跳至登入頁面。. 圖 4.1 首頁(登入頁面). 圖 4.2 帳號密碼錯誤訊息頁面. 26.

(37) 圖 4.3 註冊頁. 圖 4.4 註冊成功訊息. 4.2 眼動儀學習頁面使用者登入成功後，即進入眼動儀學習頁面，其頁面之外觀於圖 4.5 所示。中央呈現一副眼動儀之圖片，上方的橫幅（主板區塊）放置了六個學習模組按鈕、模擬器按鈕及登出按鈕，點選其每一按鈕後進入之頁面外觀及功能將繼續於以下說明。. 27.

(38) 圖 4.5 眼動儀學習頁面. 4.2.1 Introduction 使用者若點選主板區塊上之 Introduction 按鈕，下方內容頁面即呈現此畫面（如圖 4.6）。簡介頁面主要簡介何謂眼動儀、眼動儀之應用及提供眼動儀的公司網站，使用者需點選 Show Answer 按鈕方可觀看答案，三個按鈕接點選後之畫面如圖 4.7 所示。. 圖 4.6 Introduction 初始頁面. 28.

(39) 圖 4.7 Introduction 點選三個按鈕後畫面. 4.2.2 Definition of Terms 同理，使用者若點選主板區塊上之 Definition of Terms 按鈕，下方內容頁面即呈現此名詞釋義頁面，如圖 4.8 所示。本頁面以表格呈現出與眼動儀有關的重要專有名詞，如校正、凝視點、光軸、視軸等名詞，並簡單說明其意義。因此本學習模組可讓使用者瞭解眼動儀研究領域之專有名詞。. 圖 4.8 Definition of Terms 頁面. 29.

(40) 4.2.3 Operation Flow 本學習模組說明眼動儀的操作流程及其各步驟之原理，其頁面外觀如圖 4.9 所示。目的是讓使用者事先快速瞭解眼動儀操作的過程及運作原理，以便於後續學習順利。其操作流程分為下列五個步驟並呈現於本學習模組頁面： 1.. 使用者戴上眼動儀，依序觀看螢幕上之定點(Sx,Sy)。. 2.. 每觀看一點，攝影機皆偵測到瞳孔中心作標(x,y)。. 3.. 利用二次多項式函數將上述兩組座標代入並求出其係數。. 4.. 求得係數後便可進行凝視點預估，使用者觀看螢幕攝影機亦偵測出瞳孔中心座標(x,y)。. 5.. 將係數及瞳孔中心座標代回二次多項式函數即可球出後續使用者於螢幕上之凝視點(Sx,Sy)。. 圖 4.9 Operation Flow 頁面. 此外，於本頁面下方設置一眼動追蹤技術介紹之按鈕，點擊進入之頁面如圖 4.10 所示。本頁目的在於讓使用者了解其技術之內涵，內容為 2D mapping 之追蹤方法，最後也提及除了 2D 方法外另亦有學者提出 3D 模型追蹤方法，但此 3D 方法較為複雜，因此本平台所傳授之眼動追蹤技術採 30.

(41) 用 2D 方法，因其較為簡易明瞭。為了讓使用者更加了解其二項式之用途，頁面下方呈現一簡易表格，說明了此二項式分別用於校正及預估凝視點之差異，亦即讓使用者了解校正時與預估凝視點時之已知數及未知數分別為何。. 圖 4.10 眼動追蹤技術介紹頁面. 4.2.4 Pupil Detection 瞳孔偵測為進行眼動儀操作程序的第一個步驟。大多數的瞳孔偵測之演算法程序可分為六個步驟，分別為輸入影像（Input image）、灰階化（Gray scale）、二值化（Thresholding）、斑點偵測（Blob detection）、計算瞳孔中心（Calculate pupil center）及輸出影像（Output image）。此瞳孔偵測學習模組之頁面外觀如圖 4.11 所示，由圖可見本學習模組附有一個互動式面板呈現上述瞳孔偵測演算法之步驟，取代傳統以大量文字說明的方式讓使用者加深印象，更能明確瞭解其意義。其互動式面板左方為圖像表示區，右方為瞳孔偵測演算法六個步驟的按鈕，使用者可依序點選步驟按鈕，其相關知眼睛圖像即會呈現於左方的圖象表示區，即以圖像的方式表示其意義。而於面板下方有一列訊息區（Message），會告知使用者操作步驟，依據使用者點選步驟按鈕，其訊息區亦會顯示使用者點選之步驟所代表的意義。根據使用者所點選之步驟按 31.

(42) 鈕，所呈現之畫面如圖 4.12 至圖 4.17 所示。. 圖 4.11 瞳孔偵測模組頁面. 圖 4.12 點選 Input image 按鈕. 32.

(43) 圖 4.13 點選 Gray scale 按鈕. 圖 4.14 點選 Thresholding 按鈕. 圖 4.15 點選 Blob detection 按鈕. 33.

(44) 圖 4.16 點選 Calculate pupil center 按鈕. 圖 4.17 點選 Output image 按鈕. 4.2.5 Calibration 在眼動儀操作程序中，瞳孔偵測完成後，下一步驟即為校正，此為一項非常重要的步驟。同樣的本頁面以一個互動式面板呈現校正原理（如圖 4.18 所示），由於校正的程序較繁雜，若以大量文字說明之方式必定會讓使用者感到厭倦，甚至降低學習意願，因此本學習模組以此互動式面板來呈現較能讓使用者明確瞭解其意義。其互動式面板下方的訊息區會告訴使用者操作步驟。一開始使用者須先點選左上方之 Start 按鈕才可開始進行本程序，接著依序點選左方 Screen 34.

(45) plane 的九個定點，其相關數學式子將自動填入右方之矩陣式，同時於下方的訊息區顯示其意義，當點完九點之後使用者可於右方之解答區點選 Solve 按鈕觀看結果，其最後的結果畫面如圖 4.19 所示，在面板外之右下方顯示黃色區域並以文字告知使用者其 12 個係數以求得，校正步驟完成。不過上述的互動式面板是以數學式的型式呈現給學習者，對於某些學習者可能較為不習慣或者仍然沒有全盤理解校正的意義。因此，若使用者想進一步瞭解校正之意涵，可點選 Example 按鈕，進而進入另一頁面（如圖 4.20 所示），而此頁面提供一組範例，同樣是以互動式面板呈現，與上述不同的是本互動式面板是以一組實際數值型式代入矩陣式，並可觀看最後結果，如此可讓使用者更明確瞭解校正之原理並加深印象。其點選九點完再點選 Solve 按鈕後之畫面如圖 4.21 所示。. 圖 4.18 校正原理之互動式面板. 35.

(46) 圖 4.19 校正原理互動式面板經點選完之結果. 圖 4.20 校正 Example 互動式面板. 36.

(47) 圖 4.21 校正 Example 互動式面板點完九點並點選 Solve 之畫面. 上圖 4.21 中，使用者可點選螢幕平面上任一點，然後下方即可顯示其預估凝視點座標與誤差。此組範例數值如表 4.1 所示，而此組範例數值所計算出的係數答案如表 4.2 所示。. 表 4.4 校正 Example 範例數值 Screen plane 定點順序. 定點座標. Pupil center 座標(x,y). (Sx,Sy). 1. (20,748). (129,77). 2. (683,748). (161,79). 3. (1346,748). (188,81). 4. (20,384). (127,60). 5. (683,384). (161,63). 6. (1346,384). (188,68). 7. (20,20). (125,44). 8. (683,20). (157,44). 9. (1346,20). (186,54) 37.

(48) 表 4.5 範例數值之係數答案係數. 答案. a0. -784.0472. a1. 0.6172. a2. -10.8351. a3. -0.0174. a4. 0.0726. a5. 0.0896. b0. -1284.075173. b1. 13.397464. b2. 3.823917. b3. 0.061788. b4. -0.063963. b5. 0.076606. 4.2.6 POG Estimation 當眼動儀之校正程序完成後，下一步即可進行凝視點預估。同理，本頁面提供一個互動式面板呈現其意義，其互動式面板外觀如圖 4.22 所示。使用者可點選左方之虛擬凝視點，而其相關之眼睛瞳孔轉動產生之向量以圖像方式呈現於中央，好讓使用者瞭解預估凝視點之原理。與上述兩個模組一樣在互動式面板下方亦有訊息區來告知使用者操作步驟及其意涵。. 圖 4.22 凝視點預估互動式面板 38.

(49) 4.2.7 Simulator Simulator 為模擬器，此為本學習平台的一項重點，利用模擬之方式可以讓使用者更加瞭解眼動儀的核心知識與原理，即校正與凝視點預估。上述都是以固定的數值呈現，而此部份可以讓使用者自行輸入瞳孔中心座標值並交給系統進行計算。圖 4.23 為點選 Simulator 後呈現之頁面，頁面上可見「六點校正-二次多項式」、「九點校正-二次多項式」、「新方法:區域校正」及「進階探討:頭動補償」之按鈕。此外還提供兩個模擬小程式，以更生動的方式呈現其意義。. 圖 4.23 模擬器頁面. 點選六點校正-二次多項式按鈕後進入之頁面如圖 4.24 所示。使用者須於平台上輸入其瞳孔座標數值，即 Pupil_x 與 Pupil_y，共六組，此處建議使用者輸入藍色方塊 Hint 中的數值，此筆資料為先前實驗室學長所做的一組實驗數據，輸入完後須依序點選下方三個按鈕，分別為寫檔、執行 Matlab 運算及讀檔，點完讀檔後系統便將 12 個係數答案顯示於平台左下方，即 a0 至 a5 與 b0 至 b5。. 39.

(50) 圖 4.24 六點校正-二次多項式頁面. 其中，寫檔按鈕之功能為將輸入的數值寫入一個 txt 檔並存於 D 槽，若檔案不存在會自動建檔；執行 Matlab 運算按鈕之功能為系統會執行 Matlab 運算指令，計算出 12 個係數並寫入 ans.txt 檔於 D 槽；讀檔功能為讀取 ans.txt 檔的資料並顯示於平台的 12 個係數之空格中。上述這些功能於平台上亦有說明。. 點完讀檔按鈕把係數顯示出來後，下方會顯示出校正完成之藍色字串，如圖 4.25 所示。後續即可點按係數右方的 Next 按鈕，然後便會出現凝視點預估（POG Estimation）的模擬計算區塊，如圖 4.26 所示。. 40.

(51) 圖 4.25 六點校正之校正計算完成之頁面. 圖 4.26 六點校正之顯示出凝視點預估計算之頁面. 接著，進行預估凝視點的模擬計算，使用者須點選螢幕平面上的紅字點，此點模擬使用者在螢幕上凝視的點，以使用者模擬凝視(683,475)為例，點選其點後，會將其瞳孔座標顯示於 POG Estimation 的第一個區塊之空格，即 x 與 y，然後再點選下方之 Calculate 按鈕，其功能為將係數及瞳孔座標代入二次多項式計算出預估凝視點座標，以及計算誤差並將其顯示在旁邊的誤差空格中，如圖 4.27 所示。 41.

(52) 圖 4.27 六點校正之做完凝視點預估模擬之頁面. 以上即為一套完整的校正模擬過程，同理，九點校正-二次多項式之頁面如圖 4.28 所示，使用者於平台上輸入其瞳孔座標數 Pupil_x 與 Pupil_y 之值，共九組，同樣建議使用者輸入 Hint 中給的數值，輸入完後須依序點選下方三個按鈕，分別為寫檔、執行 Matlab 運算及讀檔，點完讀檔後其 12 個係數答案將顯示於平台左下方，即 a0 至 a5 與 b0 至 b5，如圖 4.29 所示。. 圖 4.28 九點校正-二次多項式頁面 42.

(53) 圖 4.29 九點校正之校正計算完成之頁面同樣的，後續點選 Next 按鈕後即可模擬計算凝視點預估，如圖 4.30 所示，接著以點選(1346,111)為例，瞳孔座標同樣會顯示在第一個區塊的 x 與 y 空格，然後點選 Calculate 按鈕即可計算出其預估的凝視點座標以及可觀看誤差，如圖 4.31 所示。. 圖 4.30 九點校正之顯示出凝視點預估計算之頁面. 43.

(54) 圖 4.31 九點校正之做完凝視點預估模擬之頁面. 其中，觀看誤差可讓使用者發現此誤差比先前六點校正時還小，亦即採用九點校正比六點校正之方式還精確。本平台除了上述的六點及九點校正模擬外，還有一項特色，即為所謂的區域校正之模擬，區域校正方式為本實驗室所發現的校正新方式，回到如圖 4.32 的模擬器頁面點選「新方法:區域校正」按鈕後進入之頁面如圖 4.32 所示，本頁面介紹了區域校正之原理，以上、下區域為例。. 圖 4.32 區域校正頁面. 在此頁面下方設有 Simulation 按鈕，點入後即可進入模擬之頁面，如 44.

(55) 圖 4.33 所示。. 圖 4.33 區域校正模擬頁面使用者須輸入瞳孔座標數值(pupil_x,pupil_y)，分別有上、下區域之數值，建議使用者輸入旁邊藍色區塊(Hint)中所給的數值，輸入完上區域數值後，點選頁面中央給定的按鈕分別為寫檔(上)、執行 Matlab 運算(上)及讀檔(上)，三個按鈕之功能與先前的六點與九點校正模擬皆同理，按下讀檔 (上)按鈕後即可將上區域之係數顯示於 12 個係數(上)之空格中，下方即會顯示校正(上)完成之字串，即代表上區域校正完成，畫面如圖 4.34 所示。. 45.

(56) 圖 4.34 上區域校正模擬完成之頁面. 接著繼續做下半區之校正模擬，於下半區的瞳孔座標輸入完數值後，同樣點選給定的三個按鈕分別為寫檔(下)、執行 Matlab 運算(下)及讀檔(下)，同樣的在按下讀檔(下)按鈕後即可將下區域之係數顯示於 12 個係數(下)之空格中，下方即會顯示校正(下)完成之字串，即代表下區域校正完成，到這邊本校正即已完成，因為已經算出兩組係數，其畫面如圖 4.35 所示。. 圖 4.35 下區域校正模擬完成之頁面. 校正模擬完成後，即可點選 Next 按鈕，便可進行凝視點預估之模擬計算，操作方式與先前六點及九點校正模擬皆同，須點選綠色區塊螢幕平面上的紅字點，此紅字點模擬使用者的凝視點，點此紅字點後，即可於凝視點預估之第一個區塊之空格顯示此點之瞳孔座標(x,y)，然後下一步即點選 Calculate 按鈕，系統即可計算出此預估之凝視點座標並將其顯示於 Sx 與 Sy 之空格，此外也可觀看誤差。以使用者點選上區域的(683,475)做模擬為例，完成模擬之畫面如圖 4.36 所示；而以點選下區域的(1346,111)做模擬為例，其完成模擬之畫面如圖 4.37 所示。 46.

(57) 圖 4.36 區域校正之凝視點預估模擬計算，以上區域為例. 圖 4.37 區域校正之凝視點預估模擬計算，以下區域為例. 由以上的區域校正模擬可發現，誤差皆非常小，只有個位數，比先前的六點及九點校正還要小，因此本模擬可讓使用者知道本方式為較佳的校正方式。. 上述即為本平台所實作的校正與凝視點預估之模擬。此外，本實驗室 47.

(58) 亦有一項重要研究，即頭動補償，其觀念介紹見於第二章，此部分亦製作於本平台中，使用者若再回到圖 4.23 之頁面，點選進皆探討:頭動補償之按鈕即可進入頭動補償頁面，如圖 4.38 所示。本頁簡介了頭動補償之觀念。. 圖 4.38 頭動補償頁面. 此外，本頁還提供兩個模擬小程式可讓使用者下載使用，分別為 2D Mapping 模擬及頭動補償之模擬，點選其按鈕後會下載於 D 槽，此處與上述之模擬差別在於使用者可以不必手動輸入瞳孔座標資料，而可以直接於程式中模擬 Eye plane 的面板上用滑鼠點擊，相當生動方便。其 2D Mapping 模擬程式外觀如圖 4.39 所示；頭動補償 Eye plane 模擬之程式外觀如圖 4.40 所示。. 48.

(59) 圖 4.39 2D Mapping 模擬小程式. 此 2D Mapping 模擬小程式以眼動儀最常用的九點校正為例。使用者首先要依序點選 Screen plane 上的九個按鈕，模擬始用者觀看螢幕上的九個定點，即進行校正，同時每點選一點 Eye plane 上會顯示其相對應的瞳孔座標位置，且其座標值議會顯示於 x 與 y 的空格中，如圖 4.40 所示。. 圖 4.40 點完九點之程式畫面 49.

(60) 點完九點後，亦即模擬使用者以觀看完九點，接下來須點選代入多項式計算按鈕，系統便會執行 Matlab 指令來將這些座標值代入二次多項式做計算，求出共 12 個係數並顯示於右方係數空格中，到此校正即完成，如圖 4.41 所示。. 圖 4.41 代入多項式計算出係數之程式畫面. 後續可做凝視點預估之模擬，使用者可用滑鼠游標在 Eye plane 上任意移動，模擬當時使用者凝視螢幕時所即時偵測到之瞳孔座標位置，同時在 Screen plane 上可顯示其相對應的凝視點（以紅點呈現），且其座標數值均會呈現於下方淺藍色區塊之空格，含瞳孔座標 Pupil(x,y)及凝視點座標 Pog(Sx,Sy)，此為 Real time 之模擬，仿照真實情況，因此此種方式比傳統讓使用者用輸入數值的方式更為生動有趣，其畫面如圖 4.42 所示。. 50.

(61) 圖 4.42 模擬預估凝視點之程式畫面. 上述為第一支模擬小程式，以下將介紹另一支模擬小程式，即頭動補償模擬小程式，其程式初始畫面如圖 4.43 所示。. 圖 4.43 頭動補償模擬小程式. 此頭動補償的模擬小程式中，左邊的灰色區塊代表 Eye plane，按照頭 51.

(62) 動補償的原理，須於平面上設置四個定點以計算出矩陣，首先點選 Start 按鈕，使用者即須開始於 Eye plane 上點選四個點，以藍色點呈現，每點選一點即按填入按鈕，其座標值會顯示於 u 與 v 之空格中，如圖 4.44 所示。. 圖 4.44 模擬頭部不動時設置四點之程式畫面. 四點設置完後，須點選頭動按鈕，代表模擬頭部移動之動作，然後再於 Eye plane 上點選四個定點，以橙色點呈現，每點完一點即按填入紐，其座標值會顯示於右方之 x 與 y 空格中，如圖 4.45 所示。. 52.

(63) 圖 4.45 模擬頭動後設置四點之程式畫面. 上述操作做完後，即可於 Eye plane 上點選任一點，以紅色線（向量）呈現，其座標會顯示於移動後的(x,y)空格中，此代表頭動後所得到的瞳孔座標，如圖 4.46 所示。. 圖 4.46 模擬頭動後偵測瞳孔座標之程式畫面. 53.

(64) 上述頭動後設置的四點是有誤差的值，因此須做補償，所以接著點選頭動補償計算按鈕，系統便會執行 Matlab 指令將座標值代入 Projective mapping 數學式做計算，最後即可算出補償後的瞳孔座標值並顯示於最下方的補償後的(x,y)空格中，同時於 Eye plane 上亦會顯示其補償後的座標位置（向量），以綠色線呈現，如圖 4.47 所示。. 圖 4.47 模擬頭動補償後偵測瞳孔座標之程式畫面. 54.

(65) 第五章結論與建議 5.1 結論本論文為開發一套適用於眼動儀研究領域之實驗室的學習平台，專門提供給有興趣從事眼動儀領域與新進眼動儀實驗室之研究生及專題生學習使用，因應了目前市面上幾乎無眼動儀相關之學習平台。本平台內容包含六大學習模組及模擬器模組，學習模組分別有簡介、名詞釋義、操作原理、瞳孔偵測、校正及凝視點預估，其中後三者更包含了特殊的互動式面板取代大量文字說明，以減少學生須閱讀大量文獻之困擾；模擬器模組提供眼動儀較常用的校正方式之模擬，讓使用者可自行輸入數值來讓系統做模擬計算，包含傳統的六點與九點校正，以及本實驗室提出的區域校正方法，並可讓使用者比較其誤差。最後，於模擬器模組頁面提供了兩支模擬小程式，分別為 2D Mapping 模擬程式及頭動補償模擬程式，此兩者可讓使用者下載使用，以更生動的方式呈現其原理。歸納上述，可分為以下四項： 1.. 因應目前市面上幾乎無任何眼動儀領域之學習平台，本論文開發第一套的眼動儀學習平台，內含眼動儀領域的基礎概念. 2.. 學生若有意願從事眼動儀領域之研究，須進行大量文獻資料的研讀才有可能參透眼動儀理論，本平台的學習模組提供互動式面板可取代傳統大量文字說明之方式，讓學生易於瞭解其意義. 3.. 模擬器模組提供眼動儀常用之校正模擬，以及本實驗室所發現之更精確的區域校正模擬，使用者可自行輸入數值並交給系統計算，然後即可計算出凝視點以及觀看誤差，如此可讓使用者瞭解與比較其優缺 55.

(66) 4.. 本平台最後提供兩支模擬小程式供使用者使用，分別為 2D Mapping 模擬及頭動補償模擬，以更生動的方式呈現其原理，讓使用者加深印象. 5.2 建議本眼動儀學習平台大致上已成形，不過仍有一些美中不足之處，以下將列出六項本平台未來可繼續強化的部份。 1.. 建立學習履歷，目的要讓學生可隨時檢視自己的學習進度. 2.. 目前模擬器之校正模擬部份僅提供常用的六點與九點校正，以及更精確的區域校正，未來可以增加更多的校正方式供使用者選擇. 3.. 新增眼動儀相關之影片，讓學生多一種學習方式並加深印象. 4.. 模擬器進行模擬皆需要連接 Matlab 軟體做計算，而使用者不一定都有這套軟體，未來可朝向不使用 Matlab 之計算方式讓使用者操作更加方便. 5.. 為因應有些學生學習態度較被動，因此未來也可考慮融入一套可增進學生學習意願的機制. 6.. 加強平台之美觀度. 56.

(67) 參考文獻 [1] Hansen, D.W., and Qiang Ji, “In the Eye of the Beholder: A Survey of Models for Eyes and Gaze,” Pattern Analysis and Machine Intelligence, IEEE Transactions on, vol. 32, no. 3, pp. 478-500, March 2010. [2] Chi-Wu Huang, Z. S. Jiang, W. F. Kao, and Y. L. Huang, “Building a Low-Cost Eye-Tracking System,” 2012 International Conference on Information Technology and Management Innovation, China, Jan. 2012, pp.18-23. [3] Chi-Wu Huang, Shih-Chen Tseng, Zong-Sian Jiang and Chun-Wei Hu, “Projective mapping compensation for the head movement during eye tracking,” Consumer Electronics - Taiwan (ICCE-TW), IEEE International Conference on, Taipei, Taiwan, May. 2014, pp.131-132. [4] Yannjy Yang and Chih-Chien Wang, “Trend of Using Eye Tracking Technology in Business Research” Journal of Economics, Business and Management vol. 3, no. 4, pp. 447-451, 2015. [5] 江宗憲，“低成本高速眼動儀之建構”，國立臺灣師範大學應用電子研究所，碩士論文，2012 年 7 月。 [6] 曾士誠，“頭戴式眼動儀之頭動補償探討”，國立臺灣師範大學應用電子研究所，碩士論文，2014 年 1 月。 [7] 華南師範大學心理教學中心，取自 http://psylab.scnu.edu.cn/centerlab/ [8] 眼動儀公司產品，取自 http://www.tobii.com/en/eye-tracking-research/ [9] Videolike 之眼動追蹤儀之產品介紹，取自 http://videolike.org/video/ [10] 眼動儀操作方式，取自 http://blog.sina.com.cn/blog_5f19191b01019oui/ [11] 眼動儀遊戲應用新聞，取自 http://news.gamme.com.tw/360410 57.

(68) [12] Tobii 眼動儀，取自 http://www.tobii.com/ [13] 師大教育神經科學實驗室，取自 http://web.ntnu.edu.tw/~696010077/ [14] Huda Al-Ghaib and Reza Adhami, “An E-Learning Interactive Course for Teaching Digital Image Processing at the Undergraduate Level in Engineering,”. Interactive. Collaborative. Learning. (ICL),. 15th. International Conference on, Villach, Sept. 2011, pp.1-5. [15] Linna Zhao and Wei Zhang, “A Study of Collaborative English Learning Mode Based on E-Learning,” Internet Technology and Applications (iTAP), 2011 International Conference on, Wuhan, Aug. 2011, pp.1-3. [16] 林宥宇、黃奇武、張吉正，“適用於眼動儀實驗室之網路個人學習平台”，2015 第四屆工程與科技教育學術研討會，臺北，臺灣，2015 年 5 月，23 頁。. 58.

(69)