5

La aplicación píxelStudio ha sido desarrollada como proyecto final de carrera con el objetivo de servir de buena base para fines educativos en el estudio de la digitalización de imágenes.

Esta aplicación es sencilla e intuitiva, pero aún así se expondrá en el siguiente manual las diferentes características y capacidades de la propia aplicación, para resolver cualquier posible duda.

En resumen, con esta aplicación, podremos hacer un cálculo muy aproximado del área de la figura insertada como imagen en píxelStudio - Blanco&Negro, pixelar con el número de grises que deseemos la imagen original en píxelStudio - Escala de Grises o mostrar por separado las componentes de color R, G o B tanto de la imagen original como de las transformaciones realizadas sobre ella en píxelStudio - Colores entre otras muchas cosas…

1.2. Ejecutando la aplicación por primera vez.

Al ejecutar este software nos aparecerá en primer lugar la ventana de bienvenida que nos dará la posibilidad de acceder a los distintos bloques de la aplicación Blanco&Negro, Escala de Grises o Colores.

1.3. Echando un vistazo a la aplicación.

Como hemos comentado en la introducción nuestra aplicación está estructurada en tres bloques, pero la interfaz gráfica de éstos es muy similar, por tanto, aquí veremos esas similitudes y las particularidades de cada una se verán a continuación en el apartado correspondiente a Blanco&Negro, Escala de Grises o Colores.

En la ventana principal de la aplicación se distinguen varias zonas. A continuación las comentaremos comenzando de arriba a bajo y de izquierda a derecha.

1.3.1. Menú de aplicación.

Lo primero que nos encontramos es el menú de la aplicación, donde podemos ver distintas opciones.

Figura 1. Menú de la aplicación.

A) En el menú de Archivo tendremos las opciones de abrir una nueva imagen, borrar la imagen abierta previamente, guardar la Imagen Pixelada o Diferencias y limpiar todas las imágenes para empezar desde cero, cubriendo así las funciones básicas de tratamiento de ficheros.

Figura 2. Menú de Archivo.

Además podemos hacer click sobre Volver a Elección para volver al menú principal de píxelStudio o sobre Salir para abandonar la aplicación.

B) En el menú Ver tenemos las opciones que muestran la imagen original pixelada (Mostrar Pixelado Cuadrado o Mostrar Pixelado Triangular) o las diferencias (Mostrar Diferencias) entre la pixelada y la original con la que se esté trabajando.

Figura 3. Menú de Ver.

Podemos configurar aquí la opción No Ver Ampliada, la cual si está marcada, nuestra barra de herramientas, pasará a ser la siguiente:

Figura 4. Barra de herramientas no ampliada.

C) El menú Ayuda nos dará opción a cargar el manual de usuario o tutorial y si picamos en Acerca de.. nos dará información de la aplicación como los autores, tutor del proyecto, departamento del proyecto, etc…

Figura 5. Menú de Ayuda

1.3.2. Barra de herramientas.

Gracias a la barra de herramientas y la habilitación de botones de la misma logramos una manejabilidad de la aplicación muy intuitiva y que no dará lugar a confusiones. En ella encontraremos las opciones principales de píxelStudio.

Figura 6. Barra de herramientas ampliada.

Al pasar el ratón sobre cada uno de estos botones nos dirá su función, que son las comentadas en el apartado anterior ya que también estaban integradas en el menú de aplicación.

Con las flechas verdes queremos representar cual será el proceso a seguir en nuestra aplicación: Abrir Imagen ···> Mostrar Pixelado ···> Mostrar las Diferencias.

1.3.3. Panel de edición de imagen.

Este panel situado en la parte inferior izquierda de la aplicación nos dará todas las opciones posibles para el tratamiento de la imagen que hayamos seleccionado. Las pestañas comunes en las distintas opciones de píxelStudio son:

- Tamaño de los cuadrados: marcaran la precisión de la digitalización de una forma inversamente proporcional, cuanto más grande menor precisión. Podemos elegirla pequeña (2x2 píxeles), mediana (4x4 píxeles), grande (8x8 píxeles) o personalizada (YxY píxeles) cuyos tamaños quedaran reflejados en el panel Gráfico.

- Mostrar Mallado: aquí podemos hacer que se muestra o no la cuadrícula con el color que nosotros elijamos.

Figura 7. Panel de edición de imágenes.

1.3.4. Zona de visualización de las imágenes.

En el centro de la ventana principal, podemos ver los tres paneles sobre los que se visualizarán las imágenes cargadas, pixelada y diferencias entre las anteriores respectivamente. Las imágenes se irán actualizando según vayamos introduciendo en el panel de edición de imágenes (1.3.3) las opciones deseadas y vayamos pulsando los botones de la barra de herramientas (1.3.2).

Figura 8. Paneles de visualización de las imágenes.

1.3.5. Barra de estado.

En la zona inferior de la ventana de la aplicación, encontramos información sobre la última acción realizada por nuestro programa o que se está realizando en ese momento según esté indicada o no como finalizada.

Figura 9. Barra de estado.

Una vez que hemos visto la estructura general de la aplicación, a continuación se explican en profundidad las distintas posibilidades de la aplicación.

1.4. píxelStudio – Blanco&Negro

1.4.1. Introducción.

Esta herramienta le permitirá medir de un modo cualitativo y cuantitativo un espacio bidimensional siendo capaz de digitalizar las imágenes originales binarias con distintas resoluciones y comprobar las diferencias con la imagen pixelada de un modo sencillo e intuitivo.

1.4.2. Presentación.

Figura 10. Apariencia de píxelStudio - Blanco&Negro.

En la figura 10 podemos ver la interfaz gráfica de la aplicación para el bloque Blanco&Negro. La facilidad de uso, paso por paso, y un atractivo diseño muy colorido con un sencillo y potente despliegue de opciones, pretenden ser las claves para captar y conseguir transmitir conocimiento a los más jóvenes.

1.4.3. Funcionamiento.

Paso 1: Cargar la imagen a digitalizar.

Pulsamos sobre el botón AbrirImagen…

…y cargamos una imagen de 256x256 píxeles de nuestra librería de fotos en blanco y negro. Los formatos soportados son JPEG, PNG o GIF. Si seleccionamos abrir una imagen mayor se redimensionará.

Figura 11. Ventana de selección de imagen.

Paso 2: Ajustar parámetros de digitalización

Para el análisis de imágenes en blanco y negro tenemos las siguientes pestañas en nuestro panel de edición de imagen:

- Tamaño de los cuadrados: véase (1.3.3).

- Umbral: a elegir, que nos indica que proporción de negro es necesaria en una cuadrícula para tomarla como negro en la digitalización. Cuanto mayor sea el umbral más precisa será la digitalización.

- Código de colores: por defecto son el verde para los píxeles que hayan surgido tras la digitalización pero que no estaban en la imagen original y el rojo para los que han desaparecido tras la digitalización. Estos colores se podrán cambiar si se cree conveniente picando sobre los mismos.

- Mostrar Mallado: véase (1.3.3).

- Diferencias: da la posibilidad de elegir entre mostrar los píxeles del objeto de la imagen que no ha sufrido modificación tras la digitalización o no mostrarlo.

- Utilidades: mostrará los resultados del área de la figura negra y el número de cuadrados negros tras cada digitalización.

Paso 3: Digitalizar la imagen

Pulsamos el botón “Mostrar Pixelado Cuadrado” o “Mostrar Pixelado Triangular” …

…y comenzará el proceso de digitalización, mostrándose la imagen digitalizada en el panel dispuesto para tal fin. Es productivo hacer muchas pruebas cambiando los parámetros, mostrando la malla, etc…y comprenderemos fácilmente conceptos muy importantes dentro del mundo de la digitalización de imágenes.

Figura 12. Muestra de un pixelado cuadrado.

En este caso podemos observar en la pestaña Utilidades los siguientes resultados:

Figura 13. Pestaña Utilidades tras el pixelado cuadrado.

Paso 4: Mostrar las diferencias.

Pulsamos el botón Mostrar Diferencias…

…y se cargará la imagen que muestra las diferencias entre la original y la digitalizada, para el mejor análisis del proceso de digitalización. Se mostrarán en un color verde claro las partes desaparecidas y en rojo las aparecidas de la imagen original durante el proceso. Los colores son configurables pulsando sobre el Código de colores.

Figura 14. píxelStudio tras mostrar las diferencias.

Paso 5:

Y por ultimo si quieres volver a empezar haz clik sobre LimpiarTodo…

… y empieza de nuevo con el proceso o si quieres trabajar con imágenes en escala de grises o color pulsa sobre el botón Volver a Elección…

…y selecciona en la ventana del menú de píxelStudio la opción deseada o también puedes Salir de la aplicación:

1.5. píxelStudio – Escala de Grises

1.5.1. Introducción.

Esta herramienta le permitirá medir de un modo cualitativo y cuantitativo un espacio bidimensional siendo capaz de digitalizar las imágenes en escala de grises, por ejemplo, con el número de grises que desee y con distintas resoluciones y comprobar las diferencias con la imagen original que mostraran la silueta de las figuras de la imagen.

1.5.2. Presentación.

Figura 15. Apariencia de píxelStudio - Escala de Grises.

Podemos observar en este caso como desaparecen varias pestañas del panel de edición de imagen si lo comparamos con el panel de Blanco&Negro, ya que no tienen utilidad. Y tenemos la novedad del Número de Grises.

1.5.3. Funcionamiento.

Paso 1: Cargar la imagen a digitalizar.

Pulsamos sobre el botón AbrirImagen…

…y cargamos una imagen en escala de grises o colores.

Paso 2: Ajustar parámetros de digitalización

Para el análisis de imágenes en escala de grises tenemos las siguientes pestañas en nuestro panel de edición de imagen:

- Tamaño de los cuadrados: véase 1.3.3.

- Número de Grises: podremos elegir un valor entre 1 y 256 y nos permitirá observar la calidad de una digitalización con más o menos número de colores, en este caso de grises.

- Mostrar Mallado: véase 1.3.3.

Paso 3: Digitalizar la imagen

Pulsamos el botón “Mostrar Pixelado Cuadrado” o “Mostrar Pixelado Triangular” …

…y comenzará el proceso de digitalización, en este caso lo primero que hace es que si la imagen original es en color la pasa a escala de grises y la muestra en el panel Imagen Original Gris y sobre esas imagen es sobre la que haremos el pixelado. En píxelStudio - Escala de Grises es muy importante observar las diferencias al elegir distintos números de grises y el pixelado triangular de las imágenes.

Figura 16. Muestra de un pixelado triangular en píxelStudio - Escala de Grises.

Además pasando el puntero del ratón sobre las imágenes veremos como nos da las coordenadas y el nivel de gris.

Paso 4: Mostrar las diferencias.

Pulsamos el botón Mostrar Diferencias…

…y se cargará la imagen que muestra la silueta de las figuras que aparezcan en la imagen.

Figura 17. Muestra la silueta en Escala de Grises.

Paso 5: Repetir proceso, volver al menú de píxelStudio o Salir.

1.6. píxelStudio – Colores

1.6.1. Introducción.

El objetivo principal en este bloque es transmitir que cualquier color es el resultado de la suma de los distintos valores de Red (rojo) + Green (verde) + Blue (azul) y para ello podremos mostrar la digitalización de una imagen en color y de cada una de las componentes por separado de esas imágenes.

1.6.2. Presentación.

Figura 18. Apariencia de píxelStudio – Colores

1.6.3. Funcionamiento.

Paso 1: Cargar la imagen a digitalizar.

Pulsamos sobre el botón AbrirImagen…

…y cargamos una imagen de 256x256 píxeles de nuestra librería de fotos de imágenes en color.

Paso 2: Ajustar parámetros de digitalización

Para el análisis de imágenes en color tenemos las siguientes pestañas en nuestro panel de edición de imagen:

- Tamaño de los cuadrados: véase (1.3.3).

- Mostrar Mallado: véase (1.3.3).

- Mostrar Componentes: nos dará la posibilidad de mostrar la componente roja, verde o azul de las imágenes que estén en los distintos paneles, una vez que se haya hecho el pixelado y las diferencias de la imagen a color.

Paso 3: Digitalizar la imagen

Pulsamos el botón “Mostrar Pixelado Cuadrado” o “Mostrar Pixelado Triangular” …

…y comenzará el proceso de digitalización, hará el pixelado cuadrado o triangular según nuestra elección.

Figura 19. Imagen a color con pixelado cuadrado.

Paso 4: Mostrar las diferencias.

Pulsamos el botón Mostrar Diferencias…

…y se cargará la imagen que muestra las diferencias entre la original y la digitalizada, que dará lugar a la silueta de la imagen en color.

Figura 20. Mostrar la silueta en color.

Una vez hecho esto se habilitarán las opciones del panel de edición de la imagen para Mostrar las distintas Componentes que nos darán, por ejemplo, el siguiente resultado volviendo a pulsar el botón Mostrar Diferencias y habiendo seleccionado previamente la opción Mostrar solo componente ROJA (RED R):

Figura 21. Muestra la componente ROJA en píxelStudio – Colores.