Tutorial How to make Dynamic Watchface

Does this tutorial helps you?


  • Total voters
    13
  • This poll will close: .

Irfan902

Well-known member
Joined
Apr 19, 2019
Messages
278
Likes
149
Points
53
#1
The principle of dynamic watchface:
multiple static map rotation, means you have multiple static images, not directly put gif.

Tools:
1. This unpacking and press tool https://www.bandbbs.cn/index.php?threads/[6-24 update] 米环4 custom dial tool amazfitbiptools_mi4_0-0-2- Support dynamic map.256/page-3#post-2598
2.PhotoShop
3.GIF online decomposition tool GIF动态图片分解,多帧动态图分解成多张静态图片_图片工具网页版
(Note: You can use other tool too. This one is in Chinese)

Tutorial:
1. Decompose the GIF image,
one by one. Save to your device.

1062




1063



2. Modify the picture mode to RGB

1064



3. The official dial background is 3.18*6.35, so make sure your image fits into this size canvas.
You can modify the image size and canvas size, maps, and more. You can learn it yourself.

1065



1067



1066




4. After the modification, change the picture mode to the index color, select the average mode in the palette, the color value is 128 (this is the mode I use, I have not tried other, but it is possible to save the index mode directly. Not shown on the bracelet). Finally saved.

1068


5. Complete all the diagrams in steps 3 and 4, and the images should be the same size.
Modify the images suffix to png. Rename it to "0xxx" and put these images into the dashboard folder.

1806


6. Modify the JSON file: Add the code at the end of the file
,
"Other": {
"Animation": {
"AnimationImage": {
"X": 20, //Coordinate
"Y": 140,
"ImageIndex": 79,// The starting picture number
"ImageCount": 326, / / the total number of pictures
"X3": 0
},
"x1": 0, / / picture interval time, below 50 will not flash.
"y1": 50, / / number of loops
"Interval": 200
}
}

1072


7. Drag the Json file with a mouse to the unpacking tool to generate the bin file. The generated bin file cannot exceed 320 kb. If you exceed it, you have to reduce the number of pictures.

1807


8.Installation: find the watchface file in the phone, the specific path is: Android/data/com.xiaomi.hm.health/file/watchface_local, just find a folder, there must be a bin file, if not go to Mi Fit to download, delete the original bin file, put your file into it, and change your bin file to the name of the original bin file. Apply that dial.

Alternative:
Install the latest Notify & Fitness and pair the band with the app. After that, go to watchfaces tab and choose install custom watchface (.bin)
Note: This method require Mi Fit app installed in your device


PS: This is all the watchfaces and material files I have made, the unpacking tool is also inside.

1071


link:https://pan.baidu.com/s/1IrhmzDRQDi1RKxYYMllNxw
extraction code: hshd

CREDIT:
Binky from BANDBBS

(I just translate it and made some changes)
 
Last edited:

rufat845

New member
Joined
Sep 5, 2019
Messages
3
Likes
0
Points
1
#11
@Irfan902 Hi,i have some problems with animated watchface.
Debug|Reading config...
Fatal|Newtonsoft.Json.JsonReaderException: After parsing a value an unexpected character was encountered: ". Path 'Status', line 134, position 2.
â Newtonsoft.Json.JsonTextReader.ParsePostValue(Boolean ignoreComments)
â Newtonsoft.Json.JsonTextReader.Read()
â Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
â Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
â Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)
â Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)
â Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)
â Newtonsoft.Json.JsonConvert.DeserializeObject[T](String value, JsonSerializerSettings settings)
â WatchFace.Program.ReadWatchFaceConfig(String jsonFileName)
 

Irfan902

Well-known member
Joined
Apr 19, 2019
Messages
278
Likes
149
Points
53
#12
@Irfan902 Hi,i have some problems with animated watchface.
Debug|Reading config...
Fatal|Newtonsoft.Json.JsonReaderException: After parsing a value an unexpected character was encountered: ". Path 'Status', line 134, position 2.
â Newtonsoft.Json.JsonTextReader.ParsePostValue(Boolean ignoreComments)
â Newtonsoft.Json.JsonTextReader.Read()
â Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
â Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
â Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)
â Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)
â Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)
â Newtonsoft.Json.JsonConvert.DeserializeObject[T](String value, JsonSerializerSettings settings)
â WatchFace.Program.ReadWatchFaceConfig(String jsonFileName)
It seems like you made an error at line 134..May I see your json file?
 

Trusted Store

Our Telegram Channel

Which color of official strap would you like to buy for your Mi Band 3?

  • Black

    Votes: 1,146 55.6%
  • Deep Blue

    Votes: 597 29.0%
  • Redish Orange

    Votes: 317 15.4%

Forum statistics

Threads
930
Messages
23,795
Members
127,662
Latest member
Mmbryan
Top