Skip to content

Instantly share code, notes, and snippets.

@fernospam
Last active June 11, 2024 10:32
Show Gist options
  • Save fernospam/b0339ccdb496ca5ee33ee94c94c511e6 to your computer and use it in GitHub Desktop.
Save fernospam/b0339ccdb496ca5ee33ee94c94c511e6 to your computer and use it in GitHub Desktop.
How to create watch faces for Amazfit Bip U (also GTR and GTS)

How to create watch faces for Amazfit Bip U (also GTR and GTS)

Below is the minimum necessary to start creating watch faces for various Amazfit watches. This explanation is especially suited for the Bip-U model, for which there is almost nothing on the internet. Most of the steps are applicable to other models such as GTS and GTR in their different varieties.

Access to the watch face creation app

The watch faces of various Amazfit models use the same app for this purpose found on the Huami website (Xiaomi, Amazfit and Zepp watches are manufactured by Huami).

First you have to register in Huami as a developer (description at https://amazfitwatchfaces.com/forum/viewtopic.php?t=2090)

To do this, you have to register at https://dev.huami.com/#/user/register/reg without completing step 2, unless you want to enter several very personal data (passport copy, photo, etc.) and wait from 4 to 6 days for approval.

Once you have the account (activated or not), you can access the watch face app at https://dev.huami.com/watchface/index.html#/create It's in Chinese, but there is a drop-down menu on the right of screen where you can select English (if you don't see it, make the browser window as big as possible to make it visible).

If you have registered, but have not completed step 2 of the registration, you will see a message in Chinese that says that you do not have permission. Nevertheless, you can still enter the app by opening a javascript console (F12 in most browsers and then looking for the console tab) and entering the following code:

localStorage.setItem ('examineType', '2');

This has to be done every time you enter the app, but you can install the tampermonkey extension in the browser (Chrome and surely others) and add the following code in tampermonkey to run it automatically each time you enter the Huami developer page:

// == UserScript ==
// @name Amazfit watch editor
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Enables the editor without giving up ID
// @author AnyBody
// @match https://dev.huami.com/watchface/*
// @icon https://www.google.com/s2/favicons?domain=huami.com
// @grant none
// == / UserScript ==

(function () {
    localStorage.setItem ('examineType', '2');
}) ();

Once inside the application, choose the model and resolution of your smartwatch from the drop-down menu.

The Bip-U does not appear in the drop-down list, but it is equivalent to the LITE type with 302x320 resolution.

You must upload any 202x214 image as a thumbnail to go on. For this you must create any .png image of that size using your favourite photo editor. This image is the one that will later appear on your watch when you hold it down to be able to change the face. You may change it when you have finished your watch face, and it is easy from the creation app.

Once inside the app, you can save the watch face and download the .bin with the export button. Some details about the watch face edition follow.

Watch face editing

In the various menus you will find all the elements that you can include in your watch face, starting with the background.

For each item you must upload an image or set of images. In a later section you can see how to get images for the elements of the watch face. In elements such as numbers, all 10 images can be selected at the same time, thus creating a slice. Later, that slice can be reused in other elements that need the same type of number.

The elements marked with * are mandatory and you have to put something even if they are not used at all. When exporting, it will notify us if we have missed anything.

There are sets of images that are displayed in different ways, such as those of weather; if you want to show them superimposed in the same place you have to choose Display Method> Single Display (instead of Continuous Display). If some items are not displayed when placing the watch face in the watch, probably we have to change the Display Method.

Finally we export the watch face and a .bin is generated. The .bin file can integrate into the clock as explained below.

Integration in the watch

The first thing to do is to download any watch face from the Zepp application store on your mobile. Any watch face can serve as we are going to replace it with ours.

We then connect the mobile to the PC and open a file explorer to access the files on the mobile (for Android 11 or higher see below, as this explorer method probably does not work).

The watch faces downloaded from the Zepp store are stored in a subdirectory under /sdcard/Android/data/com.huami.watch.hmwatchmanager/files/watch_skin_local/ (Instead of / sdcard / it could be something else, depending on the mobile model, Android version, file explorer, etc.)

We look for the watch face that we have just downloaded and we replace the .bin file with ours: IT IS VERY IMPORTANT THAT OUR .BIN FILE HAVE EXACTLY THE SAME NAME AS THE ONE WE ARE REPLACING.

Next, we open the Zepp app on the mobile and synchronize the face that we had downloaded with the watch (the photo that appears is the one of the face that we have downloaded, not ours, but it does not matter, since what matters is the .bin file).

Android 11 troubleshooting

It is possible that, depending on the version of the mobile operating system, there is no permission to modify the files of the watch faces. The first thing to do is put the mobile in developer mode and to have USB debugging enabled (search the internet for how to do it).

You can then install and run Android Studio.

In Android Studio there is a "Device File Explorer" in the top menu "View> Tool Windows". With that we can now access the directory mentioned above to include our watch face.

You can also use AdbLink which is simpler to install than Android Studio, although the integrated browser is too basic and too cumbersome.

Obtaining resources

Everything that appears in the watch face is an image, preferably in .png with transparency.

Resources can be obtained by unpacking GTR 47 watch faces from https://amazfitwatchfaces.com/gtr/fresh?compatible=47mm or also GTS where the screen is square. These watch faces have elements whose images fit well into Bip-U.

Once you have the .bin of the model you like, you can unpack it with the following tools:

If the .bin is compressed (it usually is) it must be decompressed with: https://github.com/amazfitbip/resunpacker_qzip

Once unzipped it can be unpacked with: https://github.com/amazfitbip/py_amazfit_tools/releases/tag/v0.2-beta

The latter generates a directory with resources that we can use in our watch face.

There are Windows binaries for both tools, so it is not necessary to download the entire repository, just the binaries.

Creación de Esferas para Amazfit Bip U (también GTR y GTS)

A continuación se relata lo mínimo necesario que hay que saber para crear esferas para varios relojes Amazfit. La explicación esta especialmente indicada para el modelo Bip-U, del cual apenas hay nada en internet, pero la mayoría de pasos son aplicables a otros modelos como GTS y GTR en sus distintas variedades, pues se utilizan las mismas herramientas.

Acceso a la app de creación de la esfera

Las esferas de varios modelos de Amazfit utilizan la app para este propósito que se encuentra en la web de Huami (los relojes Xiaomi, Amazfit y Zepp los fabrica Huami).

Primero hay que darse de alta en Huami como developer (descripción en https://amazfitwatchfaces.com/forum/viewtopic.php?t=2090)

Para ello hay que registrarse en https://dev.huami.com/#/user/register/reg sin cumplimentar el paso 2, salvo que se quiera meter varios datos muy personales (fotocopia pasaporte, etc.) y esperar de 4 a 6 días para la aprobación.

Una vez se tiene la cuenta (activada o no), se puede acceder a la app de esferas en https://dev.huami.com/watchface/index.html#/create Está en chino, pero hay un desplegable a la derecha para seleccionar inglés (si no lo ves, haz la ventana del navegador lo más grande que puedas para que aparezca).

Si te has dado de alta pero no has cumplimentado el paso 2 del registro, te aparecerá un mensaje en chino que dice que no tienes permiso, pero se puede todavía entrar abriendo la consola de javascript (F12 en la mayoría de navegadores y luego busca la pestaña consola) y metiendo el siguiente código:

localStorage.setItem('examineType', '2');

Eso hay que hacerlo cada vez que se entra, pero puedes instalarte la extensión tampermonkey en el navegador (Chrome y seguramente otros) y meter el siguiente código para que lo ejecute automaticamente cada vez que entras en la página de edición de huami:

// ==UserScript==
// @name         Amazfit watch editor
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Enables the editor without giving up ID
// @author       AnyBody
// @match        https://dev.huami.com/watchface/*
// @icon         https://www.google.com/s2/favicons?domain=huami.com
// @grant        none
// ==/UserScript==

(function() {
    localStorage.setItem('examineType', '2');
})();

Una vez dentro de la aplicación elije en el desplegable el modelo y resolución de tu reloj.

El Bip-U no aparece en el desplegable pero es equivalente al tipo LITE con la resolución 302x320.

Debes subir cualquier imagen 202x214 como thumbnail. Para ello puedes crear una cualquiera de ese tamaño en .png utilizando tu editor de fotos favorito. Esta imagen es la que luego aparecerá en tu reloj cuando lo mantienes apretado para poder cambiar de esfera. Lo normal es que lo cambies cuando hayas terminado tu esfera, cosa que podrás hacer sin problemas desde la app de creación.

Una vez dentro ya se puede guardar la esfera y descargar el bin con export. A continuación se dan algunos detalles sobre la edición que es bastante intuitiva.

Edición de la esfera

En los diferentes menús encontrarás todos los elementos que puedes incluir en tu esfera empezando por el background.

Para cada elemento debes subir una imágenes o conjunto de imágenes. En una sección más adelante puedes ver cómo obtener imágenes para los elementos de la esfera. En elementos como los números se puede seleccionar los 10 a la vez con lo que se crea un slice. Posteriormente ese slice se puede reusar en otros elementos que necesiten ese mismo tipo de número.

Los elementos marcados con * son obligatorios y hay que poner algo aunque no se usen. Al exportar nos avisará de todas formas si nos hemos dejado alguno.

Hay conjuntos de imágenes que se muestran de diferentes formas, como por ejemplo, las del tiempo, que si quieres mostrarlas superpuestas en el mismo lugar hay que elegir Display Method > Single Display (en lugar de Continuous Display) Si al poner la esfera en el reloj no se muestran algunos elementos, es posible que no hayamos puesto el Display Method adecuado.

Finalmente le damos a exportar y entonces se revisa que no haya errores y no falte nada. Con esto se genera un .bin que podemos integrar en el reloj tal como se explica a continuación.

Integración en el reloj

Lo primero que hay que hacer es descargar una esfera cualquier desde la tienda de la aplicación Zepp del móvil. Sirve cualquiera pues la vamos a sustituir por la nuestra.

Conectamos el móvil al PC y abrimos un explorador de archivos para acceder a los ficheros del móvil (para Android 11 o superiores ver abajo, pues el explorador sin más no funciona).

Las esferas descargadas de la tienda de Zepp las guarda en un subdirectorio bajo /sdcard/Android/data/com.huami.watch.hmwatchmanager/files/watch_skin_local/ (En vez de /sdcard/ podría ser otra cosa, dependiendo del modelo de móvil, versión de Android, explorador de archivos, etc.)

Buscamos la esfera que hemos descargado y sustituimos el fichero .bin por el nuestro: ES MUY IMPORTANTE QUE NUESTRO FICHERO .BIN TENGA EXACTAMENTE EL MISMO NOMBRE QUE EL QUE ESTAMOS SUSTITUYENDO.

A continuación abrimos la app Zepp en el móvil y sincronizamos con el reloj la esfera que habíamos bajado (la foto que aparece es la de la esfera que hemos bajado, no la del nuestro, pero eso da igual, pues lo que importa es el .bin).

Android 11 y solución de problemas

Es posible que, dependiendo de la versión del sistema operativo del móvil, no haya permiso para modificar los ficheros de las esferas. Lo primero que hay que hacer es poner el móvil en modo desarrollador y tener la depuración por usb habilitada (buscar en internet cómo hacerlo).

A continuación puedes instalar y ejecutar Android Studio (solo para teléfonos Android). En Android Studio hay un "Device File Explorer" al que podemos acceder desde el menú superior "View > Tool Windows". Con eso ya podremos acceder al directorio citado anteriormente para incluir nuestra esfera.

También se puede usar AdbLink que es menos costoso de instalar que Android Studio, aunque el explorador que lleva es demasiado básico y muy incómodo.

Obtención de recursos

Cada cosa que aparece en la esfera es una imagen, preferiblemente en .png con transparencia.

Se pueden obtener recursos desempaquetando esferas GTR 47 de https://amazfitwatchfaces.com/gtr/fresh?compatible=47mm o también GTS donde además la pantalla es también cuadrada. Estas esferas tienen elementos cuyas imágenes encajan bien en la de Bip-U.

Una vez se tiene el .bin se puede desempaquetar con las siguientes herramientas: Si el .bin está comprimido (siempre lo suele estar) se debe descomprimir con: https://github.com/amazfitbip/resunpacker_qzip

Una vez descomprimido se puede desempaquetar con: https://github.com/amazfitbip/py_amazfit_tools/releases/tag/v0.2-beta

Este último genera un directorio con recursos que podremos utilizar en nuestra esfera.

Hay binarios para Windows de ambas herramientas, por lo que no es necesario bajar todo el repositorio.

@NTB45
Copy link

NTB45 commented Oct 26, 2022

Great 👍

@MissCurlyBlonde
Copy link

The whole thing changed, the websites and everything. Is there an updated method to this?

@fernospam
Copy link
Author

The whole thing changed, the websites and everything. Is there an updated method to this?

I have no idea about the current method for creating watch faces. I wrote this document some years ago and it is probably outdated. Sorry.

@MissCurlyBlonde
Copy link

Damn shame, thx tho

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment