Color RGB

Introducción

Uno de los formatos más comunes actualmente para manejar colores en las aplicaciones informáticas es el formato de color de 32 bits. En este formato se utilizan 4 bytes para indicar la intensidad relativa de cada componente del color (R para rojo, G para verde y B para azul) y del canal alfa (que indica el nivel de transparencia, donde 0 es totalmente transparente y 255, totalmente opaco). En el estándar más usado, el rojo corresponde al byte de mayor peso, luego va el verde, el azul y finalmente, en el de menor peso, el canal alfa.

En este proyecto se va a crear una aplicación que permitirá, mediante cuatro barras deslizantes, seleccionar el valor de cada uno de los componentes de un color con este formato, y permitirá ver además el color configurado como si fuera totalmente opaco y sobre una cuadrícula blanca y negra para apreciar su transparencia. Se propone también, como ampliación, poder realizar una foto con la cámara y que el color configurado se vea superpuesto sobre ella.

Al realizar este proyecto se van a aprender conceptos acerca de la disposición de los elementos en pantalla, las barras de selección o Slider de la interfaz gráfica, el uso de los colores en las aplicaciones y, por supuesto, conceptos de programación relacionados con los procedimientos o funciones y las estructuras iterativas o bucles.

Se propone construir esta aplicación de forma incremental siguiendo los pasos que se describen a continuación.

Paso 1: disposición de la interfaz gráfica

Como se ve en la imagen, la aplicación final consta de varios elementos gráficos cuya disposición en pantalla debe de ser cuidada para que el aspecto sea agradable al usuario. Viendo la imagen se distinguen claramente cuatro zonas alineadas en vertical:

• Una pequeña franja superior en la que aparece el título.
• Una amplia parte central en la que se disponen, en vertical, cuatro elementos similares, y cada uno de ellos consta de otros tres dispuestos en horizontal: la barra, un texto y un cuadro de color.
• Otra pequeña franja en la que aparece el valor del color en hexadecimal.
• Una sección inferior de tamaño medio en que se ven los dos cuadros que muestran el color elegido.

Además, se observa que la barra de estado superior del teléfono no es visible y que la pantalla contiene una imagen de fondo, poco contrastada para que no moleste a la vista, que permite apreciar la transparencia del canal alfa.

Veamos cómo disponer en la pantalla de nuestra aplicación los componentes de disposición gráfica, layouts en MIT App Inventor, necesarios para obtener en nuestro proyecto una imagen similar a la mostrada:

• En las propiedades de la pantalla de la aplicación, Screen1, seleccionamos alineamiento vertical centrado y ponemos el nombre deseado a la aplicación, por ejemplo «rgbFoto». Además, fijamos la orientación vertical (Portrait), deseleccionamos la posibilidad de realizar scroll, el título y que se muestre la barra de estado. Por último, añadimos la imagen de fondo fondo.png y el icono para nuestra App, RGBIcon.png
• Ahora vamos a situar en la pantalla y a dimensionar los cuatro elementos de disposición gráfica. De la sección layout seleccionamos un elemento de de disposición horizontal, HorizontalArrangement, dos elementos de disposición vertical, VerticalArrangement y un último elemento de disposición horizontal y los vamos situando en la pantalla ocupando todo el ancho y unos sobre otros. Para que sea más sencillo seguir las explicaciones y trabajar en el editor, los nombraremos respectivamente, de arriba a abajo, Titulo, Principal, Texto y Color.
• Vamos a ver a continuación cómo configurar y rellenar cada uno de estos elementos de disposición vertical.
  • Titulo: configuramos alineamiento centrado tanto en horizontal como en vertical. Fijamos su altura a un porcentaje pequeño del total, por ejemplo un 10%. Situamos una etiqueta TextoTitulo con las características de tamaño y el texto que nos parezcan adecuados. En el programa suministrado se usa «Color RGB».
  • Principal: en esta zona se van a situar los elementos para seleccionar y visualizar los cuatro componentes del color. En primer lugar configuraremos su altura con un valor grande, por ejemplo un 60%. A continuación, en su interior situaremos verticalmente cuatro elementos de disposición horizontal que llamaremos, de arriba a abajo, Rojo, Verde, Azul y Alfa para facilitar su identificación. Cada uno de estos cuatro elementos tendrá alineamiento centrado en horizontal y vertical, su altura será un cuarto del de la estructura que los contiene, 15% en el caso que estamos describiendo, y llenarán el ancho de aquella.
  • Texto: configuramos alineamiento centrado en horizontal y arriba en vertical. Fijamos además su altura a un porcentaje pequeño del total, por ejemplo un 8%. En esta zona aparecerá el valor en hexadecimal del color seleccionado. Para ello situamos una etiqueta ColHexa con las características de tamaño que nos parezcan adecuadas y el texto «0x7f7f7f7f».
  • Color: aquí van a aparecer dos cuadros para mostrar los colores. En uno de ellos tendremos el color opaco y en el otro aparecerá sobre un fondo a cuadros con la transparencia fijada en el canal alfa. Antes de emplazar los dos cuadros, configuramos alineamiento centrado en horizontal y arriba en vertical y fijamos la altura a un porcentaje medio del total, por ejemplo un 20%. Ahora situaremos dos elementos de disposición horizontal y llamaremos Plano al de la izquierda y Cuadros al de la derecha. Configuramos la altura de ambos algo menor que la del contenedor, por ejemplo un 15%, y su anchura un 40%. En Cuadros añadiremos como fondo la imagen chk.png Por último situamos en Plano una etiqueta que llamaremos ColorPlano y en Cuadros otra que llamaremos ColorCuadros. Hacemos que ambas ocupen todo el alto y ancho disponible y les asignamos un color de fondo que creamos conveniente. En el ejemplo hemos usado «#7f7f7fff» y «#7f7f7f7f», respectivamente.

Con esto hemos configurado la disposición gráfica de la aplicación, que quedaría como se ve en la imagen, pero no hemos añadido ninguna funcionalidad mediante bloques de código. En el siguiente paso haremos que se muestren y funcionen las barras deslizantes de selección de color.

Descargar solución.

Paso 2: selección de los componentes de color

En este paso añadiremos los elementos de interfaz y los bloques para poder seleccionar cada componente del color mediante una barra de selección y mostrar el valor hexadecimal de dicha componente y su intensidad de color. Primero se realizará todo el proceso para la componente roja y luego se repetirá, cambiando los valores adecuados, para tener las 4 en funcionamiento. Veamos para primer paso cómo añadir los elementos gráficos y posteriormente los bloques de código.

En primer lugar vamos a añadir los elementos gráficos del color rojo. Para ello, sobre el elemento Rojo añadiremos:

• La barra de selección o Slider que llamaremos BarraRojo. La situaremos a la izquierda, con una anchura del 50%. En la barra seleccionaremos negro para el color de la izquierda y rojo para el de la derecha; el valor mínimo, que es el que devuelve al tener la selección a la izquierda, será 0 y el máximo 255. De esta manera ajustamos los valores devueltos a los que puede tomar un byte. Además habilitamos el cursor —thumb— y lo situamos inicialmente al medio, poniendo un valor de 127 en su posición.
• Una etiqueta que mostrará en hexadecimal el valor seleccionado. La llamaremos ValRojo y la situaremos a la derecha de la barra. El tamaño horizontal será medio, por ejemplo 18%; el resto de los valores los configuramos para que la apariencia quede adecuada. Finalmente el texto será 127 expresado en hexadecimal, es decir 7F.
• Para mostrar el recuadro de color vamos a usar un truco que consiste en añadir otra etiqueta que no tendrá texto, pero cuyo fondo usaremos para mostrar el color. Así pues, añadimos la etiqueta RectRojo y ponemos una altura y una anchura para mostrar un rectángulo de tamaño adecuado, en nuestro ejemplo 10% y 20% respectivamente. El texto inicial lo dejamos en blanco y ponemos como color de fondo el valor #7f0000ff seleccionando la opción Custom en el cuadro de selección de color. Según se ha dicho, este valor corresponde a un color opaco con su componente roja al valor 7F dicho antes y sin componentes de otro color, con lo que conseguimos mostrar en la línea del color rojo únicamente su componente.

Queremos ahora que al desplazar el cursor de la barra y obtener, como se ha dicho antes, un valor entre 0 y 255, el texto cambie reflejando dicho valor en hexadecimal y el color del cuadro modifique su componente roja según ese valor. En la sección Blocks de la vista de programa seleccionamos el evento asociado al cambio de posición del cursor de BarraRojo que nos permite tener acceso al valor configurado en la barra según la posición del curso mediante la propiedad ThumbPosition. Con este valor podemos generar el texto mostrado en ValRojo y el color del recuadro RectRojo. En el primer caso habremos de usar un bloque de la sección Math que permite expresar un valor en hexadecimal, y para el segundo hay que tener en cuenta que el color se puede crear mediante una lista con sus componentes y un bloque de la sección Colors, así que usaremos el valor en la componente roja, dejando las otras dos de color a 0 y el canal alfa a 255. Hay que comentar primero que el valor devuelto por la barra de selección es un número real, con parte decimal, que hemos de convertir a entero antes de usarlo en los casos descritos. Realizaremos la conversión mediante el bloque ceiling de la sección Math.

Una vez completados estos pasos, podremos ver el funcionamiento de la barra de selección del color rojo y cómo, al mover el cursor o pulsar en algún punto de la barra el valor del color y la intensidad del rojo del cuadro cambian. Cuando hayamos probado que esto funciona correctamente, repetiremos los pasos para los otros colores y el canal alfa, teniendo en cuenta la posición de las distintas componentes de color a la hora de crear el color resultante. En el ejemplo, para el caso del canal alfa se ha optado por poner a 255 las tres componentes de color. Si se hubieran puesto a 0 el cuadro cuya transparencia modificamos sería de color negro.

Antes de continuar con el siguiente paso se va a proponer una pequeña extensión. Cuando usamos el valor devuelto por la barra en hexadecimal, en general tendrá dos cifras significativas pero, cuando es muy pequeño, la mayor será 0 y el texto se imprimirá con un único carácter. Si se desea mostrar siempre con dos, es decir, mostrar los 0 a la izquierda, hay que hacer un pequeño procedimiento que complete el texto añadiendo a la izquierda los 0 que faltan. Se propone hacer un procedimiento que llamaremos hex2txt que reciba dos parámetros, el valor a convertir y el número de caracteres del texto que devuelve. En los bloques que hemos hecho hasta ahora, sustituiremos la conversión a hexadecimal por una llamada a este procedimiento con el valor devuelto por la barra y pasado a entero y 2 como número de cifras.

Este procedimiento convertirá el valor a hexadecimal y, mientras el número de cifras del texto resultante sea menor que el indicado, añadirá un 0 a la izquierda y volverá a verificar la longitud.

Ahora tenemos las cuatro barras de selección funcionando y podemos ver que el color y los textos se modifican mediante ellas. En el siguiente paso terminaremos haciendo que, al cambiar el valor de cualquiera de las barras se actualicen los colores sobre los dos recuadros inferiores y se genere el valor hexadecimal de los 32 bits del color.

Descargar solución.

Paso 3: juntando los componentes del color

En el paso anterior conseguimos que el color asociado a cada componente cambiara al modificar la posición del cursor de cualquier barra deslizante. Ahora hemos de hacer que al cambiar cualquiera de las 4 barras deslizantes se modifique también el color de los dos rectángulos de la sección inferior y cambie el valor hexadecimal del color, mostrado sobre ellos.

Podemos añadir primero el código en la barra de color rojo. A los bloques activados por el evento asociado al cambio de BarraRojo añadimos la modificación del color de fondo de los recuadros ColorPlano y ColorCuadros. El primero se formará con los valores de las barras de las tres componentes R, G y B y será opaco; el segundo tendrá las mismas tres componentes iniciales y el valor del canal alfa en la cuarta. Ahora podemos ver que al desplazar la barra roja, el color de los cuadros inferiores se modifica. Podríamos repetir este bloque de código en los eventos asociados al cambio de las cuatro barras deslizantes pero, para evitar repetir cuatro veces el mismo bloque es mejor usar un procedimiento. Así pues, vamos a encapsular el nuevo bloque añadido al evento asociado a la barra deslizante roja en un procedimiento que llamaremos update y al final de cada uno de los cuatro eventos asociados a las barras, una llamada a dicho procedimiento. Ahora al mover cualquiera de las barras cambiará el color de los rectángulos inferiores.

Falta todavía hacer que se muestre el valor hexadecimal correcto sobre los cuadros de color. Su valor numérico se calcula como R * 256 ³ + G * 256 ² + B * 256 + A, siendo R, G, B y A respectivamente las partes enteras de los valores de las barras deslizantes correspondientes. Este valor se puede calcular también, de forma más rápida —es lo que se hace para calcular valores de polinomios, por ejemplo— como (((R * 256 + G) * 256) + B * 256) + A y esta expresión se puede programar fácilmente iterando sobre la lista con los valores que nos permiten formar el color de ColorCuadros. Con este valor y 8 como número de cifras usamos la función hex2txt para generar el texto hexadecimal y concatenamos «0x» a su izquierda para obtener un texto igual al mostrado en la etiqueta ColHexa. Todo esto lo incluimos en el procedimiento update y ya tenemos prácticamente terminado este paso.

Falta un pequeño detalle que puede haberse hecho evidente si hemos realizado pruebas del código mostrado hasta ahora. En algunos casos, al modificar una de las barras desde el estado inicial, el valor hexadecimal mostrado para el color global no es el esperado, pues las componentes de los colores no modificados pueden no ser iguales a las mostradas junto a cada barra. Esto se debe a que el valor devuelto por las barras depende de la posición del cursor y de su longitud, y si esta es inferior a 255 puede no devolver todos los valores enteros que caben en un byte, en particular, el valor 7F que configuramos por defecto. Si queremos corregir este pequeño desvío bastará añadir un bloque que se active al iniciar la aplicación, con el evento Initialize que se encargue de leer el valor real de cada barra, actualizar el texto mostrado a su derecha y llamar al procedimiento update para corregir el valor del color global.

Con esto ya tendremos correctamente terminada la aplicación base. En el siguiente paso propondremos y programaremos una sencilla ampliación, terminando así el proyecto.

Descargar solución.

Paso 4: virando el color de una foto

En los tiempos de la fotografía analógica se realizaba en los laboratorios un efecto que se llamaba virado a sepia y consistía en aplicar un lavado químico a la foto para que tomara una tonalidad amarillenta y pareciera una fotografía antigua. Ahora que nuestra aplicación nos permite configurar el color que queramos con la transparencia deseada, vamos a ampliarla para que permita tomar una fotografía y nos muestre el resultado de superponer sobre ella el color configurado. Con esto además veremos cómo hacer una aplicación con varias pantallas y cómo pasar de la una a la otra.

En la interfaz, en la pantalla inicial Screen1 añadiremos AccelerometerSensor de la sección Sensors y lo llamaremos Acelerometro. Usando el botón Add Screen... añadiremos una segunda pantalla que llamaremos Camara y pondremos en ella un elemento de ajuste vertical llenándola completamente que llamaremos Capa1 y una Camera que obtendremos de la sección Media.

El el código de la pantalla original añadiremos una nueva variable global que llamaremos Selected e inicializaremos con cualquier color de la sección Colors. Además en el procedimiento update añadiremos el código necesario para que esta variable tome el valor del color configurado mediante las cuatro barras deslizantes, como hicimos para generar el color de ColorCuadros. Añadiremos un nuevo bloque que responda al evento de agitar el teléfono, mediante los bloques asociados al acelerómetro, y que abra la ventana Camara con el valor inicial Selected.

En el programa de la otra pantalla añadiremos una variable global que llamaremos Filtro inicializada con el valor de inicio de la pantalla, y pondremos dos bloques sencillos:

• Al inicializar la pantalla llamaremos al procedimiento TakePicture de Camera1.
• Cuando se haya tomado la foto, es decir con el evento AfterPicture de Camera1, pondremos en el fondo de la pantalla Camara la imagen tomada, y en el color de fondo del elemento Capa1 el valor Filtro que es color seleccionado con las barras en la pantalla anterior.

Ahora ya podemos dar por terminado el proyecto, y podemos dedicarnos a tomar fotos y virar su color.

Descargar solución.