Preface: Due to personal reasons, and because I felt it was unnecessary ( laziness ) , I left it unfinished for a while ( , but since many people needed it, I wrote one.
Note: This tutorial only takes Xiaomi Mi Band 8 as an example. Other models supported by this tool can also be used as a reference. Some content may be incomplete and will be updated later.
Thanks to @huangtao1189 for pointing out an animation error
Here is a sample dial for your reference.
1. Download and configure: (skip if already downloaded)
1.1: Download
First click this link to download, or go to the corresponding section to pin the download, and you can get this file after decompression.浏览附件19077
1.2: Configure the application
Right-click "EasyFace.exe", click Properties, find Compatibility at the top, check "Run this program as an administrator", and then click "Apply".
浏览附件19078
2. Create a new project file and place image resources
2.1: Create a new project file
The initial opening looks like this (may be different from yours, I adjusted the position),浏览附件19079
At this time, click the first icon in the upper left corner to create a new project.
浏览附件19081
A box pops up. Fill in the information and select Xiaomi Mi Band 8 as the bracelet type to confirm.
浏览附件19082
Then the following contents are generated in the folder:
浏览附件19083
images: Store image resources (png); only need to place images, please do not put other files (such as psd, txt), etc., and do not create folders in it.
output: Output folder, used to store output files.
Example.fprj: Project file, used to save the project.
2.2: Import image resources
Just put the png file you want to create, and the software will display it. (No need to create a folder inside)
3. Production-Main Body
3.1: Basemap (background)
Click "Toolbox-Basic Controls-Picture", draw one at random, and change "x, y" to "0, 0" in the property window on the left, as shown in the figure.
浏览附件19084
Then drag the picture from "Picture Browser" to the "Properties-Picture" column.
浏览附件19086
3.2: Time
Click "Toolbox-Basic Controls-General Digital Display", draw a suitable size, drag the picture from "Picture Browser" to the "Properties-Digital Picture List" column (drag the numbers 0 to symbols), and then the control will be displayed. Then copy this control and paste a total of 4 controls (why 4 will be explained later).
PS: For 8Pro, please use the data source of hours and minutes directly, because it is different from the mechanism of 8. The gray text below is for 8 users.
!!! Note that each individual control (such as picture list, number list) can only use one set of pictures and cannot be reused. Four sets of pictures must be copied for four controls. !!!
Modify the corresponding pictures of the pasted controls, add data sources as "Hours - Tens", "Hours - Units", "Minutes - Tens", "Minutes - Units" in sequence, and then modify the xy position.
The effect is as shown
浏览附件19087浏览附件19089
PS: Why not use "hours" and "minutes" directly? The reason is that this data source is used for the pointer dial, not simply 0 to 24, because when applied to the pointer, the hour will move little by little according to the minute, not directly from 11 to 12. This value probably has a decimal point, so when it is over 30 minutes, 23.6 and then displayed on the digital component will be rounded to 24. (Written for 8)
3.3: Date
Just like time, just change the data source to date and adjust the number of digits to 2.浏览附件19090
3.4: Week
Click "Toolbox-Basic Controls-Picture List", draw a suitable size, adjust the default index value to 0, the quantity to 7, drag the picture from "Picture Browser" to the "Properties-Picture List-Name" column; then set the index value, the index value corresponding to Sunday is 0, and the index value corresponding to Monday to Saturday is 1 to 6. After filling in, set the data source to "Week".
浏览附件19091
3.5: Steps, heart rate, calories, battery life
This is the same as the time setting, just change the data source to the corresponding one, change the number of digits, and adjust the details as needed.
Note: If you do not want to display the leading 0 in the number, you can turn on high-bit blanking.
浏览附件19092
3.6: Power Cutting
Click "Toolbox-Basic Controls-Picture List", draw a suitable size, adjust the default index value to 10, the quantity to 10, drag the pictures from "Picture Browser" to the "Properties-Picture List-Name" column in turn; then set the index value. For example, if you want the first picture to switch when the battery level is XX, fill in XX for the index value, and then fill in the values in turn.
浏览附件19093
3.7: High-bit blanking
If you want the number to display 1 instead of 001, just turn on "Properties-High Bit Blanking".
浏览附件19094
3.8: Images
Click "Toolbox-Basic Controls-Picture", draw a suitable size, and then drag the picture from the "Picture Browser" to the "Properties-Picture" column.
Note: If this image is transparent, please fill in _RGBA in the control name.
浏览附件19095
3.9: Bluetooth, Do Not Disturb, Lock
Click "Toolbox-Basic Controls-Picture List", draw a suitable size, adjust the default index value to 0, and the quantity to 2; then fill in the index value, 0 represents closed, 1 represents open, follow this idea to make it, and select the corresponding data source.
浏览附件19096
3.10: Animation (not currently supported by Xiaomi Mi Band 8)
Click "Toolbox-Basic Controls-Picture List", draw a suitable size, and then name it anim_[xx@yy]
If you use an image with a transparent background, add _RGBA to the name suffix and start filling in the index from 0.
浏览附件19111浏览附件19112
3.11: Jumpable components (not supported by Xiaomi Mi Band 8 and 8Pro)
Please update the version to V30.
Click "Toolbox-Basic Controls-Picture", draw a picture of appropriate size; set the name to btn_[XXXXX], if the picture has a transparent background, add the suffix _RGBA (such as btn_[XXXXX]_RGBA).
If I want to set it to jump to heart rate, then replace XXXXX in btn_[XXXXX]_RGBA with hrm, and the effect will be like btn_[hrm]_RGBA.
Other component IDs are as follows:
4. Production - AOD
It is currently known that Xiaomi Mi Band 8 must have AOD, otherwise turning on AOD will switch to the system default watch face
Create a new dial, name it AOD, and save it in the same directory as the project file.
The subsequent production method is the same as the main body of the dial.
浏览附件19135
After the production is completed, there is no need to compile, just save it and return to the main project file of the dial.
浏览附件19137
5. Compile the watch face
5.1: Improve the dial information
Click in the blank area to fill in the name and select the preview image.
Note: The preview image of Mihuan 8 needs to be 122*310, and that of 7Pro needs to be 220*358; and the corners must be rounded.
浏览附件19097
5.2: Compile the watch face
Click the icon in the upper left corner to start compiling.
浏览附件19099
If these two items are displayed, it means the compilation is successful
浏览附件19100
Output to \example\example\output
浏览附件19102
The suffix .face is a compiled product and can be directly flashed
Finish
FAQ:
Q: The image background is not transparent
A: Add _RGBA to the control name.
Q: Pictures are garbled and packaging always fails
A: Please check whether the pictures in this picture list are of the same size!!! If the pictures in the same picture collection have different sizes, the pictures may be garbled at best, or even enter the after-sales mode at worst!!!
Q: Other questions
A: To be supplemented later.
If you have any questions, please reply to the post and I will reply when I have time.
米坛社区 2024 下半年社区版主招募中🔥
