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

[SashaCX75]

You do not need to repack the watch face. You just need to insert the files into the watch face with replacement of the existing ones. Then the compression type of the archive will not change and everything will work.

In the editor there are explanations in which part of the code different js files are inserted. If it is not clear, you can just insert a comment with the name of the file in place of the code and then in the watch face to see where this fragment appeared.

[Imozeb]

Thanks for all your help. I've manage to get static text to display on the screen; however, the text will not update. Is there a specific location that I should put my event listeners or function calls?

This is how I currently have it:

user_functions.js:

Code: Select all

   // 1 User Functions (Include All User Functions Here)
   const updateCalories = () => {
      	caloriesText.setProperty(hmUI.prop.MORE, {
        	text: "test"
      });
    };

user_script_beforeShortcuts.js:

Code: Select all

    // Create the activity sensor
    const activitySensor = hmSensor.createSensor(hmSensor.id.ACTIVITY);

    // Create a text widget to display calories / 2.5
    const caloriesText = hmUI.createWidget(hmUI.widget.TEXT, {
      x: 219,
      y: 227,
      w: 78,
      h: 30,
      color: 0xFF00FF00,
      text_size: 25,
      align_h: hmUI.align.CENTER_H,
	  align_v: hmUI.align.CENTER_V,
	  text: "...",
	  marquee: false,
    });

    // Listen for changes and update automatically
    activitySensor.addEventListener(hmSensor.event.CHANGE, () => {
	     updateCalories();
    });

I expect the displayed text to be "test" not "..." after a short amount of time, but it stays as "..."

If I simply call updateCalories(); without the event listener, the rest of the code never runs and the rest of the watchface (e.g. time) does not display.

[SashaCX75]

Make the caloriesText variable global. Like other widgets.

In the caloriesText widget it is desirable to specify on which screen it works, main or AOD. This doesn't affect its operation but may help to avoid some problems. Also I don't remember that this widget has a ‘marquee’ parameter.

The code in the watch face only works if the screen is on. So the event.CHANGE event will happen only if the AOD is enabled. If AOD is not used, it is easier to update data only when the screen is switched on. If AOD is used, it is necessary to add screen type check and update only widgets displayed on this screen.

It seems to me that steps are updated more often than calories. So I would use the steps sensor for testing. And then when the code is debugged and working change the sensor type to the required one.

[Imozeb]

Thanks.

So now I have gotten it to display "5" on the screen from "resume_call.js" below.

I would like to display the actual calories divided by 2, but I am not sure to do that. From what I read, I cannot get the actual calories value when the watch display resumes. Is this true?

I tried pulling calories from the "distanceSensor.addEventListener(hmSensor.event.CHANGE, function()" in "user_script_beforeShortcuts.js", but that never seems to execute. See my test script below where it should display "10" instead of "5" when the watch face resumes.

I have also tried pulling calorie.current from a different sensor and that did not work either.

Thanks again!

Other Calorie Sensor Generated From Your Editor

Code: Select all

            const calorie = hmSensor.createSensor(hmSensor.id.CALORIE);
            calorie.addEventListener(hmSensor.event.CHANGE, function() {
              scale_call();
            });

user_function.js

Code: Select all

// 1 (user_functions.js)
			// MY GLOBAL VARIALBES
			let caloriesText = ''

user_script_beforeShortcuts.js

Code: Select all

// 4 (user_script_beforeShortcuts.js) (Include all display text, event listeners here)
// Create a text widget to display calories / 2.5
caloriesText = hmUI.createWidget(hmUI.widget.TEXT, {
      x: 219,
      y: 190,
      w: 78,
      h: 25,
      color: 0xFF00FF00,
      text_size: 25,
      align_h: hmUI.align.CENTER_H,
	  align_v: hmUI.align.CENTER_V,
	  text: "...",
	  show_level: hmUI.show_level.ONLY_NORMAL,
});

    const distanceSensor = hmSensor.createSensor(hmSensor.id.DISTANCE);
    distanceSensor.addEventListener(hmSensor.event.CHANGE, function() {
        // Update display here
        //updateCalories(data.calories);
        updateCalories(10)
    });

user_script_end.js

Code: Select all

// 5 (user_script_end.js) (Include all function definitions here)
// MY FUNCTIONS
	function updateCalories(calories) {
                console.log('updateCalories()');
                
                if (screenType != hmSetting.screen_type.AOD) {
                    //let valueCalories = calorie.current
                    //let adjustedCalories = Math.floor(valueCalories / 2.5);
                    
                    // Update Calories Text
                    caloriesText.setProperty(hmUI.prop.MORE, {
                        //text: String(adjustedCalories)
                        text: calories
                    });
		 };
	};

resume_call.js

Code: Select all

// 6 (resume_call.js) (Calls once when watchface turns on)
                updateCalories(5);

[Imozeb]

Also, is there any way that I can edit the code generated from your program directly and rezip it with the proper compression for uploading? It looks like if I add my code to your "function scale_call()", it would work.

[SashaCX75]

I don't see where you defined the screenType variable.
I recommend changing the value in ‘packageInfo’ to “mode”: ‘development’ in the app.json file. This will allow you to view the logs. It will be easier to understand what the error is.

[Imozeb]

I don't see where you defined the screenType variable.
I recommend changing the value in ‘packageInfo’ to “mode”: ‘development’ in the app.json file. This will allow you to view the logs. It will be easier to understand what the error is.

I managed to get it working. Now I am going to program the equations.

Thank you for all your help!

[Imozeb]

One question. Do you know if it is possible to temporarily store variables in Zepp OS 2.0 using: hmFS.SysProSetInt64(key, val)

https://docs.zepp.com/docs/watchface/ap ... oSetInt64/

It seems to not work. Does something need to be enabled in the app.json?

I tried:

Code: Select all

hmFS.SysProSetInt64("myCounter", 1234567890);

const value = hmFS.SysProGetInt64("myCounter");

[SashaCX75]

SysProSetInt works fine.
I have never used SysProSetInt64.

[Imozeb]

Does your editor output Zepp OS 1.0 or Zepp OS 2.0 code? If it is 1.0, does that mean that I can only use functions from the Watchface 1.0 DOCS and not 2.0 or App DOCS?

Thanks!

[SashaCX75]

The editor creates watch faces on API 1. Widgets that appeared only on API 2 will work in most cases in such watch faces. However, some functions (e.g. new sensors) will not work because they are in a different namespace and cannot be imported into watch faces.

[Imozeb]

How do I get the heartrate array for the day?

I tried to follow the docs here, but the array won't populate. https://docs.zepp.com/docs/watchface/ap ... rId/HEART/

My Code:

Code: Select all

heart.addEventListener(event, callback: Callback)

const hrTodayListener = function () {
  let myArray = heart.today;
}

heart.addEventListener(heart.event.today, hrTodayListener)

[Finferlo]

Good morning, I downloaded version 14 of this software this morning, but it doesn't start on Windows 11. However, version 13.2 continues to work correctly. Is there something I need to do that I haven't done?

[SashaCX75]

I can only advise you to download it again. Because I didn't add any new modules or libraries. If you get an error message, send it to me, it might help to understand the cause.

[frankh93]

There is a way to make the watch vibrates when pressing a button?

I have been playing around with the code and managed to get working the background and a foreground changing depending on what button is pressed (it's an array of colors) but would like to make the watch vibrates when these buttons are pressed. Thank you beforehand

[Finferlo]

I can only advise you to download it again. Because I didn't add any new modules or libraries. If you get an error message, send it to me, it might help to understand the cause.

I downloaded the package again, launched it after unzipping it, it starts, asks me to grant permission to Win, and after granting it, the program doesn't load, no error message is displayed, it simply doesn't start.
I repeated the same operation with package 13.2, and it starts normally. All packages BEFORE 14 start.

Edit:
I put the 13.2 executable file in the version 14 package and it DOESN'T RUN. If I put the 14 executable file in the version 13.2 folder, it doesn't run.
Only version 13.2 (and earlier) runs within their package.

[Lattenknaller]

under Windows the program does not ask for permission.
Could it be that you are emulating Windows on a Mac, for example? I have installed 14 on several Windows computers without any problems.

[SashaCX75]

Version 14.1
Mirror
Fixed issues with the circular scale on some widgets.
Added support for Active 2 (Square).

[frankh93]

I managed to get a code to change bg depending on which button I press but wanna move some elements too. I got a weather temp and icon, a day of the week and date number, and the heart rate.... Tried with setProperty(hmUI.prop.MORE, {y:....}) but only week of the date and date number got moved... Gotta do it in other way for the other elements? Or I'm missing something?

Thank you beforehand

[Finferlo]

under Windows the program does not ask for permission.
Could it be that you are emulating Windows on a Mac, for example? I have installed 14 on several Windows computers without any problems.

I disabled the security check, now it works. Good afternoon.

[SashaCX75]

@frankh93
Try prop.Y or prop.POS_X.
Also, if you use prop.MORE, for some widgets you need to change all parameters at once, not just the coordinates.

[SashaCX75]

Version 14.1.1
Mirror
Critical update for the circular distance display widget. In version 14.1, it causes an error in watch faces.

[frankh93]

@frankh93
Try prop.Y or prop.POS_X.
Also, if you use prop.MORE, for some widgets you need to change all parameters at once, not just the coordinates.

Tried what you told me and only hmUI.prop.Y worked but only for the weathericon, it didn't work for current temperature and heart rate. This is my code:

code

user_functions.js

Code: Select all

const bgColorsSet = [
    "WHITE", "BLUE", "TURQUOISE", "GREEN", "ORANGE", "RED", "VIOLET"
];

let bgColorsIndex = 0;
let currColor = "";
let currBgColor = "";
let currCardColor = "";
let solidModulesStyle = false;
let currModulesStyle = "OUTLINE"

// positions for modules
let weathericon_ypos = 25;
let temp_ypos = 66;
let dow_ypos = 206;
let day_ypos = 228;
let hrm_ypos = 356;

user_script_end.js

Code: Select all

function prevColor(){
    bgColorsIndex = (bgColorsIndex - 1 + bgColorsSet.length) % bgColorsSet.length;
    updateWatchface();
}

function nextColor(){
    bgColorsIndex = (bgColorsIndex + 1) % bgColorsSet.length;
    updateWatchface();
}

function modulesStyle(){
    solidModulesStyle = !solidModulesStyle;
    if (solidModulesStyle){
        currModulesStyle = "SOLID";

        // positions
        weathericon_ypos = 48;
        temp_ypos = 84;
        dow_ypos = 214;
        day_ypos = 236;
        hrm_ypos = 372;
    }
    else{
        currModulesStyle = "OUTLINE";

        // positions
        weathericon_ypos = 25;
        temp_ypos = 66;
        dow_ypos = 206;
        day_ypos = 228;
        hrm_ypos = 356;
    }
    updateWatchface();
}

function updateWatchface(){
    currColor = bgColorsSet[bgColorsIndex];
    
    // positions
    normal_weather_image_progress_img_level.setProperty(hmUI.prop.Y, weathericon_ypos);
    normal_temperature_current_text_font.setProperty(hmUI.prop.MORE, {
        x: 231,
        y: temp_ypos,
        w: 100,
        h: 30
    });

    // styles
    currBgColor = "MODULES_" + currModulesStyle + "_" + currColor + ".png";
    currCardColor = "FRONT_CARD_" + currColor + ".png";

    normal_background_bg_img.setProperty(hmUI.prop.SRC, currBgColor);
}
updateWatchface();

function hideSettings(){
    // normal buttons
    Button_1.setProperty(hmUI.prop.VISIBLE, true);
    Button_2.setProperty(hmUI.prop.VISIBLE, true);
    Button_3.setProperty(hmUI.prop.VISIBLE, true);
    Button_4.setProperty(hmUI.prop.VISIBLE, true);
    Button_5.setProperty(hmUI.prop.VISIBLE, true);

    // clock
    normal_time_hour_text_font.setProperty(hmUI.prop.VISIBLE, true);
    normal_time_minute_text_font.setProperty(hmUI.prop.VISIBLE, true);
    normal_analog_clock_pro_minute_pointer_img.setProperty(hmUI.prop.VISIBLE, true);
    
    // settings layout
    Button_6.setProperty(hmUI.prop.VISIBLE, false);
    Button_7.setProperty(hmUI.prop.VISIBLE, false);
    Button_8.setProperty(hmUI.prop.VISIBLE, false);
    Button_10.setProperty(hmUI.prop.VISIBLE, true);

    normal_image_img.setProperty(hmUI.prop.SRC, currCardColor);
}
hideSettings();

function showSettings(){
    // normal buttons
    Button_1.setProperty(hmUI.prop.VISIBLE, false);
    Button_2.setProperty(hmUI.prop.VISIBLE, false);
    Button_3.setProperty(hmUI.prop.VISIBLE, false);
    Button_4.setProperty(hmUI.prop.VISIBLE, false);
    Button_5.setProperty(hmUI.prop.VISIBLE, false);
    
    // clock
    normal_time_hour_text_font.setProperty(hmUI.prop.VISIBLE, false);
    normal_time_minute_text_font.setProperty(hmUI.prop.VISIBLE, false);
    normal_analog_clock_pro_minute_pointer_img.setProperty(hmUI.prop.VISIBLE, false);
    
    // settings layout
    Button_6.setProperty(hmUI.prop.VISIBLE, true);
    Button_7.setProperty(hmUI.prop.VISIBLE, true);
    Button_8.setProperty(hmUI.prop.VISIBLE, true);
    Button_10.setProperty(hmUI.prop.VISIBLE, false);

    normal_image_img.setProperty(hmUI.prop.SRC, "SETTINGS_OVERLAY.png");
}

Thank you beforehand for all the help, also sorry for the mess in the code... I'm just starting to learn this and trying my best haha

[SashaCX75]

I disabled the security check, now it works. Good afternoon.

Some users encountered similar problems. They were able to resolve the issue by running the SplashScreen.exe file in the Libs folder. When launched, the system requested permission to run this file. After that, the editor started running normally.

[Finferlo]

I disabled the security check, now it works. Good afternoon.

Some users encountered similar problems. They were able to resolve the issue by running the SplashScreen.exe file in the Libs folder. When launched, the system requested permission to run this file. After that, the editor started running normally.

Thanks, I disabled the security check on the executable file and it no longer blocks it.