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

[SashaCX75]

Perhaps because of translation and did not understand the problem correctly.

When using a font, the height position of the ‘:’ separator relative to the rest of the text is determined only by the font itself. The preview editor uses a font similar to the system font in the clock, but there may be slight inaccuracies.

When using the font to display AM/PM on the clock, there is a toggle on the right side of the clock. It also depends on the time settings in the clock.
In your case, if the clock has a 12-hour time format, the AM/PM lettering will not fit in the text block. This may affect its alignment.

If you want the separator to always be in the middle of the screen, using a font will not work. Even if you enable the display of leading zeros the length of the caption will vary slightly. This is because the numbers have different widths.

[Emiliomc]

I think I understand what you're saying. But I have some doubts about whether we're talking about the same thing. I've attached two images. Image "01" would be how I'd like the height of the ":". However, the height of the ":" is ultimately like image "02." That is, at the same level as the hour digits. Are we talking about the same thing, and therefore it can't be solved by using a third-party font?

Spoiler

[SashaCX75]

@Emiliomc
This can be solved with a third-party font. But you need to find a font with a similar style of numbers and display «:» above. Or edit the font so that the «:» symbol is displayed above. I haven't done this myself, but I know there are utilities for editing fonts. I don't think it will be difficult to simply move the symbol.


Or you can use a set of images instead of a font. User @TRK88PL has created a good utility that makes it easier to create the necessary images.
https://amazfitwatchfaces.com/gen/

[frankh93]

@Emiliomc
This can be solved with a third-party font. But you need to find a font with a similar style of numbers and display «:» above. Or edit the font so that the «:» symbol is displayed above. I haven't done this myself, but I know there are utilities for editing fonts. I don't think it will be difficult to simply move the symbol.


Or you can use a set of images instead of a font. User @TRK88PL has created a good utility that makes it easier to create the necessary images.
https://amazfitwatchfaces.com/gen/

What about my issue? is there a chance to hide AM/PM thing when using a font file? cause when the phone clock is in 24hr format the center alignment works fine, the issue only comes when the clock is in 12hr format. Managed to hide it reducing the height but still the alignment gets a bit to the left. I don't mind if the separator ":" isnt centered, I just want the whole clock to be centered in both formats (12H/24H)

[SashaCX75]

s there a chance to hide AM/PM thing when using a font file?

Edit the packed dial. Find these lines in it and replace them with an empty line.

[SashaCX75]

We do not use the 12-hour time format. Therefore, I do not know the specifics of its use. How common is it to display only numbers without AM/PM designation. I don't think it is common. That is why there is no option to switch it off in the editor.
And as I wrote in the post above you can use a set of images instead of a font. If there are no necessary images they will not be displayed.

[Imozeb]

I created a watch face in version 13.2 for my Bip 5.

I used distance -> text font option to display the distance. and units

The units are stuck in kilometers and the units do not respect changing the units to imperial (miles) from the Zepp app.

I confirmed that this is not a bug with the Bip 5 firmware because other watch faces allow switching between distance units (both some older ones made in this software and ones made in other software).

[frankh93]

We do not use the 12-hour time format. Therefore, I do not know the specifics of its use. How common is it to display only numbers without AM/PM designation. I don't think it is common. That is why there is no option to switch it off in the editor.
And as I wrote in the post above you can use a set of images instead of a font. If there are no necessary images they will not be displayed.

Could you tell me how to edit the packed watchface? Can I edit the index.js just uncompressing it? I would be thankful if you tell me how. About how common is to hide the AM/PM over here, it is pretty common cause sometimes we skip the AM/PM thing when reading the clock. Is it possible you add an option to hide it, please?

[Emiliomc]

SashaCX75, thank you so much for the suggestions on how to resolve the height of the ":" characters. I couldn't figure it out with the app from my colleague, which is very interesting. But I found an app to edit .ttf files and increase the height of the ":" characters. It's called FontForge. Easy to use for my purposes.

On another note, I'm having a problem creating a watchface on my GTS 4. I think the topic was discussed in the forum, but I can't find it. My GTS 4, for example, tells me the distance traveled is 2.14 km, yet the watchface shows 2.10 km. There's always a slight difference, which isn't the case with other values ​​like BPM, calories, steps, etc. My question is if, in relation to distance, this could be corrected by editing the index.js file created with the watchface, and if so, how?

[SashaCX75]

@Imozeb
I replied to you on GitHub. I reported the issue to the developers. The simplest option is not to use the font, but to use a set of images instead.

[SashaCX75]

@frankh93
You can open the watch face with any archiver. It is a regular zip archive. You can edit the files directly in it. In any text editor, find the text AM or PM enclosed in quotation marks and simply delete it, leaving the quotation marks. It is advisable to have basic programming knowledge so as not to delete anything unnecessary.

[SashaCX75]

for example, tells me the distance traveled is 2.14 km, yet the watchface shows 2.10 km.

I haven't heard of such a problem. I use steps rather than distance myself. That's why I haven't noticed anything like that either.

There are several types of distance widgets. Try using ‘Values in a circle’ or ‘Values at an angle’. These two types use a different method of displaying data.

[Guydu91]

for example, tells me the distance traveled is 2.14 km, yet the watchface shows 2.10 km.

I haven't heard of such a problem. I use steps rather than distance myself. That's why I haven't noticed anything like that either.

There are several types of distance widgets. Try using ‘Values in a circle’ or ‘Values at an angle’. These two types use a different method of displaying data.

I don't think there's really a perfect answer to this question...
Indeed, apart from sports activities requiring GPS (running, cycling, swimming, etc.), smartwatches don't use any GPS data, and therefore the distances displayed on the watch are simply a calculation of the number of steps multiplied by an arbitrary value of one step (from what I understand: 0.65 m).
Since each individual is different (height, body type, walking style, etc.), the watch will provide approximate distance values.
However, the number of steps is recorded by the watch's pedometer and is a slightly more reliable value.
Be careful, however, I've noticed that pushing a lawnmower, a supermarket cart, or a child's stroller distorts the step recording: they simply aren't counted because the arm isn't swinging.
Another funny thing: parking in a car can count steps... even when you're sitting down!!
Other information: calories are also the result of a calculation and not an actual count.
In conclusion, the information provided by our watches is more indicative than anything else and reflects an activity whose evolution can be seen over time.

[frankh93]

@frankh93
You can open the watch face with any archiver. It is a regular zip archive. You can edit the files directly in it. In any text editor, find the text AM or PM enclosed in quotation marks and simply delete it, leaving the quotation marks. It is advisable to have basic programming knowledge so as not to delete anything unnecessary.

Cool, thank you. I was able to modify the file and got it working.

Btw I made another one before, it was supposed to have the min and max heartrate values but as the tool doesn't have it I wasn't able to add it... Is there a chance you add these values?

[SashaCX75]

@Guydu91 It doesn't matter how accurately the watch calculates the distance. In any case, regardless of the display method, this number should be the same. I checked this. And when displaying in font, the last digit is always 0. This is a firmware error. I also found that when displaying values at an angle and values around the circumference, they are always displayed in kilometres. This is an editor error and will be fixed in future versions.

[SashaCX75]

Btw I made another one before, it was supposed to have the min and max heartrate values but as the tool doesn't have it I wasn't able to add it... Is there a chance you add these values?

This is not planned for upcoming versions.

[SashaCX75]

Version 14.0
Mirror
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.

[rush2112]

@SashaCX75

Thanks

[frankh93]

Btw I made another one before, it was supposed to have the min and max heartrate values but as the tool doesn't have it I wasn't able to add it... Is there a chance you add these values?

This is not planned for upcoming versions.

It is not? May I ask why?
Btw thank you so much for the new version

[SashaCX75]

It is not? May I ask why?

Because there isn't enough time for everything

[Imozeb]

I noticed that the calories burned for walking on my Bip 5 is very inaccurate. Is there any way to pull distance from the watch as a float and use my own algorithm to calculate my own calories to display (not overwriting their calorie calculation, but just displaying what my algorithm calculates)?

[SashaCX75]

@Imozeb
https://docs.zepp.com/docs/watchface/ap ... /DISTANCE/
But if your algorithm is based on distance alone, it will be even less accurate.

[Imozeb]

So after reading the docs, I think I partially understand.

Just two questions:
1. Am I correct that to add custom text, calculations, etc, I would export the watch face from your software and then edit the json file to add my custom scripts?

2. The docs do not mention math functions at all. Do you know if it is possible to implement simple math to calculate my own calories burned? For example, simple addition, multiplication, division of variables like HR, distance, and constants.

If I get this working and tracking closer to what should be more accurate (eg papers on Apple Watch calories burned), I can provide my script to the community if you wanted to implement it. The final goal would be to get more accurate walking and running calories based off better equations that match more closer to an Apple Watch.

Thanks!

[SashaCX75]

@Imozeb
1. To add your code to the watch face, you can edit the js file in the compiled watch face or add the code via the editor. The first method is more convenient if you need to edit and debug the added code. The second method is easier if the code has already been tested and only needs to be slightly modified for the new project.

2. You can use any mathematical functions available in JS.

[Imozeb]

I've tested a couple things tonight and found that if I unzip and then rezip the watchface package generated by your program (without editing the index.js file), it won't upload to my watch anymore, so I may have to go with the second route which is adding the code via the editor. However, it looks like there are several places that I could add the code. Is there any documentation as to which of the several .js files to use for different types of code (e.g. functions, hmUI.createWidget, calling sensors etc)?

For a test, I want to simply read the distance sensor, add a constant value of 10 to it and print that to the watchface below the real distance. If I can successfully do this test, I can figure out the rest for sure. I am just not sure which .js file in the editor I should add the different sections of code to.