眼動儀學習頁面

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

28

圖 4.5 眼動儀學習頁面

4.2.1 Introduction

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

圖 4.6 Introduction 初始頁面

29

圖 4.7 Introduction 點選三個按鈕後畫面

4.2.2 Definition of Terms

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

圖 4.8 Definition of Terms 頁面

30

4.2.3 Operation Flow

本學習模組說明眼動儀的操作流程及其各步驟之原理，其頁面外觀如

31 4.2.4 Pupil Detection

瞳孔偵測為進行眼動儀操作程序的第一個步驟。大多數的瞳孔偵測之 演算法程序可分為六個步驟，分別為輸入影像（Input image）、灰階化（Gray scale）、二值化（Thresholding）、斑點偵測（Blob detection）、計算瞳孔中 心（Calculate pupil center）及輸出影像（Output image）。此瞳孔偵測學習 模組之頁面外觀如圖 4.11 所示，由圖可見本學習模組附有一個互動式面板

32

鈕，所呈現之畫面如圖 4.12 至圖 4.17 所示。

圖 4.11 瞳孔偵測模組頁面

圖 4.12 點選 Input image 按鈕

33

圖 4.13 點選 Gray scale 按鈕

圖 4.14 點選 Thresholding 按鈕

圖 4.15 點選 Blob detection 按鈕

34

圖 4.16 點選 Calculate pupil center 按鈕

圖 4.17 點選 Output image 按鈕

4.2.5 Calibration

在眼動儀操作程序中，瞳孔偵測完成後，下一步驟即為校正，此為一 項非常重要的步驟。同樣的本頁面以一個互動式面板呈現校正原理（如圖 4.18 所示），由於校正的程序較繁雜，若以大量文字說明之方式必定會讓 使用者感到厭倦，甚至降低學習意願，因此本學習模組以此互動式面板來 呈現較能讓使用者明確瞭解其意義。

其互動式面板下方的訊息區會告訴使用者操作步驟。一開始使用者須 先點選左上方之 Start 按鈕才可開始進行本程序，接著依序點選左方 Screen

35

plane 的九個定點，其相關數學式子將自動填入右方之矩陣式，同時於下方 的訊息區顯示其意義，當點完九點之後使用者可於右方之解答區點選 Solve 按鈕觀看結果，其最後的結果畫面如圖 4.19 所示，在面板外之右下方顯示 黃色區域並以文字告知使用者其 12 個係數以求得，校正步驟完成。

不過上述的互動式面板是以數學式的型式呈現給學習者，對於某些學 習者可能較為不習慣或者仍然沒有全盤理解校正的意義。因此，若使用者 想進一步瞭解校正之意涵，可點選 Example 按鈕，進而進入另一頁面（如 圖 4.20 所示），而此頁面提供一組範例，同樣是以互動式面板呈現，與上 述不同的是本互動式面板是以一組實際數值型式代入矩陣式，並可觀看最 後結果，如此可讓使用者更明確瞭解校正之原理並加深印象。其點選九點 完再點選 Solve 按鈕後之畫面如圖 4.21 所示。

圖 4.18 校正原理之互動式面板

36

圖 4.19 校正原理互動式面板經點選完之結果

圖 4.20 校正 Example 互動式面板

37

Pupil center 座標(x,y)

1 (20,748) (129,77)

38

b0 -1284.075173

b1 13.397464

b2 3.823917

b3 0.061788

b4 -0.063963

b5 0.076606

4.2.6 POG Estimation

當眼動儀之校正程序完成後，下一步即可進行凝視點預估。同理，本

39

4.2.7 Simulator

Simulator 為模擬器，此為本學習平台的一項重點，利用模擬之方式可 以讓使用者更加瞭解眼動儀的核心知識與原理，即校正與凝視點預估。上 述都是以固定的數值呈現，而此部份可以讓使用者自行輸入瞳孔中心座標 值並交給系統進行計算。圖 4.23 為點選 Simulator 後呈現之頁面，頁面上 可見「六點校正-二次多項式」、「九點校正-二次多項式」、「新方法:區域校 正」及「進階探討:頭動補償」之按鈕。此外還提供兩個模擬小程式，以更 生動的方式呈現其意義。

圖 4.23 模擬器頁面

點選六點校正-二次多項式按鈕後進入之頁面如圖 4.24 所示。使用者 須於平台上輸入其瞳孔座標數值，即 Pupil_x 與 Pupil_y，共六組，此處建 議使用者輸入藍色方塊 Hint 中的數值，此筆資料為先前實驗室學長所做的 一組實驗數據，輸入完後須依序點選下方三個按鈕，分別為寫檔、執行 Matlab 運算及讀檔，點完讀檔後系統便將 12 個係數答案顯示於平台左下 方，即 a0 至 a5 與 b0 至 b5。

40

圖 4.24 六點校正-二次多項式頁面

其中，寫檔按鈕之功能為將輸入的數值寫入一個 txt 檔並存於 D 槽，若檔 案不存在會自動建檔；執行 Matlab 運算按鈕之功能為系統會執行 Matlab 運算指 令，計算出 12 個係數並寫入 ans.txt 檔於 D 槽；讀檔功能為讀取 ans.txt 檔的資料

並顯示於平台的 12 個係數之空格中。上述這些功能於平台上亦有說明。

點完讀檔按鈕把係數顯示出來後，下方會顯示出校正完成之藍色字串，

如圖 4.25 所示。

後續即可點按係數右方的 Next 按鈕，然後便會出現凝視點預估（POG Estimation）的模擬計算區塊，如圖 4.26 所示。

41

圖 4.25 六點校正之校正計算完成之頁面

圖 4.26 六點校正之顯示出凝視點預估計算之頁面

接著，進行預估凝視點的模擬計算，使用者須點選螢幕平面上的紅字 點，此點模擬使用者在螢幕上凝視的點，以使用者模擬凝視(683,475)為例，

點選其點後，會將其瞳孔座標顯示於 POG Estimation 的第一個區塊之空格，

即 x 與 y，然後再點選下方之 Calculate 按鈕，其功能為將係數及瞳孔座標 代入二次多項式計算出預估凝視點座標，以及計算誤差並將其顯示在旁邊 的誤差空格中，如圖 4.27 所示。

42

圖 4.27 六點校正之做完凝視點預估模擬之頁面

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

圖 4.28 九點校正-二次多項式頁面

43

圖 4.29 九點校正之校正計算完成之頁面

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

圖 4.30 九點校正之顯示出凝視點預估計算之頁面

44

圖 4.31 九點校正之做完凝視點預估模擬之頁面

其中，觀看誤差可讓使用者發現此誤差比先前六點校正時還小，亦即 採用九點校正比六點校正之方式還精確。

本平台除了上述的六點及九點校正模擬外，還有一項特色，即為所謂 的區域校正之模擬，區域校正方式為本實驗室所發現的校正新方式，回到 如圖 4.32 的模擬器頁面點選「新方法:區域校正」按鈕後進入之頁面如圖 4.32 所示，本頁面介紹了區域校正之原理，以上、下區域為例。

圖 4.32 區域校正頁面

在此頁面下方設有 Simulation 按鈕，點入後即可進入模擬之頁面，如

45

圖 4.33 所示。

圖 4.33 區域校正模擬頁面

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

46

47

圖 4.36 區域校正之凝視點預估模擬計算，以上區域為例

圖 4.37 區域校正之凝視點預估模擬計算，以下區域為例

由以上的區域校正模擬可發現，誤差皆非常小，只有個位數，比先前 的六點及九點校正還要小，因此本模擬可讓使用者知道本方式為較佳的校 正方式。

上述即為本平台所實作的校正與凝視點預估之模擬。此外，本實驗室

48

亦有一項重要研究，即頭動補償，其觀念介紹見於第二章，此部分亦製作 於本平台中，使用者若再回到圖 4.23 之頁面，點選進皆探討:頭動補償之 按鈕即可進入頭動補償頁面，如圖 4.38 所示。本頁簡介了頭動補償之觀 念。

圖 4.38 頭動補償頁面

此外，本頁還提供兩個模擬小程式可讓使用者下載使用，分別為 2D Mapping 模擬及頭動補償之模擬，點選其按鈕後會下載於 D 槽，此處與 上述之模擬差別在於使用者可以不必手動輸入瞳孔座標資料，而可以直 接於程式中模擬 Eye plane 的面板上用滑鼠點擊，相當生動方便。其 2D Mapping 模擬程式外觀如圖 4.39 所示；頭動補償 Eye plane 模擬之程式外 觀如圖 4.40 所示。

49

圖 4.39 2D Mapping 模擬小程式

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

圖 4.40 點完九點之程式畫面

50

點完九點後，亦即模擬使用者以觀看完九點，接下來須點選代入多項 式計算按鈕，系統便會執行 Matlab 指令來將這些座標值代入二次多項式做 計算，求出共 12 個係數並顯示於右方係數空格中，到此校正即完成，如 圖 4.41 所示。

圖 4.41 代入多項式計算出係數之程式畫面

後續可做凝視點預估之模擬，使用者可用滑鼠游標在 Eye plane 上任

後續可做凝視點預估之模擬，使用者可用滑鼠游標在 Eye plane 上任