¿Cómo descomprimir/comprimir un archivo .bin? · Repetimos, el fondo tiene un tamaño máximo de...

¿Cómo descomprimir/comprimir un archivo .bin?

Primero de todo nos descargamos la release compilada AmazfitBipTools.7z desde

la página https://bitbucket.org/valeronm/amazfitbiptools/downloads/

Lo descomprimimos con 7zip, ya que si usamos Winrar u otro es bastante probable

que nos de error.

Luego nos situamos dentro de la carpeta donde hayáis descomprimido con el

terminal, ponemos el bin en la misma carpeta y ejecutamos Watchface.exe

nombre_archivo.bin

NOTA: Para ir haciendo la guía usaré el WatchFace ESPANA_EJER_AIRE_V1.bin. ¿Por

qué ese? Por nada en especial, simplemente se ven muchos datos en pantalla,

pero sobre todo porque se pueden ver los límites y los márgenes de manera más

clara para el que quiere empezar a crear su propio WatchFace. He elegido este,

pero nos puede servir para empezar cualquier otro similar.

NOTA2: El archivo .bin siempre debe tener la extensión en minúsculas, ya que si

no, la extracción fallara:

Después de ejecutarse veremos que nos ha creado una carpeta con el mismo nombre

que el fichero que hemos decidido descomprimir, para nuestro

ejemplo nombre_archivo.bin la carpeta creada se llamará nombre_archivo

https://bitbucket.org/valeronm/amazfitbiptools/downloads/

En el proceso puede que nos salte algún aviso como el siguiente:

Si nos damos cuenta se refiere al color #FEFE00, pero no hay que preocuparse ya

que corresponde al “color” transparente.

Dentro de esta carpeta encontraremos todos los recursos de nuestro watchface,

entre los que destacaremos las imágenes, el archivo json que controla la

ubicación de todas estas imágenes dentro de nuestro watchface y la

previsualización del watchface.

Para comprimir de nuevo todo el trabajo en un fichero bin haremos como en el

paso 2 pero señalando el fichero json Watchface.exe

nombre_archivo/nombre_archivo.json, ahora ya podemos ir a buscar el watchface

creado que estará dentro de la carpeta con nombre nombre_archivo_packed.bin

Si nos damos cuenta nos da un aviso por los colores, pero podemos ignorarlo.

Con todo esto ya podemos empezar a trabajar y podemos hacer las pruebas en

nuestro propio reloj.

Consideraciones generales

1. El tamaño de la pantalla del reloj. El espacio con el que podemos trabajar

es de 176x176 pixeles. En esta guía todo lo vamos a manejar en pixeles, así que

es más que recomendable usar un programa de edición de imágenes que soporte la

medida en pixeles. No es obligatorio, pero si tenemos algún programa que mida

en centímetros o cualquier otra medida deberemos hacer los cálculos a mano.

2. Colores a utilizar. El sistema del reloj tiene limitaciones en cuanto el

color. Podremos usar la siguiente paleta:

Negro

#000000

RGB(0,0,0)

Cyan

#00FFFF

RGB(0,255,255)

Amarillo

#FFFF00

RGB(255,255,0)

Azul

#0000FF

RGB(0,0,255)

Rojo

#FF0000

RGB(255,0,0)

Blanco

#FFFFFF

RGB(255,255,255)

Verde

#00FF00

RGB(0,255,0)

Púrpura

#FF00FF

RGB(255,0,255)

Transparente

#FEFE00

RGB(254,254,0)

NOTA: No confundir el Amarillo con el color Transparente. Aunque parezcan

iguales, el código es distinto.

Al lío

Abrimos el archivo con extensión .json con nuestro editor de texto favorito. Yo

uso Notepad++ porque detecta que es un archivo .json:

Como podéis ver, hay diferencia.

1. El fondo del WatchFace

Archivo: 000.png

“Background”: Es la sección o atributo del WatchFace que vamos a editar

“Image”: Es el atributo del que se compone “Background”. En este caso una

imagen

“X”: Es la posición inicial en el eje X de la imagen

“Y”: Es la posición inicial en el eje Y de la imagen

“ImageIndex”: Es la imagen que usaremos como fondo del WatchFace. Como el valor

es 0, el sistema añade dos ceros delante y la extensión .png. Si tuviese

decenas el sistema añadiría un cero delante y la extensión .png.

Ejemplos:

“ImageIndex”: 0 corresponde a 000.png




Posición

(X:0,Y:0)

Repetimos, el fondo tiene un tamaño máximo de 176x176 pixeles. Si usamos una

imagen de 176x176 pixeles, ya sabemos que la posición inicial de X e Y deberá

ser 0 para que ocupe la totalidad del fondo. Si usamos una imagen más pequeña,

por ejemplo de 156x156 pixeles, nos sobran 20 por cada lado, por lo que podemos

poner la posición X en 10 y la posición Y en 10 y así nos sobra 10 por la

izquierda y 10 por abajo. El resultado será la imagen centrada un poquito más

péquela con un margen de 10x10x10x10 en cada lado y quedará perfectamente

centrada. Si hacemos esto, o algo similar (no tiene porque estar centrada, eso

a gusto de cada uno), deberemos tener en cuenta ese margen a la hora de meter

cada sección, sumándole ese margen.

Vamos a editar este fondo de pantalla.

Bien, lo que he hecho es usar los colores Negro, Rojo y Blanco, teniendo

cuidado siempre de usar el código de color que corresponde a cada color. No os

fieis de lo que se ve en un monitor, ya que puede engañar.

He cambiado los colores, he centrado los puntos de separación del reloj en la

franja blanca y he ajustado la palabra “PASOS:” con un estilo que me gustaba

más.

Todo pintado con la herramienta lápiz a 1 pixel de grosor, para así asegurarme

de usar los colores correctos. Por ejemplo, si usamos la herramienta de texto,

al rasterizar el texto se van a ver degradados de color que el reloj no

reconocerá. Por eso siempre es mejor pintarlo a mano: te ahorras problemas.

2. La hora > Decenas de la hora

Nuestra hora está divida en 4 partes. La decena/unidad de la hora y la decena/

unidad del minuto. En nuestro watchface no necesitamos segundos, pero ya os

imagináis que habrá que añadir si lo tenemos. Exacto, la decena/unidad del

segundo.

“Time”: Es la sección o atributo del WatchFace que vamos a editar

“Hours”: Es uno de los cuatro atributos del que se compone nuestro “Time”

“Tens”: Es el atributo que vamos a editar, en este caso las decenas de la hora



“ImageIndex”: Es la imagen que usaremos como fondo del WatchFace

“ImageCount”: Es el número de imágenes que usaremos. Los números son

0,1,2,3,4,5,6,7,8,9 por lo tanto tenemos 10 números.

Bien, tenemos dos opciones para el número. Si la franja es blanca ponemos el

fondo blanco, o si lo preferimos le pones el fondo transparente, por lo que nos

dará igual que fondo tenga. La única preocupación es que cuanto más contraste

tenga el fondo de los números mejor se verá.

y en nuestro watchface funcionaría igual.

“¿Entonces por qué los voy a hacer transparentes? Me olvido y ya está.”

Bueno, si los haces transparentes son más fáciles de reutilizar en otros

proyectos con un fondo similar, ya que no tienes que repintar el fondo en cada

número ni en cada imagen.

2. La hora > Unidades de la hora

“Time”: Es la sección o atributo del WatchFace que vamos a editar

“Hours”: Es uno de los cuatro atributos del que se compone nuestro “Time”

“Ones”: Es el atributo que vamos a editar, en este caso las unidades de la hora



“ImageIndex”: Es la imagen que usaremos como fondo del WatchFace



Vaya, ImageIndex e ImageCount son los mismos valores que en “Hours” > “Tens”,

¿Por qué?

Tanto las decenas de la hora como las unidades de la hora son los mismos

números (mismas imágenes) y los mismos números (10 en total) por lo que son los

mismos valores.

Si queremos podemos diseñar gráficos diferentes para las decenas y para las

unidades, por lo que el ImageIndex cambiaría por el número del gráficos que

fuese.

Vemos que hay suficiente separación hasta los puntos centrales. Quizás incluso

haya demasiada. En ese caso, deberemos ajustar el atributo X en Hours > Ten y

Hours > Ones para acercarlo a los puntos incrementándolo por ejemplo 7 puntos.

Quedaría en Hours > Ten > X:35 y en Hours > Ones > X:55 y probar que tal. Lo

vamos a dejar como está de momento.

3. La hora > Decenas del minuto

Repetimos la operación del punto 1 y punto 2.

4. La hora > Unidades del minuto

Repetimos la operación del punto 1, punto 2 y punto 3. No cambia nada.

4. Actividad > Pasos

Relativo a los pasos podemos jugar un poco. Podemos poner los pasos, la meta

que queremos alcanzar, un icono, pulso, calorías o la distancia. Nos vamos a

ceñir al ejemplo.

“Activity”: Es la sección del WatchFace que vamos a editar

“Steps”: Es uno de los atributos de “Activity”

“TopLeftX”: Es el límite de la esquina superior izquierda del eje X

“TopLeftY”: Es el límite de la esquina superior izquierda del eje Y

“BottomRightX”: Es el límite de la esquina inferior derecha del eje X

“BottomRightY”: Es el límite de la esquina inferior derecha del eje Y

“Aligment”: Es la esquina donde está alineado el conjunto de números

“Spacing”: Es la separación entre un número y otro

“ImageIndex”: Es la imagen que usaremos como número para los pasos



El atributo “Steps” funciona de distinta forma que antes. Tenemos que tomarnos

el número total de pasos como una combinación de imágenes formando un área

rectangular.

Vamos a hacer zoom a la zona y prestar atención a las medidas

Si ponemos límites como los tenemos marcados en el archivo, vemos que hay un

desfase porque no entran los números. El último no entra, y por la parte

inferior ninguno. ¿Qué pasa con esto? Pues que los números aparecerían un poco

cortados.

Fácil solución. Vamos a ampliar un poco la zona.

Vamos a poner:

“BottomRightX”:145

“BottomRightY”:148

Y vemos el cambio.

Arreglado. Ahora podemos ajustar la palabra PASOS si queremos un poco más

arriba en el gráfico 000.png para cuadrarlo con los números, o lo podemos dejar

así. De momento vamos a dejarlo así.

Realmente no hay que liarse. Es un cálculo.

Si la esquina superior izquierda está en 97, cada número son 8 pixeles y hay

una separación de 2 pixeles entre números será:

97 + 8 + 2 + 8 + 2 + 8 + 2 + 8 + 2 + 8 = 145

Y en vertical es más sencillo. La esquina superior izquierda está en 132, los

números miden de alto 16 pixeles entonces será:

132 + 16 = 148

5. Actividad > Fecha > Día (número)

Relativo a la fecha podemos jugar un poco. Podemos poner el mes, el día,

combinar mes y día, o incluso poner el nombre del día. Nos vamos a ceñir al

ejemplo.

“Activity”: Es la sección del WatchFace que vamos a editar

“MonthAndDay”: Es uno de los atributos de “Date”, en nuestro caso, mostrar el

numero del dia separado










“TwoDigitsMonth” y “TwoDigitsDay”: True o False, controla si mostramos el dia

menor que 10, con el cero a la izquierda o no.

Vemos que en las mediciones iniciales hay otro pequeño desfase, y ya sabemos

calcularlo. Así que:

70 + 8 + 2 + 8 = 88

27 + 16 = 43

Hay que corregir dos valores y vemos el resultado:

BottomRightX de 87 a 88

BottomRightX de 42 a 43

6. Actividad > Fecha > Día (palabra)

Si has seguido la guía hasta aquí, esto te lo conoces

“Date”: Es la sección o atributo del WatchFace que vamos a editar

“WeekDay”: Es uno de los atributos del que se compone nuestro “Date”



“ImageIndex”: Son las imágenes que usaremos como días de la semana

“ImageCount”: Es el número de imágenes que usaremos. Los días son 7, así que

las imágenes también.

Aquí deberemos pensar que queremos. No ocupa el mismo espacio LUNES que

MIÉRCOLES y hay que decidir si poner la palabra entera, que espacio tenemos, si

queda descuadrado, etc. La solución en la mayoría de los casos es abreviar el

dia en 3 letras con un ancho fijo. Así todos los días ocuparán lo mismo.

7. Actividad > Batería > Porcentaje

“Battery”: Es la sección del WatchFace que vamos a editar

“Text”: Es uno de los atributos de “Battery”










Volvemos a ver estos atributos. Hay que tener en cuenta que la batería puede

tener de uno a tres números (De 0 a 100).

8. Actividad > Batería > Imagen

La imagen de la batería puede ser una pila o la imagen que se nos ocurra

“Battery”: Es la sección o atributo del WatchFace que vamos a editar

“Icon”: Es uno de los atributos del que se compone nuestro “Battery”



“ImageIndex”: Son las imágenes que usaremos como días de la semana

“ImageCount”: Es el número de imágenes que usaremos. Cuanto más detallado

quieras el porcentaje de batería, más imágenes tendrás que usar.

En nuestro caso tenemos 20 imágenes dedicadas a la batería, lo que significa

que cada 5% la imagen cambiará. Es una buena cantidad de imágenes.

Y ya tenemos el aspecto final de la WatchFace:

¿Cómo descomprimir/comprimir un archivo .bin? · Repetimos, el fondo tiene un tamaño máximo de...

Documents

Transcript of ¿Cómo descomprimir/comprimir un archivo .bin? · Repetimos, el fondo tiene un tamaño máximo de...