Como crear/editar un watchface para Amazfit Bip by Kero

Aunque soys pocos los que alimentáis la web, haré la guia definitiva para la creación de watchfaces para ampliar la comunidad y así poder entre todos compartir el material de forma senzilla y ordenada (la web está en continua evolución y me adapto a hacer adaptaciones soy Kero me encontraréis en los canales de telegram).
  • Qué son los archivos BIN?
  • Qué son los archivos RES?
  • Como descomprimir/reempaquetar un bin?
  • Propiedades de la imagen principal de fondo
  • Qué colores puedo usar en las imágenes?
  • Propiedades del json

Que son los archivos BIN?

Los archivos con formato .bin corresponden a la caratulas (watchfaces) que podemos cargar en nuestro reloj, todos los archivos compartidos en esta web son BINs, con los que podréis añadir el famoso watchface 11.

Que son los archivos RES?

Los diferentes archivos RES que se comparten corresponden a las imágenes de los diferentes recursos que usará el reloj, un ejemplo claro de una modificación del RES seria para modificar los iconos de las diferentes secciones/funcionalidades de nuestro reloj i/o la modificación de las imágenes referentes al tiempo para que tengan fondo transparente (el original tiene fondo negro i con algunos bins claros no queda bien), normalmente si el BIN requiere de un res personalizado para que aparezca bien se comenta dentro de la descripción del BIN.

Como descomprimir/reempaquetar un bin?

Hay un par de métodos, da igual el que uses:

  1. Primero de todo nos descargamos la release compilada AmazfitBipTools.7z desde la página https://bitbucket.org/valeronm/amazfitbiptools/downloads/
  2. 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
  3. 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
  4. 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.
  5. 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
  • Mediante scripts en python
  1. Primero nos descargamos los scripts dial2img.py, y res2img.py
  2. Luego nos situamos con el terminal dentro de la carpeta donde hayáis descargado los scripts, ponemos el bin en la misma carpeta y ejecutamos  python.exe dial2img.py -u -i nombre_archivo.bin
  3. 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
  4. Dentro de esta carpeta encontraremos todos los recursos de nuestro watchface, entre los que destacaremos las imágenes y el archivo json que controla la ubicación de todas estas imágenes dentro de nuestro watchface.
  5. Para comprimir python.exe dial2img.py -p -i nombre_archivo.bin

[Faltan cosas, poco a poco iré escribiendo..]

Propiedades de la imagen principal de fondo

Las imagenes principales tienen un tamaño de 176px x 176px con colores limitados.

Que colores puedo usar en las imágenes?

La paleta de colores es limitada, siendo los siguientes

  • Negro 0x000000
  • Cyan 0x0000FF
  • Verde 0x00FF00
  • Rojo 0xFF0000
  • Azul 0x00FFFF
  • Púrpura 0xFF00FF
  • Amarillo 0xFFFF00
  • Blanco 0xFFFFFF
  • Transparente 0xFEFE00

Propiedades del json

Al abrir el json veremos muchos atributos cada uno de ellos especifica que objetos se ubicaran en el watchface y su posición, así pues vamos a analizar los diferentes atributos:

Analizaremos uno de los watchfaces compartidos en esta web

Kero v6

  • Definición de la imágen de fondo

  "Background": {
    "Image": {
      "X": 0,
      "Y": 0,
      "ImageIndex": 0 //indicando que la imágen se llamará 000.png
    }
  }

  • Definición de los datos referentes a la hora

"Time": {
    "Hours": {
      "Tens": {
        "X": 14,//posición en el eje XY
        "Y": 48,
        "ImageIndex": 1,  //indicaremos que las decenas de las horas
        "ImagesCount": 10 //irán de la imagen 001.png a la imagen 010.png
      },
      "Ones": {
        "X": 49,//posición en el eje XY
        "Y": 48,
        "ImageIndex": 1,  //indicaremos que las unidades de las horas
        "ImagesCount": 10 //irán de la imagen 001.png a la imagen 010.png
      }
    },
    "Minutes": {
      "Tens": {
        "X": 98,//posición en el eje XY
        "Y": 48,
        "ImageIndex": 1,  //indicaremos que las decenas de las horas
        "ImagesCount": 10 //irán de la imagen 001.png a la imagen 010.png
      },
      "Ones": {
        "X": 133,//posición en el eje XY
        "Y": 48,
        "ImageIndex": 1,  //indicaremos que las unidades de las horas
        "ImagesCount": 10 //irán de la imagen 001.png a la imagen 010.png
      }
    }
  }
  • Definición de los datos referentes a la actividad (bajo objeto “Activity”)

 

  • Pasos
 "Steps": {
      "TopLeftX": 118,//posicionamiento mediante uso de distancias
      "TopLeftY": 112,//a las diferentes esquinas
      "BottomRightX": 169,
      "BottomRightY": 125,
      "Alignment": "TopRight",
      "Spacing": 3,
      "ImageIndex": 11,//las imagenes de los contadores
      "ImagesCount": 10 //iran de 011.png a la imagen 020.png
    },
  • Calorias
    "Calories": {
      "TopLeftX": 140,//posicionamiento mediante uso de distancias
      "TopLeftY": 154,//a las diferentes esquinas
      "BottomRightX": 169,
      "BottomRightY": 167,
      "Alignment": "TopRight",
      "Spacing": 3,
      "ImageIndex": 11,//las imagenes de los contadores
      "ImagesCount": 10//iran de 011.png a la imagen 020.png
    },
  • Distancia
    "Distance": {
      "Number": {
        "TopLeftX": 118,//posicionamiento mediante uso de distancias
        "TopLeftY": 133,//a las diferentes esquinas
        "BottomRightX": 170,
        "BottomRightY": 146,
        "Alignment": "TopRight",
        "Spacing": 1,
        "ImageIndex": 11,//las imagenes de los contadores
        "ImagesCount": 10//iran de 011.png a la imagen 020.png
      },
  • Para manejar los decimales indicaremos las imagenes destinadas a representar el “.” y “km”

    "SuffixImageIndex": 21, //imagen con el "km" en 022.png, en mi caso la imágen es super pequeña y negra
    "DecimalPointImageIndex": 22 //imagen con el "." en 022.png
  • Definición de los datos referentes al dia, al mes y el dia de la semana bajo el objeto “Date”

        

 "MonthAndDay": {
      "Separate": {
        "Month": {
          "TopLeftX": 9,//posicionamiento mediante uso de distancias
          "TopLeftY": 27,//a las diferentes esquinas
          "BottomRightX": 55,
          "BottomRightY": 40,
          "Alignment": "TopRight",
          "Spacing": 3,
          "ImageIndex": 23,//las imagenes de los digitos
          "ImagesCount": 10//iran de 023.png a la imagen 032.png
        },
        "Day": {
          "TopLeftX": 9,//posicionamiento mediante uso de distancias
          "TopLeftY": 27,//a las diferentes esquinas
          "BottomRightX": 60,
          "BottomRightY": 40,
          "Alignment": "TopLeft",
          "Spacing": 3,
          "ImageIndex": 23,//las imagenes de los digitos
          "ImagesCount": 10//iran de 023.png a la imagen 032.png
        }
      },
      "TwoDigitsMonth": true, //true si queremos el mes en 2 cifras
      "TwoDigitsDay": true //true si queremos el dia en 2 cifras
    },


"WeekDay": {
      "X": 133,//posición en el eje XY
      "Y": 26,
      "ImageIndex": 33,//las imagenes de los digitos
      "ImagesCount": 7//iran de 033.png a la imagen 039.png
    }
  • Definición de los datos referentes al icono del tiempo, las imagenes vienen según el RES que tengáis instalado
"Weather": {
    "Icon": {
      "Coordinates": {
        "X": 8,//posición en el eje XY donde situaremos el icono
        "Y": 123
      }
    },
  • Definición de los diferentes datos de temperaturas bajo el objeto “Temperature”:
  • Temperatura actual

                  

"Current": {
        "Number": {
          "TopLeftX": 82,//posicionamiento mediante uso de distancias
          "TopLeftY": 27,//a las diferentes esquinas
          "BottomRightX": 110,
          "BottomRightY": 40,
          "Alignment": "TopLeft",
          "Spacing": 2,
          "ImageIndex": 23,//las imagenes de los digitos
          "ImagesCount": 10//iran de 023.png a la imagen 032.png
        },
        "MinusImageIndex": 40,//imagen con el simbolo "-" en 040.png
        "DegreesImageIndex": 41//imagen con el simbolo "º" en 041.png
      },
  • Temperatura màxima durante el dia/noche

 

"Today": {
        "Separate": {
          "Day": {
            "Number": {
              "TopLeftX": 41,//posicionamiento mediante uso de distancias
              "TopLeftY": 123,//a las diferentes esquinas
              "BottomRightX": 69,
              "BottomRightY": 136,
              "Alignment": "TopRight",
              "Spacing": 3,
              "ImageIndex": 11,//las imagenes de los digitos
              "ImagesCount": 10//iran de 011.png a la imagen 020.png
            },
            "MinusImageIndex": 42//imagen con el signo menos en 042.png
          },
          "Night": {
            "Number": {
              "TopLeftX": 41,//posicionamiento mediante uso de distancias
              "TopLeftY": 144,//a las diferentes esquinas
              "BottomRightX": 69,
              "BottomRightY": 157,
              "Alignment": "TopRight",
              "Spacing": 3,
              "ImageIndex": 11,//las imagenes de los digitos
              "ImagesCount": 10//iran de 011.png a la imagen 020.png
            },
            "MinusImageIndex": 42//imagen con el signo menos en 042.png
          }
        }
  • Datos referentes a los direfentes iconos que muestran el estado de varias funciones de nuestro reloj, bajo el objeto “Status”
  
  "Status": {
    "Bluetooth": {
      "Coordinates": {
        "X": 106,//posición en el eje XY
        "Y": 6
      },
      "ImageIndexOn": 43,//On en imagen 043.png
      "ImageIndexOff": 44//Off en imagen 044.png
    },
 
    "Alarm": {
      "Coordinates": {
        "X": 25,//posición en el eje XY
        "Y": 8
      },
      "ImageIndexOn": 45//en imagen 045.png
    },
 
    "Lock": {
      "Coordinates": {
        "X": 9,//posición en el eje XY
        "Y": 8
      },
      "ImageIndexOn": 46//en imagen 046.png
    },

    "DoNotDisturb": {
      "Coordinates": {
        "X": 41,//posición en el eje XY
        "Y": 8
      },
      "ImageIndexOn": 47//en imagen 047.png
    }
  }, 
  • Datos referentes a la información sobre la bateria, bajo el objeto “Battery”
"Battery": {

    
"Text": {
      "TopLeftX": 126,//posicionamiento mediante uso de distancias
      "TopLeftY": 8,//a las diferentes esquinas
      "BottomRightX": 136,
      "BottomRightY": 16,
      "Alignment": "TopRight",
      "Spacing": 1,
      "ImageIndex": 48,//las imagenes de los digitos
      "ImagesCount": 10//iran de 048.png a la imagen 057.png
    },


    
"Icon": {
      "X": 150,//posición en el eje XY
      "Y": 8,
      "ImageIndex": 58,//las diferentes imagenes de la bateria
      "ImagesCount": 6//iran de 058.png a la imagen 063.png
    }
  }

 

Como se hacen los circulos que se van completando que aparecen en algunos watchfaces?

Tomaremos de ejemplo uno de los últimos watchfaces que he hecho

El circulo naranja se va completando a medida que vamos andando

Las lineas para incluir estos circulos tendrian la forma siguiente:

“StepsProgress”: 
“Circle”: 
“CenterX”:85, //ubicación segun ejes X,Y
“CenterY”:114,
“RadiusX”:33, //Radio del circulo
“RadiusY”:33,
“StartAngle”:0, //Por donde se empieza a rellenar
“EndAngle”:360,
“Width”:8, //Grosor del circulo
“Color”:“0xF3A806” //Color del relleno del circulo
}
},

 

Como especificar que tu watchface dará la hora en formato 12h?

Tenéis que añadir un trozo de código dentro del objeto “Time”

“Time”: 
“Hours”: 
“Tens”: 
“X”:40,
“Y”:5,
“ImageIndex”:1,
“ImagesCount”:10
},
“Ones”: 
“X”:62,
“Y”:5,
“ImageIndex”:1,
“ImagesCount”:10
}
},
“Minutes”: 
“Tens”: 
“X”:90,
“Y”:5,
“ImageIndex”:1,
“ImagesCount”:10
},
“Ones”: 
“X”:112,
“Y”:5,
“ImageIndex”:1,
“ImagesCount”:10
}
},
   “AmPm”: 
      “X”:0,
      “Y”:0,
      “ImageIndexAm”:11, //Referencia a la imagen con simbolo AM
      “ImageIndexPm”:12//Referencia a la imagen con simbolo PM
   }
},

 

Ahora ya os toca a vosotros experimentar y descomprimir muchos BINs, animos y compartid!