Capítulo 5 - Modelo de Desarrollo Propuesto
97
Figura 29 Sprint Número Cinco Fuente: Propia
Para la visualización de la información obtenida del SDK del Emotiv Epoc se realiza el desarrollo de una aplicación que cuenta con la visualización de barras de estado de las emociones, histograma de los valores normalizados de las emociones a lo largo del tiempo, gráfica de barras de las bandas de poder separadas por el tipo de onda cerebral y la funcionalidad para grabar en archivos CSV separados tanto los valores normalizados de las emociones como los valores asociados a las bandas de poder.
98
Historia de Usuario
Historia de Usuario Número: 1 Fecha:
Nombre historia: Desarrollo de aplicación para visualización de registro de actividad cerebral (EmotivPRE)
Prioridad en negocio: Alta
Riesgo en desarrollo: Media
Puntos estimados: 4 Iteración asignada: 1
Programador responsable: Andrés Ovidio Restrepo Rodríguez, Daniel Esteban Casas Mateus
Descripción:
Para realizar la visualización de los registros de la actividad cerebral se desarrolla una aplicación llamada EmotivPRE, la cual tendrá dentro de sus funcionalidades la graficación en tiempo real y la grabación de los datos visualizados en archivos con formato CSV.
Observaciones:
1. La grabación de los datos se hará por medio del panel de interacción con el usuario. 2. Si se va a sobrescribir un archivo CSV este no puede estar abierto
Tabla 33 Historia de usuario sprint 5 Fuente: Propia
Sprint Backlog
ID Nombre Descripción Estimación
(horas) Prioridad 1 Configuración y representación de la vista principal Plantear la arquitectura de la aplicación, seleccionar las librerías a trabajar e
implementar la base de la interfaz gráfica.
Capítulo 5 - Modelo de Desarrollo Propuesto
99 2
Representación visual del análisis emocional a partir del registro de actividad cerebral
Realizar barras de estado para la visualización del valor normalizado de las emociones. 120 Alta 3 Realización de grafica para la visualización emocional y de bandas de poder
Realizar gráficas para visualizar las emociones a lo largo del tiempo y las bandas de poder. 100 Alta 4 Grabación de los datos de la actividad cerebral Almacenar en archivos CSV los valores de las
emociones y de las bandas de poder por separado
74 Alta
Tabla 34 Spring Backlog sprint 5 Fuente: Propia
Tareas Sprint 5
Fuente: Propia
Tarea
Número tarea: 1 Número historia: 1
Nombre tarea: Configuración y representación de la vista principal Tipo de tarea:
Desarrollo
Puntos estimados: 1
Fecha inicio: 03/12/2018 Fecha fin: 08/12/2018
Responsable: Andrés Ovidio Restrepo Rodríguez, Daniel Esteban Casas Mateus Descripción:
Para la visualización de los datos obtenidos en el anterior sprint, se realiza la implementación de una vista separada en cuatro (4) partes, en esta tarea se muestra la configuración base para dichas partes.
100
Fuente: Propia
Tarea
Número tarea: 3 Número historia: 1
Nombre tarea: Realización de grafica para la visualización emocional y de bandas de poder
Tipo de tarea: Desarrollo
Puntos estimados: 1
Fecha inicio: 22/01/2019 Fecha fin: 28/01/2019
Responsable: Andrés Ovidio Restrepo Rodríguez, Daniel Esteban Casas Mateus
Tarea
Número tarea: 2 Número historia: 1
Nombre tarea: Representación visual del análisis emocional a partir del registro de actividad cerebral
Tipo de tarea: Desarrollo
Puntos estimados: 1
Fecha inicio: 14/01/2019 Fecha fin: 21/01/2019
Responsable: Andrés Ovidio Restrepo Rodríguez, Daniel Esteban Casas Mateus Descripción:
A partir de los datos normalizados obtenidos anteriormente se realiza una barra de estado para cada una de las emociones en donde se mostrará el valor en tiempo real.
Capítulo 5 - Modelo de Desarrollo Propuesto
101 Descripción:
Para una mejor visualización y plasmar las emociones en una gráfica se realiza un histograma con los valores que cada una de las emociones va tomando a lo largo del tiempo de ejecución. A partir de los cálculos realizados con los datos de las bandas de poder, se realiza una serie de gráficas de barras, que representan cada uno de los tipos de ondas cerebrales, donde su valor está expresado en decibeles.
Tabla 37 Tarea 3 sprint 5 Fuente: Propia
Tarea
Número tarea: 4 Número historia: 1
Nombre tarea: Grabación de los datos de la actividad cerebral Tipo de tarea:
Desarrollo
Puntos estimados: 1
Fecha inicio: 29/01/2019 Fecha fin: 02/02/2019
Responsable: Andrés Ovidio Restrepo Rodríguez, Daniel Esteban Casas Mateus Descripción:
Se realiza la grabación tanto de los datos normalizados de las emociones como de los valores de cada una de las ondas cerebrales a lo largo del tiempo, cada grabación de registros se hace en archivos CSV separados.
Tabla 38 Tarea 4 sprint 5 Fuente: Propia
Desarrollo Tareas Sprint 5
5.6.4.1
Desarrollo Tarea 1 : Configuración y representación de la vista principal
Para la representación gráfica de los datos obtenidos en el sprint anterior, se procede a la implementación de la aplicación EmotivPRE, que se hará en el lenguaje de programación Python.Como primer paso se realiza la arquitectura de la aplicación, la cual está compuesta por los scripts que se visualizan en la Figura 30 Arquitectura EmotivPRE:102
Figura 30 Arquitectura EmotivPRE Fuente: Propia
Donde coreEmotivPre.py se encarga de realizar la ejecución principal de la aplicación comenzando por la apertura de la parte gráfica, que se encuentra en vistaEmotiv.py, además se encarga de enlazar los datos obtenidos con su correspondiente parte de visualización, datos vienen de emotionMetrics.py para las emociones y bandPower.py para las bandas de poder, finalmente los datos son almacenados en archivos CSV, por medio del script saveData.py que almacena los datos a partir de lo enviado por los scripts de emociones y bandas de poder.
Para comenzar con la configuración de la interfaz gráfica se debe definir el objeto que se utiliza como raíz o padre, es decir, el objeto en el que serán almacenadas las gráficas y demás objetos de interacción con el usuario, en el siguiente fragmento de código se define este objeto especificándole que ocupará toda la pantalla:
Capítulo 5 - Modelo de Desarrollo Propuesto
103
def definirRaiz():
root = Tk.Tk()
root.state('zoomed')
screen_width = root.winfo_screenwidth()
screen_height = root.winfo_screenheight()
size = (screen_width, screen_height)
return root, size
Código 42 Definir raiz de la aplicación
Fuente: Propia
Con el objeto padre o raíz ya definido se configura el fondo que tendrá la aplicación, para realizar este paso primero se diseñó la imagen, esta se puede ver en la Figura 31.
Figura 31 Fondo de la aplicación Fuente: Propia
Obteniendo el tamaño de la pantalla y el objeto raíz se configura el fondo para que este ocupe las dimensiones completas de la ventana definida en Tkinter, el siguiente fragmento de código muestra cómo realizar esta acción:
104
def definirFondo(root, size):
fname = Image.open("fondo15.png").resize(size)
bg_image = ImageTk.PhotoImage(fname, master=root)
bg_label = Tk.Label(root, image=bg_image)
bg_label.photo = bg_image w = bg_image.width()
h = bg_image.height()
bg_label.place(x=0, y=0, relwidth=1, relheight=1)
return bg_label, w, h
Código 43 Definir fondo EmotivPRE Fuente: Propia
5.6.4.2
Desarrollo Tarea 2 : Representación visual del análisis emocional a partir
del registro de actividad cerebral
Para realizar las representaciones gráficas de las barras de estado se hizo uso de la librería de Python Tkinter la cual contiene las gráficas y funcionalidades que se describirán en este sprint.
El elemento usado para realizar las barras de estado es Scale la cual tiene la siguiente estructura para cada una de las emociones:
scale_var = Tk.Scale(parent, {option_1, option_2, …, option_n})
scale_var.place(x=pos_x, y= pos_y)
Código 44 Barras de estado emocional Fuente: Propia
Donde parent es el objeto padre del elemento actual, es decir el objeto al que pertenece la barra de estado, pos_x y pos_y son las posiciones dentro de la ventana en las que están las barras de estado y finalmente las opciones utilizadas para la configuración de las barras se muestran en la Tabla 39.
Capítulo 5 - Modelo de Desarrollo Propuesto
105
Opción Descripción
from El valor mínimo que toma la barra de estado to El valor máximo que toma la barra de estado
orient Orientación de la barra de estado, puede ser horizontal o vertical, para este caso el valor es ‘horizontal’
resolution Valor que toma cada intervalo dentro de la barra de estado, para este caso se coloca -1 con el objetivo de no hacer ningún redondeo a dicho valor
troughcolor El color en formato hexadecimal que toma la barra de estado sliderlength El tamaño en pixeles que tiene el señalador, es decir, el rectángulo
dentro de la barra de estado
length Longitud en pixeles de la barra de estado
label Etiqueta que tiene la barra de estado en la parte superior
showvalue Valor inicial que toma la barra de estado antes de empezar a tomar los valores en tiempo real
font Tupla con los valores del nombre de la fuente y el tamaño width Ancho en pixeles de la barra, para el caso horizontal es la altura
Tabla 39 Configuración barras de estado emocional Fuente: Propia
Al realizar la configuración cada una de las barras de estado se obtiene lo presentado en la Figura 32.
106
Figura 32 Sección de barras de estado emocional Fuente: Propia
5.6.4.3
Desarrollo Tarea 3 : Realización de grafica para la visualización emocional
y de bandas de poder
Con los valores en las barras de estado y los datos de las bandas de poder calculados en el anterior sprint se realizan las gráficas correspondientes donde se visualiza el cambio a lo largo del tiempo, para este caso se hace uso de la librería de Python matplotlib.animation y su integración en la ventana principal se realiza con Tkinter. Para la configuración de cada una de estas gráficas se debe hacer una configuración inicial la cual es igual para ambos gráficos, en el siguiente fragmento de código se muestra esta configuración:
Capítulo 5 - Modelo de Desarrollo Propuesto
107 fig, ax = plt.subplots(1,1, figsize=(14, 7))
fig.subplots_adjust(left=0.08, bottom=0.15, top=0.86)
ax.set_facecolor('#fcfcfc')
ax.yaxis.grid(linestyle='--',zorder=0)
# get rid of the frame
for spine in fig.gca().spines.values():
spine.set_visible(False)
ax.tick_params(top=False, bottom=False, left=False, right=False,
labelleft=True, labelbottom=True)
ax.spines['bottom'].set_visible(True)
Código 45 Configuración vizualización de datos Fuente: Propia
Como se menciona anteriormente esta configuración se hace para ambas gráficas, en cuanto a la gráfica emocional, se deben agregar las siguientes líneas de código, dado que cada una de las líneas en el histograma tiene una configuración diferente:
line1, = ax1.plot([], [], lw=1.3, color='#d8b359',zorder=3)
line2, = ax1.plot([], [], lw=1.3, color='#9966cc',zorder=3
line3, = ax1.plot([], [], lw=1.3, color='#c01d1d',zorder=3)
line4, = ax1.plot([], [], lw=1.3, color='#4488d4',zorder=3)
line5, = ax1.plot([], [], lw=1.3, color='#00944d',zorder=3)
line = [line1, line2, line3, line4, line5]
Código 46 Configuración de líneas emocionales Fuente: Propia
En el anterior fragmento de código se define el nombre de cada una de las líneas, el grosor, la ubicación y el color específico dependiendo de la emoción, para finalmente almacenarlos en un arreglo. En la Figura 33 se presentan las gráficas previamente descritas.
108
Figura 33 Zona de visualización de datos Fuente: Propia
5.6.4.4
Desarrollo Tarea 4 : Grabación de los datos de la actividad cerebral
Finalmente se procede a terminar la interfaz gráfica con la configuración de los elementos de interacción con el usuario para realizar la grabación de datos en archivos CSV, en el siguiente fragmento de código se muestra esta configuración de un botón como ejemplo, un campo de entrada de datos y una lista:campoIdentificador = Tk.Entry(frameDatos,textvariable=id,width=20)
…
listTipoEstudio = Tk.Listbox(frameDatos,height=2, width=8,
font=("Helvetica", '12'))
listTipoEstudio.insert(1, "Manual")
Capítulo 5 - Modelo de Desarrollo Propuesto
109
image_info=ImageTk.PhotoImage(Image.open("info.png").resize((100,100 )), master=bg_label)
button_info = Tk.Button(bg_label, image=image_info, bg="white",
height=100, width=100, relief='flat')
button_info.photo = image_info
Código 47 Configuración zona de datos de grabación Fuente: Propia
Con esta parte quedaría finalizada la interfaz gráfica respecto a los elementos de interacción con el usuario, en la Figura 34 se presenta dicha sección.
Figura 34 Sección opciones de grabación Fuente: Propia
Como último paso queda la configuración de los elementos de interacción con el usuario para la grabación de datos. Al comenzar una grabación el siguiente fragmento de código será ejecutado:
110
def obtenerValorGeneral(idEntry, tipoEstudio, btnGrabar, btnDetener):
if (idEntry.get() != '' and len(tipoEstudio.curselection()) != 0):
identificador = idEntry.get()+ '_' +
tipoEstudio.get(tipoEstudio.curselection())
btnDetener.configure(state=Tk.NORMAL)
btnGrabar.configure(state=Tk.DISABLED)
tipoEstudio.configure(state=Tk.DISABLED)
idEntry.configure(state=Tk.DISABLED)
em.changeStateConsolidadoPerformance() pb.changeStateConsolidadoPowerband() em.obtenerValorPerformance(identificador) pb.obtenerValorPowerband(identificador) else: ve.mensajeAlertaDatos()
Código 48 Grabación de datos Fuente: Propia
En el anterior fragmento de código se realizan las verificaciones para que los campos con los que se va a interactuar al realizar la grabación no estén vacíos o con datos nulos, además se ve la interacción con los botones para que en el tiempo que la grabación se esté llevando a cabo, no se puedan realizar más acciones, en caso de no cumplir con las verificaciones, el mensaje que se presenta en la Figura 35 aparecerá:
Figura 35 Alerta de datos incompletes Fuente: Propia
Capítulo 5 - Modelo de Desarrollo Propuesto
111
Dentro de los scripts emotionMetrics.py y bandPower.py existen las funciones que contienen un ciclo que está en constante ejecución como se menciona en el sprint anterior, dentro de estos ciclos se implementan las siguientes líneas de código adicionales, a continuación, se muestra el ejemplo para las bandas de poder:
if (consolidarPowerBand):
arregloTemp = [promedio_theta, promedio_alpha, promedio_low_beta,
promedio_high_beta, promedio_gamma]
arrayFinalPowerBand.append(arregloTemp)
if (guardarPowerBand):
dataFramePB = pd.DataFrame(arrayFinalPowerBand)
dataFramePB.to_csv(url+str(id)+'.csv',header=headerPerformance)
guardarPowerBand = False consolidarPowerBand = False arrayFinalPowerBand = []
Código 49 Consolidar datos capturados Fuente: Propia
En el fragmento de código anterior se evidencian dos condiciones, la primera se activa cuando el botón de grabación es presionado, en este punto, los datos empiezan a ser almacenados en un arreglo, al presionar el botón de guardado, se entra a la segunda condición en donde los datos previamente almacenados son puestos en un DataFrame para finalmente enviarlos a un archivo CSV que será guardado en el equipo; como último paso se reinician las variables y se vacía el arreglo con los datos. Al realizar la grabación satisfactoria de datos aparecerá un mensaje como lo presenta la Figura 36.
Figura 36 Notificación de grabación exitosa Fuente: Propia
112
Con esta última implementación el aplicativo EmotivPRE tiene en funcionamiento la visualización de emociones en barras de estado y en histograma, la visualización de bandas de poder en gráficas de barras separadas por el tipo de onda cerebral y la funcionalidad de guardar los datos anteriores en archivos CSV. En la Figura 37 se presenta la interfaz gráfica consolidada.
Figura 37 Interfaz final EmotivPRE Fuente: Propia
Pruebas de Usabilidad
6.1
Planteamiento
Para identificar la utilidad del prototipo de un ambiente inmersivo basado en realidad aumentada haciendo uso de dispositivos de control gestual e interfaces cerebro- computadora para la terapia fino-motora en niños, se llevó a cabo un estudio de usabilidad mediante el planteamiento de un caso de estudio. Para ello, se definieron dos criterios de análisis orientados a las actividades asociadas con la dominancia cerebral del participante y la interacción de cada uno de los participantes interactuando con el prototipo.
En cuanto a la selección de participantes, 20 fueron seleccionados para llevar a cabo las pruebas. Todos los participantes están entre los 6 y los 8 años de edad, estudiantes de tercer grado de primaria en el Colegio Francisco Antonio Zea de Usme ubicado en Bogotá, Colombia. Dada la naturaleza del estudio, se prestó atención al conocimiento que tenían acerca de figuras geométricas básicas entre las que se encuentran el círculo, el cuadrado y el triángulo, además de la distinción de las vocales en mayúscula.
Las pruebas de usabilidad se separaron en dos sesiones realizadas en días distintos, en la Figura 38 se evidencia el planteamiento de las pruebas de usabilidad, luego se realiza la descripción de lo realizado en cada una de las sesiones.
114
Figura 38 Planteamiento pruebas de usabilidad Fuente: Propia
Sesión 1
La primera sesión consta de dos partes, la primera es la aplicación de un test de dominancia cerebral, para nuestro caso se utilizó el test de Ned Herrmann, el cual se adaptó para mejorar la comprensión de los lectores siendo consecuentes con su edad.
Dicha adaptación se realizó en dos partes, primero con una profesional en educación se realizó el análisis de las preguntas originales para cambiarlas de tal forma que no cambiara el contenido de la pregunta pero que al leerla el participante fuera capaz de comprender sin necesidad de recurrir a léxico desconocido, y segundo en el momento de la realización del test, la profesora encargada del grupo de participantes leyó una a una las preguntas haciendo aclaraciones y dando ejemplo buscando así evitar ambigüedad.
Esta primera parte de la sesión 1 se realiza con todos los participantes al mismo tiempo, donde cada uno tiene su formato, el cual se puede ver en el Anexo A, y coloca sus respuestas sin que los otros puedan ver, estas preguntas se responden de 1 a 5 según el nivel de frecuencia con el que realiza la acción, siendo 1 nunca y 5 siempre, los participantes estaban autorizados a realizar preguntas en caso de ser necesarias.
En cuanto a la segunda parte se realiza la contextualización de las temáticas a trabajar durante la siguiente sesión, este proceso lo llevó a cabo la profesora encargada del grupo de participantes quien como primera temática abordó las figuras geométricas básicas, dibujándolas en el tablero y preguntando abiertamente quién sabe qué figura es la que ella señalaba en el tablero, luego de tener los nombres de cada figura geométrica, los participantes dijeron de forma coordinada y simultanea el nombre de cada figura, para
Capítulo 6 - Pruebas de Usabilidad
115
finalmente identificar objetos de la vida cotidiana en los que se vean representadas estas figuras geométricas.
Respecto a las vocales se realizó el mismo procedimiento enfatizando en la diferencia que existe entre vocales minúsculas y mayúsculas, luego de terminado este proceso se realizó la identificación de objetos de la vida cotidiana que comiencen por vocales para que el participante demostrara la capacidad de identificar la vocal inicial distinguiendo si era mayúscula o minúscula, de esta forma termina la primera sesión.
Sesión 2
Como se evidencia en la Figura 38, la segunda sesión hace uso de los dispositivos y software que ha sido usado y desarrollado en este proyecto de grado.
La segunda sesión consta de dos partes, las cuales se realizaron de forma individual y privada, es decir, donde ninguno de los participantes podía ver lo realizado por los otros, con el objetivo de tener una experiencia inicial igual para cada uno de los participantes. En la primera parte se realizó un ejercicio de terapia tradicional, que para este proyecto de grado fue el modelamiento con plastilina, en la ejecución de esta terapia el participante portaba la interfaz cerebro computadora, Emotiv Epoc+ para este caso, con el objetivo de capturar la actividad cerebral y emociones del participante, previo al modelamiento con plastilina se realizaba una pregunta con una imagen como la planteada en la Figura 39, en la que se evidencian los dos tipos de preguntas, una para vocales y otra para figuras geométricas, luego se realiza la terapia con el AR-Sandbox y el Emotiv Epoc+ en donde se planteaba una pregunta diferente a la hecha en la terapia tradicional pero con el mismo formato de la Figura 39.
Figura 39 Tipo de preguntas Fuente: Propia
116
La Figura 40, presenta uno de los niños realizando el ejercicio de terapia tradicional, donde al niño se le había presentado un dibujo de una pizza y él debía identificar la figura