1# Power-off Charging Animation Customization 2 3## Overview 4 5### Introduction 6 7By default, the OpenHarmony provides the animation that displays information such as the battery level during power-off charging. However, some vendors may expect to use custom power-off charging animations for their products. To address this requirement, OpenHarmony provides the function of customizing power-off charging animations. 8 9### Constraints 10 11The configuration path for battery level customization is subject to the [configuration policy](https://gitee.com/openharmony/customization_config_policy). In this development guide, `/vendor` is used as an example of the configuration path. During actual development, you need to modify the customization path based on the product configuration policy. 12 13## How to Develop 14 15### Setting Up the Environment 16 17**Hardware requirements:** 18 19Development board running the standard system, for example, the DAYU200 or Hi3516D V300 open source suite. 20 21**Environment requirements:** 22 23For details about the requirements on the Linux environment, see [Quick Start](../quick-start/quickstart-overview.md). 24 25### Getting Started with Development 26 27The following uses [DAYU200](https://gitee.com/openharmony/vendor_hihope/tree/master/rk3568) as an example to illustrate charging animation customization. 28 291. Create the `animation` folder in the product directory [/vendor/hihope/rk3568](https://gitee.com/openharmony/vendor_hihope/tree/master/rk3568). 30 312. Create a target folder by referring to the [default folder of power-off charging animation configuration](https://gitee.com/openharmony/powermgr_battery_manager/tree/master/charger/sa_profile), and install it in `//vendor/hihope/rk3568/animation`. The content is as follows: 32 33 ```text 34 profile 35 ├── BUILD.gn 36 ├── animation.json 37 ``` 38 393. Create the `resources` folder by referring to [default folder of power-off charging animation image resources](https://gitee.com/openharmony/powermgr_battery_manager/tree/master/charger/resources) to store the images that form the animation, and install the folder in `//vendor/hihope/rk3568/animation`. The content is as follows: 40 41 ```text 42 animation 43 ├── resources 44 ├── profile 45 ``` 46 474. Write the `BUILD.gn` file by referring to the `BUILD.gn` in the default folder of power-off charging animation configuration, and put it to the `//vendor/hihope/rk3568/animation/resource` directory. The configuration is as follows: 48 ```shell 49 import("//build/ohos.gni") 50 51 ohos_prebuilt_etc("resources_config0") { 52 source = "loop00000.png" # Image resource 53 relative_install_dir = "poweroff_charger_animation/resources" 54 install_images = [ chipset_base_dir ] # Required configuration for installing the resources folder in the vendor directory. 55 part_name = "product_rk3568" 56 } 57 585. Write the custom `animation.json` file by referring to the `animation.json` file in the default folder of power-off charging animation image resources. For example: 59 60 ```json 61 { 62 "id": "Charger", 63 "screenWidth": 720, 64 "screenHeight": 1280, 65 "dir": "/vendor/etc/charger/resources", 66 "bgColor": "#000000ff", 67 "subpages": [ 68 { 69 "id": "Animation", 70 "coms": [ 71 "Charging_Animation_Image", 72 "Charging_Percent_Label" 73 ], 74 "bgColor": "#000000ff" 75 }, 76 { 77 "id": "Lackpower_Charging_Prompt", 78 "coms": [ 79 "LackPower_Charging_Label" 80 ], 81 "bgColor": "#000000ff" 82 }, 83 { 84 "id": "Lackpower_Not_Charging_Prompt", 85 "coms": [ 86 "LackPower_Not_Charging_Label" 87 ], 88 "bgColor": "#000000ff" 89 } 90 ], 91 "default": { 92 "Common": { 93 "visible": false 94 }, 95 "UILabel": { 96 "bgColor": "#00000000", 97 "fontColor": "#ffffffe6", 98 "align": "center" 99 }, 100 "UIImageView": { 101 "imgCnt": 1, 102 "updInterval": 0, 103 "filePrefix": "" 104 } 105 }, 106 "coms": [ 107 { 108 "type": "UIImageView", 109 "id": "Charging_Animation_Image", 110 "x": 180, 111 "y": 410, 112 "w": 400, 113 "h": 400, 114 "resPath": "/vendor/etc/charger/resources/", 115 "imgCnt": 62, 116 "updInterval": 60, 117 "filePrefix": "loop" 118 }, 119 { 120 "type": "UILabel", 121 "id": "Charging_Percent_Label", 122 "text": "", 123 "x": 365, 124 "y": 580, 125 "w": 65, 126 "h": 43, 127 "fontSize": 32 128 }, 129 { 130 "type": "UILabel", 131 "id": "LackPower_Charging_Label", 132 "text": "Low battery level", 133 "x": 229, 134 "y": 1037, 135 "w": 250, 136 "h": 45, 137 "fontSize": 42, 138 "fontColor": "#ff0000ff" 139 }, 140 { 141 "type": "UILabel", 142 "id": "LackPower_Not_Charging_Label", 143 "text": "Low battery level. Please connect the power supply.", 144 "x": 110, 145 "y": 1037, 146 "w": 500, 147 "h": 45, 148 "fontSize": 42, 149 "fontColor": "#ff0000ff" 150 } 151 ] 152 } 153 ``` 154 155 **Table 1** Description of the power-off charging animation configuration 156 | Item| Description| 157 | -------- | -------- | 158 | id | Unique ID of the charging screen.| 159 | screenWidth | Width of the charging screen, in pixels.| 160 | screenHeight | Height of the charging screen, in pixels.| 161 | dir | Resource path.| 162 | bgColor | Background color of the charging screen.| 163 | subpages | Subpage of the charging screen.| 164 | coms | All components on the charging screen.| 165 | visible | Whether elements are visible.| 166 | text | Text content of a component.| 167 | x | X coordinate of the component.| 168 | y | Y coordinate of the component.| 169 | w | Component width, in pixels.| 170 | h | Component height, in pixels.| 171 | fontSize | Font size of the component.| 172 | fontColor | Font color of the text.| 173 | align | Text alignment mode.| 174 | imgCnt | Number of images.| 175 | updInterval | Image updating interval, in ms.| 176 | filePrefix | Prefix of an image file name.| 177 | type | Component type.| 178 | resPath | Resource file path of the component.| 179 180 181 1826. Write the `BUILD.gn` file by referring to the `BUILD.gn` in the default folder of power-off charging animation configuration to pack the `animation_config.json` file to the `//vendor/etc/charger` directory. The configuration is as follows: 183 184 ```shell 185 import("//build/ohos.gni") 186 187 ohos_prebuilt_etc("animation_config") { 188 source = "animation.json" # Reference build/ohos.gni. 189 relative_install_dir = "animation/resources" 190 install_images = [ chipset_base_dir ] # Required configuration for installing the battery_config.json file in the vendor directory. 191 part_name = "product_rk3568" # Set part_name to product_rk3568 for subsequent build. 192 } 193 ``` 194 1957. Add the build target to `module_list` in [ohos.build](https://gitee.com/openharmony/vendor_hihope/blob/master/rk3568/ohos.build) in the `/vendor/hihope/rk3568` directory. For example: 196 197 ```json 198 { 199 "parts": { 200 "product_rk3568": { 201 "module_list": [ 202 "//vendor/hihope/rk3568/default_app_config:default_app_config", 203 "//vendor/hihope/rk3568/image_conf:custom_image_conf", 204 "//vendor/hihope/rk3568/preinstall-config:preinstall-config", 205 "//vendor/hihope/rk3568/resourceschedule:resourceschedule", 206 "//vendor/hihope/rk3568/etc:product_etc_conf", 207 "//vendor/hihope/rk3568/battery/profile:battery_config", 208 "//vendor/hihope/rk3568/animation/profile:animation_config", # Add the configuration for building of animation_config. 209 "//vendor/hihope/rk3568/animation/resource/resources_config" # Add the configuration for building of image resources. 210 ] 211 } 212 }, 213 "subsystem": "product_hihope" 214 } 215 ``` 216 In the preceding code, `//vendor/hihope/rk3568/animation/` is the folder path, `profile` is the folder name, and `animation_config` is the build target. 217 2188. Build the customized version by referring to [Quick Start](../quick-start/quickstart-overview.md). 219 220 ```shell 221 ./build.sh --product-name rk3568 --ccache 222 ``` 223 2249. Burn the customized version to the DAYU200 development board. 225 226### Debugging and Verification 227 2281. Modify the code configuration. 229 230 Code path: `base/startup/init/services/init/init_config.c` 231 232 Function: `ReadConfig` 233 ``` 234 After modification: 235 void ReadConfig(void) 236 { 237 // parse cfg 238 char buffer[32] = {0}; // 32 reason max leb 239 uint32_t len = sizeof(buffer); 240 SystemReadParam("ohos.boot.reboot_reason", buffer, &len); 241 INIT_LOGV("ohos.boot.reboot_reason %s", buffer); 242 ParseInitCfg(INIT_CONFIGURATION_FILE, NULL); // New code 243 ReadFileInDir(OTHER_CHARGE_PATH, ".cfg", ParseInitCfg, NULL); // New code 244 if (strcmp(buffer, "poweroff_charge") == 0) { 245 ParseInitCfg(INIT_CONFIGURATION_FILE, NULL); 246 ReadFileInDir(OTHER_CHARGE_PATH, ".cfg", ParseInitCfg, NULL); 247 } else if (InUpdaterMode() == 0) { 248 ParseInitCfg(INIT_CONFIGURATION_FILE, NULL); 249 ParseInitCfgByPriority(); 250 } else { 251 ReadFileInDir("/etc", ".cfg", ParseInitCfg, NULL); 252 } 253 } 254 ``` 255 2562. Use the hdc tool to run the following commands to force the development board to enter the power-off charging state. 257 ``` 258 hdc shell 259 reboot charger 260 ``` 261 262  263 2643. Go to the custom battery level configuration directory. The path of DAYU200 is used as an example. 265 ``` 266 cd /data/service/el0/battery/battery 267 ``` 268 2694. Change the battery power, and observe the number change on the charging animation. 270 ``` 271 cat capacity 272 ``` 273 Change the current battery power to **3**. 274 ``` 275 echo 3 > capacity 276 ``` 277  278 2795. Change the charging status when the battery level is extremely low (1% by default). This can trigger the mapping animation or device shutdown. 280 281 1. Go to the custom battery level configuration directory. 282 ``` 283 cd /data/service/el0/battery/battery 284 ``` 285 ``` 286 cat capacity 287 ``` 288 2. Change the current battery power to **1**. 289 ``` 290 echo 1 > capacity 291 ``` 292 3. Check the charging status. 293 ``` 294 cat status 295 ``` 296 The current status is **Charging**. 297 298  299 300 4. Change to the **Not charging** state. 301 ``` 302 echo Not charging > status 303 ``` 304  305 306 5. Change to the **Discharging** state. The system enters the power-off state. 307 ``` 308 echo Discharging > status 309 ``` 310 3116. Test the power-off animation customization function by changing related images. The procedure is the same as that described above. 312 313 1. Initial state 314 315  316 317 2. 3% battery power 318 319  320 321 3. 1% battery power, **Charging** state 322 323  324 325 4. 1% battery power, **Not charging** state 326 327  328 329 5. 1% battery power, **Discharging** state 330 331 The device is powered off. 332 333 334 335## Reference 336During development, you can refer to the [default power-off animation configuration](https://gitee.com/openharmony/powermgr_battery_manager/blob/master/charger/sa_profile/animation.json), as shown below: 337 338```json 339 { 340 "id": "Charger", 341 "screenWidth": 720, 342 "screenHeight": 1280, 343 "dir": "/vendor/etc/charger/resources", 344 "bgColor": "#000000ff", 345 "subpages": [ 346 { 347 "id": "Animation", 348 "coms": [ 349 "Charging_Animation_Image", 350 "Charging_Percent_Label" 351 ], 352 "bgColor": "#000000ff" 353 }, 354 { 355 "id": "Lackpower_Charging_Prompt", 356 "coms": [ 357 "LackPower_Charging_Label" 358 ], 359 "bgColor": "#000000ff" 360 }, 361 { 362 "id": "Lackpower_Not_Charging_Prompt", 363 "coms": [ 364 "LackPower_Not_Charging_Label" 365 ], 366 "bgColor": "#000000ff" 367 } 368 ], 369 "default": { 370 "Common": { 371 "visible": false 372 }, 373 "UILabel": { 374 "bgColor": "#00000000", 375 "fontColor": "#ffffffe6", 376 "align": "center" 377 }, 378 "UIImageView": { 379 "imgCnt": 1, 380 "updInterval": 0, 381 "filePrefix": "" 382 } 383 }, 384 "coms": [ 385 { 386 "type": "UIImageView", 387 "id": "Charging_Animation_Image", 388 "x": 180, 389 "y": 410, 390 "w": 400, 391 "h": 400, 392 "resPath": "/vendor/etc/charger/resources/", 393 "imgCnt": 62, 394 "updInterval": 60, 395 "filePrefix": "loop" 396 }, 397 { 398 "type": "UILabel", 399 "id": "Charging_Percent_Label", 400 "text": "", 401 "x": 365, 402 "y": 580, 403 "w": 65, 404 "h": 43, 405 "fontSize": 32 406 }, 407 { 408 "type": "UILabel", 409 "id": "LackPower_Charging_Label", 410 "text": "Low battery level", 411 "x": 229, 412 "y": 1037, 413 "w": 250, 414 "h": 45, 415 "fontSize": 42, 416 "fontColor": "#ff0000ff" 417 }, 418 { 419 "type": "UILabel", 420 "id": "LackPower_Not_Charging_Label", 421 "text": "Low battery level. Please connect the power supply.", 422 "x": 110, 423 "y": 1037, 424 "w": 500, 425 "h": 45, 426 "fontSize": 42, 427 "fontColor": "#ff0000ff" 428 } 429 ] 430 } 431``` 432 433Packing path: `/system/etc/charger/resource` 434
