UNIVERSIDAD CENTRAL DEL ECUADOR FACULTAD DE … · Yo Carolina Alexandra Hurtado Mora en calidad de...
116
UNIVERSIDAD CENTRAL DEL ECUADOR FACULTAD DE INGENIERÍA CIENCIAS FÍSICAS Y MATEMÁTICA CARRERA DE COMPUTACIÓN GRÁFICA DESARROLLO DE UNA APLICACIÓN BASADA EN EL RECONOCIMIENTO AUTOMÁTICO DE PATRONES EN IMÁGENES APLICADA A LA EDUCACIÓN TRABAJO DE GRADUACIÓN PREVIO A LA OBTENCIÓN DEL TÍTULO DE INGENIERO EN COMPUTACIÓN GRÁFICA AUTOR: CAROLINA ALEXANDRA HURTADO MORA TUTOR: ING. PEDRO ALMAGRO BLANCO QUITO – 15 JULIO 2016
Transcript of UNIVERSIDAD CENTRAL DEL ECUADOR FACULTAD DE … · Yo Carolina Alexandra Hurtado Mora en calidad de...
UNIVERSIDAD CENTRAL DEL ECUADOR
FACULTAD DE INGENIERÍA CIENCIAS FÍSICAS Y MATEMÁTICA
CARRERA DE COMPUTACIÓN GRÁFICA
DESARROLLO DE UNA APLICACIÓN BASADA EN EL RECONOCIMIENTO
AUTOMÁTICO DE PATRONES EN IMÁGENES APLICADA A LA EDUCACIÓN
TRABAJO DE GRADUACIÓN PREVIO A LA OBTENCIÓN DEL TÍTULO DE
INGENIERO EN COMPUTACIÓN GRÁFICA
AUTOR: CAROLINA ALEXANDRA HURTADO MORA
TUTOR: ING. PEDRO ALMAGRO BLANCO
QUITO – 15 JULIO
2016
ii
DEDICATORIA
A mi madre, quien es ejemplo de fortaleza, dedicación y amor. A ti que eres mi
madre, mi padre y mi amiga te dedico este logro, sin tu apoyo jamás habría llegado
hasta aquí.
A mi hermano Javier, quien me apoyo en épocas difíciles de mi vida, gracias por
ser mi protector.
A mis dos pequeños ángeles Analía y Christopher, me cambiaron la vida con su
llegada, espero verlos llegar lejos, Dios los bendiga siempre.
A mis abuelitos Petrona y Víctor, por enseñarme que la honestidad, humildad y
trabajo no son un camino fácil pero sí el camino correcto.
A mis tíos Paulina y Víctor, por estar siempre a mi lado aconsejándome, parte de
este logro también es suyo.
A Maribel, por todo su apoyo y amistad, gracias por haberme escuchado cuando
nadie más lo hizo.
A David, por su paciencia, cariño y amistad incondicional a lo largo de esta etapa,
porque no dejaste que me rindiera en los momentos más difíciles.
iii
AGRADECIMIENTO
Quiero agradecer a Pedro, quien colaboró como tutor en el desarrollo de este
proyecto, sin su guía no hubiera sido posible este logro. Gracias por la paciencia
y las palabras de aliento.
A Verónica quien ha sido mi compañera, amiga y colega en este arduo camino.
Gracias por estar en las buenas y malas, espero esta amistad perdure por muchos
años más.
A todos los docentes que conocí a lo largo de la carrera, gracias por sus
enseñanzas, su dedicación y su tiempo. Un agradecimiento especial a los
docentes Roberto Rosero y Gabriela Mafla quienes no solo imparten conocimiento
sobre las asignaturas sino que nos enseñan sobre la vida. Gracias por todo su
apoyo y dedicación pero sobre todo por el cariño.
A todas las personas que conocí a lo largo de esta larga aventura universitaria,
gracias por los buenos y malos momentos compartidos, me llevo bonitos
recuerdos y valiosas lecciones.
Gracias a todos quienes aún siguen siendo parte de mi vida, y me apoyaron en
cada momento de adversidad.
iv
AUTORIZACIÓN DE LA AUTORÍA INTELECTUAL
Yo Carolina Alexandra Hurtado Mora en calidad de autor(a) del Proyecto Integrador
realizado sobre: "Desarrollo de una aplicación basada en el reconocimiento
automático de patrones en imágenes aplicada a la educación" por la presente
autorizo a la UNIVERSIDAD CENTRAL DEL ECUADOR, hacer uso de todos los
contenidos que me pertenecen o parte de los que contiene esta obra, con fines
estrictamente académicos o de investigación.
Los derechos que como autor me corresponden, con excepción de la presente
autorización, seguirán vigentes a mi favor, de conformidad con lo establecido en
los artículos 5, 6, 8, 19 y demás pertinentes de la Ley de Propiedad Intelectual y
su Reglamento.
Quito, 15 de Julio 2016.
CAROLINA ALEXANDRA HURTADO MORA
CC: 1721883641
Dirección electrónica: [email protected]
Telf: 0995217745
v
CERTIFICACIÓN DEL TUTOR
Yo, Pedro Almagro Blanco en calidad de tutor del trabajo de titulación
"DESARROLLO DE UNA APLICACIÓN BASADA EN EL RECONOCIMIENTO
AUTOMÁTICO DE PATRONES EN IMÁGENES APLICADA A LA EDUCACIÓN",
elaborado por la estudiante Carolina Alexandra Hurtado Mora de la Carrera de
Ingeniería en Computación Gráfica, Facultad de Ingeniería Ciencias Físicas y
Matemática de la Universidad Central del Ecuador, considero que el mismo reúne
los requisitos y méritos necesarios en el campo metodológico y en el campo
epistemológico, para ser sometido a la evaluación por parte del jurado examinador
que se designe, por lo que lo APRUEBO, a fin de que el proyecto integrador sea
habilitado para continuar con el proceso de titulación determinado por la
Universidad Central del Ecuador.
En la ciudad de Quito, a los 20 días del mes de Junio de 2016.
Ing. Pedro Almagro Blanco
CC: 1756591846
Dirección electrónica: [email protected]
vi
CERTIFICADO DE CALIFICACIONES
vii
viii
CONTENIDO
DEDICATORIA .................................................................................................... ii
AGRADECIMIENTO ............................................................................................ iii
AUTORIZACIÓN DE LA AUTORÍA INTELECTUAL .............................................iv
CERTIFICACIÓN DEL TUTOR ............................................................................ v
CERTIFICADO DE CALIFICACIONES ................................................................vi
CONTENIDO ..................................................................................................... viii
LISTA DE FIGURAS ............................................................................................ x
LISTA DE TABLAS ..............................................................................................xi
RESUMEN .......................................................................................................... xii
ABSTRACT ....................................................................................................... xiii
INTRODUCCIÓN ................................................................................................. 1
1. DEFINICIÓN DEL PROBLEMA .................................................................... 2
1.1 Antecedentes ............................................................................................. 2
1.2 Planteamiento del Problema ...................................................................... 3
1.3 Formulación del Problema .......................................................................... 3
1.4 Objetivos .................................................................................................... 4
1.4.1 Objetivo General .................................................................................. 4
1.4.2 Objetivos Específicos ........................................................................... 4
1.5 Justificación ................................................................................................ 4
2. MARCO TEÓRICO ....................................................................................... 6
2.1 Reconocimiento automático de patrones ................................................... 6
2.2 Procesamiento de Imágenes ..................................................................... 6
a) Captura ................................................................................................... 7
b) Pre-procesamiento .................................................................................. 7
Binarización ....................................................................................... 7
Máscara de Convolución .................................................................... 8
Filtro Gaussiano ................................................................................. 9
c) Segmentación ........................................................................................ 10
Filtro Sobel ....................................................................................... 11
Filtro Canny ...................................................................................... 12
Transformada de Hough .................................................................. 13
d) Identificación de objetos ........................................................................ 17
ix
2.3 Clusterización .......................................................................................... 17
a) Método de Otsu ..................................................................................... 17
b) Algoritmo K-Means ................................................................................ 19
3. METODOLOGÍA ......................................................................................... 21
3.1 Metodología del Proyecto. ....................................................................... 21
3.2 Análisis y especificación de requerimientos. ............................................ 21
3.2.1 Selección de tecnologías .................................................................. 22
a) Selección de tecnologías para el desarrollo de la librería. .................. 22
Python .......................................................................................... 22
Opencv ......................................................................................... 22
cv2.HoughLinesP ............................................................................ 23
cv2.HoughCircles .......................................................................... 24
b) Selección de tecnologías para el desarrollo de la aplicación cliente. .. 24
HTML5 (Lenguaje de Marcado de Hipertexto) .............................. 24
JavaScript ..................................................................................... 25
CSS .............................................................................................. 26
Apache Cordova ........................................................................... 28
Flask ............................................................................................. 29
3.3 Diseño del sistema. ................................................................................. 32
3.3.1 Diseño de métodos para la detección de patrones. ........................... 32
a) Detección de Rectángulos ................................................................. 32
b) Detección de Circunferencias ............................................................ 33
3.3.2 Diseño de la interfaz cliente. ............................................................. 35
a) Sección Inicio ..................................................................................... 35
b) Sección Información ........................................................................... 37
c) Sección Aplicación ............................................................................ 38
d) Sección Documentación .................................................................... 39
3.4 Codificación del software. ........................................................................ 40
3.4.1 Codificación de la librería para la detección de patrones. ................. 40
a) Método umbral_est ................................................................... 40
b) Método lineas_hough ............................................................... 41
c) Método detecta_rectangulo .................................................. 41
x
d) Método detecta_circulos ...................................................... 42
e) Método metodo_alternativo .................................................. 42
3.4.2 Codificación de la aplicación cliente. ................................................. 43
a) Función $.ajax.......................................................................... 43
b) Método imagen_procesar ......................................................... 43
c) success:function(data) ......................................................... 44
4. RESULTADOS ........................................................................................... 46
4.1 Pruebas con dataset de imágenes. ......................................................... 47
4.2 Tablas de Resultados .............................................................................. 50
4.3 Análisis de resultados.............................................................................. 54
5. CONCLUSIONES ....................................................................................... 55
6. RECOMENDACIONES ............................................................................... 57
7. BIBLIOGRAFÍA ........................................................................................... 59
ANEXOS ........................................................................................................... 64
LISTA DE FIGURAS
Figura 2-1. Etapas del procesamiento de imágenes (Wainschenker, Massa, &
Tristan, 2011) ...................................................................................................... 7
Figura 2-2. Máscara de Convolución: Proceso de Aplicación............................... 8
Figura 2-3. Ejemplo Filtro Gaussiano ................................................................... 9
Figura 2-4. Filtro Gaussiano: Aplicación. ........................................................... 10
Figura 2-5. Filtro Sobel: Paso 2. ........................................................................ 11
Figura 2-6. Filtro Sobel: Paso 3. ........................................................................ 12
Figura 2-7. Representación de coordenadas polares (Wikipedia, 2014) ............ 13
Figura 2-8. Diagrama de la Transformada de Hough (Wikipedia, 2014) ............. 14
Figura 2-9. Transformada de Hough: Líneas ..................................................... 15
Figura 2-10. Izq. Puntos en espacio geométrico Der. Puntos en espacio Hough
(Rhody, 2005) .................................................................................................... 16
Figura 2-11. Pasos del Algoritmo K-Means (Wikipedia, 2016) ........................... 19
Figura 3-1. Esquema de Integración de Tecnologías ......................................... 28
Figura 3-2. Tabla de conversión Decimal a Base64 (Cruz, 2012) ...................... 32
Figura 3-3 Método1. Procesamiento de Imagen ................................................ 33
Figura 3-4. Método2. Procesamiento de Imagen ............................................... 33
xi
Figura 3-5. Procesamiento de Imágenes para la Detección de Circunferencias 34
Figura 3-6. Ejemplo detección de cuadriláteros, rectángulos y círculos ............. 35
Figura 3-7. Visualización de Pantalla: Sección Inicio. ........................................ 35
Figura 3-8. Visualización Móvil: Sección Inicio. .................................................. 36
Figura 3-9. Visualización de Pantalla: Sección Inicio-Menú ............................... 36
Figura 3-10. Visualización Móvil: Sección Inicio-Menú. ...................................... 37
Figura 3-11. Visualización de Pantalla: Sección Información. ............................ 37
Figura 3-12. Visualización Móvil: Sección Información. ..................................... 38
Figura 3-13. Visualización de Pantalla: Sección Aplicación. .............................. 38
Figura 3-14. Visualización Móvil: Sección Aplicación. ........................................ 39
Figura 3-15. Visualización de Pantalla: Sección Documentación. ...................... 39
Figura 3-16. Visualización Móvil: Sección Documentación. ............................... 40
Figura 3-17. Método Estadístico: Proceso Automatización del Umbral. ............. 41
Figura 4-1. Prueba detección de figuras: rectángulos y círculos ........................ 48
LISTA DE TABLAS
Tabla 4-1. Tabla de Resultados: Detección de Círculos..................................... 51
Tabla 4-2. Tabla de Resultados: Detección de Rectángulos .............................. 53
Tabla 4-3. Valores Promedio de cada método. .................................................. 54
xii
RESUMEN
DESARROLLO DE UNA APLICACIÓN BASADA EN EL RECONOCIMIENTO
AUTOMÁTICO DE PATRONES EN IMÁGENES APLICADA A LA EDUCACIÓN
Autor: Carolina Alexandra Hurtado Mora
Tutor: Ing. Pedro Almagro Blanco.
El presente proyecto consiste en elaborar una aplicación que permita el
reconocimiento automático de figuras geométricas básicas en imágenes aplicada
a la educación, para ello se estudiaron los conceptos para el procesamiento de
imágenes y se analizaron las diferentes posibilidades de software a emplearse
para obtener los resultados deseados. Con respecto al procesamiento de
imágenes los filtros principalmente utilizados fueron: filtros para detección de
bordes, filtro de Canny y la transformada de Hough. Por otro lado, dentro de las
tecnologías que nos permitieron el desarrollo de la librería para la detección
automática de patrones tenemos como lenguaje de programación a Python y
como librería especializada para el procesamiento de imágenes a OpenCV,
además se utilizaron las tecnologías HTML5, JavaScript y CSS, para el desarrollo
de la aplicación que permitirá mostrar los resultados obtenidos con la librería
desarrollada.
PALABRAS CLAVES: PROCESAMIENTO DE IMÁGENES / DETECCIÓN DE
PATRONES / APLICACIÓN EDUCATIVA / DETECCIÓN DE BORDES /
TRANSFORMADA DE HOUGH / FILTRO CANNY
xiii
ABSTRACT
DEVELOPMENT OF AN APPLICATION BASED ON THE AUTOMATIC
RECOGNITION OF IMAGES PATTERNS APPLIED TO EDUCATION
Author: Carolina Alexandra Hurtado Mora
Tutor: Eng. Pedro Almagro Blanco.
The current project consisted in preparing an application intended to the automatic
recognition of baseline geometric figures in images applied to education. Concepts
were studied to process images and diverse software possibilities to obtain desired
results, were analyzed. As per processing of images, the most used filters were:
filters for detection of edges, Canny’s filter, and Hough transform. On the other
hand, in technologies that allowed developing library for the automatic detection of
patters, the programming language used was Python, and as a specialized library
to process images, OpenCV. Additionally, HTML5, JavaScript and CSS
technologies were used to develop the application, which shall allow showing
results, with developed library.
KEYWORDS: IMAGE PROCESSING / PATTERNS DETECTION /
EDUCATIONAL APPLICATION / EDGE DETECTION / HOUGH TRANSFORM /
CANNY FILTER.
I CERTIFY that the above and foregoing is a true and correct translation of the
original document in Spanish.
Ernesto Andino Certified Translator IC: 1703852317
1
INTRODUCCIÓN
La tecnología está presente en todo lo que rodea a la sociedad, desde el trabajo,
la comunidad, la familia, el hogar, y hasta el sector de la enseñanza. Desde hace
algunos años este sector ha explorado el potencial tan grande que ofrece el ámbito
tecnológico para educar y aprender. En efecto, a partir de sus
innumerables servicios y aplicaciones tanto los docentes como los estudiantes
pueden crear, distribuir y compartir sus propios contenidos con una enorme
calidad, versatilidad y amplitud de difusión.
En la actualidad los alumnos necesitan de una amplia gama de experiencias que
incluyan aspectos reales, representaciones visuales y símbolos abstractos que
mejoren el aprendizaje. Es por ello que en los últimos diez años han sido
extraordinariamente fecundos los avances tecnológicos aplicables a la educación
para poder ofrecer lo mejor y lo más importante en experiencias para los
escolares.
Situados en esta sociedad de la información que exige una fuerte disminución de
las prácticas memorísticas/reproductoras en favor de las metodologías socio-
constructivistas centradas en los estudiantes y en el aprendizaje autónomo y
colaborativo, los entornos sociales para la interacción que ofrecen las aplicaciones
de la Web constituyen un instrumento idóneo para ello. Son muchas las materias
educativas que aprovechan los avances digitales, es por ello que el presente
proyecto integrador propone el "Desarrollo de una aplicación basada en el
reconocimiento automático de patrones en imágenes aplicada a la
educación", con lo que se pretende realizar un aporte a la educación para el
aprendizaje de geometría básica.
2
1. DEFINICIÓN DEL PROBLEMA
1.1 Antecedentes
En el artículo “La Web 2.0 en el ámbito educativo” se menciona que no hace falta
mucha imaginación para intuir las posibilidades educativas que se derivan del
planteamiento de la Web. En efecto, a partir de sus innumerables servicios y
aplicaciones tanto los docentes como los estudiantes pueden crear, distribuir y
compartir sus propios contenidos con una enorme calidad, versatilidad y amplitud
de difusión. 1
El Dr. Pere Marqués Graells asegura que situados en esta sociedad de la
información que exige una fuerte disminución de las prácticas
memorísticas/reproductoras en favor de las metodologías socio-constructivistas
centradas en los estudiantes y en el aprendizaje autónomo y colaborativo, los
entornos sociales para la interacción que ofrecen las aplicaciones de la Web
constituyen un instrumento idóneo para ello.2
La educadora Ana Daroch es una convencida de que hay que intentar que la
enseñanza se transforme en una vivencia educativa, la cual es mucho más que
una actividad. "Una experiencia de aprendizaje es una vivencia educativa, que por
su significancia la hace más eficiente desde el punto de vista de las posibilidades
de aprendizaje”.
En el blog educ@conTIC se menciona lo siguiente: cada vez son más los docentes
que van incorporando las diferentes herramientas TIC a sus actividades de clase,
en una sociedad analógica como la nuestra, alfabetizar supone que los
estudiantes tengan acceso a los medios y redes digitales para obtener, contrastar,
analizar y también publicar contenidos digitales multimedia.
A continuación se muestran ejemplos de aplicaciones educativas, las cuales
sirvieron de inspiración para el desarrollo de este proyecto.
La Cueva Tragapalabras3: Aplicación multimedia que ayuda al desarrollo
lingüístico, reconocimiento de objetos y al ejercicio mental para aprender
y reconocer palabras, ayuda con el desarrollo del lenguaje en los niños.
1 (Larequi, 2014) 2 (Graells, 2013) 3 (Mendez, n.d.)
3
Geometría Montessori4: Aplicación móvil para niños de 4 a 8 años el
objetivo es que los niños aprendan a desarrollar la lógica a través de la
categorización y jerarquización de la formas geométricas.
Thinkrolls5: Aplicación dirigida a niños entre 3 y años ayuda a que los
infantes aprendan la mecánica de la prueba y error.
1.2 Planteamiento del Problema
La tendencia pedagógica tradicional resulta insuficiente y deficiente en el plano
teórico cognitivo y de la praxis del ser humano ya que ve a éste como un simple
receptor de la información. La retención de la información se alcanza sobre la base
de una repetición mecánica de ejercicios sistemáticos recapitulados, de manera
esquemática y enciclopedista sin preocuparse de forma profunda y esencial de los
procesos que intervienen en la asimilación de los conocimientos, esto ha generado
una tendencia al estudio superficial de las materias con el propósito de cumplir
sea con requisitos de aprobación, un horario de clases o con un contenido
curricular pre-establecido.
En la actualidad los alumnos necesitan de una amplia gama de experiencias que
incluyan aspectos reales, representaciones visuales y símbolos abstractos que
mejoren el aprendizaje. Es por ello que en los últimos diez años han sido
extraordinariamente fecundos los avances tecnológicos aplicables a la educación
para poder ofrecer lo mejor y lo más importante en experiencias para los
escolares.
El mundo moderno exige una preparación que obliga al conocimiento de todo
aquello que tiene que ver con la sociedad de la información y las nuevas
tecnologías, por lo que es necesario e inevitable adoptar nuevas formas de
aprendizaje.
1.3 Formulación del Problema
¿Es posible que una aplicación basada en el reconocimiento automático de
patrones en imágenes facilite el aprendizaje de geometría básica?
4 (Mocholí, 2014) 5 (Mendez, n.d.)
4
1.4 Objetivos
1.4.1 Objetivo General
Desarrollar de una aplicación basada en el reconocimiento automático de patrones
en imágenes aplicada a la educación que facilite la identificación de figuras
geométricas básicas.
1.4.2 Objetivos Específicos
Emplear los conocimientos en cuanto a programación, procesamiento de
imágenes y diseño obtenidos a lo largo del curso de la carrera de Ingeniería
en Computación Gráfica.
Analizar las diferentes tecnologías disponibles que pueden ser
potencialmente utilizadas en el desarrollo de una aplicación educativa que
haga uso del reconocimiento de patrones en imágenes.
Implementar una librería de software que permita la detección de patrones
geométricos básicos en imágenes y su procesamiento.
Proporcionar una aplicación que reconozca patrones geométricos básicos
automáticamente en una imagen.
1.5 Justificación
La tecnología está presente en todo lo que rodea a la sociedad, desde el trabajo,
la comunidad, la familia, el hogar, y hasta el sector de la enseñanza. Desde hace
algunos años este sector ha explorado el potencial tan grande que ofrece el ámbito
tecnológico para educar y aprender, con el uso adecuado de éste se ayuda a los
estudiantes a adquirir las habilidades necesarias para sobrevivir en una sociedad
enfocada en el conocimiento digital.
Las tecnologías en educación deben usarse para mejorar la calidad de los
aprendizajes. No se trata de que los estudiantes "aprendan computación" se trata
de ofrecer a los estudiantes experiencias de aprendizaje completamente nuevas,
estrategias de construcción colaborativa de conocimiento, centradas en la
obtención de resultados de calidad, medibles y demostrables.
Aunque la noción tecnológica no es la solución a los problemas de la enseñanza
y aprendizaje de las distintas asignaturas, ésta se ha convertido paulatinamente
en un agente catalizador del proceso de cambio en la educación de las distintas
disciplinas.
Son muchas las materias educativas que aprovechan los avances digitales,
también la geometría puede beneficiarse en gran medida de los progresos
5
surgidos. Éstos son aplicables a la enseñanza y al aprendizaje gracias en parte a
las posibilidades que ofrecen de manejar dinámicamente objetos que permiten al
estudiante vivir nuevas experiencias en un ambiente de exploración.
La necesidad de la enseñanza de la geometría en el ámbito educativo responde,
en primer lugar, al papel que ésta desempeña en la vida cotidiana.
Un conocimiento geométrico básico es indispensable para desenvolverse en el
día a día: para orientarse reflexivamente en el espacio; para hacer estimaciones
sobre formas y distancias; para hacer apreciaciones y cálculos relativos a la
distribución de los objetos en el espacio, etc.
La orientación espacial, fruto de una paulatina organización mental del espacio
exterior, es un objetivo central de la educación geométrica en los primeros niveles
educativos. Las clasificaciones, ordenaciones, etc., se hacen inicialmente de
acuerdo a criterios muy simples, de carácter sensomotor, relativos, entre otros, a
la forma, el tamaño o la distancia.
Es por ello que el presente proyecto integrador propone el "Desarrollo de una
aplicación basada en el reconocimiento automático de patrones en
imágenes aplicada a la educación", con lo que se pretende realizar un aporte a
la educación para el aprendizaje de geometría básica.
6
2. MARCO TEÓRICO
2.1 Reconocimiento automático de patrones: Previo a la explicación del
reconocimiento automático de patrones en imágenes describiremos tres
definiciones importantes.
- Patrón: Conjunto de características que determinan un objeto, estas
características son las que diferencian un objeto de otro.
- Clase: Conjunto de objetos que tienen características similares.
- Reconocimiento: Proceso en el que se asigna un objeto a una clase.
Para el reconocimiento de patrones en imágenes el primer paso que hay que
realizar es procesar la imagen de tal manera que las características deseadas se
distingan claramente y así lograr definir los patrones que nos permitan identificar
objetos dentro de la imagen.
A continuación se detallan las diferentes técnicas de procesamiento de imágenes
utilizadas en el desarrollo de este proyecto.
2.2 Procesamiento de Imágenes: El procesamiento de imágenes tiene como
objetivo mejorar el aspecto de las imágenes y hacer más evidentes en ellas ciertos
detalles que se desean hacer notar. La imagen puede haber sido generada de
muchas maneras, por ejemplo, fotográfica, o electrónicamente. El procesamiento
de las imágenes se puede en general hacer por medio de métodos ópticos, o bien
por medio de métodos digitales, en una computadora.6
El procesamiento de imágenes se puede en general, resumir en cuatro etapas7
(figura 2-1).
6 (Malacara, n.d.) 7 (Reconocimiento de imágenes)
7
Figura 2-1. Etapas del procesamiento de imágenes (Wainschenker, Massa, & Tristan, 2011)
a) Captura: Este paso consiste en obtener la imagen con la cual se va a trabajar,
la captura de la imagen se puede realizar a través de medios electrónicos como
cámaras fotográficas, cámaras de video, escáner entre otros. Para obtener una
imagen adecuada se debe tomar en cuenta las condiciones bajo las que la imagen
será tomada como por ejemplo distancia, luz, resolución, etc., esto determinará
qué tan complejo será el pre-procesamiento que se implementará.
b) Pre-procesamiento: Consiste en mejorar la imagen original para el proceso
posterior, la mejora se realiza mediante la reducción del área de trabajo y la
eliminación de ruido.
Para la reducción del área de trabajo es frecuentemente usado el proceso de
Binarización. A continuación se explica dicho proceso.
Binarización8: Convierte la imagen recibida a una imagen en blanco y
negro, por ende la información de la imagen se reducirá a dos valores 0 y
1. El proceso que se realiza para binarizar una imagen es el siguiente:
Se compara cada píxel de la imagen con un determinado umbral 𝑡 si el
valor del píxel es mayor que 𝑡 tomará el valor de 1 caso contrario el valor
que se le asignará será 0.
𝐼(𝑥, 𝑦) = {1 𝑠𝑖 𝑓(𝑥, 𝑦) > 𝑡0 𝑠𝑖 𝑓(𝑥, 𝑦) ≤ 𝑡
8 (Capítulo 2. Técnicas de procesamiento digital de imágenes y reconocimiento de patrones)
Captura Pre-procesamiento
Segmentación y Extracción de
CaracterísticasIdentificación de objetos
8
Por otro lado para la eliminación de ruido generalmente se utilizan filtros los cuales
trabajan con máscaras de convolución.
Máscara de Convolución9: Dicha máscara no es otra cosa que una matriz
generalmente de tamaño 3x3, en donde sus valores están ya determinados
dependiendo del filtro a aplicarse. Como su nombre indica este tipo de
máscaras sirve para realizar la convolución que no es otra cosa que el
cálculo de un nuevo valor de intensidad de un píxel a partir de los valores
de sus píxeles vecinos.
El proceso para la aplicación de una máscara de convolución es el
siguiente:
- En la imagen se ubica el píxel a ser calculado (marcado en rojo en
la figura 2-2), posteriormente se identifican sus vecinos (marcados
en amarillo en la figura 2-2), el número de éstos vendrá
determinado por el área de acción sobre la que actuará la máscara
de convolución.
- Se multiplica miembro a miembro el valor de cada píxel vecino con
el valor correspondiente de la máscara de convolución.
- Los resultados obtenidos de cada multiplicación se suman y se
obtiene el nuevo valor del píxel determinado inicialmente.
Figura 2-2. Máscara de Convolución: Proceso de Aplicación
En este proyecto para la eliminación de ruido se implementó el filtro Gaussiano el
cual está explicado a continuación.
9 (Maseda Martínez, Ramos Arcos, Rey Piñero, & Rodríguez Rodríguez, n.d.)
23 34 43 86 23
3 29 56 90 67
23 64 86 56 90
23 76 64 76 86
67 67 34 67 90
23 23 64 64 64
90 34 25 25 25
86
0 1 0
0 0 0
0 0 0
Imagen Máscara Resultado
9
Filtro Gaussiano10: El propósito del filtro gaussiano es dar un efecto de
suavizado a la imagen y reducir el ruido presente. El ruido en imágenes
puede ser producido por factores como:
- Digitalización de la imagen.
- Mala iluminación, mientras menos sombra haya en la imagen
menor es la probabilidad de ruido.
- Zoom excesivo.
- Sensor fotográfico sobrecalentado, entre otros.
El filtro gaussiano consiste en la mezcla de colores para conseguir un
efecto de desenfoque o difuminado, para este proceso se considera la
imagen como una matriz de puntos (píxeles), con valores determinados de
rojo, verde y azul (RGB). Los valores de los píxeles de la nueva imagen
serán una combinación de los puntos cercanos al píxel evaluado, de esta
forma si un punto rojo y azul están cerca, el píxel rojo se oscurecerá y el
azul se enrojecerá (figura 2-3).
Para determinar los píxeles cercanos al píxel a ser calculado se debe
especificar un radio de acción ya que no todos los píxeles influirán de la
misma manera, cuanto más cerca estén del píxel a modificar más influirán
no así los que estén más alejados. (Barros, 2007)
La máscara generalmente usada para la implementación del filtro
gaussiano es la siguiente:
1
273
[ 1 4 7 4 14 16 26 16 4741
26164
41267
26164
741]
Para aplicar una máscara gaussiana de AxB dimensiones a una imagen de
MxN dimensiones primero se debe crear una matriz de 0’s de dimensiones
10 (The University of Auckland, 2010)
Figura 2-3. Ejemplo Filtro Gaussiano
10
(M+(A-1))X(N+(B-1)), y copiar la imagen original en el centro de dicha
matriz. Por ejemplo para una máscara de 5x5 se creará una matriz de
(M+4) filas por (N+4) columnas y se copiará la imagen (figura 2-4).
𝐼𝑂 = 𝐼𝑅 =
Imagen original
Imagen añadida filas y columnas de 0’s
Figura 2-4. Filtro Gaussiano: Aplicación.
Una vez realizado este paso, se procede a realizar la convolución entre la
imagen obtenida (IR) y la máscara gaussiana.
c) Segmentación11: Esta técnica consiste en descomponer una imagen en sus
partes constituyentes, es decir divide la imagen en objetos de interés y fondo, en
este proceso se identifican los bordes, las líneas o curvas, y se segmenta la
imagen en regiones, etc.
La segmentación se puede realizar en base a dos criterios diferentes:
- Similitud: Divide a la imagen basándose en la búsqueda de zonas que
tengan valores similares conforme al crecimiento de la región o la
umbralización.
- Discontinuidad: Divide a la imagen basándose en cambios bruscos del
nivel, permite la detección de puntos aislados, líneas o curvas y bordes.
En este trabajo para la detección de bordes se utilizaron los siguientes filtros:
11 (La Serna Palomino & Roman Concha, n.d.)
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0
0 0 0 0
0 0 0 0
0 0 0 0
0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
11
Filtro Sobel12: Es un filtro de detección de bordes, el cual calcula la
variación de la intensidad de los pixeles en una imagen; un cambio drástico
de intensidad indica una mayor probabilidad de detección de borde.
El operador de sobel es usado para detectar los bordes en dos direcciones:
horizontal y vertical, para ello las máscaras de convolución típicamente
usadas son:
𝑋 = [−1 0 1−2 0 2−1 0 1
] 𝑌 = [−1 −2 −10 0 01 2 1
]
Proceso para aplicar el filtro Sobel
1. Convertir la imagen original (I) de dimensiones MxN a una imagen en escala
de grises (IG).
2. Crear una matriz de 0’s de dimensiones (M+(A-1))x(N+(B-1)) para una
máscara de dimensiones AxB, y sobre esta copiar la imagen original
ubicándola en el centro. En la figura 2-5 se muestra un ejemplo para una
máscara de 3x3.
𝐼𝐺 = 𝐼𝑅 =
Imagen en escala de grises
Imagen añadida filas y columnas de 0’s
Figura 2-5. Filtro Sobel: Paso 2.
3. Aplicar la máscara de convolución 𝑋 o 𝑌 sobre la imagen obtenida
anteriormente (𝐼𝑅). De tal manera que el primer píxel que tomará el kernel
de la máscara de convolución coincida con el primer pixel de la imagen en
escala de grises (IG), el kernel no se aplica sobre los ceros añadidos
anteriormente (figura 2-6).
12 (tutorialspoint, 2016)
0 0 0 0 0 0 0
0 0
0 0
0 0
0 0
0 0
0 0 0 0 0 0 0
12
Máscara
Imagen (IR)
Figura 2-6. Filtro Sobel: Paso 3.
Filtro Canny13: Es un operador de detección de bordes que implementa
un proceso de múltiples etapas lo que hace de Canny un algoritmo óptimo.
El proceso del algoritmo de Canny es el siguiente:
o Eliminación del ruido: Para este proceso típicamente se aplica el
filtro de Gauss sobre la imagen original.
o Obtención de la intensidad del gradiente de la imagen: Para
este paso se utiliza la implementación del filtro de sobel en sus dos
direcciones X e Y.
o Supresión no máxima al resultado del gradiente: Consiste en
eliminar los bordes más delgados, el procedimiento que se sigue
es:
Se recorre pixel por pixel la imagen y se evalúa el valor del
gradiente con respecto al de sus vecinos, si el valor de
gradiente del pixel actual es el mayor con respecto a sus
vecinos entonces se conserva el valor caso contrario se
suprimirá.
o Doble Umbral: Se fijan dos valores de umbral 𝑈1 𝑦 𝑈2 de tal
manera que 𝑈1 > 𝑈2, se evalúa pixel por pixel de la imagen y si la
intensidad del píxel actual es mayor que 𝑈1 se considera un borde
fuerte, si está entre 𝑈1 y 𝑈2 se considera un borde débil y si su
13 (Canny Edge Detection, 2009)
0 0 0 0 0 0 0
0 0
0 0
0 0
0 0
0 0
0 0 0 0 0 0 0
-1 0 1
-2 0 2
-1 0 1
13
intensidad se encuentra por debajo de 𝑈2 será eliminado. Para este
proceso se emplea la automatización del umbral que está detallado
en el Apartado 3.4.
o Seguimiento de borde por Histéresis: En este último paso se
evalúa los pixeles que fueron considerados como bordes débiles
ya que muchos de ellos pueden ser resultado del ruido presente en
la imagen. Para la evaluación de los píxeles se procede de la
siguiente forma:
Alrededor del píxel débil se verifica una vecindad 8-
vecinos, si alguno de sus píxeles vecinos es un píxel de
borde fuerte el pixel actual se conserva caso contrario se
suprime.
Siguiendo con la etapa de segmentación basada en la discontinuidad tenemos
como método principal para la detección de líneas y círculos a la transformada de
Hough que se describe a continuación.
Transformada de Hough14
- Para Líneas: La teoría de la transformada de Hough nos dice que toda
línea recta puede ser representada por un punto en el espacio de
coordenadas polares (𝛾, 𝜃) donde:
𝛾: Representa la distancia entre la línea y el origen.
𝜃: Representa el ángulo del vector que va desde el origen hasta la línea y
que corta a ésta de manera perpendicular. (Véase figura 2-7).
Figura 2-7. Representación de coordenadas polares (Wikipedia, 2014)
14 (Rossius)
Y
X 𝜃 O
𝛾
14
Dado que por un mismo punto pasan muchas líneas diferentes por cada punto en
la imagen original se obtendrá un conjunto de coordenadas (𝛾, 𝜃), este conjunto
de coordenadas determinará una curva sinusoidal en el espacio de Hough. Para
un conjunto de puntos existirá un conjunto de curvas sinusoidales, y las
coordenadas del punto de intersección de dichas curvas en el espacio de Hough
representarán la línea que contenga el conjunto puntos. Para una mejor
comprensión a continuación se presenta un ejemplo.
Ejemplo
Considere los puntos 𝑝1, 𝑝2, 𝑝3 por cada punto pasarán 𝑛 líneas y cada línea estará
determinada por un par de coordenadas (𝛾, 𝜃).(figura 2-8)
Figura 2-8. Diagrama de la Transformada de Hough (Wikipedia, 2014)
Cada par de coordenadas (𝛾, 𝜃) es representado en el espacio de Hough y cada
conjunto de líneas que pasan por un punto determinan una curva sinusoidal en
dicho espacio, el punto de intersección de dichas curvas determinan una distancia
(𝛾) y un ángulo (𝜃) coordenadas las cuales representan la línea que pasa por los
puntos 𝑝1, 𝑝2, 𝑝3. (Véase figura 2-9).
𝒑𝟏 𝒑𝟐
𝒑𝟑
𝒑𝟏 𝒑𝟐
𝒑𝟑
𝒑𝟏 𝒑𝟐
𝒑𝟑
15
Espacio de la Transformada de Hough (Wikipedia, 2014)
Figura 2-9. Transformada de Hough: Líneas
- Para círculos15: La transformada de Hough para círculos es usada para
determinar los parámetros de una circunferencia cuando el conjunto de
puntos (𝑥, 𝑦) que determinen el perímetro de la misma es conocido.
Una circunferencia de radio 𝑟 y centro (𝑎, 𝑏) es descrita por las siguientes
ecuaciones paramétricas:
𝑥 = 𝑎 + 𝑟𝑠𝑖𝑛(𝜃)
𝑦 = 𝑏 + 𝑟𝑐𝑜𝑠(𝜃)
Donde:
𝑥, 𝑦: Coordenada de un punto perteneciente al perímetro de la
circunferencia.
𝑎, 𝑏: Coordenadas del centro de la circunferencia.
𝑟: Radio de la circunferencia.
𝜃: Ángulo que recorre de 0° a 360°.
Si no se conoce el radio 𝑟 en la aplicación de la transformada de Hough
tendrán que determinarse las tripletas (𝑎, 𝑏, 𝑟) que describan un círculo lo
que ocasionará lentitud en el proceso y que se consuma demasiada
memoria del ordenador, por lo tanto es recomendable definir de manera el
radio 𝑟.
15 (Rhody, 2005)
Y
X
𝒑𝟏 𝒑𝟐
𝒑𝟑
. Espacio Lineal
16
En el caso de este proyecto el valor del radio es desconocido, por lo que
de acuerdo a los requerimientos de la función cv2.HoughCircles
(Apartado 3.2.1) se definieron las variables minRadius y maxRadius, lo
que definirá un rango de valores de radio dentro de los cuales se
identificarán las circunferencias.
Una vez conocido el radio y las coordenadas de los puntos que determinan
el perímetro de la circunferencia el proceso de aplicación de la
transformada de Hough para círculos es el siguiente:
o Se toma el radio conocido 𝑟, y como centro cada punto (𝑥, 𝑦) y se
procede a graficar las circunferencias que cada triada (𝑥, 𝑦, 𝑟)
definirán.
o Se almacena en una matriz de acumulación las coordenadas de los
puntos de intersección de las circunferencias y por cada círculo que
contenga dicha coordenada el contador se incrementará en 1.
o Se define el máximo local de la matriz de acumulación lo que nos
proporcionará el centro que determinará la circunferencia de radio
𝑟.
Ejemplo
Considere los puntos 𝑝1, 𝑝2, 𝑝3 cada punto será el centro de las circunferencias
𝐶1, 𝐶2, 𝐶3 respectivamente (figura 2-10).
Figura 2-10. Izq. Puntos en espacio geométrico Der. Puntos en espacio Hough (Rhody, 2005)
𝒑𝟏
𝒑𝟐
𝒑𝟑
𝑪𝟏
𝑪𝟑
𝑪𝟐
𝑰𝟏
𝑰𝟑
𝑰𝟐 𝑰𝟒
𝐶
17
Intersección de coordenadas (𝒙, 𝒚) Contador
𝐼1 2
𝐼2 2
𝐼3 2
𝐼4 3
Representación de la Matriz de Acumulación.
En este ejemplo las coordenadas de la intersección 𝐼4 determinarán el centro de
la circunferencia 𝐶 de radio 𝑟.
d) Identificación de objetos: En este paso lo que se hace es elaborar un sistema
que permita la toma de decisiones, en el caso de este proyecto el sistema recibirá
una imagen previamente procesada, para posteriormente analizar las
características obtenidas, dichas características se basaron en contabilizar el
número de vértices que tenían los polígonos encontrados en la imagen, se
descartaron los polígonos con un número de vértices menor y mayor a 4 con lo
que se logró la identificación de rectángulos dentro de la imagen. Para la
identificación de circunferencias una vez procesada la imagen se utilizó la función
cv2.HoughCircles proporcionada por la librería OpenCV (Apartado 3.2.1), dicha
función nos retorna como resultado una estructura que contiene triadas (𝑥, 𝑦, 𝑟)
que representan las coordenadas de centro y radio de cada circunferencia
reconocida en la imagen.
2.3 Clusterización: Consiste en dividir un conjunto de datos en clusters, en este
caso el conjunto de datos serán los píxeles que conforman la imagen y se dividirán
de acuerdo a la intensidad. Este proceso se realizará con el objetivo de encontrar
los umbrales óptimos para la implementación del filtro Canny. Para el proceso de
clusterización se estudiaron los siguientes métodos.
a) Método de Otsu16: Esta técnica es utilizada para la determinación automática
del umbral de segmentación, utiliza la varianza como medida de la dispersión de
los niveles de gris para determinar un único umbral adecuado.
El proceso que este método implementa se describe a continuación:
16 (Araújo, 2010)
18
1) Se toma en cuenta una imagen que contiene 𝑁 píxeles donde la intensidad
de los píxeles se encuentra entre [1…𝐿].
2) Cálculo de la probabilidad de ocurrencia del nivel de gris 𝑖
𝑝𝑖 =𝑓𝑖𝑁
Donde:
𝑓𝑖: Número de píxeles con nivel de intensidad 𝑖.
𝑁: Número de píxeles en la imagen.
3) Cálculo de sumas acumulativas, para ello se divide el conjunto de píxeles
en dos clases así:
Si fijásemos un valor de umbral 𝑡 dividiríamos el conjunto de píxeles de la
siguiente manera:
𝐶1: [1,… , 𝑡]
𝐶2: [(𝑡 + 1),… , 𝐿]
Para lo cual la sumatoria de probabilidades sería:
𝜔1(𝑡) = ∑𝑝𝑖
𝑡
𝑖=1
𝜔2(𝑡) = ∑ 𝑝𝑖
𝐿
𝑖=𝑡+1
Donde
𝑝𝑖: Probabilidad de ocurrencia del nivel de gris 𝑖
4) Cálculo de la media
𝜇1 = ∑𝑖. 𝑝𝑖
𝜔1(𝑡)
𝑡
𝑖=1
𝜇2 = ∑𝑖. 𝑝𝑖
𝜔2(𝑡)
𝐿
𝑖=𝑡+1
Donde
𝑝𝑖: Probabilidad de ocurrencia del nivel de gris 𝑖
5) Cálculo de varianza entre clases
𝜎𝐵2 = 𝜔1(𝜇1 − 𝜇𝑇)2 + 𝜔2(𝜇2 − 𝜇𝑇)2
Donde:
𝜇𝑇 = 𝜔1𝜇1 + 𝜔2𝜇2
6) El umbral óptimo 𝑡 es definido de tal manera que maximice la varianza 𝜎𝐵2
19
b) Algoritmo K-Means17: Es un algoritmo de aprendizaje no supervisado que
permite la clasificación automática de datos, el procedimiento que realiza K-Means
consiste en dividir en 𝑘 grupos un determinado conjunto de datos en donde para
cada grupo existirá un centroide que lo determina.
Descripción del algoritmo K-Means.
1. Del grupo de datos se eligen 𝑘 centroides iniciales usualmente se hace de
manera aleatoria.
2. Se asigna cada dato al cluster asociado al centroide más cercano.
3. Se recalcula el centroide correspondiente a cada cluster calculando el
promedio de cada uno de los valores que pertenecen al mismo. Se repiten
los pasos 2 y 3 hasta que ya no haya cambios en los clusters o éstos sean
pequeños, una vez logrado esto se asigna el centroide como fijo.
4. Se hace una última pasada asignando cada dato al centroide fijo más
cercano. (Véase figura 2-11).
Figura 2-11. Pasos del Algoritmo K-Means (Wikipedia, 2016)
Aplicación del resultado de K-Means para la automatización de los umbrales
canny en imágenes.
1. Dividir los píxeles en tres grupos o clases implementando K-Means.
2. Ordenar en forma ascendente los grupos.
17 (Métodos no Jerárquicos de Análisis Clusters)
20
3. Encontrar el máximo del grupo 1 y promediarlo con el mínimo del grupo 2
para obtener el primer umbral.
4. Para conseguir el segundo umbral se promedia el máximo del segundo
grupo con el mínimo del grupo 3.
21
3. METODOLOGÍA
3.1 Metodología del Proyecto.
Para el proceso de desarrollo de la aplicación se ha tomado como base la
metodología UWE (UML-Based Web Engineering), dicha metodología consta de
distintas fases, pero de acuerdo a las necesidades del proyecto se han aplicado
las siguientes:
Análisis y especificación de requerimientos
Diseño del sistema
Codificación del Software
A continuación se explica la ejecución de cada fase.
3.2 Análisis y especificación de requerimientos.
El presente proyecto tiene como fin el desarrollo de una aplicación basada en el
reconocimiento automático de patrones en imágenes, por lo tanto, se ha estudiado
los conceptos más importantes en cuanto a procesamiento de imágenes y ya que
ésta será aplicada a la educación se ha diseñado una interfaz amigable con el
usuario y de fácil manejo. La aplicación cumplirá con las siguientes
especificaciones:
Permitirá subir imágenes o tomar fotografías en formato png o jpg.
Procesará la imagen para su mejora (eliminación de ruido), permitiendo así
el reconocimiento de patrones.
Identificará dos tipos de figuras (círculos y rectángulos).
Contará con una paleta de colores que permitirá la interacción usuario-
aplicación.
Permitirá al usuario identificar las formas encontradas en la imagen
mediante la interacción con botones de identificación.
Las figuras se animarán para dar un mayor énfasis a las formas
identificadas.
De acuerdo a las especificaciones de la aplicación se analizaron las tecnologías
aplicables al desarrollo de este proyecto, a continuación se detalla la selección de
tecnologías y en qué fase del desarrollo fueron empleadas.
22
3.2.1 Selección de tecnologías
De acuerdo a los requerimientos de la aplicación, se dividió el desarrollo de la
misma en dos fases y en cada una de ellas se hizo uso de distintas tecnologías.
a) Selección de tecnologías para el desarrollo de la librería.
Para el desarrollo de esta fase nos enfocaremos en el lenguaje de programación
Python (versión 2.7.10) junto con la librería OpenCV (versión 3.0.0), a
continuación se argumenta la elección realizada con una breve explicación y
detalle de características de cada uno.
Python18: Es un lenguaje de programación creado por Guido van Rossum
a principios de los 90. Python permite desarrollar todo tipo de programas
desde aplicaciones Windows hasta servidores de red o incluso páginas
web. Entre sus principales características encontramos que es un:
- Lenguaje de Alto nivel: Un lenguaje de alto nivel permite al
programador utilizar una sintaxis sencilla ya que son más cercanos
al lenguaje natural.
- Lenguaje interpretado: Un lenguaje interpretado es aquel en el
que cada una de sus instrucciones son traducidas en tiempo real
por un “intérprete” al lenguaje de máquina, este proceso se repite
cada vez que se ejecuta el programa.
- Lenguaje Multiplataforma: El intérprete de Python puede ser
utilizado en diferentes plataformas y sistemas operativos como por
ejemplo Windows, Mac OS X y Linux.
- Lenguaje Orientado a Objetos: Este tipo de lenguaje permite
crear objetos con propiedades (atributos) que los diferencia de
otros objetos pertenecientes a otra clase, esta organización permite
que el código sea más fácil de entender y reutilizar.
Opencv19: Es una librería de código abierto, permite utilizar y modificar sus
algoritmos, proporciona funciones para el procesamiento de imágenes y
para visión computacional, Opencv es compatible con Linux, Windows y
MacOSx. Opencv tiene una estructura modular, los módulos principales
son:
18 (cuatroríos TECNOLOGÍAS, 2014) 19 (Garcia, 2013)
23
- core: Incluye las estructuras de datos básicas y las funciones
básicas de procesamiento de imágenes.
- highhui: Provee la capacidad de captura de vídeos e imágenes,
así como la capacidad de captura de eventos.
- Imgproc: Contiene algoritmos para el procesamiento de imágenes
como filtrado y transformación de imágenes.
- video Dispone de algoritmos para el seguimiento de objetos.
- Objdetect: Incluye algoritmos de detección y reconocimiento de
objetos para objetos estándar.
En el presente proyecto se hace uso de distintas funciones proporcionadas
por OpenCV, siendo las principales las siguientes:
cv2.HoughLinesP20: Encuentra segmentos de línea en imágenes
binarias usando la transformada probabilística de Hough. Los
parámetros que recibe esta función en Python son los siguientes:
o image: Imagen binaria.
o rho: Resolución en píxeles de la distancia del vector que va
desde el origen hasta la línea.
o theta: Resolución del ángulo en radianes.
o threshold: Número de píxeles seguidos por los que debe
pasar una línea para ser considerada como tal.
o Lines: Vector de salida que contiene las coordenadas que
definen las líneas, cada línea está definida por un vector de
cuatro elementos (𝑿𝟏 , 𝒀𝟐, 𝑿𝟑 , 𝒀𝟒 ).
o minLineLength: Mínima longitud de la línea, segmentos de
línea con longitud menor a la establecida no serán tomados en
cuenta.
o maxLineGap: Máxima distancia permitida entre puntos de la
misma línea para vincularlos. Si la distancia entre los puntos de
la misma línea es mayor a lo establecido no se vincularán los
puntos por lo que se considerarán dos segmentos de línea
diferentes.
24
cv2.HoughCircles20: Encuentra círculos en una imagen en escala
de grises usando la transformada de Hough. La función recibe los
siguientes parámetros en Python:
o image: Imagen en escala de grises.
o method: Método de detección usado generalmente se utiliza
el método CV_HOUGH_GRADIENT ya que es el único método
disponible actualmente en OpenCV.
o dp: Resolución de la matriz de acumulación, si dp=1 la matriz
tiene la misma resolución que la imagen de entrada (image).
o minDist: Mínima distancia entre centros de los círculos.
o circles: Vector de salida que contiene las coordenadas de
centro y el radio que define una circunferencia, cada
circunferencia está definida por un vector de tres elementos
(𝑥, 𝑦 , 𝑟𝑎𝑑𝑖𝑜).
o param1: Umbral mayor de los dos umbrales fijados en Canny.
o param2: Número de píxeles seguidos por los que debe pasar
un circulo para ser considerado como tal.
o minRadius: Radio mínimo que tendrán las circunferencias a
encontrarse.
o maxRadius: Radio máximo que tendrán las circunferencias a
encontrarse.
b) Selección de tecnologías para el desarrollo de la aplicación cliente.
En esta etapa haremos énfasis en las tecnologías HTML5, JavaScript y CSS que
nos permitieron el desarrollo de la aplicación cliente, además nos enfocaremos en
el framework Apache Cordova (versión 2.0)21 que permitió embeber la aplicación
web en una aplicación móvil y en el microframework Flask (versión 0.11.1) que
permitió el desarrollo del servidor de aplicación.
HTML5 (Lenguaje de Marcado de Hipertexto):22 Es la última versión de
HTML, contiene una serie de nuevos atributos y elementos lo que permite
a los sitios web ser más diversos y de gran alcance. A continuación se
detallan algunas de las mejoras.
20 (OpenCV, 2014) 21 (APACHE SOFTWARE FOUNDATION, 2015) 22 (Mozilla Developer Network, 2016)
25
- Sin conexión y almacenamiento: Permite almacenar datos
localmente en el lado del cliente y operar sin conexión de manera
más eficiente.
- Rendimiento e Integración: Brinda una mayor optimización de la
velocidad (mejor uso del hardware).
- Video: Admite formatos como mp4, webm y ogg lo que permite que
el navegador seleccione el formato que sea compatible con su
sistema de reproducción.
- Audio: Permite al usuario manejar las características de play y
pause mediante la implementación de un elemento gráfico sin
necesidad de plugins como el de Flash, además admite distintos
formatos como ogg, AAC, Speex, MP3, etc.
- Canvas: Facilita la representación de imágenes y de variedad de
gráficas (figuras geométricas, texto, paths), además permite la
animación e interactividad mediante programación en JavaScript ya
que responde a eventos (mouse, teclado, touch, etc).
JavaScript:23 Es un lenguaje de programación orientado a objetos, que se
utiliza en páginas web o aplicaciones de servidor. JavaScript permite la
utilización de sentencias como if, o bucles como for, while, etc. Las
funciones básicas de este lenguaje son soportadas en la mayoría de
navegadores, a continuación se listan algunas de sus características.
- Es dinámico responde a eventos de hardware (teclado, mouse,
etc.) en tiempo real.
- El código JavaScript se ejecuta en el cliente por lo que el servidor
no es solicitado más de lo debido. Por ejemplo, las extensiones del
lado del cliente permiten que una aplicación coloque elementos en
un formulario HTML y responda a eventos del usuario, tales como
ingreso de datos al formulario y navegación de páginas y por otro
lado las extensiones del lado del servidor permiten que una
aplicación se comunique con otra solo cuando esta sea invocada.
(Mozilla Developer Network, 2015)
- Disponibilidad de objetos limitada, lo que hace que procesos
sencillos requieran scripts complejos.
23 (Mozilla Developer Network, 2015)
26
CSS24: Es un lenguaje que permite dar estilo al documento HTML que se
desarrolla, permite separar la estructura del documento de su presentación
lo que facilita el manejo del diseño para varias web al mismo tiempo. En
su versión 3 CSS posee nuevas características que le otorgan diferentes
capacidades, para una breve descripción se detallarán tres de ellos.
- Media Queries25: Permiten adaptar el contenido a distintas
resoluciones de pantalla, es un principio básico de la tecnología
Responsive Design.
- Selectors Level 326: Son reglas condicionales que permiten aplicar
hojas de estilos a elementos HTML. Existen diferentes tipos de
selectores entre ellos tenemos:
o Selector Universal: Se utiliza para seleccionar todos los
elementos de la página, este selector se indica mediante un
asterisco (*).
*{ estilo }
o Selector de Tipo o Etiqueta: Selecciona los elementos de la
página cuya etiqueta coincide con el valor del selector, para
implementar este selector solo se indica la etiqueta HTML
sin los caracteres (<>). Por ejemplo para la etiqueta
<p>……</p> el estilo CSS sería definido así:
p { estilo }
o Selector descendente: Selecciona los elementos que se
encuentra dentro de otros elementos, es decir cuando un
elemento se encuentra entre las etiquetas de apertura y
cierre de otro elemento. Por ejemplo si en HTML tenemos
el siguiente código:
<p><span>…………</span></p>
24 (w3schools, n.d.) 25 (MOZILLA DEVELOPER NETWORK, 2016) 26 (LIBROSWEB, 2015)
27
El estilo CSS para la etiqueta <span> irá definido así:
p span{ estilo }
o Selector de Clase: Consiste en utilizar el atributo class de
HTML sobre un elemento para indicar directamente la regla
CSS que se debe aplicar. La sintaxis sería la siguiente:
<p class=”nombre_clase”>…</p>
Y la definición del estilo asociado a la clase iría así:
.nombre_clase{estilo}
o Selectores de ID: Permite seleccionar un elemento de una
página mediante su atributo id. Para la implementación en
CSS se utiliza el símbolo almohadilla (#) antes del id así:
#nombre_id{estilo}
- Color: Permite la implementación de propiedades de color como la
opacidad (opacity) ya que soporta el canal alpha (rgba).
Seguidamente se presenta un esquema de la integración de las tecnologías
descritas para el desarrollo de la interfaz cliente de este proyecto (figura 3-1).
28
Figura 3-1. Esquema de Integración de Tecnologías
A continuación se presenta la descripción de Apache Cordova que es la tecnología
que permitió el desarrollo de la aplicación móvil, proporcionando así una mayor
interactividad con el usuario al permitir la obtención de imágenes fotograficamente.
Apache Cordova27: Es un framework que permite la creación de
aplicaciones orientadas a dispositivos móviles utilizando herramientas web
como HTML5, CSS3 y JavaScript. Cordova proporciona además una serie
de API’s (Application Programming Interface) que permiten la
comunicación entre la interfaz web y las distintas funciones nativas de cada
dispositivo. Gracias a las herramientas de este framework se pueden
desarrollar aplicaciones móviles para las siguientes plataformas:
- Android.
- iOS.
- LGwebOS.
- FireOS.
Las aplicaciones de Apache Cordova se basan en un común config.xml
que es el archivo que proporciona información sobre la aplicación y
especifica los parámetros que afectan el comportamiento de la misma, por
27 (APACHE SOFTWARE FOUNDATION, 2015)
•Estructura de la página de la aplicación.
•Programación de la página de la aplicación, script para conexión
con el servidor envío y recepción de datos.
•Diseño de la página de la aplicación.
29
ejemplo cuando responde a cambios de orientación del dispositivo.
Además incluye un archivo cordova.js que envuelve cada plugin
Cordova dentro de su propio módulo.
Apache Cordova permite utilizar dos flujos de trabajo para la creación de
aplicaciones móviles, cada uno de ellos ofrece varias ventajas.
- Flujo de trabajo Multiplataforma (CLI): Este flujo de trabajo se
centra en CLI que es una herramienta de alto nivel que permite
desarrollar proyectos para varias plataformas a la vez, CLI copia un
conjunto común de recursos web para cada plataforma móvil, lo
que no hace necesario cambios de configuración para cada
plataforma.
- Flujo de trabajo centrada en Plataforma: Este flujo de trabajo es
ideal para desarrollar una aplicación orientada a una sola
plataforma, permite un mayor acceso a opciones de desarrollo
proporcionadas por cada SDK, es decir permite modificaciones de
la aplicación a bajo nivel.
En ambos casos Apache Cordova permite la depuración o prueba de la
aplicación tanto en un emulador (dispositivo virtual), como en un dispositivo
móvil real (conexión USB), adicionalmente para acceder a la consola de
depuración de la aplicación podemos ingresar en nuestro navegador a
chrome://inspect, esto nos permitirá visualizar en tiempo real la
ejecución de la aplicación.
A continuación se presenta la descripción de Flask, que es la tecnología que
permitió incrustar en un servidor la librería Python desarrollada.
Flask28: Es un microframework desarrollado en lenguaje Python que
permite el desarrollo de aplicaciones web de una manera sencilla. Sus
características más importantes son:
- Tiene embebido su propio servidor web, levanta automáticamente
el puerto 5000 para mostrar el contenido web.
- Contiene un depurador que permite probar, limpiar y monitorizar la
ejecución del programa asociando el código fuente con las
instrucciones ejecutadas por el programa.
28 (Rodríguez, 2015)
30
- Es de fácil desarrollo ya que no divide las tareas web por módulos
lo que facilita el desarrollo de las aplicaciones sencillas, permite la
creación de rutas a las cuales se les asigna un método que
responde por ella.
Para el desarrollo de este proyecto, Flask se utilizó en la creación del servidor web
que contiene la librería para la detección automática de patrones, dicho servidor
recibe la imagen enviada por el usuario a través de la aplicación, la procesa y de
vuelta envía una estructura de puntos con los que se grafican las figuras
geométricas correspondientes.
Para el envío de la imagen desde la aplicación se utilizó codificación base64, la
cual se explica a continuación.
Base6429: Es un sistema de codificación que se basa en el uso de caracteres
ASCII, permite el envío de archivos, imágenes, credenciales, etc. Transporta los
datos de tal forma que preserva su integridad para que al momento de
decodificarlos se obtengan los bytes originales.
Para explicar el proceso de codificación lo haremos mediante un ejemplo, para
ello codificaremos la palabra Hola.
1.- Se convierte la cadena a código Ascii
Letra Valor Ascii
H 72
o 111
l 108
a 97
29 (González, 2014)
31
2.- Una vez obtenidos los valores Ascii se los convierte a valor binario.
Valor Ascii Valor Binario
72 01001000
111 01101111
108 01101100
97 01100001
3.- El valor binario debe ser de 8 dígitos, si no es así se debe añadir tantos
0’s como sea necesario. Luego concatenaremos los valores binarios.
01001000011011110110110001100001
4.- Dividiremos la cadena en grupos de 6 bits, si un grupo queda
incompleto se debe añadir tantos 0’s como se necesite para completarlo
010010 000110 111101 101100 011000 010000
5.- Los valores binarios obtenidos se transformarán a valores decimales
Valor Binario Valor Decimal
010010 18
000110 6
111101 61
101100 44
011000 24
010000 16
6.- Se toma el valor decimal y se procede a buscar su equivalente en
base64 de acuerdo a los datos de la figura 3-2.
32
Figura 3-2. Tabla de conversión Decimal a Base64 (Cruz, 2012)
El resultado será el siguiente:
Valor Decimal Valor Base64
18 S
6 G
61 9
44 S
24 Y
16 Q
3.3 Diseño del sistema.
3.3.1 Diseño de métodos para la detección de patrones.
La aplicación permite la detección de dos tipos de figuras (rectángulos y círculos),
se ha probado la detección de otros tipos de cuadriláteros pero esto aumentaba
considerablemente el problema de detección de figuras "erróneas" (figura 3-6).
Además buscamos simplicidad por tratarse de una aplicación educativa orientada
a los más pequeños. Por estos motivos se ha decidido que la aplicación finalmente
sólo detecte rectángulos y círculos; de acuerdo a ello se han establecido los
siguientes métodos.
a) Detección de Rectángulos: Para la detección de rectángulos se desarrollaron
los siguientes métodos:
Método1: Este método permite la detección de rectángulos de dos formas
distintas de acuerdo al método empleado para la automatización del
umbral Canny, este método pueden ser Clusterización (Apartado 2.3) o
Umbral estadístico (Apartado 3.4.1). De esto obtenemos:
33
i. Método1 Estadístico.
ii. Método1 Clusterización.
Para ambos casos el procesamiento para la imagen utilizado se muestra
en la figura 3-3.
Método2 o Método Alternativo: Para la detección de rectángulos en el
segundo método desarrollado se empleó un procesamiento de imagen
distinto en donde no interviene el proceso de automatización del umbral
para Canny, a continuación se presenta la figura 3-4 del procesamiento
implementado en el Método Alternativo.
b) Detección de Circunferencias: Para la detección de circunferencias se tiene
un solo método que contempla dos alternativas de acuerdo al método de
Imagen Original
Automatización del Umbral mediante
Umbral Estadístico o Clusterización
Aplicación del Filtro Canny
Implementación de la Transformada
de Hough
Detección de Contornos
Detección de Cuadrados
Figura 3-3 Método1. Procesamiento de Imagen
Figura 3-4. Método2. Procesamiento de Imagen
ImagenOriginalTransformacióna Escala de Grises
Aplicación del Filtro Gaussiano
Binarización de la Imagen
Detección de Contornos
Detección de Cuadrados
34
automatización del umbral Canny empleado, la automatización del umbral es
utilizada para la aplicación de la función cv2.HougCircles (Apartado 3.2.1) que
requiere como parámetro el umbral mayor de los dos umbrales fijados en Canny.
De esta manera se tiene:
Método1 Estadístico.
Método1 Clusterización.
El procesamiento de imágenes para las dos alternativas de este método se
muestra en la figura 3-5.
Figura 3-5. Procesamiento de Imágenes para la Detección de Circunferencias
Ejemplo de detección de figuras
Imagen Original Detección cuadriláteros y
círculos
Detección de rectángulos y
círculos
Imagen OriginalTransformación
a Escala de Grises
Implementación de la
Transformada de Hough para
Círculos
Obtención de coordenadas de
cada círculo detectados.
35
Figura 3-6. Ejemplo detección de cuadriláteros, rectángulos y círculos
3.3.2 Diseño de la interfaz cliente.
Aquí se establece la apariencia que tendrá la aplicación, qué objetos visualizará
el usuario en la interfaz, así como la funcionalidad que posee la aplicación. La
aplicación consta de cuatro secciones y se presenta en dos versiones, web y
móvil. A continuación se muestra la visualización de pantalla de cada sección en
cada una de sus versiones.
a) Sección Inicio: En esta sección se presenta una breve descripción de la
aplicación junto con las instrucciones para usar la misma, además en esta sección
está el botón Menú que permitirá dirigirse a las demás secciones de la aplicación.
Véase desde la figura 3-6 hasta la figura 3-9.
Figura 3-7. Visualización de Pantalla: Sección Inicio.
36
Figura 3-8. Visualización Móvil: Sección Inicio.
Figura 3-9. Visualización de Pantalla: Sección Inicio-Menú
37
Figura 3-10. Visualización Móvil: Sección Inicio-Menú.
b) Sección Información: Aquí se detalla brevemente el desarrollo de este
proyecto, las tecnologías y los procesos utilizados. Véase figura 3-10 y
figura 3-11.
Figura 3-11. Visualización de Pantalla: Sección Información.
38
Figura 3-12. Visualización Móvil: Sección Información.
c) Sección Aplicación: Esta sección permite hacer uso de la aplicación, consta
de una paleta de colores en donde se elegirán dos colores que serán utilizados
para dibujar las figuras detectadas, además permite subir la imagen para la
detección de figuras y sobre la cual se dibujarán las mismas, finalmente consta de
dos botones que permiten que el usuario identifique qué figuras fueron dibujadas.
Véase figura 3-12 y figura 3-13.
Figura 3-13. Visualización de Pantalla: Sección Aplicación.
39
Figura 3-14. Visualización Móvil: Sección Aplicación.
d) Sección Documentación: Aquí se detallan links en donde se puede acceder
a información completa sobre el desarrollo del proyecto. Véase figura 3-14 y figura
3-15.
Figura 3-15. Visualización de Pantalla: Sección Documentación.
40
Figura 3-16. Visualización Móvil: Sección Documentación.
3.4 Codificación del software.
3.4.1 Codificación de la librería para la detección de patrones.
Para el desarrollo de la librería se hizo uso del IDE JetBrains PyCharm Community
Edition30 el cual permitió la programación de la librería con lenguaje Python junto
con la librería OpenCV.
La librería para el reconocimiento automático de patrones contiene varios métodos
a continuación se detallan los principales.
a) Método umbral_est: Este método recibe el siguiente parámetro:
- img: imagen original.
El proceso para la automatización de umbrales que este método realiza es el
siguiente31:
- Calcula la mediana de la intensidad de los píxeles de la imagen.
- Determina dos umbrales 𝑡𝑚𝑖𝑛, 𝑡𝑚𝑎𝑥 cada uno estará determinado por +/- un
valor de porcentaje determinado. Por defecto se utilizará un porcentaje del
33%. (Véase figura 3-16).
30 (Jet Brains, n.d.) 31 (Rosebrock, 2015)
41
Figura 3-17. Método Estadístico: Proceso Automatización del Umbral.
Como resultado este método retorna dos valores t_min, t_max que
representan el umbral mínimo y máximo usados por el filtro de Canny.
b) Método lineas_hough: Los argumentos que recibe este método son:
- img_canny: Este parámetro es la imagen original a la que se le ha
aplicado el filtro canny para la detección de bordes.
- imagenoriginal: Es la imagen original enviada por el usuario, nos
permite crear una imagen binaria de iguales dimensiones.
- promedio: Es el promedio entre el alto y ancho de la imagen original, este
argumento se utiliza para automatizar los parámetros de la función
cv2.HoughLinesP.
En este método se aplica la función cv2.HoughLinesP proporcionada por la
librería Opencv, esta función permite identificar las líneas dentro de la imagen
img_canny, el método lineas_hough devuelve una imagen binaria que
contiene solamente las líneas identificadas.
c) Método detecta_rectangulo: Este método recibe dos argumentos:
- img_contours: hace referencia a la imagen resultante en el método
lineas_hough.
- imagoriginal: hace referencia a la imagen original la cual es enviada
por el usuario.
En este método se procesa la imagen de contornos img_contours para obtener
una imagen binarizada, a esta imagen se le aplica la función de Opencv
cv2.findcontours que permite encontrar los contornos en una imagen binaria,
seguido se aplica la función cv2.approxPolyDP que permite reducir el número
-33% +33%
t_min t_max
42
de puntos que conforman los contornos, quedándose solamente con puntos
(vértices) que formen un polígono, a continuación se realiza una evaluación para
determinar el número de vértices y acorde a ello determinar si la figura es o no un
rectángulo. Este método devuelve un arreglo en el que se encuentran
almacenados los vértices de los rectángulos detectados.
d) Método detecta_circulos: En este método se detectan los círculos
presentes en la imagen, para ello los argumentos que recibe son:
- original: Hace referencia a la imagen original que será enviada por el
usuario.
- umbral: Es el valor más alto de los dos umbrales definidos en el método
canny.
- prome: Es el promedio de las dimensiones de la imagen original (ancho y
alto) este argumento se utiliza para automatizar los parámetros de la
función cv2.HougCircles.
El proceso que este método realiza es el siguiente: a la imagen original la
transforma en una imagen a escala de grises, seguidamente se le aplica la función
cv2.HougCircles la que nos permitirá la identificación de círculos para
finalmente dibujarlos sobre la imagen original. El método detecta_circulos
retorna una estructura de datos que contiene el centro y radio de los círculos
detectados.
A continuación se describe un método tentativo para la detección de rectángulos,
el cual emplea un procesamiento de imagen más sencillo, por ende la detección
se puede realizar solo en imágenes simples, dicho método es un antecedente que
permitió el desarrollo del método detecta_rectangulo.
e) Método metodo_alternativo: El proceso que este método realiza nos
proporciona otra opción para la detección de rectángulos, para ello este método
recibe dos argumentos que son:
- original: Es la imagen que el usuario envía.
- Umbral: Es el valor más alto de los dos umbrales definidos en el método
canny.
43
Este método lo que hace es tomar la imagen original aplicarle un filtro gaussiano
y seguido binarizarla; a continuación se utiliza la función cv2.findContours que
nos permite encontrar los contornos de la imagen binarizada, luego se aplica la
función cv2.approxPolyDP que permite reducir el número de puntos que
conforman los contornos, quedándose solamente con puntos que formen un
polígono, finalmente se realiza una evaluación para determinar el número de
puntos y acorde a ello determinar si es o no un rectángulo. Para la detección de
círculos se utiliza el método detecta_circulos.
Como resultado este método retorna dos estructuras una con los vértices de los
rectángulos encontrados y otra con el centro y el radio de cada uno de los círculos
detectados.
3.4.2 Codificación de la aplicación cliente.
La aplicación se desarrolló mediante la implementación de las tecnologías
descritas en el apartado 3.2.1, a continuación se detalla el método principal
proporcionado por la librería jQuery (JavaScript) que es el que permite el envío de
la imagen así como la recepción de las estructuras con los vértices de las figuras.
a) Función $.ajax: Esta función nos permite enviar la imagen subida por el
usuario hacia el servidor para ser procesada, para ello recibe tres parámetros
importantes:
- url: Es la dirección del servidor a la que se va a enviar la imagen.
- data: Es la imagen subida por el usuario, codificada en base64 para ser
enviada.
- datatype: Es el tipo de dato con el que se define la imagen, permitirá al
servidor identificarla.
Una vez enviada la imagen hacia el servidor, entra en el proceso el método
imagen_procesar, a continuación se explica el funcionamiento de dicho
método.
b) Método imagen_procesar: En este método el proceso que realiza es el
siguiente:
44
Recibe los datos enviados desde JavaScript, la imagen codificada en base64 y
de tipo json es cargada mediante la función json.loads.
Se decodifica la imagen mediante la función base64.decodestring, y se la
almacena en el servidor.
Finalmente se hace uso de la librería para procesar la imagen y obtener las
estructuras con los vértices de las figuras, las estructuras son enviadas hacia
JavaScript mediante json.dumps.
Una vez enviados las estructuras de vértices entra en trabajo la función success:
function(data), en donde data representa los datos que se envían desde el
servidor en este caso las estructuras de vértices, este proceso se ejecutará en el
lado del cliente.
c) success:function(data): Esta función lo que nos permite es dibujar las
figuras geométricas de acuerdo a los vértices recibidos. En esta función se
implementan métodos desarrollados en JavaScript y son los siguientes:
- dibuja_circulo: Este método recibe tres parámetros:
o x: coordenada x del centro de la circunferencia.
o y: coordenada y del centro de la circunferencia.
o r: radio de la circunferencia.
Los parámetros anteriores serán tomados de la estructura de vértices
recibida, y mediante la función context.arc se procederá a dibujar los
círculos que se determinen.
- dibuja_rectángulo: Este método recibe 4 argumentos que son:
o x: coordenada x de la esquina superior izquierda del rectángulo.
o y: coordenada y de la esquina superior izquierda del rectángulo.
o w: ancho del rectángulo.
o h: alto del rectángulo.
Los cuatro parámetros definidos se tomarán de la estructura de vértices
enviada por el servidor y con la función context.rect se realizarán los
dibujos de los distintos rectángulos encontrados.
Para realizar los dibujos de las distintas figuras encontradas se utilizó el elemento
canvas de HTML5 y en el estilo CSS se utilizó la propiedad z-index lo que
45
permitió sobreponer el elemento canvas que contiene las figuras dibujadas sobre
la imagen original.
46
4. RESULTADOS
Para tomar la decisión de que método para la detección de patrones se debe
emplear en la aplicación desarrollada se ha realizado una evaluación experimental
con un banco de imágenes seleccionadas de distintos datasets obtenidos de la
web. Se han utilizado 37 imágenes que cumplen con el requisito mínimo de tener
un elemento de forma cuadrada o circular.
A continuación se presenta una muestra de las pruebas realizadas.
47
4.1 Pruebas con dataset de imágenes.
Imagen Original
Detección de Figuras
Método 1 Estadístico Método 1 Clusterización Método Alternativo (Sólo para
Rectángulos)
48
Figura 4-1. Prueba detección de figuras: rectángulos y círculos
49
Luego de realizar las pruebas con las imágenes obtenidas de los datasets se hizo
un estudio utilizando una fórmula que se considera la más pertinente para los fines
de este proyecto. La fórmula es la siguiente:
𝐹𝐷𝐶 − 𝐹𝐷𝐸
𝐹𝐼
Donde:
𝐹𝐷𝐶: Número de Figuras (círculos o rectángulos) detectadas Correctamente.
𝐹𝐷𝐸: Número de Figuras (círculos o rectángulos) detectadas Erróneas.
𝐹𝐼: Número de Figuras (círculos o rectángulos) en la imagen.
Una vez empleada esta fórmula sobre las 37 imágenes trabajando con los
diferentes métodos se han conseguido valores promedio que señalan la eficiencia
de detección de patrones de cada método. A continuación se presentan las tablas
de resultados.
50
4.2 Tablas de Resultados
DATOS MÉTODO 1 ESTADÍSTICO MÉTODO 1 KMEANS
No. IMAGEN CÍRCULOS EN LA
IMAGEN CÍRCULOS
DETECTADOS
CÍRCULOS DETECTADOS
ERRÓNEOS PUNTUACIÓN
CÍRCULOS DETECTADOS
CÍRCULOS DETECTADOS
ERRÓNEOS PUNTUACIÓN
1 IMG0 0 1 0 0,0 0 9 0,0
2 IMG1 0 2 0 0,0 2 7 0,0
3 IMG2 0 1 0 0,0 1 13 0,0
4 IMG3 0 2 6 0,0 2 8 0,0
5 IMG4 2 1 0 0,5 1 9 -4,0
6 IMG5 5 0 0 0,0 0 12 -2,4
7 IMG6 0 3 0 0,0 3 3 0,0
8 IMG7 0 1 0 0,0 1 9 0,0
9 IMG8 0 1 0 0,0 2 0 0,0
10 IMG9 0 1 6 0,0 0 11 0,0
11 IMG10 2 1 0 0,5 1 0 0,5
12 IMG11 2 1 2 -0,5 1 11 -5,0
13 IMG12 1 1 2 -1,0 1 5 -4,0
14 IMG13 1 0 0 0,0 0 5 -5,0
15 IMG14 3 0 0 0,0 0 13 -4,3
16 IMG15 0 2 0 0,0 1 9 0,0
17 IMG16 0 4 0 0,0 4 7 0,0
18 IMG17 5 2 0 0,4 0 6 -1,2
19 IMG18 2 1 0 0,5 1 0 0,5
20 IMG19 1 0 0 0,0 0 10 -10,0
51
21 IMG20 0 0 0 0,0 0 6 0,0
22 IMG21 1 0 0 0,0 0 2 -2,0
23 IMG22 2 0 0 0,0 0 0 0,0
24 IMG23 0 0 2 0,0 0 8 0,0
25 IMG24 0 2 0 0,0 1 9 0,0
26 IMG25 1 1 0 1,0 1 3 -2,0
27 IMG26 2 0 0 0,0 0 11 -5,5
28 IMG27 1 0 0 0,0 0 8 -8,0
29 IMG28 1 0 8 -8,0 0 4 -4,0
30 IMG29 2 0 1 -0,5 0 6 -3,0
31 IMG30 1 0 4 -4,0 0 1 -1,0
32 IMG31 7 0 6 -0,9 0 13 -1,9
33 IMG32 1 0 2 -2,0 0 11 -11,0
34 IMG33 2 0 0 0,0 0 11 -5,5
35 IMG34 2 0 0 0,0 0 0 0,0
36 IMG35 0 0 0 0,0 0 9 0,0
37 IMG36 2 0 6 -3,0 0 11 -5,5
38 IMG37 3 1 0 0,3 1 2 -0,3
PROMEDIO -0,44 -2,23
Tabla 4-1. Tabla de Resultados: Detección de Círculos
52
DATOS MÉTODO 1 ESTADÍSTICO MÉTODO 1 KMEANS MÉTODO ALTERNATIVO
No.
IMAGEN
RECTÁNGULOS EN LA IMAGEN
RECTÁNGULOS
DETECTADOS
RECTÁNGULOS
DETECTADOS ERRÓNEOS
PUNTUACIÓN
RECTÁNGULOS
DETECTADOS
RECTÁNGULOS
DETECTADOS ERRÓNEOS
PUNTUACIÓN
RECTÁNGULOS
DETECTADOS
RECTÁNGULOS
DETECTADOS ERRÓNEOS
PUNTUACIÓN
1 IMG0 0 0 0 0,0 0 0 0,0 0 1 0,0
2 IMG1 0 0 0 0,0 0 1 0,0 0 15 0,0
3 IMG2 0 0 0 0,0 0 1 0,0 0 15 0,0
4 IMG3 0 0 1 0,0 0 1 0,0 0 15 0,0
5 IMG4 2 0 0 0,0 0 0 0,0 0 3 -1,5
6 IMG5 5 1 0 0,2 0 1 -0,2 0 15 -3,0
7 IMG6 0 0 0 0,0 0 1 0,0 0 3 0,0
8 IMG7 0 0 3 0,0 0 1 0,0 0 15 0,0
9 IMG8 0 0 0 0,0 0 0 0,0 0 15 0,0
10 IMG9 0 0 0 0,0 0 0 0,0 0 15 0,0
11 IMG10 2 0 0 0,0 0 1 -0,5 0 10 -5,0
12 IMG11 2 0 1 -0,5 0 1 -0,5 0 15 -7,5
13 IMG12 1 0 0 0,0 0 0 0,0 0 15 -15,0
14 IMG13 1 1 1 0,0 0 0 0,0 0 15 -15,0
15 IMG14 3 1 1 0,0 0 0 0,0 0 30 -10,0
16 IMG15 0 0 0 0,0 0 1 0,0 0 19 0,0
17 IMG16 0 0 0 0,0 0 0 0,0 0 1 0,0
18 IMG17 5 0 0 0,0 0 0 0,0 0 6 -1,2
19 IMG18 2 0 5 -2,5 0 0 0,0 0 0 0,0
20 IMG19 1 0 2 -2,0 0 1 -1,0 0 1 -1,0
21 IMG20 0 1 0 0,0 0 0 0,0 0 2 0,0
22 IMG21 1 0 0 0,0 0 1 -1,0 0 4 -4,0
53
23 IMG22 2 0 2 -1,0 0 0 0,0 0 2 -1,0
24 IMG23 0 0 0 0,0 0 0 0,0 0 16 0,0
25 IMG24 0 0 0 0,0 0 1 0,0 0 18 0,0
26 IMG25 1 0 0 0,0 0 1 -1,0 0 25 -25,0
27 IMG26 2 0 3 -1,5 0 0 0,0 1 0 0,5
28 IMG27 1 0 0 0,0 0 1 -1,0 0 18 -18,0
29 IMG28 1 0 0 0,0 0 1 -1,0 0 10 -10,0
30 IMG29 2 0 0 0,0 0 1 -0,5 0 3 -1,5
31 IMG30 1 0 0 0,0 0 0 0,0 1 0 1,0
32 IMG31 7 0 0 0,0 0 0 0,0 0 15 -2,1
33 IMG32 1 0 0 0,0 0 0 0,0 0 20 -20,0
34 IMG33 2 0 0 0,0 0 0 0,0 0 1 -0,5
35 IMG34 2 1 0 0,5 0 0 0,0 0 15 -7,5
36 IMG35 0 0 0 0,0 0 0 0,0 0 30 0,0
37 IMG36 2 0 0 0,0 0 0 0,0 1 7 -3,0
38 IMG37 3 1 0 0,3 0 1 -0,3 0 3 -1,0
PROMEDIO -0,17 -0,19 -3,98
Tabla 4-2. Tabla de Resultados: Detección de Rectángulos
LEYENDA
15 VALORES SUPERIORES A 15
20 VALORES SUPERIORES A 20
30 VALORES SUPERIORES A 20
54
4.3 Análisis de resultados.
Después de realizar las distintas pruebas se obtuvo los valores promedio que
señalan la eficiencia de detección de patrones de cada método.
Figura Detectada Método Utilizado Promedio
Rectángulos
Método 1 Estadístico -0,17
Método 1 Clusterización -0,19
Método Alternativo -3,98
Círculos Método 1 Estadístico -0,44
Método 1 Clusterización -2,23
Tabla 4-3. Valores Promedio de cada método.
De acuerdo a los promedios obtenidos el Método 1 Estadístico es el método que
tiene los valores más altos tanto para la identificación de rectángulos como para
la de círculos, dicho valor señala la eficiencia de detección de patrones de éste
método para el conjunto de imágenes seleccionado, por ende es el método que
se ha utilizado en la aplicación desarrollada.
55
5. CONCLUSIONES
El conocimiento adquirido en el transcurso de la carrera de Ingeniería en
Computación Gráfica en cuanto a procesamiento de imágenes y
programación fue base para el inicio de esta investigación, facilitó el
entendimiento de los distintos conceptos y teorías adquiridas a lo largo del
desarrollo de este proyecto.
Las distintas tecnologías estudiadas y analizadas fueron completamente
aplicables en la detección automática de patrones geométricos básicos.
Estas tecnologías fuero Python, OpenCV, HTML5, CSS, JavaScript y
Flask.
Siendo una aplicación orientada a la educación la presentación visual
juega un papel muy importante ya que si no se tiene una aplicación de
diseño amigable y didáctico, está no influirá de manera positiva sobre el
usuario para lograr el objetivo deseado que es el aprendizaje.
Tanto la aplicación web como la aplicación móvil hacen uso de la librería
desarrollada en Python para el procesamiento de la imagen y la detección
automática de patrones en la misma; en ambos casos se hace uso del
Método Estadístico ya que de acuerdo a las pruebas realizadas es el
método con un mayor promedio en la detección correcta de figuras.
El conocimiento acerca de la comunicación cliente-servidor es importante
para el desarrollo de este tipo de aplicaciones, ya que es lo que permitirá
mostrar los resultados sin que el lado del cliente se vea sobrecargado de
procesos.
Mientras más elaborado sea el procesamiento de imágenes, mejor se
realizará la detección de patrones, ya que así se descartarán objetos,
fondos y ruido que dificultan la identificación correcta de patrones, para la
aplicación móvil el reconocimiento de patrones para imágenes obtenidas
fotográficamente debe ser mucho más estricto ya que influirán las
condiciones (luz, posición, resolución de la cámara, etc.) en que la captura
de la imagen se realice.
Los resultados obtenidos en la aplicación web y la aplicación móvil variarán
debido a la mejora de calidad de imágenes que el dispositivo móvil realiza
automáticamente.
Para la implementación del filtro Canny se debe tener muy claro el proceso
del algoritmo que este filtro internamente realiza, ya que una vez
56
comprendido esto se puede emprender una investigación sobre la
automatización de umbrales que este filtro requiere.
El método de clusterización para la automatización del umbral dio como
resultado valores demasiado bajos lo que perjudicó la detección de
patrones dando como consecuencia que éste sea un método no óptimo
para su implementación en la librería desarrollada en este proyecto.
Este proyecto servirá como fuente de consulta para la continuación o
mejora del mismo o para el inicio de proyectos similares.
Al finalizar el desarrollo de la aplicación y de acuerdo a los resultados
obtenidos se concluye que sí es posible que la aplicación web-móvil
basada en el reconocimiento automático de patrones facilite el aprendizaje
de geometría básica ya que ésta permite la identificación de figuras
geométricas básicas (rectángulos y círculos) a través de la interacción con
el usuario mediante representaciones visuales y sonoras. La aplicación
móvil ofrece un manejo didáctico lo que permitirá al usuario explorar en el
ambiente que lo rodea identificando las formas de los objetos con los que
cotidianamente se relaciona.
57
6. RECOMENDACIONES
Debido a que es el primer resultado de una ardua investigación, se tiene trabajo
por delante para mejorarlo y que pueda ser presentado al público, por ello se
recomienda tener en cuenta lo siguiente:
La mejora del procesamiento de imágenes es imprescindible para un mejor
resultado del reconocimiento de patrones.
La automatización del umbral para el filtro Canny se puede optimizar mediante la
mejora del método de clusterización, el método de umbral estadístico o mediante
la investigación de una nueva alternativa de automatización para umbrales Canny.
En la detección automática de patrones se puede obtener mejores resultados si
se mejora la automatización de parámetros para aplicar las funciones
cv2.HoughLinesP y cv2.HougCircles.
Para una mejor detección de rectángulos la longitud de los segmentos de líneas
devueltos por la función cv2.HoughLinesP debe ser extendida, para ello se
recomienda la mejora del proceso implementado.
Ya que en el presente proyecto se logró el reconocimiento de dos figuras (círculos
y rectángulos), se puede extender el reconocimiento de figuras mediante la
investigación de otras alternativas en cuanto al procesamiento de imágenes.
La presentación de la aplicación puede ser mejorada aplicando y desarrollando
librerías CSS con las cuales se podría agregar animaciones o crear un diseño más
personalizado.
58
Para hacer uso de la aplicación móvil se recomienda usar el dispositivo en modo
horizontal (landscape) ya que dependiendo de la resolución del dispositivo, la
interfaz se ajustará.
En la aplicación móvil la fotografía debe ser tomada de preferencia en un fondo
oscuro, el objeto debe sobresalir del fondo, la cámara debe estar en posición recta
captando correctamente la forma del objeto, no inclinar el dispositivo lo que
permitirá que la imagen se identifique claramente y facilite el procesamiento de la
imagen para lograr la identificación de patrones.
Para la aplicación web se recomienda el uso de la aplicación en el navegador
Chrome – Google, ya que ciertas funcionalidades CSS y jQuery solamente son
soportadas por este navegador
59
7. BIBLIOGRAFÍA
1. Aguilera, D. G. (s.f.). PROCESAMIENTO DE IMÁGENES. Recuperado el
24 de Abril de 2016, de http://ocw.usal.es/eduCommons/ensenanzas-
tecnicas/procesamiento-avanzado-de-imagenes-
digitales/contenidos/Tema2.pdf
2. Alarcón, J. M. (11 de Septiembre de 2014). campus MVP. Recuperado el
08 de Junio de 2016, de
http://www.campusmvp.es/recursos/post/PhoneGap-o-Apache-Cordova-
que-diferencia-hay.aspx
3. ALEGSA.com.ar. (s.f.). Obtenido de
http://www.alegsa.com.ar/Dic/lenguaje%20de%20programacion%20de%2
0alto%20nivel.php
4. Álvarez, D., Guevara, M., & Holguín, G. (Agosto de 2006).
PREPROCESAMIENTO DE IMÁGENES APLICADAS A MAMOGRAFÍAS
DIGITALES. Obtenido de
http://www.redalyc.org/articulo.oa?id=84911639002
5. Análisis de Herramientas y Tecnología. (s.f.). Recuperado el 25 de Abril de
2016, de
http://catarina.udlap.mx/u_dl_a/tales/documentos/lis/aldrette_m_r/capitulo
2.pdf
6. APACHE SOFTWARE FOUNDATION. (2015). Apache Cordova.
Recuperado el Junio de 2016, de https://cordova.apache.org/
7. Araújo, J. R. (2010). Scribd. Obtenido de
http://es.scribd.com/doc/45875911/Metodo-Otsu#scribd
8. Barros, A. (Diciembre de 2007). Boozox. Recuperado el 09 de Mayo de
2016, de http://boozox.net/php/desenfoque-gaussiano-como-funciona-
filtro-para-imaset/
9. Bazaga, A. R. (2015). Universidad de La Laguna. Obtenido de
http://osl.ull.es/software-libre/opencv-libreria-vision-computador/
10. Canny Edge Detection. (23 de Marzo de 2009). Obtenido de
http://www.cse.iitd.ernet.in/~pkalra/csl783/canny.pdf
11. Capítulo 2. Técnicas de procesamiento digital de imágenes y
reconocimiento de patrones. (s.f.). Obtenido de
60
http://catarina.udlap.mx/u_dl_a/tales/documentos/lis/nieto_b_d/capitulo2.p
df
12. Carpe Diem. (04 de Febrero de 2014). Carpe Diem. Recuperado el 04 de
Abril de 2016, de http://www.mclarenx.com/2014/02/04/validar-iban-en-
javascript/
13. Chapter 4: Image Filtering. (s.f.). Recuperado el 24 de Abril de 2016, de
http://www.cse.usf.edu/~r1k/MachineVisionBook/MachineVision.files/Mac
hineVision_Chapter4.pdf
14. Cortés Osorio, J. A., Muriel, A., & Mendoza Vargas, J. A. (Diciembre de
2011). Qualitative and quantitative Comparison of Basic histogram-based
global Thresholding. Obtenido de file:///C:/Users/David/Downloads/Dialnet-
ComparacionCualitativaYCuantitativaDeLasTecnicasBa-4322813.pdf
15. Cruz, V. (2012). Recuperado el 27 de Abril de 2016, de
http://vmcruz.tumblr.com/post/14586674674
16. cuatroríos TECNOLOGÍAS. (Mayo de 2014). Obtenido de
http://www.cuatrorios.org/index.php?option=com_content&view=article&id
=161:principales-caracteristicas-del-lenguaje-python&catid=39:blogsfeeds
17. educ@conTIC. (2010). educ@conTIC. Obtenido de El uso de las TIC en
las aulas: http://www.educacontic.es/blog/recursos-tic-para-educacion-
infantil
18. educarchile. (2013). educarchile. Obtenido de Artículo Educación
Parvularia y TICs:
http://www.educarchile.cl/ech/pro/app/detalle?ID=188299
19. Garcia, L. M. (09 de Octubre de 2013). Un poco de Java. Obtenido de
https://unpocodejava.wordpress.com/2013/10/09/que-es-opencv/
20. González, A. (30 de Mayo de 2014). Albertx blog. Recuperado el 27 de
Abril de 2016, de https://albertx.mx/blog/base64/
21. Graells, D. P. (02 de Enero de 2013). La Web 2.0 y sus aplicaciones
didácticas. Obtenido de http://www.peremarques.net/web20.htm
22. Herramientas 10. (s.f.). Herramientas 10.com. Recuperado el 04 de Abril
de 2016, de http://www.herramientas10.com/12-editores-html5-
desarrolladores_526.html
23. Herrick, J. (s.f.). Cómo evitar el ruido en tus fotos digitales. Recuperado el
21 de Abril de 2016, de http://es.wikihow.com/evitar-el-ruido-en-tus-fotos-
digitales
61
24. Jet Brains. (s.f.). Jet Brains. Recuperado el 26 de Abril de 2016, de
https://www.jetbrains.com/pycharm/
25. La REvista Informática.com. (2006). Obtenido de
http://www.larevistainformatica.com/lenguajes-programacion-orientada-
objetos.htm
26. La Serna Palomino, N., & Roman Concha, U. (s.f.). Técnicas de
Segmentación en Procesamiento Digital de Imágenes. Obtenido de
http://sisbib.unmsm.edu.pe/bibvirtual/publicaciones/risi/2009_n2/v6n2/a02
v6n2.pdf
27. Larequi, E. (27 de Diciembre de 2014). Propuesta TIC para el área de
Lengua. Obtenido de http://propuestastic.elarequi.com/propuestas-
didacticas/la-web-2-0/la-web-2-0-en-el-ambito-educativo/
28. LIBROSWEB. (2015). LIBROSWEB. Recuperado el 17 de Mayo de 2016,
de http://librosweb.es/libro/css/capitulo_2/selectores_basicos.html
29. Malacara, D. (s.f.). ÓPTICA TRADICIONAL Y MODERNA. Obtenido de
http://bibliotecadigital.ilce.edu.mx/sites/ciencia/volumen2/ciencia3/084/ht
m/sec_9.htm
30. Marcos, J. (20 de Mayo de 2014). JM. Recuperado el 04 de Abril de 2016,
de http://javimarcos.com/category/front-end/css3/
31. Maseda Martínez, L., Ramos Arcos, M., Rey Piñero, E., & Rodríguez
Rodríguez, N. (s.f.). Procesado Digital de la Imagen. Recuperado el 24 de
Abril de 2016, de
http://sabia.tic.udc.es/gc/Contenidos%20adicionales/trabajos/Imagenyvid
eo/Procesado%20Digital%20de%20la%20Imagen/pagina_superior6.htm
32. Mendez, D. (s.f.). educ@conTIC. Recuperado el 04 de 2015, de
http://ntic.educacion.es/w3/eos/MaterialesEducativos/mem2007/cueva_tr
agapalabras/
33. Métodos no Jerárquicos de Análisis Clusters. (s.f.). Obtenido de
http://www.ugr.es/~gallardo/pdf/cluster-4.pdf
34. Milán, V. (12 de Abril de 2012). la webera.es. Recuperado el 25 de Abril de
2016, de http://www.lawebera.es/diseno-web-html-5/etiquetas-html5-
audio-video-canvas.php
35. Mocholí, A. (12 de Noviembre de 2014). Recuperado el 21 de Abril de
2016, de https://www.yeeply.com/blog/top-6-mejores-aplicaciones-
moviles-educativas-para-ninos/
62
36. Morse, B. S. (12 de Enero de 2000). Lecture 4: Thresholding. Obtenido de
http://homepages.inf.ed.ac.uk/rbf/CVonline/LOCAL_COPIES/MORSE/thre
shold.pdf
37. Mozilla Developer Network. (26 de Abril de 2015). Mozilla Developer
Network. Recuperado el 01 de Abril de 2016, de
https://developer.mozilla.org/es/docs/Web/JavaScript/Acerca_de_JavaScr
ipt
38. Mozilla Developer Network. (26 de Septiembre de 2015). Mozilla Developer
Network. Recuperado el 02 de Junio de 2016, de
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Introducci%C
3%B3n
39. MOZILLA DEVELOPER NETWORK. (12 de Mayo de 2016). MDN.
Recuperado el Mayo de 2016, de
https://developer.mozilla.org/es/docs/CSS/Media_queries
40. Mozilla Developer Network. (12 de Febrero de 2016). Mozilla Developer
Network. Recuperado el 31 de Marzo de 2016, de
https://developer.mozilla.org/es/docs/HTML/HTML5
41. Mozilla Developer Network y colaboradores individuales. (02 de Febrero
de 2016). MDN. Recuperado el 26 de Abril de 2016, de
https://developer.mozilla.org/es/docs/Web/CSS/CSS3
42. Multitouch visual. (2010). Obtenido de
http://multitouchvisual.blogspot.com/2010/09/tratando-imagenes.html
43. Muñox, A., Franke, A., Prokoudine, A., & Otros, y. (2010). gimp.org.
Recuperado el 24 de Abril de 2016
44. OpenCV. (2014). OpenCV. Recuperado el 09 de Mayo de 2016, de
http://docs.opencv.org/2.4/modules/imgproc/doc/feature_detection.html#h
oughlinesp
45. Otro Espacio Blog. (02 de Septiembre de 2012). Obtenido de Lenguajes
de programación: Compilados vs Interpretados:
https://otroespacioblog.wordpress.com/2012/09/02/lenguajes-de-
programacion-compilados-vs-interpretados/
46. Reconocimiento de imágenes. (s.f.). Obtenido de
http://catarina.udlap.mx/u_dl_a/tales/documentos/lem/ramirez_r_ja/capitul
o4.pdf
63
47. Rhody, H. (11 de Octubre de 2005). Lecture 10: Hough Circle Transform.
Obtenido de
https://www.cis.rit.edu/class/simg782/lectures/lecture_10/lec782_05_10.p
df
48. Rodríguez, A. E. (05 de Marzo de 2015). GeekyTheory. Recuperado el 01
de Abril de 2016, de https://geekytheory.com/aprende-flask-introduccion-y-
hola-mundo/
49. Roldán, C. S. (s.f.). CODEJOBS. Obtenido de
https://www.codejobs.biz/es/blog/2013/03/02/que-es-python
50. Rosebrock, A. (06 de Abril de 2015). pyimagesearch. Recuperado el 14 de
Enero de 2016, de http://www.pyimagesearch.com/2015/04/06/zero-
parameter-automatic-canny-edge-detection-with-python-and-opencv/
51. Rossius, S. (s.f.). Reconocimiento de objetos mediante WebCam en
tiempo real. Obtenido de
http://www.ic.unicamp.br/~rocha/teaching/2013s1/mc851/aulas/hough-
transform.pdf
52. Tema 4: Segmentación de imágenes. (s.f.). Obtenido de
http://alojamientos.us.es/gtocoma/pid/tema4.pdf
53. The University of Auckland. (25 de Mayo de 2010). Obtenido de
https://www.cs.auckland.ac.nz/courses/compsci373s1c/PatricesLectures/
Gaussian%20Filtering_1up.pdf
54. tutorialspoint. (2016). Obtenido de
http://www.tutorialspoint.com/dip/sobel_operator.htm
55. w3schools. (s.f.). w3schools.com. Obtenido de
http://www.w3schools.com/html/html_intro.asp
56. w3schools. (s.f.). w3schools.com. Obtenido de
http://www.w3schools.com/css/
57. Wainschenker, R., Massa, J. M., & Tristan, P. (2011). Procesamiento
Digital de Imágenes. Obtenido de
http://www.exa.unicen.edu.ar/catedras/pdi/FILES/TE/CP1.pdf
58. Wikipedia. (27 de Septiembre de 2014).
https://es.wikipedia.org/wiki/Transformada_de_Hough. Recuperado el
Marzo de 2016, de https://es.wikipedia.org/wiki/Transformada_de_Hough
59. Wikipedia. (19 de Febreo de 2016). Obtenido de
https://es.wikipedia.org/wiki/K-means
64
ANEXOS
Anexo A. Servidor. ................................................................................................ i
a) PROCESO_DETECCION.py ....................................................................... i
b) METODO_DETECCION.py ....................................................................... iv
c) CONEXION.py ......................................................................................... v
Anexo B. Cliente Web. .........................................................................................vi
a) index.html .......................................................................................... vi
b) appimage.js ....................................................................................... xvi
c) mystyle.css ..................................................................................... xxiii
Anexo C. Cliente Móvil...................................................................................... xxv
a) index.js ............................................................................................ xxv
b) config.xml ...................................................................................... xxxii
Anexo D. Manual de Usuario. ........................................................................ xxxiii
a) Aplicación Web ..................................................................................... xxxiii
b) Aplicación Móvil .................................................................................... xxxvi
i
Anexo A. Servidor.
a) PROCESO_DETECCION.py
import numpy as np
import cv2
import math
# CALCULO ESTADISTICO DE LOS UMBRALES DE CANNY
def umbral_est(img):
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
blur = cv2.GaussianBlur(gray,(5,5),0)
media = np.median(blur)
sigma = 0.33
t_min =int(max(0,(1.0 - sigma)* media))
t_max = int(min(255, (1.0 + sigma) * media))
return t_min, t_max
# CALCULO DE UMBRALES CON K-MEANS
def umbral_kmeans(imag):
gray = cv2.cvtColor(imag, cv2.COLOR_BGR2GRAY)
blur = cv2.GaussianBlur(gray,(5,5),0)
img_sob = cv2.Sobel(blur,-1,1,1)
lista_im = img_sob.reshape(-1,1)
lista_im = np.float32(lista_im)
criterio =
(cv2.TERM_CRITERIA_EPS+cv2.TERM_CRITERIA_MAX_ITER,10,1.0)
bandera = cv2.KMEANS_RANDOM_CENTERS
dist, label, center =
cv2.kmeans(lista_im,3,False,criterio,10,bandera)
group1 = lista_im[label.ravel()==0]
group2 = lista_im[label.ravel()==1]
group3 = lista_im[label.ravel()==2]
#ORDENAR GRUPOS EN ORDEN ASCENDENTE
a = max(group1)
b = max(group2)
c = max(group3)
# valor maximo
maximo = a
minimo3 = min(group1)
if b>maximo:
maximo = b
minimo3 = min(group2)
elif c>maximo:
maximo = c
minimo3 = min(group3)
# valor menor
menor = a
# minimo1 = min(group1)
if b<menor:
menor = b
# minimo1 = min(group2)
ii
elif c<menor:
menor = c
# minimo1 = min(group3)
# valor medio
minimo2 = min(group1)
medio = a
if maximo>a and a>menor:
medio = a
minimo2=min(group1)
elif maximo>b and b>menor:
medio = b
minimo2=min(group2)
elif maximo>c and c>menor:
medio = c
minimo2=min(group3)
tresh1 = (menor+minimo2)/2
tresh2 = (medio+minimo3)/2
return tresh1, tresh2
#promedio de las dimensiones de la imagen
def promedio(img):
prom = (img.shape[0]+img.shape[1])/2
return prom
#APLICANDO FILTRO CANNY
def canny(img, treshol1,treshold2):
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
blur = cv2.GaussianBlur(gray,(5,5),0)
img_cany = cv2.Canny(blur,treshol1,treshold2,False,3,True)
return img_cany
# APLICACION DE LA TRANSFORMADA DE HOUGH
def lineas_hough(img_canny, imagenoriginal,promedio):
#AUTOMATIZACION DE PARAMETROS PARA HOUGHLINE
treshold_hough = promedio/30
min_line_length = promedio/10
#IMPLEMENTACION DE HOUGH PARA LINEAS
lineas=cv2.HoughLinesP(img_canny,2,np.pi/180,treshold_hough,False,
min_line_length,10)
imgcontorno = np.zeros(imagenoriginal.shape, np.uint8)
if (lineas is None):
lineas=[]
else:
#DISMINUCION DE LONGITUD DE LINEAS
for pos in lineas:
pos=pos[0]
y = abs(pos[3]-pos[1])
x = abs(pos[2]-pos[0])
modulo = math.sqrt(pow(x,2)+(pow(y,2)))
cte=((imgcontorno.shape[0]+imgcontorno.shape[1])/3)
vx = x/modulo
vy = y/modulo
iii
#LINEAS HORIZONTALES Y VERTICALES (RECTANGULOS)
pos[2] = pos[2]+cte*vx
pos[3] = pos[3]+cte*vy
pos[0] = pos[0]-cte*vx
pos[1] = pos[1]-cte*vy
#LINEAS HORIZONTALES, VERTICALES E INCLINADAS
(CUADRILATEROS)
# if (pos[1] > pos[3]):
# pos[0] = pos[0] - cte * vx
# pos[1] = pos[1] + cte * vy
# pos[2] = pos[2] + cte * vx
# pos[3] = pos[3] - cte * vy
# elif (pos[1] < pos[3]):
# pos[0] = pos[0] - cte * vx
# pos[1] = pos[1] - cte * vy
# pos[2] = pos[2] + cte * vx
# pos[3] = pos[3] + cte * vy
cv2.line(imgcontorno,(pos[0],pos[1]),(pos[2],pos[3]),(255,255,255)
)
return imgcontorno
# DETECCION DE CONTORNOS Y DETECCION DE CUADRADOS
def detecta_rectangulo(img_contours, imagoriginal):
grises = cv2.cvtColor(img_contours, cv2.COLOR_RGB2GRAY)
ret, thresh =
cv2.threshold(grises,0,255,cv2.THRESH_BINARY+cv2.THRESH_OTSU)
imagen, contours, hierarchy = cv2.findContours(thresh,
cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE)
vertices_rec = []
for pos in contours:
aproximacion = cv2.approxPolyDP(pos, 0.01 *
cv2.arcLength(contours[0], True), True)
if len(aproximacion)==4:
vertices_laterales = (int(aproximacion[3][0][0]),
int(aproximacion[3][0][1]), int(aproximacion[1][0][0]),
int(aproximacion[1][0][1]))
vertices_rec.append(vertices_laterales)
#PARA CUADRILATEROS EN GENERAL
# vertices_cuadri = (int(aproximacion[0][0][0]),
int(aproximacion[0][0][1]), int(aproximacion[1][0][0]),
# int(aproximacion[1][0][1]),
int(aproximacion[2][0][0]), int(aproximacion[2][0][1]),
# int(aproximacion[3][0][0]),
int(aproximacion[3][0][1]))
# vertices_rec.append(vertices_cuadri)
return vertices_rec
#DETECCION DE CIRCULOS
def detecta_circulos(original, umbral, prome):
#AUTOMATIZACION DE PARAMETROS PARA HOUGHCIRCLES
min_dist =prome/5
img_gray = cv2.cvtColor(original, cv2.COLOR_RGB2GRAY)
treshold_circ =prome/5
min_radio=prome/50
max_radio=prome/3
vertices_cir=[]
iv
#APLICACION DE HOUGH PARA CIRCULOS
circulos =
cv2.HoughCircles(img_gray,cv2.HOUGH_GRADIENT,1,min_dist,False,umbr
al,treshold_circ,min_radio,max_radio)
if circulos is None:
vertices_cir=[]
else:
for pos in circulos:
for vec in pos:
vertices = (int(vec[0]),int(vec[1]),int(vec[2]))
vertices_cir.append(vertices)
return vertices_cir
#METODO ALTERNATIVO PARA LA DETECCION DE CUADRADOS
def metodo_alternativo(original,umbral):
gray = cv2.cvtColor(original, cv2.COLOR_BGR2GRAY)
blur = cv2.GaussianBlur(gray,(5,5),0)
ret, thresh =
cv2.threshold(blur,0,255,cv2.THRESH_BINARY+cv2.THRESH_OTSU)
#DETECCION DE CONTORNOS
imagen, contours, hierarchy = cv2.findContours(thresh,
cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE)
vertices_rec = []
for pos in contours:
aproximacion = cv2.approxPolyDP(pos, 0.01 *
cv2.arcLength(contours[0], True), True)
if len(aproximacion)==4:
vertices_laterales = (aproximacion[3][0][0],
aproximacion[3][0][1], aproximacion[1][0][0],
aproximacion[1][0][1])
vertices_rec.append(vertices_laterales)
#PARA CUADRILATEROS EN GENERAL
# vertices_laterales = (int(aproximacion[0][0][0]),
int(aproximacion[0][0][1]), int(aproximacion[1][0][0]),
# int(aproximacion[1][0][1]),
int(aproximacion[2][0][0]), int(aproximacion[2][0][1]),
# int(aproximacion[3][0][0]),
int(aproximacion[3][0][1]))
# vertices_rec.append(vertices_laterales)
vertices_cir=detecta_circulos(original, umbral,
promedio(original))
return vertices_rec, vertices_cir
b) METODO_DETECCION.py
from PROCESO_DETECCION import *
def procedimiento(metodo, imagen):
#METODO 1 ESTADISTICO
if metodo == 1:
original = cv2.imread(imagen)
dimensiones = ([original.shape[0], original.shape[1]])
promedio_img = promedio(original)
t1, t2 = umbral_est(original)
cany = canny(original,t1,t2)
contorno =lineas_hough(cany, original,promedio_img)
rec_ver = detecta_rectangulo(contorno, original)
v
cir_ver = detecta_circulos(original, t2, promedio_img)
##################################################################
#######
#METODO 1 CLUSTERIZACION
if metodo == 2:
original1 = cv2.imread(imagen)
# copia1 = cv2.imread(imagen)
dimensiones = ([original1.shape[0],original1.shape[1]])
promedio_img1 = promedio(original1)
t1, t2 = umbral_kmeans(original1)
cany1 = canny(original1,t1,t2)
contorno1 =lineas_hough(cany1, original1,promedio_img1)
rec_ver=detecta_rectangulo(contorno1, original1)
cir_ver = detecta_circulos(original1, t2, promedio_img1)
##################################################################
#############
#METODO ALTERNATIVO PARA DETECCION DE CUADRADOS
#IMPLEMENTA DETECCION DE CIRCULOS UMBRAL ESTADISTICO
if metodo == 3:
original2 = cv2.imread(imagen)
t1, t2 = umbral_est(original2)
rec_ver, cir_ver = metodo_alternativo(original2, t2)
dimensiones = ([original2.shape[0], original2.shape[1]])
##################################################################
############
# METODO ALTERNATIVO PARA DETECCION DE CUADRADOS
# IMPLEMENTA DETECCION DE CIRCULOS CLUSTERIZACION
if metodo == 4:
original3 = cv2.imread(imagen)
t1, t2 = umbral_kmeans(original3)
rec_ver, cir_ver=metodo_alternativo(original3, t2)
dimensiones = ([original3.shape[0], original3.shape[1]])
return dimensiones, rec_ver, cir_ver
c) CONEXION.py
from flask import *
import base64
from METODO_DETECCION import *
app = Flask(__name__)
@app.route('/procesar', methods =['GET','POST'])
def procesar():
#CARGANDO DATOS RECIBIDOS DE LA IMAGEN
c=json.loads(request.data)
#DECODIFICANDO LA IMAGEN
fh = open("IMAGES\imagen.png", "wb")
fh.write(base64.decodestring(c))
fh.close()
#PROCESO DE DETECCION
vi
dimensiones, vertices_rectangulo, vertices_circulo =
procedimiento(1, "IMAGES\imagen.png")
#ARREGLO DE VERTICES
vertices =
json.dumps({"dimensiones":dimensiones,"rectangulo":vertices_rectan
gulo, "circulo":vertices_circulo})
return vertices
if __name__ == '__main__':
app.debug = True
app.run(host="0.0.0.0")
Anexo B. Cliente Web.
a) index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--AÑADIENDO LIBRERIAS DE ESTILO-->
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="fonts/stylefont.css">
<!--AÑADIENDO LIBRERIAS JavaScript-->
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="js/appimage.js"></script>
<title>DAPAGE</title>
</head>
<body>
<div data-role="page" id="pageone">
<!-- panel del menu-->
<div data-role="panel" id="myPanel">
<h2>MENÚ</h2>
<ul>
<li><a href="#infor"><span class="icon-file-text2"></span>Información</a></li>
<li><a href="#apli" ><span class="icon-delicious"></span>Aplicación</a></li>
vii
<li><a href="#contac" ><span class="icon-
newspaper"></span>Documentación</a></li>
</ul>
</div>
<!--boton de menu-->
<div data-role="header" >
<h1>DAPAGE</h1>
<a href="#myPanel" class="ui-btn ui-corner-all ui-icon-bullets ui-btn-icon-left"
style="font-family:Danae;">Menú</a>
</div>
<!--contenido-->
<div data-role="main" class="ui-content">
<p>DAPAGE es una aplicación desarrollada como trabajo de titulación en la
carrera de Ingeniería en Computación
Gráfica de la Universidad Central del Ecuador, esta aplicación se basa en la
identificación automática de figuras geométricas básicas en imágenes.
<br></br>
Permite la interactividad con el usuario al dejar que elija colores e identifique las
figuras reconocidas sobre
la imagen original, así podrá relacionar el objeto de la imagen con la forma que
éste tiene.<br></br>
Si deseas saber sobre el desarrollo de la aplicación consulta en <a
style="color:rgba(244, 208, 63, 0.85);"href="#infor">Información</a></p>
</div>
<div data-role="footer" id="foot" >
<h1>Instrucciones</h1>
</div>
<div data-role="main" class="ui-content">
<p> 1) Vamos al botón Menú ubicado en la parte superior izquierda.<br></br>
2) Seleccionamos la opción Aplicación.<br></br>
3) Elegimos DOS colores.<br></br>
<input type="image" src="image/colores.png"><br></br>
4) Selecciona la imagen deseada, observa qué figuras se dibujan, e identifica
qué figura fue dibujada.<br></br>
<input type="image" src="image/elegirimg.png"><br></br>
viii
</p>
</div>
</div>
<!-- INFORMACION-->
<div data-role="page" id="infor">
<div data-role="header">
<a href="#pageone" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-
notext">Home Icon</a>
<h1>Cómo se hizo?</h1>
</div>
<div data-role="main" class="ui-content">
<p>Este proyecto fue desarrollado como trabajo de titulación en la carrera de
Ingeniería en Computación Gráfica. La función de la
aplicación DAPAGE es recibir una imagen enviarla al servidor el cual contendrá
a la librería DAP que procesa la imagen y detecta
los patrones geométricos devolviendo una estructura de vértices que DAPAGE
recibirá para proceder a dibujar las figuras sobre
la imagen original. Para la obtención de dichos resultados se integraron distintas
tecnologías entre ellas tenemos:<br></br>
- Lenguaje Python junto con la librería OpenCV (Desarrollo de la librería
DAP)<br>
- HTML5, CSS, JavaScript y JqueryMobile (Desarrollo de la aplicación
DAPAGE)<br>
- Microframework Flask (Conexión entre la librería y la aplicación)<br></br>
Cada una de las tecnologías mencionadas fue implementada en distintas fases
del desarrollo de este proyecto, a continuación se describe
cada fase de desarrollo.</p>
</div>
<div data-role="footer" id="foot" >
<h1>Desarrollo de la Librería DAP</h1>
</div>
<div data-role="main" class="ui-content">
ix
<p>DAP fue desarrollada en Python implementando la líbreria OpenCV la cual
nos proporcionó las funciones acordes para realizar
el procesamiento de imágenes y lograr así la detección automática de patrones
geométricos.
El procesamiento de imagen realizado es el siguiente:<br></br>
- Automatización de umbrales para el Filtro Canny: Para la automatización de
umbrales se tomó en cuenta dos alternativas:<br>
1) Para el primer proceso de automatización se hizo un estudio acerca de el
Método de Otsu y el Algoritmo K-means.<br>
2) Para el segundo proceso de automatización se estudió el <a
style="color:rgba(244, 208, 63, 0.85);"
href="http://www.pyimagesearch.com/2015/04/06/zero-parameter-automatic-
canny-edge-detection-with-python-and-opencv/">Umbral estadístico</a>,
este es el proceso que se implementó en este proyecto.<br></br>
- Aplicación del Filtro de Canny: Para la aplicación del filtro Canny se utilizó la
función <a
href="http://docs.opencv.org/2.4/modules/imgproc/doc/feature_detection.html">cv
2.Canny</a>
proporcionada por la librería OpenCV.<br></br>
- Aplicación de la Transformada de Hough para líneas y círculos: La librería
OpenCV nos proporcionó dos funciones que nos permitieron
implementar la Transformada de Hough estas son: <a style="color:rgba(244,
208, 63, 0.85);"
href="http://docs.opencv.org/2.4/modules/imgproc/doc/feature_detection.html#ho
ughlinesp">cv2.HoughLinesP</a>
y <a style="color:rgba(244, 208, 63, 0.85);"
href="http://docs.opencv.org/2.4/modules/imgproc/doc/feature_detection.html#ho
ughcircles">cv2.HoughCircles</a>.<br></br>
- Detección de Patrones: Para la detección de rectángulos se empleó las
siguientes funciones: <a style="color:rgba(244, 208, 63, 0.85);"
href="http://docs.opencv.org/2.4/modules/imgproc/doc/structural_analysis_and_s
hape_descriptors.html?highlight=cv2.findcontours#cv2.findContours">cv2.findCo
ntours</a>
que permite encontrar los contornos en una imagen binaria, seguido se aplica la
función <a style="color:rgba(244, 208, 63, 0.85);"
href="http://docs.opencv.org/2.4/modules/imgproc/doc/structural_analysis_and_s
x
hape_descriptors.html?highlight=cv2.findcontours#approxpolydp">cv2.approxPol
yDP</a>
que permite reducir el número de puntos(vértices) que conforman los
contornos.<br>
Por otro lado para la detección de círculos después de aplicar cv2.HoughCircles
simplemente se recorre la estructura
de centros y radios que nos da como resultado.
</p>
</div>
<div data-role="footer" id="foot" >
<h1>Desarrollo del Servidor</h1>
</div>
<div data-role="main" class="ui-content">
<p>El servidor fue desarrollado mediante la implementación de Flask en Python.
Flask es un microframework que permite
el desarrollo de aplicaciones web de una manera sencilla. Sus características
más
importantes son:<br></br>
- Tiene embebido su propio servidor web, lo que significa que tiene su
propio motor de trabajo en lenguaje Python,
levanta automáticamente el puerto 5000 para mostrar el contenido
web.<br></br>
- Contiene un depurador que permite probar, limpiar y monitorizar la
ejecución del programa asociando el código fuente
con las instrucciones ejecutadas por el programa.<br></br>
- Es de fácil desarrollo ya que no divide las tareas web por módulos lo que
facilita el desarrollo de las aplicaciones
sencillas, permite la creación de rutas a las cuales se les asigna un método que
responde por ella.<br></br>
Para mayor información acerca de Flask puedes visitar su página web <a
style="color:rgba(244, 208, 63, 0.85);"
href="http://flask.pocoo.org/">http://flask.pocoo.org/</a>
</p>
</div>
xi
<div data-role="footer" id="foot" >
<h1>Desarrollo de la Aplicación DAPAGE</h1>
</div>
<div data-role="main" class="ui-content">
<p>Para el desarrollo de la aplicación se hizo uso del lenguaje HTML5 junto con
CSS y JavaScript. El proceso seguido fue
el siguiente:<br></br>
Se realizó la maquetación de la página web, la cual tendrá cuatro secciones:
Inicio, Información, Aplicación y Documentación.<br></br>
- La sección Inicio es la sección que presenta la aplicación, se presenta una
breve descripción y las instrucciones de uso.<br></br>
- La sección Información contiene detalles teóricos sobre el desarrollo del
presente proyecto.<br></br>
- La sección Aplicación permite al usuario probar la aplicación, el usuario podrá
subir una imagen que será enviada al servidor
mediante la función $.ajax proporcionado por la librería jQuery(JavaScript), el
servidor desarrollado en Flask recibirá
la imagen y pondrá en funcionamiento la librería DAP para el procesamiento de
la imagen, como resultado obtendremos un
par de estructuras; una contendrá los vértices de los rectángulos obtenidos,
mientras que otra contendrá los centros y radios
de las circunferencias reconocidas en la imagen, éstas estructuras serán
enviadas de vuelta y es ahí donde entrará en trabajo
la función callback en donde se reciben los datos que se envían desde el
servidor en este caso las estructuras
de vértices. Esta función lo que nos permite es dibujar las figuras geométricas de
acuerdo a los vértices recibidos.
Éste proceso se ejecutará en el lado del cliente.<br></br>
- La sección Documentación proporciona información para obtener la
documentación completa del proyecto.
</p>
</div>
</div>
<!-- APLICACION -->
xii
<div data-role="page" id="apli">
<div data-role="header">
<a href="#pageone" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-
notext">Home Icon</a>
<h1>¿Qué Figura es?</h1>
</div>
<div data-role="main" class="ui-content">
<div style="float:left; width:20%;padding-right:5%;">
<p style="color:#F7DC6F;"><span class="icon-checkmark"></span>Elige DOS
colores:</p>
<fieldset data-role="controlgroup" style="float:left;">
<label for="red" style="background-color:#FF0000; text-shadow:none;
color:#FFDAB9; border-width:5px; border-color:rgba(186,85,211,0.8) /*{a-bup-
border}*/;">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red" >
<label for="green" style="background-color:#008000; text-shadow:none;
color:#FFDAB9; border-width:5px; border-
color:rgba(186,85,211,0.8);">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue" style="background-color:#0000FF; text-shadow:none;
color:#FFDAB9; border-width:5px;border-
color:rgba(186,85,211,0.8);">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
<label for="yellow" style="background-color:#FFFF00; text-shadow:none;
color:#FFDAB9; border-width:5px;border-
color:rgba(186,85,211,0.8);">Yellow</label>
<input type="checkbox" name="favcolor" id="yellow" value="yellow">
<label for="purple" style="background-color:#800080; text-shadow:none;
color:#FFDAB9; border-width:5px;border-
color:rgba(186,85,211,0.8);">Purple</label>
<input type="checkbox" name="favcolor" id="purple" value="purple">
<label for="brown" style="background-color:#A52A2A; text-shadow:none;
color:#FFDAB9; border-width:5px;border-
color:rgba(186,85,211,0.8);">Brown</label>
<input type="checkbox" name="favcolor" id="brown" value="brown">
xiii
</fieldset>
<fieldset data-role="controlgroup" style="float:left;">
<label for="pink" style="background-color:#FFC0CB; text-shadow:none;
color:#FFDAB9; border-width:5px;border-
color:rgba(186,85,211,0.8);">Pink</label>
<input type="checkbox" name="favcolor" id="pink" value="pink">
<label for="violet" style="background-color:#EE82EE; text-shadow:none;
color:#FFDAB9; border-width:5px;border-
color:rgba(186,85,211,0.8);">Violet</label>
<input type="checkbox" name="favcolor" id="violet" value="violet">
<label for="cyan" style="background-color:#00FFFF; text-shadow:none;
color:#FFDAB9; border-width:5px;border-
color:rgba(186,85,211,0.8);">Cyan</label>
<input type="checkbox" name="favcolor" id="cyan" value="cyan">
<label for="gray" style="background-color: #808080; text-shadow:none;
color:#FFDAB9; border-width:5px;border-
color:rgba(186,85,211,0.8);">Gray</label>
<input type="checkbox" name="favcolor" id="gray" value="gray">
<label for="orange" style="background-color: #FFA500; text-
shadow:none; color:#FFDAB9; border-width:5px;border-
color:rgba(186,85,211,0.8);">Orange</label>
<input type="checkbox" name="favcolor" id="orange" value="orange">
<label for="skyblue" style="background-color:#87CEEB; text-shadow:none;
color:#FFDAB9; border-width:5px; border-
color:rgba(186,85,211,0.8);">SkyBlue</label>
<input type="checkbox" name="favcolor" id="skyblue" value="skyblue">
</fieldset>
</div>
<div id="subirimg" style="float:left; width:55%;padding-right:5%;">
<p style="color:#F7DC6F;"><span class="icon-images"></span> Selecciona una
Imagen:</p><input type="file" id="imagen" style="font-family:Danae;"/>
<img src="" class="dimensiones"/>
<canvas id="myCanvas" class="dimensiones"></canvas>
</div>
xiv
<div id="btimgs" style="float:left; width:15%;">
<p style="color:#F7DC6F;"><span class="icon-cool"></span> Qué figura se
dibujó?</p>
<a id="bt-cir" data-rel="popup" data-position-to="origin">
<input type="image" src="image/circulo.png" alt="Skaret View" width="128px">
</a>
<a id="bt-cua" data-rel="popup" data-position-to="origin">
<input type="image" src="image/cuadrado.png" alt="Skaret View"
width="128px">
</a>
</div>
<div data-role="popup" id="CirPopup">
<p ><span class="icon-happy"></span> CORRECTO! ES UN CÍRCULO</p>
</div>
<div data-role="popup" id="CuadPopup">
<p><span class="icon-happy"></span> CORRECTO! ES UN
RECTÁNGULO</p>
</div>
<div data-role="popup" id="NoCirPopup">
<p><span class="icon-sad"></span> INCORRECTO! INTENTA DE
NUEVO...!!!</p>
</div>
<div data-role="popup" id="NoCuadPopup">
<p><span class="icon-sad"></span> INCORRECTO! INTENTA DE
NUEVO...!!!</p>
</div>
<audio id="bien">
<source src="sounds/TaDa-Sound.mp3" type="audio/mpeg">
</audio>
<audio id="mal">
<source src="sounds/Sad_Trombone.mp3" type="audio/mpeg">
</audio>
xv
</div>
</div>
<!-- DOCUMENTACION -->
<div data-role="page" id="contac">
<div data-role="header" >
<h1>Quieres saber más?</h1>
<a href="#pageone" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-
notext">Home Icon</a>
</div>
<div data-role="main" class="ui-content">
<p>Si deseas saber más sobre el desarrollo u obtener el documento escrito
acerca del
proyecto puedes ingresar al <a style="color:rgba(244, 208, 63, 0.85);"
href="http://www.dspace.uce.edu.ec/handle/25000/74">Repositorio Digital</a>
de la Facultad de Ingeniería Ciencias Físicas
y Matemática(UCE) en donde encontrarás el documento bajo el título:
"DESARROLLO DE UNA APLICACIÓN BASADA EN EL RECONOCIMIENTO
AUTOMÁTICO DE PATRONES
EN IMÁGENES APLICADA A LA EDUCACIÓN"<br></br>
Para revisar el código fuente puedes visitar la siguiente página: <a
style="color:rgba(244, 208, 63, 0.85);"
href="http://www.dspace.uce.edu.ec/handle/25000/74">Reconocimiento
Automático de Patrones</a><br></br>
Toda la información proporcionada ha sido fruto de una ardua investigación por
lo que se espera que ésta
sea utilizada de la mejor manera, pero sobre todo que sea un aporte para
investigaciones futuras.<br></br>
Si deseas contactarte con la Autora de este proyecto puedes escribir a:
[email protected]<br></br>
GRACIAS.
</p>
</div>
</div>
</body>
xvi
</html>
b) appimage.js
$(document).ready(function(){
var file;
var reader;
var preview;
var canvas;
var context;
var ok = document.getElementById("bien");
var bad = document.getElementById("mal");
var escale;
var ok_cir=2;
var ok_cuad=2;
var color_fig=[];
var fig_cir=[]
var fig_rec=[];
var fig = 0;
$("#subirimg").hide();
$("#btimgs").hide();
$( "#imagen" ).change(function() {
//devuelve el primer elemento <img> en el documento
preview = document.querySelector('img');
//devuelve el primer elemento <input> tipo file en el
documento posicion 0
file = document.querySelector('input[type=file]').files[0];
//crear objero fileReader
reader = new FileReader();
xvii
reader.readAsDataURL(file);
//validando que el usuario solo pueda subir imagenes de tipo
jpg o png
if (!(/\.(jpg|png)$/i).test(file.name)){
alert("El archivo no es una imagen, intenta de nuevo por
favor");
}else{
//funcion que se ejecuta una vez que la lectura a finalizado
reader.onloadend = function () {
// result contiene un data: URL que representa los datos del
fichero.
preview.src = reader.result;
imagen =
reader.result.replace(/^data:image\/(png|jpeg);base64,/,"");
iniciarPizarra();
$("#btimgs").show();
//CONEXION CON EL SERVIDOR, ENVIANDO IMAGEN EN BASE 64
$.ajax({
async: true,
type: "POST",
url:"http://127.0.0.1:5000/procesar",
data: JSON.stringify(imagen),
dataType: "json",
contentType: "application/json",
//RECIBIR DATOS
success: function(data){
//ESTABLECIENDO ESCALA PARA AJUSTAR EL TAMANO DE LAS FIGURAS
escala = preview.height/data["dimensiones"][0];
escale = escala.toFixed(2);
//RECORRIENDO ARRAY DE COORDENADAS DE CIRCULOS DETECTADOS
//console.log(data);
if(data["circulo"].length==0){
ok_cir = 0;
} else{
ok_cir = 1;
fig_cir = data["circulo"];
xviii
for(num_array = 0; num_array<data["circulo"].length;
num_array++){
dibuja_circulo(data["circulo"][num_array][0]*escale,data["ci
rculo"][num_array][1]*escale,data["circulo"][num_array][2]*e
scale);
}
}
//RECORRIENDO ARRAY DE VERTICES DE RECTANGULOS DETECTADOS
if(data["rectangulo"].length==0){
ok_cuad = 0;
} else{
ok_cuad = 1;
fig_rec = data["rectangulo"];
for(num_array = 0; num_array<data["rectangulo"].length;
num_array++){
h=data["rectangulo"][num_array][3]-
data["rectangulo"][num_array][1];
//console.log(h)
w=data["rectangulo"][num_array][2]-
data["rectangulo"][num_array][0];
dibuja_rectangulo(data["rectangulo"][num_array][0]*escale,da
ta["rectangulo"][num_array][1]*escale,w*escale,h*escale);
//PARA CUADRILATEROS EN GENERAL
//dibuja_rectangulo(data["rectangulo"][num_array][0]*escale,
data["rectangulo"][num_array][1]*escale,data["rectangulo"][n
um_array][2]*escale,data["rectangulo"][num_array][3]*escale,
data["rectangulo"][num_array][4]*escale,data["rectangulo"][n
um_array][5]*escale,data["rectangulo"][num_array][6]*escale,
data["rectangulo"][num_array][7]*escale);
}
}
}
});
}
xix
}
});
//FUNCION PARA INICIALIZAR CANVAS
function iniciarPizarra(){
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
canvas.width=preview.width;
canvas.height=preview.height;
}
function limpiarCanvas(){
context.beginPath();
context.clearRect(0,0, canvas.width, canvas.height);
}
//FUNCION PARA DIBUJAR CIRCULOS CON COORDENADAS RECIBIDAS
function dibuja_circulo(x,y,r){
context.beginPath();
context.arc(x, y,r,0,2*Math.PI, false );
context.lineWidth = 5;
context.strokeStyle=color_fig[0];
context.stroke();
}
//FUNCION PARA DIBUJAR RECTANGULOS CON LOS VERTICES
RECIBIDOS
function dibuja_rectangulo(x,y,w,h){
context.beginPath();
context.rect(x,y,w,h);
context.lineWidth = 5;
context.strokeStyle=color_fig[1];
context.stroke();
}
xx
//FUNCION PARA DIBUJAR CUADRILATEROS EN GENERAL
/*function dibuja_rectangulo(x0,y0,x1,y1,x2,y2,x3,y3){
context.beginPath();
context.moveTo(x0,y0);
context.lineTo(x1,y1);
context.lineTo(x2,y2);
context.lineTo(x3,y3);
context.lineTo(x0,y0);
context.lineWidth = 5;
context.strokeStyle=color_fig[1];
context.stroke();
}*/
function render_cir(){
for(num_array = 0; num_array<fig_cir.length; num_array++){
dibuja_circulo(fig_cir[num_array][0]*escale,fig_cir[num_arra
y][1]*escale,fig_cir[num_array][2]*escale);
}
}
function render_rec(){
for(num_array = 0; num_array<fig_rec.length; num_array++){
h=fig_rec[num_array][3]-fig_rec[num_array][1];
w=fig_rec[num_array][2]-fig_rec[num_array][0];
dibuja_rectangulo(fig_rec[num_array][0]*escale,fig_rec[num_a
rray][1]*escale,w*escale,h*escale);
}
}
// PARA CUADRILATEROS EN GENERAL
/*function render_rec(){
for(num_array = 0; num_array<fig_rec.length; num_array++){
dibuja_rectangulo(fig_rec[num_array][0]*escale,fig_rec[num_a
rray][1]*escale,fig_rec[num_array][2]*escale,fig_rec[num_arr
ay][3]*escale,fig_rec[num_array][4]*escale,fig_rec[num_array
][5]*escale,fig_rec[num_array][6]*escale,fig_rec[num_array][
7]*escale);
xxi
}
}*/
//FUNCION DE BOTON CIRCULO DE INTERACCION CON EL USUARIO
$("#bt-cir").click(function(){
if(ok_cir==0){
$("canvas").slideToggle(limpiarCanvas);
document.getElementById("bt-cir").href="#NoCirPopup";
mal.play();
}else{
if(ok_cir==1){
//setInterval(limpiarCanvas,1000);
//setInterval(render,2000);
setTimeout(limpiarCanvas,500);
setTimeout(render_cir,1000);
setTimeout(limpiarCanvas,1500);
setTimeout(render_cir,2000);
setTimeout(limpiarCanvas,2500);
setTimeout(render_cir,3000);
document.getElementById("bt-cir").href="#CirPopup";
ok.play();
}
}
});
//FUNCION DE BOTON RECTANGULO DE INTERACCION CON EL USUARIO
$("#bt-cua").click(function(){
if(ok_cuad==0){
$("canvas").slideToggle(limpiarCanvas);
setTimeout(function(){ $("canvas").slideToggle(); }, 3000);
document.getElementById("bt-cua").href="#NoCuadPopup";
mal.play();
}else{
if(ok_cuad==1){
setTimeout(limpiarCanvas,500);
setTimeout(render_rec,1000);
xxii
setTimeout(limpiarCanvas,1500);
setTimeout(render_rec,2000);
setTimeout(limpiarCanvas,2500);
setTimeout(render_rec,3000);
document.getElementById("bt-cua").href="#CuadPopup";
ok.play();
}
}
});
//ELECCION DE COLORES PARA LAS FIGURAS
$("input[type='checkbox']").change(function(){
if($(this).is(':checked')){
if($("input[type='checkbox']:checked").length<=2 &&
$("input[type='checkbox']:checked").length>=1){
color_fig.push($(this).val());
if($("input[type='checkbox']:checked").length==2){
$("#subirimg").show();
fig=1;
}
}else{
alert("Solo debes elegir DOS colores");
$(this).is(':checked')=false;
}
}else{
for(i=0;i<color_fig.length;i++){
if(color_fig[i]==($(this).val())){
color_fig.splice(i,1);
}
}
if($("input[type='checkbox']:checked").length==0 && fig==1){
alert("Debes elegir DOS colores");
preview.src="";
limpiarCanvas();
$("#subirimg").hide();
xxiii
$("#btimgs").hide();
}
}
});
});
c) mystyle.css
/*ANADIENDO TIPOGRAFIAS*/
@font-face{
font-family:"Timoteo";
src:url(fuentes/Timoteo.ttf) format('truetype');
}
@font-face{
font-family:"FoliaMixRegular";
src:url(fuentes/FoliaMixRegular.ttf) format('truetype');
}
@font-face{
font-family:"Delius-Regular";
src:url(fuentes/Delius-Regular.ttf) format('truetype');
}
@font-face{
font-family:"Danae";
src:url(fuentes/Danae.ttf) format('truetype');
}
/*MODIFICANDO ESTILOS*/
h1{
font-family:FoliaMixRegular;
}
h2{
font-family:Danae;
color:rgba(244, 208, 63, 0.85);
}
xxiv
a{
font-family:Danae;
}
p{
font-family:Delius-Regular;
text-align:justify;
color: #FAFAD2;
font-size:14pt;
}
ul li a{
padding:20px;
display:block;
text-decoration:none;
}
ul li span{
margin-right:10px;
}
ul{
list-style: none;
}
h2{
margin-left:25%;
}
img{
position:absolute;
z-index:1;
}
canvas{
position:absolute;
xxv
z-index:2;
}
.dimensiones{
width:54%;
text-align:center;
}
Anexo C. Cliente Móvil
a) index.js
var preview;
var canvas;
var context;
var escale;
var ok_cir=2;
var ok_cuad=2;
var color_fig=[];
var fig_cir=[]
var fig_rec=[];
var fig = 0;
// ESPERA A QUE LAS APIs SE CARGUEN
document.addEventListener("deviceready", onDeviceReady,
false);
// UNA VEZ CARGADAS LAS APIs
function onDeviceReady() {
var ok = document.getElementById("bien");
var bad = document.getElementById("mal");
xxvi
document.getElementById("capture").addEventListener("click",
capturePhoto);
document.getElementById("getFoto").addEventListener("click",
getPhoto);
$("#subirimg").hide();
$("#btimgs").hide();
//FUNCION DE BOTON CIRCULO DE INTERACCION CON EL USUARIO
$("#bt-cir").click(function(){
if(ok_cir==0){
document.getElementById("bt-cir").href="#NoCirPopup";
mal.play();
limpiarCanvas();
}else{
if(ok_cir==1){
document.getElementById("bt-cir").href="#CirPopup";
ok.play();
render_cir();
}
}
});
//FUNCION DE BOTON RECTANGULOS DE INTERACCION CON EL USUARIO
$("#bt-cua").click(function(){
if(ok_cuad==0){
document.getElementById("bt-cua").href="#NoCuadPopup";
mal.play();
limpiarCanvas();
}else{
if(ok_cuad==1){
document.getElementById("bt-cua").href="#CuadPopup";
ok.play();
render_rec();
}
}
xxvii
});
//ELECCION DE COLORES PARA LAS FIGURAS
$("input[type='checkbox']").change(function(){
if($(this).is(':checked')){
if($("input[type='checkbox']:checked").length<=2 &&
$("input[type='checkbox']:checked").length>=1){
color_fig.push($(this).val());
if($("input[type='checkbox']:checked").length==2){
$("#subirimg").show();
fig=1;
}
}else{
alert("Solo debes elegir DOS colores");
$(this).is(':checked')=false;
}
}else{
for(i=0;i<color_fig.length;i++){
if(color_fig[i]==($(this).val())){
color_fig.splice(i,1);
}
}
if($("input[type='checkbox']:checked").length==0 && fig==1){
alert("Debes elegir DOS colores");
preview.src="";
limpiarCanvas();
$("#subirimg").hide();
$("#btimgs").hide();
}
}
});
}
// SE LLAMA CUANDO LA FOTO ES CAPTURADA CORRECTAMENTE
function onPhotoDataSuccess(imageURL) {
xxviii
preview = document.getElementById('image');
//preview.style.display = 'block';
//Mostrando fotografia
preview.src = "data:image/jpeg;base64," + imageURL;
imagen = imageURL;
iniciarPizarra();
$("#btimgs").show();
//CONEXION CON EL SERVIDOR, ENVIANDO IMAGEN EN BASE 64
$.ajax({
async: true,
type: "POST",
url:"http://192.168.0.101:5000/procesar",
data: JSON.stringify(imagen),
dataType: "json",
contentType: "application/json",
//RECIBIR DATOS
success: function(data){
//ESTABLECIENDO ESCALA PARA AJUSTAR EL TAMANO DE LAS FIGURAS
escala = preview.height/data["dimensiones"][0];
escale = escala.toFixed(2);
//RECORRIENDO ARRAY DE COORDENADAS DE CIRCULOS DETECTADOS
if(data["circulo"].length==0){
ok_cir = 0;
} else{
ok_cir = 1;
fig_cir = data["circulo"];
for(num_array = 0; num_array<data["circulo"].length;
num_array++){
dibuja_circulo(data["circulo"][num_array][0]*escale,data["ci
rculo"][num_array][1]*escale,data["circulo"][num_array][2]*e
scale);
//dibuja_circulo(fig_cir[num_array][0]*escale,fig_cir[num_ar
ray][1]*escale,fig_cir[num_array][2]*escale);
}
}
//RECORRIENDO ARRAY DE VERTICES DE RECTANGULOS DETECTADOS
xxix
if(data["rectangulo"].length==0){
ok_cuad = 0;
} else{
ok_cuad = 1;
fig_rec = data["rectangulo"];
for(num_array = 0; num_array<data["rectangulo"].length;
num_array++){
h=data["rectangulo"][num_array][3]-
data["rectangulo"][num_array][1];
w=data["rectangulo"][num_array][2]-
data["rectangulo"][num_array][0];
dibuja_rectangulo(data["rectangulo"][num_array][0]*escale,da
ta["rectangulo"][num_array][1]*escale,w*escale,h*escale);
}
}
},
error: function(jqXHR,textStatus,errorThrown){
//console.log('jqXHR:');
//console.log(jqXHR);
alert("Ocurrio un error en la conexión:" +jqXHR);
//console.log('textStatus:');
//console.log(textStatus);
//alert(textStatus);
//console.log('errorThrown:');
//console.log(errorThrown);
//alert(errorThrown);
}
});
}
// FUNCION PARA CAPTURAR LA FOTO
function capturePhoto() {
// TOMA LA FOTO CON LA CAMARA DEL DISPOSITIVO Y DEVUELVE
ESTA EN BASE64
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
xxx
quality: 30,
targetWidth: 600,
targetHeight: 600,
destinationType: navigator.camera.DestinationType.DATA_URL,
saveToPhotoAlbum: true
});
}
// FUNCION PARA OBTENER LA FOTO DESDE GALERIA
function getPhoto() {
// RECUPERA LA UBICACION DE LA IMAGEN
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
//quality: 30,
//targetWidth: 600,
//targetHeight: 600,
destinationType: navigator.camera.DestinationType.DATA_URL,
sourceType:
navigator.camera.PictureSourceType.SAVEDPHOTOALBUM
});
}
// FUNCION LLAMADA SI OCURRE UN ERROR DURANTE LA OPERACION
DE CAPTURA DE LA IMAGEN
function onFail(message) {
alert('Failed because: ' + message);
}
//FUNCION PARA INICIALIZAR CANVAS
function iniciarPizarra(){
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
canvas.width=preview.width;
canvas.height=preview.height;
}
function limpiarCanvas(){
context.beginPath();
xxxi
context.clearRect(0,0, canvas.width, canvas.height);
}
//FUNCION PARA DIBUJAR CIRCULOS CON COORDENADAS RECIBIDAS
function dibuja_circulo(x,y,r){
context.beginPath();
context.arc(x, y,r,0,2*Math.PI, false );
context.lineWidth = 5;
context.strokeStyle=color_fig[0];
context.stroke();
}
//FUNCION PARA DIBUJAR RECTANGULOS CON LOS VERTICES
RECIBIDOS
function dibuja_rectangulo(x,y,w,h){
context.beginPath();
context.rect(x,y,w,h);
context.lineWidth = 5;
context.strokeStyle=color_fig[1];
context.stroke();
}
function render_cir(){
for(num_array = 0; num_array<fig_cir.length; num_array++){
dibuja_circulo(fig_cir[num_array][0]*escale,fig_cir[num_arra
y][1]*escale,fig_cir[num_array][2]*escale);
}
}
function render_rec(){
for(num_array = 0; num_array<fig_rec.length; num_array++){
h=fig_rec[num_array][3]-fig_rec[num_array][1];
w=fig_rec[num_array][2]-fig_rec[num_array][0];
dibuja_rectangulo(fig_rec[num_array][0]*escale,fig_rec[num_a
rray][1]*escale,w*escale,h*escale);
}
}
xxxii
b) config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.dapage" version="0.0.1"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>DAPAGE</name>
<description>
A sample Apache Cordova application that responds to the
deviceready event.
</description>
<author email="[email protected]"
href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
xxxiii
Anexo D. Manual de Usuario.
a) Aplicación Web
1. En la página de Inicio click en el botón Menú y seleccionamos la opción
Aplicación.
2. En la página que aparezca se mostrará una paleta de colores en la que
procedemos a elegir dos colores con los que se dibujarán las figuras detectadas.
xxxiv
3. En la misma página luego de elegir dos colores, aparecerá un botón para
seleccionar una imagen, damos click sobre Seleccionar archivo.
4. Se abrirá una nueva ventana en la que elegiremos una imagen con la que
deseemos trabajar y hacemos click en el botón Abrir.
xxxv
5. Sobre la imagen elegida se dibujarán las figuras detectadas y al lado derecho
aparecerán dos botones, éstos nos permitirán elegir qué figura observamos que
se dibujó.
Si elegimos correctamente observaremos un mensaje de CORRECTO! Y las
figuras dibujadas se animarán.
xxxvi
Si elegimos incorrectamente observaremos un mensaje de INCORRECTO! Y las
figuras dibujadas desaparecerán.
b) Aplicación Móvil
1. Abrir la aplicación, elegimos Menú y vamos a la opción Aplicación.
xxxvii
2. Elegimos dos colores con los cuales se dibujarán las figuras detectadas.
3. Touch en el botón Capturar Imagen, para proceder a tomar una fotografía o
touch en el botón Ir a Galería para subir una imagen.
xxxviii
4. Verificar e Identificar las figuras que se dibujan.
Si la identificación es correcta, aparecerá un mensaje de CORRECTO!.
xxxix
Si la identificación es incorrecta, aparecerá un mensaje de INCORRECTO! Y la
figura desaparecerá.
