Modificando software escrito por otros

Buenas! Espero que bien (de bien). Recientemente estoy participando como developeador en un proyecto divertido que iniciamos con marcos (alto coder) y emanuel (loco ingeniero electrónico). Este post es para intentar explicar ya que algunos por ahí me preguntan como es esto de modificar, adaptar, escalar, para bien o para mal😛 software desarrollado por otras personas cuyas metodologías y maneras de hacer software es desconocida en primera instancia por los curiosos como nosotros.
Puntualmente y para no aburrir voy a intentar explicar una de las intervenciones que realicé en la parte de la “vista” de un proyecto muy copado llamado ZoneMinder, con base en Perl, PHP sobre Gnu/Linux. Esta solución no es lo que se dice “LA IMPLENTACION” pero sirve para el propósito de este artículo😛.

1) ¿Qué podemos aportar al proyecto o creemos que se puede mejorar?





En estos casos y como pensamos orientar el sistema al público en general consideramos que los campos para color en los formularios no eran muy intuitivos, no todo el mundo se sabe los colores en valores hexadecimales, incluso al tipear los valores en el campo de texto….no se apreciaba una actualización y por ende uno debía recurrir a otros programas como colorzilla o gimp para saber que color estábamos escribiendo.

2)¿Que vamos a hacer para mejorar? La idea fué adaptar un colorPicker o selector de color bien sencillo de usar…para eso seguimos la ideología del software libre: no reinventar la rueda, después de buscar y probar varias librerías javascript, optamos por http://jscolor.com/ porque está muy bien y tiene licencia libre, a la cuál tuve que realizarle unas modificaciones que explicaré al final del artículo😛

3) Ok, pero…como funciona esto? Respecto a ZoneMinder es muuuuy largo explicar todos sus aspectos, me limitaré a lo necesario para este caso particular: la sección de nuestro “skin” llamado “aura” al igual que nuestro proyecto. Esto se encuentra en el directorio por ej. y dependiendo de la distro que uses:
/var/www/proyecto_aura/skins/aura/views
Allí dentro tengo 4 directorios importantes

  • views/ – Contiene los archivos PHP para armar la vista final.
  • views/css/ – Contiene los archivos CSS para el estilo correspondiente a cada “view”
  • views/js/ – Contiene los archivos javascript para las interacciones y programación de vista.
  • views/graphics/ – Agregado nuevo, contiene los archivos de imágen para las vistas y organizar un poco mejor, antes provenían del directorio padre y generaba confusión.

Cabe destacar que la mayoría del conocimiento obtenido es a prueba y error, porque la documentación está aún en pañales para la vista en ZoneMinder.

4) ¿Como lo integramos? Hay varias “vistas” que utilizan este componente de color vamos a explicar una en particular.

Caso 1: ZONAS (Se refieren a zonas de detección de movimiento de diferentes tipos y alarmas con adquisición de imágenes mediante cámaras).

4.1) En el caso de zonas se utilizaban 3 campos de texto con valores RGB (0-255) para setear el color de aviso de zonas y alarmas utilizando en cada campo por separado como vemos en la primer imagen de este artículo.
Los archivos en cuestión son zone.php y zone.js. La manera de trabajar era un tanto particular. El script inicializaba los campos 3 campos R, G y B partiendo de un valor que se obtiene de la base de datos, este valor representa el  color en “decimal” y se realizaba la separación de colores según la “base” correspondiente “matemáticamente hablando” como veremos a continuación.

4.1a) zone.php (campos RGB)

<input type=”text” name=”newAlarmRgbR” value=”<?= ($newZone[‘AlarmRGB’]>>16)&0xff ?>” size=”3″ onchange=”limitRange( this, 0, 255 )”/>

<input type=”text” name=”newAlarmRgbG” value=”<?= ($newZone[‘AlarmRGB’]>>8)&0xff ?>” size=”3″ onchange=”limitRange( this, 0, 255 )”/>

<input type=”text” name=”newAlarmRgbB” value=”<?= $newZone[‘AlarmRGB’]&0xff ?>” size=”3″ onchange=”limitRange( this, 0, 255 )”/>

La primera desición fué obviar esta forma de trabajar y utilizar solamente valores hexadecimales y 1 campo de texto en vez de 3, para eso descarté esas líneas y utilicé solamente la siguiente:

<input type=”text” value=”<? dechex($newZone[‘AlarmRGB’]) ?>” class=”color” readonly=”reanonly” name=”color” />

dechex es una función en php que convierte valores decimales a hexadecimales, la utilizo para inicializar el campo de color guardado o “por defecto” dependiendo si es para una nueva zona o para edición. También agregué el class=”color” para utilizarlo en el colorPicker y name=”color” para usarlo en el POST del formulario.

4.1b) zone.js

Todavía no funcionaba el componente😛. Para organizar bien pasé a copiar los elementos del colorPicker necesarios en sus respectivas carpetas (javascripts en /js, jpg, png etc en /graphics), el código css es muy pequeño y simplemente lo incluí en el estilo general del skin.

En zone.js escribí la siguiente función para incorporar el código javascript necesario para que funcione el colorPicker.

include(‘jscolor.js’);

function include(filename){

var head = document.getElementsByTagName(‘head’)[0];

script = document.createElement(‘script’);

script.src = filename;

script.type = ‘text/javascript’;

head.appendChild(script);

}

Luego tuve que realizar otras modificaciones: recordemos que el componente trabajaba con 3 valores RGB y ahora trabajo solamente con 1 valor hexadecimal. El formulario original realiza un chequeo antes de enviar el POST y actualiza algunos campos “ocultos” mediante zone.js

  • Antes ejecutaba el siguiente codigo javascript:

form.elements[‘newZone[AlarmRGB]’].value = (form.newAlarmRgbR.value<<16)|(form.newAlarmRgbG.value<<8)|form.newAlarmRgbB.value;

donde [‘newZone[AlarmRGB]’].value es el valor actualizado del campo oculto que envía por post para guardar el valor del color en decimal.

  • Ahora hace esto:

form.elements[‘newZone[AlarmRGB]’].value = parseInt(form.color.value,16);

La funcion parseInt(form.color.value,16) convierte el valor obtenido del texto asociado al colorPicker en hexadecimal y lo convierte a decimal considerando la “base” 16.

WTF! Qué es eso?

Breve explicación: el sistema hexadecimal es lo que se llama de numeración posicional, en informática podemos expresar valores binarios en bytes y tenemos en 1 byte 28 valores posibles, y esto puede representarse como

24 x 24 = 16 x 16  = 1 x 162 + 0 x 161 + 0 x 160

De esa manera puedo resolver cualquier número considerando la base 16.

Los números que podemos usar en hexadecimal son

S = {0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F} donde A = 10, B = 11, C = 12, D = 13, E = 14 y F = 15

Ejemplo 3E0A = 3 x 163 + E x 162 + 0 x 161 +  A x 160 = 15882

Los colores se expresan con 6 digitos hexadecimales ejemplo Rojo = FF0000 (Hex) = 16711680 (decimal).

Bueno…se que soy un inchapelotas, pero es importante saber de donde vienen las cosas , para entender por ejemplo que significa el número 16711680 proveniente de la base de datos, lo aprendido en la facultad nunca vienen de más😀 y nunca sabemos cuando vamos a necesitar de las matemáticas.

Con esto tenemos funcionando nuestro aporte!

Upsss….problemas al ejecutar el script… notamos que todos los elementos “input” de la aplicación aparecen con valores hexadecimales, esto incluye los botones de enviar, de reestablecer, etc. Y no es nada agradable ver un botón que diga #F0DA2E, como que no se entiende para que sirve jaja. Bueno el asunto estaba en el javascript del colorPicker.

Aquí esta un parchesito que hice para ese inconveniente:
jscolor.js

var e = document.getElementsByTagName(‘input’);

for(var i=0; i<e.length; i+=1) {

… /*Código que no viene al caso*/

if (e[i].type == ‘text’){

e[i].color = new jscolor.color(e[i], prop);

}

… /*Código que no viene al caso*/

}

Lo que hace este código “resumido” es tomar los elementos “input” que encuentre en la página y asignarles el color obtenido en la selección del colorPicker,  lo que hice mediante ese if fué limitar solamente esa asignación a los elementos “input” del tipo “text” y entonces podemos tener un poco más de control a la hora de usarlos y que no afecte a los demás elementos.

Uffff… creo que eso es todo, les dejo una captura de ejemplo en el uso del componente. Recuerden que para llegar a esto estuve dando vueltas un rato, probando otras alternativas quizás mas trilladas jejeje….bueno pero como conclusión me gustaría decir que “la solución más elegante es siempre la más simple”.


6 pensamientos en “Modificando software escrito por otros

  1. Mar dice:

    Que grande!, te imaginas “reinventando la rueda” con software propietario todos los días?… y generando más software propietario “intocable”….
    En la posición de un flaco “fan del soft propietario”, con su flamante .dll que tiene el color picker… y no anda como el quiere… no le queda otra opción que descartarlo, pagar una modificación al developer original o bien soñar con modificar el código binario (naaah!).
    Vuelvo a insistir que los desarrolladores de software libre tenemos una ventaja enorme en comparación a los desarrolladores de soft propietario. Sin contar los amigos, las tardes de desarrollo, las cervezas y contemplar el monstruo arrasando…
    De paso, si mal no recuerdo Josi pasó tres tardes y no se cuantas noches jugando con la paleta de colores…🙂 son como 5 termos de mate y un montón de sueños perdidos… jiji

  2. Dario dice:

    El tema principal es la documentación, si lo que quieres modificar está comentado, con documentación de funciones, y todo lo que seria el manual de utilización (claro, hablo del código), es mucho mas sencillo modificar y colaborar con ese proyecto.
    El caso contrario, es mas complicado porque tengo que leer mucho mas código para interpretar que quiso hacer, pero igual se puede, y hacer un feedback con el creador para mencionar como mejorar. Eso es lo que hace grande al SL. Compartir y mejorar.

    Muy buen post

  3. Excelente post!, ya lo estoy compartiendo con mis alumnos para que puedan seguir apreciando el valor que tiene adoptar SL.

  4. Hugo Lorente dice:

    Hola, veo que este post es bastante viejo. En el mismo mencionas algo de Aura, estoy buscando un Skin mas elegante y veo que el que mostras tiene todo lo necesario.
    Donde se puede ver esto?
    Muchas Gracias!

    • jositux dice:

      Hola es viejíiiiiisimo, veo de colgarlo en github esta semana …pero no sé si iría bien no usé nunca más ninguna versión nueva ese skin tenía cosas de mootools vamos a ver si funciona hahahah. Aguantame unos días y vuelveme a pedir amigo. Abrazo

      • Hugo Lorente dice:

        Muchas Gracias! Espero tu respuesta. Si te interesa reflotar el proyecto, podemos charlarlo. Abrazo!!

Dejá una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: