How to implement an eye protection mode that supports sliding to adjust the intensity of eye protection?

#harmonyos #arkts #eyeprotectionmode #canvasfilter

Read the original article：How to implement an eye protection mode that supports sliding to adjust the intensity of eye protection?

Requirement Description

In most scenarios, applications need to design their own eye protection mode. Is there currently a method to implement the eye protection feature?

Background Knowledge

ArkUI supports setting background colors using ARGB strings, making it easy and quick to set background color transparency.
The Slider component allows users to adjust the intensity of the eye protection mode by sliding.
By leveraging ArkUI’s touch gesture pass-through feature, components located beneath the overlay layer can still properly listen to touch gestures.

Implementation Steps

Use the Slider component to achieve sliding adjustment.
Overlay a Canvas on the page, set its background color, and enable touch event pass-through.
Obtain the value from the Slider and adjust the Canvas background color transparency to achieve dynamic eye protection adjustment on the current page.

Code Snippet / Configuration

const RED_PART = 245
const YELLOW_PART = 222
const BLUE_PART = 73

@Entry
@Component
struct ColorTemperatureScreen {
  @State transparencyVal: number = 0; // Default value (0-0.1)
  @State filterColor: string = '#D2691E'; // Dynamically calculated
  @State txt: string = 'Application content area'

  build() {
    RelativeContainer() {
      // Main content area
      Column() {
        // Place your UI components here
        this.contentTxt()
        this.contentTxt()
        this.contentTxt()
        this.contentTxt()
        this.contentTxt()

        // Color temperature adjustment slider
        Slider({
          value: 0,
          min: 0,
          max: .3,
          step: 0.01
        })
          .onChange(v => {
            this.transparencyVal = v
            this.filterColor = `rgba(${RED_PART}, ${YELLOW_PART}, ${BLUE_PART}, ${this.transparencyVal.toFixed(2)})`
          })
          .blockColor(Color.Black)
          .trackColor(Color.Gray)
          .width('80%')
          .margin(20)
      }.margin({ top: 40 })
      .width('100%')
      .height('80%')
      .backgroundColor(Color.White)

      // Color temperature filter layer (covers the entire screen)
      Canvas()
        .width('100%')
        .height('100%')
        .backgroundColor(this.filterColor)
        .hitTestBehavior(HitTestMode.Transparent)
        .align(Alignment.Bottom)
        .position({ x: 0, y: 0 })
        .zIndex(999) // Ensure it stays on top
    }
    .onAppear(() => {
      this.filterColor = `rgba(${RED_PART}, ${YELLOW_PART}, ${BLUE_PART}, ${this.transparencyVal.toFixed(2)})`
    }).width('100%')
    .height('100%').backgroundColor(Color.White)
  }

  @Builder
  contentTxt() {
    // Place your UI components here
    Text(this.txt).fontSize(10).fontColor($r('sys.color.black')).onClick(() => {
      this.txt = 'Test click content';
    })
  }
}