Multitouch - informatica.us.es · Introducción 1 1. Introducción Uno de los últimos avances en...

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

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


Estados) Sergio


Estados) Sergio


Estados) Sergio


Estados) Sergio

Multitouch

34

Fecha Hora de

comienzo Hora de




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


06/01/2009 8:10 14:10 2:00 4:00 Código Integración MtCore con Aplicaciones (rediseño


06/01/2009 19:20 20:00 0:00 0:40 Código Integración MtCore con Aplicaciones (rediseño


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



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



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




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



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




Multitouch

38

Fecha Hora de



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/04/2009 10:30 11:40 0:00 1:10 Código Desarrollo aplicación "Juego" (Investigación algoritmos) Juliet


01/04/2009 20:00 22:30 0:00 2:30 Diseño Interfaz Rediseñado 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



01/09/2009 20:45 23:50 0:10 2:55 Documentación Redacción Juliet




01/13/2009 20:00 23:00 0:00 3:00 Documentación Presentación Juliet





Multitouch - informatica.us.es · Introducción 1 1. Introducción Uno de los últimos avances en...

Documents

Transcript of Multitouch - informatica.us.es · Introducción 1 1. Introducción Uno de los últimos avances en...