アイ・トラッキングデモ: SVGをAOIとして使用
概要
このデモでは、アイ・トラッキングの視線データをキャプチャすることを目指しています。具体的には、研究に含まれる特定の関心領域（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人のうちの一人）を見たときに開始し、視線関連の値を記録します。
- 実験の終了: セッションを受け入れ／終了し、被験者が「終了」ボタンをクリックするとデータを記録します。
イベント 1: All Gaze Data
最初のイベントでは、次のことを達成したいと考えています:
- 研究の期間中にすべてのアイ・トラッキングデータを記録する
- デモを試すときに研究者がwebcamの追跡を感じることができるように、画面上に視線の検出された位置をリアルタイムで表示する
トリガー
このイベントを開始するためにアイ・トラッキングの視線トリガーを使用します。
アクション
視線が検出されると、次のアクションが発生します: まず、Set / Record Variableアクションで以前に作成したAll Gaze Data変数に呼び出して、[X,Y,T,C]配列としてデータを記録します。
上記は（以下に示すように）緑のボタンをクリックし、対象の変数を選択して、鉛筆アイコンをクリックしてvalue-select menuを選び、次にトリガー特有の（アイ・トラッキング視線）メニューから[X,Y,T,C]配列を選択することで達成されます:
また、Set Object Propertyアクションを追加して、赤い円オブジェクト（「視線」と呼ばれる）を設定し、そのXプロパティを座標Xに、Yプロパティを座標Yにそれぞれ等しく設定します。言い換えれば、オブジェクトのx座標とy座標をそれぞれx座標とy座標に等しく設定します。これがリアルタイムでオブジェクトが動くことにつながります。
注意: Coordinate XとCoordinate Yのオプションは、トリガー特有の（アイ・トラッキング視線）メニューから選択されます。
イベント 2: AOI Gaze Data
このイベントでは、次のようにイベントを設定したいと考えています:
- 視線が特に対象のAOI（つまりアップロードしたSVGオブジェクト）に設定されているときも記録される
- AOIの特定のSVGノードデータが報告される
トリガー
Eyetracking Gazeトリガーもここでのトリガーとして使用されます。しかしこの文脈では、特定の要素にのみ興味があることを示すために、関連するオプションをクリックし、関心地域（AOI）として機能している4つのSVGオブジェクトを選択します。
アクション
各AOIに呼び出すために、Control Action → Requirement Action (If…Then)を使用する必要があります。本質的に、Labvancedに次のことをしてほしいです。「もし参加者がAOI1を見ている場合、特定の変数にその特定のデータを記録し、視線のSVGパスも記録する」
まず、+ Requirementボタンをクリックすると、2つのペンアイコンの値が表示されます。
- 最初のペンアイコン: 最初のフィールドでは、トリガー特有の（アイ・トラッキング視線）メニューから
Stimulus Nameオプションを選択し、トリガー（この場合は視線）があった刺激のオブジェクト名を使用します。 - 2番目のペンアイコン:
Constant Valueを選択し、次にStringオプションを選択し、オブジェクト名（つまりAOI1）を入力します:
ここまでで、いつトリガー（視線）がAOI1という名前の刺激にあるかを確立しました…. そして:
- 以前に作成した変数
AOI_gaze_dataが[X,Y,T,C]配列を記録します。 - また、
SVG1_path変数は記録され、Stimulus Infoを含むことになります。この場合、対象が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設定を使用して関連する設定を指定することで達成できます。
_All Gaze Data.csv_が選択されると、以下に示すように、複数の変数が記録されます。「値」列は[X,Y,T,C]配列をキャプチャし、値はカンマで分けられています:
下の画像は、視線がAOI1にあったときに具体的に記録された配列のプレビューを示しています。「値」列によって示されています:
下の画像は、視線がAOI1にあったときに具体的に記録されたSVGパスのプレビューを示しています。「値」列によって示されています:
結論
このデモは、視線データを記録し、特に関心地域（AOI）で視線が発生する文脈でSVGオブジェクトを利用して視線を記録する方法を示すことを目的としています。
ご質問がある場合は、ぜひご連絡ください。あなたの実験の詳細、特に実現可能性チェックを行う必要がある場合はお知らせください！