Multitouch
TD 31
Sergio Escalada Beltrán
Javier Cantón Ferrero
Juliet R. Moreiro Bockhop
Asignatura
Procesamiento de
Imágenes Digitales
Curso 2008 / 2009
Escuela Técnica Superior
de Ingeniería Informática
Universidad de Sevilla
i
Índice
1. Introducción .................................................................................................... 1
2. Estado del Arte ................................................................................................ 2
3. Objetivos ......................................................................................................... 4
4. Diseño .............................................................................................................. 5
4.1. Diseño del Hardware .................................................................................................... 5
4.2. Diseño del Software .................................................................................................... 10
4.3. Diseño de la Interfaz ................................................................................................... 15
5. Desarrollo ...................................................................................................... 18
5.1. Desarrollo del Hardware............................................................................................. 18
5.2. Desarrollo del Software .............................................................................................. 20
5.3. Desarrollo de la Interfaz ............................................................................................. 21
6. Experimentación ............................................................................................ 22
7. Manual .......................................................................................................... 23
7.1. Requisitos ................................................................................................................... 23
7.2. Uso .............................................................................................................................. 23
8. Conclusiones .................................................................................................. 27
8.1. Resultados obtenidos ................................................................................................. 27
8.2. Costes ......................................................................................................................... 27
8.3. Propuestas de Mejora ................................................................................................ 29
9. Referencias .................................................................................................... 30
9.1. Bibliografía .................................................................................................................. 30
9.2. Webgrafía ................................................................................................................... 30
10. Anexos ........................................................................................................... 32
A. Herramientas y Utilidades .......................................................................................... 32
B. Plantillas de tiempo .................................................................................................... 38
ii
Índice de Figuras
Figura 1: Superficie Multitouch de Perceptive Pixel ................................................................................... 2
Figura 2: Surface de Microsoft .................................................................................................................... 3
Figura 3: ReacTable ..................................................................................................................................... 3
Figura 4: Frustrated Total Internal Reflection ............................................................................................. 6
Figura 5: Diffused Illumination .................................................................................................................... 7
Figura 6: Diseño inicial del sistema ........................................................................................................... 10
Figura 7: Escalado a grises en el procesado de imágenes ......................................................................... 12
Figura 8: Filtrado paso alta en el procesado de imágenes ........................................................................ 12
Figura 9: Suavizado en el procesado de imágenes .................................................................................... 13
Figura 10: Dilatación en el procesado de imágenes .................................................................................. 13
Figura 11: Binarización en el procesado de imágenes .............................................................................. 14
Figura 12: Tracking en el procesado de imágenes .................................................................................... 14
Figura 13: Diseño del menú principal ........................................................................................................ 16
Figura 14: Parrilla de leds y conexión del circuito ..................................................................................... 19
Figura 15: Interfaz del menú principal ...................................................................................................... 21
Figura 16: Logotipo de bienvenida ............................................................................................................ 24
Figura 17: Menú principal ......................................................................................................................... 24
Figura 18: Galería de imágenes ................................................................................................................ 25
Figura 19: Aplicación de dibujo, menú ...................................................................................................... 25
Figura 20: Aplicación bola del mundo, vista general y zoom sobre España .............................................. 26
Figura 21: Juego del tres en raya .............................................................................................................. 26
iii
Agradecimientos
Agradecemos a Manuel Caballero Sánchez sus consejos sobre electrónica, y a Jorge
Cantón Ferrero su ayuda en cuanto a tecnología multitouch.
Introducción
1
1. Introducción
Uno de los últimos avances en tecnología que más interés está despertando es la
tecnología multitouch. Esta técnica ofrece una nueva forma de interacción hombre-máquina
donde las aplicaciones gráficas son manejadas usando varios dedos. Esto abre la puerta a una
comunicación más intuitiva y más directa entre el usuario y la máquina. Para lograr esto, son
necesarios dos elementos: una superficie multitouch y una interfaz adaptada para el uso con
varios dedos.
En la actualidad hay varias técnicas para la detección de varios dedos sobre una
superficie y los movimientos que realicen como son los sensores térmicos, de presión, scanner,
detección de sombras, etc. Por lo general estas técnicas no están al alcance de todos, dado que
es una tecnología muy reciente y ciertos sistemas tienen un coste de momento muy elevado.
Con este proyecto buscamos desarrollar un dispositivo multitouch, de forma que
utilicemos la captura de imágenes de una superficie y su posterior procesamiento para
distinguir los gestos que manejen una interfaz gráfica. Para ello, es necesario investigar en
distintos campos como son el del procesamiento de imágenes, hardware y desarrollo de
aplicaciones e interfaces gráficas.
El proyecto, por tanto, comprende distintas partes. En cuanto al hardware, es necesaria
la construcción de una superficie sobre la que podamos obtener imágenes. Para el
procesamiento de dichas imágenes necesitaremos mecanismos para tratarlas y obtener la
información que buscamos. Las aplicaciones deben estar adaptadas para el uso mediante una
superficie multitouch, y el diseño de la interfaz gráfica debe estar hecho pensando en los gestos
que una persona realizaría de forma cómoda para el manejo de las aplicaciones.
Multitouch
2
2. Estado del Arte
En la actualidad existen varios proyectos que se están desarrollando en torno a la
tecnología multitouch. Asimismo, se están empezando a comercializar algunos de estos
dispositivos, aunque la mayoría de momento no son para uso personal. Seguidamente
mostramos algunos de los proyectos más interesantes y conocidos:
- Perceptive Pixel:
Se dedica a la investigación en dispositivos multitouch, produciendo una de las
superficies multitouch más novedosas de los últimos años. Esta superficie fue
presentada en febrero de 2006 en una conferencia TED, y en 2008 fue usada por
varios canales de televisión en Estados Unidos, entre ellos CNN, para el seguimiento
de las elecciones.
Figura 1: Superficie Multitouch de Perceptive Pixel
Estado del Arte
3
- Microsoft Surface:
Este dispositivo con forma de mesa fue lanzado en 2007. El dispositivo tiene
varias aplicaciones para uso multitouch, y la versión para desarrollo del dispositivo
incluye el SDK para que el usuario pueda desarrollar aplicaciones para uso
específico. Algunas empresas como AT&T están utilizando este dispositivo en sus
establecimientos como escaparate interactivo de sus productos.
- ReacTable:
Las superficies multitouch pueden tener usos muy diversos. Un ejemplo de ello
es este dispositivo multitouch con el que nace un nuevo instrumento musical.
Desarrollado por el Music Technology Group, de la Universitat Pompeu Fabra de
Barcelona, ya ha sido utilizado en varios conciertos de conocidos artistas.
Figura 2: Surface de Microsoft
Figura 3: ReacTable
Multitouch
4
3. Objetivos
Cuando se planteó el trabajo, se propuso como objetivo la construcción de un sistema
multitouch, comprendiendo su funcionamiento tanto a nivel hardware como software, y es que
este proyecto tiene componentes de ambos niveles.
La complejidad, por tanto, es notable. Así pues, lo primero de todo será estructurar las
tareas a realizar de forma adecuada, para poder acometerlas con la mayor precisión posible. Se
definen tareas como la investigación de metodologías a utilizar, el diseño a nivel hardware y
software, el diseño del código de la aplicación cliente, el montaje de la superficie multitouch,
etc.
El procesado de imágenes toma una relevancia vital. En el caso de las imágenes
obtenidas por la cámara del sistema multitouch, se combinarán transformaciones como filtros
de paso alta, suavizados, binarización, etc.
A continuación, un pequeño resumen del proyecto:
“Construcción de un sistema multitouch compuesto por una cámara, leds y elementos
de bajo coste para su construcción, consiguiendo un dispositivo capaz de trabajar de forma
fluida y continua. El posterior procesado de las imágenes obtenidas, de forma eficiente, y la
aplicación de tracking sobre sus puntos da lugar al desarrollo de múltiples aplicaciones
multitouch, adaptadas para poder ser manejadas con gestos y movimientos de varios dedos
sobre la superficie, de una forma natural e intuitiva.”
“We developed a multitouch system using a webcam, leds and other non-expensive
elements. The main structure has the shape of a box, and the webcam captures images from
the top of the box (which is the multitouch surface). We then process the images received from
the webcam in order to determine where each finger is on the surface at any moment. We also
developed several applications for the multitouch device which can be fully managed using the
input from the multitouch surface.”
Diseño
5
4. Diseño
4.1. Diseño del Hardware
Uno de los puntos fundamentales del proyecto es qué técnica utilizar para
detectar los dedos y gestos sobre una superficie. Hay distintas formas de resolver
esto, y a continuación presentamos las dos opciones consideradas y sus
características:
- Frustrated Total Internal Reflection (FTIR):
Cuando un rayo de luz incide sobre una superficie límite que separa a un
medio de otro con menor índice de refracción, y lo hace formando un ángulo
determinado se produce el fenómeno de la Reflexión Total Interna. Esto hace
que el rayo no atraviese la superficie límite, reflejándose a lo largo del medio
en el que se encontraba.
Cuando se añade un tercer medio dentro de una cierta distancia mínima
con respecto a la superficie, y éste tiene un índice de refracción mayor que el
del medio en el que la luz está siendo reflejada, se produce el efecto de
Reflexión Total Interna Frustrada. De esta forma, se desvían los rayos de luz
en los puntos de la superficie donde se encuentre el tercer medio.
Si iluminamos un panel acrílico, o una superficie similar, con leds
infrarrojos situados en los bordes o laterales del panel, podemos conseguir el
primer efecto, quedando la luz infrarroja reflejada dentro del panel. Si ahora
apoyamos un dedo sobre el panel, se produciría el segundo efecto y
podríamos capturar esta discontinuidad en la reflexión de la luz infrarroja
con una cámara infrarroja. De este modo, podríamos detectar la posición de
los dedos sobre la superficie.
Multitouch
6
Las ventajas de este método son que se consigue una iluminación
uniforme a lo largo de la superficie si se sitúan los leds correctamente, y se
pueden detectar los dedos con una precisión bastante alta. Además, al
trabajar con luz infrarroja (no visible), la precisión no depende de las
condiciones de iluminación exterior.
Las desventajas son sobre todo de dificultad de construcción, ya que
requiere una superficie con un grosor y características que no se pueden
encontrar habitualmente en tiendas no especializadas, y enmarcar esta
superficie con tiras de leds.
- Diffused Illumination (DI):
Si iluminamos el panel anterior con luz infrarroja, pero esta vez situando
los leds debajo de la superficie, también tendríamos una superficie iluminada
uniformemente. Si ahora situáramos un dedo sobre el panel, se reflejaría
más luz en este punto, de forma que la cámara infrarroja podría captar esta
imagen con el punto más claro que el fondo.
Figura 4: Frustrated Total Internal Reflection
Diseño
7
La construcción resulta menos compleja. Además, el material necesario
es más fácil de encontrar puesto que bastaría una lámina semitransparente.
Por el contrario, es más difícil conseguir una iluminación uniforme lo que
puede variar la precisión con respecto al FTIR.
Una variante sería la Diffused Surface Illumination, la cual utilizaría un
montaje similar al de la técnica FTIR, pero utilizando un material de acrílico
especial para el panel que reparte homogéneamente la luz a lo largo de la
superficie. El resultado sería igual que para la técnica DI, pero al tener una
iluminación totalmente uniforme los resultados serían más precisos. El
problema es que el acrílico especial es muy difícil de encontrar.
Otra variante distinta sería la iluminación por encima de la superficie con
luz natural. La cámara captaría la imagen con la superficie y la sombra que
produce la yema de los dedos sobre la misma. La construcción utilizando esta
técnica sería mucho más sencilla que con las anteriores, ya que se podría
simplemente usar una lámina de papel, no sería necesaria una cámara
infrarroja, ni tampoco leds infrarrojos. El problema es que el resultado
Figura 5: Diffused Illumination
Multitouch
8
dependería mucho de la iluminación exterior (nada uniforme), por lo que la
detección de los dedos sobre la superficie podría ser poco precisa.
Inicialmente pensamos en utilizar esta última técnica con luz natural, por la
facilidad y rapidez de montaje, pero la poca precisión de los resultados y la
dependencia de la luz exterior nos llevaron a cambiar de opinión y utilizar luz
infrarroja. Buscando distintos materiales en varios establecimientos llegamos a la
conclusión de que encontrar un material acrílico de las características necesarias
para aplicar la técnica de FTIR no era tarea fácil, por lo que finalmente decidimos
optar por la técnica de DI.
Una vez definida la técnica a utilizar, el siguiente paso es determinar el material
necesario y la estructura que iba a tener finalmente.
Tenemos que, en cuanto a hardware se refiere, íbamos a requerir una cámara
infrarroja y leds infrarrojos situados bajo la superficie multitouch (lámina
semitransparente) que iluminen hacia arriba. Necesitábamos algo para contener
este hardware y para situar la superficie de forma accesible. Determinamos que la
mejor opción sería la de una caja cuya cara superior tuviera la superficie multitouch,
y en el fondo situáramos el hardware.
Además del hardware, necesitaríamos otros elementos para conectar los leds,
etc. A continuación la lista inicial de material necesario:
- 1 webcam (Creative Live!)
- 12 leds (1.3 V y 50 mA)
- 1 interruptor
- 1.5 m de cable de cobre
- 1 pila de 9 V
- 2 planchas de cartón pluma negro
- 1 rollo de cinta aislante
- 1 lámina de acetato
- 1 caja de alfileres
- 1 rollo de cinta adhesiva de doble cara
- 1 lamina de negativo fotográfico
- 4 soportes de goma negra
Más tarde, al hacer pruebas una vez construida la caja, realizamos algunas
modificaciones al diseño inicial, adaptando la caja al nuevo diseño. Estas
modificaciones buscaban mejorar la iluminación de la superficie multitouch, y
conseguir una fuente de alimentación para los leds que no fuera una pila, tal y como
Diseño
9
se detalla en el capítulo de experimentación. Así, los materiales necesarios
finalmente serían:
- 1 webcam (Creative Live!)
- 20 led (1.3 V y 50 mA)
- 2 resistencias de 15 Ohm
- 1 interruptor
- 1.5 m de cable de cobre
- 1 conector hembra para el transformador
- 2 planchas de cartón pluma negro
- 1 rollo de cinta aislante
- 1 lámina de acetato
- 1 caja de alfileres
- 1 rollo de cinta adhesiva de doble cara
- 3 soportes Mecano
- 1 lamina de negativo fotográfico
- 4 soportes de goma negra
- 1 transformador de corriente continua a 12V
Para el montaje de la caja serían necesarias estas herramientas:
- soldador y estaño
- cinta adhesiva
- alicates
- pistola de cola caliente
- brocas
- destornillador de estrella
- cutter
- tijeras
- regla
- lápiz
Una vez teníamos la estructura y los materiales, ahora sólo faltaba determinar
qué medidas iba a tener la caja. Para ello, lo que hicimos fue determinar el tamaño
de la superficie multitouch, la cual determinaría las medidas de la caja, ya que
necesitaríamos colocar la webcam a una distancia a la cual el focal pudiese abarcar
completamente dicha superficie. Los cálculos de distancia fueron obtenidos de
forma empírica y el resultado fue que necesitábamos colocar la webcam a 38
Multitouch
10
centímetros de la superficie. Tras esto, modelamos la caja usando una herramienta
de diseño 3D llamada 3D Studio Max para determinar el resto de medidas de forma
más rápida y poder pre visualizar las proporciones de la caja antes de su fabricación.
Un boceto del diseño inicial:
En resumen, para construir el dispositivo multitouch teníamos que montar una
caja en cuya cara superior estaría una lámina de acetato que serviría de superficie
multitouch, y en cuyo fondo estarían unos leds infrarrojos y la cámara infrarroja. Los
leds iluminarían la lámina, y la cámara (conectada a un PC) captaría las imágenes
para procesarlas y obtener la información sobre la posición y movimiento de los
dedos sobre la lámina.
4.2. Diseño del Software
Otro de los aspectos fundamentales es la utilización de un software adecuado
para el tratamiento de las imágenes obtenidas por el sistema hardware. En principio,
requerimos de un procesado rápido y eficiente, ya que es necesario realizar el
tratamiento de las imágenes un gran número de veces por segundo. De este modo,
las aplicaciones basadas en el multitouch se ejecutarán de forma fluida.
Planteado el problema, y en búsqueda de una solución, se plantea la búsqueda
de la herramienta más adecuada. En Internet se pueden encontrar diversas
Figura 6: Diseño inicial del sistema
Diseño
11
herramientas y librerías pensadas para trabajar con este tipo de sistemas
multitouch. Las más destacadas y utilizadas por la comunidad son tbeta y Touchlib.
Después de un proceso de investigación en foros y blogs especializados, nos
decantamos por tbeta, atendiendo a razones como:
La eficiencia algorítmica ofrecida por tbeta es superior.
tbeta es multiplataforma, por lo que podríamos utilizarla en cualquier sistema
operativo.
Los desarrolladores de ambas plataformas son del mismo grupo de desarrollo, y
parece que tbeta tendrá una mayor continuidad en el futuro.
Cabe destacar que las plataformas orientadas a sistemas multitouch utilizan, con
el fin de exponer sus servicios a terceras aplicaciones, un protocolo de comunicación
creado expresamente para este fin, denominado TUIO. Con este protocolo, se
consigue establecer un canal de comunicaciones común a todas las posibles
implementaciones de este tipo. Por supuesto, hemos tenido que documentarnos
sobre este protocolo durante el proceso de desarrollo.
Concretamente, tbeta expondrá sus servicios a través de este protocolo,
utilizando tecnología de sockets, y usando el puerto predeterminado 3333. Así pues,
para consultarla, será necesario establecer un enlace con dicho socket.
El objetivo del procesado de las distintas imágenes, obtenidas por la webcam, no
es otro que conseguir identificar y situar, sobre el plano, los distintos dedos que se
posicionen sobre la superficie de la caja. Para ello, en principio se requiere la
aplicación de varios filtros y transformaciones sobre dicha imagen. Podríamos
pensar, a priori, que se trata de un proceso costoso a nivel computacional, sobre
todo teniendo en cuenta que el proceso ha de realizarse varias veces por segundo.
Sin embargo, esto no es así en la práctica, debido a que la resolución de las
imágenes es relativamente baja. En concreto, la webcam con la que trabajamos va a
funcionar en su modo de captura de 320x240 píxeles.
Dicho esto, veamos un procesado extraíble desde la funcionalidad ofrecida por
tbeta.
Multitouch
12
- Escalado a grises:
Figura 7: Escalado a grises en el procesado de imágenes
En primer lugar, si la cámara captura a color, hemos de realizar un escalado de la
misma a escalado de grises. ¿Por qué? Pues porque la información de color resulta
irrelevante para afrontar el problema que se nos plantea, y resulta más sencillo
trabajar con un menor volumen de complejidad en la imagen.
Para nuestra webcam que, recordemos, trabaja bajo frecuencias de luz
infrarroja, este punto no es necesario aplicarlo, ya que, directamente, la imagen
ofrecida viene dada en tonos de gris. Además, hay que realizar una inversión de la
imagen, quedando los tonos oscuros más claros, y viceversa.
- Filtrado de paso alta:
Figura 8: Filtrado paso alta en el procesado de imágenes
Lo siguiente es aplicar un filtrado de paso alta, con valor umbral configurable
dependiendo de la iluminación que rodee a la caja multitouch. De este modo,
Diseño
13
filtramos los tonos que no superen el valor umbral, de forma que se realza la mano
capturada en la imagen de la webcam.
- Suavizado:
Figura 9: Suavizado en el procesado de imágenes
Las imágenes capturadas tienen un pequeño inconveniente: el nivel de ruido es
bastante apreciable. Este ruido hay que aplicarlo, y para ello se utiliza un Blur, cuya
implementación utiliza transformaciones de filtro gaussiano. Resulta bastante
interesante a nivel computacional, ya que se trata de una transformación separable
y, por tanto, admite una pasada horizontal y otra vertical de forma separada.
- Dilatación:
Figura 10: Dilatación en el procesado de imágenes
De cara al seguimiento de los puntos (dedos) en el posterior algoritmo de
tracking, es recomendable realizar una dilatación con valor configurable. De esta
forma, se amplían elementos de la imagen interesantes, en este caso los dedos.
Multitouch
14
- Binarización:
Figura 11: Binarización en el procesado de imágenes
A fin de cuentas, la pregunta que nos interesa responder en última instancia no
es otra que: sobre un píxel determinado, ¿se encuentra posicionado un dedo o no?
Para ello, no vamos a requerir más información que una matriz de booleanos,
extrapolable a un proceso de binarización sobre la imagen. De esta forma, los píxeles
con un dedo encima permanecen en blanco, y el resto en negro.
Con esto, ya tenemos nuestros dedos definidos y posicionados sobre la imagen,
y podemos pasar al siguiente paso: el tracking sobre los puntos.
- Tracking:
Figura 12: Tracking en el procesado de imágenes
El tracking no es más que un sistema de seguimiento sobre los puntos, de forma
que sea capaz de determinar en cada instante la posición de dichos puntos.
Diseño
15
Prácticamente todos los sistemas multitouch utilizan variantes del algoritmo de
Lucas-Kanade, para realizar el tracking sobre la imagen.
Los pasos del algoritmo de Lucas-Kanade básicamente son los que se detallan a
continuación. Para una lectura más profunda acudir a la bibliografía, donde se
encuentra un enlace al artículo original.
Al final, con todo esto conseguimos una información valiosísima en cada
instante: dedos que aparecen, dedos que desaparecen, dedos que se mueven o
dedos que permanecen parados. Todo ello en, prácticamente, en tiempo real.
4.3. Diseño de la Interfaz
Al tratarse de un dispositivo multitouch, cuyas aplicaciones serán manejadas con
varios dedos, la interfaz debe estar completamente adaptada a esta situación. Esto
quiere decir que todos los elementos de las aplicaciones han de ser fácilmente
accesibles, y que ciertas características de navegación y movimiento dentro de las
aplicaciones, que no se dan en aplicaciones normales, tendrán que ser tenidas en
cuenta. Asimismo, queríamos una interfaz donde todas las opciones se pudieran ver
a primera vista, y que resultara fácil, cómoda y rápida de usar.
Dadas dos imágenes consecutivas en una secuencia, y dado un punto en la primera
imagen, el objetivo es hallar la posición en la imagen siguiente.
1. Obtener una representación piramidal(N niveles) de dos imágenes consecutivas de la secuencia. Sea N el nivel más borroso y sea 0 el nivel inicial (imagen original).
2. For nivel = N down to 0 step -1: a. Calcular el vector velocidad del punto por medio del Optical Flow con
método Lucas-Kanade. La velocidad de un punto nos dará la posición del punto en la imagen de la secuencia posterior.
b. Un punto del nivel i, se corresponde con un bloque de puntos del nivel i - 1. Si tenemos las velocidades de los puntos del nivel i (calculado en el punto anterior), tenemos la velocidad de un bloque en el nivel i-1. Repetir: nivel = nivel - 1 para conseguir la posición del punto con la resolución de la imagen original.
Multitouch
16
El primer elemento de la interfaz que teníamos que definir era el menú. Para el
menú, barajamos varias opciones: iconos dispuestos en forma de cuadrícula, menú
presente en el borde de la pantalla, etc. La idea final sería de un menú formado por
una tira de iconos, cada uno correspondiente a una de las aplicaciones, pudiendo
pasar de uno a otro moviendo hacia la izquierda o derecha. En el centro un
recuadro nos indicaría el icono seleccionado, pudiendo abrir la aplicación
correspondiente. Asimismo, teníamos que diseñar los iconos, intentando conseguir
que fueran indicativos de la aplicación que representan. Un boceto de la idea de
menú sería tal que así:
En cuanto a la aplicación de dibujo, los trazos aparecerían conforme movamos
los dedos, y para acceder a las opciones de color de trazo o borrar aparecería un
menú alrededor del dedo que mantengamos pulsado sobre la superficie.
Para la aplicación de galería fotográfica, queríamos usar la mayor superficie
posible para la fotografía que se estuviera tratando en cada momento. Para ello,
situamos la fotografía en el centro de la pantalla, pudiendo ampliarla, rotarla o
moverla en toda la superficie, y con dos pestañas en las esquinas inferiores que nos
permitan pasar a la fotografía anterior o siguiente.
Respecto a la aplicación de juego, debería permitir mover las fichas del juego con
los dedos y situarlas sobre el tablero.
El objetivo de la aplicación didáctica es mostrar una serie de pasos o de
imágenes y texto explicativos, a modo de slides. Por tanto, la mejor opción para
exponer estos pasos sería algo parecido a la idea del menú, donde veamos una slide
y con un movimiento podamos pasar a las siguientes.
Figura 13: Diseño del menú principal
Diseño
17
Para la bola del mundo lo mejor era mostrar la bola del mundo tal cual, de forma
que podamos movernos por la superficie como gustemos.
En conclusión, buscamos una interfaz que hiciera que el sistema fuera fácil de
utilizar, y que el manejo de dicho sistema fuera intuitivo.
Multitouch
18
5. Desarrollo
5.1. Desarrollo del Hardware
El primer paso para la construcción del dispositivo esta montar la estructura
exterior (la caja). Usando las medidas calculadas durante el diseño, cortamos el
cartón pluma y montamos las caras de la caja uniéndolas con alfileres y una cinta
para revestir las esquinas.
Centrada en la base de la caja colocamos la webcam, sobre unos soportes de
Mecano pegados con el adhesivo de doble cara. Esta webcam es una webcam
normal de las que se pueden comprar para uso doméstico, pero que trucamos para
convertirla en una cámara de luz infrarroja. EL fotoreceptor de una webcam normal
detecta tanto la luz infrarroja como la luz normal, pero todas llevan un filtro de luz
infrarroja en la lente para atenuar la luz infrarroja recibida. Para trucar la cámara,
tuvimos que romper dicha lente, lo cual hizo que la webcam captara todo tipo de
luz. Como resultado, todas las imágenes las captaba sobresaturadas, por lo que
necesitamos colocarle unos filtros de luz normal, pero que dejaran pasar la luz
infrarroja, justo al contrario de como son fabricadas. Para estos filtros usamos 2
láminas de negativo fotográfico, con lo que conseguimos el resultado que
deseábamos.
En la cara izquierda de la caja fue por donde sacamos todas las conexiones, esto
es, el cable de la webcam, el interruptor y el conector para el transformador. Tras
esto creamos la tapa superior de la caja, la cual tiene la pantalla de acetato. El
material de la pantalla es importante ya que este no debe reflejar hacia dentro la luz
infrarroja emitida por los leds, ya que cegaría a la webcam. Igualmente
necesitábamos que el interior de la caja fuera accesible, en caso de tener que
sustituir algún led u otro elemento, por lo de que montamos la tapa superior de la
caja de forma que se pudiera quitar.
Por último, sólo nos faltaba la iluminación infrarroja del interior de la caja. Para
esto hicimos varias pruebas, pero finalmente nos decantamos por una parrilla de 20
Desarrollo
19
leds infrarrojos conectados como muestra el esquema:
Figura 14: Parrilla de leds y conexión del circuito
La parrilla tiene un agujero en el centro para no molestar a la visión de la
webcam, y está colocada también sobre la base de la caja de forma que ilumina
completamente la pantalla de acetato de la tapa superior. Con cables, el soldador y
el estaño montamos el circuito mostrado.
Multitouch
20
Cuando se coloque un dedo sobre dicha pantalla, que deja que la luz infrarroja la
atraviese, el dedo será iluminado con la luz infrarroja y detectado por la webcam.
Resumidamente, montamos la caja con cartón pluma con una lámina de acetato
en la cara superior. Situamos una webcam trucada para captar luz infrarroja en el
centro de la base, rodeada por una parrilla de leds que iluminan la cara superior con
luz infrarroja, y que conectamos a un transformador, resistencias e interruptor.
5.2. Desarrollo del Software
A nivel de desarrollo de software, gracias a la utilización de la funcionalidad de
tbeta, se puede liberar cierta carga de trabajo. Ahora bien, hay que establecer la
comunicación con dicha plataforma, a través de un socket por el puerto 3333. De
esta parte se encarga la clase OscListener del código, y la clase MtCore ejecutará una
rutina sobre los datos recogidos por ella. Concretamente, el método
listener_OscPacketReceived de la clase MtCore recopila los datos, y el método
Async_Start de la clase OscListener se encarga de inicializar la escucha al puerto de
comunicaciones.
Otra clase importante es la clase Input, que nos va a permitir crear una capa de
abstracción entre los dispositivos de entrada utilizados (ratón, teclado o caja
multitouch) de cara a su utilización por terceras aplicaciones, como puedan ser las
aplicaciones de demostración. En su interior, mediante el método Update se revisa
la información obtenida por los dispositivos multitouch, y se procesa para el uso de
las aplicaciones multitouch mediante el método ProcessReceivedBlobs. Dicho
método, tendrá en cuenta qué dedos han aparecido nuevos, cuáles han
desaparecido y cuáles permanecen.
Se han modelado los dedos mediante la clase InputBlob, de forma que podrán
tomar dos estados: Pressed (si el dedo se encuentra sobre la superficie multitouch) o
Released (si el dedo se separó de la superficie multitouch).
Para aquellos que no dispongan de una mesa, caja u otro tipo de dispositivo
multitouch, se han incluído tanto ratón como teclado para poder probar las
aplicaciones de demostración. En el manual de uso se explica su funcionamiento.
Desarrollo
21
5.3. Desarrollo de la Interfaz
Para el desarrollo de los diseños de la interfaz utilizamos Adobe Photoshop, un
editor gráfico que nos permite diseñar los elementos de la interfaz al detalle.
Diseñamos todos los elementos de la interfaz con esta herramienta, para conseguir
el resultado que buscábamos, e intentar conseguir un estilo uniforme en cuanto a la
estética de la aplicación.
Los resultados pueden observarse tanto al ejecutar la aplicación, como en el
capítulo dedicado al manual del sistema, donde se pueden ver las distintas partes de
la interfaz.
Aquí podemos ver un fotomontaje de la interfaz del menú principal:
Figura 15: Interfaz del menú principal
Multitouch
22
6. Experimentación
Al realizar pruebas con el diseño inicial de caja, nos dimos cuenta de una serie de
cambios en el montaje de la caja que podíamos realizar para mejorar los resultados. A
continuación comentamos algunos de estos cambios.
Las primeras pruebas las hicimos usado una batería en lugar de un transformador, pero
el resultado fue que los leds iban perdiendo iluminación con el tiempo debido al consumo de la
pila. Por ello, finalmente decidimos utilizar un trasformador de corriente continua.
Además, notamos que la iluminación de la lámina de acetato era baja y poco uniforme,
quedando algunas partes de la superficie poco iluminadas, por lo que decidimos modificar la
cantidad y disposición de los leds dentro de la caja. Para conseguir una iluminación mejor,
aumentamos el número de leds en 8, quedando un total de 20 leds. Con el objetivo de
conseguir una iluminación más uniforme cambiamos la disposición de los leds (que inicialmente
estaban situados en 2 tiras en los bordes de fondo de la caja) para formar una parrilla de leds
distanciados unos de otros de una forma más uniforme, dejando un hueco central para la
webcam.
Manual
23
7. Manual
7.1. Requisitos
Para poder ejecutar las aplicaciones será necesario, a parte de una superficie
multitouch, tener lo siguiente:
- XNA 3.0
- .Net Framework 3.0
- tBeta
- Tarjeta gráfica compatible con Shader Model 2.0 y DirectX 9
En el anexo B se encuentran los enlaces de descarga.
7.2. Uso
Tanto las aplicaciones como la interfaz gráfica han sido diseñadas para poder
utilizarse de una forma natural y muy intuitiva. En cualquier caso, a continuación
mostramos los pasos a seguir para la utilización.
Todo el sistema y las aplicaciones pueden manejarse con una serie de gestos
básicos. Estos gestos son:
- Movimiento a derecha: - Movimiento a izquierda:
- Zoom in: - Zoom out:
- Rotar:
Multitouch
24
Al empezar lo primero que nos encontramos es el logotipo del proyecto:
A continuación nos aparece el menú principal, donde podemos ver los iconos
que corresponden a las aplicaciones. Para elegir entre un icono y otro, podemos
desplazar el menú a derecha o izquierda:
Figura 16: Logotipo de bienvenida
Figura 17: Menú principal
Manual
25
Si seleccionamos el primer icono, podemos acceder a la galería de imágenes.
Aquí podremos ver una serie de fotografías, hacer zoom, rotar y mover, y cambiar a
otra fotografía.
Accediendo al siguiente icono entramos en la aplicación de dibujo. En esta
aplicación podemos dibujar sobre la pantalla en distintos colores, y con cuantos
dedos queramos. Para acceder al menú, mantener el dedo durante un par de
segundos sobre la superficie, y elegir la opción deseada.
Figura 18: Galería de imágenes
Figura 19: Aplicación de dibujo, menú
Multitouch
26
El siguiente icono corresponde con la aplicación de la bola del mundo. Aquí
podemos movernos por el mundo rotando, ampliando y moviéndonos por las zonas
que queramos.
Con el icono de la mano podemos acceder al visor de slides. Esta es la aplicación
utilizada para realizar la presentación en clase, y muestra las slides que explican el
desarrollo del proyecto.
Seleccionando el icono del puzle, accedemos a la aplicación de juego. Se trata de
un tres-en-raya, donde cada jugador arrastra su pieza a la casilla que quiera. En la
parte superior se encuentra un marcador que indica la puntuación de cada jugador.
Para salir de cualquiera de las aplicaciones, presionar durante unos segundos en
la esquina superior izquierda.
Figura 20: Aplicación bola del mundo, vista general y zoom sobre España
Figura 21: Juego del tres en raya
Conclusiones
27
8. Conclusiones
8.1. Resultados obtenidos
Tras mucho esfuerzo, podemos estar contentos con el resultado obtenido. La
caja multitouch funciona aceptablemente bien, siempre y cuando se configure de
forma adecuada. La configuración va a depender en gran medida de la iluminación
de la sala donde se utilice el sistema, lo que en principio puede resultar un tanto
molesto. Sin embargo, utilizando mejores materiales en la construcción de la caja,
podría mejorarse este aspecto.
Además, la experiencia vivida en la construcción hardware y software, sin duda
nos será de provecho en el futuro, habiendo aprendido que los conceptos
aprendidos durante el transcurso de la asignatura se utilizan en el mundo real, y dan
buenos resultados.
8.2. Costes
En lo referido al coste temporal, a continuación se puede ver el tiempo utilizado
por cada uno de los integrantes del grupo, junto con el tiempo total:
Actividad Tiempo empleado
Sergio Escalada 70 h
Javier Cantón 90.70 h
Juliet R. Moreiro 101.67 h
TOTAL 262 h
En las plantillas de tiempo incluidas en el Anexo A se muestran con detalle el
tiempo empleado para cada tarea por cada miembro del equipo.
Multitouch
28
En cuanto al coste económico, al comienzo del proyecto realizamos la siguiente
estimación:
Elemento Unidades / Cantidad Coste
Webcam Creative Live! Pro
1 49.90 €
Led Infrarrojo Emisor 12 0.53 € /ud
Pila de 9 V 1 2,49 €
Adaptador para pila de 9V
1 0,20 €
Cable 1.5 m 0.20 €
Revestimiento 4 m 1 €
Cartón Pluma 2 planchas 6 € /ud
Interruptor 1 0,20 €
Lámina de Acetato 1 0.15 €
TOTAL = 76.74 €
El coste final del proyecto se ajustó bastante a la estimación inicial, aumentando
ligeramente para mejorar algunos aspectos del hardware:
Elemento Unidades / Cantidad Coste
Webcam Creative Live! Pro
1 49.90 €
Led Infrarrojo Emisor 20 0.53 € /ud
Resistencia 2 0.10 €
Cable 1.5 m 0.20 €
Revestimiento 4 m 1 €
Cartón Pluma 2 planchas 6 € /ud
Interruptor 1 0.20 €
Lámina de Acetato 1 0.15 €
Conector Transformador
1 0.20 €
Transformador Corriente Contínua
1 25 €
TOTAL = 99.45 €
Conclusiones
29
Nótese que en el coste económico se refiere al coste de los elementos de
hardware, excluyendo el coste del software y de las herramientas utilizadas para el
montaje del hardware (soldador, etc.). Respecto al software, decir que las
herramientas de desarrollo y aplicaciones utilizadas se pueden descargar de forma
gratuita (en el anexo B se encuentran los enlaces de descarga), excepto el editor
gráfico Adobe Photoshop, para la cual existen versiones de prueba y herramientas
gratuitas alternativas como Gimp.
8.3. Propuestas de Mejora
Un cambio que aumentaría la funcionalidad del proyecto sería la utilización de
un proyector que mostrara la imagen de pantalla directamente sobre la superficie
multitouch. Esto haría que la comunicación entre el usuario y la máquina fuera más
directa, pues podría interactuar directamente con la interfaz y de una forma más
precisa. Además, en ese caso ya no sería necesaria la utilización de un monitor. Para
realizar esta mejora sería necesario instalar el proyector dentro de la caja (con el uso
de espejos se podría reducir el tamaño de la caja necesario para poder proyectar la
imagen), y añadir una capa a la superficie multitouch. Esta capa puede ser de algún
material blanquecino, aunque los mejores resultados se conseguirían con el material
utilizado habitualmente para proyectar.
Otra posible mejora sería la utilización de materiales más robustos que el cartón
pluma y la lámina de acetato, para conseguir un dispositivo más resistente y eficaz.
Además, se podría ampliar para reconocer otro tipo de objetos, además de los
dedos, sobre la superficie. Esto aumentaría el abanico de posibilidades en cuanto a
tipos de aplicaciones y usos del dispositivo.
Multitouch
30
9. Referencias
9.1. Bibliografía
- XNA:
o Microsoft XNA Unleashed.
Autor: Chad Carter.
Editorial: Sams.
ISBN-13: 978-0672329647
9.2. Webgrafía
- Tecnología multitouch:
o Web del proyecto tBeta:
http://tbeta.nuigroup.com/
o Protocolo TUIO:
http://mtg.upf.edu/reactable/pdfs/GW2005-
KaltenBoverBencinaConstanza.pdf
o Frustrated Total Internal Reflection:
http://en.wikipedia.org/wiki/Total_internal_reflection
- Hardware:
o Técnicas Multitouch :
http://nuigroup.com/forums/viewthread/1982/
o Construcción MultiTouchMini:
http://ssandler.wordpress.com/mtmini/
- XNA:
o Tutoriales:
http://www.codeplex.com/XNACommunity
http://www.xnadevelopment.com/tutorials.shtml
Referencias
31
- Photoshop:
o Aplicación de efectos y filtros:
http://abduzeedo.com/tutorials
o Diseño de iconos:
http://www.grablogo.com/tutorials
o Efectos de iluminación:
http://www.smashingmagazine.com/2008/04/03/adobe-photoshop-
tutorials-rainbows-glows-and-light-effects/
- Proyectos/Productos Multitouch:
o Perceptive Pixel:
http://www.perceptivepixel.com/
o Perceptive Pixel / TED Talk Jeff Han:
http://www.ted.com/index.php/talks/jeff_han_demos_his_breakthrough
_touchscreen.html
o Perceptive Pixel / Collaboration Wall:
http://en.wikipedia.org/wiki/Multi-Touch_Collaboration_Wall
o Microsoft Surface:
http://www.microsoft.com/SURFACE/index.html
o ReacTable:
http://mtg.upf.es/reactable/
- Otros:
o Algoritmo de determinación de combinaciones ganadoras en el juego
TicTacToe:
http://www.computing.net/answers/programming/tictactoe-
algorithm/3126.html
o Artículo que explica el Algoritmo de Lucas-Kanade:
http://www.dxarts.washington.edu/~hugosg/www/classes/seguidorDeD
edo02.pdf
Multitouch
32
10. Anexos
A. Herramientas y Utilidades
Las herramientas utilizadas en el proyecto están disponibles en los siguientes
enlaces:
- XNA 3.0:
http://www.microsoft.com/downloads/details.aspx?familyid=7d70d6ed-1edd-
4852-9883-9a33c0ad8fee&displaylang=en
- .Net Framework 3.0:
http://www.microsoft.com/downloads/details.aspx?familyid=10cc340b-f857-
4a14-83f5-25634c3bf043&displaylang=en
- Visual Studio 2008 Express:
http://www.microsoft.com/eXPress/download/
- tbeta:
http://tbeta.nuigroup.com/
Anexos
33
B. Plantillas de tiempo
- Sergio Escalada Beltrán:
Fecha Hora de
comienzo Hora de
fin Interrupción Tiempo
Total Actividad Comentarios Autor
17/11/2008 10:30 13:30 0:30 2:30 Investigación Navegando por los foros de NUI Group en
busca de información Sergio
18/12/2008 18:00 20:00 0:10 1:50 Investigación ¿Qué hace Tbeta? Sergio
19/12/2008 3:00 4:15 0:00 1:15 Investigación Tbeta, Servicios UDP en C#, FLOSC y TUIO Sergio
22/12/2008 16:00 19:30 0:30 3:00 Código Codificación de UDP Listener y extracción de
información TUIO Sergio
23/12/2008 3:25 4:30 0:00 1:05 Código Codificación de UDP Listener y extracción de
información TUIO Sergio
25/12/2008 20:00 21:00 0:20 0:40 Diseño Software Sistema central de la aplicación (MtCore) Sergio
25/12/2008 21:00 1:00 0:15 3:45 Código Sistema central de la aplicación (MtCore) Sergio
26/12/2008 12:00 13:30 0:30 1:00 Código Sistema central de la aplicación (MtCore) Sergio
29/12/2008 0:30 3:30 0:20 2:40 Otros Problemas con mi portátil, montando equipo
alternativo Sergio
29/12/2008 12:00 13:30 0:30 1:00 Otros Problemas con mi portátil, montando equipo
alternativo Sergio
02/01/2009 16:00 17:00 0:10 0:50 Diseño Software Integración MtCore con Aplicaciones (máq.
Estados) Sergio
03/01/2009 13:00 15:20 0:40 1:40 Diseño Software Integración MtCore con Aplicaciones (máq.
Estados) Sergio
03/01/2009 18:10 19:00 0:20 0:30 Código Integración MtCore con Aplicaciones (máq.
Estados) Sergio
03/01/2009 22:00 23:00 0:00 1:00 Código Integración MtCore con Aplicaciones (máq.
Estados) Sergio
04/01/2009 1:25 2:00 0:10 0:25 Código Integración MtCore con Aplicaciones (máq.
Estados) Sergio
04/01/2009 9:00 17:00 3:00 5:00 Código Integración MtCore con Aplicaciones (máq.
Estados) Sergio
05/01/2009 0:15 3:00 0:25 2:20 Código Integración MtCore con Aplicaciones (máq.
Estados) Sergio
Multitouch
34
Fecha Hora de
comienzo Hora de
fin Interrupción Tiempo
Total Actividad Comentarios Autor
05/01/2009 7:40 14:30 1:25 5:25 Código Integración MtCore con Aplicaciones (máq.
Estados) Sergio
05/01/2009 20:45 1:30 1:00 3:45 Diseño Software Integración MtCore con Aplicaciones (rediseño
máq. Estados) Sergio
06/01/2009 7:30 8:10 0:00 0:40 Diseño Software Integración MtCore con Aplicaciones (rediseño
máq. Estados) Sergio
06/01/2009 8:10 14:10 2:00 4:00 Código Integración MtCore con Aplicaciones (rediseño
máq. Estados) Sergio
06/01/2009 19:20 20:00 0:00 0:40 Código Integración MtCore con Aplicaciones (rediseño
máq. Estados) Sergio
06/01/2009 22:00 4:00 1:30 4:30 Código Integración MtCore, comprobar funciona
MtCore + Input Sergio
07/01/2009 6:40 10:00 0:00 3:20 Código Finalizando Input. Codificando update aplic.
Fotos para usar touch Sergio
07/01/2009 10:00 10:15 0:00 0:15 Pruebas Probando que funciona PhotoAlbum (con
teclado + ratón) Sergio
07/01/2009 10:15 11:20 0:15 0:50 Código Codificando update Menú Principal para usar
touch Sergio
07/01/2009 16:30 17:30 0:25 0:35 Código Codificando update Menú Principal para usar
touch Sergio
07/01/2009 21:00 0:00 0:50 2:10 Código Codificando update Menú Principal, 3 en raya;
para usar touch Sergio
08/01/2009 0:00 1:30 0:25 2:10 Diseño Software Error de concepto. Mañana quedamos para
aclarar las cosas. Sergio
08/01/2009 18:30 20:10 1:00 0:40 Diseño Software Rediseñando el sistema para corregir el
defecto. Sergio
09/01/2009 11:00 18:00 2:00 5:00 Código Modificando el soft para corregirlo, adaptando
todas las aplicaciones Sergio
13/01/2009 15:30 18:30 0:45 2:15 Documentación Presentación: preparación Sergio
14/01/2009 19:00 21:00 0:00 2:00 Documentación Presentación: preparación Sergio
15/01/2009 20:30 22:30 0:15 1:45 Documentación Redactando Sergio
17/01/2009 19:00 21:00 0:00 2:00 Documentación Redactando Sergio
Anexos
35
- Javier Cantón Ferrero:
Fecha Hora de
comienzo Hora de
fin Interrupción Tiempo
Total Actividad Comentarios Autor
19/12/2008 13:00 18:45 1:00 4:45 Investigación Investigación de librerías Javier
20/12/2008 15:00 18:00 0:00 3:00 Montaje Hardware Investigación del montaje Javier
20/12/2008 18:20 21:00 0:20 2:20 Diseño Hardware Modelado en 3D studio del Hardware Javier
21/12/2008 18:00 22:00 0:10 3:50 Investigación Investigación Software/Código Javier
23/12/2008 12:00 14:30 0:15 2:15 Montaje Hardware Montaje de los dispositivos Javier
23/12/2008 15:00 20:00 0:15 4:45 Montaje Hardware Montaje de los dispositivos Javier
24/12/2008 17:30 20:15 0:30 2:15 Montaje Hardware Montaje de tapa superior Javier
26/12/2008 15:00 16:00 0:00 1:00 Otros Diseño de plantillas de tiempo Javier
26/12/2008 16:20 16:45 0:00 0:25 Otros Creando el repositorio SVN Javier
26/12/2008 22:38 23:32 0:00 0:54 Código Check device capability Javier
27/12/2008 20:00 21:10 0:00 1:10 Diseño Software Diseño de interfaz Javier
28/12/2008 17:00 18:32 0:15 1:17 Diseño Software Configurando Tbeta Javier
29/12/2008 15:17 17:15 0:00 1:58 Montaje Hardware Probando diferentes materiales para la pantalla Javier
29/12/2008 17:35 19:19 0:00 1:44 Montaje Hardware Cambiando la posición de los led infrarojos y fijado de pantalla Javier
30/12/2008 11:45 14:05 0:15 2:05 Montaje Hardware Terminando el filo superior de la caja Javier
30/12/2009 15:30 18:32 1:15 1:47 Montaje Hardware Montaje de estructura para la cámara Javier
30/12/2008 19:32 1:00 0:30 4:58 Diseño Software Sistema de pantallas y fading Javier
31/12/2008 12:05 14:00 0:00 1:55 Código Desarrollando Menu Javier
31/12/2008 15:00 16:27 0:00 1:27 Código Aplicación Photo Javier
01/01/2009 19:00 22:30 0:15 3:15 Código Aplicación Photo Javier
02/01/2009 8:00 14:30 0:15 6:15 Código Aplicación World Javier
02/01/2009 18:00 21:00 0:15 2:45 Código Aplication Tictactoe Javier
03/01/2009 13:00 15:00 0:00 2:00 Código Aplication Paint Javier
Multitouch
36
Fecha Hora de
comienzo Hora de
fin Interrupción Tiempo
Total Actividad Comentarios Autor
03/01/2009 16:30 17:30 0:00 1:00 Código Aplicación Paint Javier
03/01/2009 21:00 22:21 0:00 1:21 Código Menu del sistema Javier
04/01/2009 9:00 12:00 0:00 3:00 Código Menu del sistema Javier
04/01/2009 13:08 15:00 0:00 1:52 Código Clase input Javier
04/01/2009 20:00 22:30 0:00 2:30 Código Aplicación Paint Javier
05/01/2009 9:00 12:30 0:00 3:30 Código Aplicación Paint Javier
05/01/2009 13:00 14:21 0:00 1:21 Código Aplicación Paint Javier
08/01/2009 16:00 18:00 0:15 1:45 Código Aplicación Wizard Javier
08/01/2009 21:00 23:15 0:00 2:15 Pruebas Pruebas de la aplicación Javier
10/01/2009 12:00 14:00 0:10 1:50 Montaje Hardware Compra de material electrónico Javier
10/01/2009 18:00 20:00 0:15 1:45 Montaje Hardware Cálculo de resistencias y diseño del circuito eléctrico Javier
11/01/2009 17:20 22:30 0:25 4:45 Montaje Hardware Parrilla de led infrarrojos Javier
12/01/2009 9:20 10:15 0:00 0:55 Documentación Montaje hardware Javier
12/01/2009 10:55 14:00 0:00 3:05 Pruebas Hardware y software Javier
12/01/2009 18:30 20:30 0:00 2:00 Pruebas Hardware y software Javier
14/01/2009 18:30 20:00 0:00 1:30 Pruebas Hardware y software Javier
Anexos
37
- Juliet R. Moreiro Bockhop:
Fecha Hora de
comienzo Hora de fin Interrupción
Tiempo Total Actividad Comentarios Autor
12/17/2008 14:00 19:30 0:20 5:10 Investigación Investigación tBeta Juliet
12/18/2008 13:00 18:45 0:25 5:20 Investigación Investigación Hardware/Software/Código/tBeta Juliet
12/19/2008 11:00 14:30 0:20 3:10 Montaje Hardware Montaje de la estructura Juliet
12/20/2008 13:00 13:45 0:00 0:45 Otros Búsqueda de material Juliet
12/21/2008 18:00 22:00 0:10 3:50 Investigación Investigación Software/Código Juliet
12/22/2008 11:00 15:00 0:00 4:00 Investigación Investigación Software/Código Juliet
12/23/2008 11:00 12:00 0:00 1:00 Diseño Hardware Diseño del montaje de los dispositivos Juliet
12/23/2008 12:00 14:30 0:15 2:15 Montaje Hardware Montaje de los dispositivos Juliet
12/23/2008 15:00 20:00 0:15 4:45 Montaje Hardware Montaje de los dispositivos Juliet
12/28/2008 14:30 17:30 0:10 2:50 Investigación Aprendizaje utilización herramientas de diseño Juliet
12/28/2008 18:30 0:00 0:10 5:20 Diseño Interfaz Diseño inicial de la interfaz del sistema Juliet
12/29/2008 11:00 14:00 0:00 3:00 Diseño Interfaz Diseño de la interfaz del sistema Juliet
12/29/2008 15:30 19:30 0:20 3:40 Diseño Interfaz Diseño de la interfaz del sistema Juliet
12/30/2008 12:00 14:00 0:00 2:00 Diseño Interfaz Diseño de la interfaz del sistema Juliet
12/30/2008 15:00 17:30 0:00 2:30 Diseño Interfaz Diseño de la interfaz del sistema Juliet
Multitouch
38
Fecha Hora de
comienzo Hora de fin Interrupción
Tiempo Total Actividad Comentarios Autor
12/31/2008 11:30 12:30 0:05 0:55 Código Aprendizaje utilización herramienta XNA Juliet
12/31/2008 12:30 16:00 0:00 3:30 Código Desarrollo aplicación "Juego" Juliet
01/01/2009 10:00 12:45 0:00 2:45 Código Desarrollo aplicación "Juego" Juliet
01/01/2009 19:00 22:30 0:00 3:30 Código Desarrollo aplicación "Juego" Juliet
01/02/2009 9:30 14:30 0:20 4:40 Código Desarrollo aplicación "Juego" Juliet
01/02/2009 17:30 22:00 0:30 4:00 Código Desarrollo aplicación "Juego" Juliet
01/03/2009 13:30 15:00 0:10 1:20 Diseño Interfaz Diseño de la interfaz del sistema Juliet
01/03/2009 17:30 22:00 0:25 4:05 Diseño Interfaz Diseño de la interfaz del sistema Juliet
01/03/2009 23:30 2:30 0:00 3:00 Código Desarrollo aplicación "Juego" Juliet
01/04/2009 10:30 11:40 0:00 1:10 Código Desarrollo aplicación "Juego" (Investigación algoritmos) Juliet
01/04/2009 12:00 15:00 0:00 3:00 Código Desarrollo aplicación "Juego" Juliet
01/04/2009 20:00 22:30 0:00 2:30 Diseño Interfaz Rediseñado aplicación "Juego" Juliet
01/04/2009 1:15 3:10 0:00 1:55 Código Desarrollo aplicación "Juego" Juliet
01/05/2009 23:00 0:30 0:00 1:30 Código Desarrollo aplicación "Juego" Juliet
01/06/2009 16:00 18:20 0:00 2:20 Documentación Recopilación información Juliet
01/08/2009 12:00 14:20 0:00 2:20 Documentación Organización y redacción Juliet
01/08/2009 16:00 20:20 0:30 3:50 Documentación Maquetación y redacción Juliet
Anexos
39
Fecha Hora de
comienzo Hora de fin Interrupción
Tiempo Total Actividad Comentarios Autor
01/09/2009 20:45 23:50 0:10 2:55 Documentación Redacción Juliet
01/11/2009 20:00 22:00 0:00 2:00 Documentación Redacción Juliet
01/12/2009 19:00 23:30 0:00 4:30 Documentación Redacción Juliet
01/12/2009 10:30 12:10 0:00 1:40 Documentación Redacción Juliet
01/13/2009 20:00 23:00 0:00 3:00 Documentación Presentación Juliet
01/14/2009 10:30 14:00 0:00 3:30 Documentación Presentación Juliet
01/14/2009 15:00 19:00 0:00 4:00 Documentación Presentación Juliet
01/17/2009 11:00 14:00 0:00 3:00 Documentación Redacción Juliet
01/17/2009 16:25 22:00 0:00 5:35 Documentación Redacción Juliet