Preface: Due to personal reasons and the feeling that it was unnecessary before (lazy ) , I did not write it for a while ( ), so I made an article because many people needed it.
Note: This tutorial only uses Xiaomi Mi Band 8 as an example. Other models supported by this tool can also be used for reference. The content may be incomplete and will be updated later.
Thanks to @huangtao1189 for pointing out an animation error
A sample dial is provided for your reference.
1. Download and configuration: (If you have already downloaded, you can skip it)
1.1😀ownload
First click this link to download, or go to the top of the corresponding section to download. After decompression is completed, you can get this file 浏览附件19077
1.2:Configuring 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 new project files and place image resources
2.1: Create new project file
The initial opening is like this (it 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 will pop up. After filling in the information, select Xiaomi Mi Band 8 as the bracelet type to confirm.
浏览附件19082
Then the following content was generated in the folder:
浏览附件19083
images: stores picture resources (png); only place pictures, 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 used for production and the software will display it. (No need to create folders in it)
3. Production-Main Body
3.1: Basemap (background)
Click "Toolbox-Basic Controls-Picture", draw any one, and change "x, y" to "0, 0" in the properties 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-Number Picture List" column (drag numbers 0~symbols), and then Controls can be displayed. Then copy this control and paste a total of 4 controls (why 4 will be explained later).
PS: For 8Pro, please directly use the data source with two digits of hours and minutes, because it is different from the 8 mechanism. The gray words at the bottom are written 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. 4 sets of pictures must be copied corresponding to 4 controls. ! ! !
Modify the corresponding picture of the pasted control, add the data sources as "hour-tens", "hour-units", "minutes-tens", "minutes-units", and then modify the xy position. Can.
The effect is as shown in the figure
浏览附件19087浏览附件19089
PS: Why not just use "hours" and "minutes"? The reason is because this data source is used for the pointer dial, and it is not simply 0 to 24, because when applied to the pointer, the hour will move step by step according to the minute, not directly from 11 to 12. This value probably has a decimal point, so after 30 minutes, 23.6 is displayed on the digital component and becomes 10% 24. (Written to 8)
3.3😀ate
Just like time, just change the data source to date and adjust the number of digits to 2 digits. 浏览附件19090
3.4:week
Click "Toolbox-Basic Controls-Picture List", draw a suitable size, adjust the default index value to 0, and 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 Monday to Saturday are 1 to 6 in sequence. After filling in, set the data source to "week".
浏览附件19091
3.5: Step count, heart rate, calories, battery
This is the same as the time setting. You only need to 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 0 in front of the number, you can turn on high-bit blanking.
浏览附件19092
3.6: Power cut chart
Click "Toolbox-Basic Controls-Picture List", draw a suitable size, adjust the default index value to 10, and the quantity to 10. Drag the pictures from "Picture Browser" to the "Properties-Picture List-Name" column. ;Then set the index value. For example, if you want to switch the first picture when the power is XX, just fill in XX for the index value, and then fill in it in sequence.
浏览附件19093
3.7: High level blanking
If you want the number to display 1 instead of 001, just turn on "Properties-High Bit Blanking".
浏览附件19094
3.8: Pictures
Click "Toolbox-Basic Controls-Picture", draw a suitable size, and then drag the picture from "Picture Browser" to the "Properties-Picture" column.
Note: If this picture 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 means closed, 1 means open, follow this idea and select Corresponding data source.
浏览附件19096
3.10: Animation (not supported by Xiaomi Mi Band 8 currently)
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 fill in the index starting from 0.
浏览附件19111浏览附件19112
3.11: Jumpable components (not supported by Xiaomi Mi Band 8 and 8Pro)
Please update the version to version V30.
Click "Toolbox-Basic Controls-Picture" and draw a suitable size; set the name to btn_[XXXXX]. If the picture has a transparent background, add the suffix _RGBA[/ICODE ] (such as [ICODE]btn_[XXXXX]_RGBA).
If I want to set the jump to heart rate, then replace XXXXX in btn_[XXXXX]_RGBA with hrm, the effect is like btn_ [hrm]_RGBA.
Other component IDs are as follows:
4. Production-AOD
It is currently known that Xiaomi Mi Band 8 must create 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 creation is completed, there is no need to compile, just save it directly and return to the main dial project file.
浏览附件19137
5. Compile the dial
5.1: Improve the dial information
Click on the blank area, fill in the name and select a preview image.
Note: The preview image of Mihuan 8 needs to be 122*310, and the preview image of 7Pro must be 220*358; and the rounded corners must be cut.
浏览附件19097
5.2: Compile the dial
Click the icon in the upper left corner to start compilation.
浏览附件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
common problem:
Q: The picture background is not transparent
A: Add _RGBA to the name of this control.
Q: Pictures are garbled and packaging always fails.
A: Please check whether the pictures in this picture list are of the same size! ! ! Picture sizes in the same picture collection are different, which can cause garbled characters at best, or lead to after-sales mode! ! !
Q:Other questions
A: Will be added later.
If you have any questions, please reply to the post. I will reply when I have time.
米坛社区 2024 下半年社区版主招募中🔥
