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

[Omaradsl]

How to download the program software？

https://drive.google.com/file/d/1aTIP2I ... sp=sharing

[lobianco]

I made a watch face that changes the colors of the clock hands (Hour-Minute-Second), when I run pack watch face analog pro without checking the Smooth second hand option, the second hand changes color, when I run pack watch face analog pro By checking the Smooth second hand option, the second hand does not change color.
Could someone explain to me why?

[Lattenknaller]

Without seeing the script, it's like looking into a crystal ball. Post the script here and they can help you.

[lobianco]

I made a watch face that changes the colors of the clock hands (Hour-Minute-Second), when I run pack watch face analog pro without checking the Smooth second hand option, the second hand changes color, when I run pack watch face analog pro By checking the Smooth second hand option, the second hand does not change color.
Could someone explain to me why?

Codice: Seleziona tutto

script:

let backnumber_main = 1
let totalback_main = 3
//let nameback_main = '' " 
		
function click_Back() {
            if(backnumber_main>=totalback_main) {
                backnumber_main=1;
             }
            else {
                backnumber_main=backnumber_main+1;
            }

           normal_stress_icon_img.setProperty(hmUI.prop.SRC, "back" + parseInt(backnumber_main) + ".png");
           normal_analog_clock_pro_hour_pointer_img.setProperty(hmUI.prop.SRC, "hor" + parseInt(backnumber_main) + ".png");
	    normal_analog_clock_pro_minute_pointer_img.setProperty(hmUI.prop.SRC, "min" + parseInt(backnumber_main) + ".png");
	    normal_analog_clock_pro_second_pointer_img.setProperty(hmUI.prop.SRC, "sec" + parseInt(backnumber_main) + ".png");

 }

[asoo]

Spoiler

I made a watch face that changes the colors of the clock hands (Hour-Minute-Second), when I run pack watch face analog pro without checking the Smooth second hand option, the second hand changes color, when I run pack watch face analog pro By checking the Smooth second hand option, the second hand does not change color.
Could someone explain to me why?

Codice: Seleziona tutto

script:

let backnumber_main = 1
let totalback_main = 3
//let nameback_main = '' " 
		
function click_Back() {
            if(backnumber_main>=totalback_main) {
                backnumber_main=1;
             }
            else {
                backnumber_main=backnumber_main+1;
            }

           normal_stress_icon_img.setProperty(hmUI.prop.SRC, "back" + parseInt(backnumber_main) + ".png");
           normal_analog_clock_pro_hour_pointer_img.setProperty(hmUI.prop.SRC, "hor" + parseInt(backnumber_main) + ".png");
	    normal_analog_clock_pro_minute_pointer_img.setProperty(hmUI.prop.SRC, "min" + parseInt(backnumber_main) + ".png");
	    normal_analog_clock_pro_second_pointer_img.setProperty(hmUI.prop.SRC, "sec" + parseInt(backnumber_main) + ".png");

 }

The custom script you sent is just a function that changes the clock hand image and stress icon, which doesn't seem to have any problems. However, the problem may be in other scripts in "index.js". Therefore, if you want to check the "custom script" that creates the watch face, I recommend that you send the problematic watch face file or at least the index.js of the watch face you want to ask about so that those who want to help you, they can analyze the problem correctly.

And next time, if you want to ask about custom scripts, I recommend that you ask in the Watchfaces discussion topic of the Device you are using.

[rush2112]

@asoo

Hello asoo, just a small question I did look at your script ( https://amazfitwatchfaces.com/balance/view/1911 )
Where you put the area for pressings' ( x: and y: ) to action the change of color of the face watch , its not in the script you did made .

Thanks

[asoo]

@asoo

Hello asoo, just a small question I did look at your script ( https://amazfitwatchfaces.com/balance/view/1911 )
Where you put the area for pressings' ( x: and y: ) to action the change of color of the face watch , its not in the script you did made .

Thanks

I think your question is not related to this topic.
Next time, I recommend that you add new post in the "Watchfaces discussion" topic of the Device you are using.

In the part you asked,
The script that I use to change the screen color, I use a custom ( user_functions.js ) script to do it.

Spoiler

Codice: Seleziona tutto

        
        // Start color change
         let colornumber = 1
        let totalcolors = 9
        let namecolor = ''

        function click_Color() {
            if(colornumber>=totalcolors) {
            colornumber=1;
                }
            else {
                colornumber=colornumber+1;
            }

if ( colornumber == 1) { namecolor = "Style 1"}
if ( colornumber == 2) { namecolor = "Style 2"}
if ( colornumber == 3) { namecolor = "Style 3"}
if ( colornumber == 4) { namecolor = "Style 4"}
if ( colornumber == 5) { namecolor = "Style 5"}
if ( colornumber == 6) { namecolor = "Style 6"}
if ( colornumber == 7) { namecolor = "Style 7"}
if ( colornumber == 8) { namecolor = "Style 8"}
if ( colornumber == 9) { namecolor = "Style 9"}
hmUI.showToast({text: namecolor });

            normal_background_bg_img.setProperty(hmUI.prop.SRC, "main" + parseInt(colornumber) + ".png");
  }         
        

By passing Button_5

Spoiler

Codice: Seleziona tutto

Button_5 = hmUI.createWidget(hmUI.widget.BUTTON, {
x: 294,
y: 420,
w: 81,
h: 46,
text: '',
color: 0xFFFF8C00,
text_size: 25,
press_src: '0_Empty.png',
normal_src: '0_Empty.png',
click_func: (button_widget) => {
// Change style color
click_Color()
}, // end func
show_level: hmUI.show_level.ONLY_NORMAL,
}); // end button

[SashaCX75]

Version 12.1
Mirror
Added transparency for some widgets. Does not work on all models.
Added support for Amazfit T-Rex 3.

[Omaradsl]

Sasha, link don't work.
Thanks.

[SashaCX75]

@Omaradsl
Both links are working

[kkssoo]

Is it possible to use JavaScript on a watch face to send a specific message or notification to my phone? I thought it might be possible to use this in conjunction with Bixby Routines on a Samsung phone to interact with the phone or Bixby, so I wanted to ask.

[SashaCX75]

@kkssoo
This will not work in a watch face made in the editor.
If you make a watch face in zeus on API 3, then maybe it will work. Just watch faces have many limitations.
If you make applications, it should work. But probably it will be necessary to make an application that can understand such queries. I think you'd better ask such questions on the developers forum, not in the topic of watch faces.

[kkssoo]

@kkssoo
This will not work in a watch face made in the editor.
If you make a watch face in zeus on API 3, then maybe it will work. Just watch faces have many limitations.
If you make applications, it should work. But probably it will be necessary to make an application that can understand such queries. I think you'd better ask such questions on the developers forum, not in the topic of watch faces.

Thank you for letting me know. Since it doesn’t run as a watch face, I don’t feel the need to create a separate app, so I’ve decided to let it go cleanly.

[Beartoe]

Hi Sasha, great job on the editor, I'm using 12.1. Time to buy you another coffee. I'm having a problem with text spacing on a circle. See my latest project:

https://amazfitwatchfaces.com/gtr/view/41109

The watchface editor shows the text for "step count" and "distance" as it should be, but on my GTR4, the second character in the number-string is drawn with insufficient spacing, and "blacks out" part of the first character. Is this a problem with ZeppOS? Or is there a fix in code? Or by manipulating character-bitmaps?

Thanks for the great work you do!

[SashaCX75]

@Beartoe The problem is in calculating the angle of rotation of the symbol. It is rounded to an integer and that's why such overlaps can occur.
I would suggest cropping the unused part on images and not using negative space between characters. You could also try increasing or decreasing the radius by 1.
Also, the ‘old’ folder in the watch face is not used, it just takes up space.

[Joker18]

Hello,
I would like to create a complication that shows time of sunset and sunrise based on day of the year.
I have 366 separate images but can't find any way to use this in the app.
I've seen sunset and sunrise is actually related to the time of day.
Any way to use day of month to day of year if I modify in Json or something?

[Omaradsl]

LOL bro, 366 images???
however you only need 3 images
1 hand
and 2 png with the graduated scale.(left immage sunrise, right immage sunset)
you will do the rest by adding the item POINTER in the settings and setting the center of the coordinates and the range in which the indicator must move.

but you should rethink the idea of ​​your job.

[SashaCX75]

@Joker18 You can't do it in the editor.
You need to write additional code yourself. You need to get the time of sunrise and sunset from the weather sensor. Knowing this time, calculate the rotation angle of each pointer and rotate it.
I don't understand the purpose of the middle scale on your image and whether it is related to your question?

[Joker18]

@SashaCX75 Thanks for input then it means I wont be able to do it. Unfortunately my code writing experience is 0 . I tought maybe it's possible to do some simple modification.
The purpose of the middle bar is unknown to me or to the person that made this Android watch face that I was trying to transfer to Amazfit. I was however intending to do some photoshop and use the middle bar for battery level.

@Omaradsl thatks. I know 366 images is a lot but this is how the initial design was made and packed with this comes another complication that shows seasons, EQ/SOL and sign. I'm a sucker for useless complications

This is why I wought the easyest implementation would have been to be able to add day of the year Item.
Images are already ordered starting with Jan 1st.

Spoiler

[SashaCX75]

@Joker18 Using images may not be the right solution. In some cities, the time does not correspond to their geographical time zone. Some countries have summer time and some do not. Even if cities are in the same time zone sunrise and sunset times can differ by an hour. So this way you can only make a watch face for one particular city. And even in this case because of the large number of images I am not sure that such watch face will work.

[Joker18]

Yes, you are right... I think I will abandon this watch face and focus on something I can make

[Joker18]

@SashaCX75 I think I found a bug.
If I use the Moon Pointer on my GTR Mini, the moon phase is related to the hour and not the date, both in the visualization and on the watch.
After packing, if I change type: hmUI.data_type.MOON_CURRENT to type: hmUI.data_type.MOON seems to do the trick. At least the view does not change when hours pass, and current view somehow matched (It's mirror of what it should be) Bu I don't knwo if 0 possition is correct.

I also have another question. If I use an animation( with images) and don't want to make it heavy for
the watch should I use lower framerate or limit the number of images?

Thanks!

[SashaCX75]

Moon Pointer is related to the rising and setting of the moon. So in the editor it depends only on the time. On the watch this time will change depending on the date and city.

You should not use a very large animation frequency, it increases the load on the clock. Depending on the speed of movement of objects in the animation is better to set the frequency of 10-25 fps.

[Joker18]

Oh I see, it serves a different purpose Thanks!
I used it on a rotating disk with a mask to show moon phase. Hopefully with my modification it willl work for me.

The animation at 15 fps slowed down the menus a lot. I reduced to 8 and it's better. Still relatively smooth as the initial animation video was 15fps.

[Beartoe]

Hi Sasha, I'm making a watch face and I'd like to add AQI in "text in a circle". It looks like your new editor has pre-defined the variables that can go in "text in a circle" (ElementHeart, ElementSteps, etc.). Can I create a custom element-in-a-circle and assign it the type of "hmUI.data_type.AQI"?