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

[Unkash]

hi, if i'd like to port my watch face (in my gtr3) to gtr2, how can i do this?

[aleste2]

I've been using your editor for some time, and now I am trying to use an editable background. I see how to introduce the desired number of images (Add background), how to select the image (background image), but I do not understand what is the foreground image. Also I do not see where is the definition of the zone to press to change background or how to change it in the watch. Am I missing something or I need to edit manually the code?

I respond myself: background selection is made in watchface selection page (long press).
Still I do not see what is the foreground image.

[SashaCX75]

Unkash Use editor for GTR 2

aleste2 I think that from the name it is clear that this is an image that is shown above the rest of the elements. Usually this is a ring around the perimeter of the dial and filling outside the ring. Such an image is clearly visible when there are other editable elements and you scroll through the screens with their settings.

[Unkash]

@Unkash Use editor for GTR 2

ok, thx, but my files are in .zip (for gtr3) and gtr2 use .bin files

sorry, im newbie

[aleste2]

@Unkash Use editor for GTR 2

@aleste2 I think that from the name it is clear that this is an image that is shown above the rest of the elements. Usually this is a ring around the perimeter of the dial and filling outside the ring. Such an image is clearly visible when there are other editable elements and you scroll through the screens with their settings.

Yes, the name was clear, but I was not able to see when it appears. Thank you.

[Xemic]

SashaCX75
First of all a massive thank you for the tool your created. I has helped me create a few watch faces.
i have some questions
1. it possible to slant or tilt text / images with the the tool?
2. is it also possible to add alignment to the Day of the week (Center or Right)? Either in tool or the index.js file, at present it's on Left.

Thank you.

[SashaCX75]

Xemic 1. Text cannot be rotated using the editor. This can be done with code.
2. I didn't understand the question. The day of the week is made as a set of pictures of the same size. As you draw text in them (in the center of the picture or from some edge), so it will be displayed on the clock.

[Xemic]

Sasha
1. Thanks for the answer - do you have a sample of code were rotation was applied?

2. Sorry what i meant was is there a way to add alignment option to Day of Week and Month



Thanks

[Xemic]

Sasha please ignore my questions, just noticed your GitHub links that answers my questions.

[TheChemist]

Hello,
For watchfaces with digital time, the tool uses images of digits from 0 to 9 and makes all numbers with them. Is it possible in some way to use seperate images for all numbers from 0 to 23 (or from 1 to 24)?
That would open up a whole new way of showing time with images.

[Superwitschi]

My smooth second freezes every 15 seconds. Somone know why? https://amazfitwatchfaces.com/gtr/view/31117
tag heuer update
Can somone please have a look at it?

Never mind, i found the solution.

[demiurg1]

Interesting question about numbers 00 to 12 or 00 to 24 that could be presented as pictures. The problem, however, will not be with hours, but with minutes, because there are as many as 60 of them. Seconds are similar. So many graphics will probably overload the watch system too much.
I once designed my own graphic numbers. I was inspired by the movie Predator. Link to this watch face: https://amazfitwatchfaces.com/gtr/view/16902 .

[ZduneX25]

Where is the question? Pattern is 0123456789, ten images. There is no variable that needs more and OS will not let you use more even if you want to.

SashaCX75 is there a way to load boolean after onDestroy is called?
i control battery progress widget by boolean:

Code: Select all

hmFS.SysProSetBool('dial2', false);

then once button is pressed:

Code: Select all

hmFS.SysProSetBool('dial2', true);

and finally:

Code: Select all

const arc2 = hmFS.SysProGetBool('dial2')
...
if (arc2 === true) {
    dial2_normal_battery_circle_scale.setProperty(hmUI.prop.VISIBLE, true);
 } else {
    dial2_normal_battery_circle_scale.setProperty(hmUI.prop.VISIBLE, false);
 }

it works well if users does not use AOD, if AOD is enabled watch face resets boolean status and progress is empty after raise to wake gesture..

[SashaCX75]

ZduneX25
I have a SysProSetBool that works great for passing data to an AOD screen. So either this function works differently on different models or you are doing something wrong.

[Zecodorna]

How do I add a shortcut to the calendar in t-rex 2?...I changed the name of a shortcut in index.js, but I don't know if I put the right name. I click on the shortcut and nothing happens.

normal_calendar_jumpable_img_click = hmUI.createWidget(hmUI.widget.IMG_CLICK, {
x: 178,
y: 289,
w: 100,
h: 100,
src: '98.png',
type: hmUI.data_type.CALENDAR,
show_level: hmUI.show_level.ONLY_NORMAL,
});

Replaces the word "SUN_CURRENT" with "CALENDAR"

[Lattenknaller]

Zecodorna
replace

Code: Select all

normal_sunrise_jumpable_img_click = hmUI.createWidget(hmUI.widget.IMG_CLICK, {
x: 178,
y: 289,
w: 100,
h: 100,
src: '98.png',
type: hmUI.data_type.SUN_CURRENT,
show_level: hmUI.show_level.ONLY_NORMAL,
});

with

Code: Select all

normal_img_click_1 = hmUI.createWidget(hmUI.widget.IMG, {
x: 178,
y: 289,
w: 100,
h: 100,
src: '98.png',
 show_level: hmUI.show_level.ONLY_NORMAL,
 });
normal_img_click_1.addEventListener(hmUI.event.CLICK_DOWN, function (info) {
hmApp.startApp({ appid: 1, url: 'ScheduleCalScreen', native: true })
});

[Lattenknaller]

SashaCX75 or @everyone
I have a problem here with my new project that I can't identify.

Digital hour display without preceding ZERO and right-aligned. Normally everything is fine, also in your tool are at AOD all good from. But on the clock then not. There the hour display is moved to the right (see pictures)
normal

AOD


Also the code looks actually good.
normal

Code: Select all

normal_digital_clock_img_time = hmUI.createWidget(hmUI.widget.IMG_TIME, {
              hour_startX: 138,
              hour_startY: 107,
              hour_array: ["big_00.png","big_01.png","big_02.png","big_03.png","big_04.png","big_05.png","big_06.png","big_07.png","big_08.png","big_09.png"],
              hour_zero: 0,
              hour_space: 3,
              hour_align: hmUI.align.RIGHT,

              minute_startX: 256,
              minute_startY: 107,
              minute_array: ["big_00.png","big_01.png","big_02.png","big_03.png","big_04.png","big_05.png","big_06.png","big_07.png","big_08.png","big_09.png"],
              minute_zero: 1,
              minute_space: 3,
              minute_follow: 0,
              minute_align: hmUI.align.RIGHT,

              show_level: hmUI.show_level.ONLY_NORMAL,
            });

AOD

Code: Select all

idle_digital_clock_img_time = hmUI.createWidget(hmUI.widget.IMG_TIME, {
              hour_startX: 138,
              hour_startY: 107,
              hour_array: ["big_00.png","big_01.png","big_02.png","big_03.png","big_04.png","big_05.png","big_06.png","big_07.png","big_08.png","big_09.png"],
              hour_zero: 0,
              hour_space: 3,
              hour_align: hmUI.align.RIGHT,

              minute_startX: 256,
              minute_startY: 107,
              minute_array: ["big_00.png","big_01.png","big_02.png","big_03.png","big_04.png","big_05.png","big_06.png","big_07.png","big_08.png","big_09.png"],
              minute_zero: 1,
              minute_space: 3,
              minute_follow: 0,
              minute_align: hmUI.align.RIGHT,

              show_level: hmUI.show_level.ONLY_AOD,
            });

Is there any solution, except to put the 0 in front again?
With 0 in front the display does not move.

[ZduneX25]

SashaCX75 boolean issue fixed by setting

Code: Select all

if (screenType = hmSetting.screen_type.AOD) {
    hmFS.SysProSetBool('dial2', true);
}

i thought is saves state for all screen types by default, turns out it does not on gtr4

[SashaCX75]

Lattenknaller
Here is a test dial with a minimum number of elements. On it, alignment works as expected on the main screen and on AOD. If this is not the case for you, then these are the features of your watch model.

UPD. I made a mistake and answered the wrong one.

[Zecodorna]

Please...How do I make "aod" not move from the center?

[ZduneX25]

You can't, it's pixel protection. AOD widgets can and will slightly move from time to time.

[Xemic]

SashaCX75
Please can you help, i noticed that if i add icon to "Digital Time Hours" it overlays over Minute and Seconds, regardless of how it's arranged. If i put Hour at bottom and Minute at the top the icon still overlays.

e.g. This is the design and layout on watch face editor.



But I get this on the watch.



Is this something that can change in the index.js file?

[1mylord]

Thank you always.^^

[burn79]

Hi, does anyone have the code for automatic lock?

[SashaCX75]

Xemic Indeed there is such a problem. On the screenshots, I do not see the difference, so I can not understand what you want to do.

It should help if you change the order of the displayed time elements. For example make minutes below hours. Or if seconds are not needed, then you can display them outside the screen but make them below the minutes.