diff --git a/web/desarrollo.html b/web/desarrollo.html
index fb64db0766503083a573759af160e053e0e13997..73883762c6531fca02c077d0aee1f9bae0aa8865 100644
--- a/web/desarrollo.html
+++ b/web/desarrollo.html
@@ -99,21 +99,47 @@
También se hicieron algunas pruebas conceptuales en C/C++ utilizando la librerÃa OpenCV dado que es más cómodo migrar luego el código programado al lenguaje Java.</p>
<figure><img src="galeria/eclipse4Android.png" class="img-radius" alt=""></figure>
<p>A modo de versionar el trabajo realizado, desde el desarrollo de la actividad para Android, las pruebas de conceptos y el contenido y análisis de las mismas, se generó un <a href="https://gitlab.fing.edu.uy/aricca/chessTrack">repositorio</a> con soporte institucional.</p>
- <figure><img src="galeria/gitlab.png" class="img-radius" alt=""></figure>
+ <figure><img src="galeria/gitlab.png" class="img-radius" alt="" style="height: 440px"></figure>
</div>
<div class="span6 float2">
<br><br><br><br>
<h4>Pruebas desde matlab y desde C/C++</h4>
- <p><strong class="clr">A continuación se describen las pruebas desarrolladas en matlab.</strong><br>
- Sobre Matlab se armaron pruebas de concepto de las ideas que iban surgiendo para varios aspectos del procesamiento.</p>
+ <p><strong class="clr">A continuación se describen las pruebas desarrolladas en matlab y C/C++.</strong><br>
+ Sobre Matlab y código en C++ se armaron pruebas de concepto de las ideas que iban surgiendo para varios aspectos del procesamiento.</p>
<p>Para la detección del tablero se pensó en una detección de esquinas</p>
- <p>Detección de esquinas con la función <strong>corners</strong> desde matlab:</p>
+ <p>Detección de esquinas con la función <strong class="clr">corners</strong> desde matlab:</p>
<figure><img src="galeria/cornersM2.png" class="img-radius" alt="" style="width: 200px"> <img src="galeria/cornersM1.png" class="img-radius" alt="" style="width: 200px"></figure>
- <p>Detección de esquinas con la función <strong>corners</strong> desde C++ con OpenCV:</p>
+ <p>Detección de esquinas con la función <strong class="clr">corners</strong> desde C++ con OpenCV:</p>
<figure><img src="galeria/cornersC2.png" class="img-radius" alt="" style="width: 200px"> <img src="galeria/cornersC1.png" class="img-radius" alt="" style="width: 200px"></figure>
- <p>Nos decidimos por utilizar la función <strong>findChessboardCorners</strong> que se utiliza para calibrar con tableros de ajedrez y retorna cuando encuentra un tablero interno de determinado tamaño, en este caso 7x7:</p>
+ <p>Nos decidimos por utilizar la función <strong class="clr">findChessboardCorners</strong> que se utiliza para calibrar con tableros de ajedrez y retorna cuando encuentra un tablero interno de determinado tamaño, en este caso 7x7:</p>
<figure><img src="galeria/findChessBoardCorners.png" class="img-radius" alt=""></figure>
- </div>
+ </div>
+ <div class="span12 float">
+ <h4>Más Pruebas desde matlab y desde C/C++</h4>
+ <p>Para la detección de la mano se utilizó la estructura de OpenCV <a href="http://docs.opencv.org/trunk/doc/tutorials/video/background_subtraction/background_subtraction.html#background-subtraction">BackgroundSubtractorMOG</a> obteniendo luego la cantidad de pÃxeles que se diferencian del fondo, y seteando un umbral para determinar cuando hay una mano sobre el tablero y descartar esos frames, un ejemplo en C++ ejecutado sobre un video que realizamos:</p>
+ <p>A la izquierda se visualiza un video con la máscara, y a la derecha el video etiquetado con los estados: <strong class="clr">ESTABLE</strong> y <strong class="clr">MANO</strong> para diferenciar cuando descartar frames</p>
+
+ <embed width="450" height="300" src="https://www.youtube.com/v/uiF0cZDhafI" type="application/x-shockwave-flash">
+
+ <embed width="450" height="300" src="https://www.youtube.com/v/LCNMyQp4ANw" type="application/x-shockwave-flash">
+ <br>
+ <p>A continuación se muestran los tableros obtenidos en la transición de estado <strong class="clr">MANO</strong> a estado <strong class="clr">ESTABLE</strong>.</p>
+ <figure>
+ <img src="galeria/tablero0.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero1.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero2.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero3.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero4.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero5.png" class="img-radius" alt="" style="width: 180px">
+ <br><br>
+ <img src="galeria/tablero6.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero7.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero8.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero9.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero10.png" class="img-radius" alt="" style="width: 180px">
+ <img src="galeria/tablero11.png" class="img-radius" alt="" style="width: 180px">
+ </figure>
+ </div>
</div>
</div>
</div>
@@ -125,17 +151,18 @@
<div class="row">
<div class="span12">
<h4>Descripción general de módulos</h4>
- <p>bla bla bla ...</p>
+ <p>En esta sección se describen brevemente los módulos y sus actividades principales.</p>
<ul class="thumbnails indent-3">
<li class="span3">
<div class="thumbnail thumbnail_1">
<div class="caption">
- <h5>Modulo de</h5>
- <h3>Adquisición</h3>
- </div>
- <div class="thumbnail-pad">
- <p>En este módulo se emplean técnicas para el acondicionamiento de la imagen. Se tiene la clase Adquisición que dentro posee una lista de clases que implementan la interface XXXXX en la cual solo posee el método ZZZZZ, dicho método es llamado por el módulo de adquisición en cada clases que tiene dentro de la lista, la idea por detrás es que el frame adquirido pase por cada una de esta clases que implementan la interface XXXXX aplicando una técnica de acondicionado obteniendo al final una imagen para ser procesada por el resto de los módulos. </p>
- <a href="#" class="btn btn_">ver codigo</a>
+ <h5>Modulo</h5>
+ <h3>Activity</h3>
+ </div>
+ <div class="thumbnail-pad">
+ <p>Este módulo es la actividad Android que se encarga de recibir los eventos de la aplicación, en esta primera versión se cuenta con un menú con opciones de conexión y de calibración, mantiene una máquina de estados para modelar si se está en estado Calibrando o Jugando.</p>
+ <p>Cuando se selecciona del menú la conexión se ingresan los datos necesarios (a saber ip y puerto del servidor) y luego es el módulo Manager el encargado de mantener la misma.</p>
+ <p>Es en este módulo donde se reciben los frames de la cámara, y es el encargado de pasarlos al Manager a partir de que se selecciona la opción calibrar.</p>
</div>
</div>
</li>
@@ -146,8 +173,10 @@
<h3>Manager</h3>
</div>
<div class="thumbnail-pad">
- <p>El módulo se encarga de manejar los estados de la aplicación y conocer en cada momento si se debe analizar la partida o no a partir de la imagen obtenida. Tambien posee informacion del estado de la partida y es el encargado de enviar la partida al sistema externo.</p>
- <a href="#" class="btn btn_">ver codigo</a>
+ <p>Este módulo se encarga de manejar los estados de la aplicación. Comienza a tomar partido desde el evento calibrar, y es quien se comunica con el resto de los módulos que procesan los frames y también con el módulo que se comunica con el servidor para enviar las partidas.</p>
+ <p>Luego de la calibración válida este módulo se encuentra en el estado Armando Tablero, y cuando le notifican que está pronto el tablero para iniciar la partida, se pasa a estado Jugando.</p>
+ <p>Mantiene una bandera para saber si se debe enviar información al servidor, o no se ha seleccionado salida alguna.</p>
+ <br>
</div>
</div>
</li>
@@ -155,23 +184,25 @@
<div class="thumbnail thumbnail_1">
<div class="caption">
<h5>Modulo de</h5>
- <h3>Calibración</h3>
+ <h3>Adquisición</h3>
</div>
<div class="thumbnail-pad">
- <p>Este módulo es el encargado de calibrar el sistema antes de empezar la partida, busca el tablero y genera información para el resto del sistema.</p>
- <a href="#" class="btn btn_">ver codigo</a>
+ <p>En este módulo se emplean técnicas para el acondicionamiento de la imagen. Se cuenta con la clase Adquisición que dentro posee una lista de clases que implementan la interface ImgProcInterface. Dicha interfaz solo posee el método procesarImagen, que es llamado por el módulo Adquisición para cada una de las clases que se agregaron a la lista.</p>
+ <p>La idea detrás de este módulo es que el frame adquirido pase por una serie de acondicionamientos, cada uno siendo una clase que implementa la interface ImgProcInterface y agregándose a la lista en Adquisición. Se ejecutarán en el orden en que son agregadas.</p>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail thumbnail_1">
<div class="caption">
- <h5>Modulo</h5>
- <h3>Modelador</h3>
- </div>
- <div class="thumbnail-pad">
- <p>Este módulo es el encargado de a partir de una imagen obtener información de cada escaque y reconocer si existe una ficha o no en el mismo.</p>
- <a href="#" class="btn btn_">ver codigo</a>
+ <h5>Modulo de</h5>
+ <h3>Calibración</h3>
+ </div>
+ <div class="thumbnail-pad">
+ <p>Este módulo es el encargado de calibrar el sistema antes de empezar la partida. Se encarga de localizar el tablero, obteniendo las esquinas internas y calculando la arista promedio del tablero interno.</p>
+ <p>Para la localización de las esquinas se utiliza como ya se mencionó la función de OpenCV findChessboardCorners.</p>
+ <p>Para que los usuarios sepan si pueden comenzar a armar el tablero se emite un beep, en caso de que no se hayan encontrado las esquinas se emiten dos beep y se deberá ajustar el dispositivo para lograr que la cámara visualice la totalidad del tablero.</p>
+ <br><br>
</div>
</div>
</li>
@@ -184,8 +215,10 @@
<h3>Oclusión</h3>
</div>
<div class="thumbnail-pad">
- <p>Se encarga de detectar si en la imagen obtenida se encuentra estable para ser procesado o si por el contrario un jugador está realizando un movimiento, por lo cual no debe de procesarse el tablero.</p>
- <a href="#" class="btn btn_">ver codigo</a>
+ <p>Se encarga de detectar si la imagen obtenida se encuentra estable para ser procesada o si por el contrario un jugador está realizando un movimiento, por lo cual no debe procesarse el tablero.</p>
+ <p>Para la detección de la oclusión, es decir, que hay una mano realizando una movida, se utiliza la estructura BackgroundSubtractorMOG.</p>
+ <p>Internamente este módulo mantiene estados. Oclusión: es cuando hay un jugador realizando una jugada; Transición: al cual se pasa inmediatamente se ha dejado de visualizar la mano; Enviar Tablero: donde se valida que es un tablero limpio para detectar fichas.
+ La existencia del estado Transición se realiza para asegurar un tablero completamente libre de sombras.</p>
</div>
</div>
</li>
@@ -193,11 +226,13 @@
<div class="thumbnail thumbnail_1">
<div class="caption">
<h5>Modulo</h5>
- <h3>Lógica</h3>
+ <h3>Modelador</h3>
</div>
<div class="thumbnail-pad">
- <p>Este módulo contiene la lógica de las reglas de Ajedrez y se encarga de procesar las matrices de Modelador para saber qué fichas se movieron y a donde y generar algún tipo salida para que sea procesada por el modulo Comunicacion. Actualmente se encarga de validar los tableros para saber cuando se hizo un movimiento de piezas.</p>
- <a href="#" class="btn btn_">ver codigo</a>
+ <p>Este módulo es el encargado de a partir de una imagen obtener información de cada escaque reconociendo si existe una ficha o no en el mismo.</p>
+ <p>Para la detección de piezas se utiliza una detección utilizando sobel sobre la región céntrica del escaque, y se aplica un umbral para determinar la existencia de una pieza.</p>
+ <p>La detección de piezas es empleada durante el armado, para saber si se ha llegado a la configuración inicial del tablero, y también se utiliza para detectar las piezas en un tablero válido (sin oclusión).</p>
+ <br><br><br><br>
</div>
</div>
</li>
@@ -205,11 +240,10 @@
<div class="thumbnail thumbnail_1">
<div class="caption">
<h5>Modulo</h5>
- <h3>Comunicación</h3>
+ <h3>Lógica</h3>
</div>
<div class="thumbnail-pad">
- <p>En este módulo deberÃa de estar implementado todas las posibles salidas que se quiere obtener de la partida, quizás a partir de una interfaz que recibe el movimiento y se implementa un tipo de salida (persistencia en archivo, enviar a un servidor, texto a voz,etc). Por temas de tiempo en este módulo sólo se implementó una clase que se encarga de enviar la matriz de las fichas a un servidor conocido.</p>
- <a href="#" class="btn btn_">ver codigo</a>
+ <p>Este módulo contiene la lógica de las reglas de Ajedrez y se encarga de procesar las matrices de Modelador para saber qué fichas se movieron y a donde y generar algún tipo salida para que sea procesada por el modulo Comunicacion. Actualmente se encarga de validar los tableros para saber cuando se hizo un movimiento de piezas.</p>
</div>
</div>
</li>
@@ -217,11 +251,10 @@
<div class="thumbnail thumbnail_1">
<div class="caption">
<h5>Modulo</h5>
- <h3>Activity</h3>
+ <h3>Comunicación</h3>
</div>
<div class="thumbnail-pad">
- <p>Este módulo es la actividad Android que se encarga de hacer la presentación, pooling de la cámara y pasársela al módulo Manager, también posee una máquina de estados para modelar si se está Calibrando o Jugando.</p>
- <a href="#" class="btn btn_">ver codigo</a>
+ <p>En este módulo deberÃa de estar implementado todas las posibles salidas que se quiere obtener de la partida, quizás a partir de una interfaz que recibe el movimiento y se implementa un tipo de salida (persistencia en archivo, enviar a un servidor, texto a voz,etc). Por temas de tiempo en este módulo sólo se implementó una clase que se encarga de enviar la matriz de las fichas a un servidor conocido.</p>
</div>
</div>
</li>
diff --git a/web/galeria/tablero0.png b/web/galeria/tablero0.png
new file mode 100644
index 0000000000000000000000000000000000000000..c1453baffbfbd1f91fec8bfbad4655d16d77ee95
Binary files /dev/null and b/web/galeria/tablero0.png differ
diff --git a/web/galeria/tablero1.png b/web/galeria/tablero1.png
new file mode 100644
index 0000000000000000000000000000000000000000..51b19307f820e4c5b8b6928cc900954c6c8a242f
Binary files /dev/null and b/web/galeria/tablero1.png differ
diff --git a/web/galeria/tablero10.png b/web/galeria/tablero10.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0adbb6f1f5e85e12575b2944754140cc052c9dd
Binary files /dev/null and b/web/galeria/tablero10.png differ
diff --git a/web/galeria/tablero11.png b/web/galeria/tablero11.png
new file mode 100644
index 0000000000000000000000000000000000000000..84b836f3359254456217f9c741dac4ce1471e89f
Binary files /dev/null and b/web/galeria/tablero11.png differ
diff --git a/web/galeria/tablero2.png b/web/galeria/tablero2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f228c26f39d33c7681a15c6efe0c1c9ccddfd27
Binary files /dev/null and b/web/galeria/tablero2.png differ
diff --git a/web/galeria/tablero3.png b/web/galeria/tablero3.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5255873732d2e1b65422cf51c9c04a8d228b1eb
Binary files /dev/null and b/web/galeria/tablero3.png differ
diff --git a/web/galeria/tablero4.png b/web/galeria/tablero4.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b4f30c02a074785342d0f287fedf1dbe648456e
Binary files /dev/null and b/web/galeria/tablero4.png differ
diff --git a/web/galeria/tablero5.png b/web/galeria/tablero5.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0730ed5b679edb84f8162f1be40788044c88cd8
Binary files /dev/null and b/web/galeria/tablero5.png differ
diff --git a/web/galeria/tablero6.png b/web/galeria/tablero6.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba003a16a767bb235e3a0075377185a733ec7ab5
Binary files /dev/null and b/web/galeria/tablero6.png differ
diff --git a/web/galeria/tablero7.png b/web/galeria/tablero7.png
new file mode 100644
index 0000000000000000000000000000000000000000..335162bf368d78ae6b2e4c91912cf2fb915ea188
Binary files /dev/null and b/web/galeria/tablero7.png differ
diff --git a/web/galeria/tablero8.png b/web/galeria/tablero8.png
new file mode 100644
index 0000000000000000000000000000000000000000..5521ff35d23f044adcfd5dca78e5db39ae707d31
Binary files /dev/null and b/web/galeria/tablero8.png differ
diff --git a/web/galeria/tablero9.png b/web/galeria/tablero9.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c7f4ee398d45ac259c5c66e1d9a5732adeb7ded
Binary files /dev/null and b/web/galeria/tablero9.png differ