Diseño e implementación de un sistema de captura de datos de entrenamiento para la realización de eye-tracking sin hardware específico

UNIVERSIDAD DE VALLADOLID E.T.S.I.T TELECOMUNICACI ´ ON TRABAJO FIN DE GRADO GRADO EN INGENIER´ IA DE TECNOLOG´ IAS DE TELECOMUNICACI ´ ON Dise˜no e implementaci´on de un sistema de captura de datos de entrenamiento para la realizaci´on de eye-tracking sin hardware espec´ıfico Autor: Ra´ul Barba Alonso Tutores: Rodrigo de Luis Garc´ıa y Federico Simmross Wattenberg Septiembre 2021 2 3 Resumen El seguimiento ocular o eye-tracking es un m´etodo para obtener informaci´on sobre lo movimientos oculares, lo que a su vez proporciona informaci´on sobre los procesos cerebrales que los controlan. El estudio de los movimientos oculares permite a esta tecnolog´ıa obtener informaci´on, por ejemplo, sobre procesos cognitivos, patolog´ıas neurol´ogicas o alteraciones psicol´ogicas. Tradicionalmente, se han utilizado para realizar seguimiento ocular tecnolog´ıas que requer´ıan de un hardware espec´ıfico, teniendo por lo tanto un elevado coste econ´omico y poca disponibilidad. Este trabajo pretende dar un primer paso hacia la realizaci´on de seguimiento ocular simplemente utilizando la webcam presente en todos los ordenadores port´atiles actuales. Para ello se ha construido una plataforma web capaz de capturar datos de los movimientos oculares de voluntarios mientras realizan una serie de tareas, con el objetivo de construir una base de datos con la que entrenar un sistema de aprendizaje autom´atico para determinar la posici´on de la mirada del usuario sobre la pantalla a partir de una imagen de su rostro y ojos. Este trabajo se centra en el dise˜no, desarrollo y despliegue de dicha plataforma web. Abstract The term eye-tracking refers to the technology employed to capture and analyze the eye movements of a person while he/she performs a certain task. These movements are related to the neural processes that control them, and thus this technology allows the study of cognitive processes, neurological pathologies or psychological alterations, among others. Traditionally, eye-tracking has been performed using specific hardware, which is expensive and hinders its widespread use. This work aims at providing a first step towards performing eye-tracking using only the webcam that is incorporated in every modern laptop. To that end, we have created a web platform that is able to capture the ocular movements of volunteers while they perform a series of tasks, in order to build a dataset that will be used to train a machine learning system that can determine the position of the gaze within the screen from an image of the face and eyes of the user. This work is focused on the design, development and deployment of such a web platform. Palabras clave Eye-tracking, experimentos, aplicaci´on web, captura de datos. 4 Agradecimientos En estas l´ıneas me gustar´ıa agradecer a todas las personas que me han acompa˜nado y ayudado a llegar hasta aqu´ı. En primer lugar a mis padres y mi hermano, quienes me han apoyado en todo momento a lo largo de estos a˜nos de carrera. En segundo lugar agradecer a mis amigos, tanto los conocidos en la carrera como los que ten´ıa en el instituto que me han hecho seguir hacia delante en los momentos m´as duros, pero tambi´en he disfrutado mucho a su lado. Doy las gracias tambi´en a los tutores de este proyecto, Rodrigo y Federico, por ayudarme en el desarrollo de este proyecto resolviendo mis dudas. 5 6 ´ Indice general 1. Introducci´on 13 1.1. Motivaci´on................................. 13 1.2. Objetivos ................................. 14 1.3. Fasesym´etodos.............................. 15 1.4. Estructura de la memoria . . . . . . . . . . . . . . . . . . . . . . . . 16 2. Estado del arte 17 2.1. Introducci´on................................ 17 2.2. Sistema visual humano . . . . . . . . . . . . . . . . . . . . . . . . . . 18 2.2.1. Estructura anat´omica del ojo humano . . . . . . . . . . . . . . 18 2.2.2. Psicof´ısica visual . . . . . . . . . . . . . . . . . . . . . . . . . 20 2.2.3. Modelos de movimientos oculares . . . . . . . . . . . . . . . . 22 2.3. Sistemas de eye-tracking . . . . . . . . . . . . . . . . . . . . . . . . . 23 2.3.1. Electrooculograf´ıa (EOG) . . . . . . . . . . . . . . . . . . . . 24 2.3.2. Lentes de contacto combinadas con una bobina . . . . . . . . 25 2.3.3. Foto-oculograf´ıa y V´ıdeo-oculograf´ıa . . . . . . . . . . . . . . 25 2.4. Eye-tracking a partir de video natural . . . . . . . . . . . . . . . . . . 28 2.4.1. GazeCapture ........................... 28 2.4.2. MPIIGaze............................. 29 3. Tecnolog´ıas base 31 3.1. Introducci´on................................ 31 3.2. HTML5 .................................. 31 3.3. CSS .................................... 31 3.4. Javascript ................................. 32 3.5. PHP.................................... 32 3.6. ApacheHTTPServer........................... 32 3.7. MySQL .................................. 33 3.8. Astah ................................... 34 4. An´alisis y dise˜no de la aplicaci´on 35 4.1. Introducci´on................................ 35 4.2. An´alisis de la aplicaci´on . . . . . . . . . . . . . . . . . . . . . . . . . 35 4.2.1. Especificaci´on de requisitos . . . . . . . . . . . . . . . . . . . . 35 4.2.2. Casosdeuso ........................... 37 4.3. Dise˜no................................... 43 4.3.1. Dise˜no de la interfaz de usuario . . . . . . . . . . . . . . . . . 43 4.3.2. Dise˜no de la base de datos . . . . . . . . . . . . . . . . . . . . 47 7 8´ INDICE GENERAL 5. Implementaci´on y resultados 53 5.1. Introducci´on................................ 53 5.2. Interfazdeusuario ............................ 53 5.2.1. Formulario de la aplicaci´on . . . . . . . . . . . . . . . . . . . . 53 5.2.2. Obtenci´on de los par´ametros de la c´amara . . . . . . . . . . . 56 5.2.3. Realizaci´on del experimento 1 . . . . . . . . . . . . . . . . . . 56 5.2.4. Realizaci´on del experimento 2 . . . . . . . . . . . . . . . . . . 61 5.2.5. Mostrar puntuaciones . . . . . . . . . . . . . . . . . . . . . . . 63 5.3. Interfaz de administrador . . . . . . . . . . . . . . . . . . . . . . . . . 65 5.4. Pruebas .................................. 65 5.4.1. Pruebas realizadas en el servidor local . . . . . . . . . . . . . 65 6. Manuales 69 6.1. Manual de usuario de la aplicaci´on . . . . . . . . . . . . . . . . . . . 69 6.1.1. Ventana principal . . . . . . . . . . . . . . . . . . . . . . . . . 69 6.1.2. Registro, modificaci´on de usuario e inicio de sesi´on . . . . . . 70 6.1.3. Realizaci´on de experimentos . . . . . . . . . . . . . . . . . . . 75 6.1.4. Ventana de puntuaciones y errores . . . . . . . . . . . . . . . 79 6.2. Manual de administrador de la aplicaci´on . . . . . . . . . . . . . . . . 79 6.2.1. Listar experimentos . . . . . . . . . . . . . . . . . . . . . . . . 81 6.2.2. Descargar experimentos . . . . . . . . . . . . . . . . . . . . . 81 6.3. Manual de mantenimiento de la aplicaci´on . . . . . . . . . . . . . . . 83 6.3.1. Instalar apache, mysql y php . . . . . . . . . . . . . . . . . . . 83 6.3.2. Crear un host virtual para el sitio web . . . . . . . . . . . . . 84 6.3.3. Probar la conexi´on con la base de datos desde php . . . . . . . 86 7. Conclusiones 89 7.1. Conclusiones................................ 89 7.2. L´ıneasfuturas............................... 90 ´ Indice de figuras 2.1. Anatom´ıa del ojo humano . . . . . . . . . . . . . . . . . . . . . . . . 19 2.2. Diagrama esquem´atico de las conexiones neuronales entre las c´elulas ganglionar, bipolar, horizontales y amacrinas. [1] . . . . . . . . . . . . 19 2.3. Distribuci´on de los conos y bastones en la retina en funci´on del ´angulo visual.[1] ................................. 20 2.4. Gr´afica en la que se muestra la sensibilidad al contraste en funci´on de la frecuencia temporal. [1] . . . . . . . . . . . . . . . . . . . . . . . 22 2.5. Estructura muscular del ojo. 1-Recto superior; 2- Elevador del p´arpado superior; 3- Recto lateral; 4- Recto medial; 5- Oblicuo superior;6- Tend´on reflejado del oblicuo superior. 7- Anillo de Zinn; 8- Recto inferior; 9- Oblicuo inferior. [1] . . . . . . . . . . . . . . . . . . . . . . 22 2.6. Ejemplo de medici´on de electrooculograf´ıa (EOG). [1] . . . . . . . . . 24 2.7. Ejemplo de bobina incrustada en lente de contacto y el marco de campos electromagn´eticos para la medici´on del movimiento ocular. [1] 24 2.8. Ejemplo de inserci´on de una lente de contacto para medici´on de movimientoocular.[1]............................ 25 2.9. Ejemplos de mediciones del movimiento ocular por reflejo de la pupila, el limbo y la c´ornea. [1] . . . . . . . . . . . . . . . . . . . . . . . . . . 26 2.10. Ejemplo de un antiguo rastreador de ojos basado en v´ıdeo montado sobreunamesa.[1] ............................ 27 2.11. Ejemplo de un rastreador ocular basado en v´ıdeo montado en la cabeza[1] .................................. 27 2.12. Ejemplo de un antiguo rastreador de ojos basado en v´ıdeo montado sobreunamesa.[1] ............................ 27 2.13.GafasTobbipro.[2]............................ 28 2.14. L´ınea de tiempo de visualizaci´on de un punto. [3] . . . . . . . . . . . 29 3.1. Resumen gr´afico de las tecnolog´ıas utilizadas. . . . . . . . . . . . . . 34 4.1. Diagrama de casos de uso de la aplicaci´on Eye-tracking . . . . . . . . 38 4.2. Diagrama de de secuencia de iniciar sesi´on . . . . . . . . . . . . . . . 41 4.3. Diagrama de de secuencia de realizar el experimento n´umero 1. . . . . 42 4.4. Diagrama de de secuencia de realizar el experimento n´umero 2. . . . . 42 4.5. Diagrama de de secuencia de ver lista de experimentos . . . . . . . . 43 4.6. Diagrama de de secuencia de descargar datos de los experimentos. . . 43 4.7. Estructura del sitio web . . . . . . . . . . . . . . . . . . . . . . . . . 44 4.8. Dise˜no de la p´agina principal de la aplicaci´on. . . . . . . . . . . . . . 44 4.9. Cabeceras interna y externa de la aplicaci´on web. . . . . . . . . . . . 45 4.10. Dise˜no de formulario del registro de la aplicaci´on . . . . . . . . . . . 45 9 16 CAP´ ITULO 1. INTRODUCCI ´ ON Por ´ultimo, se realiz´o un despliegue de la aplicaci´on en el servidor de la escuela con las configuraciones necesarias en la m´aquina virtual que albergaba nuestra aplicaci´on. 1.4. Estructura de la memoria A continuaci´on se define la distribuci´on de cap´ıtulos escogida para este documento, especificando la informaci´on que se detallar´a en cada uno de ellos. En este primer cap´ıtulo, se pretende dar una imagen global del proyecto desarrollado, exponiendo las fases en las que ha consistido y los objetivos que se han perseguido. En el segundo cap´ıtulo, se describe detalladamente el estado del arte de las tecnolog´ıas utilizadas en el eye-tracking. Se empieza con una breve introducci´on sobre el sistema visual humano (HVS), despu´es se realiza una descripci´on hist´orica de los sistemas m´as utilizados en el seguimiento ocular, y una ´ultima parte dedicada a las aplicaciones m´as significativas que se han desarrollado sin dispositivos externos, s´olo a partir del v´ıdeo natural. A continuaci´on, el tercer cap´ıtulo expone las tecnolog´ıas base implementadas en este proyecto. Se describen principalmente los diferentes lenguajes de programaci´on utilizados para la realizaci´on de la p´agina web y el gestor de base de datos utilizado. El cap´ıtulo cuatro detalla el an´alisis de la aplicaci´on. En primer lugar, se exponen los requisitos tanto funcionales como no funcionales, y despu´es se presenta un an´alisis de la aplicaci´on y de la base de datos. En el quinto cap´ıtulo se presenta la implementaci´on y los resultados que se han obtenido de la aplicaci´on. Las dos primeras secciones describen las implementaciones de los casos de uso m´as significativos de la interfaz del usuario y de la interfaz del administrador. En la ´ultima parte de este cap´ıtulo se presentan alguna pruebas para comprobar la correcta operatividad de algunas funcionalidades de la aplicaci´on y para la realizaci´on de las pruebas del despliegue en el servidor de la escuela. El sexto cap´ıtulo describe y detalla los manuales de la aplicaci´on, tanto del usuario como del administrador, y el manual de mantenimiento de la aplicaci´on en el servidor remoto. En el ´ultimo cap´ıtulo expone las conclusiones obtenidas de este proyecto y las posibles l´ıneas futuras en el an´alisis de los datos obtenidos en la aplicaci´on. Cap´ıtulo 2 Estado del arte 2.1. Introducci´on El eye-tracking es una tecnolog´ıa que pretende capturar informaci´on sobre el movimiento ocular de un usuario. Las aplicaciones de esta tecnolog´ıa van desde el estudio de la atenci´on y cognici´on humana en psicolog´ıa hasta el diagn´ostico temprano de enfermedades neurodegenerativas, o el marketing digital a trav´es de an´alisis de la atenci´on de los individuos a determinados est´ımulos. Un ejemplo que permite comprender el potencial del an´alisis de los movimientos oculares es la lectura de un texto. Esta tarea requiere que diferentes sistemas cognitivos est´en activos, desde la atenci´on hasta la memoria. En personas sanas, se ha observado que palabras frecuentes y predecibles son procesadas con mayor facilidad y en menor tiempo. Tambi´en se ha observado que la predictibilidad de las oraciones tiene un peso en el procesamiento de la informaci´on. Las oraciones que son m´as predecibles o proverbios son le´ıdos con mayor rapidez que otras oraciones con baja predictibilidad. Mientras que esta predictibilidad facilita el proceso de lectura en personas sanas, no ocurre lo mismo con aquellos lectores que presentan alguna enfermedad cognitiva respecto de la memoria o de la atenci´on. Algunos experimentos desarrollados establecen que la visi´on perif´erica no es la que facilita el proceso de lectura, si no que a trav´es de la memoria sem´antica o la memoria de trabajo pueden empezar a procesar palabras antes de que sus ojos se muevan hacia ellas. La aparici´on de enfermedades neurodegenerativas, como el Alzheimer, puede tener un impacto sobre la forma en la que las personas mueven los ojos en tareas como la lectura, y por lo tanto estas patolog´ıas son susceptibles de ser analizadas (y potencialmente detectadas, incluso de manera temprana) a trav´es del eye-tracking. El Alzheimer se caracteriza por una p´erdida de neuronas y sinapsis en la corteza cerebral, y los pacientes con deterioros leves suelen presentar deterioros en la memoria ejecutiva. La pr´actica de experimentos en que est´en involucrados los movimientos oculares implican procesos donde participan diferentes partes del cerebro; si alguna de esas partes est´a da˜nada o deteriorada las respuestas motoras que conducen los movimientos oculares reflejan alteraciones y respuestas que no son normales [4]. A lo largo de este cap´ıtulo se elabora una descripci´on del sistema visual humano, desde su estructura y los tipos de visi´on del ojo hasta los movimientos oculares. En 17 18 CAP´ ITULO 2. ESTADO DEL ARTE segundo lugar se resumen los diferentes sistemas de eye-tracking m´as utilizados a lo largo de la historia. Por ´ultimo, se har´a una comparaci´on con diferentes sistemas desarrollados sin hardware espec´ıfico. 2.2. Sistema visual humano En este apartado se describen algunos conceptos generales acerca del sistema visual humano (HVS) necesarios para entender el funcionamiento del seguimiento ocular o eye-tracking. 2.2.1. Estructura anat´omica del ojo humano El globo ocular tiene una forma ovalada y mide en torno a 24-25 mm de di´ametro. Est´a formado por tres capas diferenciadas: la capa externa, intermedia e interna. Se puede ver su estructura y las partes de las que consta en la figura 2.1.[5] Capa externa. Esta capa est´a formada por la escler´otica y la c´ornea. La escler´otica es la parte blanca y lisa del ojo; una membrana opaca y r´ıgida cuya funci´on es la de proteger la parte interna del ojo. En cambio, la c´ornea presenta una forma convexa, sin vasos sangu´ıneos y es la responsable de dejar pasar la luz al interior del globo ocular. Capa intermedia. En esta capa se ubican la coroides, el cuerpo ciliar, el iris y el cristalino. La coroides es una membrana de color oscuro encargada de transportar alimentos, que contiene c´elulas pigmentarias que ayudan a absorber el exceso de luz y prevenir la visi´on borrosa. El iris es una membrana circular coloreada, debido al n´umero y distribuci´on de las c´elulas pigmentadas que contiene. Se encuentra entre la c´ornea y el cristalino. El cuerpo ciliar es una prolongaci´on del iris y se une con la coroides. Produce un l´ıquido en el interior del ojo, denominado humor acuoso y tambi´en contiene el m´usculo ciliar que se encarga de la acomodaci´on del cristalino en las tareas de enfoque. Por ´ultimo, el cristalino es la lente natural del ojo que tiene una forma biconvexa, transparente y el´astica. Se localiza detr´as del iris y est´a soportado por los m´usculos ciliares. Capa interna. En esta capa aparece la retina, que se extiende desde los m´usculos ciliares hasta la parte posterior del ojo, donde se encuentran los fotorreceptores (conos y bastones) y las estructuras nerviosas. Su funci´on principal es la capacidad de detectar est´ımulos luminosos. En la parte central de la retina se encuentra la f´ovea, especializada en la visi´on n´ıtida [6]. La mayor´ıa de los conos se concentran en esa parte de la retina para perfeccionar el enfoque y as´ı poder leer, discriminar colores o sentir profundidad tridimensional. Como se ha mencionado anteriormente, es en la retina es donde se encuentran las c´elulas fotorreceptoras, que son esencialmente los conos y los bastones. Los bastones son sensibles a la luz tenue y acrom´atica (visi´on nocturna) y los conos a la luz crom´atica (visi´on diurna). La retina contiene aproximadamente 120 millones de bastones y 7 millones de conos. 2.2. SISTEMA VISUAL HUMANO 19 Figura 2.1: Anatom´ıa del ojo humano Figura 2.2: Diagrama esquem´atico de las conexiones neuronales entre las c´elulas ganglionar, bipolar, horizontales y amacrinas. [1] 20 CAP´ ITULO 2. ESTADO DEL ARTE La retina consta de tres capas de c´elulas con conexiones entre ellas, y en la capa inferior se ubican los bastones y los conos. Estas capas de conexi´on se denominan capas sin´opticas y se muestra un esquema en la figura 2.2. La capa por donde entra la luz es la capa nuclear externa, en la que se encuentran los bastones y conos. La primera capa de conexi´on es la capa plexiforme externa que conecta los receptores con las c´elulas bipolares. La capa nuclear interna es la capa central de c´elulas, se localizan las c´elulas bipolares, amacrinas y horizontales. La tercera y ´ultima capa es la capa ganglionar, la cual alberga las c´elulas ganglionares y se conectan con la capa central a trav´es de la capa de conexi´on plexiforme interna. 2.2.2. Psicof´ısica visual El objetivo de esta secci´on es estudiar diferentes aspectos de la visi´on como son la visi´on espacial, la visi´on temporal y la percepci´on del color. Visi´on espacial Las dimensiones de la retina se miden en proporci´on de la imagen proyectada en unidades de grado de ´angulo visual. La f´ovea centralis (o foveola) mide 400 µm de di´ametro y contiene 25.000 conos. La f´ovea mide 1500 µm de di´ametro y tiene una capacidad de 100.000 conos. La m´acula, parte central de la retina, mide 5.000 µm y almacena 650.000 conos. El ´angulo visual de un grado corresponde a 300 µm, por tanto, la foveola que mide 400 µm corresponde a 1.3◦, la f´ovea 5◦y la m´acula 16.7◦. Figura 2.3: Distribuci´on de los conos y bastones en la retina en funci´on del ´angulo visual. [1] En la figura 2.3 se muestra una distribuci´on de los conos y bastones en funci´on del ´angulo visual. La f´ovea contiene 147.000 conos/mm2y un n´umero ligeramente menor de bastones. A 10◦el n´umero de conos cae a menos de 20.000 conos/mm2y a 30◦el n´umero de bastones es 100.000 bastones/mm2. El campo visual corresponde 2.2. SISTEMA VISUAL HUMANO 21 a un ´area de 23.400 grados cuadrados de una elipse con el eje horizontal mayor de 180◦y el menor de 130◦. La zona de mayor agudeza visual se expande hasta los 4◦ o 5◦y descienciende bruscamente a medida que se hace m´as grande, de forma que a solo 5◦la agudeza cae hasta 50 %. A medida que aumentamos el ´angulo, los conos van aumentando su tama˜no y son los que m´as informaci´on aportan a los centros neuronales m´as profundos. Visi´on temporal La respuesta visual humana al movimiento se caracteriza por la persistencia visual y el conocido como fen´omeno phi. La persistencia describe la frecuencia de muestreo temporal del HVS y el fen´omeno phi un umbral a partir del cual el HVS detecta movimiento. Estos fen´omenos se pueden apreciar en el cine o la televisi´on para obtener percepci´on de movimiento a partir de im´agenes fijas que se muestran sucesivamente. El sistema visual es incapaz de obtener informaci´on de im´agenes que cambian muy r´apidamente, y por ello aparece un parpadeo a unos 50-60Hz (se suele llamar frecuencia cr´ıtica de parpadeo). Como podemos ver en la figura 2.4, cuando la frecuencia temporal presenta un valor bajo, la sensibilidad al contraste entre las im´agenes es muy grande. Sin embargo, a medida que aumentamos la frecuencia la sensibilidad disminuye, hasta el valor de frecuencia cr´ıtica (en torno a 50Hz), impidiendo apreciar el contraste. Esto sucede en el cine, en el que los fotogramas se muestran a una frecuencia de 24Hz; pero con un obturador de tres hojas hace que aumente la frecuencia a 72Hz. En la televisi´on sucede algo similar: la frecuencia es de 30Hz pero utiliza un esquema entrelazado y logra tener una frecuencia de 60Hz. El segundo hecho, el fen´omeno phi, explica el movimiento estrobosc´opico. Este es un efecto que se produce al iluminar un objeto que se mueve de forma r´apida y peri´odica con destellos de luz. Para que se produzca el movimiento estobosc´opico, la frecuencia entre destellos debe ser de 62Hz. Por otra parte, la respuesta temporal del HVS no es homog´enea en todo el campo visual. El movimiento se percibe de manera uniforme en todo el campo visual, pero la regi´on foveal es m´as receptiva a movimientos m´as lentos. La periferia de la f´ovea es m´as sensible a objetivos en movimiento que los estacionarios. En esencia, el sistema visual est´a dise˜nado para alertar de la entrada de objetos en el campo visual a trav´es de la periferia. Visi´on del color La visi´on del color se consigue gracias a los tres tipos de fotorreceptores de cono retiniano. Las curvas de sensibilidad espectrales de los tres tipos de receptores presentan un pico en 450, 520 y 555 nm de longitudes de onda, y corresponden a cada uno de los fotorreceptores azul, verde y rojo respectivamente. La mayor´ıa de los conos est´an concentrados en la zona central de la f´ovea, por lo que la distribuci´on de los conos se empobrece cuando nos alejamos de la parte central. Esto implica que la visi´on perif´erica sea tambi´en menos sensible al color. 22 CAP´ ITULO 2. ESTADO DEL ARTE Figura 2.4: Gr´afica en la que se muestra la sensibilidad al contraste en funci´on de la frecuencia temporal. [1] 2.2.3. Modelos de movimientos oculares Los ojos se mueven dentro de seis grados de libertad: tres traslaciones y tres rotaciones. Son tambi´en seis los m´usculos responsables de los movimientos oculares: para movimientos laterales encontramos los rectos medial y lateral; para movimientos arriba y abajo, los rectos superior e inferior; y para movimientos de giro los oblicuos superior e inferior. El sistema neuronal responsable de los movimientos oculares es la planta oculomotora. Los diferentes m´usculos oculares se ilustran en la figura 2.5. Figura 2.5: Estructura muscular del ojo. 1-Recto superior; 2- Elevador del p´arpado superior; 3- Recto lateral; 4- Recto medial; 5- Oblicuo superior;6- Tend´on reflejado del oblicuo superior. 7- Anillo de Zinn; 8- Recto inferior; 9- Oblicuo inferior. [1] Habitualmente se distinguen varios tipos de movimientos (o ausencias de movimientos) oculares: las sacadas, las fijaciones y los movimientos de persecuci´on. A continuaci´on nos ocupamos de ellos. 2.3. SISTEMAS DE EYE-TRACKING 23 Sacadas Los movimientos sac´adicos son movimientos r´apidos de los ojos cuyo objetivo es posicionar la f´ovea en una nueva ubicaci´on del campo visual. Estos movimientos pueden ser voluntarios pero tambi´en reflexivos, y su duraci´on var´ıa entre 10 y 100 ms. Tambi´en se caracterizan por ser movimientos estereotipados (se repiten ciertos patrones de movimiento) y bal´ısticos (el destino de los movimientos est´a preprogramado). En el control de los movimientos sac´adicos intervienen m´ultiples ´areas y circuitos cerebrales, por lo que su an´alisis es especialmente importante en muchos contextos. Esto implica que los sistemas de eye-tracking deben tener una resoluci´on temporal suficiente para poder capturar estos eventos. Movimientos de persecuci´on Los movimientos de persecuci´on ocurren cuando se realiza un seguimiento visual a un objeto que se est´a moviendo. Se trata de movimientos relativamente lentos, al menos en comparaci´on con los movimientos sac´adicos. Dependiendo de la velocidad del objeto perseguido, el movimiento de persecuci´on trata de igualar dicha velocidad. Fijaciones Se llaman fijaciones a los periodos de tiempo en los que la retina se estabiliza sobre un objeto. Se podr´ıa pensar que las fijaciones se pudiesen modelar como un movimiento de persecuci´on caracterizado por tener una velocidad cero, pero esto no es realmente cierto, ya que las fijaciones se caracterizan por tres movimientos oculares en de peque˜na envergadura: el temblor, la deriva y las microsacadas. Las microsacadas se producen debido a la sensibilidad del movimiento del tejido unicelular del sistema visual; son se˜nales que se suceden aleatoriamente y con diferente amplitud (tics oculares). Son los responsables del 80 % de la percepci´on visual. 2.3. Sistemas de eye-tracking El origen del eye-tracking se remonta al siglo XVII, cuando Louise Emile Javal, oftalm´ologo franc´es, se dio cuenta de que los ojos de los lectores no se mov´ıan de manera fluida, sino que realizaban movimientos r´apidos, que ahora denominamos sacadas, y pausas, que denominamos fijaciones. En esta ´epoca no se desarroll´o ning´un dispositivo para rastrear el movimiento de los ojos, s´olo se basaron en la observaci´on. Muchos a˜nos despu´es, en 1908, fue cuando Edmund Huey construy´o un dispositivo capaz de rastrear el movimiento ocular durante la lectura. Este dispositivo contaba con una lente de contacto con la pupila del lector y adem´as iba unida a un puntero que cambiaba de posici´on a medida que se iba moviendo el ojo. Los hallazgos que realiz´o se encuentran en un libro que public´o llamado The Psychology and Pedagogy of Reading. 24 CAP´ ITULO 2. ESTADO DEL ARTE Charles H. Judd, psic´ologo educativo estadounidense, fue el primero en utilizar una c´amara para grabar el movimiento ocular en una pel´ıcula y permitir su posterior estudio. Guy Thomas Buswell y Judd analizaron los movimientos oculares y obtuvieron grandes avances en la estudio de la lectura. Gracias a sus trabajos se describi´o que hay una diferencia en el comportamiento ocular entre la lectura oral y en silencio. Figura 2.6: Ejemplo de medici´on de electrooculograf´ıa (EOG). [1] Unas d´ecadas m´as tarde se empezaron a desarrollar nuevos m´etodos, como la electrooculograf´ıa (EOG), el m´etodo de lentes de contacto combinadas con una bobina, fotooculograf´ıa (POG) o videooculograf´ıa (VOG) y la reflexi´on pupilar/corneal combinada basada en v´ıdeo. 2.3.1. Electrooculograf´ıa (EOG) En 1939, Jung midi´o los movimientos oculares verticales y horizontales a trav´es de electrodos situados en la piel alrededor de los ojos. Este m´etodo recibe el nombre de electrooculograf´ıa (EOG), fue el m´etodo que m´as se utilizaba hace aproximadamente 40 a˜nos para el estudio de los movimientos oculares y se sigue utilizando en algunos casos en la actualidad. Se basa en la medici´on de la diferencia de potencial el´ectrico de las zonas de la piel donde se encuentran los electrodos. En la figura 2.6 se puede ver una imagen de un dispositivo de este tipo empleado sobre un voluntario. Los potenciales el´ectricos que se aplicaban a los electrodos eran valores muy bajos del rango de 15 a 200µV, y con este sistema se pueden conseguir sensibilidades del orden de 20µV/grado de movimiento ocular. Figura 2.7: Ejemplo de bobina incrustada en lente de contacto y el marco de campos electromagn´eticos para la medici´on del movimiento ocular. [1] 2.3. SISTEMAS DE EYE-TRACKING 25 2.3.2. Lentes de contacto combinadas con una bobina Otro de los m´etodos de medici´on ocular m´as precisos que se desarrollaron a lo largo del siglo XX consist´ıa en colocar un objeto mec´anico u ´optico sobre una lente de contacto que se colocaba sobre el ojo. En un primer momento se utilizaba un anillo de yeso unido directamente a la c´ornea y a mecanismos mec´anicos conectados a sus bol´ıgrafos de grabaci´on. Esta t´ecnica fue avanzando hasta llegar a una lente de contacto suficientemente grande para cubrir toda la c´ornea y la escler´otica. Ha habido diferentes dispositivos mec´anicos que se han unido a la lente, como los f´osforos reflectantes, los diagramas de l´ıneas y las bobinas de alambre. Este m´etodo principalmente empleaba una bobina que se mov´ıa sobre un campo electromagn´etico, pudiendo por lo tanto medirse dicho movimiento. En la figura 2.7 se puede ver la bobina insertada en la lente de contacto y el marco de campos electromagn´eticos para la medici´on del movimiento ocular. La forma de inserci´on de la lente de contac- to se puede ver en la figura 2.8. Este es un m´etodo que requiere cuidado y pr´actica a la hora de insertar la lente, ya que puede llegar a ser muy inc´omodo. Tambi´en es capaz de medir la posici´on del ojo en relaci´on con la cabeza. Figura 2.8: Ejemplo de inserci´on de una lente de contacto para medici´on de movimiento ocular. [1] 2.3.3. Foto-oculograf´ıa y V´ıdeo-oculograf´ıa En lugar de utilizar sistemas invasivos para detectar los movimientos de los ojos como hemos visto con las t´ecnicas anteriores, tambi´en es posible determinar la posici´on de la mirada, as´ı como los movimientos oculares, simplemente a partir de im´agenes o v´ıdeos de los ojos. Esto puede hacerse tratando de hacer un seguimien- to de diferentes puntos espec´ıficos de los ojos, como pueden ser la pupila, el limbo (parte del ojo que presenta el l´ımite entre el iris y la escler´otica), o analizando los reflejos corneales a una fuente de luz. En general, la luz infrarroja es la m´as adecuada para este tipo de sistemas, porque por una parte permite iluminar los ojos sin que el sujeto reaccione a ello o se vea incomodado, y por otra parte la detecci´on de los puntos de inter´es del ojo es m´as sencilla en im´agenes capturadas en este rango de frecuencias. El problema, claro, es que estos sistemas requieren por lo tanto de un hardware espec´ıfico para la emisi´on y la grabaci´on de este tipo de luz. En la figura 2.9(a) se puede ver unas im´agenes de un ojo en el que se ve las diferentes posiciones del limbo; adem´as en la figura 2.9(b) y figura 2.9(c) tambi´en se presentan dos aparatos de luz infrarroja para captar el seguimiento del limbo. Las t´ecnicas anteriores son adecuadas para la medici´on de movimientos oculares, pero no proporcionan mediciones del punto de visi´on. Para obtener estas mediciones se debe fijar la posici´on del ojo respecto de la cabeza y al punto de mirada, o deben medirse m´ultiples caracter´ısticas para diferenciar el movimiento de rotaci´on 32 CAP´ ITULO 3. TECNOLOG´ IAS BASE Principalmente, se encarga de dise˜nar y dar estilo a la p´agina web alterando el color, la fuente, el tama˜no, el espaciado y muchas m´as caracter´ısticas de los diferentes elementos que constituyen la estructura de la p´agina web [8]. Este lenguaje ha sido ´util para realizar el elemento del c´ırculo de los experimentos, ya que nos ha proporcionado la animaci´on del c´ırculo (haci´endose m´as grande y m´as peque˜no) para hacer la p´agina m´as amigable para el usuario. 3.4. Javascript Javascript es un lenguaje de secuencia de comandos dise˜nado para dotar a la p´agina web de cierto grado de interactividad. Puede, entre otras cosas, proporcionar mecanismos de detecci´on y tratamiento de eventos, como un click con un dispositivo apuntador, generalmente un rat´on. Es un lenguaje interpretado por el cliente, es decir, procesado por el navegador web y no por el servidor web. Este elemento fue importante porque, entre otras funciones, pudimos verificar formularios web antes de enviarlos al servidor, asegur´andonos de que todos los campos obligatorios del formulario hayan sido rellenados. [9] Este lenguaje fue empleado con frecuencia en la p´agina web. Sobre todo en la realizaci´on de los experimentos, ya que la posici´on del rat´on se recog´ıa gracias a los eventos que javascript proporcionaba. Se escogi´o esta tecnolog´ıa principalmente porque los eventos que se utilizan son parecidos a los utilizados en el lenguaje Java y pude aprender m´as r´apido como se implementaban. 3.5. PHP PHP es un lenguaje de programaci´on interpretado, y que se procesa en el lado del servidor, a diferencia de los lenguajes que hemos visto en los apartados anteriores. Es un lenguaje que se ha utilizado para la realizaci´on de las peticiones y las respuestas de la base de datos. Es el lenguaje elegido ya que es un lenguaje que se ha utilizado en una de las asignaturas de la carrera y daba muy buenos resultados a la hora de la realizar esas peticiones. Adem´as, se ha podido utilizar para crear variables de sesi´on dentro de la p´agina web una vez que el usuario iniciaba sesi´on. Esto ha hecho que fuese mucho m´as f´acil la realizaci´on del c´odigo. 3.6. Apache HTTP Server En la realizaci´on de este proyecto se ha tenido que usar un servidor web y por ello surge el problema de cual es el m´as adecuado para nuestra p´agina web. Se barajaron tres opciones: Nginx, Tomcat y Apache HTTP Server. Nginx es un tipo de servidor web bastante actual y es popular por la optimizaci´on de las conexiones de red, es decir, puede gestionar gran cantidad de clientes al mismo tiempo. Dado que la aplicaci´on web no va a tener tantas conexiones al mismo tiempo no ser´ıa necesario tener estas prestaciones. Tomcat se pens´o como posible servidor web ya que tambi´en es bastante popular, 3.7. MYSQL 33 pero se descart´o ya que se cre´o espec´ıficamente para aplicaciones Java y aunque puede servir p´aginas web no es tan eficiente como el servidor de Apache. Por tanto, dado que las anteriores opciones no son las m´as adecuadas para servir nuestra p´agina web, se eligi´o Apache como servidor web, entre otras cosas porque tiene una f´acil configuraci´on y para sitios web peque˜nos o medianos es la mejor opci´on. Adem´as, Apache HTTP Server es un servidor web de c´odigo abierto, popularizado entre los programadores por sus contribuciones para la mejora de funcionalidades y recursos. 3.7. MySQL Uno de los principales problemas que surgen al realizar una p´agina web es el sistema de gesti´on de base de datos que se va a utilizar. Por tanto, se tuvo que analizar las caracter´ısticas que deb´ıa tener la aplicaci´on y escoger el sistema m´as apropiado. Se pens´o en tres sistemas de gesti´on de bases de datos: Oracle (ya que es el m´as utilizado seg´un el ranking de sistemas de gesti´on de bases de datos [10]), PostgreSQL y MySQL. Oracle es un sistema de gesti´on de los m´as completos actualmente, destaca por su estabilidad, escalabilidad y por su soporte multiplataforma. Una de las razones por las que se descart´o fue que es un sistema que consume muchos recursos ya que presenta muchas funcionalidades, adem´as de ser un sistema que se utiliza para implementaciones a gran escala.[11] PostgreSQL es un sistema que tiene buena reputaci´on dentro de los sistemas de gesti´on de bases de datos y destaca por su gran fiabilidad e integridad de datos, pero tambi´en se suele utilizar para bases de datos grandes, y en nuestro proyecto no vamos a tener una base de datos de grandes dimensiones.[11] Por ´ultimo, MySQL es uno de los sistemas m´as sencillos para la iniciaci´on en los sistemas de gesti´on de base de datos. Destaca por su velocidad y bajo consumo de recursos. Uno de los principales inconvenientes de usar MySQL es que tiene menos funciones que las bases de datos mencionadas anteriormente. Por tanto, debido a la simplicidad y los pocos recursos que consume se ha optado por elegir MySQL como sistema de gesti´on de bases de datos. Adem´as, es un sistema que se ha estudiado durante la carrera y se puede encontrar documentaci´on de forma sencilla y fiable. Aunque se podr´ıa pensar que es un sistema que destaca por su sencillez y parece no ser estable, se utiliza para proyectos y empresas muy conocidas como Facebook, Youtube, GitHub, Tesla o incluso NASA. MySQL es un gestor de base de datos que aparecen organizado en tablas para poder relacionar los elementos o par´ametros de forma muy sencilla, logrando establecer relaciones entre registros, como nos sucede en nuestra base de datos, que se analizar´a en los siguientes cap´ıtulos. 34 CAP´ ITULO 3. TECNOLOG´ IAS BASE 3.8. Astah Astah es un programa para realizar diagramas UML, es f´acil de aprender y muy intuitivo. Tambi´en se ha utilizado este programa para otros trabajos realizados durante la carrera en cuanto a ingenier´ıa de software y daba muy buenos resultados. En el siguiente cap´ıtulo podemos ver el uso de este programa con el desarrollo de diagramas. Los logos de las tecnolog´ıas se pueden observar en la figura 3.1. (a) Logotipo HTML5. (b) Logotipo css. (c) Logotipo javascript. (d) Logotipo php (e) Logotipo apache (f) Logotipo MySQL Figura 3.1: Resumen gr´afico de las tecnolog´ıas utilizadas. Cap´ıtulo 4 An´alisis y dise˜no de la aplicaci´on 4.1. Introducci´on En este proyecto se pretende dise˜nar e implementar una aplicaci´on web para la obtenci´on de un conjunto de datos de entrenamiento de un sistema de eye-tracking sin utilizar ning´un hardware espec´ıfico. Hasta hace unos pocos a˜nos el eye-tracking se realizaba siempre con ciertos sistemas espec´ıficos, como un sistema de luz infrarroja o lentes de contacto. En este cap´ıtulo se elabora el dise˜no y el an´alisis de la aplicaci´on, adem´as de una recopilaci´on de los requisitos que necesita. Adem´as, se har´a un dise˜no de la base de datos. 4.2. An´alisis de la aplicaci´on En este apartado se va a realizar un an´alisis de la aplicaci´on desarrollada. Primero, se empezar´a analizando los requisitos funcionales y no funcionales y a continuaci´on el desarrollo de los casos de uso. 4.2.1. Especificaci´on de requisitos Los requisitos se pueden dividir en dos grupos: funcionales y no funcionales. Los funcionales engloban las caracter´ısticas requeridas del sistema que expresan una capacidad de acci´on del mismo, es decir, una funcionalidad. En cambio, los requisitos no funcionales suponen restricciones que afectan a los servicios o funciones del sistema, tales como accesibilidad, internalizaci´on, aspectos ´eticos y morales, etc. Requisitos funcionales En primer lugar se realiz´o un dise˜no de la estructura b´asica de la aplicaci´on con las funcionalidades que deb´ıa de tener la p´agina web en cuesti´on. Por ello, se redactaron los siguientes requisitos funcionales. El sistema deber´a permitir a un usuario registrarse en la aplicaci´on. El sistema deber´a permitir iniciar sesi´on a los usuarios registrados previamente, a trav´es de un c´odigo de 4 letras generado aleatoriamente y una contrase˜na. 35 36 CAP´ ITULO 4. AN ´ ALISIS Y DISE ˜ NO DE LA APLICACI ´ ON El sistema deber´a enviar un correo electr´onico al usuario una vez acabado su registro con el c´odigo de inicio de sesi´on generado. Durante el registro, el sistema dejar´a al usuario escoger las dimensiones de la pantalla y la posici´on en la que se encuentra la webcam en nuestro ordenador, a no ser de que se se est´e accediendo desde un m´ovil o tablet. En ese caso, el sistema permitir´a registrar al usuario sin ambos par´ametros y antes de la realizaci´on del experimento el sistema deber´a dejar que se introduzcan. El sistema permitir´a a los usuarios registrados escoger alguno de los dos experimentos para su realizaci´on. El sistema deber´a mostrar una p´agina principal donde se expone el prop´osito de la p´agina web, qui´enes somos y las empresas o asociaciones participantes en el proyecto. El sistema deber´a mostrar a los usuarios una explicaci´on de los experimentos antes de su realizaci´on. El sistema deber´a mostrar a los usuarios su informaci´on personal y les permitir´a modificar aquellos par´ametros que consideren oportunos. El sistema deber´a dejar a los usuarios borrar su cuenta si as´ı lo desean. El sistema deber´a mostrar a los usuarios las puntuaciones obtenidas tras las realizaci´on de cada experimento. Deber´a mostrar dos clasificaciones, una para las puntuaciones obtenidas globalmente de ese tipo de experimento y otra con las puntuaciones personales. El sistema podr´a diferenciar entre usuarios y administrador a trav´es de un campo de privilegio que viene prefijado cuando realizas el registro. El sistema deber´a permitir al administrador iniciar sesi´on en la aplicaci´on. El sistema deber´a mostrar al administrador una clasificaci´on de los experimentos realizados. Adem´as, el sistema deber´a permitir al administrador filtrar los experimentos por las fechas que desee. El sistema permitir´a al administrador descargar los ficheros correspondientes a los experimentos realizados. El sistema deber´a permitir a los usuarios contactar con los propietarios de la aplicaci´on v´ıa correo electr´onico en el caso de que tengan alguna duda o sugerencia. El sistema deber´a mostrar a los usuarios las pol´ıticas de privacidad que el usuario debe acepta siempre que quiera registrarse y participar en el proyecto. El sistema deber´a mostrar una p´agina de error en el caso de que durante el experimento no se cumplan con las especificaciones expuestas. El sistema deber´a dejar al usuario registrado probar la c´amara para que se almacenen los datos de la misma. 4.2. AN ´ ALISIS DE LA APLICACI ´ ON 37 Requisitos no funcionales Los requisitos no funcionales que se expusieron fueron los siguientes. El sistema mostrar´a la p´agina en espa˜nol. El sistema no deber´a permitir que se realicen experimentos desde navegadores que se est´en ejecutando en m´oviles o tablets. El sistema no almacenar´a en la base de datos ning´un dato personal, ya sea nombre, apellidos, correo electr´onico, etc. El correo electr´onico s´olo se usar´a para mandar al usuario el c´odigo de usuario pero no se almacenar´a en la base de datos. El sistema deber´a visualizarse y funcionar correctamente en las ´ultimas versiones de los navegadores Mozilla Firefox y Google Chrome. El sistema no almacenar´a la contrase˜na de los usuarios en texto plano sino que se almacenar´a encriptada. El sistema permitir´a interactuar con la p´agina de una forma fiable, sencilla y r´apida. Una vez vistos los requisitos funcionales y no funcionales pasamos a analizar las funcionalidades de la aplicaci´on. Para ello se van utilizar los diagramas de casos de uso, en los que se muestra la interacci´on entre los actores y los casos de uso del sistema. Los casos de uso representan los requisitos m´as potenciales del sistema, adem´as de ser la t´ecnica que permite capturar informaci´on acerca de c´omo un sistema trabaja o se desea que trabaje. En los diagramas de casos de uso se representa el sistema mediante una caja rectangular con el nombre en su interior, y los actores fuera. Cada actor est´a unido a los casos de uso, en los que participa, mediante una l´ınea. Los actores son entidades externas al sistema que guarda una relaci´on con ´este y demandan una funcionalidad. Com´unmente son operadores humanos aunque tambi´en pueden ser sistemas externos, m´aquinas, organizaciones, etc. Los casos de uso representan una unidad funcional que pueden ejecutar un determinado actor o actores, por tanto, existe una comunicaci´on entre ellos y el sistema. Un caso de uso se representa mediante una elipse dentro del rect´angulo que engloba al sistema y que se une con alg´un actor. Adem´as, se mostrar´an diagramas de secuencia de los casos de uso m´as ´utiles en la aplicaci´on. Los diagramas de secuencia representan c´omo se llevan a cabo los casos de uso que generan los actores sobre el sistema y c´omo el sistema reacciona realizando acciones solicitadas para proporcionar una respuesta adecuada. 4.2.2. Casos de uso Podemos ver en la figura 4.1 que tenemos dos actores, administrador y usuario. El primer actor es el usuario, el sujeto que va a colaborar en el proyecto y va a 38 CAP´ ITULO 4. AN ´ ALISIS Y DISE ˜ NO DE LA APLICACI ´ ON Figura 4.1: Diagrama de casos de uso de la aplicaci´on Eye-tracking realizar los experimentos. A continuaci´on, se van a detallar los diferentes casos de uso del usuario. RegistrarUsuario. Cualquier sujeto que entre en nuestra p´agina web tiene la posibilidad de registrarse para poder realizar los experimentos. el usuario debe cumplimentar un formulario indicando su informaci´on personal: color de ojos, edad, sexo, si el usuario realizar´a los experimentos con gafas o con lentillas; par´ametros relacionados con el ordenador que va a utilizar para la realizaci´on de los experimentos como las dimensiones de la pantalla o la posici´on de la webcam que va a utilizar; y par´ametros que se usaran para el inicio de sesi´on de los usuarios: el c´odigo de usuario, la contrase˜na y el correo electr´onico. Hay que destacar que el c´odigo de usuario es ´unico para cada usuario y es un c´odigo de 4 letras creado de forma aleatoria. Este c´odigo se enviar´a por correo electr´onico a los usuarios una vez que se hayan registrado, y no se almacenar´a el correo en la base de datos, as´ı aseguramos no tener ning´un dato personal de los usuarios. En cuanto a los par´ametros del ordenador, el usuario podr´a introducir en un 4.2. AN ´ ALISIS DE LA APLICACI ´ ON 39 cuadro de texto el valor de la dimensi´on de la pantalla en pulgadas, si es que lo conoce. En cualquier caso, tanto si lo conoce como si no, se comprobar´a si las dimensiones introducidas son correctas a trav´es de un dibujo de una tarjeta de la biblioteca, de identificaci´on o de cr´edito, que aumentar´a o disminuir´a de tama˜no hasta coincidir con nuestra tarjeta f´ısica. La posici´on de la webcam se elegir´a en base a unas ilustraciones. En el cap´ıtulo de Resultados se ver´an m´as detenidamente estos aspectos. IniciarSesion. El usuario puede iniciar sesi´on en la aplicaci´on, a partir de su c´odigo de usuario enviado a su correo electr´onico facilitado en el registro y de la contrase˜na. Una vez iniciada la sesi´on el usuario puede modificar su informaci´on si as´ı lo desea, ver las especificaciones de cada experimentos, probar la c´amara de su ordenador para obtener sus par´ametros, realizar los experimentos, etc. ModificarUsuario. Tiene la posibilidad de ver su informaci´on del registro, y modificar los par´ametros que desee, excepto el c´odigo de usuario que no se puede cambiar. En este caso aparecer´a una tabla con todos los datos del usuario y si quiere modificar alg´un par´ametro le llevar´a a un formulario como el que se cumpliment´o en el registro. VerInformacion. En a p´agina principal, el usuario puede ver toda la informaci´on espec´ıfica acerca del proyecto, en qu´e consiste, qui´enes somos, pol´ıtica de privacidad, organizaciones que han colaborado en el proyecto, etc. El usuario debe saber para qu´e sirve este proyecto y las finalidades que puede llegar a tener. ProbarCamara. El usuario deber´a probar la c´amara antes de la realizaci´on de los experimentos para que el sistema recoja informaci´on sobre ella. Es importante recoger estos par´ametros antes de la realizaci´on de los experimentos, sobre todo por la resoluci´on de la c´amara web con las que estemos trabajando, ya que queremos asegurar la mejor calidad de nuestras im´agenes y v´ıdeos. RealizarExperimento1. Este experimento consiste en captar im´agenes con la webcam a partir de un c´ırculo negro que se dispone en la pantalla y que cambia de posici´on cada 4 segundos. El cambio de posici´on se realiza de forma aleatoria. Cada vez que el c´ırculo cambia de posici´on el usuario debe realizar una fijaci´on sobre el objeto en cuesti´on y mover el rat´on del ordenador hacia ´este. Una vez que el puntero del rat´on est´e encima del c´ırculo, deber´a pulsar con el click izquierdo. En el momento que se realiza la pulsaci´on el sistema tiene que captar las posiciones tanto del c´ırculo como del rat´on, el instante temporal y la imagen. Estos par´ametros ser´an almacenados en la tabla de posicion tiempo de la base de datos cada vez que se pulse el rat´on. Cuando el experimento haya finalizado el sistema calcular´a una puntuaci´on del experimento y se almacenar´a en la tabla de experimento de la base de datos junto a otros par´ametros que se quieren almacenar, como pueden ser la fecha de realizaci´on del experimento, dimensiones de la pantalla del usuario en cent´ımetros y en p´ıxeles o el identificador de la c´amara. Al final del experi- 40 CAP´ ITULO 4. AN ´ ALISIS Y DISE ˜ NO DE LA APLICACI ´ ON mento se deber´a tener 15 im´agenes con sus respectivas posiciones e instantes temporales. RealizarExperimento2. Este segundo experimento consiste en seguir la trayectoria continua del c´ırculo negro sobre la pantalla con una duraci´on de 30 segundos. Durante ese tiempo, la webcam estar´a grabando la posici´on de la mirada y al final del experimento obtendremos un v´ıdeo y no unas im´agenes como en el experimento anterior. Adem´as se van a capturar las posiciones del c´ırculo y del puntero del rat´on. Por lo general, las c´amaras web graban el v´ıdeo a una velocidad de 30 im´agenes por segundo, entonces tambi´en es razonable que capturaremos 30 posiciones por segundo con sus respectivos instantes temporales. Estos valores se almacenar´an en la tabla de posicion tiempo de la base de datos. Una vez acabado el experimento se deber´a obtener alrededor de 900 posiciones con sus instantes temporales y el v´ıdeo. En este experimento el usuario tambi´en obtiene una puntuaci´on en base a la cercan´ıa entre la posici´on del c´ırculo y del puntero del rat´on. Esa puntuaci´on junto con los dem´as par´ametros del experimento, fecha, hora, dimensiones de la pantalla, etc, tambi´en ser´an almacenados en la tabla de experimento de la base de datos. VerPuntuaciones. Una vez finalizado el experimento, el usuario podr´a ver la puntuaci´on obtenida del experimento realizado. Adem´as, se ha realizado un ranking con las puntuaciones personales y globales de ambos experimentos, es decir, las clasificaciones son independientes para cada experimento. SalirAplicacion. El usuario puede salir de la aplicaci´on siempre que lo desee. El administrador es el que va a obtener los datos de los experimentos que se realicen y, por ello, tiene dos funciones dentro de la aplicaci´on. VerListaExperimentos. Una vez que ha iniciado sesi´on, tiene la capacidad de poder ver el listado de experimentos que se han realizado en un panel de control que s´olo ´el puede ver. En este panel puede buscar los experimentos seg´un la fecha en la que se han realizado. DescargarDatos. Tiene la posibilidad de descargar los datos de los experimentos realizados. En el listado de experimentos podr´a descargar un s´olo experimento o todos los que le salgan en el d´ıa filtrado. El administrador obtendr´a un fichero .zip con las im´agenes o el v´ıdeo correspondiente al experimento y un fichero .JSON con los par´ametros relativos al experimento, al usuario y a la c´amara. A continuaci´on, se va a explicar a trav´es de diagramas de secuencia los casos de uso m´as relevantes de la aplicaci´on. Diagramas de secuencia Inicio de sesi´on. El inicio de sesi´on se realiza tanto si eres usuario como si eres el administrador. En la figura 4.2 se puede observar el diagrama se secuencia de este caso de uso, que en este caso aparece un usuario pero ser´ıa igual 4.2. AN ´ ALISIS DE LA APLICACI ´ ON 41 para el administrador. El usuario introduce el c´odigo de sesi´on que obtiene al registrarse en la aplicaci´on y la contrase˜na; el sistema pasa los datos a la base de datos para que verifique a qui´en corresponden esas credenciales. Una vez que el sistema recibe confirmaci´on, muestra la p´agina de mostrar experimentos para que el usuario escoja el experimento que desee. Una vez que han iniciado Figura 4.2: Diagrama de de secuencia de iniciar sesi´on sesi´on en el sistema, el usuario tiene diferentes funciones dentro del sistema, como modificar su informaci´on si ha habido alg´un fallo o probar la c´amara web antes de la realizaci´on de los experimentos, pero la m´as importante es la de realizar los experimentos. Por ello van a ser los dos casos de uso que se an a exponer a continuaci´on. Realizar experimento 1. En la figura 4.3 se presenta el diagrama de secuencia de la realizaci´on del experimento n´umero 1 de la aplicaci´on. Una vez que empieza el experimento se van realizando pulsaciones en el rat´on cada 4 segundos que es cuando cambia de posici´on el c´ırculo, cada vez que se pulsa el rat´on se guardan los datos en la tabla de posici´on tiempo de la base de datos. Transcurridos 60 segundos el experimento finaliza y se guardan los datos de la puntuaci´on, junto con otros par´ametros, en la base de datos del experimento. Realizar experimento 2. En la figura 4.4 se presenta el diagrama de secuencia de la realizaci´on del experimento n´umero 2 de la aplicaci´on. El diagrama de secuencia es el mismo que para el primer experimento con la particularidad de que este experimento dura 30 segundos y que los par´ametros se guardan en tabla de posici´on tiempo con mucha m´as frecuencia dado que el c´ırculo est´a en continuo movimiento. Adem´as tiene la particularidad de que se almacena un v´ıdeo en la base de datos y no im´agenes. En cuanto al administrador, s´olo tiene una funci´on, que es la de listar y descargar los datos de los experimentos que se han realizado. Por tanto, ´estos son los diagramas de secuencia que se van analizar. 48 CAP´ ITULO 4. AN ´ ALISIS Y DISE ˜ NO DE LA APLICACI ´ ON Figura 4.15: Dise˜no de la p´agina de ranking de las puntuaciones de los usuarios de la aplicaci´on Figura 4.16: Dise˜no de la p´agina de error de experimentos de la aplicaci´on Estructura de la base de datos La base de datos de nuestro proyecto presenta 4 tablas: usuario, experimento, posicion tiempo e info camara. En la figura 4.17 se pueden ver las diferentes tablas con sus respectivas cardinalidades y con sus par´ametros. A continuaci´on, se van a ir describiendo los diferentes par´ametros de las tablas que se muestran. Tabla de usuario. Relativa a los datos del usuario que se almacenan tras el proceso de registro. •codigo: valor de 4 letras generado aleatoriamente al realizar el registro. Es ´unico para cada usuario y por eso es la clave primaria de la tabla de usuarios. Este valor es enviado por correo electr´onico al usuario. •pass: contrase˜na que el usuario introducir´a en el registro y que le servir´a 4.3. DISE ˜ NO 49 Figura 4.17: Base de datos de la aplicaci´on Eye-tracking. para iniciar sesi´on en la aplicaci´on web. Esta contrase˜na debe contener m´as de 6 caracteres y menos de 16 para que sea v´alida. •edad: edad del usuario que se registra en la p´agina. Debe tener 18 a˜nos o m´as para poder registrarse y realizar los experimentos. •sexo: especificaci´on de sexo, si es masculino o femenino. •color ojos: especificaci´on del color de los ojos, el usuario deber´a elegir entre: verdes, marrones, azules, grises, miel y negros. •gafas: especificaci´on de si el usuario va a realizar los experimentos con gafas o sin ellas. •lentillas: especificaci´on de si el usuario va a realizar los experimentos con lentillas o sin ellas. •ancho cm: ancho en cent´ımetros de la pantalla del ordenador con el que va a realizar el experimento. •alto cm: alto en cent´ımetros de la pantalla del ordenador con el que va a realizar el experimento. •diagonal-pulgadas: diagonal en pulgadas de la pantalla del ordenador con el que va a realizar el experimento. 50 CAP´ ITULO 4. AN ´ ALISIS Y DISE ˜ NO DE LA APLICACI ´ ON •posicion camara: posici´on en la que se encuentra la webcam del ordenador, pueden ser: est´andar (la webcam esta en la parte central superior de la pantalla del ordenador), a la derecha de la pantalla, a la izquierda de la pantalla y en otra posici´on. Tabla de posicion tiempo. Los datos se almacenan en esta tabla seg´un transcurre un experimento •id posicion tiempo: identificador de cada posici´on, tiempo e imagen que se almacena en la tabla. Es un identificador autoincremental y es la clave primaria de esta tabla. •experimento: c´odigo de identificaci´on del experimento que se est´a realizando. ´ Este se genera a partir de la fecha y la hora de la realizaci´on del experimento y el c´odigo del usuario que lo est´a realizando. •tiempo contador: contador del n´umero de posiciones e im´agenes que se almacenan en un experimento. •click x: coordenada x de la posici´on del rat´on en el momento de la captura de la imagen o del v´ıdeo. •click y: coordenada y de la posici´on del rat´on en el momento de la captura de la imagen o del v´ıdeo. •pos x: coordenada x de la posici´on del c´ırculo. •pos y: coordenada y de la posici´on del c´ırculo. •imagen: imagen capturada en el momento que se realiza la pulsaci´on del rat´on. Ser´a un par´ametro NULL cuando se realice el experimento 2. •video: v´ıdeo capturado tras finalizar el experimento. En este caso almacenaremos este campo en el experimento 2, en el caso de que se realice el experimento 1 este valor ser´a NULL. Tabla de experimento. Los datos del experimento se almacenan tras la finalizaci´on del mismo. •cod exp: c´odigo que diferencia el experimento que se ha realizado. En el caso de haberse realizado el experimento 1, obtendr´a un valor de 1, por el contrario, si se realiza el experimento 2, obtendr´a un valor de 2. •puntuacion: La puntuaci´on se obtiene tras la realizaci´on del experimento. Sirve para mostrar al usuario una realimentaci´on de c´omo lo ha realizado. Esta puntuaci´on se calcula en funci´on de la distancia que haya entre el puntero del rat´on y la posici´on del c´ırculo en el momento de la captura de los datos. Esta puntuaci´on comprende el rango de 1 a 100, siendo 1 la peor puntuaci´on y 100 la mejor. •ancho px: ancho de la pantalla en p´ıxels. •alto px: alto de la pantalla en p´ıxels. •fecha: fecha de la realizaci´on del experimento. El formato es AAAA-MM- DD, donde AAAA corresponde al a˜no, MM al mes y DD al d´ıa. •tiempo: hora de la realizaci´on del experimento. El formato es HH:MM:SS, donde HH es la hora, MM los minutos y SS los segundos. 4.3. DISE ˜ NO 51 •id camara: identificador de la c´amara del usuario. Este valor se genera antes de realizar el experimento cuando se prueba la c´amara. Est´a compuesto por el nombre de la c´amara del usuario Tabla info camara. Tabla relacionada con los par´ametros de la c´amara web del usuario. Los datos se almacenan antes de la realizaci´on del experimento, cuando se prueba la c´amara. •nombre camara: nombre de la c´amara del usuario. •calidad: calidad de la c´amara del usuario. •micro: par´ametro que indica si se est´a utilizando el micr´ofono del usuario al activar la c´amara. •alravoz: par´ametro que indica si se est´a utilizando el altavoz del usuario al activar la c´amara. •frame rate: velocidad de im´agenes por segundo que puede capturar la c´amara. •modo imagen: modo de la imagen a capturar, pueden ser RGB o CMYK entre otras. •meg: resoluci´on de la c´amara en megap´ıxels. •resolucion: resoluci´on de la c´amara. El formato de este campo es NNNNxMMMM, donde NNNN es la resolucion ancho y MMMM es la resolucion alto. •resolucion ancho: es el ancho de las im´agenes y el v´ıdeo que se capturen. Dado por el par´ammetro anterior. •resolucion alto. es el alto de las im´agenes y el v´ıdeo que se capturen. Dado por el campo de resolucion. •relacion aspecto. la relaci´on de aspecto es la proporci´on entre el ancho y el alto. •velocidad bits: es la velocidad con la que se capturan los las im´agenes de la c´amara en bits. •cant colores: cantidad de colores que puede recoger la c´amara del usuario. •ligereza: se mide en %. •luminosidad: tambi´en llamada claridad, es la cantidad de luz emitida o reflejada por una objeto, en nuestro caso de la imagen o del v´ıdeo. Se mide en %. •brillo: par´ametro de sensaci´on visual por la zona que parece mostrar m´as o menos luz. Se mide en %. •matiz: par´ametro que diferencia un color de otro. Se mide en %. •saturacion: intensidad o grado de pureza del color. Se mide en %. 52 CAP´ ITULO 4. AN ´ ALISIS Y DISE ˜ NO DE LA APLICACI ´ ON Cap´ıtulo 5 Implementaci´on y resultados 5.1. Introducci´on En este cap´ıtulo se va a exponer una descripci´on de la implementaci´on y un an´alisis de los resultados obtenidos de la realizaci´on de la aplicaci´on web. Tendremos tres secciones, la interfaz del usuario, la interfaz del administrador y pruebas. En la primera de ellas, se har´a una explicaci´on de los aspectos m´as importantes sobre la interfaz del usuario. En la segunda secci´on se mostrar´a la interfaz del administrador y c´omo se ha implementado para poder descargar los datos, ya que es la principal funci´on que tiene este usuario. Por ´ultimo, se mostrar´an las pruebas que se han realizado para asegurar que la aplicaci´on funciona correctamente. Esta aplicaci´on web se ha desarrollado en un servidor local, ya que es m´as sencillo realizar pruebas de como funciona y m´as c´omodo que tener que ir modificando y conect´andonos al servidor de la escuela. Pero el objetivo de esta aplicaci´on es que llegue a gran cantidad de usuarios y tener un servidor que guarde todos los datos que se van generando. Por ello, se ha proporcionado una m´aquina virtual del grupo de investigaci´on de la escuela para poder conectarnos con su servidor y hacer el despliegue. Por tanto, en esta secci´on se va a explicar la implementaci´on que se ha realizado en base al servidor local. En el ´ultimo apartado de la secci´on se ver´an las pruebas que se han realizado en cuanto al despliegue en el servidor de la escuela. 5.2. Interfaz de usuario La interfaz de usuario es la que se encarga de: registrar a los usuarios, iniciar sesi´on, hacer pruebas de la c´amara, realizar los experimentos y mostrar las puntuaciones. Dentro de estas funcionalidades en este apartado se van a exponer las implementaciones m´as relevantes. 5.2.1. Formulario de la aplicaci´on En primer lugar el usuario debe registrarse en el sistema a trav´es del formulario que aparece en la figura 5.1. En este formulario se deber´a registrar la informaci´on personal del usuario, las dimensiones de la pantalla y la posici´on de la webcam. 53 54 CAP´ ITULO 5. IMPLEMENTACI ´ ON Y RESULTADOS Adem´as, se deber´a aceptar los t´erminos y condiciones establecidas para la realizaci´on de dichos experimentos. (a) Primera parte del formulario. (b) Segunda parte del formulario. Figura 5.1: Formulario de la aplicaci´on web El formulario se ha realizado en base al elemento form de HTML, y lo m´as relevante es de este formulario es la obtenci´on de las dimensiones de la pantalla del usuario que se explica a continuaci´on. Obtenci´on de las dimensiones de la pantalla del usuario Uno de los principales retos del proyecto consiste en c´omo obtener las dimensiones de la pantalla del usuario. El primer paso era encontrar c´omo poder encontrar el ancho y el alto de la pantalla en p´ıxeles. Para ello se han utilizado una funciones que vienen predefinidas en javascript a partir de los objetos document,window y screen, dependiendo del navegador que estemos usando [12]. Una vez que tenemos las dimensiones de la pantalla en p´ıxeles hace falta tenerlas en cent´ımetros ya que nos interesa tener dimensiones reales para luego poder realizar el an´alisis de los datos. Encontrar las dimensiones de la pantalla en cent´ımetros no es tan inmediato como en p´ıxeles y hay que realizar c´alculos. Para poder obtener los valores en cent´ımetros hay que calcular esos valores en pulgadas y una vez que tenemos la proporci´on en pulgadas ya podremos pasarlo a cent´ımetros. Conversi´on de p´ıxeles a pulgadas La conversi´on de p´ıxeles a pulgadas se realiza a partir de un cuadro de 1 pulgada x 1 pulgada y las dimensiones de una tarjeta de identificaci´on. El cuadro de 1 pulgada x 1 pulgada se dibuja en una zona de la pantalla que no se ve y nos servir´a para ver la proporci´on de p´ıxeles que hay en 1 pulgada cuadrada, es decir, obtendremos los p´ıxeles por pulgada en las coordenadas x e y. Por 5.2. INTERFAZ DE USUARIO 55 otro lado necesitamos saber una medida real de la pantalla, por eso se dibuja una tarjeta de identificaci´on como la que aparece en la figura 5.2, que ser´a una modificaci´on de la que aparece en la referencia [13]. El usuario pulsar´a los botones de Aumentar tama˜no yDisminuir tama˜no para hacer coincidir las dimensiones de la tarjeta dibujada con la tarjeta real que tiene; cada vez que el usuario pulsa estos botones aumenta o disminuye la escala por la que se dividir´an las dimensiones en p´ıxeles. Podemos apreciar las expresiones las dimensiones en pulgadas de la pantalla en 5.1, 5.2 y 5.3, donde dpi x y dpi y son los p´ıxeles por pulgada que describ´ıamos anteriormente. Figura 5.2: Tarjeta de identificaci´on del registro que sirve para obtener las dimensiones de la pantalla ancho pulgadas =ancho px dpi x ∗escala (5.1) alto pulgadas =alto px dpi y ∗escala (5.2) diagonal pulgadas =p(ancho pulgadas2+alto pulgadas2) (5.3) Conversi´on de pulgadas a cent´ımetros. Una vez que hemos calculado las dimensiones en pulgadas, realizar el c´alculo de las dimensiones en cent´ımetros es inmediato. Sabiendo que una pulgada equivale a 2.54 cent´ımetros, las expresiones de las dimensiones en cent´ımetros quedar´ıan multiplicadas por ese factor. Estos valores ser´an almacenados en la base de datos en la tabla de usuarios. Cabe destacar que los experimentos se deben realizar en un ordenador port´atil o de sobremesa, no es compatible para tablets o m´oviles. Por tanto, antes de que el usuario realice los experimentos el sistema debe cerciorarse de que se est´a realizando en un ordenador. Para ello, se ha realizado una comprobaci´on de los agentes de usuario que se est´an utilizando y as´ı ver si nos encontramos en una tablet o un m´ovil [14]. En ese caso no se podr´a realizar el experimento y deber´a iniciar sesi´on con un ordenador. 56 CAP´ ITULO 5. IMPLEMENTACI ´ ON Y RESULTADOS 5.2.2. Obtenci´on de los par´ametros de la c´amara Uno de los problemas que se presentaban era que al generar las im´agenes del primer experimento no se determinaba ninguna resoluci´on para ellas. Es decir, pod´ıamos generar im´agenes de cualquier tama˜no pero no se sab´ıa cual pod´ıa ser el adecuado para que las im´agenes fuesen de buena calidad. Por tanto, se encontr´o una p´agina web en la que se realizaba una prueba de la webcam y se obten´ıan muchos par´ametros, entre los que se encontraba la resoluci´on de la c´amara web [15]. Adem´as, se obtuvieron par´ametros secundarios para la aplicaci´on, pero a´un as´ı se han guardado en la base de datos por si en el futuro pueden ayudar a analizar datos. Un ejemplo de la obtenci´on de estos par´ametros se puede ver en la siguiente figura 5.3. En la figura 5.3(a) se puede ver un ejemplo de los diferentes par´ametros que se recogen de la c´amara y en la 5.3(b) se muestra un lienzo con la grabaci´on que se esta haciendo al usuario. Adem´as al terminar esta prueba disponemos dos botones uno para guardar la informaci´on en la base de datos y otra por si nuestros resultados nos han sido satisfactorios volver a realizar la prueba. (a) Ejemplo de informaci´on de los par´ametros de la c´amara. (b) Ejemplo de la visualizaci´on de la pantalla de probar la c´amara. Figura 5.3: Ejemplo de obtenci´on de los par´ametros de la c´amara. 5.2.3. Realizaci´on del experimento 1 En este apartado se va a explicar los diferentes pasos que se han ido realizando para el desarrollo del experimento 1. Este experimento se basa fundamentalmente en seguir con la mirada y con el rat´on un c´ırculo negro que aparece y desaparece en lugares aleatorios de la pantalla. El c´ırculo permanece durante 4 segundos est´atico en una parte de la pantalla, cuando el usuario est´e encima del c´ırculo con el rat´on debe clicar con el bot´on izquierdo del rat´on y se realizar´a la captura con la webcam. El experimento tiene una duraci´on de 60 segundos. A partir de esta peque˜na explicaci´on se exponen las diferentes componentes del experimento. 5.2. INTERFAZ DE USUARIO 57 Generaci´on del canvas y del c´ırculo El experimento se pens´o en realizar sobre un lienzo o canvas, ya que es un elemen- to HTML que se utiliza para dibujar gr´aficos, cuadros, c´ırculos, textos o im´agenes [12]. El experimento deb´ıa tener un c´ırculo sobre el canvas que fuese apareciendo y desapareciendo, y en una primera instancia se pens´o en representar directamente el c´ırculo sobre el mismo lienzo a trav´es de los m´etodos predefinidos del canvas. Despu´es, se pens´o en cambiar la forma del c´ırculo, ya que ´este era demasiado b´asico y se cre´o un una estructura div encima del lienzo para que fuese m´as atractivo para el usuario. Este c´ırculo contaba con un pulsaci´on alrededor del c´ırculo y el c´odigo se obtuvo de una de las referencias que se exponen [16]. Se puede ver una imagen de este c´ırculo en la figura 5.4. Figura 5.4: C´ırculo negro con aura azul principal elemento de los experimentos. Una vez que se implement´o el canvas y el c´ırculo se necesitaba que las dimensiones del canvas fuesen las dimensiones de la pantalla. Las dimensiones de la pantalla ya se calcularon antes de empezar el experimento, por tanto, se le asignaron esos valores al ancho y largo del canvas. Aunque se hab´ıan definido esas dimensiones al lienzo, surg´ıa el problema de que hab´ıa partes de la p´agina web que no deb´ıan aparecer en la pantalla como la barra de navegaci´on, ya que no se estaba optimizando toda la pantalla del ordenador. Por ello, se decidi´o realizar una funci´on con los m´etodos de los elementos de los diferentes navegadores con las solicitudes para que se pusiese en pantalla completa. Algunos de estos m´etodos son elem.requestFullscreen(), elem.mozRequestFullScreen() oelem.webkitRequestFullscreen() [8]. Generaci´on del c´odigo de experimento El c´odigo del experimento se genera cada vez que se inicia un experimento y est´a asociado a cada usuario. ´ Este se genera a partir de la fecha y la hora de inicio del experimento, el tipo de experimento y el c´odigo de usuario. As´ı, se est´a garantizando que no haya dos c´odigos de experimento iguales. La generaci´on de este c´odigo se puede ver en la figura 5.5 en la que se calcula la fecha y la hora a partir del objeto Date [8]. Este c´odigo tambi´en nos servir´a para crear el nombre del directorio donde guardaremos las im´agenes, por tanto, una vez est´e generado crearemos el directorio con ese nombre a partir de la funci´on mkdir [17]. Generaci´on de posiciones del c´ırculo En este experimento se generan posiciones del c´ırculo cada 4 segundos. Para ello se ha realizado una funci´on llamada dibujar circulo que llama a la funci´on 64 CAP´ ITULO 5. IMPLEMENTACI ´ ON Y RESULTADOS realiza una petici´on a la base de datos con el tipo de experimento. Nos devolver´a esas puntuaciones por orden de mayor a menor. En el caso del ranking personal tambi´en se indicar´a el c´odigo de usuario para filtrar en la base de datos y obtener s´olo las puntuaciones de ese usuario. Una vez que tenemos todos los datos se plasma una lista con las 10 mejores puntuaciones en la p´agina en cuesti´on y aparece en negrita la puntuaci´on del ´ultimo experimento realizado independientemente del lugar en el que se encuentre. Quiere decir que si mi puntuaci´on del experimento realizado no est´a entre las 10 mejores tambi´en saldr´a en esa lista en el lugar que ocupe. As´ı, estamos dando a entender al usuario cuanto tiene que mejorar para llegar a mejores posiciones. En el ranking global tambi´en se indicar´a con la palabra Usted al lado de las puntuaciones si estas pertenecen al usuario que ha realizado el experimento. El sistema tambi´en clasifica las puntuaciones entre Mala,Regular yBuena en funci´on de unos umbrales. Si la puntuaci´on es menor de 60 se considera que el experimento no se ha realizado del todo bien y que es probable que se pueda mejorar con facilidad; si la puntuaci´on est´a entre 60 y 85 se considera que la puntuaci´on es aceptable pero se puede mejorar y ser m´as preciso en el seguimiento; y por ´ultimo, si la puntuaci´on es mayor de 85 se considera que el experimento se ha realizado correctamente y el usuario debe seguir as´ı en sus siguientes intentos. En la siguiente figura 5.11 se muestra un ejemplo con las puntuaciones de unos de los ejemplos realizados en el experimento 1. En esta figura se muestran ambos rankings, tanto el ranking personal como el global, siempre dentro del mismo tipo de experimento, en este caso es un ranking del experimento 1. Figura 5.11: Puntuaciones personales y globales de uno de los experimentos realizados 5.3. INTERFAZ DE ADMINISTRADOR 65 5.3. Interfaz de administrador La interfaz de administrador es la encargada de listar y descargar los datos de los experimentos. En este apartado se va a explicar c´omo se han realizado estas funciones y el formato de los ficheros que el administrador va a generar. Listar y descargar experimentos El administrador tiene que poder descargar los datos de los experimentos que desee, por ello se pens´o en realizar un panel de control donde se pudiesen elegir los experimentos en funci´on su fecha de realizaci´on. Una vez introducida una fecha, el sistema realiza una petici´on a la base de datos y devuelve los c´odigos de dichos experimentos y los muestra en una tabla. Cuando el administrador pulsa el bot´on de descargar un experimento, el sistema genera un fichero .zip con las im´agenes/v´ıdeo del experimento dependiendo si es el n´umero 1 o 2, y los datos de la base de datos asociado ha dicho experimento en un fichero .json. La creaci´on del fichero .zip se cre´o a partir del objeto ZipArchive(), en el que se a˜nadi´o un directorio donde almacenaremos las im´agenes/v´ıdeo. Cuando tenemos creado el directorio adjuntamos estas im´agenes/v´ıdeos con la funci´on zipfiles(). [17] Adem´as se adjunta el fichero .json a partir de los datos almacenados en la base de datos. La estructura de este fichero debe ser f´acil de interpretar para el administrador ya que posteriormente tendr´a que realizar su an´alisis. El formato del fichero .json es el mostrado en la figura 5.12. [8]. 5.4. Pruebas En este apartado se han realizado varias pruebas en el servidor local del ordenador personal, que es el utilizado durante todo el proyecto. 5.4.1. Pruebas realizadas en el servidor local Las pruebas que se han realizado en el servidor local, son pruebas de funcionamiento de la aplicaci´on que son las que se van a exponer a continuaci´on. Captura de im´agenes en el experimento 1 Uno de los principales objetivos de la aplicaci´on es el de capturar im´agenes de buena calidad, por ello se ha estado probando muchas formas de capturar las im´agenes hasta que se ha llegado a las im´agenes que se muestran en la figura 5.13. En la figura 5.13(a) se puede ver como la posici´on del c´ırculo se encuentra en un lado de la pantalla, ya que los ojos apuntan hacia all´ı, sin embargo, en la figura 5.13(b) se puede ver como el usuario mira al frente porque el c´ırculo se encuentra en la parte central de la pantalla. Las im´agenes necesitaban tener un m´ınimo de calidad para que se apreciase donde estaba mirando el usuario, ya que si no no se podr´ıan analizar los datos posteriormente. 66 CAP´ ITULO 5. IMPLEMENTACI ´ ON Y RESULTADOS Prueba del temporizador del experimento 2 El experimento 2 consiste en la captura de v´ıdeo y de posiciones del rat´on. El experimento dura 30 segundos y se capturan 30 posiciones del rat´on por segundo. Por tanto, es dif´ıcil ver si cada posici´on generada coincide en el punto exacto en el que estamos grabando el v´ıdeo. Esto se puede ver a partir de la posici´on de los ojos en el v´ıdeo del usuario y la posici´on que ocupa el c´ırculo en un instante concreto. Es una prueba aproximada para ver si en realidad estamos cometiendo un error muy grande, ya que si no, no nos servir´ıan estos datos capturados. Esta prueba se ha realizado sobre la curva de la circunferencia ya que es m´as f´acil detectar las posiciones. Lo que se ha realizado es una disminuci´on de la variable dependiente para que el c´ırculo diese saltos m´as grandes, y el periodo con el que se dibujaba el c´ırculo tambi´en se ha disminuido a 1 segundo, por tanto, para esta prueba tendremos 30 posiciones, una cada segundo. Dado que la duraci´on es 30 segundos, se ha ajustado el valor de la variable dependiente a π/15, as´ı aseguramos que el c´ırculo debe terminar donde empez´o en 0, ya que ha dado una vuelta completa a la circunferencia (2π). Se pueden ver en las im´agenes capturadas que coinciden aproximadamente la posici´on de la mirada hacia el c´ırculo, figura 5.14(a), y la posici´on del c´ırculo en el instante final, figura 5.14(b). Si no fuesen simult´aneamente se ver´ıa como la posici´on de la mirada estar´ıa en otra posici´on y no la que se muestra. Prueba env´ıo de correo Al realizar el registro en la aplicaci´on se manda un correo al usuario que se registra. Este correo contiene un mensaje con el c´odigo de usuario necesario para inicia sesi´on en la aplicaci´on. Se ha realizado una prueba al realizar un registro de un usuario y he rellenado el campo de correo electr´onico con un correo personal y el mensaje recibido es el que se muestra en la figura 5.15. En ´esta se puede ver que el c´odigo de correo que se env´ıa es PYWL. 5.4. PRUEBAS 67 (a) Datos del experimento, del usuario y de la c´amara de un experimento en formato json. (b) Datos de la posici´on del c´ırculo y del tiempo del click de un experimento en formato json. (c) Datos de la posici´on del rat´on en el momento del click de un experimento en formato json. Figura 5.12: Fichero con los datos del experimento 2021-8-10 13 38 37 1 YFDR con formato json. 68 CAP´ ITULO 5. IMPLEMENTACI ´ ON Y RESULTADOS (a) Imagen generada en la primera posici´on del c´ırculo. (b) Imagen generada en la segunda posici´on del c´ırculo. Figura 5.13: Im´agenes capturadas en una de las pruebas realizadas del experimento 1 (a) Imagen generada a partir del v´ıdeo de uno de los experimentos de tipo 2 realizado (b) Posici´on del c´ırculo en el instante final de uno de los experimentos de tipo 2 realizado. Figura 5.14: Im´agenes que representan las pruebas que se han realizado respecto a la simultaneidad de la posici´on y el v´ıdeo respecto al esperimento de tipo 2. Figura 5.15: Captura del mensaje recibido por parte de la aplicaci´on. Cap´ıtulo 6 Manuales 6.1. Manual de usuario de la aplicaci´on En este manual de usuario se dar´a una explicaci´on de cada una de las partes de la p´agina web. Ser´a una gu´ıa para los usuarios sin experiencia en la web. 6.1.1. Ventana principal En esta ventana principal podemos tener dos casos posibles: el usuario est´a identificado o el usuario no est´a identificado. Usuario no identificado. El usuario no est´a identificado en la aplicaci´on no tiene la posibilidad de realizar los experimentos. En este caso, se puede apreciar en la figura 6.1, que la barra de navegaci´on tiene dos botones en la parte superior derecha, uno para registrarse y otro para iniciar sesi´on en la aplicaci´on. El bot´on de comenzar llevar´a al usuario a la p´agina de inicio de sesi´on ya que no est´a identificado. Figura 6.1: Ventana principal del usuario de la aplicaci´on. 69 70 CAP´ ITULO 6. MANUALES Usuario identificado. El usuario est´a identificado y tiene la posibilidad de realizar alg´un experimento. En la barra de navegaci´on se suprimir´an los botones de registrarse y de iniciar sesi´on y aparecer´an uno de experimentos, otro de informaci´on y otro de cerrar sesi´on como se puede ver en la figura 6.2. Adem´as, si en este caso se pulsa el bot´on de comenzar de la parte centrar no nos llevar´a a la p´agina de experimentos ya que hemos iniciado sesi´on anteriormente. Figura 6.2: Barra de navegaci´on de un usuario que ya se ha identificado en la p´agina. En la parte inferior de la ventana principal tenemos una parte com´un para ambos usuarios, tanto si han sido identificados como si no. En esta parte encontramos dos secciones: en qu´e consiste la aplicaci´on y qui´enes son los creadores de la aplicaci´on, como se puede observar en la figura 6.3. Adem´as, en la figura 6.4 se puede ver la ´ultima parte de la ventana principal con las instituciones que han participado en el proyecto, y un pie de p´agina con botones que nos llevan a la p´agina de contacto y a la p´agina donde se describen las pol´ıticas de privacidad. Figura 6.3: Ventana principal del usuario de la aplicaci´on en la que se describe qui´enes somos y en qu´e consiste. 6.1.2. Registro, modificaci´on de usuario e inicio de sesi´on Registro El registro debe llevarse a cabo antes de la realizaci´on de los experimentos y constar´a de 4 partes. 6.1. MANUAL DE USUARIO DE LA APLICACI ´ ON 71 Figura 6.4: Ventana principal del usuario de la aplicaci´on en la que se muestran las instituciones que han ayudado en el protyecto. Cuenta de usuario. Son los par´ametros que se deben introducir para iniciar sesi´on en la aplicaci´on siempre que se desee. Como se puede ver en la figura 6.5 consta de un c´odigo de usuario, una contrase˜na y un correo electr´onico. El c´odigo usuario es generado por el sistema y ser´a enviado al usuario registrado v´ıa correo electr´onico. Figura 6.5: Secci´on del registro donde el usuario debe introducir la informaci´on de la cuenta de usuario. 72 CAP´ ITULO 6. MANUALES Informaci´on personal. En esta secci´on se recaudar´a informaci´on sobre la edad, el sexo, el color de ojos y si el usuario va a realizar los experimentos con gafas o con lentillas y se puede observar en la figura 6.6. Esta informaci´on solo se va a utilizar para fines cient´ıficos. Figura 6.6: Secci´on del registro donde el usuario debe introducir la informaci´on personal. Dimensiones de la pantalla. Esta parte del registro es de las m´as importante para nuestro proyecto, ya que se necesita saber las dimensiones de la pantalla para poder analizar los datos que vamos a generar. Por tanto, se debe introducirlas dimensiones de la pantalla en pulgadas en el campo que se indica y pulsa el bot´on de Aplicar, en el caso de que sepamos ese dato. Si el usuario que se va a registrar no sabe ese dato, deber´a indicarlo en el campo No s´e cual es la dimensi´on de mi pantalla. En cualquiera de los dos casos aparecer´a una tarjeta dibujada en la pantalla representando un carn´e de la biblioteca de la Universidad de Valladolid que se puede ver en la figura 6.7. Esta tarjeta sirve para comprobar si hemos introducido bien el valor de nuestra pantalla en pulgadas o para saberlo en caso de que no lo hayamos introducido. Debemos tener a mano una tarjeta de una biblioteca, de identidad o similar y ponerla sobre la tarjeta de la pantalla y ver si las dimensiones coinciden. Si no coinciden debemos pulsar los botones de Aumentar tama˜no oDisminuir tama˜no hasta que coincida. Cuando los tama˜nos coincidan no debemos hacer nada m´as en esta parte del registro y pasar a la siguiente. Posici´on de la webcam. El usuario debe introducir la posici´on e la que se encuentra la webcam de su ordenador, ya que esa posici´on importa a la hora de analizar los datos obtenidos. Esta secci´on se puede ver en la figura 6.8 Las secciones de cumplimentar las dimensiones de la pantalla y la posici´on de la webcam no se podr´an completar si no se est´a accediendo a trav´es de 6.1. MANUAL DE USUARIO DE LA APLICACI ´ ON 73 Figura 6.7: Secci´on del registro donde el usuario debe introducir las dimensiones de la pantalla. un ordenador port´atil o de sobremesa.En el caso de que se acceda desde una m´ovil o tablet, se indicar´a al usuario con un mensaje de alerta como el que aparece en la figura 6.9. En este caso podr´a terminar el registro pero sin estos estos valores. Cuando se acceda desde un ordenador, cumplimentar´a la parte del registro que falta antes de realizar los experimentos. Adem´as, presenta una ´ultima secci´on en la que el usuario deber´a leer detenidamente el consentimiento y aceptaci´on de los t´erminos que se exponen. Una vez le´ıdos, tendr´a que pulsar el bot´on de aceptaci´on de los t´erminos y de verificaci´on de edad.Una vez terminado el registro se deber´a pulsar el bot´on de Crear usuario como el que aparece en la figura 6.10. Modificaci´on de usuario El usuario tiene la capacidad de poder cambiar informaci´on de su cuenta, si as´ı lo considera. Para ello, debe estar identificado en la aplicaci´on web. Como se pude ver en la figura 6.2 hay un bot´on de informaci´on que es el que nos da la informaci´on de los par´ametros del usuario. Al pulsar ese bot´on nos mostrar´a una p´agina como la que se presenta en la figura 6.11. Se muestran los valores que se han introducido en el registro a excepci´on de la contrase˜na que es un valor que no se puede ense˜nar y el correo electr´onico que es un campo que no se almacena en la base de datos y que s´olo se usa para enviar un correo al usuario. En esta ventana el usuario puede editar el perfil o borrar los datos y la cuenta del sistema. Si decide editar el perfil 80 CAP´ ITULO 6. MANUALES Figura 6.18: Ventana para mostrar al usuario las puntuaciones globales y personales del experimento. Figura 6.19: Ventana para mostrar al usuario que ha habido un error en la realizaci´on del experimento. funci´on que tiene el administrador de la aplicaci´on es descargar los datos de los experimentos y para ello necesita iniciar sesi´on, listar los experimentos y descargarles. La funci´on de iniciar sesi´on no se va a exponer, ya que es la misma que la de un usuario normal. 6.2. MANUAL DE ADMINISTRADOR DE LA APLICACI ´ ON 81 6.2.1. Listar experimentos Una vez que el administrador ha iniciado sesi´on en la aplicaci´on, le aparecer´a una ventana de panel de control para realizar las b´usquedas de los experimentos realizados. El panel de control, visualizado en a figura 6.20, presenta dos buscadores: Buscador por fecha. El administrador debe introducir una fecha en el formato adecuado y escoger el experimento del que quiera elegir los datos. Esto se debe a que en el experimento 1 se almacenan im´agenes y en el 2 v´ıdeos, as´ı el administrador puede guardar los experimentos independientemente del tipo que sean. Buscador por intervalo de fechas. El administrador debe introducir dos fechas. La primera de ellas siempre m´as antigua que la segunda, si no aparecer´a un error. Adem´as, deber´a escoger experimento como en el caso anterior. En cualquiera de los dos casos las fechas deben ser introducidas en el formato correc- to. Este formato debe ser AAAA-MM-DD, donde AAAA representa el a˜no, MM el mes, y DD el d´ıa de la realizaci´on del experimento. Los dos buscadores son independientes entre s´ı, y deben introducirse los par´ametros correspondientes al buscador o mostrar´a un error. Cuando se haya terminado de introducir los valores se pulsar´a el bot´on de Buscar de buscador correspondiente. Figura 6.20: Ventana para mostrar al administrador el panel de control de buscador de experimentos. Una vez que se ha pasado a la siguiente p´agina aparecer´a una lista con el c´odigo de los experimentos que coincidan con la fecha buscada. Por ejemplo, en la figura 6.21 se puede observar una lista de los experimentos realizados del experimento 1 con fecha 2021-08-10. 6.2.2. Descargar experimentos El administrador dispone de una lista de experimentos y puede descargar los datos de un experimento concreto o puede descargar todos los experimentos de una 82 CAP´ ITULO 6. MANUALES Figura 6.21: Ventana para mostrar al administrador la lista del experimento 1 con fecha 2021-8-10. fecha. Se van a exponer ambas situaciones y que se obtendr´ıa de cada una de ellas. Descargar un experimento concreto. El administrador pulsa el bot´on Descargar de uno de los experimentos expuestos y se descargar´a un fichero .zip cuyo nombre es el c´odigo de de experimento, por ejemplo 2021-8-10-10 13 38 37 1 YFDR.zip. Una vez que hemos descomprimido el fichero obtendremos un fichero .json con la informaci´on detallada de dicho experimento y dependiendo si es el experimento 1, un directorio con las fotos correspondientes y si es el experimento 2, un directorio con el v´ıdeo, como aparece en las figura 6.22. Figura 6.22: Descarga del experimento 2021-8-10-10 13 38 37 1 YFDR, en el que aparece un fichero .json y un directorio con las im´agenes capturadas . Descargar todos los experimentos de una fecha concreta. El administrador pulsa el bot´on de Descargar todos y se descargar´a un fichero con el nombre de la fecha en la que se est´a buscando, por ejemplo 2021-08-10.zip. Dentro de ese directorio habr´a varios directorios con los experimentos individuales de la fecha asignada como se muestra en la figura 6.23. Esos 5 experimentos son los correspondientes al experimento 1 con fecha 2021-08-10. Dentro de cada una de los directorios estar´an los datos correspondientes a los experimentos individuales explicados anteriormente. 6.3. MANUAL DE MANTENIMIENTO DE LA APLICACI ´ ON 83 Figura 6.23: Descarga de los experimentos con fecha 2021-08-10 . El an´alisis de los datos por parte del administrador ser´a una tarea posterior que no se ha implementado en el proyecto. 6.3. Manual de mantenimiento de la aplicaci´on La aplicaci´on se ha montado en un servidor de la Escuela T´ecnica Superior de Ingenieros de Telecomunicaci´on de la Universidad de Valladolid. Para ello se ha tenido acceso remoto a una m´aquina virtual para poder desplegar el proyecto. En este apartado se va a realizar una explicaci´on de los pasos que se han seguido para su despliegue y como poder actuar en caso de se tenga que realizar cambios en la aplicaci´on. Los primeros pasos fueron conectarnos a la m´aquina virtual a trav´es de ssh, para ello se utilizaba la siguiente sentencia en la l´ınea de comandos. ssh -Y -p 467 [email protected] Para realizar todas las instalaciones y configuraciones en la m´aquina virtual se necesita permisos de root o administrador. Hay que tener en cuenta que la m´aquina virtual presenta un sistema operativo de linux, as´ı que es importante saber comandos de linux para poder entender y realizar estos pasos correctamente. Una vez que hemos entrado en la m´aquina y entrado en la sesi´on del administrador debemos realizar varias cosas: instalar apache, mysql y php; crear un host virtual para el sitio web; y probar la conexi´on con la base de datos desde php [20]. A continuaci´on se va a detallar como se han realizado cada uno de los pasos hasta llegar a desplegar la p´agina web. 6.3.1. Instalar apache, mysql y php En primer lugar se instal´o el servidor web de apache ya que es un de los servidores m´as populares del mundo. Para realizar esta instalaci´on se ha utilizado el comando: sudo apt install apache2 En segundo lugar se realiz´o la instalaci´on de mysql que ser´a el sistema de gesti´on de base de datos para poder almacenar y gestionar lo datos del sitio web. El comando utilizado para esta instalaci´on es el que aparece a continuaci´on: sudo apt install mysql-server 84 CAP´ ITULO 6. MANUALES Una vez que se ha instalado se ha ejecutado una secuencia de comandos de seguridad que viene preinstalada en mysql. Con este comando se eliminan algunos par´ametros predeterminados y bloquear´a el acceso a su sistema de base de datos. sudo mysql_secure_installation A partir de aqu´ı se le har´an una serie de preguntas para validar la contrase˜na que desea imponer para cada vez que se desee acceder a la base de datos como root. Una vez que se ha realizado esta validaci´on podr´a acceder a mysql a trav´es del comando: mysql y podr´a salir con el comando exit Lo ´ultimo que queda por instalar es php, el componente de la configuraci´on que procesar´a el c´odigo para mostrar el contenido al usuario final. En este caso se necesitan tres paquetes php, php-mysql para poder conectarse con la base de datos y libapache2-mod-php que habilita a apache para gestionar ficheros php. El comando utilizado para instalar los paquetes es el siguiente: sudo apt install php libapache2-mod-php php-mysql Una vez instalado podr´a confirmar su versi´on de php con el comando php -v 6.3.2. Crear un host virtual para el sitio web A partir del servidor web de apache se pueden crear host virtuales para m´as de un dominio en un ´unico servidor. En este manual se va a configurar el dominio cairo.lpi.tel.uva.es. La m´aquina virtual de linux nos proporciona una configuraci´on en la que encontramos ficheros html en el directorio /var/www/html. En ese directorio es donde deber´ıamos a˜nadir nuestros ficheros de la p´agina web, sin embargo, ´este se dejar´a como directorio predeterminado en el caso de que no coincida con la petici´on a nuestro sitio web y se cre´o otro directorio con nuestro dominio, para ello utilizamos el siguiente comando: sudo mkdir /var/www/cairo.lpi.tel.uva.es Despu´es se cambiaron los permisos del directorio: sudo chmod 755 /var/www/your_domain Despu´es se crear´a un nuevo fichero en el directorio sites-available de apache utilizando el editor de l´ınea de comandos que prefiera, en nuestro caso hemos utilizado nano: sudo nano /etc/apache2/sites-available/cairo.lpi.tel.uva.es.conf As´ı estaremos creando un fichero de configuraci´on para ese dominio del que podemos ver su contenido en la figura 6.24 Con la configuraci´on de este fichero estamos configurando el host virtual para que apache proporcione cairto.lpi.tel.uva.es usando /var/www/cairo.lpi.tel.uva.es como directorio root. Para habilitar el nuevo host virtual debe introducir el siguiente comando 6.3. MANUAL DE MANTENIMIENTO DE LA APLICACI ´ ON 85 Figura 6.24: Fichero de configuraci´on de apache . sudo a2ensite cairo.lpi.tel.uva.es Es recomendable deshabilitar el sitio web predeterminado que viene instalado en apache, ya que en algunos caso puede que se sobreescriba en nuestro host virtual. Para deshabilitar el sitio web se utiliz´o el comando: sudo a2dissite 000-default Para verificar que hemos escrito bien el fichero de configuraci´on del host virtual y que se carguen los cambios que hemos realizado deberemos utilizar la siguiente secuencia de comandos. sudo apache2ctl configtest sudo systemctl reload apache2 El sitio web ya se ha activado, pero el directorio root web est´a vac´ıo, para comprobar que funciona correctamente se cre´o un fichero index.html con c´odigo html para verificar el funcionamiento del sitio web. Una vez creado el fichero se accedi´o desde un navegador a partir del nombre de dominio o de la direcci´on ip del servidor: http://servidor_de_dominio_o_IP Una vez que se ha probado ya se puede a˜nadir todos los ficheros de la p´agina web creada al directorio /var/www/cairo.lpi.tel.uva.es. 86 CAP´ ITULO 6. MANUALES 6.3.3. Probar la conexi´on con la base de datos desde php Se va a realizar una prueba para establecer la conexi´on con mysql y ejecutar consultas a la base de datos. Primero debemos crear la base de datos ya que ahora se tiene que poder guardar datos en el nuevo servidor, no como. en las pruebas que se realizaban en la m´aquina personal que ten´ıamos un servidor local. Para ello iniciamos mysql y creamos la base de datos con el comando: CREATE DATABASE eye_tracking; Una vez creada la base de datos se puede crear un usuario nuevo y dar privilegios a este nuevo usuario. Esto hace que la base de datos sea m´as segura ya que tiene un m´etodo de autentificaci´on predeterminado. CREATE USER ’example_user’@’%’ IDENTIFIED WITH mysql_native_password BY ’password’; Para darle permiso a est usuario a la base de datos: GRANT ALL ON eye_tracking.* TO ’example_user’@’%’; Se puede verificar si el usuario nuevo tiene los permisos adecuados al iniciar sesi´on de nuevo en mysql con las credenciales del usuario: mysql -u example_user -p A continuaci´on crearemos las tablas de la base de datos, para ello, lo que se ha realizado es generar todas las tablas en un fichero y despu´es agregarlas a la consola de mysql, ya que modificar par´ametros en la consola es m´as complicado que hacerlo sobre un editor de texto. Las tablas creadas se pueden ver en la siguiente figura 6.25 Adem´as, dado que la aplicaci´on tiene un administrador que ya viene prefijado se ha a˜nadido en la base de datos con el c´odigo de usuario ROOT y el campo de privilegio a 1. Como podemos ver en la sentencia de la figura 6.26 se inserta en la tabla de usuarios. 6.3. MANUAL DE MANTENIMIENTO DE LA APLICACI ´ ON 87 (a) Tablas de posicion tiempo e info camara de la base de datos. (b) Tablas de usuarios y experimentos de la base de datos. Figura 6.25: Tablas de la base de datos. Figura 6.26: Sentencia para a˜nadir al usuario privilegiado de la aplicaci´on. 88 CAP´ ITULO 6. MANUALES Cap´ıtulo 7 Conclusiones En este cap´ıtulo se comentan las conclusiones obtenidas de este trabajo y las l´ıneas futuras que se seguir´an a partir de la aplicaci´on creada. 7.1. Conclusiones Como resultado de este trabajo, se ha implementado un sistema de captura de datos para la realizaci´on de eye-tracking sin hardware espec´ıfico. La evaluaci´on de la aplicaci´on ten´ıa principalmente los siguientes objetivos: crear una aplicaci´on web amigable y escalable, capturar im´agenes y v´ıdeos de los usuarios, exportar todos los datos disponibles en la base de datos por parte del administrador para su posterior an´alisis y desplegar la aplicaci´on a una gran cantidad de sujetos. El primero de los objetivos es la implementaci´on de la aplicaci´on web, se puede ver en los diferentes manuales realizados, tanto del usuario como del administrador, que la aplicaci´on es intuitiva y f´acil de usar. Se pretende que llegue a gran cantidad de p´ublico para obtener el mayor n´umero de datos posibles para su posterior an´alisis. En cuanto al segundo objetivo queda comprobado que la captura de las im´agenes y v´ıdeos son de buena calidad como se presenta en el apartado de pruebas del cap´ıtulo 5. Las im´agenes sobre todo presentan un buen enfoque al ojo que es lo que m´as nos interesa, ya que a la hora de realizar el an´alisis se valorar´a la posici´on y direcci´on a la que est´a mirando. El tercero de los objetivos es el de descargar los datos capturado en la aplicaci´on. Se puede observar que tanto en el apartado de pruebas del cap´ıtulo 5 como en el manual de administrador del cap´ıtulo 6, se ha realizado con ´exito la descarga de los datos capturados durante las pruebas realizadas en la aplicaci´on. Los ficheros siguen una estructura organizada para que no haya errores entre los experimentos. A nivel m´as general, las principales conclusiones obtenidas de la realizaci´on de este trabajo son las siguientes. En primer lugar, uno de aspectos m´as importantes de este trabajo es la decisi´on de no utilizar un dispositivo de seguimiento ocular para la realizaci´on de los experimentos. Como ya se coment´o, uno de las particularidades de realizar el seguimiento ocular era que los dispositivos utilizados eran bastante costosos y no todo el mundo pod´ıa obtener uno, esto hace que s´olo se pueda reali- 89