HarmonyOS Vibration Integration using Sensor Service Kit with ArkTS

#harmonyos #sensorservicekit #vibratorapi #hapticfeedback

Read the original article：HarmonyOS Vibration Integration using Sensor Service Kit with ArkTS

Requirement Description

This project aims to demonstrate how to implement a vibration-based feedback system in a HarmonyOS application using the @kit.SensorServiceKit. The goal is to trigger a vibration every time a “red phase” begins in an alternating color animation cycle. Additionally, a countdown phase precedes the loop, and the vibration stops when the page is hidden.

Background Knowledge

To implement this functionality, the following concepts and modules are required:

HarmonyOS ArkTS Syntax: Understanding component-based structure using @Component, decorators like @State, and lifecycle methods.
SensorServiceKit - Vibrator API:
- vibrator.startVibration(...): Triggers a vibration with specified duration and usage.
- vibrator.stopVibration(...): Stops the vibration manually.
BasicServicesKit - BusinessError: Handles potential runtime errors when using vibrator functions.
JavaScript Fundamentals:
- setInterval() and clearInterval() for timing logic.
- Conditional statements for flow control.

Implementation Steps

Import necessary steps
Create your states
Add functions to your lifecycle
Create necessary functions for vibration
Clean Up when the page is disappear.

Code Snippet / Configuration

Component Decorator and States

import { vibrator } from "@kit.SensorServiceKit";
import { BusinessError } from "@kit.BasicServicesKit";

2. Component Decorator and States

@Component
export default struct ParticleAnimation {
  @State isRedPhase: boolean = true;
  @State countdown: number = 6;

3. abouttoAppear LifeCycle

aboutToAppear() {
  this.startCountdown();
}

When the component appears, it triggers a countdown sequence using startCountdown.

4. startCountdown Function

startCountdown() {
  let countdownInterval = setInterval(() => {
    if (this.countdown > 1) {
      this.countdown -= 1;
    } else {
      clearInterval(countdownInterval);
      this.countdown = 0;
      this.startLoop();
    }
  }, 1000);
}

Every second, the countdown decrements by 1. Once it reaches 0, the main loop (startLoop) starts.

5. Loop and Vibration

startLoop() {
  this.isRedPhase = true;
  this.startVibrate();

  setInterval(() => {
    this.isRedPhase = !this.isRedPhase;
    if (this.isRedPhase) {
      this.startVibrate();
    }
  }, 2800);
}

The isRedPhase toggles every 2800 milliseconds. If the phase is red, the vibration starts again. This means the watch will vibrate when the user breathes.

6. startVibrate Function

startVibrate() {
  vibrator.startVibration({
    type: 'time',
    duration: 2800,
  }, {
    id: 0,
    usage: 'alarm'
  }, (error: BusinessError) => {
    if (error) {
      console.error(...);
    }
  });
}

Vibrates for 2800 ms, matching the cycle duration.

7. Cleanup on PageHide

onPageHide(): void {
  vibrator.stopVibration(vibrator.VibratorStopMode.VIBRATOR_STOP_MODE_TIME, ...);
}

Test Results

This implementation showcases a basic yet effective usage of the HarmonyOS Vibrator API to enhance user experience through haptic feedback. It demonstrates how to:

Implement a timer-based visual and tactile cycle.
Use lifecycle hooks to manage behavior.
Properly start and stop vibration services.
Handle errors gracefully with BusinessError.

Such mechanisms are particularly useful in applications that require user attention, training exercises, or sensory cues, making it a valuable feature for developers working on wearable or fitness-related HarmonyOS apps.