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]

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.

Hi Emilio,
I think you can simply create three different backgrounds:
1) the usual background (12, 3, 6, 9)
2) an identical background, possibly adding an AM indicator
3) a background (24, 15, 18, 21), possibly adding an PM indicator
The idea:
Create a digital clock where only the AM and PM information is visible.
The AM widget corresponds to background 1.
The PM widget corresponds to background 2.
In Sasha's editor, the digital clock would then be placed just above the standard background, and the other information would be above the digital clock.
This configuration should therefore produce a display that suits your needs.
Best regards,
Guy.

[Emiliomc]

The solution of creating three watch faces works perfectly. One standard face with 12, 3, 6, and 9 when the clock is in 24-hour mode. And two watch faces for when the clock is in 12-hour mode. One AM face with 12, 3, 6, and 9. And another face with 24, 15, 18, and 21. These last two are in the AM and PM sections of "Digital Time." It's a very logical and simple solution. I know how the AM and PM sections work, but it never occurred to me to apply them to analog time. I was mistakenly convinced that these sections only corresponded to digital time, and I didn't think about it further. Furthermore, I didn't consider that if they only corresponded to digital time and required digits, I could add them even if they were transparent. In short, the solution is quite simple, but I didn't think about it enough. Thank you very much.

[Emiliomc]

How can I change the progress circle parameters for heart rate data using the latest SashaCX75 app update (15.1)? Currently, at least in my case, the progress circle starts counting from 32 bpm up to 184 bpm. I would like it to count from 0 bpm up to 140 bpm. In previous versions of the app, it was possible to modify the values ​​in the generated index.js file, but now I don't know how to do it, or if it's even possible.

[frankh93]

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.

If I understand correctly, you can do that detecting first the clock format the watch is using (12H/24H) so based on this use one or other set of images for bg images. This can't be done on the editor, you need to code a bit to get it working

[SashaCX75]

How can I change the progress circle parameters for heart rate data using the latest SashaCX75 app update (15.1)?

Currently, a standard widget is used for the progress bar, and its behaviour depends on the system settings.
You can enable scale inversion. Then the code will be similar to what it was before. You can edit it and write the limits within which the progress bar will work yourself.

[Emiliomc]

Thanks, Sasha. I think I understand what you're saying. I've been trying what you suggested, then editing the index file. In the edit, I also replaced the value 184 in the `valueHeartRate` function with 140. And I want the starting value to be 0. That's where I think I'm getting lost... In `let progressHeartRate = (valueHeartRate - 30)/(targetHeartRate - 30);` I replaced the 30s with 1s, but it's not working. My idea is that the progress bar starts at 1 and ends at 140.

[SashaCX75]

@Emiliomc
I think the code should be something like this.

Código: Selecionar todos

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

targetHeartRate = 200 - This is the maximum value for progress. You can change it to whatever suits you best.

[Emiliomc]

I've been testing a heart rate progress circle, aiming to measure values ​​from 0 bpm to 100 bpm, with a maximum of 100 bpm. I tried modifying the code in the watchface's index file for the inverted progress circle, replacing it with the code (which I believe is correct) for a non-inverted progress circle. I also added the information I think I understood. The only difference is that instead of a maximum of 200, I set it to 100. And, for example, at 65 bpm, the progress circle only expands by about 25%. Even replacing the value of 100 in the code with 200 produces the same result. I'm definitely doing something wrong.

Código: Selecionar todos

//dynamic modify start

        
        let normal_background_bg = ''
        let normal_heart_rate_circle_scale_2 = ''
        let normal_heart_rate_text_font = ''


        //dynamic modify end

        __$$module$$__.module = DeviceRuntimeCore.WatchFace({
            init_view() {
                //dynamic modify start
                    
                
            console.log('Watch_Face.ScreenNormal');
            normal_background_bg = hmUI.createWidget(hmUI.widget.FILL_RECT, {
              x: 0,
              y: 0,
              w: 480,
              h: 480,
              color: '0xFF000000',
              show_level: hmUI.show_level.ONLY_NORMAL,
            });

	normal_heart_rate_circle_scale_2 = hmUI.createWidget(hmUI.widget.ARC_PROGRESS, {
              center_x: 230,
              center_y: 232,
              start_angle: 0,
              end_angle: 360,
              radius: 68,
              line_width: 5,
              corner_flag: 0,
              type: hmUI.data_type.HEART,
              color: 0xFFFF8C00,
              // mirror: False,
              show_level: hmUI.show_level.ONLY_NORMAL,
            });

            normal_heart_rate_text_font = hmUI.createWidget(hmUI.widget.TEXT_FONT, {
              x: 158,
              y: 209,
              w: 150,
              h: 80,
              text_size: 30,
              char_space: 0,
              color: 0xFFFFFFFF,
              line_space: 0,
              align_v: hmUI.align.TOP,
              text_style: hmUI.text_style.ELLIPSIS,
              align_h: hmUI.align.CENTER_H,
              type: hmUI.data_type.HEART,
              show_level: hmUI.show_level.ONLY_NORMAL,
            });

console.log('Watch_Face.ScreenAOD');

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

                console.log('update scales HEART');
                
                let valueHeartRate = heart_rate.last;
                let targetHeartRate = 100;
                let progressHeartRate = valueHeartRate/targetHeartRate;
                if (progressHeartRate < 0) progressHeartRate = 0;
                if (progressHeartRate > 1) progressHeartRate = 1;
                let progress_cs_normal_heart_rate = 1 - progressHeartRate;

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

                  // normal_heart_rate_circle_scale_2
                  let level = Math.round(progress_cs_normal_heart_rate * 100);
                  if (normal_heart_rate_circle_scale_2) {
                    normal_heart_rate_circle_scale_2.setProperty(hmUI.prop.MORE, {                      
                      center_x: 230,
                      center_y: 232,
                      start_angle: 0,
                      end_angle: 360,
                      radius: 68,
                      line_width: 5,
                      corner_flag: 0,
                      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
            },
            onInit() {
                logger.log('index page.js on init invoke');
            },
            build() {
                this.init_view();
                logger.log('index page.js on ready invoke');
            },
            onDestroy() {
                heart_rate.removeEventListener(heart.event.CURRENT, hrCurrListener);
                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));
    ;
}

[SashaCX75]

You are doing it incorrectly. If you had done as I advised, there would be no line in your code.

Código: Selecionar todos

type: hmUI.data_type.HEART,

[Emiliomc]

Sasha, I think I'm going to have to give up. I thought I understood what you said, but apparently not. Everything would be easier with a progress bar that could be easily configured to display the data each user wanted. That's just my humble opinion. I'll have to abandon the project.

[hoa.snowboy]

Hello @SashaCX75, I would appreciate it if you could add a Calendar event widget for display on the watch face. Thank you for considering this enhancement.

[SashaCX75]

@hoa.snowboy
I don't know how to display calendar events on the watch face. Officially, there is no such option in the documentation. However, there are official watch faces that can do something similar.

[dave_dophin]

Hi, is there link any guide or similar how to start with this tool? Thx!

[rush2112]

@SashaCX75

Good morning ,

I want to ask something when a created a face watch. Is there a trick or a different way to do that? When a created a battery progress, I want to make the progress bar show 100%. I don’t want to put the exact percentage number, just the bar. Sometimes, I temporarily put the number to check, but it takes me about 8 minutes to set it exactly at 100%.

Can you tell me a trick or a better method? I need help. Thanks!

[SashaCX75]

@rush2112
Do you want the icon to be displayed only when the charge is 100%? The easiest way to do this is with code.

You can also try to set only two images to show the charge progress. But I'm not sure if that will work.

[rush2112]

@rush2112
Do you want the icon to be displayed only when the charge is 100%? The easiest way to do this is with code.

You can also try to set only two images to show the charge progress. But I'm not sure if that will work.

Do you know of any trick to quickly set the battery progress bar to 100%? It usually takes me about 8 minutes to get it exactly right, and I’m wondering if there's a faster way.

Look at the Att ( battery ) on the face watch . Thanks
Link : https://amazfitwatchfaces.com/balance/view/5824

Wishing you a Merry Christmas and a Happy New Year!

[SashaCX75]

@rush2112
I don't understand what you want. Do you need to set the battery value to 100% in the editor? It can be done in a few clicks.

[rush2112]

Yes, with the progress bar, I do have to look at the numbers to reach 100% before setting the progress bar in the battery icon, with your editor.

[frankh93]

Yes, with the progress bar, I do have to look at the numbers to reach 100% before setting the progress bar in the battery icon, with your editor.

I think you mean to get the progressbar in the right position and size you want right? if so you can open the "data for preview" tab and under the system section set the battery to 100, then you could draw the batterybar knowing the values you set (coordinates, lenght, width) is for the full progressbar.

Other way you could get this (which I personally do) is to "draw" the progressbar in an images editor (photoshop in my case) and once you get it there just copy the values. Taking your project as example:

Spoiler

You can use the values given (width, height, coordinates) to set them in the watchfaces editor (as I said before, these will be for the full progressbar), this way you should be able to get it done quickier

[rush2112]

Yes, with the progress bar, I do have to look at the numbers to reach 100% before setting the progress bar in the battery icon, with your editor.

I think you mean to get the progressbar in the right position and size you want right? if so you can open the "data for preview" tab and under the system section set the battery to 100, then you could draw the batterybar knowing the values you set (coordinates, lenght, width) is for the full progressbar.

Other way you could get this (which I personally do) is to "draw" the progressbar in an images editor (photoshop in my case) and once you get it there just copy the values. Taking your project as example:

Spoiler

You can use the values given (width, height, coordinates) to set them in the watchfaces editor (as I said before, these will be for the full progressbar), this way you should be able to get it done quickier

Thanks Buddy ,

Thank you for your help, that was exactly what I was trying to find. Thanks again!

[SashaCX75]

Version 16.0
https://apps.microsoft.com/store/detail/XP89MR7PJVT9Q9
Sleep widget added.
Text widgets added (display of custom text).

I will post the archive here on the forum later.

[SashaCX75]

Version 16.0

Archive

Dropbox
GoogleDrive

Installer

Dropbox
GoogleDrive

Added sleep widget.
Added text widgets.

[XiaomiFan]

Hi Sasha,

Thanks for the great editor. It works wonderfully. However, after creating my first watch face, I'm having trouble figuring out how to get it onto my watch. In my Zepp app, under developer options, the only option is to upload the watch face using a QR code.

Or have I overlooked something in the editor?

[asoo]

Hi Sasha,

Thanks for the great editor. It works wonderfully. However, after creating my first watch face, I'm having trouble figuring out how to get it onto my watch. In my Zepp app, under developer options, the only option is to upload the watch face using a QR code.

Or have I overlooked something in the editor?

"Watch face editor for Amazfit watch on ZeppOS"
This program is used to edit and modify watch faces for devices running ZeppOS. The program does not have an option to install watch faces into your watch.

For instructions on installing your custom watch faces onto your watch, I recommend referring to this article; it should be helpful for you.
viewtopic.php?p=17161#p17161

[sxtywzc0408]

"Hey Master, could you please add the Chinese Lunar Calendar?"