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

[Guydu91]

On the watchface of my Active 2 NFC I have a field with compass (no matter whether numerical values or images). When I tap a button with <Compass empty>, this app doesn't work, either black screen or freezing compass. When I clear the field <compass> on the watchface, the app button works fine. Has somebody a idea how to solve this problem?

I don't have an Active 2 NFC, so I'm not sure if the issue is the same as the Bip6, but from what you described, the symptoms are similar.
You can check out this post. I hope it's helpful.
viewtopic.php?p=21156#p21156

Same problem on GTS4...

[curtis66]

Hello. I have heart problems, and the HRV value is important to me. When I like a face, I download it and edit it with your fantastic software to adapt it to my needs and language. I always add this HRV data. I'd like to be able to create a button and assign this HRV function to it. It's not currently available. I'd also like, in addition to the numerical HRV data, the option to assign an image to the status shown in the app. Would that be possible?

Thank you, and congratulations on creating and constantly updating this face editor.

[SashaCX75]

@curtis66 There's a button to launch the HRV app in the editor.

It is not possible to set a set of images for HRV (such as for the pulse).

[curtis66]

Perfect. Thanks for responding. And can you assign HRV to a button?

[Mkmck]

Hey. How can I convert WF made in Watch Face Editor to .ZAB file to share it to official Zepp market?

[Bresbres]

i made a wathface with my own interpretation of an other user his watchface. How can i upload that picture to my profile, but i don't want anyone else too see it already, cause it is still in development. but i want to upload it so i can download from amazwatchfaces to my BIP 6 to test it.
Or is there another way to upload a custom made watchface to my BIP 6, other than with amazfitwatcfaces?

[asoo]

i made a wathface with my own interpretation of an other user his watchface. How can i upload that picture to my profile, but i don't want anyone else too see it already, cause it is still in development. but i want to upload it so i can download from amazwatchfaces to my BIP 6 to test it.
Or is there another way to upload a custom made watchface to my BIP 6, other than with amazfitwatcfaces?

You can try the link below, it might help you.
viewtopic.php?p=17161#p17161

[Emiliomc]

I created a watchface for my Balance 2 in SashaCX75's app. I created "Hours" and "Minutes" using the utility offered by the app. That is, without creating the .pngs. I just added the font I wanted the app to use. With horizontal alignment set to "Center". Vertical alignment set to "Top". Text wrap set to "Single line". I have "Add leading zeros" checked. In App Settings, I have unchecked the option "If possible, display the time in 12-hour format". I have AM/Pm checked with two .pngs of "Am" and "Pm". In the zip file that is generated when I package, I open the "watchface" folder and modify the two lines where it says "Am" and the two lines where it says "Pm", deleting "Am" and "Pm". Currently, when I have the clock set to 24-hour time, neither "Am" nor "Pm" appear. As it should. And it appears with leading zeros. As it should. But I'd like for the clock to be displayed without leading zeros when I set it to 12-hour time, which is when the "Am" or "Pm" .png files appear correctly. I've been digging through the index.js file, but I don't know which line I should modify. Or if I should add a line and where. If you could help me, please.

[SashaCX75]

@Emiliomc The checkbox in the settings “If possible, display the time in 12-hour format” only affects the preview display in the editor. It does not affect the display on the watch. It is unclear why and which lines you are deleting with the mention of ‘Am’ and “Pm.” I don't think this is necessary.

Do you want leading zeros to be displayed in the 24-hour format but not in the 12-hour format?
Then you need to find the time_update function. If you use the watch:minutes widget to display the time, then there will be a line

Code: Select all

normal_HourMinStr = normal_HourMinStr.padStart(2, ‘0’);

Replace it with

Code: Select all

if (timeFormat == 0) normal_HourMinStr = normal_HourMinStr.padStart(2, ‘0’);

And before that, add

Code: Select all

const timeFormat = hmSetting.getTimeFormat();

I haven't tested this code, but it should work.

[Emiliomc]

It's obvious I'm doing something wrong, because it's not working for me. I'm including screenshots of the index.js file and the lines I think I understood, which I need to change. And screenshots of the app. When I select the 12-hour format on the clock, the leading zeros still appear. For example, 18:45 in 24-hour format, and 06:45 in 12-hour format. What I want is 00:45 in 24-hour format and 0:45 in 12-hour format.

Spoiler

[SashaCX75]

@Emiliomc
I made a slight mistake. The condition should be as follows:

Code: Select all

if (timeFormat != 0) normal_HourMinStr = normal_HourMinStr.padStart(2, '0');

Here is a test watch face with a code.

[Emiliomc]

Thank you so much, Sasha! The code works perfectly. Thanks so much!

[Hieutr632]

hello, can someone teach me how to convert gtr 4 watchfaces to amazfit balance?

[asoo]

hello, can someone teach me how to convert gtr 4 watchfaces to amazfit balance?

What you need to know before converting a watchface:
1. The watchface file must contain a script that complies with the "Watchface Editor for Amazfit Watch on ZeppOS" standard.
2. The watchface file must not be encrypted.
If the watchface file contains encryption or scripts that do not comply with the program's standards, you will not be able to convert that watchface file.

---

If your watchface file does comply with the program's standards, the conversion process is as follows:
1. Prepare the .zip watchface file you want to convert.
2. Open the program and click "Unpack Watchface," then select the watchface file you prepared and click "Open."
3. Once the unpacking is complete, go to "Convert."
4. Select the Initial model that matches the original model and the Target model you want to process.
5. Click "Convert." When finished, click "OK."
6. Then click "Pack Watchface" to pack the converted watchface into a .zip watchface file.
Now you have a .zip watchface file converted to your desired device.

Preview

[Emiliomc]

A few days ago, Sasha solved a problem I was having. I wanted the clock to have leading zeros when it was in 24-hour format. But when it was in 12-hour format, it wouldn't have leading zeros. The solution, which works perfectly, is to modify the index file. This corresponds to the first two screenshots I posted. The second screenshot is a modification of the first. But now I want to go further... I suspect, although I'm not sure, that it can be done by modifying the index.js file using code. As for code, I'm still below novice... but I'm trying. I would like the seconds to be located at a specific x coordinate (406) when the clock is in 24-hour format, and the seconds to be located at a different x coordinate (394) when the clock is in 12-hour format. The only thing I could think of is a "copy and paste". I copied the code for the seconds (third screenshot), added it to the solution Sasha gave me, but changed the x-coordinate value for the seconds from 406 to 394 (fourth screenshot)... and of course, it doesn't work. It wasn't going to be that simple, of course...

Spoiler

[Emiliomc]

Okay, so far I think it was pretty bad. I should at least try it in console.log('second font'); and not in the hours and minutes. I've tried several ways in the seconds console. I think the key is != 0, but I've done several tests and it doesn't work.

[SashaCX75]

@Emiliomc
What you wrote does not make sense. Such code can lead to endless creation of widgets and watch reboots due to insufficient memory. I recommend learning the basics of JS first.

[Emiliomc]

Well, I tried to start completely from scratch and, without any help, make sense of something I've never studied in my life. Unfortunately, I don't have as much time as I suppose studying this language requires. For me, creating watchfaces is a hobby. I enjoy it when I'm not busy. I really appreciate both the warning and the recommendation, Sasha.

[taw_bip]

Well, I tried to start completely from scratch and, without any help, make sense of something I've never studied in my life. Unfortunately, I don't have as much time as I suppose studying this language requires. For me, creating watchfaces is a hobby. I enjoy it when I'm not busy. I really appreciate both the warning and the recommendation, Sasha.

I recommend using AI tools, such as ChatGPT or Claude or Gemini. Feed it your code and prompt it to make the modifications.

[taw_bip]

i made a wathface with my own interpretation of an other user his watchface. How can i upload that picture to my profile, but i don't want anyone else too see it already, cause it is still in development. but i want to upload it so i can download from amazwatchfaces to my BIP 6 to test it.
Or is there another way to upload a custom made watchface to my BIP 6, other than with amazfitwatcfaces?

I install watchfaces from my Android phone this way:
1. download the file usually in .zip format (you can also install it across a network if the file is on a NAS)
2. clear the data/cache from the Zepp app
3. load the Notify for Amazfit app (you need to set it up, get your watch's pairing code, etc. follow the instructions)
4. when all set up, click on the "Devices" icon at the bottom. Tap "Watchfaces" press the "hamburger" settings icon on the top-left. Select "Custom watch-face (.bin)"
5. This will open up the phone file manager. If the file is in your Downloads folder, select that. Then select the .zip file. Hit the "Install" button.
6. If all goes right, it will install the watchface.
7. Once you're done testing, do the storage app/cache wipe of the Notify for Amazfit app.
8. Open the Zepp app and re-login to connect it to the watch.

[Emiliomc]

Thank you

[Emiliomc]

Sasha, is there a possibility that in a future update of your app, SashaCX75, you could add the ability to create a widget to view the smartphone's battery level on the smartwatch?

[SashaCX75]

Displaying the phone's battery charge requires the installation of additional applications. Therefore, I am not sure whether it is worth adding such a feature to the watch face. After all, without these applications, it will not work.

[Emiliomc]

Ok

[Emiliomc]

I'm starting a new watchface project. It's analog. I had the idea that the watchface could display 12, 6, and 9 when the watch is in 24-hour mode. And when I select 12-hour mode on the watch, the face would display 12, 6, and 9 in the morning and 24, 18, and 21 in the evening. I've been researching whether this is possible directly in the SashaCX75 application, or if it requires modifying the index.js file, or if it's simply not possible. Currently, I have two identical watch faces, one with 12, 6, and 9, and the other with 24, 18, and 21. I've looked into Analog Time Pro, specifically activating "24-hour format" (which I don't understand), and adding the second watch face as a foreground image on the hour hand. I've also checked if the solution was in "Switchable Background." Ultimately, I don't know if this is possible at all.