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

[asoo]

@asoo

Hi,
Could you please explain how to create or add a shortcut in the tools editor of Editor V15?

Thanks

Spoiler

I'm not entirely sure about your question. From the image you attached, it look like you wath to enable a shortcut on the image of the element that supports this functionality.
if I think right , the method of use is simply to place the correct mark in the frame, and then the heart reate image (Zone) will be a shortcut link to that element. ( in this case shortcut is open heart rate screen )
That's it, nothing more.

Codice: Seleziona tutto

normal_heart_rate_image_progress_img_level = hmUI.createWidget(hmUI.widget.IMG_LEVEL, {
x: 162,
y: 29,
image_array: ["Act_W_0.png", "Act_W_1.png", "Act_W_2.png", "Act_W_3.png", "Act_W_4.png", "Act_W_5.png"],
image_length: 6,
shortcut: true,  <----------------- This is the line that sets the heart rate image as a shortcut. ------------
type: hmUI.data_type.HEART,
show_level: hmUI.show_level.ONLY_NORMAL,
});

It works the same as the shoutcut element.

Codice: Seleziona tutto

normal_heart_jumpable_img_click = hmUI.createWidget(hmUI.widget.IMG_CLICK, {
x: 151,
y: 334,
w: 100,
h: 100,
type: hmUI.data_type.HEART,
show_level: hmUI.show_level.ONLY_NORMAL,
});

The only difference is that you can't specify x, y, w, or h.

The " shortcut: true " is attached to the element's image.

Actually, if you want to understand more, try creating a widget
and pack it in. Then, look at index.js. or sync to you watch for test.
You should be able to understand it better.

[rush2112]

Thanks for your help.

[SashaCX75]

@rush2112 If you use this widget, turning on this switch allows it to function as a shortcut. Nothing else needs to be added.

[Emiliomc]

Maybe I didn't search properly, and I apologize. I've updated to the latest version of sashacx75's app (Version 14.1.1) and once installed, I can't get it to run despite the initial warning when trying to run it. The app simply won't open. I've deleted and re-downloaded it, but nothing. I've given it permissions on my firewall, but nothing. I've tried running it as an administrator, but nothing. I have an updated Windows 11. What am I doing wrong?

[asoo]

Maybe I didn't search properly, and I apologize. I've updated to the latest version of sashacx75's app (Version 14.1.1) and once installed, I can't get it to run despite the initial warning when trying to run it. The app simply won't open. I've deleted and re-downloaded it, but nothing. I've given it permissions on my firewall, but nothing. I've tried running it as an administrator, but nothing. I have an updated Windows 11. What am I doing wrong?

Please try this Version 15
viewtopic.php?p=21105#p21105

[Emiliomc]

Thank you so much!!! I was trembling for a moment, because the previous version wasn't working for me either. Thank you, thank you, thank you.

[SashaCX75]

Version 15.1
https://apps.microsoft.com/store/detail/XP89MR7PJVT9Q9
Added support for new watch models.
Added BioCharge widget.
Added buttons to launch new applications.

I will post the archive here on the forum later.

[UlliT.]

Hi,

is it normal, that the watch face editor cannot maximized and has no save button (only save as)?#

And where do i find help how to install my watchface on my amazfit active 2?
(there is a link to a how to - but this is only for android 10 and older)

Ulli

[SashaCX75]

The editor window cannot be enlarged, and this will not change in the near future.
The editor will prompt you to save the project when you exit or compile the watch face. You can also save it by pressing Ctrl+S.

viewtopic.php?t=3873
The installation method does not depend on the Android version.

[UlliT.]

(hope, that this is not a duplicate - i did not find the last attempt...)

Thanks for your help - so i could install my first own watchface on my amazfit active 2.
I am happy that (in contrast to the Zepp Editor) the altitude and the sensor-temperatur are possible and working.

But there are two issues:

1. The position of texts are on the watch not at the exact the same as in the watchface editor.

2. In the Editor i have a battery bar and a step goal bar. Both are made exactly on the same war. But only the battery bar comes to the watch.

it is easy to change the position of texts in the editor, so that it looks better on the watch.
But i have no idea about the missing bar...

Any ideas?

Spoiler

[SashaCX75]

@UlliT. It all depends on how these elements are made.

If the numbers are an external font, unfortunately for many fonts, the text position does not match what is in the editor. I can't do anything about this, so there is a warning in the font settings to check how they look on the watch.

If the progress scale for steps is made as a set of images, they will not start displaying from step 1. It depends on the number of images used and the purpose of the steps. Usually, 400 steps are needed, and this can be seen in the editor.

[UlliT.]

@SashaCX75

Thank you very much for the explanations. ...

But: The font for hour and minute is one of the fonts coming with your editor. And also the hour and minute is not at the "correct" position.

[SashaCX75]

No fonts are included with the editor.

[taw_bip]

@SashaCX75 Will the editor update automatically if installed from the Microsoft store?

[SashaCX75]

@taw_bip I think it depends on your stored settings. It also depends on how you installed the application, whether from the store application or from the store website.

[lobianco]

I'm creating a watchface for the GTR mini using SachaCX75's extraordinary program. When I click the button I created to call the user_js function, which changes the background, clock hands, and battery color (created using Circle Progress, in white), everything changes as desired. However, when the smartwatch turns off the screen and then displays the screen again, the background and clock hands continue to change, as desired by clicking the button, but the battery circle color returns to white, not the color I intended by clicking the button.

Where am I going wrong?

[asoo]

I'm creating a watchface for the GTR mini using SachaCX75's extraordinary program. When I click the button I created to call the user_js function, which changes the background, clock hands, and battery color (created using Circle Progress, in white), everything changes as desired. However, when the smartwatch turns off the screen and then displays the screen again, the background and clock hands continue to change, as desired by clicking the button, but the battery circle color returns to white, not the color I intended by clicking the button.

Where am I going wrong?

You'll notice in index.js that the Battery Circle Progress widget is updated via the scale_call() { ....................} function.
And the scale_call() function will be Processing again with function "resume_call" after screen open
So, when the screen goes off and back on, or the battery value changes, the color of the Circle Progress will be updated with the value in the scale_call() function.

Spoiler

Codice: Seleziona tutto

function scale_call() {
console.log('scale_call()');

console.log('update scales BATTERY');

let valueBattery = battery.current;
let targetBattery = 100;
let progressBattery = valueBattery/targetBattery;
if (progressBattery > 1) progressBattery = 1;
let progress_cs_normal_battery = progressBattery;

if (screenType != hmSetting.screen_type.AOD) {

// normal_battery_circle_scale_circle_scale
let level = Math.round(progress_cs_normal_battery * 100); 
if (normal_battery_circle_scale) {
////// battery circle porgress will be update with this line script 
normal_battery_circle_scale.setProperty(hmUI.prop.MORE, { 
center_x: 240, 
center_y: 240, 
start_angle: 0, 
end_angle: 360, 
radius: 98, 
line_width: 5, 
corner_flag: 0,
// change color code with Variable values ​​in this line 
color: 0xFFFF8C00, 
show_level: hmUI.show_level.ONLY_NORMAL, 
level: level, 
}); 
}; 
}; 

}; 

const widgetDelegate = hmUI.createWidget(hmUI.widget.WIDGET_DELEGATE, {
resume_call: (function () {
console.log('resume_call()');
scale_call();
}),
});

//dynamic modify end
},

So, even if you change the color with your script, when the screen goes off and back on, or the battery value changes, the color of the battery circle progress will be the color specified in scale_call().

So, if you want to change the color that you plan, After you've packaged you must to edit it in index.js direct.
You can set the color value in a variable and replace it in "color:" line


Edit your user_functions.js :

Spoiler

Codice: Seleziona tutto

let colornumber_main = 1
let totalcolors_main = 7
let colors = "0xFFFFFFFF"

function click_Color() {

    if(colornumber_main>=totalcolors_main) {
        colornumber_main=1;
    }
    else {
        colornumber_main=colornumber_main+1;
    }

    normal_analog_clock_pro_hour_pointer_img.setProperty(hmUI.prop.SRC, "pontHor" + colornumber_main + ".png");
    normal_analog_clock_pro_minute_pointer_img.setProperty(hmUI.prop.SRC, "pontMin" + colornumber_main + ".png");
    normal_analog_clock_pro_second_pointer_img.setProperty(hmUI.prop.SRC, "pontSec" + colornumber_main + ".png");
    normal_background_bg_img.setProperty(hmUI.prop.SRC, "Back" + colornumber_main + ".png");

    if(colornumber_main==1) {
               colors = "0xFFC9C9C9"
    }    
        else {
            if(colornumber_main==2) {
                colors = "0xFFFFCC00"
            }
            else {
                if(colornumber_main==3) {
                    colors = "0xFFBAC095"
                }
                else {
                    if(colornumber_main==4) {
                        colors = "0xFFFFB3BA"    
                    }
                    else {
                        if(colornumber_main==5) {
                           colors = "0xFFBAE1FF"
                        }
                        else {
                            if(colornumber_main==6) {
                                colors = "0xFFFF9224"     
                            }
                            else {
                                if(colornumber_main==7) {
                                    colors = "0xFFFF0000"   
                                }
                            }
                        } 
                    }   
                }
            }
        }

}

For example:
Edit Widget and function scale_call() in file index.js :

Spoiler

Codice: Seleziona tutto

// in widget area 

           normal_battery_circle_scale = hmUI.createWidget(hmUI.widget.ARC_PROGRESS, {
              center_x: 240,
              center_y: 240,
              start_angle: 0,
              end_angle: 360,
              radius: 98,
              line_width: 5,
              corner_flag: 0,
              // change color code with Variable values ​​in this line 
              color: colors,
              show_level: hmUI.show_level.ONLY_NORMAL,
            });


. . . 

// in  scale_call() area 

if (normal_battery_circle_scale) {
////// battery circle porgress will be update with this line script 
normal_battery_circle_scale.setProperty(hmUI.prop.MORE, { 
center_x: 240, 
center_y: 240, 
start_angle: 0, 
end_angle: 360, 
radius: 98, 
line_width: 5, 
corner_flag: 0,
// change color code with Variable values ​​in this line 
color: colors, 
show_level: hmUI.show_level.ONLY_NORMAL, 
level: level, 
});

---

However, this is not the only solution. There may be many other solutions, depending on individual perspectives.

[SashaCX75]

Version 15.1

Archive

Dropbox
GoogleDrive

Installer

Dropbox
GoogleDrive

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

[Phantan74]

I use "Watch face editor for Amazfit watch on ZeppOS" to create a watch face for Active 2. I want the battery hand to point from 0 to 100 (see attached image) but in fact it goes beyond the range from 0-100.

Please help me. Thank you very much.

Spoiler

https://1drv.ms/i/c/52a6f8787c10ee6a/EZ ... Q?e=Q7zCxM

https://www.dropbox.com/scl/fi/0jclass0 ... ls6p3&dl=0

[Lattenknaller]

start angle -120
end angle 60

[Phantan74]

start angle -120
end angle 60

Thanks, how to get this -120/60 value?.

[asoo]

start angle -120
end angle 60

Thanks, how to get this -120/60 value?.

This is obtained by calculating the degrees of a circle.
If the degrees are positive, it's easier to understand.
Start at 240
End at 420
The result is the same.

Spoiler

360 + (-120) = 240
360 + (60) = 420

However, in some cases, using a degree value greater than -+360 may cause problems with calculations in some widgets, so the value - is used instead.

[Phantan74]

start angle -120
end angle 60

Thanks, how to get this -120/60 value?.

This is obtained by calculating the degrees of a circle.
If the degrees are positive, it's easier to understand.
Start at 240
End at 420
The result is the same.

Spoiler

360 + (-120) = 240
360 + (60) = 420

However, in some cases, using a degree value greater than -+360 may cause problems with calculations in some widgets, so the value - is used instead.

i understand, thank you very much

[marrud12]

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?

[asoo]

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