diff --git a/README.en.md b/README.en.md index b19ff52ca611100fb0fe99c59ce57507644f3f32..7fc74a5ddb317a2bd171ee8a4b6d6cb318d87841 100644 --- a/README.en.md +++ b/README.en.md @@ -1,36 +1,157 @@ -# UtilizeHWCEfficiently +# Efficient Use of HWC-based Low-Power Design -#### Description -{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**} +### Introduction +Hardware Composer (HWC), a hardware-assisted system, delivers higher processing efficiency and lower power consumption than the general-purpose computing unit in the multi-layer overlay scenario. However, its hardware capabilities can be fully utilized only when certain conditions are met. This sample demonstrates how to adjust the visual effect design by removing the blur effect or modifying the transparency of the self-rendering layer through three typical scenarios of multi-layer overlay between the Video or Web component and the UI, to expand the effective scope of HWC for lower power consumption in application scenarios. -#### Software Architecture -Software architecture description +### Preview +| Video Component with Blur Overlay | Video Component without Blur Overlay | Web Component with Blur Overlay | Web Component without Blur Overlay | Video Layer with Transparency | Opaque Video Layer | +|--------------------------------------------------|--------------------------------------------|------------------------------------------------|---------------------------------------------|-------------------------------------------------|--------------------------------------------| +| ![](./screenshots/device/video_with_blur.en.png) | ![](./screenshots/device/normal_video.en.png) | ![](./screenshots/device/web_with_blur.en.png) | ![](./screenshots/device/normal_web.en.png) | ![](./screenshots/device/transparent_video.gif) | ![](./screenshots/device/opaque_video.gif) | -#### Installation +### How to Use +1. Click the Video component with blur overlay button to enter the scenario page, the video is automatically played. +2. Click the Video component without blur overlay button to enter the scenario page, the video is automatically played. +3. Click the Web component with blur overlay button to enter the scenario page, the Web page can be swiped up or down. +4. Click the Web component without blur overlay button to enter the scenario page, the Web page can be swiped up or down. +5. Click the video layer with transparency button to enter the scenario page, the video is automatically played. +6. Click the opaque video layer button to enter the scenario page, the video is automatically played. -1. xxxx -2. xxxx -3. xxxx +### Project Directory +``` +entry/src/main/ets +├── entryability +│ ├── EntryAbility.ets // Entry ability lifecycle callbacks +│ └── EntryBackupAbility.ets // Application data backup and restore abilities +├── pages +│ ├── Index.ets // View layer - main page +│ ├── VideoWithBlur.ets // View layer - Video component with blur overlay +│ ├── NormalVideo.ets // View layer - Video component without blur overlay +│ ├── WebWithBlur.ets // View layer - Web component with blur overlay +│ ├── NormalWeb.ets // View layer - Web component without blur overlay +│ ├── TransparentVideo.ets // View layer - video layer with transparency +│ └── OpaqueVideo.ets // View layer - opaque video layer +└── entry/src/main/resources // Application static resources +``` -#### Instructions +### How to Implement -1. xxxx -2. xxxx -3. xxxx +**Video Component with Blur Overlay：** -#### Contribution +Use backdropBlur to set the background blur effect for the Image component above the Video component. The following is the sample code： -1. Fork the repository -2. Create Feat_xxx branch -3. Commit your code -4. Create Pull Request +```typescript +Image($r('app.media.chevron_left')) + .padding(12) + .width(40) + .height(40) + .borderRadius('50%') + .fillColor('rgba(255, 255, 255, 0.9)') + .backgroundColor('rgba(0, 0, 0, 0.1)') + .backdropBlur(40) // Set this component background blur + .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR) + .onClick(() => { + this.pathStack.pop(); + }) +``` +**Video Component without Blur Overlay：** -#### Gitee Feature +Do not set the blur effect for the Image component above the Video component. The following is the sample code： +```typescript +Image($r('app.media.chevron_left')) + .padding(12) + .width(40) + .height(40) + .borderRadius('50%') + .fillColor('rgba(255, 255, 255, 0.9)') + .backgroundColor('rgba(0, 0, 0, 0.1)') + .onClick(() => { + this.pathStack.pop(); + }) +``` -1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md -2. Gitee blog [blog.gitee.com](https://blog.gitee.com) -3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) -4. The most valuable open source project [GVP](https://gitee.com/gvp) -5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) -6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) +**Web Component with Blur Overlay：** + +Use TabContent of the Tabs component to wrap the Web component. Set barOverlap of the Tabs component to true, so that the bottom TabBar is blurred and overlaid on TabContent. The following is the sample code： +```typescript +Tabs({ barPosition: BarPosition.End, index: 0, controller: this.controller }) { + TabContent() { + Web({ src: $rawfile('test.html'), controller: this.webController }) + } + // ... +} +.height('100%') +.width('100%') +.barOverlap(true) // Set TabBar to be blurred and overlay on top of TabContent +.barBackgroundColor('rgba(241, 243, 245, 0.3)') +``` + +**Web Component without Blur Overlay：** + +Use TabContent of the Tabs component to wrap the Web component. Set the barOverlap property of the Tabs component to true to overlay the bottom TabBar on TabContent, and change the value of barBackgroundBlurStyle to BLurStyle.MONE to remove the blur effect of TabBar. The following is the sample code： +```typescript +Tabs({ barPosition: BarPosition.End, index: 0, controller: this.controller }) { + TabContent() { + Web({ src: $rawfile('test.html'), controller: this.webController }) + } + // ... +} +.height('100%') +.width('100%') +.barOverlap(true) // Set TabBar to be blurred and overlay on top of TabContent +.barBackgroundBlurStyle(BlurStyle.NONE) // Set TabBar to be not blurry +.barBackgroundColor('rgba(241, 243, 245, 1)') +``` + +**Video Layer with Transparency：** + +Overlay the Video component on the Image component and set opacity to 0.7, allowing partial visibility of the underlying Image component through the semitransparent Video overlay. The following is the sample code： +```typescript +Video({ + src: $r('app.media.test_video') +}) + .height('100%') + .width('100%') + .loop(true) + .autoPlay(true) + .controls(false) + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + middle: { anchor: '__container__', align: HorizontalAlign.Center } + }) + .opacity(0.7) // Set the transparency of the video layer +``` + +**Opaque Video Layer：** + +Overlay the Video component on the Image component and set opacity to 1 to make the video completely opaque. The following is the sample code： +```typescript +Video({ + src: $r('app.media.test_video') +}) + .height('100%') + .width('100%') + .loop(true) + .autoPlay(true) + .controls(false) + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + middle: { anchor: '__container__', align: HorizontalAlign.Center } + }) + .opacity(1) // Set the video layer to be fully opaque +``` + +### Required Permissions + +N/A + +### Dependencies + +N/A + +### Constraints + +1. This sample is only supported on Huawei phones with standard systems. +2. The HarmonyOS version must be HarmonyOS 5.0.0 Release or later. +3. The DevEco Studio version must be DevEco Studio 5.0.0 Release or later. +4. The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release SDK or later. diff --git a/README.md b/README.md index 03c54442ae06d8f11567d2a3d037127d2d368de6..2056a67367aaccd416373485530acd635e5e272c 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Hardware Composer（下文简称HWC）专用硬件辅助系统相对于通用计 ### 效果预览 | Video组件叠加模糊控件 | Video组件上方控件无模糊 | Web组件叠加模糊控件 | Web组件上方控件无模糊 | 视频图层设置透明度 | 视频图层不透明 | |-----------------------------------------------|--------------------------------------------|---------------------------------------------|------------------------------------------|-------------------------------------------------|--------------------------------------------| -| ![](./screenshots/device/video_with_blur.gif) | ![](./screenshots/device/normal_video.gif) | ![](./screenshots/device/web_with_blur.gif) | ![](./screenshots/device/normal_web.gif) | ![](./screenshots/device/transparent_video.gif) | ![](./screenshots/device/opaque_video.gif) | +| ![](./screenshots/device/video_with_blur.gif) | ![](./screenshots/device/normal_video.gif) | ![](./screenshots/device/web_with_blur.png) | ![](./screenshots/device/normal_web.png) | ![](./screenshots/device/transparent_video.gif) | ![](./screenshots/device/opaque_video.gif) | ### 使用说明 1. 点击Video组件叠加模糊控件按钮进入场景页面，视频自动播放。 diff --git a/entry/src/main/resources/rawfile/web_image.png b/entry/src/main/resources/rawfile/web_image.png index 00ea3f81977bc829d31fd0b478c087cece3b6f6a..46bdd34fe838f53ef44098a1c291af775f89da3e 100644 Binary files a/entry/src/main/resources/rawfile/web_image.png and b/entry/src/main/resources/rawfile/web_image.png differ diff --git a/entry/src/main/resources/rawfile/web_image_en.png b/entry/src/main/resources/rawfile/web_image_en.png new file mode 100644 index 0000000000000000000000000000000000000000..f75359bc914098ad8ea352059fbce4702d15830e Binary files /dev/null and b/entry/src/main/resources/rawfile/web_image_en.png differ diff --git a/screenshots/device/normal_video.en.png b/screenshots/device/normal_video.en.png new file mode 100644 index 0000000000000000000000000000000000000000..ce9145f5d8ace94268eb9c625ed0a18b9cafece8 Binary files /dev/null and b/screenshots/device/normal_video.en.png differ diff --git a/screenshots/device/normal_web.en.png b/screenshots/device/normal_web.en.png new file mode 100644 index 0000000000000000000000000000000000000000..b43ae7b30fb2be196e99b35dbe472933f3e93a59 Binary files /dev/null and b/screenshots/device/normal_web.en.png differ diff --git a/screenshots/device/normal_web.gif b/screenshots/device/normal_web.gif deleted file mode 100644 index b6d10c48193b043bcfe27d25a7bd00c1515e5840..0000000000000000000000000000000000000000 Binary files a/screenshots/device/normal_web.gif and /dev/null differ diff --git a/screenshots/device/normal_web.png b/screenshots/device/normal_web.png new file mode 100644 index 0000000000000000000000000000000000000000..b3223678040d5f19380215eb0a0e053f88e5f36b Binary files /dev/null and b/screenshots/device/normal_web.png differ diff --git a/screenshots/device/video_with_blur.en.png b/screenshots/device/video_with_blur.en.png new file mode 100644 index 0000000000000000000000000000000000000000..543cc6aa0c61ecf3fd61a143fff160bf4c539903 Binary files /dev/null and b/screenshots/device/video_with_blur.en.png differ diff --git a/screenshots/device/web_with_blur.en.png b/screenshots/device/web_with_blur.en.png new file mode 100644 index 0000000000000000000000000000000000000000..b7c1d965646d876f997e0c2bca6f1d608b0a0a92 Binary files /dev/null and b/screenshots/device/web_with_blur.en.png differ diff --git a/screenshots/device/web_with_blur.gif b/screenshots/device/web_with_blur.gif deleted file mode 100644 index 0032463881a407fe27ba1687ec1ecbd6b1d144d3..0000000000000000000000000000000000000000 Binary files a/screenshots/device/web_with_blur.gif and /dev/null differ diff --git a/screenshots/device/web_with_blur.png b/screenshots/device/web_with_blur.png new file mode 100644 index 0000000000000000000000000000000000000000..ce997dd1eeb3f523c974c602641d107cdd4f309a Binary files /dev/null and b/screenshots/device/web_with_blur.png differ