MiBandWFTool

[lvpokka]

Author
lvpokka

Tool Description
1. The tool is based on a modified version of AmazfitBipTools, thanks to the original open source .
2. The tool supports unpacking, packing of the official watch face bin file.
3. Mi band 4 supports 16,581,375 colors.
4. Mi band 5 supports 15,499,008 colors.

How to
1. Unzip MiBandWFTool_X.X.zip.
2. Download .bin file from catalog or get standard watchface file.
3. Drag the .bin file to WatchFace.exe (in step 1. , get the decompressed file)
(if there is only one log file, the decompression failed).

4. There are two ways to modify the dial.

• is to modify the corresponding image file and replace it with what we want.
• is to modify the corresponding json file and modify the position of the image.

5. After all the modifications are completed, drag the modified json into WatchFace.exe in step 1 to get the corresponding bin file
(the file name depends on the name of the bin. If the .bin file is not generated, the package is wrong)

6. Copy the newly generated bin file to the corresponding directory of the mobile phone, and the synchronization will be completed. (This step is not very clear, you can refer to the original tutorial) above, you're done!

History log

What's new

• added animation support
• fixed pulse and weather
• removed color restrictions for images
• analog clock support

ver1.2
- Added compatibility for Pulse progress bar

ver1.3
- added full support for transparent images
- drawing 20 frames for preview GIF

ver1.3.2
- bug fixes
- added 2 versions, both with transparency but Palette version uses less memory if images are simple.

ver1.3.3
- Added circular/linear step progress on preview

Stable v1.3.6
- locked transparency for palette mode, support only (0 and 255) values
- palette mode fix

Stable v1.3.7
v1.3.7 (cosmetic changes, you can use 1.3.6 if everything suits)
- Fixed GIF preview (Pulse rendering, Step segments, Kilometer drawing, Calories)
- Added the ability to choose which Set of images to use for WeekDays. (Config file WatchFace.exe.config)
- STRONGLY fixed json examples in README.
(to avoid problems, pack 1.3.6 and unpack 1.3.7 for a smooth transition)

Stable v1.3.8
- Removed image order dependency for json (sorting images no longer required)
- Fixed display bugs
Important: the order of the images should be from 0000 to XXXX without gaps.

v1.3.9
- Removed dependence on images order 0000->XXXX
- Calories rendering fixed
- Added ability to change Preview Speed (available from 50ms - 1000ms)
- TimeElement DrawingOrder hardcoded to 1234 (not used by MiBand4)

v1.4.1
- Other bugfixes
- New WF support
- Added new elements (time delimiter / step icon / linear progress )

v2.1.4
- Added support Mi Band 5 wfaces
- Pandafix (new unknown element)
- BugFixes

v2.1.5
- Preview bugfixes
- [WFPreview] Added Copy/Paste/Save ability
- [WFPreview] Added ability to replace watchface header

Mi Band 4 WF Tool
v1.4.2
- Added miles image support
NOTE:
- if your using image for MilesSuffixImageIndex, then KmSuffixImageIndex is required! you can use the same image for it

Mi Band 5 WF Tool
v2.1.6
- Preview bugfixes
- Watchfaces generating with random header identifier
- Fixed problem with Windows scaling, DPI is tied to 96
- [WFPreview] Removed ability to clone watchface header

Mi Band 6 WF Tool
v4.1.0
- Added Lunar calendar
- Bug fixes
- New preview generator, should be pixel perfect (big thx to Johnson070)

MiBandWFTool_4.1.0.zip

MiBandWFTool_2.1.6.zip [alt url] [alt url 2]

MiBandWFTool_1.4.2.zip [alt url] [alt url 2]

[SinE_]

Now it work fine for me.

Thanks again.

[mysiak]

nope) limit of colors is 255, do what you want with it...
To use palette mode you can use paint.net and save it with 8 bit, or use JUST one background raw image by using raw.cfg

if you have 3 results of file size then there is 100% using mixed raw images with palette mode

Thanks, mixed mode did the magic. For small letters and numbers I've used RAW mode (32bit PNG images), for the rest (background, animation) there's no loss of quality with palette. Interestingly - if I forced 8bit PNG with imagemagick, there was noticeable loss of quality with the exactly same BIN size as with 32bit images (~150kb).

[ZIK999]

Is there any way too make animation UNDER watch numbers on miband4? Can I somehow control order of layers in .json?

http://gph.is/1NeUGi2

Basically I want this gif to be full background and digits on the circle.

[lvpokka]

[mention]ZIK999[/mention]

Screenshot 2019-09-22 15.57.47.png (10.46 KiB) Viewed 14358 times

[JonatanRek]

Hi,
i am creating mass effect themed watch face but from some reason after packing to .bin all icons are missing, only Time and background is present after installation, can anybody check my json if is correct ?

Code: Select all

{
  "Background": {
    "Image": {
      "X": 0,
      "Y": 0,
      "ImageIndex": 0
    }
  },
  "Time": {
    "Hours": {
      "Tens": {
        "X": 9,
        "Y": 140,
        "ImageIndex": 1,
        "ImagesCount": 10
      },
      "Ones": {
        "X": 61,
        "Y": 140,
        "ImageIndex": 1,
        "ImagesCount": 10
      }
    },
    "Minutes": {
      "Tens": {
        "X": 9,
        "Y": 176,
        "ImageIndex": 1,
        "ImagesCount": 10
      },
      "Ones": {
        "X": 61,
        "Y": 176,
        "ImageIndex": 1,
        "ImagesCount": 10
      }
    }
  },
  "Status": {
    "DoNotDisturb": {
      "Coordinates": {
        "X": 15,
        "Y": 176,
        "BoxWidth": 17,
        "Alignment": "Left",
        "Order": 1
      },
      "ImageIndexOn": 20
    },
    "Lock": {
      "Coordinates": {
        "X": 33,
        "Y": 176,
        "BoxWidth": 17,
        "Alignment": "Left",
        "Order": 1
      },
      "ImageIndexOn": 21
    },
    "Bluetooth": {
      "Coordinates": {
        "X": 3,
        "Y": 176,
        "BoxWidth": 12,
        "Alignment": "Left",
        "Order": 1
      },
      "ImageIndexOff": 19
    },
    "Battery": {
      "Icon": {
        "X": 84,
        "Y": 176,
        "ImageIndex": 11,
        "ImagesCount": 8
      }
    }
  }
}

[lumenvindex]

can anybody check my json

Looks OK. Maybe json isn't the problem?

[lvpokka]

Battery block missing first section in json, please check working one

[JonatanRek]

Battery block missing first section in json, please check working one

The battery block is is in status section last place where is should be ?
when packing to bin log is without error!

EDIT: i extract working one and structure is exactly the same
this: https://amazfitwatchfaces.com/mi-band-4/view/7053

[JonatanRek]

is somewhere available this editor for mi band ? https://amazfitwatchfaces.com/editor/wa ... Editor/?mi

[lumenvindex]

is exactly the same

Nope. It has BatteryConfig section.

Code: Select all

    "Battery": {
      "BatteryConfig": {
        "BoxWidth": 0,
        "Alignment": 0,
        "Order": 0
      },
      "Text": {
        "TopLeftX": 90,
        "TopLeftY": 20,
        "BottomRightX": 117,
        "BottomRightY": 31,
        "Alignment": "Center",
        "Spacing": 1,
        "ImageIndex": 11,
        "ImagesCount": 10
      },
      "Icon": {
        "X": 16,
        "Y": 2,
        "ImageIndex": 21,
        "ImagesCount": 9
      }
    }

Your JSON should have it too.

[Urimu]

[mention]lvpokka[/mention] [mention]lumenvindex[/mention]
Hi, I want to ask if you could help me with using the "StepsImageIndex": 62, how does it work or does it put the step icon before the step counter? And where do I put it in the json? (Do you guys have a woking json with it implemented?) Thank you!

EDIT; Nevermind got it wotking smh...

[lumenvindex]

StepsImageIndex must be a parameter of Activity-Steps, right next to Number subsection.

Mi Band will put the icon AFTER the number of steps if Activity-Steps-Number-Alignment is Right, TopRight, BottomRight or CenterRight (or a number equivalent of these values). In other cases it will put the icon BEFORE the number of steps.

[ViperAnaf]

Can someone explain to me why i cant create the bin from much smaller files size than 321kb?
total: 38.9 KB
size on disk: 144 KB
and yet when i try to create it it says its more than 321kb....

[lumenvindex]

Can someone explain to me why i cant create the bin from much smaller files size than 321kb?

Watchface binary has it's own weird picture format similar to BMP (+transparency). No matter how small are your PNGs.

[ViperAnaf]

Can someone explain to me why i cant create the bin from much smaller files size than 321kb?

Watchface binary has it's own weird picture format similar to BMP (+transparency). No matter how small are your PNGs.

how can i avoid passing the limit? is there a correlation between images with a lot of transparency and bigger end file?

[lumenvindex]

1. Cut off all unnecessary pixels from your images,
2. Use Palette mode to pack a watchface (don't forget about it's limitations about transparent images, use raw.cfg if needed),
2.1. Use less colors in each image.

Images with a lot of transparency might have some unnecessary pixels. But the transparency itself doesn't enlarge the watchface.

[ViperAnaf]

1. Cut off all unnecessary pixels from your images,
2. Use Palette mode to pack a watchface (don't forget about it's limitations about transparent images, use raw.cfg if needed),
2.1. Use less colors in each image.

Images with a lot of transparency might have some unnecessary pixels. But the transparency itself doesn't enlarge the watchface.

seems i just cant solve this problem - nvm

[mysiak]

Not sure if this is a known thing, but I tried to build a new WF with custom made images (by cutting a big photo). Preview in WF_builder tool was ok, but as soon as I built a WF, generated GIF and PNG were severely distorted, ruining whole WF (as if I used 400x800 pictures instead of 40x80 pixels). After several tries I figured out that my new pictures had DPI 11x11, while others which I was using before had DPI 96x96. As soon as I've changed the DPI to 96x96, everything got generated nicely. I don't consider it as a bug in MiBandWFTool, but maybe a warning raised during WF building would be nice.

[lvpokka]

yes there is problem with DPI, will be fixed in next build

[cowborgs]

Hello everyone,

I downloaded a MIBAND-4 theme,

I followed the steps shown with watchfaces, during the second compression step to have the modified .bin file, the message below is reported in the _packed.log file.

N.B: The error message is reported even if I do not make any changes to the uncompressed .bin.,even if I only decompress the bin file, and I recompress, or even if I change the images and the size of the whole folder does not exceed 321kb

error :

Fatal|[ERROR] Watchface is greater than 321kb, it will not be accepted by Mi Band 4, please reduce size! Current size:844kb.
Fatal|System.ArgumentException: [ERROR] Watchface is greater than 321kb, it will not be accepted by Mi Band 4, please reduce size! Current size:844kb.
à WatchFace.Program.PackWatchFace(String inputFileName)
à WatchFace.Program.Main(String[] args)

[mysiak]

I guess you're using RAW mode. Try to pack the WF with palette exe again. Quality of some WFs suffer with pure palette mode, in such case make a "raw.cfg" file in the same folder as the WF.json and put numbers of small images in there (small letters/numbers) - e.g. "11,12,13,14" and pack it with palette.exe. Explicitly defined images will use raw mode, the rest of them palette. You can achieve much smaller bin file size with almost the same quality.

[Maikeldevil]

Is there an option to edit priority of image displaying? I mean a layer priority like "z-index" in CSS. For example: if I have a weekday and date image in the same place, I want to change its z-index that one of it would show under or above the second image. This is required for the theme I'm creating so I'll be grateful for any advice.

Guess there is but not an easy one. Watchface.parser.dll of PaletteimageMode says:

using WatchFace.Parser.Attributes;
using WatchFace.Parser.Elements;
using WatchFace.Parser.Elements.Animation;
using WatchFace.Parser.Elements.BasicElements;

namespace WatchFace.Parser
{
public class WatchFace
{
[ParameterId(2)]
public Background Background { get; set; }

[ParameterId(3)]
public Time Time { get; set; }

[ParameterId(4)]
public Activity Activity { get; set; }

[ParameterId(5)]
public Date Date { get; set; }

[ParameterId(6)]
public Weather Weather { get; set; }

[ParameterId(7)]
public StepsProgress StepsProgress { get; set; }

[ParameterId(8)]
public Status Status { get; set; }

[ParameterId(9)]
public UnknownTest Unknown9 { get; set; }

[ParameterId(10)]
public AnalogDialFace AnalogDialFace { get; set; }

[ParameterId(11)]
public Other Other { get; set; }

[ParameterId(12)]
public Heart Heart { get; set; }

[ParameterId(13)]
public UnknownTest Unknown13 { get; set; }

[ParameterId(14)]
public UnknownTest Unknown14 { get; set; }
}
}
So time is first Parameter and will allways be behind other elements Dont know how to change these, i found it with Jetbrains dotPeek, but you cant edit in this program

[Maikeldevil]

I guess you're using RAW mode. Try to pack the WF with palette exe again. Quality of some WFs suffer with pure palette mode, in such case make a "raw.cfg" file in the same folder as the WF.json and put numbers of small images in there (small letters/numbers) - e.g. "11,12,13,14" and pack it with palette.exe. Explicitly defined images will use raw mode, the rest of them palette. You can achieve much smaller bin file size with almost the same quality.

I made the f1 faces and used a program named PNGQuant for this, this program reduce colors without seeing much difference but make them work in palettemode. It makes sure the image stays in 256 colors or less with minimal quality loss. It also makes the file size allmost 50% smaller!

More info:

https://pngquant.org/

[mysiak]

I guess you're using RAW mode. Try to pack the WF with palette exe again. Quality of some WFs suffer with pure palette mode, in such case make a "raw.cfg" file in the same folder as the WF.json and put numbers of small images in there (small letters/numbers) - e.g. "11,12,13,14" and pack it with palette.exe. Explicitly defined images will use raw mode, the rest of them palette. You can achieve much smaller bin file size with almost the same quality.

I made the f1 faces and used a program named PNGQuant for this, this program reduce colors without seeing much difference but make them work in palettemode. It makes sure the image stays in 256 colors or less with minimal quality loss. It also makes the file size allmost 50% smaller!

More info:

https://pngquant.org/

Thanks for the suggestion, but it didn't work. The result with WF palette mode is the same with or without using the PNGQuant first - small numbers/letters are very jagged (you can try it with this WF https://amazfitwatchfaces.com/mi-band-4/view/799 - pay attention to battery/steps/HR). Only (mixed) RAW mode produces smooth edges. Btw. source image file size is almost irrelevant, WF is using custom uncompressed image format.

[Maikeldevil]

Please give me a version that is unable to downsize, i'll fix it my way. It just needs some tricks that are hard to explain. You need to put all images in 1 pgn and run it in pngquant. (Drag file on .exe) then all images are reduced without quality loss with max 256 colors and you can separate them in 0001 0002 etc. PNGQUANT does not make the image ugly so its not the same as pallette mode!