v1ack / watchfaceeditor

Amazfit Bip and Cor watchface viewer and editor

WatchfaceEditor

Watchface editor for Amazfit Bip, Amazfit Cor and Mi Band 4

First you should disassemble watchface.bin file and then upload all images and .json file to this app

There is a full instruction in app

Development

Install Node.js and npm

Install packages npm install

Start dev server npm run dev

Open local on http://localhost:9000/

How to help with translation

There are two apps - watchface editor and image creator

To translate watchface editor you need:

• add json with translation to dev/translation/{lang-name}.json
• import your lang in dev/js/app.js (see other langs)
• add checking and setting language on app open in dev/js/watchfaceEditor.js
• add button for choosing language in index.html

To translate watchface editor you need:

• add json with translation to assets/translation_ic/czech.json
• add checking and setting language on app open in js/image_creator.js
• add button for choosing language in imagecreator.html

For testing use development instruction above

watchfaceeditor's Issues

about ARROWS dot

"Click to add a dot, right click to remove, drag to move. Max 24 dots for all arrows if you use 2 arrows and 30 dots if you use 3 arrows"

On my real watch, 30 dots, use 3 arrows, the arrows can not be displayed. Why?

Can you displayed it ?

12.00 AM/PM issue

If you set time to 12:00 PM, it's rendered as 12:00 AM. Please fix that.

Notice, time starts with 12:00 PM according to the rules:

10 AM
11 AM
12 PM
1 PM
2 PM

The amazfit bip device works correctly in this case and shows 12.00 PM.

Thanks in advance 😉

Is it usable for bip s(米动青春版1s)

Everything freezes after uploading images

Language

can you add polish language I can help in translation

Amazfit GTS Support in Future?

HEY!
I would love to see a Watchface Editor for the Amazfit GTS!
I made so many good Watchfaces for the BIP with your tool and would love to be creative again for my new watch :-)

Best regards from Germany

Thank you for the reply @ v1ack

The previous use of Pull requests is to allow you to respond to my reply quickly
（I don't have your contact.）

Because I have no other way to contact you.

You write to me with GitHub mailbox, but, I can't reply (you set up no other people to reply your mail through GitHub).

Now, I know how to get in touch with you and I'll communicate with you in here

12h format [BIP] not working correctly

as title says.. something must changed because all my watchfaces created in editor before now show wrong time. method https://amazfitwatchfaces.com/forum/viewtopic.php?t=569 not working now. in this editor https://amazfitwatchfaces.com/editor/watchfaceEditor/?bip is working.

you can see the mistake when in base theme for BIP change time format to 12H and you're changing hours. from 00:00 to 12:00 > OK, from 13:00 to 00:00 > BUG. 13:00 is in 12H as 10; 14:00 is as 20; 15:00 as 30 an so on.

[Cor]--code bug?

json（Test module）:

week day + date oneline + steps

bug:

If use the [fix-coords] Function, the following code will be added to the JSON file:

        **"BottomRightY": null,
        "BottomRightX": null**

Is this a new Function? Or BUG?

😍 Also, thank you very much for updating this tool again！

Some new code needed supported

Now，the amazfit team put forward a official way to build a custom watchface. And they carry out a new function that is animation. it is very exciting new function. Fallowing is the official code
#------------------------------------------> Animation coordinates
[animation1_icon_pos] [=]
#------------------------------------------> Animation path
[animation1_icon_dir] =
#------------------------------------------> Animation playback frame rate
[animation1_icon_framerate] =
#------------------------------------------> Animation playback times
[animation1_icon_play_times] = 0
//The number of plays, the default is 1 time, 0 times is played only when the backlight is on, and 255 is played all the time.
#------------------------------------------> Animation playback mode
[animation1_icon_play_mode] = 1
//0=Does not display after ending the animation
//1=Show the first one after ending the animation
//2=A random display after ending the animation
//3=A random display when playing an animation
//4=Do not play the animation just randomly display one (can be used to unlock the change dial background)
Hope the editor can edit it soon :)

Can't upload background image

When trying to create a watch face site https://v1ack.github.io/watchfaceEditor/ won't allow me to upload a background image, I have tried with several images to no avail. Am I doing something wrong or is there a bug on the site? I have added a video to show that no image appears, and no watch face.
Screen recording 2022-12-26 9.06.29 PM.webm

Add Mi band 5 support

will they update with support for mi band 5?

Can you support the NEW code

------------------------new code-----------------------

    "AirPollution": {
        "Icon": {
            "X": 20,
            "Y": 61,
            "ImageIndex": 235,
            "ImagesCount": 6
        },
        "Index": {
            "TopLeftX": 135,
            "TopLeftY": 98,
            "BottomRightX": 165,
            "BottomRightY": 106,
            "Alignment": "TopLeft",
            "Spacing": 2,
            "ImageIndex": 11,
            "ImagesCount": 10
        }
    }

Can't have ImageIndexOff without ImageIndexOn

WatchfaceEditor.js

If you have an "Off" image without an "On" image you get an "Can't find image undefined" error.

Alarm, DND and Lock need to check for image first before trying to use, like BT does.

else if ('ImageIndexOn' in wfe.coords.statbt && wfe.data.bluetooth)

status: {
alarm: function () {
if ('ImageIndexOff' in wfe.coords.statalarm && !wfe.data.alarm)
t = $c(wfe.coords.statalarm.ImageIndexOff);
else if (wfe.data.alarm)
t = $c(wfe.coords.statalarm.ImageIndexOn);
else return;
t.style.left = wfe.coords.statalarm.Coordinates.X + "px";
t.style.top = wfe.coords.statalarm.Coordinates.Y + "px";
wfe.view.insert(t, "c_stat_alarm");
},
bt: function () {
if ('ImageIndexOff' in wfe.coords.statbt && !wfe.data.bluetooth)
t = $c(wfe.coords.statbt.ImageIndexOff);
else if ('ImageIndexOn' in wfe.coords.statbt && wfe.data.bluetooth)
t = $c(wfe.coords.statbt.ImageIndexOn);
else return;
t.style.left = wfe.coords.statbt.Coordinates.X + "px";
t.style.top = wfe.coords.statbt.Coordinates.Y + "px";
wfe.view.insert(t, "c_stat_bt");
},
dnd: function () {
if ('ImageIndexOff' in wfe.coords.statdnd && !wfe.data.dnd)
t = $c(wfe.coords.statdnd.ImageIndexOff);
else if (wfe.data.dnd)
t = $c(wfe.coords.statdnd.ImageIndexOn);
else return;
t.style.left = wfe.coords.statdnd.Coordinates.X + "px";
t.style.top = wfe.coords.statdnd.Coordinates.Y + "px";
wfe.view.insert(t, "c_stat_dnd");
},
lock: function () {
if ('ImageIndexOff' in wfe.coords.statlock && !wfe.data.lock)
t = $c(wfe.coords.statlock.ImageIndexOff);
else if (wfe.data.lock)
t = $c(wfe.coords.statlock.ImageIndexOn);
else return;
t.style.left = wfe.coords.statlock.Coordinates.X + "px";
t.style.top = wfe.coords.statlock.Coordinates.Y + "px";
wfe.view.insert(t, "c_stat_lock");
}
},

please add Linux disassembler

I use chrome os and Linux and have no way of using the watchface.exe. Is there a way to extract the files using another program?

Chinese translation updates

"jsonupdate": "To update preview just click out of JSON input",

<------Translate into Chinese----->

"jsonupdate": "若要更新表盘预览，只需在【JSON编辑区】外单击即可",

Feature request: select alignment in Image creator

Hi @v1ack

Not sure whether this is even possible, but when creating text using the Image creator I think it would be very useful to be able to select alignment to the left or right (maybe even justified) preferably with a configurable offset to the side selected. I noticed it now automatically centers any words generated. Would you be so kind to look if this could be implemented?

Thanks in advance.

Best regards,
Marco

Text string - Please check

@v1ack

In this file

https://github.com/v1ack/watchfaceEditor/blob/master/assets/translation_ic/english.json

Please fix

"color_limit": "Color limir for converting"

in

"color_limit": "Color limit for converting"

Thanks.

Amazfit verge lite support

Hi! How plane about support verge lite ?

Request for UI fixes (multilanguage)

@v1ack

Hello.

I tested the new Italian UI GUI and seems that I found some issues about strings untranslated.

Please check the screenshot and if you can add relative strings to the language.
I highlighted with a red box the untranslated strings.

Thanks.

English -------translation------> Chinese

English -------translation------> Chinese

REAL-SIZE PREVIEW----->实际尺寸预览------>( TXK Note: when 1280*720 resolution, this function can display the correct size)

Change theme----->更换配色主题
ANALOG----->表针
HOURS------>时针
MINUTES------>分针
秒（seconds）------>秒针
TOGGLE------>启用/禁用
Center------>旋转中心坐标
Color------>表针颜色
Fill------>填充

TOGGLE CURRENT WEATHER wrong parameter

when i TOGGLE CURRENT WEATHER here is parameter "MinusSignImageIndex". before here was "MinusImageIndex". with this new parameter is imposibble make .bin file because error in AmazfitBipTools-1.0.3.1 (WatchFace.exe)
/ BIP

Add support for Amazfit X

Hi, Is it possible to add Amazfit X support?
Thanks!

Loading translation error: SyntaxError: Unexpected token } in JSON at position 4227

Loading translation error: SyntaxError: Unexpected token } in JSON at position 4227

chinese translation

About Chinese language translation

NEW:
Description----->描述
Icon----- >图标
Cloudy and Chance of Rain----- >多云有阵雨
Cloudy and Chance of Snow----- >多云有阵雪

---

FIX:
"weather_snowandrain":"雨夹雪"
"weather_storm":"雷阵雨"
"weather_hailstorm":"雷阵冰雹"
"weather_dew":"露水" ---------->"weather_floating dust":"浮尘" ？？？
"weather_sandstorm":"沙尘暴" ----------> "weather_blowing dust":"扬尘"？？？
https://v1ack.github.io/watchfaceEditor/defaultimages/279.png -------->"weather_sandstorm":"沙尘暴" ？？？

My [vk.com] account has been blocked. -_-, SO~~~~, update in HERE!

[github.com] In the process of learning and using. ^_^

Add suport for amazfit band 5

Any predictions of adding support for amazfit band 5?

Image for prorety not found

When uploading images and json, the error message "image for prorety not found" appears. The example watch is empty. What can I do?

json:

{
 "Background": {
   "Image": {
     "X": 0,
     "Y": 0,
     "ImageIndex": 0
    }
  },
  "Time": {
    "Hours": {
      "Ones": {
        "X": 65,
        "Y": 30,
        "ImageIndex": 1,
        "ImagesCount": 12
      }
    },
    "Minutes": {
      "Tens": {
        "X": 94,
        "Y": 30,
        "ImageIndex": 1 ,
        "ImagesCount": 10
      },
      "Ones": {
        "X": 117,
        "Y": 30,
        "ImageIndex": 1,
        "ImagesCount": 10
      }
    }
  }
}

images:

tree /f
│   0000.png
│   0001.png
│   0002.png
│   0003.png
│   0004.png
│   0005.png
│   0006.png
│   0007.png
│   0008.png
│   0009.png
│   0010.png
│   0011.png
│   0012.png
│   0013.png

amazfit gtr support

Hi,

Is there any chance for this editor to support the amazfit gtr as well?
It seems like it's using the same method with a .bin file containing json and images in it.

Thanks.

Help me, A detailed description, Update translation. thank you.

A detailed description of the following code Label：

ALT NIGHT WEATHER ???

ALT ???

-------------------------- END---------------------------------

------------------------ and --------------------------------

Update the air quality translation：
"tgweatherair": "启/禁用【空气污染】"
Update
"tgweatherair": "启/禁用【空气污染图标】"

add translation：
"tgweatherAirText": "Toggle air polution"
translation to chinese
"tgweatherAirText": "启/禁用【空气污染指数】"

"weatherAltDescription": "Appears when curret weather is unavalible",
translation to chinese
"weatherAltDescription": "当温度不可用（缺失）时，显示替代图示",

suggest of the following：

--------------1111------------------
"tgweatherAirText"
”Text“ ？？------------》 "Number"？？

---------------2222-----------------
Add a code Label :
TOGGLE ALT CURRENT WEATHER
(ABOUT "tgweathercur") --------》this current weather often is unavalible

Weather icons

Official watchfaces have different weather icons for night and day. Mainly sun-->moon
Is that possible with custom watchfaces?

Temperature can only go up to 100

When using imperial units temperature regularly goes over 100 degrees Fahrenheit

666

999

wallpaper

how to change the wallpaper, let say i wanna put others cartoon wallpaper instead of the superman one.

Seconds png Problem

There's a Problem with the Seconds png's.
It seems if you put them in the same (X) line as step progress or step goal png it causes errors!

Btw: if you need help in german Translation write me!

【FIX coordinates 】 don't work

Why【FIX coordinates 】 don't work

for example： Current weather (DESIGN)don't work - (EDIT)don't work

for example： Steps (DESIGN)don't work - (EDIT)work

BUG?

About the new version of today:

Is there a bug in the WEEK DAY code?

If you increase WEEK DAY , DAY and MONTH code, you can't delete DAY and MONTH code.

Can only be deleted with the WEEK DAY code

AND ...

IN [DESIGN] can't FIND it

---

The operation is as follows:

--------------111---------
Add WEEK DAY
Add DAY

--------------222----------
Design, drag

--------------333----------
Delete DAY

--------------444----------
Loss of WEEK DAY

Separate faces for locked and unlocked status

Would it be possible to generate a resource bin with two faces like stock face #6 has
one with seconds hand and one without.
Found a comment here about a watch dial resource has 3 tables - general, locked, donotdisturb
see post 4 and 5 here
https://amazfitwatchfaces.com/forum/viewtopic.php?f=6&t=103

Thanks!

Italian language is not available in web site

@v1ack

I developepd the Italian language.

But here

https://amazfitwatchfaces.com/editor/watchfaceEditor/?bip

the Italian language is not available.
What's the matter?

Here

https://v1ack.github.io/watchfaceEditor/

Italian language is available.

Thanks. KR.

About [BIP] function

TEST1 [VIEW] function:

bug?
[MAKE PNG] - [With watch] ---> The PNG file NO GOOD?(Blurred picture quality)

feedback
My screen resolution is 1366*768，If you press [F11] KEY full screen display, the quality of the picture is GOOD.

---

TEST2 [Images SELECT] function:

bug?
(1).[Images SELECT] - [JSON SELECT]---->The [preview] on the left is good.
(2).only [Images SELECT] again, ----->The [preview] on the left is no good,
(3).Continue, click [Edit]function.---> the preview on the left Automatically change to good.

---

[Real-size preview]function:

bug?
no work?

Translation update of Chinese

"analogDescription":"Click to add a dot, right click to remove, drag to move. Max 12 dots for each arrow"
（Translation of Chinese）
"analogDescription":"单击以添加一个点，右击可删除点，拖放可移动点。每根表针最多支持12个点。"

title="It sets coordinates for bottom right based on height of highest element and width of widest"
（Translation of Chinese）
title="它根据最高元素的高度和最宽的宽度设置右下角的坐标。"

AND.....

"settings": "模拟设置",
（Translation update of Chinese）
"settings": "设置",

"images": "图像元素:"
（Translation update of Chinese）
"images": "图像:"

No analog hands?

I could not find any settings to manage analog hands for the watchface.

ADD Chinese translation

"checkImages": "Check images in watchface folder. At least images with index(s): ",
"checkImages": "请在解包的表盘文件夹中检查图像。请确保至少具有以下图片（图片组）从【素材】里下载保存了： ",

"imagesLimitSteps": "Image limit for steps progress is 20. If you use more, they won't be dispaly",
"imagesLimitSteps": "步数进度的图像个数限制为20个。如果你用得更多，它们不会被显示。",

Bug in Design Mode

I tried this face:
https://amazfitwatchfaces.com/bip/view/13822

bin:
5bffe12d9a35f_29112018.bin

But watchfaceEditor crash in design tab:
screenshot:
https://www.screencast.com/t/RFl14Ugq4CgJ

FIX COORDINATES in design tab not working.

FIX COORDINATES in design tab not working.
/ BIP

Fix coordinates not working in BIP mode

[Fix coordinates] not working in BIP mode and COR mode

If you have time, please repair it. Thank you.

Bh

finnish weekdays

I made finnish weekdays
weekdays_fi.zip