Editar un Skin del Battery Status

Bueno, como ya comentamos en el post del Battery Status, los skins de este estupendo programa son editables y configurables. Así que vamos a ver como podemos hacerlo.

Primero vamos a partir de uno que ya tengamos instalado. En mi caso, partiremos del Large VistaTheme.

BatteryStatus

Al instalarlo se crea una carpeta llamada BatteryStatus dentro de \Windows Dentro de esa carpeta nos encontramos varios archivos y subcarpetas. En primer lugar, nos encontramos BatteryStatus.exe Este es el ejecutable de nuestro programa. Nos encontramos archivos de extensión .xml (default y BSLargueVistaTheme en mi caso) y carperas con el mismo nombre que estos archivos.

En las carpetas están los iconos a los que llamaremos desde el documento .xml son iconos bmp que pueden ser editados con cualquier editor de imágenes. Si os fijais todos tienen un colos rosa alrededor que no aparece en su ejecución. Este es el color que definimos como trasparente (se puede cambiar en el .xml), todo pixel con ese color cojera el color de fondo que tenga nuestra PDA.

Los arcivos .xml son los que se encgargan del tamaño y posicion de cada texto e imagen. No voy a adentrarme en programación para archivos .xml pero vamos a intentar con unas lineas generales ver como funcionan estos archivos.

Por ejemplo, nuestra columna 4 se compone de 4 iconos y su código es el siguiente:

<Row>
<!– default View 1 –>
<View height=”35″>
<!– first content box / start at 28 –>
<Item type=”lefticon” class=”cpuspeed”>
<image src=”cpu_freq.bmp” left=”16″ top=”3″ transparent=”ff00ff”/>
</Item>
<!– second content box –>
<Item type=”lefticon” class=”powerdrain”>
<image src=”drain.bmp” left=”48″ top=”3″ transparent=”ff00ff”/>
</Item>
<!– third content box –>
<Item type=”lefticon” class=”temperature”>
<image src=”temp.bmp” left=”78″ top=”3″ transparent=”ff00ff”/>
</Item>
<!– forth content box –>
<Item type=”lefticon” class=”phone_signal”>
<image src=”signal.bmp” left=”109″ top=”3″ transparent=”ff00ff”/>
</Item>
</View>
</Row>

Podemos observar que el código de la columna comienza con las etiquetas <row> </row> con las que indicamos donde empieza y acaba la columna. Le siguen las etiquetas <view height> Donde indicamos la altura que queremos que tenga esa columna. OJO: Si definimos una altura menor que el tamaño de los iconos, la siguiente columna se superpondrá.

Y Finalmente tenemos los 4 Items que tiene nuestra columna, en nuestro caso iconos.

<Item type=”lefticon” class=”temperature”>
<image src=”temp.bmp” left=”78″ top=”3″ transparent=”ff00ff”/>
</Item>

En la etiqueta image ponemos la ruta al icono scr=”temp.bmp” la posicion con respecto de la parte izquierda de la pantalla left=”78″, la posición con la parte de arriba de la columna top=”3″ (Definida por la columna anterior con su propiedad <view>) y el color de icono que queremos que sea transparente transparent=”ff00ff”

Cuando ne la siguiente columna queramos poner el texto, en vez de una etiqueta image ponemos una de texto (label)

<Item type=”iconvalue” class=”temperature”>
<label align=”center” left=”12″ top=”1″ width=”40″/>
</Item>

Con una poca de imaginación y esfuerzo conseguimos resultados muy buenos y agradables a la vista, totalmente configurados a nuestro gusto.

Responder

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: