domingo, 17 de febrero de 2008

Imagen para un indicador por colores tipo semáforo

Resulta que necesitaba una imagen la cual su color indicara el estado de un "objeto", algo así como un semáforo, pero de más de un 3 valores, de hecho el catálogo de colores estaría en una base de datos.

El chiste es que pre-hacer una imagen por cada color que se definida en la base es inviable, pensé en hacer gala de mis conocimientos de la librería php GD
y tal vez crear imágenes "al vuelo" del color que necesitaba pero, esto traducido a el tiempo en que se generan y envían al cliente es demasiado, se me ocurrió la idea de hacer una imagen transparente y cuyo fondo fuera el que cambiara con estilos y javascript, y el color vendría en el response de una llamada ajax, resultado: algo mucho más interactivo.

A continuación el efecto de la misma imagen con distintos colores de fondo, un tip adicional: usar grises con opacidad inferior al 50% para dar el efecto de sombra.



También vean como uso la propiedad style.backgroundColor='red' de la imagen, para cambiarle el fondo.


4 comentarios:

jsoffer dijo...

Si las generabas al vuelo igual iban a terminar en algún caché, ya fuera en tu aplicación, algún proxy o en el caché de navegador... esta solución está bastante mejor, aunque casi seguro hace cosas raras en IExplode.exe

Oscar Islas L. dijo...

bueno no estoy muy seguro que la aplicación tenga un cache, yo creo que las iba a generar y generar y generar, dependiendo por usuario y por solicitud .... y como se supone tendrá muchos usuarios pues tenía que bajar en algo el tiempo de comunicación .... y es que cada vez que cambia una de cualquiera de varias listas se tiene que consultar (en BD) qué color le corresponde...

Tienes razón con respecto a las cosas raras, olvidé que el explorer 6 no soporta la trasparencia en los PNG, pero en el 7 creo que se ve bien, sin embargo fue código de blogger el que me marcó varios errores jejeje

jsoffer dijo...

Sí, del caché se me olvidó un pequeño detalle... el nombre del archivo va a ser el mismo no importa de qué color salga. Si se codificara como "archivoff0000.png" o similar entonces sí se podría pensar en algoritmos de cacheado.

Saúl dijo...

por lo menos piensas en este tipo de soluciones, no como las personas que comienzan parrafos diciendo "yo soy programador php" copian y pegan códigos de los foros o piden tareas en YR!, seguro que ellos hubieran hecho cada imagen a mano y usarían un switch-case jajaja