From 701af3d5950eb4bc36df2043da10009ae65a6ef1 Mon Sep 17 00:00:00 2001
From: Aylen Ricca <aricca@fing.edu.uy>
Date: Mon, 28 Jul 2014 03:27:50 -0300
Subject: [PATCH] video gallery ready
---
web/desarrollo.html | 66 ++++++++++++++++++++++++++++++++-------------
web/videos.html | 53 +++++++++++++++++++++++-------------
2 files changed, 81 insertions(+), 38 deletions(-)
diff --git a/web/desarrollo.html b/web/desarrollo.html
index 7388376..49b1600 100644
--- a/web/desarrollo.html
+++ b/web/desarrollo.html
@@ -114,6 +114,15 @@
<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>
+ </div>
+
+ <!--==============================section=================================-->
+
+ <div class="sub-content">
+ <div class="container">
+ <div class="row">
<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>
@@ -122,7 +131,7 @@
<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>
+ <br><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">
@@ -218,7 +227,8 @@
<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>
+ La existencia del estado Transición se realiza para asegurar un tablero completamente libre de sombras.</p>
+ <br>
</div>
</div>
</li>
@@ -232,7 +242,7 @@
<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>
+ <p>La salida de la detección de piezas es una matriz binaria de tamaño 8x8 con 1 donde hay fichas y 0 sino</p>
</div>
</div>
</li>
@@ -243,7 +253,10 @@
<h3>Lógica</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>
+ <p>Este módulo contiene la lógica de las reglas de Ajedrez y se encarga de procesar las matrices que Modelador retorna para saber qué fichas se movieron y a dónde.</p>
+ <p>En esta primera versión únicamente valida el tablero actual contra el anterior para saber si se ha producido un cambio. También valida al comienzo, luego del calibrado si el tablero está en la configuración inicial.</p>
+ <p>La idea de la primer validación mencionada es para saber cuándo enviarle al servidor un tablero con cambios.</p>
+ <br><br><br><br><br><br><br>
</div>
</div>
</li>
@@ -254,7 +267,9 @@
<h3>Comunicación</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>
+ <p>En este módulo se deberÃa implementar todas las posibles salidas que se desee 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).</p>
+ <p>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 configurable.</p>
+ <br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</li>
@@ -271,25 +286,38 @@
<div class="row">
<div class="span12">
<h4>Técnicas empleadas</h4>
- <p><strong class="clr">A continuación se describen las tecnicas empleadas.</strong><br>
- Primeramente se emplea, para la calibración, una detección de esquinas usando el metodo XXXchescorners. De esta manera se obtienen las esquinas interiores del tablero de ajedrez. Con las esquinas detectadas se calcula una homografÃa para enderezar el tablero, recortarlo para solo tener el tablero en la imagen para procesar y colocarlo en una posición conocida. Con este proceso también se obtiene el tamaño de los escaques y de todo el tablero.</p>
- <p>Luego de acondicionar la imagen se utiliza un proceso de supresión de fondo para detectar cuando se esta haciendo el movimiento de las fichas, para esto se utiliza los métodos DDDDDDD de la librerÃa OpenCV.</p>
- <p>Para la detección de fichas se obtienen de cada frame la sub imagen correspondiente al área central de cada escaque, se le hace un filtro de Sobel para la detección de bordes, a su vez se binariza una imagen a partir de cierto umbral. Luego para eliminar ruido se hace un erode, y un dilate para acrecentar los pixeled donde hay fichas. Si la cantidad de pixeles blancos pasan cierto umbral se puede decir que se encuentra una ficha en el escaque.</p>
+ <p><strong class="clr">A continuación se describen las tecnicas empleadas, algunas ya mencionadas anteriormente.</strong><br>
+ Primeramente, se emplea para la calibración, una detección de esquinas usando el metodo findChessboardCorners. De esta manera se obtienen las esquinas interiores del tablero de ajedrez. Con las esquinas detectadas se determinan las cuatro más externas, la distancia promedio entre las cuatro aristas que determinan y se localizan los cuatro mejores puntos para realizar una homografÃa y asà enderezar el tablero en caso de estar inclinado. A su vez
+ se recorta para solo tener la región del tablero en la imagen para procesar y colocarlo en una posición conocida. Con este proceso también se obtiene el tamaño de los escaques y de todo el tablero.</p>
+ <p>Luego de acondicionar la imagen se utiliza un proceso de supresión de fondo para detectar cuando se esta haciendo el movimiento de las fichas, para esto se utilizan los métodos de BackgroundSubtractorMOG2 de la librerÃa OpenCV, se realiza además un erode y un threshold de la máscara producida para determinar si se encuentra en un estado de oclusión.</p>
+ <p>Para la detección de fichas se obtienen de cada frame la sub imagen correspondiente al área central de cada escaque, se le hace un filtro de Sobel para la detección de bordes, a su vez se binariza una imagen a partir de cierto umbral. Luego para eliminar ruido se hace un erode, y un dilate para acrecentar los pixeles donde hay fichas. Si la cantidad de pixeles blancos pasan cierto umbral se puede decir que se encuentra una ficha en el escaque.</p>
</div>
- <div class="span6 float2">
- <br><br><br><br><br>
- <p>Para el envÃo de la partida a un servidor externo, como ya se comento, solamente se envÃa un tablero con unos y ceros, los cuales representan el tablero y las fichas. Dicho servidor es dedicado a esta aplicación y se encuentra dentro del repositorio del proyecto. Para usarlo se debe de levantar el mismo en un pc con java, y luego antes de calibrar, configurar la ip y el puerto (actualmente es el 5556) en la aplicación.</p>
- <p>Igualmente la aplicación permite una jugabilidad importante (siempre dentro de partidas lentas), luego de calibrar, la misma aplicación detecta cuando esta todo el tablero armado y emite un pitido, de ahi en mas, espera a que se hagan movimientos y detecta cambios de fichas.</p>
- <p>Es importante tener en cuenta cómo se debe de armar el tablero, dado que la detección es automática. Se ha de poner una ficha en el medio del tablero (no importa de qué jugador) y colocar el resto de las piezas en su lugar, cuando esten todo pronto para empezar la partida, se coloca la pieza que se encuentra en el medio del tablero en su lugar, y se espera a que el dispositivo emite un pitido, indicando que se puede comenzar a jugar.</p>
- </div>
+ </div>
+ </div>
+ </div>
+
+ <!--==============================section=================================-->
+
+ <div class="sub-content">
+ <div class="container">
+ <div class="row">
<div class="span6 float">
<h4>Consideraciones sobre la Solución</h4>
- <p><strong class="clr">A continuación se describe el ambiente utilizado para desarrollar.</strong><br>
- La solución que se llegó fue más acotada de lo que se planteó en un inicio, dado que se hizo énfasis en el procesamiento de las imágenes y no tanto en el problema, es que actualmente (Julio 2014) la aplicación solo detecta donde hay fichas y luego de cada movimiento de un jugador manda una matriz 8x8 binaria indicando donde hay o no fichas si hubo un movimiento efectivo.</p>
- <p>Otra consideración importante para el uso de la aplicación es la iluminación, la misma debe de ser uniforme. Dado que era una de las precondiciones del proyecto, no se tuvo en cuenta en ninguno de los algoritmos de procesamiento de imágenes.</p>
+ <p><strong class="clr">A continuación se detallan aspectos relacionados a la solución.</strong><br>
+ La solución que se llegó fue más acotada de lo que se planteó en un inicio, dado que se hizo énfasis en el procesamiento de imágenes y no tanto en el problema, es que actualmente (Julio 2014) la aplicación solo detecta donde hay fichas y luego de cada movimiento de un jugador manda una matriz 8x8 binaria indicando donde hay o no fichas si hubo un movimiento efectivo.</p>
+ <p>Otra consideración importante para el uso de la aplicación es la iluminación, la misma debe de ser uniforme. Dado que era una de las precondiciones del proyecto, no se tuvo en cuenta en ninguno de los algoritmos de procesamiento de imágenes para tratar temas de iluminación no uniforme.</p>
<p>Otro hecho a tener en cuenta para el uso de la aplicación es el tamaño del tablero y la altura donde debe de estar el dispositivo para poder ver todo el tablero.</p>
- <p>La calibración no es automática, se debe de decirle a la aplicación que debe de calibrar para detectar el tablero, luego de detectarlo emite un pitido y el dispositivo no puede ser movido de esa posicion, asi como tampoco se permite la re-calibración luego de iniciada la partida. Es importante apreciar que el plano de la cámara debe de ser paralelo al plano del tablero y que éste más una margen de un escaque han de aparecer en la imagen de la aplicación. No importa de què lado van a estar las fichas con respecto al dispositivo, pero si la rotación del tablero con respecto al mismo, lo ideal es que las lÃneas del tablero sean paralelas a los bordes de la imagen, aunque la aplicación puede soportar una pequeña rotación del mismo con respecto a esta alineación, siempre que se consideren los márgenes antes mencionados.</p>
+ <p>La calibración no es automática, se debe de decirle a la aplicación que debe de calibrar para detectar el tablero, luego de detectarlo emite un pitido y el dispositivo no puede ser movido de esa posición, asà como tampoco se permite la re-calibración luego de iniciada la partida. Es importante apreciar que el plano de la cámara debe de ser paralelo al plano del tablero y que éste más una margen de un escaque han de aparecer en la imagen de la aplicación. No importa de qué lado van a estar las fichas con respecto al dispositivo, pero si la rotación del tablero con respecto al mismo, lo ideal es que las lÃneas del tablero sean paralelas a los bordes de la imagen, aunque la aplicación puede soportar una pequeña rotación del mismo con respecto a esta alineación, siempre que se consideren los márgenes antes mencionados.</p>
</div>
+ <div class="span6 float2">
+ <br><br><br><br><br>
+ <p>Para el envÃo de la partida a un servidor externo, como ya se comentó, solamente se envÃa un tablero con unos y ceros, los cuales representan el tablero y las fichas. Dicho servidor es dedicado a esta aplicación y se encuentra dentro del repositorio del proyecto. Para usarlo se debe de levantar el mismo en un pc con java, y luego antes de calibrar, configurar la ip y el puerto (actualmente es el 5556) en la aplicación.</p>
+ <p>Igualmente la aplicación permite una jugabilidad importante (siempre dentro de partidas lentas), luego de calibrar, la misma aplicación detecta cuando esta todo el tablero armado y emite un pitido, de ahà en más, espera a que se hagan movimientos y detecta cambios de fichas.</p>
+ <p>Es importante tener en cuenta cómo se debe de armar el tablero, dado que la detección es automática. Se ha de poner una ficha en el medio del tablero (no importa de qué jugador) y colocar el resto de las piezas en su lugar, cuando esté todo pronto para empezar la partida, se coloca la pieza que se encuentra en el medio del tablero en su lugar, y se espera a que el dispositivo emite un pitido, indicando que se puede comenzar a jugar.
+ Esto último es para evitar que durante el armado se dé un caso de borde que es cuando se detecta la mano como una o varias piezas y si se dá que están cubiertas las filas 1, 2, 7 y 8 debido a esta situación, la aplicación entenderá que se está pronto para jugar.</p>
+ <br><br>
+ <p>Para visualizar imágenes ver la <a href="galeria_de_imagenes.html">GalerÃa de Imágenes</a> y <a href="videos.html">Videos</a></p>
+ </div>
</div>
</div>
</div>
diff --git a/web/videos.html b/web/videos.html
index 9602caa..10886fd 100644
--- a/web/videos.html
+++ b/web/videos.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <title>ChessTrack</title>
+ <title>ChessTrack.::.Videos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Your description">
@@ -96,55 +96,71 @@
<embed width="350" height="300"
src="https://www.youtube.com/v/GdQmgzBK0Jo"
type="application/x-shockwave-flash">
- <p class="lead p2">Titulo</p>
- Descripcion
+ <p class="lead p2">Partida Inmortal -1851</p>
+ Reproducción de la partida Inmortal (Londres 1851 - Adolf Anderssen y Lionel Kieseritzky).
+ <a href="http://es.wikipedia.org/wiki/Inmortal_%28partida_de_ajedrez%29">[leer más]</a>
</div>
</div>
<div class="span4">
<div class="thumbnail thumbnail_4">
<embed width="350" height="300"
- src="https://www.youtube.com/v/GdQmgzBK0Jo"
+ src="https://www.youtube.com/v/uiF0cZDhafI"
type="application/x-shockwave-flash">
- <p class="lead p2">Titulo</p>
- Descripcion
+ <p class="lead p2">Máscara BackgroundSubtractorMOG2</p>
+ Video de pruebas de detección de oclusión. Vista de la máscara.
</div>
</div>
<div class="span4">
<div class="thumbnail thumbnail_4">
<embed width="350" height="300"
- src="https://www.youtube.com/v/GdQmgzBK0Jo"
+ src="https://www.youtube.com/v/LCNMyQp4ANw"
type="application/x-shockwave-flash">
- <p class="lead p2">Titulo</p>
- Descripcion
+ <p class="lead p2">Detección de mano</p>
+ Video de pruebas de detección de oclusión. Etiquetado del procesamiento de detección de mano.
</div>
</div>
<div class="span4">
<div class="thumbnail thumbnail_4">
<embed width="350" height="300"
- src="https://www.youtube.com/v/GdQmgzBK0Jo"
+ src="https://www.youtube.com/v/PmG24pVQEF8"
type="application/x-shockwave-flash">
- <p class="lead p2">Titulo</p>
- Descripcion
+ <p class="lead p2">Demostración 1 - cámara global</p>
+ Video de demostración de la aplicación funcionando.
+ En el celular corre la actividad, se configura el servidor, se calibra, se arma el tablero, y se procede a jugar.
</div>
</div>
<div class="span4">
<div class="thumbnail thumbnail_4">
<embed width="350" height="300"
- src="https://www.youtube.com/v/GdQmgzBK0Jo"
+ src="https://www.youtube.com/v/p-oiMMfiODw"
type="application/x-shockwave-flash">
- <p class="lead p2">Titulo</p>
- Descripcion
+ <p class="lead p2">Demostación 1 - cámara cercana</p>
+ Cámara colocada en un lugar cercano al tablero para ir mostrando los movimientos que se están llevando a cabo.
+ Se arma el tablero de ajedrez, y se procede a jugar.
+ <br>
</div>
</div>
<div class="span4">
<div class="thumbnail thumbnail_4">
<embed width="350" height="300"
- src="https://www.youtube.com/v/GdQmgzBK0Jo"
+ src="https://www.youtube.com/v/s3tmBFANXfA"
type="application/x-shockwave-flash">
- <p class="lead p2">Titulo</p>
- Descripcion
+ <p class="lead p2">Demostación 1 - captura del monitor</p>
+ Visualización del servidor corriendo en el pc y la llegada de los mensajes.
+ Se inicia la actividad en el celular conectado a la pc para obtener el log de la aplicación.
</div>
</div>
+ <div class="span4">
+ <div class="thumbnail thumbnail_4">
+ <embed width="350" height="300"
+ src="https://www.youtube.com/v/EboS2yiFJGM"
+ type="application/x-shockwave-flash">
+ <p class="lead p2">Demostración 2</p>
+ Video de demostración de la aplicación funcionando. En el monitor se encuentra el servidor que recibe las matrices.
+ En el celular se encuentra corriendo la actividad, se configura el servidor, se calibra, se arma el tablero, y se procede a jugar.
+ Las matrices luego de cada movida son enviadas al servidor.
+ </div>
+ </div>
</div>
</div>
</div>
@@ -162,7 +178,6 @@
</div>
<div class="span8 float">
<ul class="footer-menu">
- <!--<li><a href="index.html" class="current">Inicio</a>|</li>-->
<li><a href="descripcion_del_proyecto.html">Descripción del Proyecto</a>|</li>
<li><a href="desarrollo.html">Desarrollo</a>|</li>
<li><a href="trabajo_a_futuro.html">Trabajo a Futuro</a>|</li>
--
GitLab