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