Démonstration du suivi oculaire : SVG comme AOIs

Aperçu

Dans cette démo, notre objectif est de capturer des données de regard pour le suivi oculaire. Plus précisément, nous souhaitons capturer les données de regard associées à des zones d'intérêt spécifiques (AOIs) qui sont incluses dans l'étude sous forme d'objets SVG formes.

Un aperçu de la démo en action est montré ci-dessous, le cercle rouge fournissant un retour en indiquant la localisation du regard en temps réel :

• NOTE : L'enregistrement de la démo a été réalisé avec une option de calibration de 5,5 minutes ; le cercle rouge est un objet qui représente le regard des participants en temps réel et l'ensemble de la configuration est expliqué plus en détail ci-dessous.

Regardez cette courte vidéo qui montre la démo en action, ainsi qu'un aperçu des données enregistrées à la fin :

Objets

Cette démo comprend une image de fond d'un quai sur lequel 4 objets SVG représentant des personnes sont placés. Il y a également un objet de retour de regard (cercle rouge). Pour les besoins de cette démo, nous voulions représenter le regard en temps réel et ce cercle rouge le reflète.

Variables personnalisées créées

Afin d'enregistrer des données, des variables sont nécessaires. Une liste de toutes les variables personnalisées qui ont été créées pour cette démo est présentée ci-dessous, accessibles via l'onglet ‘Variables’. L'image ci-dessous montre les détails et les paramètres des variables utilisées par cette démo :

Ci-dessous se trouve une explication des variables et de leur objectif :

Nom de la variable	Description	Type d'enregistrement
All Gaze Data	Utilisé pour stocker l'array de coordonnées x/y [X,Y], ainsi que le temps de capture [T] et le niveau de confiance [C] de la mesure.	Tous les changements / séries temporelles
AOI1_gaze_data	Utilisé pour stocker l'array de [X,Y,T,C] lorsque le participant regarde l'objet SVG nommé AOI1.	Tous les changements / séries temporelles
SVG1_path	Enregistre le chemin du nœud SVG sur lequel le regard s'est posé d'AOI1 (expliqué plus loin).	Tous les changements / séries temporelles
AOI2_gaze_data	Utilisé pour stocker l'array de [X,Y,T,C] lorsque le participant regarde l'objet SVG nommé AOI2.	Tous les changements / séries temporelles
SVG2_path	Enregistre le chemin du nœud SVG sur lequel le regard s'est posé d'AOI2.	Tous les changements / séries temporelles

Et ainsi de suite….

Événements configurés

Puisque nous sommes intéressés à capturer les données de regard, les événements suivants sont utilisés :

1. All Gaze Data : Cet événement s'initie dès que la tâche commence et enregistre les données de suivi oculaire en continu.
2. AOI Gaze Data : Cet événement s'initie dès que le participant regarde une AOI spécifique (c'est-à-dire l'une des quatre personnes) et enregistre les valeurs liées au regard.
3. Finish Experiment : Un événement qui accepte / termine la session et enregistre les données lorsque le sujet clique sur le bouton ‘Finish’.

Événement 1 : All Gaze Data

Pour le premier événement, nous voulons accomplir les objectifs suivants :

• enregistrer toutes les données de suivi oculaire tout au long de l'étude
• afficher la localisation détectée du regard à l'écran en temps réel (afin que vous, en tant que chercheur, puissiez avoir une idée du suivi par webcam lorsque vous essayez la démo)

Déclencheur

Ainsi, nous utilisons un déclencheur de regard pour initier cet événement.

Action

Une fois le regard détecté, les actions suivantes auront lieu : Tout d'abord, nous appelons la variable All Gaze Data que nous avons créée plus tôt dans une action Set / Record Variable afin d'enregistrer les données sous forme d'array [X,Y,T,C].

Ce qui précède est réalisé (comme montré ci-dessous) en cliquant sur le bouton vert, en sélectionnant la variable cible, puis en cliquant sur l'icône de crayon menu de sélection de valeur et ensuite en choisissant l'array [X,Y,T,C] du menu spécifique au déclencheur (gaze), comme montré ci-dessous :

Nous ajoutons également l'action Set Object Property afin de définir l'objet du cercle rouge (appelé ‘regard’) pour que sa propriété X soit égale à et la propriété Y soit définie sur la coordonnée X et la coordonnée Y, respectivement. En d'autres termes, nous définissons les valeurs x- et y de l'objet sur les coordonnées x- et y… en fin de compte, c'est ce qui fait que l'objet se déplace en temps réel.

NOTE : les options pour Coordinate X et Coordinate Y sont sélectionnées dans le menu spécifique au déclencheur (gaze).

Événement 2 : AOI Gaze Data

Dans cet événement, nous voulons configurer les événements de sorte que :

• le regard soit également enregistré lorsque le regard est spécifiquement posé sur les AOIs cibles (c'est-à-dire les objets SVG que nous avons téléchargés)
• les données spécifiques au nœud SVG de l'AOI soient rapportées

Déclencheur

Le déclencheur Eyetracking Gaze est également utilisé ici. Mais dans ce contexte, nous indiquons que nous sommes uniquement intéressés par des éléments spécifiques en cliquant sur l'option respective, puis en sélectionnant les 4 objets SVG qui agissent comme Zones d'Intérêt (AOIs).

Action

Pour appeler chaque AOI, nous avons besoin d'une Action de contrôle → Action de condition (Si… Alors). Essentiellement, nous voulons que Labvanced fasse ce qui suit…. “Si le participant regarde AOI1, alors nous voulons enregistrer les données spécifiques pour cela dans une variable spécifique, ainsi que le chemin SVG de ce regard”

Tout d'abord, nous cliquons sur le bouton + Condition et les deux icônes de stylo apparaîtront.

• Première icône de stylo : Pour le premier champ que nous sélectionnons, dans le menu spécifique au déclencheur (gaze), l'option Nom du stimulus qui utilise le nom de l'objet du stimulus sur lequel le déclencheur (dans ce cas le regard) était.
• Deuxième icône de stylo : Sélectionnez Valeur constante puis sélectionnez l'option Chaine et tapez le nom de l'objet (c'est-à-dire AOI1) :

Donc jusqu'à présent, nous avons établi que lorsque le déclencheur (regard) est sur le stimulus nommé AOI1... alors :

• La variable AOI_gaze_data que nous avons créée précédemment va enregistrer l'array [X,Y,T,C].
• De plus, la variable SVG1_path sera enregistrée pour contenir les Infos de stimulus qui, dans ce cas, puisque l'objet d'intérêt (AOI1) est un SVG, les infos de stimulus contiendront les nœuds du SVG.

Pour spécifier la prochaine AOI, il suffit de cliquer sur le bouton +Ajouter Sinon Si Cas dans la boîte de dialogue et de répéter la structure / configuration comme cela a été montré ci-dessus, mais avec les principales différences étant de définir le Nom du stimulus en tant qu'AOI2 et ensuite d'appeler les variables spécifiques pour stocker les données, c'est-à-dire AOI2_gaze_data et SVG2_Path comme montré ci-dessous :

Ensuite, pour AOI3, nous choisissons à nouveau d'Ajouter un Sinon Si Cas et de suivre la même structure mais avec les variables personnalisées que nous avons créées pour stocker les données pour cette AOI spécifique :

Encore une fois, pour AOI4, nous choisissons à nouveau d'Ajouter un Sinon Si Cas et de suivre la même structure mais avec les variables personnalisées que nous avons créées pour stocker les données pour cette AOI spécifique :

Événement 3 : Terminer l'Expérience / Enregistrer les Données

Enfin, pour que les données soient enregistrées et stockées, nous devons choisir l'action Sauter vers l'action Accepter / Terminer la Session une fois que le bouton Finish est cliqué (qui est le déclencheur), comme montré ci-dessous.

Déclencheur

Le déclencheur est spécifié pour se produire lorsque le ‘Bouton de Fin’ est utilisé :

Action

L'action qui aura lieu est que la session sera acceptée, ce qui signifie que les données seront enregistrées.

Regardons à quoi ressembleront les données enregistrées dans la section suivante.

Données enregistrées

Les données enregistrées incluent toutes les variables personnalisées ainsi que des valeurs spécifiques à l'expérience telles que le numéro de tâche, le numéro de session, etc.

Dans l'exemple ci-dessous, l'onglet Dataview & Export montre à quoi ressemblent les données lorsqu'elles sont séparées par fichiers de séries temporelles. Chaque variable de série temporelle (c'est-à-dire les variables qui enregistrent tous les changements) est montrée avec son propre fichier CSV dans le panneau de gauche ci-dessous. Cela peut être accompli en spécifiant le paramètre pertinent en utilisant les paramètres Format d'Exportation.

Lorsque le All Gaze Data.csv est sélectionné, de nombreuses variables sont enregistrées, y compris celles montrées ci-dessous. La colonne ‘valeur’ capture l'array [X,Y,T,C] où les valeurs sont séparées par des virgules :

L'image ci-dessous montre un aperçu des tableaux qui ont été enregistrés spécifiquement lorsque le regard était sur AOI1, comme le montre la colonne ‘valeur’ :

L'image ci-dessous montre un aperçu des chemins SVG qui ont été enregistrés spécifiquement lorsque le regard était sur AOI1, comme le montre la colonne ‘valeur’ :

Conclusion

Cette démo vise à montrer comment enregistrer des données de regard et utiliser des objets SVG pour enregistrer le regard spécifiquement dans le contexte de l'occurrence du regard sur une Zone d'Intérêt (AOI).

Si vous avez des questions, n'hésitez pas à nous contacter et à nous faire part des détails de votre expérience, surtout si vous avez besoin de réaliser une vérification de faisabilité !