アイ・トラッキングデモ: AOIとしてのSVG
概要
このデモでは、 アイ・トラッキングの視線データをキャプチャすることを目的としています。具体的には、研究に含まれる特定の関心領域（AOI）に関連する視線データを、SVG 形状オブジェクトとしてキャプチャしたいと考えています。
デモの実際のプレビューは、視線の位置をリアルタイムで示す赤い円によってフィードバックが提供されています。
- 注意: デモの録画は5.5分のキャリブレーションオプションで行われました; 赤い円は参加者の視線をリアルタイムで表すオブジェクトであり、全体の設定については以下でさらに説明します。
このデモの動作を示す短いビデオと、デモの最後に記録されたデータのプレビューをご覧ください:
オブジェクト
このデモには、4つのSVGオブジェクトの人々が配置されている桟橋の背景画像が含まれています。また、視線フィードバックオブジェクト（赤い円）もあります。このデモの目的のために、私たちはリアルタイムでの視線を表現したかったので、この赤い円はそれを反映しています。
作成されたカスタム変数
データを記録するためには、変数が必要です。このデモのために作成されたすべてのカスタム変数のリストは、‘変数’タブを介してアクセスできるようになっています。下の画像は、このデモで使用される変数の詳細と設定を示しています:
以下は変数の説明とその目的です:
| 変数名 | 説明 | 記録タイプ |
|---|---|---|
All Gaze Data | x/y座標[X,Y]の配列、時間キャプチャ[T]、および測定の信頼レベル[C]を保存するために使用されます。 | すべての変更 / 時系列 |
AOI1_gaze_data | 参加者がAOI1という名前のSVGオブジェクトを見たときの[X,Y,T,C]の配列を保存するために使用されます。 | すべての変更 / 時系列 |
SVG1_path | 参加者の視線がAOI1のSVGノードに留まったパスを記録します（以下でさらに説明）。 | すべての変更 / 時系列 |
AOI2_gaze_data | 参加者がAOI2という名前のSVGオブジェクトを見たときの[X,Y,T,C]の配列を保存するために使用されます。 | すべての変更 / 時系列 |
SVG2_path | 参加者の視線がAOI2のSVGノードに留まったパスを記録します。 | すべての変更 / 時系列 |
などなど….
イベントの設定
視線データをキャプチャすることに興味があるため、以下のイベントが使用されます:
- All Gaze Data: このイベントはタスクが始まるとすぐに開始され、アイ・トラッキングの視線データを継続的に記録します。
- AOI Gaze Data: このイベントは参加者が特定のAOI（即ち、4人のいずれか）を見たときに開始され、視線に関連する値を記録します。
- Finish Experiment: セッションを受け入れ/終了させ、参加者が「Finish」ボタンをクリックしたときにデータを記録するイベントです。
イベント1: All Gaze Data
最初のイベントで達成したいことは以下です:
- 研究の期間中、すべてのアイ・トラッキングデータを記録する
- リアルタイムで画面に視線の検出位置を表示する（これにより研究者としてデモを試す際にウェブカメラの追跡感を得られます）
トリガー
したがって、眼球追跡の視線トリガーを使用してこのイベントを開始します。
アクション
視線が検出されると、次のアクションが発生します: まず、以前に作成したAll Gaze Data変数をSet / Record Variableアクションで呼び出し、データを[X,Y,T,C]配列として記録します。
上記は、緑のボタンをクリックし、ターゲット変数を選択し、次に鉛筆アイコンのvalue-select menuをクリックして、[X,Y,T,C]配列をtrigger-specific (Eyetracking Gaze) menu,から選択することで達成されます。以下のように:
また、Set Object Propertyアクションを追加し、赤い円オブジェクト（「gaze」と呼ばれる）を設定して、そのXプロパティをX座標に、YプロパティをY座標にそれぞれ設定します。 つまり、オブジェクトのx値とy値を、それぞれのx座標とy座標に等しく設定します…これが最終的にオブジェクトをリアルタイムで動かすことになります。
注意: Coordinate XおよびCoordinate Yのオプションは、trigger-specific (Eyetracking Gaze) menu.から選択されます。
イベント2: AOI Gaze Data
このイベントでは、次のようにイベントを設定したいと考えています:
- 特定のAOI（即ち、アップロードしたSVGオブジェクト）に視線が特に設定されているときにも、視線が記録される
- AOIの特定のSVGノードデータが報告される
トリガー
Eyetracking Gazeトリガーもここでトリガーとして使用されます。 しかしこの文脈では、特定の要素にのみ興味があることを示すために、該当するオプションをクリックし、関心のある4つのSVGオブジェクトを選択します。
アクション
各AOIの呼び出しを設定するために、Control Action → Requirement Action (If…Then)が必要です。基本的に、Labvancedに次のようにしてほしいのです…「参加者がAOI1を見ている場合は、その特定の変数に対して特定のデータを記録し、視線のSVGパスを記録します」
まず+ Requirementボタンをクリックすると、2つの鉛筆アイコン値が表示されます。
- 最初の鉛筆アイコン: 最初のフィールドでは、trigger-specific (Eyetracking Gaze) menu,から
Stimulus Nameオプションを選択し、トリガー（この場合視線）があった刺激のオブジェクト名を使用します。 - 2番目の鉛筆アイコン:
Constant Valueを選択し、次にStringオプションを選択して、オブジェクト名（即ち、AOI1）を入力します:
これまでのところ、トリガー（視線）がAOI1という名前の刺激にある場合は…次のようになります:
- 以前に作成した変数
AOI_gaze_dataが[X,Y,T,C]の配列を記録します。 - また、
SVG1_path変数は、Stimulus Infoを含むように記録されます。この場合、関心対象（AOI1）がSVGであるため、刺激情報にはSVGのノード内容が含まれます。
次のAOIを指定するために、ダイアログボックスの中の+Add Else If Caseボタンをクリックし、上で示された構造/設定を繰り返しますが、主要な違いはStimulus NameをAOI2として設定し、データを保存するための特定の変数（即ち、AOI2_gaze_dataおよびSVG2_Path）を呼び出すことです。以下のように:
次に、AOI3についても再度Add Else If Caseを選択し、特定のAOIのデータを保存するために作成したカスタム変数を用いた同じ構造を続けます:
再度、AOI4についてもAdd Else If Caseを選択し、特定のAOIのデータを保存するために作成したカスタム変数を用いた同じ構造を続けます:
イベント3: 実験終了 / データ保存
最後に、データを記録し保存するためには、FinishボタンがクリックされたときにJump ActionをAccept / End Sessionアクションに選択する必要があります（これはトリガーです）、以下のように。
トリガー
トリガーは「Finish Button」が使用されたときに発生するように指定されます:
アクション
発生するアクションは、セッションが受け入れられ、その結果データが記録されることになります。
記録データ
記録されたデータには、すべてのカスタム変数に加え、タスク番号やセッション番号などの実験特有の値が含まれます。
以下の例では、‘Dataview & Export’タブが、時間系列ファイルで分割されたデータがどのように見えるかを示しています。各時系列変数（即ち、すべての変更を記録する変数）は、下の左側のパネルにそれぞれのCSVファイルとして表示されます。これは、Export Format settings.を使用して関連する設定を指定することで達成できます。
_All Gaze Data.csv_が選択されると、以下に示す変数を含む多数の変数が記録されます。‘value’列は、[X,Y,T,C]の配列をキャプチャし、値はカンマで区切られています:
下の画像は、視線がAOI1にあったときに特に記録された配列のプレビューを示しています。‘value’列で示されているように:
下の画像は、視線がAOI1にあったときに特に記録されたSVGパスのプレビューを示しています。‘value’列で示されているように:
結論
このデモは、視線データを記録し、AOIで視線が発生している文脈でSVGオブジェクトをどのように利用するかを示すことを目的としています。
ご質問がある場合は、お気軽にご連絡ください。特に実験の実施可能性の確認が必要な場合は、詳細をお知らせください！