UNIVERSIDAD DE LOS ANDES
FACULTAD DE INGENIERIA
Departamento de Ingeniería de Sistemas y Computación
Proyecto de Grado
Diseño e implementación de un módulo de visualización e
interacción WEB
Para obtener el título de Ingeniero de Sistemas y Computación
Autor:
Johann Felipe González Ávila
Asesor:
Marcela Hernández Hoyos PhD.
Profesora Asociada de la Universidad de Los Andes
Para mis padres y mi familia que siempre supieron alimentar mi entusiasmo y mi
A
GRADECIMIENTOS
Un agradecimiento especial para mi asesora Marcela Hernández por brindarme la
oportunidad de realizar un intercambio tan enriquecedor y a mi tutor en el laboratorio
CREATIS, Eduardo Dávila por todas sus enseñanzas y apoyo. A mis compañeros de viaje
R
ESUMEN
CREATOOLS es una plataforma de desarrollo creada en el laboratorio de investigación
CREATIS. Está basada en la librería BBTK (BlackBoxToolkit) diseñada también en dicho
laboratorio. BBTK permite la implementación rápida de prototipos de aplicaciones para
probar métodos de procesamiento de imágenes médicas. La creación y ejecución de este
tipo de aplicaciones se realiza localmente; es decir, son aplicaciones standalone. Esto
implica que el uso de cualquier script realizado en esta aplicación, requiere tener todo el
software instalado localmente. El objetivo de este trabajo es permitir la ejecución de estos
scripts a distancia con tecnología WEB, aprovechando todas las capacidades de BBTK del
lado de un servidor. El proceso propuesto se divide en dos partes. La primera consiste en
la modificación del núcleo de BBTK para integrar la tecnología web. La segunda es la
creación e implementación de plugins para el diseño de interfaces gráficas WEB. Para esto,
C
ONTENIDO
Agradecimientos ... 3
Resumen ... 4
1. Introducción ... 8
1.1 Contexto de desarrollo del proyecto ... 8
1.2 Objetivos y resultados alcanzados ... 9
1.3 Estructura del documento ... 9
2. Descripción General. ... 11
2.1 Antecedentes ... 11
2.2 Identificación del problema y su importancia ... 12
2.3 Objetivos ... 13
3. Especificaciones. ... 15
3.1 Descripción del sistema actual ... 15
3.2 Especificaciones ... 16
4. Implementación. ... 20
4.1 Investigación de tecnologías WEB-C++ ... 20
WT (C++) [6] ... 21
4.2 Investigación de tecnologías para visualización 2D y 3D en WEB. ... 22
XTK (JavaScript) [7] ... 22
4.4 Implementación del mecanismo de administración del servidor. ... 25
4.5 Implementación de cajas para los elementos de control WEB (nuevo paquete) 26 4.6 Implementación de cajas para la visualización 2D y 3D ... 27
4.7 Resumen de la implementación ... 28
5. Resultados y trabajo futuro ... 32
Trabajo futuro ... 32
Figura 1. Ejemplo de ejecución de la aplicación WEB "Desk" ... 12
Figura 2. Ejemplo de implementación y ejecución de un script en BBTK ... 13
Figura 3. Diagrama objetivo del proyecto. ... 14
Figura 4. Diagrama de componentes BBTK. ... 16
Figura 5. Diagrama de casos de uso del proyecto. ... 17
Figura 6. Proceso del proyecto ... 20
Figura 7. Ilustración de tecnologías de visualización existentes. ... 21
Figura 8 Cadena de integración de tecnologías. ... 23
Figura 9. Diagrama de clases BBTK modificado. ... 24
Figura 10 Diagrama de despliegue BBTK-CreaWEB ... 26
Figura 11 Diagrama de componentes incluyendo el paquete bbWt. ... 27
Figura 12 Estructura de paquetes en bbtk. ... 28
Figura 13 Diagrama de secuencia de creación del script. ... 30
Figura 14 Diagrama de secuencia de una petición al servidor. ... 31
Figura 15 Ejemplo de un script en BBTK. A la izquierda ejecutado de manera StandAlone, a la derecha con interfaz gráfica bbWt. ... 32
1. I
NTRODUCCIÓN
1.1
Contexto de desarrollo del proyecto
CREATIS (Centre de Recherche en Acquisition et Traitement de l’Image pour la Santé) es
un laboratorio de investigación que trabaja en el campo de imágenes médicas haciendo
desarrollo científico para la salud. Está dividido en varios grupos de investigación, cada uno
especializado en el desarrollo de temas particulares concernientes a imágenes médicas.
Sumado a esto, el laboratorio cuenta con un departamento administrativo y otro de
informática encargados de dar soporte a las diferentes actividades que el laboratorio realiza.
En términos generales, el proceso de desarrollo de un proyecto de investigación dentro del
laboratorio se divide en tres fases:
Adquisición de las imágenes en los centros hospitalarios asociados al laboratorio. Procesamiento de las imágenes por parte de los investigadores del laboratorio. Análisis de los resultados por parte de expertos médicos y especialistas en ciencia
médica.
Con el fin de apoyar este proceso de investigación, el departamento de informática creó la
plataforma de desarrollo CREATOOLS [1] que cuenta con varias aplicaciones y librerías
que permiten, entre otras cosas, el procesamiento y la visualización de imágenes.
CREATOOLS, en su interior, basa su ejecución en una librería C++, también desarrollada
en el laboratorio, llamada BlackBoxToolkit o BBTK [2].
BBTK es una librería C++ que permite la creación rápida y simple de prototipos de
programas que ayudan a probar métodos de procesamiento de imágenes médicas. Gracias
a un editor integrado en CREATOOLS (bbEditor), con BBTK se puede realizar el diseño e
implementación de los prototipos, que luego pueden ejecutarse de manera local, como
aplicaciones standalone. En general, estos scripts en su ejecución cumplen dos tareas
principales: el procesamiento de datos y la visualización e interacción con el usuario.
De esta manera, CREATOOLS ofrece una funcionalidad tanto para los desarrolladores que
aprovecha las ventajas de BBTK para diseñar y desarrollar programas, como para los
A pesar de las ventajas que presta BBTK, la ejecución de estos prototipos se debe realizar
de manera local en una máquina que cuente con todo el software de CREATOOLS
instalado. Como consecuencia de esto la portabilidad y el acceso al trabajo realizado con
BBTK son difíciles; les exige a los usuarios realizar la instalación del paquete y toda la
configuración que eso conlleva.
1.2
Objetivos y resultados alcanzados
Este proyecto busca modificar la funcionalidad de BBTK para permitir al usuario realizar la
ejecución de los scripts a distancia con tecnología WEB. Esta modificación trae varias
implicaciones. Primero que todo, realizar la implantación de un servidor donde se
administrarán los scripts. En está maquina se llevará acabo todo el procesamiento de las
imágenes. A través de internet, el servidor se comunicará con una maquina cliente por
medio de un navegador WEB, donde el usuario podrá visualizar e interactuar con el script.
De esta forma, el usuario no tendrá necesidad de instalar más que un navegador WEB para
poder consultar el trabajo. Así entonces, separamos en dos máquinas el proceso que
habitualmente sigue BBTK. En la máquina servidor se realiza todo el procesamiento de
datos, y en la máquina cliente la visualización e interacción. En segundo lugar, implica la
integración de nuevas tecnologías WEB en BBTK. Esto conlleva hacer modificaciones al
núcleo de BBTK para que pueda ejecutar librerías externas. En tercer y último lugar,
alimentar la librería BBTK con nuevos plugins permitiendo de esta manera el diseño de
interfaces WEB con visualización e interacción con imágenes 2D, 3D y 4D.
Como resultado de este proyecto, BBTK ofrece actualmente a los desarrolladores las
herramientas necesarias para la creación de interfaces gráficas WEB y la capacidad de
lanzar aplicaciones WEB que se conectan con el servidor para realizar el procesamiento de
datos de manera local. Existen aún problemas relacionados con la latencia en la
transferencia de datos y con la estabilidad del servidor.
1.3
Estructura del documento
El documento está divido en secciones que guiarán secuencialmente al lector a entender
los procesos de diseño e implementación seguidos en el transcurso del proyecto. Los
proyecto junto con modificaciones realizadas, por lo que, para poder entender fácilmente
2. D
ESCRIPCIÓN
G
ENERAL
2.1
Antecedentes
El equipo informático del laboratorio CREATIS busca facilitar el acceso al trabajo realizado
con la plataforma de desarrollo CREATOOLS. Esta plataforma se encuentra desarrollada
sobre la base de la librería C++ BlackBoxToolit o BBTK. Esta librería permite la creación de
programas basados en la definición de unidades elementales llamadas cajas negras. De
manera simplificada, una caja negra es una unidad que realiza una tarea específica. Para
ello puede tener información de entrada, obligatoria u opcional, y puede tener una o varias
salidas como resultados. Las cajas se pueden interconectar unas a otras (entradas y
salidas) para realizar tareas más complejas creando scripts. La ejecución de estos scripts
se realiza de manera local como aplicaciones standalone.
Este proyecto pretende modificar BBTK para agregar la capacidad de ejecutar los
programas a distancia con tecnología WEB en un esquema cliente-servidor (procesamiento
de imágenes en el servidor y visualización de imágenes en el cliente). Esta modificación se
propone en 3 pasos. El primero consiste en una etapa de investigación con el fin de
seleccionar tecnologías existentes que permitan cumplir con las exigencias del proyecto. El
segundo, consiste en modificar el kernel de BBTK para adjuntar estas nuevas tecnologías,
y en el tercero, se lleva a cabo la creación de un nuevo conjunto de cajas que permitan a
los desarrolladores crear interfaces gráficas con las nuevas tecnologías. A este conjunto de
modificaciones y nuevos elementos se le ha llamado CreaWEB. Es de destacar que este
proyecto hace parte de una línea de investigación que está prevista a largo plazo. El alcance
del trabajo propuesto se limita a la integración de tecnologías y al análisis de factibilidad.
Elementos como análisis de latencia en transferencia de datos, o análisis de desempeño
están previstos para proyectos posteriores.
Trabajos relacionados al despliegue WEB de este tipo de aplicaciones ya vienen siendo
considerados por el laboratorio CREATIS desde la aparición de la tecnología WebGL1.
Muestra de eso son los documentos científicos [3]y [4] publicados por el equipo informático,
en los cuales se discuten aspectos sobre la visualisación de objetos tridimensionales en
1 Más información de WebGL disponible en línea en https://www.khronos.org/webgl/, último acceso
ejecuciones remotas. Posterior a esto se llevó acabo un desarrollo con características
comúnes a las requeridas en este proyecto. El trabajo efectuado, de nombre “Desk” [5]
permite cargar imágenes 3D y 2D sobre un navegador WEB como se observa en la Figura
1.
Esta herramienta hace un uso efectivo de la tecnología WebGL a partir de la ejecución de
código JavaScript. Sin embargo, esto difiere enormemente de los requerimientos del
proyecto, dado que es una aplicación que permite agregar nuevos elementos de
visualización pero no permite crear el diseño completo de la página. Más aún, no existe una
parte de procesamiento de imágenes en tiempo real.
En este mismo sentido, es posible encontrar más tecnologías, algunas de las cuales se
explicarán después en este documento, que realizan ejercicios de visualización 2D y 3D en
WEB. Sin embargo, soluciones con propósitos similares son difíciles de adoptar dado que
este proyecto involucra la participación de BBTK.
2.2
Identificación del problema y su importancia
Como se ha mencionado en repetidas ocasiones, BBTK permite la creación de scripts de
manera rápida y simple para realizar pruebas de métodos de procesamiento de imágenes
médicas. Esto se consigue por medio de la interconexión de entradas y salidas de cajas
negras, unidad elemental de procesamiento.
La Figura 2 muestra un ejemplo de la manera cómo funciona BBTK. En la izquierda se
observa el editor gráfico bbEditor (herramienta integrada en CREATOOLS) que permite
arrastrar diversas cajas negras de la biblioteca al panel de diseño e interconectarlas.
Después de terminar el diseño y poner en marcha la ejecución, una interfaz gráfica se
despliega y permite observar imágenes, manipularlas y jugar con elementos de control que
modifican parámetros de la parte del procesamiento. Todo esto de manera local.
La ejecución de estos scripts necesita una máquina que tenga todo el software de
CREATOOLS instalado localmente. Esto genera dificultades para consultar los scripts pues
limita la difusión del trabajo realizado. Obliga a los usuarios a realizar un proceso de
instalación y configuración de una herramienta desarrollada por el laboratorio, que puede
conllevar a engorrosos procesos y dificultades. La exportación del trabajo es prácticamente
nula, pues si algún usuario quiere llevar el trabajo desarrollado a otra máquina necesita
volver a instalar toda la plataforma CREATOOLS. Esto se resume en 3 puntos:
Difícil difusión del trabajo.
Utilización de desarrollos limitado a la instalación del software. Configuración complicada de la máquina.
2.3
Objetivos
Para facilitar el uso del trabajo realizado en la herramienta CREATOOLS, se propone la
modificación de BBTK para que el usuario pueda hacer utilizar los scripts a distancia.
Concretamente el objetivo general es:
Modificar BBTK con tecnologías WEB para permitir la visualización e interacción de
imágenes en una máquina cliente por medio de un navegador WEB, y el
procesamiento de los datos en una máquina servidor.
La Figura 3 ilustra gráficamente el objetivo del proyecto. Actualmente (a la izquierda de la
figura), la parte de procesamiento de imágenes y visualización e interacción de las mismas,
se realiza localmente por BBTK. La inserción del nuevo módulo CreaWeb (a la derecha de
la figura) permite que la parte de procesamiento permanezca del lado del servidor. A través
de un servidor web, se realiza una comunicación con una máquina cliente en la cual se
despliega la visualización y se realiza toda la interacción con el usuario final.
Esto implica que cualquier usuario podrá tener acceso al trabajo realizado con
CREATOOLS contando únicamente con una conexión a internet y un navegador WEB2.
2 El navegador WEB por si solo podrá suplir varias de las especificaciones. Sin embargo, es
necesario que soporte WebGL para algunos servicios 3D, esto se especifica en capítulos posteriores.
3. E
SPECIFICACIONES
3.1
Descripción del sistema actual
BBTK es la librería donde se definen las cajas negras. Estas son unidades de
procesamiento que se interconectan entre ellas para desarrollar tareas complejas. Cada
caja tiene un propósito específico. Con el fin de enriquecer las capacidades de BBTK, la
librería se apoya en el uso de librerías dinámicas externas (.dll,.so,etc.). Estás permiten
cumplir tareas en áreas específicas del proceso de investigación, entre las cuales se
destacan:
Visualización Interacción
Procesamiento Lectura
Escritura Otros
La Figura 4 describe un diagrama de componentes de CREATOOLS. En este paquete se
encuentra BBTK, que es la librería objeto de este proyecto. Por otro lado está bbEditor, que
es el editor gráfico utilizado para hacer el diseño e implementación de los scripts. Adicional,
se encuentra bbi o bbInterpreter, que es el encargado de realizar la ejecución de los scripts
y por último creaDev, una herramienta para la organización de ficheros y proyectos. El
sistema hace uso3 de librerías dinámicas externas con diferentes propósitos. Las
modificaciones que se proponen serán basadas en este modelo respetando su estructura.
3 El sistema es más complejo en realidad pero acá se muestra simplificado para un fácil
3.2
Especificaciones
Antes de definir los requerimientos puntuales del proyecto, se recuerda la utilización de la
biblioteca BBTK posee 2 tipos de usuarios. En primer lugar están los usuarios finales,
quienes hacen uso de los scripts propiamente y los utilizan como herramienta para
desarrollar su investigación. En otras palabras, son los investigadores y expertos médicos.
Por otro lado, están los desarrolladores quienes realizan el diseño e implementación de los
scripts basados en las exigencias de los usuarios finales.
Con esto en mente se han definido los requerimientos funcionales de la solución. La Figura
5, presenta el diagrama UML de casos de uso del proyecto. En primer lugar encontramos
en la esquina superior derecha, al usuario final. Para el, es de interés poder consultar los
scrpits, ahora en web, y poder interactuar con ellos. Este usuario también requiere tener las
mismas funcionalidades que en una aplicación standalone, pero accediendo desde un
navegador WEB. Esto implícitamente requiere un manejo de la comunicación entre el
servidor y el cliente. En segundo lugar encontramos a los desarrolladores. Ellos necesitan
poder realizar interfaces WEB por lo que en principio necesitan poder crear elementos de
visualización WEB y elementos de interacción WEB. Para el desarrollador también es
importante poder interconectar estas nuevas cajas de elementos de interfaces WEB, con
las cajas ya existentes de procesamiento, de la misma manera que ocurre con los
elementos de interfaces gráficas de aplicaciones standalone. Y por último, un desarrollador
necesita poder desplegar y lanzar estas aplicaciones en internet, esto incluye
implícitamente el manejo de un servidor.
Con base al diagrama de casos de uso. Se definen los requerimientos funcionales del
sistema:
Nombre R1 – Acceder a un script por medio de un navegador de internet.
Resumen Acceder a un script que se ejecuta en el servidor desde un enlace por medio de un navegador web.
Stakeholder Usuario final. Entradas
Enlace Resultados
Se despliega la interfaz gráfica del script en el navegador web
Nombre R2 – Interactuar y manipular las imágenes desplegadas en un navegador.
Resumen
Interactuar con un script por medio de un navegador. Las interacciones comprenden la manipulación de elementos gráficos 2D y 3D, tales como: desplazamiento, acercamiento, rotaciones, entre otros.
Stakeholder Usuario final.
Entradas
Ordenes de control.
Resultados
La interfaz responde a los cambios en las imágenes de acuerdo a lo indicado por el usuario.
Nombre R3 – Manipulas los parámetros del procesamiento de imágenes por medio del navegador web.
Resumen
Interactuar con un script por medio de un navegador. Se entiende como la manipulación de parámetros del procesamiento de imágenes por medio de elementos de control, como botones, barras de desplazamiento, cajas de texto, etc. Estos cambios son comunicados del cliente al servidor, en éste se recalcula los resultados con base a los nuevos parámetros, y se envía respuesta del proceso de vuelta al navegador que despliega la información.
Stakeholder Usuario final.
Entradas
Ordenes de control.
Resultados
La interfaz web despliega los resultados del cambio de parámetros realizados por el usuario.
Nombre R4 – Crear elementos de visualización de imágenes en web.
Resumen
Agregar cajas a los script que permita desplegar imágenes 2D y 3D en web. Estas cajas deben poder interactuar con todas las cajas de procesamiento ya existentes. Las imágenes que se despliegan en web, son manipulables per medio de acciones como rotar, acercar, alejar, etc. Stakeholder Desarrollador.
Entradas
El desarrollador arrastra una caja de visualización de imágenes en web al panel de diseño.
Resultados
Las cajas de visualización se agregan al script y se interconectan con otras cajas.
Nombre R5 – Crear elementos de control en web.
Resumen
Agregar cajas a los script que permita desplegar elementos de control como botones, barras de desplazamiento, listas desplegables, entre otros, en web. Estas cajas que despliegan visualmente elementos en el navegador (lado del cliente), pueden controlar parámetros de control del procesamiento de las imágenes (lado del servidor).
Stakeholder Desarrollador. Entradas
El desarrollador arrastra una caja de elementos de control web al panel de diseño. Resultados
Las cajas de elementos de control se agregan al script y se interconectan con otras cajas.
Nombre R6 – Lanzar aplicaciones web.
Resumen
Después de realizarse el diseño de los scripts con interfaz gráfica web, se realiza el despliegue de las aplicaciones sobre el servidor. Esto hace que las aplicaciones estén corriendo sobre el servidor, y sean visibles en equipos remotos por medio de un navegador web.
Stakeholder Desarrollador. Entradas
Orden de comenzar el script. Resultados
4. I
MPLEMENTACIÓN
La implementación se realiza por fases. La Figura 6 ilustra las etapas claves del proceso.
Estas etapas se detallan a continuación.
4.1
Investigación de tecnologías WEB-C++
Una de las partes claves de las interfaces gráficas en web, es la creación de elementos de
control que permitan al usuario interactuar con el servidor para cambiar parámetros del
procesamiento de las imágenes. Con esto se replica las cajas de interfaz gráfica existentes
para aplicaciones standalone con elementos de control (botones, listas desplegables,
barras de desplazamiento, etc.). Se realiza una búsqueda de tecnologías WEB existentes
para este propósito. De ellas se les da prioridad a las escritas en C++ que es la base de
ejecución de BBTK.
La Figura 7 ilustra un resumen de las tecnologías disponibles en el mercado para la
visualización web. De abajo para arriba existe una clasificación de tecnología basada en el
nivel de programación empezando desde lenguaje Assembler hasta llegar a la parte
superior a lenguajes de alto nivel (como el mismo BBTK). El diagrama se parte a la izquierda
mostrando las tecnologías utilizadas para aplicaciones standalone y a derecha para
aplicaciones WEB, tanto en la parte del cliente como en la del servidor. Basado en esta
investigación, se estudian las ventajas y desventajas de cada tecnología teniendo en cuenta
las características del proyecto (requerimientos, tiempo disponible, etc.).
La Tabla 1 permite apreciar algunas de las características de las tecnologías que se
consideraron para la creación de los elementos de control.
Después de estudiarlas se decide utilizar la tecnología WT debido a las características que
ofrece. A continuación se describe la tecnología WT.
WT (C++) [6]
WT es una librería C++ para desarrollo de aplicaciones WEB. Es widget-centric
(interconexión de widgets, parecido a la filosofía BBTK) y ofrece una abstracción para el
desarrollador en muchos aspectos del manejo WEB. Sintetizando, entre las capacidades
que ofrece y son de interés para el proyecto tenemos:
Nombre Lenguaje Comentarios
Voxexelent Python-JavaScript Liviano, uso de WebGL
Paraview Web Python-JavaScript Complejo
Wt C++ Widget-centric, abstracción del manejo de servidor. Integrable a JavaScript
Figura 7. Ilustración de tecnologías de visualización existentes.
Ofrece abstracción en el manejo del servidor y en los protocolos de comunicación
(HTTP, AJAX, WebSockets)
Permite una fácil integración y utilización de JavaScript.
Provee una gran cantidad de widgets para la creación de interfaces gráficas WEB. Facilita la utilización de gráficos 2D (SVG, HTML5 Canvas, VML, PNG y PDF) y 3D
(lado del cliente WebGL lado del servidor OpenGL).
4.2
Investigación de tecnologías para visualización 2D y 3D en
WEB
La segunda parte clave para la realización de las interfaces gráficas WEB, es el despliegue
de imágenes en 2D y 3D que sean interactivas con el usuario. Utilizando la Figura 7, se
crea la Tabla 12 para comparar tecnologías existentes para este propósito.
Después de estudiarlas se decide utilizar la tecnología XTK debido a las características que
ofrece. A continuación se describe la tecnología XTK.
XTK (JavaScript) [7]
XTK es un conjunto de herramientas JavaScript liviano y de fácil aprendizaje para la
visualización WEB. Hace uso de WebGL y está enfocado en la utilización científica y
médica. Es modificable y dentro de las características atractivas para este proyecto se
encuentran:
Utiliza WebGL para la visualización WEB 2D y 3D. Es un script simplificado y fácil de aprender.
Nombre Lenguaje Comentarios
Voxexelent Python-JavaScript Liviano, uso de WebGL
XTK JavaScript Uso médico y científico, liviano, uso de WebGL, fácil.
Three.js JavaScript Liviano, uso de WebGL, fácil.
WebGL -- Muy bajo nivel. Complejo
Permite la lectura y carga de imágenes en diferentes formatos.
Permite realizar la visualización de volúmenes y corte de imágenes con el fin de
tener visualización 2D haciendo uso de sliders.
Después de seleccionar las tecnologías, se procede a la modificación de BBTK.
4.3
Modificación del kernel de BBTK
Una caja es una unidad de procesamiento elemental que cumple una tarea específica, que
puede tener entradas como información adicional para procesar, y puede tener salidas
como resultado a ese procesamiento. Además, BBTK hace uso de librerías externas para
cumplir tareas en diferentes áreas.
Las tecnologías que se escogieron Wt y XTK, están escritas en C++ y JavaScript
respectivamente. BBTK, desarrollado en C++, debe adecuarse para integrar el nuevo tipo
de cajas que se construirán. Wt comparte el lenguaje de programación de BBTK y tiene la
capacidad de correr código JavaScript (el lenguaje de XTK) en su ejecución; Por lo que se
decide realizar una integración en cadena permitiendo que XTK se ejecute sobre Wt, y que
Wt se ejecute sobre BBTK. La Figura 8 ilustra esta integración.
BBTK cuenta con más de 80 clases que definen los objetos que interactúan en la ejecución
de un script, entre las cuales están las de las cajas negras. La Figura 9 muestra un diagrama
de clases reducido4 de BBTK destacando solo los elementos de interés para este proyecto.
Se puede observar en el árbol de herencia, el tipo de cajas negras que se pueden construir.
En general, una caja negra puede ser de tipo AtomicBlackBox, o de tipo WidgetBlackBox.
Las AtomicBlackBox son cajas simples que se usan normalmente para procesamiento de
datos. La WidgetBlackBox está diseñada para dar la definición de cajas de interfaz gráfica.
Las cajas que heredan de esta clase, basan su ejecución en un tipo de ventana principal
que se pasa como template. Por ahora se tienen las cajas, WxBlackBox y QtBlackBox.
El proyecto implementa un nuevo tipo de caja para interfaces WtBlackBox que permite
utilizar los servicios que provee la librería Wt. Esta caja hereda de WidgetBlackBox basado
en el template Wt::WContainrWidget, que es la clase de la librería Wt que representa el tipo
de contenedor gráfico más general. Con esta implementación, BBTK es capaz de crear y
desplegar diferentes cajas negras que incorporen elementos gráficos de la librería Wt. Esta
librería cuenta con widgets para representar todos los elementos de control que
actualmente se tiene en BBTK para aplicaciones standalone. Además, como se mencionó
anteriormente, los elementos de Wt son capaces de ejecutar código JavaScript, lo que
permite incorporar la librería XTK para el despliegue de imágenes 2D y 3D.
4 El diagrama completo que ofrece el laboratorio se puede consultar en
http://www.creatis.insa-lyon.fr/software/public/creatools/bbtk/v0.9.6/doc/bbtk_Class_Diagram_HTML/. Último acceso el 23/09/2015,
La inclusión de esta nueva caja se realiza mediante la implementación de 4 nuevos ficheros
en el kernel. Esta nueva caja permite entre otras cosas, poner en ejecución un servidor de
ser necesario para desplegar los scripts, manejar la comunicación entre el cliente y el
servidor para que pueda sincronizar los procesos de tratamiento de información en el
servidor y el de visualización e interacción en el lado del cliente, y acceso a los elementos
Wt para la creación de cajas con elementos gráficos WEB.
4.4
Implementación del mecanismo de administración del
servidor
Como se explicó anteriormente, una de las características con las que Wt cuenta, es la
abstracción del sistema del servidor para los programadores. La librería realiza toda la
gestión del servidor al desplegar una aplicación.
Una aplicación se compone de un elemento Wt::WApplication. Sobre este objeto se
configuran los parámetros del servidor y a modo de árbol, se agregan los diferentes
elementos contenedores.
Ilustración 1 Esquema de despliegue Wt
Al realizar la integración de Wt sobre BBTK, esta librería después de configuraciones
básicas, realiza la gestión del servidor y la comunicación con las máquinas clientes. . La
Figura 10, muestra el diagrama de despliegue de BBTK después de la inclusión del nuevo
WApplication Configuración-Servidor Wt::WContainerWidget Layout Wt:WContainerWidget ElementoControl Wt:WContainerWidget ElementoControl Wt::WContainerWidget Layout Wt::WContainerWidget Layout Wt:WContainerWidget ElementoControl
tipo de caja WtBlackBox5. En el diagrama se observa por un lado el usuario que consulta
un navegador WEB para poder acceder a los scripts. Se destaca que este usuario no
precisa de otro Software instalado más que de un navegador WEB. A la izquierda se
encuentra al desarrollador, quien del lado del servidor realiza la creación de scripts. Tanto
la administración del servidor como la comunicación servidor-cliente son realizadas por la
librería Wt por lo que esto resulta transparente para el desarrollador.
Con las tecnologías integradas al núcleo de BBTK, se realiza la creación del nuevo paquete
de cajas negras.
4.5
Implementación de cajas para los elementos de control
WEB (nuevo paquete)
BBTK utiliza diferentes librerías externas para enriquecer los servicios que ofrece en
varias categorías como se muestra en la Figura 4. En realidad, BBTK utiliza librerías
completas de cajas especializadas en tareas específicas que, por un lado basan su
ejecución en una de las clases de la Figura 9, y por otro lado consumen los servicios de
las diferentes librerías. Siguiendo esta filosofía, se diseña e implementa un nuevo
5 El diagrama está simplificado para que sea fácil de entender. Muestra solo elementos importantes
para el proyecto y busca estar en concordancia con el diagrama de componentes de la Figura 4
paquete de cajas, que basa su ejecución en la clase bbtkWtBlackBox y utiliza los
servicios de la librería Wt, como se ilustra en la Figura 11.
Se tiene la definición de ciertos tipos de cajas especificados en el de la Figura 9. Con base
en estos tipos de cajas se construyen paquetes. Un paquete es la reunión de diferentes
cajas. Las cajas de un paquete comparten funciones similares y en ocasiones consumen
los servicios de alguna librería externa. El nuevo paquete bbWt contiene cajas que se
ejecutan sobre la base de bbtkWtBlackBox y utilizan la librería Wt.
En este nuevo paquete se construyen y duplican todos los elementos básicos de
visualización y control (sliders, checkBox, layouts, buttons, etc.) que existen actualmente
en BBTK con la librería wx en el paquete bbwx. Estos elementos se muestran en interfaces
gráficas WEB y se comunican con cajas de procesamiento. Posterior a la creación de los
elementos de control, se realiza la implementación de elementos que permitan el
despliegue de imágenes.
4.6
Implementación de cajas para la visualización 2D y 3D
XTK permite realizar el despliegue de imágenes 2D y 3D gracias a tecnología WebGL. El
objetivo en esta etapa de proyecto consiste en integrar la tecnología XTK a Wt. Esto se
realiza en 2 etapas.
Integrar XTK a Wt.
Integrar el módulo XTK-Wt a BBTK.
Los principales problemas se presentaron debido a características de sincronización que
utiliza XTK cuando se ejecuta directamente sobre HTML, y que cambia cuando es Wt quien
la ejecuta. Finalmente se construyeron elementos de visualización básicos para el
despliegue de imágenes.
La creación de las cajas Wt y Wt-XTK dan como producto un nuevo paquete funcional que
sigue la filosofía BBTK, como se muestra en la Figura 12
Figura 12 Estructura de paquetes en bbtk.
4.7
Resumen de la implementación
El nuevo paquete bbWt cuenta ahora con 17 nuevas cajas que permiten la realización de
interfaces gráficas WEB con funcionalidades de visualización e interacción. La Tabla 3
muestra la lista de elementos creados junto con las tecnologías utilizadas para su
La implementación del nuevo paquete cambió, entre otras cosas, la ejecución típica de un
script. En el modelo original, en el momento de creación el sistema ubicaba las cajas
marcadas como ejecutables y comenzaba la ejecución. De manera recursiva, una caja
observa sus entradas, se comunica con aquellas cajas que están conectadas a ella para
que inicien su ejecución. Posterior a eso corre su código principal.
Con las cajas del paquete bbWt el proceso varía. Cuando un Script cuenta con cajas del
paquete bbWt, al momento de ejecutarse, la caja principal bbWt ejecuta el servidor y queda
en espera de conexiones. Cuando un navegador web accede al servidor el proceso sigue
el descrito en la Figura 13.
El usuario accede por medio del navegador web a la página del servidor bbWt. Este
comienza la creación de cajas de manera iterativa de igual manera que lo hacia el modelo
original. Sin embargo, las cajas Wt realizan dos pasos extra. El primero consta en crear
todos los elementos WT de la caja. Después de esto, prosigue a crear los elementos XTK,
incluidos dentro de los elementos WT.
Los procesos de interacción también se ven afectados. Si el usuario realiza una
modificación a nivel netamente gráfico, por ejemplo rotar una imagen 3D en un eje o deslizar
un slicer sobre una superficie, esto lo maneja XTK directamente en el cliente, dado que
previamente el cliente debió recibir toda la información de la imagen previamente para
desplegarla.
En caso de que el usuario requiera realizar una modificación sobre el procesamiento de
imágenes, como por ejemplo cambiar parámetros de filtrados o segmentaciones, el proceso
sigue al descrito en la Figura 14.
Los elementos de control como botones, sliders o campos de texto son elementos WT. El
usuario entonces realiza una acción. Esto se transmite al servidor quien lo comunica a la
representación local del control WT manipulado. Nótese que no se comunica en primera
instancia con la caja, si no con el elemento Wt. Según sea el caso, le informa a la caja que
debe o no actualizar sus salidas. En este momento comienza un proceso iterativo, las cajas
notificadas, revisan sus elementos Wt que a su vez revisan los elementos XTK que deben
actualizarse y se notifica a la caja que revise sus salidas. Después que todos los elementos
son actualizados, los elementos de procesamiento se actualizan y generan un nuevo
resultado, éste es enviado al cliente para refrescar las imágenes que correspondan y el
usuario pueda visualizarlas.
5. R
ESULTADOS Y TRABAJO FUTURO
BBTK es capaz de generar Scripts con interfaces WEB, con elementos de control Wt y
elementos gráficos para la visualización 2D y 3D basados en XTK. También tiene la
capacidad de desplegar un servidor que provee los servicios de los Scripts y maneja la
comunicación cliente-servidor.
La Figura 15 permite apreciar un mismo Script en dos escenarios diferentes. A la izquierda,
la interfaz gráfica es realzada con elementos para la ejecución StandAlone, antes del
proyecto. A la derecha, el mismo módulo de procesamiento es construido con una interfaz
gráfica WEB con elementos creados por el proyecto CreaWEB.
Trabajo futuro
Es necesario alimentar el paquete con más cajas aprovechando la gran variedad de
servicios que ofrece WT y XTK. Por otro lado, el servidor necesita mejorar la estabilidad. La
latencia en la transferencia de datos resulta un punto de riesgo en cuanto se trabaja con
Figura 15 Ejemplo de un script en BBTK. A la izquierda ejecutado de manera StandAlone, a la derecha con interfaz gráfica bbWt.
imágenes de gran tamaño. Se propone buscar alternativas para disminuir el tiempo en la
transferencia de datos.
Como se explicó anteriormente, las funcionalidades de interfaz gráfica están duplicadas en
los paquetes con tecnología Wx (Aplicaciones StandAlone) y Wt (WEB). Con un módulo de
procesamiento, si se desea cambiar la forma de visualización es necesario re hacer todo el
script. Una posibilidad a futuro es la realización de super cajas que cuenten con ambas
descripciones y que sea configurable de manera rápida para la ejecución ya sea local o
6. C
ONCLUSIONES
BBTK es una herramienta poderosa y útil para el desarrollo ágil de programas para la
prueba de métodos de investigación en imágenes médicas. El proyecto, le ha dado la
facilidad de consultar el trabajo hecho sobre la herramienta en WEB. Para la realización del
proyecto, el núcleo de BBTK fue estudiado y modificado para la integración de tecnologías.
Se desarrolló un nuevo paquete que integra las tecnologías WT y XTK que permite la
realización de Scripts con interfaces gráficas. Con esto, BBTK tiene actualmente la
capacidad de lanzar aplicaciones WEB, que permiten interacción de imágenes y
7. B
IBLIOGRAFÍA
[1] Creatis, "CreaTools Home Page," [Online]. Available:
http://www.creatis.insa-lyon.fr/site/en/CreaTools_home. [Accessed Noviembre 2015].
[2] Creatis, "Tha Black Box Toolkit," [Online]. Available:
http://www.creatis.insa-lyon.fr/site/en/CreatoolsBBTK. [Accessed Noviembre 2015].
[3] J. Montagnat, E. Davila y I. E. Magnin, «"3D objects visualization for remote interactive
medical applications,» Padova, 2002.
[4] J. Montagnat, E. Davila y I. E. Magnin, «"Efficient visualization of 3D medical scenes
for remote interactive applications",» Roma, 2003.
[5] «DESK : A Web Interface for 3D Visualization and Interactive Segmentation of Medical
Images,» CREATIS. [En línea]. [Último acceso: 10 06 2015].
[6] EMWEN, «WT,» [En línea]. Available: http://www.webtoolkit.eu/wt. [Último acceso: 07
06 2015].
[7] «GitHub x/XTK,» [En línea]. Available: https://github.com/xtk/X. [Último acceso: 06 07
2015].
[8] «bbtk-Class Diagram Documentation,» CREATIS, [En línea]. Available:
http://www.creatis.insa-lyon.fr/software/public/creatools/bbtk/v0.9.6/doc/bbtk_Class_Diagram_HTML/. [Último
[9] E. DAVILA, «sliderplayer,» [En línea]. Available: http://slideplayer.fr/slide/505390/.
[Último acceso: 13 04 2015].