Cambiar look and feel de Openbravo con ImageMagic

Cuando realizamos una implantación es bueno que el cliente sienta que el sistema se ajusta totalmente a sus necesidades, y aunque parezca una tontería no esta de mas que la aplicación se personalice con sus colores corporativos y sus logos. Es mas, cuando hay que hacer una demo en un cliente el simple echo de cambiar el color de Openbravo al color corporativo de la empresa que vas a visitar, poner sus logos y el logo de nuestra empresa van a dejar la sensación de que hemos preparado la presentación. Además de para el cliente el cambio del color de la aplicación también puede ser útil para nosotros, por ejemplo poniendo distinto color en el sistema de producción y el de desarrollo/pruebas para ver de un simple golpe de vista en que plataforma estamos.

En Openbravo podemos cambiar el color de la aplicación y los logos. El cambio de los logos es sencillo tal y como se muestra en la wiki, lo que no me termina de convencer es el cambio del color de la aplicación. En la wiki de Openbravo explican como cambiarle el color con una aplicación de pago y solo disponible para Windows. Después de investigar un poco he encontrado la aplicación ImageMagic que es libre y disponible para Windows, Linux y Mac, aunque en este ejemplo voy a crear un script para linea de comando de Linux.

Esta es la apariencia de Openbravo antes de cambiar el color:

y esta la apariencia después de aplicar el script indicando que use un tono azul

No voy a detallar como crear el modulo de customización ni como cambiar los logos que eso lo explica bien el la wiki, solo voy a explicar como he cambiado el color con ImageMagic.

En la wiki explican como cambiar el look and feel del skin, tenemos que crear nuestro directorio para el modulo de skin como pone en la wiki


openbravo/modules/org.openbravo.examples.skinexample/web/org.openbravo.examples.skinexample/skins/ExampleSkin

y copiar el contenido del skin Default


openbravo/web/skins/Default/*

El script que he creado cambia las imágenes del skin procesandolas con Imagemagic para cambiarle el color. El código es muy sencillo simplemente mete en un bucle los archivos que hay que cambiar, y ejecuta un convert (de imagemagick) para primero pasarlo a escala de grises y luego colorearlo con el color que le hemos pasado como argumento.

#!/bin/sh
# Lista de colores en http://studio.webbyland.com/MagickStudio/Color.html
for fichero in
./Popup/_ParticularItems/Workflow/button.rollover.png
./Popup/_ParticularItems/Workflow/button.normal.png
./Popup/_ParticularItems/Workflow/button.pressed.png
./Popup/NavBar/backgroundCenter.png
./Popup/NavBar/backgroundLeft.png
./Popup/NavBar/backgroundRight.png
./Popup/NavBar/logoLeft.png
./Popup/NavBar/logoRight.png
./Menu/NavBar/backgroundCenter.png
./Menu/NavBar/backgroundLeft.png
./Menu/NavBar/backgroundRight.png
./Menu/NavBar/logoLeft.png
./Menu/NavBar/logoRight.png
./Menu/ToolBar/backgroundCenter.png
./Menu/ToolBar/backgroundLeft.png
./Menu/ToolBar/backgroundRight.png
./Common/Button/buttonBody.disabled.png
./Common/Button/buttonBody.normal.png
./Common/Button/buttonBody.pressed.png
./Common/Button/buttonBody.rollover.png
./Common/Button/buttonLeft.disabled.png
./Common/Button/buttonLeft.normal.png
./Common/Button/buttonLeft.pressed.png
./Common/Button/buttonLeft.rollover.png
./Common/Button/buttonRight.disabled.png
./Common/Button/buttonRight.normal.png
./Common/Button/buttonRight.pressed.png
./Common/Button/buttonRight.rollover.png
./Common/FieldButton/fieldButton.normal.png
./Common/FieldButton/fieldButton.pressed.png
./Common/FieldButton/fieldButton.rollover.png
./Main/LeftTabsBar/rightbutton.pressed.png
./Main/LeftTabsBar/rightbutton.rollover.png
./Main/LeftTabsBar/background.png
./Main/LeftTabsBar/backgroundBody.png
./Main/LeftTabsBar/backgroundBorder.png
./Main/LeftTabsBar/backgroundTop.png
./Main/LeftTabsBar/iconEditView.normal.png
./Main/LeftTabsBar/iconEditView.rollover.png
./Main/LeftTabsBar/leftbutton.normal.png
./Main/LeftTabsBar/leftbutton.pressed.png
./Main/LeftTabsBar/leftbutton.rollover.png
./Main/LeftTabsBar/rightbutton.normal.png
./Main/NavBar/backgroundCenter.png
./Main/NavBar/backgroundLeft.png
./Main/NavBar/backgroundRight.png
./Main/NavBar/buttonRight.disabled.png
./Main/NavBar/buttonRight.normal.png
./Main/NavBar/buttonRight.pressed.png
./Main/NavBar/buttonRight.rollover.png
./Main/NavBar/iconAbout.disabled.png
./Main/NavBar/iconAbout.normal.png
./Main/NavBar/iconAbout.pressed.png
./Main/NavBar/iconAbout.rollover.png
./Main/NavBar/iconBack.disabled.png
./Main/NavBar/iconBack.normal.png
./Main/NavBar/iconBack.pressed.png
./Main/NavBar/iconBack.rollover.png
./Main/NavBar/iconHelp.disables.png
./Main/NavBar/iconHelp.normal.png
./Main/NavBar/iconHelp.pressed.png
./Main/NavBar/iconHelp.rollover.png
./Main/NavBar/iconRefresh.disabled.png
./Main/NavBar/iconRefresh.normal.png
./Main/NavBar/iconRefresh.pressed.png
./Main/NavBar/iconRefresh.rollover.png
./Main/NavBar/logoLeft.png
./Main/NavBar/logoRight.png
./Main/NavBar/popupSeparatorBar.png
./Main/ToolBar/backgroundRight.png
./Main/ToolBar/backgroundCenter.png
./Main/ToolBar/backgroundLeft.png
./Popup/_ParticularItems/Workflow/button.focused.png
./Common/FieldButton/fieldButton.focused.png
./Common/Button/buttonBody.focused.png
./Common/Button/buttonLeft.focused.png
./Common/Button/buttonRight.focused.png
./Common/Button/buttonBody.default.png
./Common/Button/buttonLeft.default.png
./Common/Button/buttonRight.default.png
do
convert $fichero -colorspace gray
-fill $1 -tint 100 $fichero
done

El color se puede pasar por rgb, hexadecimal o con su nombre, en este link hay una lista de colores con su nombre y su codigo se puede ver una lista de los colores y sus códigos aquí.

Por último copiamos el código en un fichero dentro de nuestra carpeta en la que hemos copiado el skin y lo hacemos ejecutable para ejecutarlo en la consola.