Watch face editor for Amazfit watch on ZeppOS

[SashaCX75]

Alternative watch face editor for Amazfit watch on ZeppOS.

Supported watch models

- Amazfit Active
- Amazfit Active 2
- Amazfit Active 2 (Square)
- Amazfit Active Edge
- Amazfit Active Max
- Amazfit Band 7
- Amazfit Balance
- Amazfit Balance 2
- Amazfit Bip 5
- Amazfit Bip 5 Unity
- Amazfit Bip 6
- Amazfit Cheetah
- Amazfit Cheetah Pro
- Amazfit Cheetah (Square)
- Amazfit Cheetah 2 Pro
- Amazfit Falcon
- Amazfit GTR 3
- Amazfit GTR 3 Pro
- Amazfit GTR 4
- Amazfit GTR mini
- Amazfit GTS 3
- Amazfit GTS 4
- Amazfit GTS 4 mini
- Amazfit T-Rex 2
- Amazfit T-Rex 3
- Amazfit T-Rex 3 Pro
- Amazfit T-Rex Ultra
- Amazfit T-Rex Ultra 2

When unpacking the watch faces, it is advisable to immediately select the correct watch model, otherwise the colors may be distorted.

It is desirable to create a new project in a separate folder. Image names do not have to consist only of numbers, you can add short prefixes (for example, date_01, time_01).
Watch faces created in the editor and on Huami's website should unpack normally. Watch faces from Zepp and those created based on them will not be unpacked.
In a set of images for displaying one parameter (for example, images for displaying the day of the week), all images should preferably be the same size. If the size of the images is different, then the first image in the set should be the largest.

All new features in this and next release will be tested on the GTR4 and may not work on other models.

List of changes

v17.1

Fixed the bugs that were found.
Added support for Cheetah 2 Pro.

v17.0

Added the ability to create a ZAB file for publication in the store (button in settings)
Added wind speed in km/h
Added atmospheric pressure in mm Hg
Added support for T-Rex Ultra 2.

v16.1

The ability to invert time circles has been added.
Active Max support has been added.
Image file name verification has been added.
The behavior of application shortcuts in editable elements has been fixed.

v16.0

Added sleep widget.
Added text widgets.

v15.1

Added support for new watch models.
Added BioCharge widget.
Added buttons to launch new applications.

v15.0

Time circles added.
Added world time (time, city, time zone, time offset).
Added text display around the circle.
Added the ability to create watch faces in developer mode (for experienced users, allows logs to be displayed in watch faces).

v14.0

Added support for widgets: ALARM_CLOCK, TRAINING_LOAD, VO2MAX, AQI, BODY_TEMP, FLOOR, READINESS, HRV.
Added support for Balance 2.
Changed the structure of the Preview.States file.
When creating an animated preview, frames with a switchable background have been added.
Added the ability to display the city name in uppercase letters in the weather forecast.
Added links to lessons.

v13.2

Added support for Bip 6.
Fixed the progress display using the image set for most widgets. It should now be more similar to how it is displayed on the watch.
Reworked the code for displaying heart rate with a circular scale. It now uses the standard widget in place of the sensor.
Fixed PAI progress display. Note that the maximum value for the PAI pointer is 525, not 100. This is a feature of the watch, not the editor.
Added warning if files in watch face are in *.bin format.

v13.1

Added ability to make a shortcut to any application in editable items.
Added support for Active 2.
Fixed display of buttons and shortcuts when creating a GIF file.

v13.0

Added autosave (enabled in settings).
Added ability to switch background image by tap.
Added ability to switch background colour by tap.

v12.1

Added transparency for some widgets. Does not work on all models.
Added support for Amazfit T-Rex 3.

v11.2

Fixing the smooth second hand on the GTR4.

v11.1

Updated the digital time widget.
Updated shortcuts widget.
Added new application launch commands for buttons.

v11.0

Completely redesigned the weather widget.
Added weather widget for several days (forecast).
Added support for Bip 5 Unity.

v10.4

Added ability to display month names in a font.
Added Compass widget (works on ZeppOS 2 or later).
Added ability to create *.zpk file (enabled in settings).

v10.3

Added display of hours:minutes:seconds in a single line font.
Added display of date/month/year in one line font (order depends on the watch setting).
Added display of the day of the week in font.
Added new presets for button functions.

v10.2

Added ability to copy widget properties (context menu on the properties field).

v10.1

Added display of time and date in font.
Added widget for adding scripts to watch face.
Fixed bugs in sunrise/sunset operation on circle and at an angle.
Fixed bugs in digital time alignment.

v10.0

]Added support of fonts for data display (after installing such watch faces it is better to restart the watch).
Added possibility to display altitude (in barometer).
Completely redesigned the moon widget.
The arrow pointer for sun and moon should now not be displayed after sunset.
All images are now copied to the watch face, even if they are in folders.

v9.1

Fixed working with Amazfit Balance.
Added support for Amazfit Active.
Added support for Amazfit Active Edge.
Fixed display of distance on a circle.
Fixed displaying sunrise and sunset at an angle.
Added ability to convert images to ARGB format in settings.
Fixed continuous vibration in notifications.

v9.0

Added ability to create shortcuts for a set of images (IMG_LEVEL).
Added support for buttons and presets to launch inbuilt apps.
Added support for Amazfit Balance (not tested).

v8.2

Added ability to display angled or circumferential data for sunrise/sunset, maximum and minimum temperatures (for weather, separate units of Celsius and Fahrenheit only work on newer models).
Added support for Cheetah / Cheetah Pro.
Added support for Bip 5.
Theoretically it is now possible to add support for new models by editing the file in the model_config folder.

v8.1

Added ability to display data at an angle or in a circle for date and time.
Fixed found errors when unpacking dials.
Fixed found errors when working with UHD monitors.

v8.0

Added support for T-Rex Ultra
Added support for GTR Mini
Added the ability to display data at an angle or in a circle (battery, steps, distance, calories, heart rate, PAI, SpO2, stand)

v7.3

Fixed problems with icons in editable items.
Fixed problems with circular progress in editable items.
Added ability to set data rotation angle for some models (ZeppOS 2).
Improved algorithm for unpacking dials that contain additional features. Increased probability of partial dial recognition.

v7.2

Added the ability to change the type of line ending for linear and circular progress.
Added the ability to create shortcuts without using an image.

v7.1

Added independent element with image and top image.
For editable items on the clock, an additional selection in the form of a list is included.
Changed the function of creating an editable element for fat burning.
Fixed motion animation and rotation animation for GTR4 and GTS4.
Added wind direction.
Updated watch face file format.

v7.0

Added smooth second hand (several types)
Added alert every hour
Added the ability to change the direction of rotation of the hour hands
Added the ability to set the sector in which the hour hands work

v6.4

Improved the stability of the bluetooth connection loss notification function
Updated German and Spanish translation

v6.3

Added the possibility of notifications when the connection is broken and restored
Fixed work progress for fat burning
Fixed work progress for the pulse
Fixed bugs in temperature display
Fixed display of shortcuts in AOD mode

v6.1

Added Falcon support.
Changed the algorithm of shortcuts to eliminate conflicts with editable elements.
The configuration of created watch faces has been updated to version 2.

v6.0

Added support for editable background.
Added support for editable arrows.
Added support for editable elements.
Added German translation.

v5.0

Added support for GTR 4
Added support for GTS 4 Mini
Added support for Amazfit Band 7 (not to be confused with Mi Band 7)

v4.1

Fixed bugs when creating and unpacking GTR 3 Pro watch faces

v4.0

Added animation support.
Added Ukrainian language.
Added a tab with some tips on working with the editor.
Added the ability to display the distance in miles.

v 3.0

Added sunrise / sunset
Added barometer
Added stress
Wind added
Added fat burning
Added moon phases

v 2.0

Added weather.
Added workout (stand).
Added oxygen (SpO2).
Added humidity.
Added UV index.
Added the ability to highlight shortcuts when saving gif files (enabled in the settings).
Updated the display of shortcuts in connection with the firmware update on the watch.
Added Italian language.
Added Spanish language.

v 1.1

Fixed loss of error symbol for pulse.
Fixed errors when unpacking dials.
Fixed bug with incorrect model definition for GTS 3.

Version 17.1
Fixed the bugs that were found.
Added support for Cheetah 2 Pro.

Old versions

v 10.0
v 10.1
v 10.2
v 10.3
v 10.4
v 11.0
v 11.1
v 11.2
v 12.1
v 13.0
v 13.1
v 13.2
v 14.1
v 15.0
v 15.1
v 16.0
v 16.1
v 17.0

PS. The interface was translated using an online translator. If someone wants to improve the translation, then write to the PM.

PS2. Many people ask how to install watch faces. For starters, I advise you to read this topic. Personally, I prefer to use this program to install the created watch faces on the GTR 3 (for the GTS 3)

Сollection of code examples for use in watch faces.

Donate to the author - PayPal: [email protected].
Buy me a coffee

[Omaradsl]

Hello Sasha, I enjoy creating watchfaces on the site, my nickname is omaradsl.
https://amazfitwatchfaces.com/search/ba ... rID/772262
i have two questions about your program.

1. The coordinate calculation is damn imprecise because it calculates the size of the png file as a whole. This means that if I have a png file with the image of the number 1, which does not occupy all the pixels of the file, but is positioned in the center, when I go to click on the coordinates to position the image of the dial, the positioning is always wrong.

Spoiler

as you can see in the image, clicking on a point on the dial, the program copied the 336x312 coordinates
but the number png is positioned in the coordinates 346x331
and it is like this for all the elements, in fact the positioning in my case takes place manually

2. The corners. I wasn't a genius at math, but is there an easy way to figure out how to calculate the start and end angles of the pointer in a watchfaces?
another image:

Spoiler

as you can see the initial angle should be -148 and the final angle 149.
This is a calculation that someone else did, but I can't do it. How do I know on a circle what the corresponding angle is? Wouldn't there be an easier way to calculate it?
Also because when you manage to understand which are the two extremes of the angle, they do not always correspond to the values, for example, of the steps or bpm.

Thank you.

[SashaCX75]

@Omaradsl
1. What coordinates are copied when double-clicking on the preview are pasted into the coordinates field. If it is not so, then show a video or a project where it does not work correctly. The fact that the image itself is shifted from these coordinates is because the image itself probably has invisible borders.

2. I don't understand what the problem is. The angle of 0 degrees corresponds to the vertical upward direction. And counting comes from this direction. If you need to precisely set the arrow pointer, just set the minimum or maximum value for this parameter and look at the position of the arrow.

[Omaradsl]

ok, Thanks Sasha

[SashaCX75]

Version 11.0
Mirror
Completely redesigned the weather widget.
Added weather widget for several days (forecast).
Added support for Bip 5 Unity.

[amazfitfacesafrica]

Hello, guys. Please someone with knowledge to help me. If i have a watchface which can unpack with editor 11.0 and have smooth seconds how can I replace the smooth seconds with normal ticking seconds? Thank you.

[asoo]

Hello, guys. Please someone with knowledge to help me. If i have a watchface which can unpack with editor 11.0 and have smooth seconds how can I replace the smooth seconds with normal ticking seconds? Thank you.

There are many ways to do this, but I think the easiest way is
You can go to the "Analog time (Pro)" element and remove the check right mark front of "smooth second hand", then pack it in. The second hand will move normally.

[amazfitfacesafrica]

Thank you, asoo, for help and reply.

[andrewr01]

When using Numerical values for the month I see only 10 months in the index.js that is created.

[asoo]

When using Numerical values for the month I see only 10 months in the index.js that is created.

If I understand correctly, if you use numbers for show the months
You will find only 0-9 images to use to create month numbers.
Therefore, in the index, there are only 10 image variable values ​​declared.
are 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 which these numbers will be used to display the month in numbers as follows.
01 02 03 04 05 06 07 08 09 10 11 12

if you need Use numbers to display months. but want to create The set of numbers itself requires the element image to handle them, and when you use this element you will have 12 images to display.

[lobianco]

Good evening everyone
Can anybody help me.
I'm trying to make a watchface that displays the number of steps, I would like to click on that number and change it to the total distance, is there a way to do this in the watchface creator?
If so, what would be the necessary steps?
Thanks in advance

[asoo]

Good evening everyone
Can anybody help me.
I'm trying to make a watchface that displays the number of steps, I would like to click on that number and change it to the total distance, is there a way to do this in the watchface creator?
If so, what would be the necessary steps?
Thanks in advance

The Edit program has no ready-made options in this section.
If you want, you need to write a user_script to work with element "buttom".
to take the action you want
You can see example scripts from some dials on the web, such as:
https://amazfitwatchfaces.com/gtr/view/37324
You can view the script in the index.js file in the (watchface ) .zip file.

[lobianco]

Hi, asoo

Thank you very much for your tips, I'm learning a lot, but I've reached a point where I can't put together a user-script to change the color of the hands, would you have any suggestions for me?
If anyone else can help, I would also be very grateful.
Thanks

[taw_bip]

Hi, asoo

Thank you very much for your tips, I'm learning a lot, but I've reached a point where I can't put together a user-script to change the color of the hands, would you have any suggestions for me?
If anyone else can help, I would also be very grateful.
Thanks

@Lattenknaller has several watchfaces that demonstrate how to change hand color, such as these:
https://amazfitwatchfaces.com/gtr/view/36332
https://amazfitwatchfaces.com/gtr/view/38269

[lobianco]

Spoiler

Hi, asoo

Thank you very much for your tips, I'm learning a lot, but I've reached a point where I can't put together a user-script to change the color of the hands, would you have any suggestions for me?
If anyone else can help, I would also be very grateful.
Thanks

@Lattenknaller has several watchfaces that demonstrate how to change hand color, such as these:
https://amazfitwatchfaces.com/gtr/view/36332
https://amazfitwatchfaces.com/gtr/view/38269

Hi, Lattenknaller

Thank you very much for the tip, I will study the script, but my biggest problem is javascript.
I've never studied, and to be honest, I don't even know where to start.

[taw_bip]

Hi, Lattenknaller

Thank you very much for the tip, I will study the script, but my biggest problem is javascript.
I've never studied, and to be honest, I don't even know where to start.

When I started learning how to build watchfaces, I would download existing ones and play with them to figure out how they worked. If you'd rather just request someone to build it, make a request in the proper section of the forum.
A lot of the new AI tools can help with Javascript. I was playing around with Claude AI and fed it sample watchface code and it was able to digest that and help with coding.

[lobianco]

Hi, Lattenknaller

Thank you very much for the tip, I will study the script, but my biggest problem is javascript.
I've never studied, and to be honest, I don't even know where to start.

When I started learning how to build watchfaces, I would download existing ones and play with them to figure out how they worked. If you'd rather just request someone to build it, make a request in the proper section of the forum.
A lot of the new AI tools can help with Javascript. I was playing around with Claude AI and fed it sample watchface code and it was able to digest that and help with coding.

Hi, taw_bip

I'm from Brazil, and CLAUDE AI does not accept users from some regions, and Brazil is one of those regions, but still, thank you very much for the tip.

[taw_bip]

Spoiler

Hi, Lattenknaller

Thank you very much for the tip, I will study the script, but my biggest problem is javascript.
I've never studied, and to be honest, I don't even know where to start.

When I started learning how to build watchfaces, I would download existing ones and play with them to figure out how they worked. If you'd rather just request someone to build it, make a request in the proper section of the forum.
A lot of the new AI tools can help with Javascript. I was playing around with Claude AI and fed it sample watchface code and it was able to digest that and help with coding.

Hi, taw_bip

I'm from Brazil, and CLAUDE AI does not accept users from some regions, and Brazil is one of those regions, but still, thank you very much for the tip.

If you have access to a VPN, that can get around some geographic restrictions.

[lobianco]

Spoiler

When I started learning how to build watchfaces, I would download existing ones and play with them to figure out how they worked. If you'd rather just request someone to build it, make a request in the proper section of the forum.
A lot of the new AI tools can help with Javascript. I was playing around with Claude AI and fed it sample watchface code and it was able to digest that and help with coding.

Hi, taw_bip

I'm from Brazil, and CLAUDE AI does not accept users from some regions, and Brazil is one of those regions, but still, thank you very much for the tip.

If you have access to a VPN, that can get around some geographic restrictions.

This is true, but as I use Linux, I don't know which VPN is the best, and for Windows could you recommend one to me.
thanks

[taw_bip]

Spoiler

Hi, taw_bip

I'm from Brazil, and CLAUDE AI does not accept users from some regions, and Brazil is one of those regions, but still, thank you very much for the tip.

If you have access to a VPN, that can get around some geographic restrictions.

This is true, but as I use Linux, I don't know which VPN is the best, and for Windows could you recommend one to me.
thanks

I use PIA VPN. They have a Linux client. Good luck!

[Emiliomc]

Hola, ante todo pido disculpas por mi terrible inglés. Cuando creo una watchface con la aplicación (...) los elementos introducidos en la Pantalla Principal (Por ejemplo; hora, fecha, etc), luego indico que añada todos los elementos a la pantalla AOD en la aplicación. Los elementos en ambas pantallas están localizados en las mismas coordenadas "X" y "Y" (Comprobado). Pero una vez instalada la watchface creada en mi reloj, al momento de pasar de Pantalla Principal a AOD, o viceversa, detecto un pequeño salto de los elementos. Creo recordar que ligeramente hacia abajo y hacia la izquierda. He probado a cambiar las coordenadas de AOD 1 pixel hacia arriba y 1 pixel hacia la derecha. Pero sigue ocurriendo lo mismo. Se produce ese pequeño salto. Es como si hubiese una diferencia de coordenadas inferior a 1 pixel. No sé si se puede resolver este problema. O si es algo conveniente cuando se tiene activado el AOD. O si se trata de un defecto de mi reloj Amazfit GTS 4. Espero haberme explicado bien. Gracias.

[asoo]

Spoiler

Hola, ante todo pido disculpas por mi terrible inglés. Cuando creo una watchface con la aplicación (...) los elementos introducidos en la Pantalla Principal (Por ejemplo; hora, fecha, etc), luego indico que añada todos los elementos a la pantalla AOD en la aplicación. Los elementos en ambas pantallas están localizados en las mismas coordenadas "X" y "Y" (Comprobado). Pero una vez instalada la watchface creada en mi reloj, al momento de pasar de Pantalla Principal a AOD, o viceversa, detecto un pequeño salto de los elementos. Creo recordar que ligeramente hacia abajo y hacia la izquierda. He probado a cambiar las coordenadas de AOD 1 pixel hacia arriba y 1 pixel hacia la derecha. Pero sigue ocurriendo lo mismo. Se produce ese pequeño salto. Es como si hubiese una diferencia de coordenadas inferior a 1 pixel. No sé si se puede resolver este problema. O si es algo conveniente cuando se tiene activado el AOD. O si se trata de un defecto de mi reloj Amazfit GTS 4. Espero haberme explicado bien. Gracias.

If I'm not mistaken, it's not a program error. It's caused by firmware. That is set in AOD to move the screen 1-3 pix back and forth at specified intervals. In order to protect the screen from pix's burn-in if it is left open for a long time. This part, if understood correctly, cannot be edited. It is controlled by firmeware.

[Emiliomc]

Well, you're right. That may be the main reason. I haven't thought about it. It is like the case of AOD in smartwatches. Thank you.

[Lattenknaller]

Hello everyone,
I have a WF here where I can't solve a problem. WF is created with custom.ttf (i.e. without images). Everything works, but not in the AOD. Background etc.: everything is there, only the digital hours and minutes are missing. In normal mode they are there, with the same size, the same coordinates and the same color. Clock was restarted several times, no improvement.
Does anyone here have a suggested solution without creating images of the individual numbers? This would increase the size of the WF immensely.

edit: No one has any ideas?
I have now tried it with older versions of the editor,... no change.

[SashaCX75]

@Lattenknaller
I think the problem is in the

Code: Select all

if (cc ==0 )

block on line 1607. You are trying to change the visibility of elements that are not on the ADS. In any case, if you remove this block, AOD works. Try to add screen type check to this block.

I also don't understand why you write

Code: Select all

 let cc = 0

in the previous line? Because in this case cc ==0 and checking this condition is meaningless. Probably. You should move the declaration of this variable to the very beginning.

[Lattenknaller]

@SashaCX75
Thank you very much,
I have now added the type check. Until now, I always assumed that it was sufficient to define the variables as "normal" or "idle".

And yes, the declaration belongs at the beginning, it was always there until now, I have no idea why it is now at the bottom.