Tutorial creación de BINs by Dieguinchi

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

Existe más de un método para descomprimir un WatchFace .bin. Unos requieren instalar aplicaciones adicionales como Python y otro no. Como no nos queremos volver locos, vamos a usar un método que no te obliga a instalar nada.

Primero de todo nos descargamos la última release de 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. Y en esa carpeta tenemos todo lo necesario. En el ejemplo he dejado la carpeta en Descargas, pero se puede mover y tenerla donde se quiera.

Luego nos situamos dentro de la carpeta y copiamos o movemos el .bin en el que nos vamos a fijar.

Después de eso ejecutamos Watchface.exe nombre_archivo.bin desde la consola de comandos de Windows. Si no sabéis llegar a ella, pulsad Ctrl+R y escribid Run, sin comillas ni nada, y con pulsar Enter ya sale.

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 fallará.

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

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 176×176 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 y te hace la vida más fácil. Vamos a poder contraer atributos, nos va a identificar los números y las llaves, etc.:

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
“ImageIndex”: 3 corresponde a 003.png
“ImageIndex”: 10 corresponde a 010.png
“ImageIndex”: 67 corresponde a 067.png

Repetimos, el fondo tiene un tamaño máximo de 176×176 pixeles. Si usamos una imagen de 176×176 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 156×156 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

“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
“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.

3. 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

“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
“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.

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.

4. La hora > Decenas del minuto

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

5. La hora > Unidades del minuto

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

6. 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
“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.

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

7. 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

“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
“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.

“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

8. 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”

“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”: 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.

9. Actividad > Batería > Porcentaje

“Battery”: Es la sección del WatchFace que vamos a editar
“Text”: Es uno de los atributos de “Battery”

“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
“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.

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).

10. 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”

“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”: 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:

Guía en PDF

wf