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

[samonefit]

Dear All,
i've an issue when i try to open a project. During importing appears this disclaimer:
"Unable to open image:0001.png. You do not have permission to read the file, or the image is damaged."
This is repeating for all the images of the watchface.

Thanks so much.

[1mylord]

Please tell me how to apply a soft second hand to GTR4.
It is different from GTR3PRO.

[quadraf]

Sasha, Thank you very much for your great workl!
The rotation animation in my gtr 4 watch does not work.
I would love to see it working as in this watchface:
https://amazfitwatchfaces.com/gtr/view/27770
I converted with your app. to gtr 4 but the animation will not work...
Greetings Hans.

[SashaCX75]

It seems that animation works differently on GTR4 than on GTR3. You can read about motion animation on ZeepOS 2 here https://docs.zepp.com/docs/reference/de ... animations
I'm not sure that rotation animation can be done on GTR4. Therefore, most dials with a smooth second hand will not work. Here's a working example of a dial with a smooth second hand for the GTR 4
https://amazfitwatchfaces.com/gtr/view/28593

[quadraf]

Thanks for the fast reply!
The only hope the rotation animation will come available in the near future.
One would expect that the features would expand from older models...

[Hasnain732]

Hi everyone. please anyone give me a short demo/tutorial on how to build my own watch face with this application? i am a designer and have 2 years experience in the graphics (adobe Illustrator)/ thanks

[bird81309]

I really like some of the GTR 4 dials built in zepp. Is there any way to extract these official dials?

[taw_bip]

Dear All,
i've an issue when i try to open a project. During importing appears this disclaimer:
"Unable to open image:0001.png. You do not have permission to read the file, or the image is damaged."
This is repeating for all the images of the watchface.

Thanks so much.

I'm also getting errors when I tried to unpack a dial, which hasn't happened before.

[taw_bip]

Hi everyone. please anyone give me a short demo/tutorial on how to build my own watch face with this application? i am a designer and have 2 years experience in the graphics (adobe Illustrator)/ thanks

A couple places with some good information:
https://web-archive-org.translate.goog/ ... r_pto=wapp

https://reddit.com/r/amazfit/comments/o ... e/h7wqozg/

https://voonze.com/how-to-create-your-o ... fit-watch/

https://tiktektok.com/tips-tricks/how-c ... faces.html

https://www.youtube.com/watch?v=vf443DhUmyU

https://www.youtube.com/watch?v=dAMAFwZBCS8

There is a tool called "amazfitfontgenerator" that is very handy to quickly create all the numbers and text for a particular size in PNG format so it has the transparency. It's a great time saver. I don't think the link here works anymore so I can upload it when I get a chance.

[Hasnain732]

Thanks alot

[Jel]

Thanks for the fast reply!
The only hope the rotation animation will come available in the near future.
One would expect that the features would expand from older models...

Hello quadraf, based on the hint of SashaCX75 and the work of StarScreaM ( https://amazfitwatchfaces.com/gtr/view/28593 ), I was able to let my second hand on GTR4 running smooth.
Here is what I did ( please be aware, I had to enter a spaces into the code line of hm.Sensor.createSensor before ".id.Time" to be able to post the code ) :

Code: Select all

// normal_analog_clock_time_pointer_second = hmUI.createWidget(hmUI.widget.TIME_POINTER, {
            //   second_path: '0005.png',
            //   second_centerX: 233,
            //   second_centerY: 233,
            //   second_posX: 8,
            //   second_posY: 223,
            //   show_level: hmUI.show_level.ONLY_NORMAL,
            // });

// Insert after section "normal_analog_clock_time_pointer_second = hmUI.createWidget(hmUI.widget.TIME_POINTER"
// Take over values to "sec_pointer = hmUI.createWidget(hmUI.widget.IMG", below
// Remove your original section "normal_analog_clock_time_pointer_second = hmUI.createWidget(hmUI.widget.TIME_POINTER"
// Modify section "onDestory()"
 
           // Smooth Seconds

    		let sec_pointer;
    		let clock_timer;

            // pos_x and pos_y and center values taken from above. The 8 and 223 frome above.
            // set PNG name here

            sec_pointer = hmUI.createWidget(hmUI.widget.IMG, {
              x: 0,
              y: 0,
              w: 466,
              h: 466,
              pos_x: 466 / 2 - 8,
              pos_y: 466 / 2 - 223,
              center_x: 233,
              center_y: 233,
              src: "0005.png",
              angle: 0,
              show_level: hmUI.show_level.ONLY_NORMAL,
            });

            const now = hmSensor.createSensor(hmSensor .id.TIME);

            const vDelegate = hmUI.createWidget(hmUI.widget.WIDGET_DELEGATE, {
                resume_call: (function () {
                    console.log('ui resume');

                    const animFps = 60;                 // Frames per second 
                    const animRepeat = 1000/animFps;    // execute every <animRepeat>ms
                    const animProgress = 6/animFps;
					let animAngle = 0;
                    let animDelay = 0;                   
					var sec = now.second;

                    if (animAngle == 0) {
                        var sec = now.second;
                        var startSec = sec*6;
                        sec_pointer.setProperty(hmUI.prop.ANGLE, startSec);
                    }

                    clock_timer = timer.createTimer(animDelay, animRepeat, (function(option) {
                            animAngle = animAngle + animProgress
                            sec_pointer.setProperty(hmUI.prop.ANGLE, startSec + animAngle);
                    }));
                }),
                pause_call: (function () {
                    console.log('ui pause');
					timer.stopTimer(clock_timer);
                }),
            });
            // End Smooth Seconds

            // Add following to section "onDestory()"
          onDestory() {
            timer.stopTimer(clock_timer);
            console.log('index page.js on destory invoke')
          },

Best regards.

[taw_bip]

Thanks alot

Here's the link to those tools with the Amazfit font generator:
https://mega.nz/file/Gp8hgKzS#aOSrVecUS ... qJhqkUb-5U

[quadraf]

Hello quadraf, based on the hint of @SashaCX75 and the work of @StarScreaM ( https://amazfitwatchfaces.com/gtr/view/28593 ), I was able to let my second hand on GTR4 running smooth.
Here is what I did ( please be aware, I had to enter a spaces into the code line of hm.Sensor.createSensor before ".id.Time" to be able to post the code ) :
-----------------------------------------------------------------------------------------------------------------------------------

Hello Jel,
Thank you for this information!
We are gooing to test this...
And maybe Sasha will incorperate this into the editor...

[SashaCX75]

Here is what I did ( please be aware, I had to enter a spaces into the code line of hm.Sensor.createSensor before ".id.Time" to be able to post the code ) :

Small comments to the code.
Values 466 are for GTR 4, for other models it is different depending on the screen resolution.
To find out the required values for the pos_x parameter, you need to look at the second_posX value in the commented out part of the code.
I think the FPS value of 60 is a lot, probably half as much is enough.

[roigreenberg]

Moving this discussion to here since it seems unrelated to the app.

I created a watchface, and I can't install it for some reason.
I tried to install from 2 different apps, both from local file and uploaded one.

There is no error, but the watchface simply doesn't installed.

I added the zip file, maybe you can find something I missed

[asoo]

Moving this discussion to here since it seems unrelated to the app.

I created a watchface, and I can't install it for some reason.
I tried to install from 2 different apps, both from local file and uploaded one.

There is no error, but the watchface simply doesn't installed.

I added the zip file, maybe you can find something I missed

It's probably a problem with compressing the zip.
Because the file you attached cannot be opened in the editor.

I extracted the zip and found a file named __weather_4.png. which is the file that is causing the problem that it cannot be unpacked with program watchfac's editor.

I changed the name to weather_4.png compress again
Test sync to GTR3 can sync normally.

File Fixed and compress again :

Watch_face.zip

(114.51 KiB) Downloaded 152 times

[roigreenberg]

Thanks!
When I first packed it, there was an error with this file, so I changed the file and added it again, and got no more errors. apparently, it wasn't entirely true..

[Jel]

Here is what I did ( please be aware, I had to enter a spaces into the code line of hm.Sensor.createSensor before ".id.Time" to be able to post the code ) :

Small comments to the code.
Values 466 are for GTR 4, for other models it is different depending on the screen resolution.
To find out the required values for the pos_x parameter, you need to look at the second_posX value in the commented out part of the code.
I think the FPS value of 60 is a lot, probably half as much is enough.

Thanks for your comments. Would be interested in your testing results.
Just saw, that the var sec definition after definition of animDelay is not necesserry, because it's defined a bit later ( where needed ), again .

[SashaCX75]

Jel
I would also reset animAngle inside the timer code with a large value of the animAngle variable and calculate startSec again. It's just that the timer usually does not work very accurately, and with a long display, this inaccuracy can accumulate.

Also I would change the code

Code: Select all

              pos_x: 466 / 2 - second_posX,
              pos_y: 466 / 2 - second_posY,
              center_x: second_centerX,
              center_y: second_posX,

And the variables themselves set at the beginning. Of course, this will not affect the operation of the code, but it will be clearer to other users where these values ​​​​came from.

Not sure if you need to change the onDestory() section. The timer will still be stopped in the pause_call function. In addition, the specification does not say that the timer must be stopped.

You also have a newer version of the operating system and it seems that the typo in the function name has already been corrected and it is better to write onDestroy () instead of onDestory ().

I think you have a compact and descriptive code. Similar code that I once used, although it did the same thing, but was not so neat.

[kwakykwaky1]

Hello, I have a new Gtr4 and in the watch face editor 5 application, after uploading, ADO does not appear, please advise. Thanks

[Jel]

Hello kwakykwaky1, you have to use V 5.0.1, provided by SashaCX75 https://www.dropbox.com/s/ssp9evw02krd0 ... 1.zip?dl=0

[Jel]

Hello SashaCX75 , I have changed the code for more flexibility and better understanding, but reseting the animAngle inside of the timer, I did'nt got to work. Thx for finding the typo.

Code: Select all

            // SMOOTH SECONDS Definition
            let second_centerX = 233; 
            let second_centerY = 233;
            let second_posX = 8;
            let second_posY = 223;
            var second_path = "0005.png";

    		let sec_pointer;
    		let clock_timer;
            const deviceInfo = hmSetting.getDeviceInfo();
			// SMOOTH SECONDS Definition End

            sec_pointer = hmUI.createWidget(hmUI.widget.IMG, {
              x: 0,
              y: 0,
              w: deviceInfo.width,
              h: deviceInfo.height,
              pos_x: deviceInfo.width / 2 - second_posX,
              pos_y: deviceInfo.height / 2 - second_posY,
              center_x: second_centerX,
              center_y: second_centerY,
              src: second_path,
              angle: 0,
              show_level: hmUI.show_level.ONLY_NORMAL,
            });

[SashaCX75]

but reseting the animAngle inside of the timer, I did'nt got to work.

I think it should be something like this

Code: Select all

                    clock_timer = timer.createTimer(animDelay, animRepeat, (function(option) {
                        if(animAngle > 30)
                        {
                            animAngle == 0;
                            startSec = now.second*6;
                        }
                        animAngle = animAngle + animProgress
                        sec_pointer.setProperty(hmUI.prop.ANGLE, startSec + animAngle);
                    }));

But this will probably only be relevant if the second hand is displayed in AOD mode. In normal mode, the screen is turned on for a short time so that possible discrepancies in the readings become noticeable.

[kwakykwaky1]

Hello @kwakykwaky1, you have to use V 5.0.1, provided by @SashaCX75 https://www.dropbox.com/s/ssp9evw02krd0 ... 1.zip?dl=0

Thank you for the information

[Jel]

Hello SashaCX75 , many thanks for all of your input. It took a while to think about the possible discrepancies. I think, I've found a solution. I changed away from calculating the progress by steps per "frames per second" to using "getMilliseconds()" inside of the timer. May, you can give it a try. Here is my final code example :

Code: Select all

            // Smooth Seconds

            // normal_analog_clock_time_pointer_second = hmUI.createWidget(hmUI.widget.TIME_POINTER, {
            //   second_path: '0005.png',
            //   second_centerX: 233,
            //   second_centerY: 233,
            //   second_posX: 8,
            //   second_posY: 223,
            //   show_level: hmUI.show_level.ONLY_NORMAL,
            // });

            // take values from above. The 8 and 223 frome above, too.
            // set PNG name here

            // SMOOTH SECONDS Definition
            let second_centerX = 233;
            let second_centerY = 233;
            let second_posX = 8;
            let second_posY = 223;
            let second_path = "0005.png";
            // ----------------------------
    	    let sec_pointer;
    	    let clock_timer;
	    let animAngle = 0;
            let animDelay = 0;                   
            const animFps = 60;                             // Frames per second 
            const animRepeat = 1000/animFps;                // then execute every <animRepeat>ms
            const deviceInfo = hmSetting.getDeviceInfo();
	    // SMOOTH SECONDS Definition End

            sec_pointer = hmUI.createWidget(hmUI.widget.IMG, {
              x: 0,
              y: 0,
              w: deviceInfo.width,
              h: deviceInfo.height,
              pos_x: deviceInfo.width / 2 - second_posX,
              pos_y: deviceInfo.height / 2 - second_posY,
              center_x: second_centerX,
              center_y: second_centerY,
              src: second_path,
              angle: 0,
              show_level: hmUI.show_level.ONLY_NORMAL,
            });

            const now = hmSensor.createSensor(hmSensor.id.TIME);

            const vDelegate = hmUI.createWidget(hmUI.widget.WIDGET_DELEGATE, {
                resume_call: (function () {
                    console.log('ui resume');

                    clock_timer = timer.createTimer(animDelay, animRepeat, (function(option) {
                            animAngle = (now.second*6) + (((now.utc % 1000)/1000)*6);
                            sec_pointer.setProperty(hmUI.prop.ANGLE, animAngle);
                    }));
		}),
                pause_call: (function () {
                    console.log('ui pause');
					timer.stopTimer(clock_timer);
                }),
            });
            // End Smooth Seconds