labvanced logoLabVanced
  • Research
    • Publications
    • Researcher Interviews
    • Use Cases
      • Developmental Psychology
      • Linguistics
      • Clinical & Digital Health
      • Educational Psychology
      • Cognitive & Neuro
      • Social & Personality
      • Arts Research
      • Sports & Movement
      • Marketing & Consumer Behavior
      • Economics
      • HCI / UX
      • Commercial / Industry Use
    • Labvanced Blog
    • Services
  • Technology
    • Feature Overview
    • Code-Free Study Building
    • Eye Tracking
    • Mouse Tracking
    • Generative AI Integration
    • Multi User Studies
    • More ...
      • Reaction Time/Precise Timing
      • Text Transcription
      • Heart Rate Detection (rPPG)
      • Emotion Detection
      • Questionnaires/Surveys
      • Experimental Control
      • Data Privacy & Security
      • Desktop App
      • Mobile App
  • Learn
    • Guide
    • Videos
    • Walkthroughs
    • FAQ
    • Release Notes
    • Documents
    • Classroom
  • Experiments
    • Cognitive Tests
    • Sample Studies
    • Public Experiment Library
  • Pricing
    • Licenses
    • Top-Up Recordings
    • Subject Recruitment
    • Study Building
    • Dedicated Support
    • Checkout
  • About
    • About Us
    • Contact
    • Downloads
    • Careers
    • Impressum
    • Disclaimer
    • Privacy & Security
    • Terms & Conditions
    • Third-Party Licenses
  • Appgo to app icon
  • Logingo to app icon
Learn
Guía
Videos
Guías paso a paso
Preguntas Frecuentes
Archivo de Boletines
Documentos
Aula
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
Guía
Videos
Guías paso a paso
Preguntas Frecuentes
Archivo de Boletines
Documentos
Aula
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
  • Guía
    • COMENZANDO

      • Editor de Tareas
      • Marcos
        • Marco de Lienzo
        • Marco de Página
        • Marco de Sitio Web
      • Línea de Tiempo del Ensayo
      • Presentación de Estímulos
      • Correctitud de la Respuesta
      • Objetos
      • Eventos
      • Variables
      • Asistente de Tareas
      • Sistema de Ensayos
      • Diseño del Experimento
        • Creación de un Estudio
        • Patrones de marco de datos
        • Diseño de Experimentos Multiusuario
        • Diseño de Experimentos Longitudinales
    • TEMAS DESTACADOS

      • Aleatorización y Balance
      • Seguimiento Ocular
        • Presentación de Estímulos en una Tarea de Seguimiento Ocular
        • Cómo Elegir Configuraciones de Calibración de Seguimiento Ocular
        • Configuración del Seguimiento Ocular en una Tarea
        • Grabación y Exportación de Datos de Mirada
        • Usando Formas como Áreas de Interés (AOI) para el Seguimiento Ocular
        • La Experiencia de Calibración del Participante
      • Puente Web
        • Selección de AOIs de Sitio Web | Anclar, Ajustar y Verificar el Seguimiento de AOI
        • Seguimiento del Comportamiento del Ratón en un AOI de Sitio Web | Guía del Puente Web
      • Cuestionarios
      • Aplicación de Escritorio
      • Estudios de Muestra
      • Reclutamiento de Participantes
      • Acceso a API
        • REST API
        • API de Webhook
        • API de WebSocket
      • Otros Temas

        • Temporizaciones de Estímulos Precisas
        • Estudios Mult.usuario
        • Seguimiento de Cabeza en Labvanced | Guía
    • TABS PRINCIPALES DE LA APLICACIÓN

      • Descripción General: Pestañas Principales
      • Tablero
      • Mis Estudios
      • Estudios Compartidos
      • Mis Archivos
      • Biblioteca de Experimentos
      • Mi Cuenta
      • Licencia y Servicios
    • TABS DEL ESTUDIO

      • Descripción General: Pestañas Específicas del Estudio
      • Diseño del Estudio
        • Tareas
        • Bloques
        • Sesiones
        • Grupos
      • Editor de Tareas
        • Controles de Tareas
        • El Sistema de Pruebas
        • Tipos de Marcos
        • Objetos
        • Tablas de Propiedades de Objetos
        • Variables
        • Tabla de Variables del Sistema
        • El Sistema de Eventos
        • Funciones del Editor de Texto
        • Opciones de Seguimiento Ocular en el Editor de Tareas
        • Seguimiento de Cabeza en una Tarea
        • Estudios Multi-Usuario
      • Configuraciones
      • Variables
      • Medios
      • Textos y Traducción
      • Lanzar y Participar
      • Gestión de Sujetos
      • Vista de Datos y Exportación
        • Vista de Datos y Selección de Variables y Tareas (Versión ANTIGUA)
        • Accediendo a Grabaciones (Versión ANTERIOR)
  • Videos
    • Resumen de Video
    • Introducción a Labvanced
    • Creando Tareas
    • Videos de Elementos
    • Eventos y Variables
    • Temas Avanzados
  • Guías
    • Introducción
    • Tarea Stroop
    • Tarea de Decisión Léxica
    • Tarea de Indicación de Mirada de Posner
    • Paradigma de Parpadeo de Ceguera por Cambio
    • Estudio Sample de Seguimiento Ocular
    • Estudio de Seguimiento Ocular en Infantes
    • Estudio de Captura Atencional con Seguimiento de Ratón
    • Presentación Visual Serial Rápida
    • Estudio de ChatGPT
    • Demostración de Seguimiento Ocular: SVGs como AOIs
    • Demostración Multi-Usuario: Mostrar los Punteros de los Sujetos
    • Controlador de Gamepad / Joystick - Configuración Básica
    • Estudio de Aplicación de Escritorio con Integración de EEG
    • Equilibrio de Grupos entre Sujetos y Configuración de Variables
    • Construyendo un Estudio Multi-usuario
    • Guía de Seguimiento Ocular en Marco de Sitio Web
    • Seguimiento Ocular Condicional con Webcam
  • FAQ
    • Características
    • Política de Soporte y Directrices
    • Seguridad y Privacidad de Datos
    • Licenciamiento
    • Precisión de Labvanced
    • Uso Programático y API
    • Uso de Labvanced sin Conexión
    • Resolución de Problemas
    • Preguntas sobre Creación de Estudios
  • Archivo de Boletines
  • Documentos
  • Aula

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:

Vista previa de la ubicación de la mirada en un experimento de seguimiento ocular basado en webcam.

  • 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.

Los objetos colocados en el editor de Labvanced

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:

Variables personalizadas creadas para este estudio de seguimiento ocular basado en webcam.

A continuación se explica las variables y su propósito:

Nombre de VariableDescripciónTipo de Registro
All Gaze DataUtilizado 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_dataUtilizado 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_pathRegistra 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_dataUtilizado 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_pathRegistra 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:

  1. Todos los Datos de Mirada: Este evento se inicia tan pronto como comienza la tarea y registra datos de seguimiento ocular continuamente.
  2. 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.
  3. 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.

seleccionando la opción de disparador de mirada Eyetracking.

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].

Grabando el array de datos y configurando los valores de seguimiento ocular

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:

Seleccionando qué valores de datos de seguimiento ocular deben ser registrados

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.

Estableciendo la propiedad del objeto para que tome las coordenadas de mirada para proporcionar retroalimentación visual de dónde se encuentra la mirada 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).

Especificando las Áreas de Interés objetivo (AOIs) para el experimento de seguimiento ocular basado en webcam.

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 Name que 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 Value y luego seleccionamos la opción String y escribimos el nombre del objeto (es decir, AOI1):

Estableciendo el estímulo en un evento de si/entonces para ser AOI1

Hasta este punto hemos establecido que cuando el disparador (mirada) está en el estímulo llamado AOI1... entonces:

Especificando qué acciones ocurren cuando la mirada está sobre AOI1.

  • La variable AOI_gaze_data que creamos anteriormente registrará el array [X,Y,T,C].
  • También se registrará la variable SVG1_path que contendrá el Stimulus 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:

Especificando que cuando la mirada está sobre AOI2, entonces se registran las coordenadas del array de mirada y la ruta SVG.

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:

Especificando que cuando la mirada está sobre AOI3, entonces se registran las coordenadas del array de mirada y la ruta SVG.

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:

Especificando que cuando la mirada está sobre AOI4, entonces se registran las coordenadas del array de mirada y la ruta SVG.

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':

Seleccionando un clic en un botón como el disparador.

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.

Seleccionando la aceptación / finalización de la sesión como la acción

Veamos cómo se verá la data registrada en la siguiente sección.

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:

Vista previa de todos los datos de seguimiento ocular

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’:

Vista previa de los datos de seguimiento ocular que se registraron para AOI1

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’:

Vista previa de los datos de seguimiento ocular que se registraron para la ruta SVG

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!

Prev
Estudio de ChatGPT
Next
Demostración Multi-Usuario: Mostrar los Punteros de los Sujetos