Build on Svelte Kit and Tailwind CSS
Go to site: v1ack.github.io
Amazfit Bip and Cor watchface viewer and editor
Home Page: https://v1ack.github.io/watchfaceEditor/
License: GNU General Public License v3.0
Build on Svelte Kit and Tailwind CSS
Go to site: v1ack.github.io
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 :)
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
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.
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.
bug?
no work?
Hi! How plane about support verge lite ?
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?
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
FIX COORDINATES in design tab not working.
/ BIP
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.
Any predictions of adding support for amazfit band 5?
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
------------------------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
}
}
"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个。如果你用得更多,它们不会被显示。",
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");
}
},
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.
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
When using imperial units temperature regularly goes over 100 degrees Fahrenheit
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
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 😉
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!
Loading translation error: SyntaxError: Unexpected token } in JSON at position 4227
chinese translation
can you add polish language I can help in translation
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
"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": "图像:"
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!
"jsonupdate": "To update preview just click out of JSON input",
<------Translate into Chinese----->
"jsonupdate": "若要更新表盘预览,只需在【JSON编辑区】外单击即可",
Hi, Is it possible to add Amazfit X support?
Thanks!
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
[Fix coordinates] not working in BIP mode and COR mode
If you have time, please repair it. Thank you.
week day + date oneline + steps
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!
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------>填充
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.
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. ^_^
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.
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
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
999
"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 ?
will they update with support for mi band 5?
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
how to change the wallpaper, let say i wanna put others cartoon wallpaper instead of the superman one.
I could not find any settings to manage analog hands for the watchface.
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.
I made finnish weekdays
weekdays_fi.zip
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.