Demo de Seguimiento Ocular: SVGs como AOIs
Visión General
En esta demostración, nuestro objetivo es capturar datos de mirada de seguimiento ocular. Específicamente, queremos capturar los datos de mirada asociados con áreas específicas de interés (AOIs) que se incluyen en el estudio como objetos de forma SVG shape objects.
A continuación se muestra una vista previa de la demostración en acción, con el círculo rojo proporcionando retroalimentación al indicar la ubicación de la mirada en tiempo real:
![]()
- NOTA: La grabación de la demo se realizó con una opción de calibración de 5.5 minutos; el círculo rojo es un objeto que representa la mirada de los participantes en tiempo real y la configuración general se explica más abajo.
Eche un vistazo a este video rápido que muestra la demostración en acción, así como una vista previa de los datos grabados al final:
Objetos
Esta demostración incluye una imagen de fondo de un muelle sobre el cual se colocan 4 objetos SVG de personas. También hay un objeto de retroalimentación de mirada (círculo rojo). Para los propósitos de esta demostración, queríamos representar la mirada en tiempo real y este círculo rojo lo refleja.
![]()
Variables Personalizadas Creadas
Para grabar datos, se requieren variables. A continuación se muestra una lista de todas las variables personalizadas que se crearon para esta demostración, accesibles a través de la pestaña ‘Variables’. La imagen a continuación muestra los detalles y configuraciones de las variables que se utilizan en esta demostración:
![]()
A continuación se explica las variables y su propósito:
| Nombre de Variable | Descripción | Tipo de Registro |
|---|---|---|
All Gaze Data | Utilizado para almacenar el array de coordenadas x/y [X,Y], así como el Tiempo de Captura [T] y el nivel de confianza [C] de la medición. | Todos los cambios / series de tiempo |
AOI1_gaze_data | Utilizado para almacenar el array de [X,Y,T,C] cuando el participante mira el objeto SVG llamado AOI1. | Todos los cambios / series de tiempo |
SVG1_path | Registra el camino del nodo SVG sobre el que se posó la mirada de AOI1 (se explica más abajo). | Todos los cambios / series de tiempo |
AOI2_gaze_data | Utilizado para almacenar el array de [X,Y,T,C] cuando el participante mira el objeto SVG llamado AOI2. | Todos los cambios / series de tiempo |
SVG2_path | Registra el camino del nodo SVG sobre el que se posó la mirada de AOI2. | Todos los cambios / series de tiempo |
Y así sucesivamente….
Eventos Configurados
Dado que estamos interesados en capturar datos de mirada, se utilizan los siguientes eventos:
- Todos los Datos de Mirada: Este evento se inicia tan pronto como comienza la tarea y registra datos de seguimiento ocular continuamente.
- Datos de Mirada de AOI: Este evento se inicia tan pronto como el participante mira una AOI específica (es decir, una de las cuatro personas) y registra los valores relacionados con la mirada.
- Finalizar Experimento: Un evento que acepta / finaliza la sesión y registra los datos cuando el sujeto hace clic en el botón ‘Finalizar’.
Evento 1: Todos los Datos de Mirada
Para el primer evento, queremos lograr lo siguiente:
- registrar todos los datos de seguimiento ocular a lo largo de la duración del estudio
- mostrar la ubicación detectada de la mirada en la pantalla en tiempo real (para que usted, como investigador, pueda tener una idea del seguimiento por webcam al probar la demostración)
Disparador
Por lo tanto, utilizamos un disparador de mirada de seguimiento ocular para iniciar este evento.
![]()
Acción
Una vez que se detecta la mirada, ocurrirán las siguientes acciones: Primero, llamamos a la variable All Gaze Data que creamos anteriormente en una Set / Record Variable acción para registrar los datos como array [X,Y,T,C].
![]()
Lo anterior se logra (como se muestra a continuación) haciendo clic en el botón verde, seleccionando la variable objetivo, luego haciendo clic en el ícono de lápiz menú de selección de valor y luego eligiendo el array [X,Y,T,C] del menú específico de disparador (Eyetracking Gaze), como se muestra a continuación:
![]()
También agregamos la Set Object Property acción para establecer que el objeto círculo rojo (llamado ‘mirada’) establezca su propiedad X igual a y la propiedad Y en las coordenadas X y Y, respectivamente. En otras palabras, establecemos los valores x e y del objeto para que sean iguales a las coordenadas x e y… en última instancia, esto es lo que hace que el objeto se mueva en tiempo real.
![]()
NOTA: las opciones para Coordinate X y Coordinate Y se seleccionan del menú específico de disparador (Eyetracking Gaze).
Evento 2: Datos de Mirada de AOI
En este evento, queremos configurar los eventos de tal manera que:
- la mirada también se registre cuando la mirada está específicamente en las AOIs objetivo (es decir, los objetos SVG que hemos subido)
- se informe de los datos específicos del nodo SVG de la AOI
Disparador
El disparador Eyetracking Gaze también se utiliza como el disparador aquí. Pero en este contexto, indicamos que solo estamos interesados en elementos específicos haciendo clic en la opción respectiva y luego seleccionando los 4 objetos SVG que actúan como Áreas de Interés (AOIs).
![]()
Acción
Para establecer la llamada en cada AOI, necesitamos un Control Action → Requirement Action (If…Then). Esencialmente, queremos que Labvanced haga lo siguiente… “Si el participante está mirando a AOI1, entonces queremos registrar los datos específicos para eso en una variable específica, así como la ruta SVG de esa mirada”
Primero hacemos clic en el botón + Requirement y aparecerán los dos iconos de lápiz.
- Primer icono de lápiz: Para el primer campo que seleccionamos, del menú específico de disparador (Eyetracking Gaze), seleccionamos la opción
Stimulus Nameque utiliza el nombre del objeto del estímulo sobre el cual estaba el disparador (en este caso la mirada). - Segundo icono de lápiz: Seleccionamos
Constant Valuey luego seleccionamos la opciónStringy escribimos el nombre del objeto (es decir, AOI1):
![]()
Hasta este punto hemos establecido que cuando el disparador (mirada) está en el estímulo llamado AOI1... entonces:
![]()
- La variable
AOI_gaze_dataque creamos anteriormente registrará el array [X,Y,T,C]. - También se registrará la variable
SVG1_pathque contendrá elStimulus Info, que, en este caso, dado que el objetivo de interés (AOI1) es un SVG, la información del estímulo contendrá los nodos del SVG.
Para especificar la siguiente AOI, el botón +Add Else If Case en el cuadro de diálogo y luego simplemente repetir la estructura / configuración como se mostró arriba pero con las principales diferencias siendo establecer Stimulus Name como AOI2 y luego también llamar a las variables específicas para almacenar los datos, es decir, AOI2_gaze_data y SVG2_Path como se muestra a continuación:
![]()
A continuación, para AOI3, elegimos Add Else If Case nuevamente y seguimos la misma estructura pero con las variables personalizadas que hemos creado para almacenar los datos de esta AOI específica:
![]()
Nuevamente, para AOI4, elegimos Add Else If Case nuevamente y seguimos la misma estructura pero con las variables personalizadas que hemos creado para almacenar los datos de esta AOI específica:
![]()
Evento 3: Finalizar Experimento / Guardar Datos
Por último, para que los datos se registren y almacenen, necesitamos elegir Jump Action para la acción Accept / End Session una vez que se haga clic en el botón Finish (que es el disparador), como se muestra a continuación.
Disparador
El disparador se especifica para ocurrir cuando se utiliza el 'Botón de Finalizar':
![]()
Acción
La acción que ocurrirá es que la sesión será aceptada, lo que, como resultado, significa que los datos serán registrados.
![]()
Datos Registrados
Los datos registrados incluyen todas las variables personalizadas además de valores específicos del experimento como el número de tarea, el número de sesión, etc.
En el ejemplo a continuación, [la pestaña Dataview & Export(/content/learn/es/guide/data-export/)] muestra cómo se ven los datos cuando se separan por archivos de series de tiempo. Cada variable de serie de tiempo (es decir, las variables que registran todos los cambios) se muestra con su propio archivo CSV en el panel izquierdo a continuación. Esto se puede lograr especificando la configuración relevante utilizando los Configure Export settings.
Cuando se selecciona el All Gaze Data.csv, se registran numerosas variables, incluidas las que se muestran a continuación. La columna ‘valor’ captura el array [X,Y,T,C] donde los valores están separados por comas:
![]()
La imagen a continuación muestra una vista previa de los arrays que se registraron específicamente cuando la mirada estuvo sobre AOI1, como lo muestra la columna ‘valor’:
![]()
La imagen a continuación muestra una vista previa de las rutas SVG que se registraron específicamente cuando la mirada estuvo sobre AOI1, como lo muestra la columna ‘valor’:
![]()
Conclusión
Esta demostración tiene como objetivo mostrar cómo grabar datos de mirada y utilizar objetos SVG para registrar la mirada específicamente en el contexto de cuándo la mirada ocurre sobre un Área de Interés (AOI).
Si tiene alguna pregunta, no dude en comunicarse con nosotros y háganos saber los detalles de su experimento, ¡especialmente si necesita realizar un chequeo de viabilidad!