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

[domenicopardo]

@SashaCX75
I made this change but it doesn't work
// Start combined color change
let colornumberCombined = 1;
const totalcolorsCombined = 2;

function click_HAND_S() {
if (colornumberCombined >= totalcolorsCombined) {
colornumberCombined = 1;
} else {
colornumberCombined++;
}

// Update second hand
let namecolorS = colornumberCombined == 1 ? "Red" : "Blue";
normal_analog_clock_pro_second_pointer_img.setProperty(hmUI.prop.SRC, "Hand_S" + colornumberCombined + ".png");

// Update background
let namecolor = colornumberCombined == 1 ? "Style 1" : "Style 2";
normal_background_bg_img.setProperty(hmUI.prop.SRC, "main" + colornumberCombined + ".png");

// Update hour hand
normal_analog_clock_pro_hour_pointer_img.setProperty(hmUI.prop.SRC, "Hand_H" + colornumberCombined + ".png");

// Update minute hand
normal_analog_clock_pro_minute_pointer_img.setProperty(hmUI.prop.SRC, "Hand_M" + colornumberCombined + ".png");

// Show toast message
hmUI.showToast({ text: `Colors Updated to ${namecolorS} and ${namecolor}` });
}

// Funzione per attivare automaticamente alle 6:00 del mattino e alle 18:00 di sera
function time_update() {

if (hour == 6 || hour == 18);
click_HAND_S();
}
}

[rush2112]

@SashaCX75

Good Morning,
Small question maybe you do know the GTR3 Pro for the next update on this watch is finish or not, I did send a lot of request at the Amazfit Team but they never did reply that is really sad that is a watch still for sale everywhere ( Store ,Amazon....... ) still expensive , that means the Zepp OS will stay 1.0

[SashaCX75]

@rush2112
I am not an employee of Amazfit and don't know about their plans. But my opinion is that GTR3 (Pro) will not be updated anymore.

[SashaCX75]

@domenicopardo
I wrote about adding these lines to an existing function. And judging by your post, you are creating a new function with the same name. Of course, it will not work correctly.

When adding code to your post, I recommend that you set appropriate tags. Otherwise it is difficult to read it.

[Emiliomc]

Hello. My english is terrible, sorry. First of all, thank you for this great application. It's very good. I have an Amazfit GTS 4 and I have already created some watchfaces. But now I want to introduce a progressive circle into a watchface and only part of this circle is shown starting with a pulse of 75. I have read that it could be corrected by modifying the index.js file. But that element to modify does not appear. I have also looked at other files inside the watchfaces folder, but nothing. I have the latest version of the application. How could I correct that?

[asoo]

Spoiler

Hello. My english is terrible, sorry. First of all, thank you for this great application. It's very good. I have an Amazfit GTS 4 and I have already created some watchfaces. But now I want to introduce a progressive circle into a watchface and only part of this circle is shown starting with a pulse of 75. I have read that it could be corrected by modifying the index.js file. But that element to modify does not appear. I have also looked at other files inside the watchfaces folder, but nothing. I have the latest version of the application. How could I correct that?

In index.js[/spoiler]

Codice: Seleziona tutto

                
                let valueHeartRate = heart_rate.last;
                let targetHeartRate = 179;
                let progressHeartRate = (valueHeartRate - 71)/(targetHeartRate - 71);
                if (progressHeartRate < 0) progressHeartRate = 0;
                if (progressHeartRate > 1) progressHeartRate = 1;
                let progress_cs_normal_heart_rate = progressHeartRate;

[Emiliomc]

I am very sorry for having asked the wrong place. Thank you very much for the reply. I'll try it. I suppose that I can put the line you suggest at the end, as an addition, in the index.js file.

[asoo]

I am very sorry for having asked the wrong place. Thank you very much for the reply. I'll try it. I suppose that I can put the line you suggest at the end, as an addition, in the index.js file.

Not adding more
If you pack with sasha's editor
You can found this code in index.js.
You simply edit 71 to the value you want.

[Emiliomc]

I apologize for continuing on the wrong site, but I don't know if they should redirect the query to another place. Very sorry. I'm trying what you're telling me and it's clear that I'm doing it wrong. In the Files_templates folder is the only place where I find an index.js file. I open it with the Windows 11 Note Block app, and at the end I add and save this:

(My intention is for the progressive pulse circle to move between a minimum of 0 and a maximum of 140)

Spoiler

/*
** Watch_Face_Editor tool
** watchface js version v2.1.1
** Copyright © SashaCX75. All Rights Reserved
*/

try {
(() => {
//start of ignored block
const __$$app$$__ = __$$hmAppManager$$__.currentApp;
function getApp() {
return __$$app$$__.app;
}
function getCurrentPage() {
return __$$app$$__.current && __$$app$$__.current.module;
}
const __$$module$$__ = __$$app$$__.current;
const h = new DeviceRuntimeCore.WidgetFactory(new DeviceRuntimeCore.HmDomApi(__$$app$$__, __$$module$$__));
const {px} = __$$app$$__.__globals__;
const logger = Logger.getLogger('watchface_SashaCX75');
//end of ignored block

//dynamic modify start

//Variable declaration section

//dynamic modify end

__$$module$$__.module = DeviceRuntimeCore.WatchFace({
init_view() {
//dynamic modify start

//Item description section

//dynamic modify end
},
onInit() {
logger.log('index page.js on init invoke');
},
build() {
this.init_view();
logger.log('index page.js on ready invoke');
},
onDestroy() {
logger.log('index page.js on destroy invoke');
}
});
;
})();
} catch (e) {
console.log('Mini Program Error', e);
e && e.stack && e.stack.split(/\n/).forEach(i => console.log('error stack', i));
;
}
{ let valueHeartRate = heart_rate.last;
let targetHeartRate = 140;
let progressHeartRate = (valueHeartRate - 0)/(targetHeartRate - 0);
if (progressHeartRate < 0) progressHeartRate = 0;
if (progressHeartRate > 1) progressHeartRate = 1;
let progress_cs_normal_heart_rate = progressHeartRate;
}

[asoo]

I apologize for continuing on the wrong site, but I don't know if they should redirect the query to another place. Very sorry. I'm trying what you're telling me and it's clear that I'm doing it wrong. In the Files_templates folder is the only place where I find an index.js file. I open it with the Windows 11 Note Block app, and at the end I add and save this:

I think you are misunderstanding.
The index.js file is in the .zip file that you will get when packing the watch face.
When you finish creating a watch face and pack it, you will get a watch face file with .zip extension.
The index.js file will be in that .zip file. When you uncompress the zip file, you will find the index.js file in the "watchface" folder.

index.js is the file that stores the dial code.
So if you want to edit the code of any watch face
You have to look in the .zip file of that watch face. that you received from the pack

[Emiliomc]

How clumsy I am... I was misunderstanding you. I think I've already done it well. It seems that now the progressive circle of the pulsations works as I have configured. That is to say; between 0 - 140. Thank you very much for your patience and help. I hope I'm not wrong.

[huesitos]

How can i get a press on the center of the dial to change color numbers?

[Emiliomc]

Hi,

First of all, I apologize if I shouldn't ask a question here in the forum.

I use SashaCX75's great tool to create a watchface for my Amazfit GTS 4. It recently occurred to me that perhaps through code the index.js file of a created watchface could be modified so that a button created (by modifying the line) would change directly from watchface to another watchface. Both watchfaces in my smartwatch store. One with the name White Watch and the other with the name Analog Black.

Something like:

hmApp.startApp({url: 'White Watch',native:true});

But it's not that simple. At least for me. Or is it not possible?

Thank you.

[SashaCX75]

@Emiliomc
The hmApp.startApp command is designed to start applications. Some watch faces can be started with this command, but even then not all elements on a watch face started this way work.

[Emiliomc]

Thank you. I understand that you can't do what I want then, right? not even adding something else to the line of a created watchface selection button (this one does exist)? My idea could perhaps start from this sphere selection button, but it would directly select the one that I indicate in the line that I modify, although I don't know what would be added and if it would work.

[Emiliomc]

Impossible then?

I have tried adding more lines to the preset "choose watchface" button so that it can then select the one I want, but with no results.

I understand that with javascript you can achieve many things, but I don't know this language. For example, I know that the Notify for Amazfit app has a plugin for Tasker (which I know how to use) that includes the possibility of changing the watchface by pressing the physical button. But I don't like this app. I use Zepp.

[SashaCX75]

@Emiliomc
It works so badly that you can consider it not working.
If Notify for Amazfit has this feature, it's done on the phone, not on the watch. Most likely the tap just sets a new watch face when the trigger is activated.

[Emiliomc]

Exact. Notify for Amazfit, with that plugin for Tasker, offers the opportunity to establish a new watchface with that touch. That's precisely what I want, but with a transparent button on my minimalist analog watchface. So from my main watchface I can set another watchface with more detailed information with a single tap on a transparent button. And from this second watchface I can return to my main watchface with another transparent button or a .png text. But if I remember correctly (I'm almost sure that's the case) it is by configuring the physical button on the watch. That is, I am almost sure that among the possibilities offered by the plugin, one of them is to establish a watchface by pressing the physical button on the watch. And I assume it was created with JavaScript language.

[Downloadking]

I'm new and I'm Italian. Sorry if this is a stupid question.

How to manage .bin files?

I have to convert a bin watch face of a GTS mini 2 to active.

Thanks

[asoo]

I'm new and I'm Italian. Sorry if this is a stupid question.

How to manage .bin files?

I have to convert a bin watch face of a GTS mini 2 to active.

Thanks

You posted a question on the wrong forum . Next time, recommend checking the forum before posting, and we recommend "Search" first before make a question.

You can find tools and more details about GTS2mini in this post.

viewtopic.php?p=12537#p12537

[Superwitschi]

Hello, if i make a new face for GTR 4 it does not show pointer for Heartrate anymore. Can someone help me?

[Downloadking]

But my question is in fact inherent to the whatchface editor for an Amazfit Active.
I would like to convert the watchfaces of the GTS 2/GTS 2 Mini into watchfaces for my Amazfit Active.
I've already searched a lot in the forum but so far I haven't found anything that leads me to the solution. I only found a way to unpack the Bin file but then I don't know how to create the zip for my Active

[Lattenknaller]

You'll have to do a bit of work yourself.
Unzip with this program: viewtopic.php?t=1888
Then you have to adjust the size of all graphics with a graphics program (Gimp, Photoshop or similar) and then you can use this tool:viewtopic.php?t=2743
create a new WF for the Active with the graphics from the old one.
A direct conversion from generation 2 to generation 3 or higher is not possible.

[TRK88PL]

Hey, @SashaCX75 can You somehow fix conversion / exporting for huge image size files? Ofc I try better quality set in settings, but on Gtr 3 there are black squares not images... I mean You can check my latest wf called TRK D008 and there You can see my result - top of hour isn't sharp at all, edges are torn... I use transparent text on black background method to displays many types of colors backgrounds.

[SashaCX75]

It is difficult to say something without seeing the original files. I can advise you to switch on the option to convert images without quality loss in the editor settings and make sure to force the ARGB format.

You can also try to change the colour of one pixel from #000000 to #000001. Then the image should not be perceived by the software as black and white and it may affect the conversion algorithms.