### Install and Start Tuya Project

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/template/LampBeaconTemplate/README.md

This snippet shows the commands to install project dependencies and start the Tuya project. It is typically used in conjunction with a Node.js environment.

```shell
yarn && yarn start:tuya
```

--------------------------------

### Development Setup for @ray-js/image-area-picker

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/ImageAreaPicker/README-zh_CN.md

Commands to set up the development environment for the @ray-js/image-area-picker project, including installing dependencies and starting the demo code in real-time.

```sh
# Install dependencies
yarn

# Compile Demo code in real-time
yarn start:tuya
```

--------------------------------

### Development Setup and Demo Execution for @ray-js/graffiti

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/Graffiti/README-zh_CN.md

Commands to set up the development environment by installing dependencies and to run the demo code in real-time using `yarn start:tuya`.

```shell
# Install dependencies
yarn

# Real-time compile Demo code
yarn start:tuya
```

--------------------------------

### Installation Guide

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/functional-page/ElectricianTimer/README-zh_CN.md

Instructions on how to integrate the Electrician Timer functional page into your project's configuration.

```APIDOC
## Install Functional Page

### Description
Add the following configuration to your project's `global.config.ts` file to install the Electrician Timer functional page.

### File
`global.config.ts`

### Code
```typescript
export const tuya = {
  ......
  functionalPages: {
    'ElectricianTimer': {
      appid: 'typtepohxfeukudmyi',
    },
  },
  ......
};
```
```

--------------------------------

### Install @ray-js/lamp-rhythm-circle

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampRhythmCircle/README-zh_CN.md

Instructions for installing the @ray-js/lamp-rhythm-circle package using npm or yarn.

```sh
$ npm install @ray-js/lamp-rhythm-circle
# or
$ yarn add @ray-js/lamp-rhythm-circle
```

--------------------------------

### Install @ray-js/lamp-strip-light-smear

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampStripLightSmear/README-zh_CN.md

Instructions for installing the @ray-js/lamp-strip-light-smear package using npm or yarn.

```bash
$ npm install @ray-js/lamp-strip-light-smear
// or
$ yarn add @ray-js/lamp-strip-light-smear
```

--------------------------------

### Install @ray-js/components-ty-slider

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/TySlider/README-zh_CN.md

Demonstrates how to install the @ray-js/components-ty-slider package using npm or yarn.

```shell
npm install @ray-js/components-ty-slider
# 或者
yarn add @ray-js/components-ty-slider
```

--------------------------------

### Install @ray-js/components-ty-slider

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/TySlider/README.md

Install the @ray-js/components-ty-slider package using npm or yarn.

```sh
npm install @ray-js/components-ty-slider
# or
yarn add @ray-js/components-ty-slider
```

--------------------------------

### Install @ray-js/image-area-picker

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/ImageAreaPicker/README-zh_CN.md

Instructions for installing the @ray-js/image-area-picker package using npm or yarn.

```sh
$ npm install @ray-js/image-area-picker
$ yarn add @ray-js/image-area-picker
```

--------------------------------

### Install @ray-js/lamp-bright-slider

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampBrightSlider/README-zh_CN.md

Provides instructions for installing the @ray-js/lamp-bright-slider package using npm or yarn.

```sh
$ npm install @ray-js/lamp-bright-slider
// or
$ yarn add @ray-js/lamp-bright-slider
```

--------------------------------

### Install @ray-js/lamp-strip-light-smear

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampStripLightSmear/README.md

Installs the @ray-js/lamp-strip-light-smear package using npm or yarn. This is the initial step to use the component in a project.

```sh
$ npm install @ray-js/lamp-strip-light-smear
```

```sh
# or
$ yarn add @ray-js/lamp-strip-light-smear
```

--------------------------------

### Install @ray-js/image-color-picking

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/utils/ImageColorPicking/README-zh_CN.md

Installs the @ray-js/image-color-picking package using either npm or yarn.

```bash
npm install @ray-js/image-color-picking
// 或者
yarn add @ray-js/image-color-picking
```

--------------------------------

### Install @ray-js/lamp-music-card

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampMusicCard/README-zh_CN.md

Provides commands for installing the @ray-js/lamp-music-card package using either npm or yarn.

```sh
$ npm install @ray-js/lamp-music-card
# or
$ yarn add @ray-js/lamp-music-card
```

--------------------------------

### Install @ray-js/mini-app-mark-down

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/MiniAppMarkDown/README-zh_CN.md

This snippet shows how to install the @ray-js/mini-app-mark-down package using either npm or yarn.

```shell
npm install @ray-js/mini-app-mark-down
// 或者
yarn add @ray-js/mini-app-mark-down
```

--------------------------------

### Install @ray-js/lamp-bead-strip

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampBeadStrip/README.md

Installs the @ray-js/lamp-bead-strip package using either npm or yarn.

```sh
npm install @ray-js/lamp-bead-strip
# or
yarn add @ray-js/lamp-bead-strip
```

--------------------------------

### Install @ray-js/image-area-picker

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/ImageAreaPicker/README.md

Provides instructions for installing the @ray-js/image-area-picker package using npm or yarn.

```sh
$ npm install @ray-js/image-area-picker
# or
$ yarn add @ray-js/image-area-picker
```

--------------------------------

### Install @ray-js/lamp-module-schedule

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampModuleSchedule/README.md

Instructions for installing the @ray-js/lamp-module-schedule package using npm or yarn. It also shows how to install the @ray-js/components-ty-lamp package as an alternative.

```sh
$ npm install @ray-js/lamp-module-schedule
$ yarn add @ray-js/lamp-module-schedule

// or
$ npm install @ray-js/components-ty-lamp
$ yarn add @ray-js/components-ty-lamp
```

--------------------------------

### Install @ray-js/image-color-picking

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/utils/ImageColorPicking/README.md

Instructions for installing the image color picking library using npm or yarn package managers.

```bash
npm install @ray-js/image-color-picking
// or
yarn add @ray-js/image-color-picking
```

--------------------------------

### Install @ray-js/circle-progress

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CircleProgress/README.md

Installs the @ray-js/circle-progress package using either npm or yarn.

```sh
$ npm install @ray-js/circle-progress
# or
$ yarn add @ray-js/circle-progress
```

--------------------------------

### Install @ray-js/lamp-percent-slider

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampPercentSlider/README-zh_CN.md

Instructions for installing the @ray-js/lamp-percent-slider package using either npm or yarn package managers.

```shell
npm install @ray-js/lamp-percent-slider
```

```shell
yarn add @ray-js/lamp-percent-slider
```

--------------------------------

### Install @ray-js/common-charts

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CommonCharts/README_en.md

Installation instructions for the @ray-js/common-charts package using npm or yarn.

```bash
npm install @ray-js/common-charts
# or
yarn add @ray-js/common-charts
```

--------------------------------

### Install @ray/lamp-countdown Package

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampCountdown/README.md

Demonstrates how to install the @ray/lamp-countdown package using either npm or yarn package managers.

```sh
npm install @ray/lamp-countdown
# or
yarn add @ray/lamp-countdown
```

--------------------------------

### Install @ray-js/lamp-module-schedule with npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampModuleSchedule/README-zh_CN.md

This snippet shows how to install the @ray-js/lamp-module-schedule package using either npm or yarn package managers. It also includes an alternative installation method using @ray-js/components-ty-lamp.

```shell
# npm
$ npm install @ray-js/lamp-module-schedule
# yarn
$ yarn add @ray-js/lamp-module-schedule

# 或者
$ npm install @ray-js/components-ty-lamp
$ yarn add @ray-js/components-ty-lamp
```

--------------------------------

### Install @ray-js/components-ty-perf-text

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/HighPerfText/README.md

Demonstrates how to install the @ray-js/components-ty-perf-text package using either npm or yarn package managers.

```sh
npm install @ray-js/components-ty-perf-text
# or
yarn add @ray-js/components-ty-perf-text
```

--------------------------------

### Install @ray/lamp-countdown using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampCountdown/README-zh_CN.md

Shows how to install the @ray/lamp-countdown package using either npm or yarn, which is the first step before using the component in a project.

```sh
$ npm install @ray/lamp-countdown
// 或者
$ yarn add @ray/lamp-countdown
```

--------------------------------

### Develop with @ray-js/components-ty-perf-text: Watch and Start

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/HighPerfText/README-zh_CN.md

Commands to facilitate development with the component. 'yarn watch' compiles component code in real-time, while 'yarn start:tuya' compiles demo code for the Tuya platform.

```bash
yarn watch
```

```bash
yarn start:tuya
```

--------------------------------

### Install @ray-js/components-ty-lamp

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampColorWheel/README-zh_CN.md

Installs the necessary component library for the lamp color wheel using either npm or yarn package managers.

```sh
$ npm install @ray-js/components-ty-lamp
// 或者
$ yarn add @ray-js/components-ty-lamp
```

--------------------------------

### Install @ray-js/drag-list

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/DragList/README-zh_CN.md

Installs the @ray-js/drag-list package using either npm or yarn.

```sh
$ npm install @ray-js/drag-list
// or
$ yarn add @ray-js/drag-list
```

--------------------------------

### Install @ray-js/lamp-vertical-percent-slider

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampVerticalPercentSlider/README-zh_CN.md

Installs the @ray-js/lamp-vertical-percent-slider package using either npm or yarn.

```sh
npm install @ray-js/lamp-vertical-percent-slider
```

```sh
yarn add @ray-js/lamp-vertical-percent-slider
```

--------------------------------

### Install @ray-js/lamp-style-slider

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampStyleSlider/README.md

Installs the @ray-js/lamp-style-slider package using either npm or yarn package managers.

```sh
$ npm install @ray-js/lamp-style-slider
# or
$ yarn add @ray-js/lamp-style-slider
```

--------------------------------

### Install Tuya Ray Common Charts

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CommonCharts/README-zh_CN.md

Instructions for installing the @ray-js/common-charts package using npm or yarn.

```bash
npm install @ray-js/common-charts
# 或者
yarn add @ray-js/common-charts
```

--------------------------------

### LampTempSlider Usage Example

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampTempSlider/README.md

An example demonstrating how to use the LampTempSlider component in a React application.

```APIDOC
## LampTempSlider Usage Example

### Description
Example of using the LampTempSlider component.

### Code
```tsx
import { LampTempSlider } from '@ray-js/components-ty-lamp';
import React, { useState, useEffect } from 'react';

export default () => {
  const [temp, setTemp] = useState(100);

  useEffect(() => {
    // Simulation DP report
    setTimeout(() => {
      setTemp(890);
    }, 1000);
  }, []);

  return (
    <LampTempSlider
      value={temp}
      onTouchEnd={val => {
        setTemp(val);
      }}
    />
  );
};
```
```

--------------------------------

### Install @ray-js/circle-progress using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CircleProgress/README-zh_CN.md

Demonstrates the commands to install the @ray-js/circle-progress library using either npm or yarn package managers.

```sh
npm install @ray-js/circle-progress
```

```sh
yarn add @ray-js/circle-progress
```

--------------------------------

### Install @ray-js/components-ty-lamp

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampCirclePicker/README.md

Installs the @ray-js/components-ty-lamp package using npm or yarn. This package contains the LampCirclePicker component.

```sh
$ npm install @ray-js/components-ty-lamp
# or
$ yarn add @ray-js/components-ty-lamp
```

--------------------------------

### Install @ray-js/lamp-bright-slider

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampBrightSlider/README.md

Installs the @ray-js/lamp-bright-slider package using either npm or yarn. This is the initial step to include the component in your project.

```sh
$ npm install @ray-js/lamp-bright-slider
# or
$ yarn add @ray-js/lamp-bright-slider
```

--------------------------------

### Install @ray-js/music-bar using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/MusicBar/README.md

These commands show how to install the @ray-js/music-bar package into your project using either npm or yarn package managers.

```sh
$ npm install @ray-js/music-bar
# or
$ yarn add @ray-js/music-bar
```

--------------------------------

### Install @ray-js/components-ty-lamp

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampColorSlider/README-zh_CN.md

Installs the @ray-js/components-ty-lamp package, which includes the LampColorSlider component, using either npm or yarn.

```sh
$ npm install @ray-js/components-ty-lamp
# 或者
$ yarn add @ray-js/components-ty-lamp
```

--------------------------------

### Install @ray-js/graffiti using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/Graffiti/README-zh_CN.md

Instructions for installing the @ray-js/graffiti package using either npm or yarn package managers.

```shell
$ npm install @ray-js/graffiti
# or
$ yarn add @ray-js/graffiti
```

--------------------------------

### Install @ray-js/recycle-view with npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/RecycleView/README.md

Installs the @ray-js/recycle-view package using either npm or yarn.

```sh
$ npm install @ray-js/recycle-view
# or
$ yarn add @ray-js/recycle-view
```

--------------------------------

### Install @ray-js/components-ty-lamp using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampTempSlider/README-zh_CN.md

Shows how to install the necessary component library using either npm or yarn package managers.

```sh
$ npm install @ray-js/components-ty-lamp

```

```sh
$ yarn add @ray-js/components-ty-lamp
```

--------------------------------

### Install @ray-js/components-ty-lamp

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampColorWheel/README.md

Installs the necessary component library for the lamp color wheel. Supports both npm and yarn package managers.

```sh
$ npm install @ray-js/components-ty-lamp
$ yarn add @ray-js/components-ty-lamp
```

--------------------------------

### Install @ray-js/components-ty-lamp

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampCirclePickerWhite/README-zh_CN.md

Installs the necessary component package for the lamp-circle-picker-white. Supports both npm and yarn package managers.

```sh
npm install @ray-js/components-ty-lamp
// 或者
yarn add @ray-js/components-ty-lamp
```

--------------------------------

### Install @ray-js/music-bar

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/MusicBar/README-zh_CN.md

Installs the @ray-js/music-bar package using either npm or yarn. This is the primary step to include the music player component in your project.

```shell
npm install @ray-js/music-bar
```

```shell
yarn add @ray-js/music-bar
```

--------------------------------

### Install @ray-js/lamp-rhythm-circle using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampRhythmCircle/README.md

Installs the @ray-js/lamp-rhythm-circle package using either the npm or yarn package manager. This is the first step to using the component in a project.

```sh
$ npm install @ray-js/lamp-rhythm-circle
$ yarn add @ray-js/lamp-rhythm-circle
```

--------------------------------

### Install @ray-js/components-ty-lamp using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampCirclePickerWhite/README.md

This snippet shows how to install the necessary component library for the LampCirclePickerWhite. It provides commands for both npm and yarn package managers.

```sh
$ npm install @ray-js/components-ty-lamp

```

```sh
$ yarn add @ray-js/components-ty-lamp

```

--------------------------------

### Install @ray-js/lamp-vertical-touch-slider using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampVerticalTouchSlider/README-zh_CN.md

Demonstrates how to install the @ray-js/lamp-vertical-touch-slider package using either npm or yarn package managers.

```shell
npm install @ray-js/lamp-vertical-touch-slider
```

```shell
yarn add @ray-js/lamp-vertical-touch-slider
```

--------------------------------

### Install @ray-js/components-ty-lamp

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampCirclePickerColor/README.md

Installs the necessary component library for the lamp color picker using either npm or yarn package managers.

```sh
$ npm install @ray-js/components-ty-lamp
// or
$ yarn add @ray-js/components-ty-lamp
```

--------------------------------

### Install ECharts Plugin

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CommonCharts/README.md

Installs the ECharts library using npm, a prerequisite for enabling enhanced capabilities and using plugins.

```bash
npm install echarts
```

--------------------------------

### Install @ray-js/components-ty-perf-text using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/HighPerfText/README-zh_CN.md

Installs the @ray-js/components-ty-perf-text package using either npm or yarn package managers. This is the first step to integrating the component into your project.

```bash
npm install @ray-js/components-ty-perf-text
```

```bash
yarn add @ray-js/components-ty-perf-text
```

--------------------------------

### Install @ray-js/lamp-touch-slider using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampTouchSlider/README.md

Provides commands to install the @ray-js/lamp-touch-slider package using either npm or yarn, essential for integrating the component into a project.

```sh
$ npm install @ray-js/lamp-touch-slider
# or
$ yarn add @ray-js/lamp-touch-slider
```

--------------------------------

### Install @ray-js/drag-list

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/DragList/README.md

Installs the @ray-js/drag-list package using either npm or yarn. This is the first step to using the drag-and-sort list functionality.

```sh
$ npm install @ray-js/drag-list
// Or
$ yarn add @ray-js/drag-list
```

--------------------------------

### LampHuePicker Usage Example

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampHuePicker/README.md

Provides a practical example of how to use the LampHuePicker component in a React component, including state management and event handling.

```APIDOC
## LampHuePicker Usage Example

### Description
This example demonstrates how to integrate the `LampHuePicker` component into a React application, managing its state and responding to touch events.

### Code

```tsx
import { useState, useEffect } from 'react';
import { LampHuePicker } from '@ray-js/components-ty-lamp';

export default () => {
  const [hue, setHue] = useState(20);

  const handleMove = (v: number) => {
    // Consider adding throttling for performance optimization
    setHue(v);
  };

  const handleEnd = (v: number) => {
    setHue(v);
  };

  useEffect(() => {
    // Simulating a DP report after 3 seconds
    const timer = setTimeout(() => {
      setHue(300);
    }, 3000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <LampHuePicker 
      value={hue}
      onTouchMove={handleMove}
      onTouchEnd={handleEnd}
    />
  );
};
```
```

--------------------------------

### Install @ray-js/svg using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/Svg/README-zh_CN.md

Demonstrates how to install the @ray-js/svg package using either npm or yarn.

```sh
$ npm install @ray-js/svg
// 或者
$ yarn add @ray-js/svg
```

--------------------------------

### Install @ray-js/mini-app-mark-down with npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/MiniAppMarkDown/README.md

These commands show how to add the @ray-js/mini-app-mark-down package to your project using either npm or yarn package managers.

```sh
$ npm install @ray-js/mini-app-mark-down
$ yarn add @ray-js/mini-app-mark-down
```

--------------------------------

### Basic RecycleView Usage Example

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/RecycleView/README-zh_CN.md

A basic example demonstrating the usage of the RecycleView component. It includes setting up data, handling scroll-to-lower events for data loading, and rendering individual list items with fixed heights.

```tsx
import RecycleView, { transformRow1ToRowN } from '@ray-js/recycle-view';

const [data, setData] = useState([]);

const handleScrollToLower = () => {
  const len = Math.floor(data.length / 5);
  if (len > 50) {
    return;
  }
  setTimeout(() => {
    const len = Math.floor(data.length / 5);
    const random = Math.floor(Math.random() * 10) + 10;
    for (let i = 0; i < random; i++) {
      data.push({
        height: 100,
        timeC: Math.floor(i / 5) + len,
        text: `row ${index++}`,
      });
    }
    setData([...data]);
    hideLoading();
  }, 1000);
};

<RecycleView
  overScanCount={20}
  className={styles.recycleView}
  data={data}
  renderItem={item => {
    return (
      <View
        key={item.text}
        style={{
          width: '100%',
          height: `${item.height}px`,
          textAlign: 'center',
          background: '#eee',
          border: '1px solid #ccc',
        }}
      >{`${item.text}`}</View>
    );
  }}
  onScrollToLower={handleScrollToLower}
/>;
```

--------------------------------

### Install @ray-js/lamp-style-slider using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampStyleSlider/README-zh_CN.md

Shows how to install the @ray-js/lamp-style-slider package using either npm or yarn package managers.

```sh
$ npm install @ray-js/lamp-style-slider
// or
$ yarn add @ray-js/lamp-style-slider
```

--------------------------------

### Navigation to Timer Lists

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/functional-page/ElectricianTimer/README-zh_CN.md

Provides code examples for navigating to various timer-related lists using the `ty.navigateTo` method.

```APIDOC
## Navigate to Functional Pages

### Description
Examples of navigating to different timer function pages using deep links.

### Navigate to Timer Comprehensive List Page
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const jumpUrl = `functional://ElectricianTimer/home?deviceId=${deviceId}`;
ty.navigateTo({
  url: jumpUrl,
});
```

### Navigate to Cloud Timer List Page
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const jumpUrl = `functional://ElectricianTimer/schedule?deviceId=${deviceId}`;
ty.navigateTo({
  url: jumpUrl,
});
```

### Navigate to Cycle Timer List Page
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const jumpUrl = `functional://ElectricianTimer/cycle?deviceId=${deviceId}`;
ty.navigateTo({
  url: jumpUrl,
});
```

### Navigate to Random Timer List Page
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const jumpUrl = `functional://ElectricianTimer/random?deviceId=${deviceId}`;
ty.navigateTo({
  url: jumpUrl,
});
```

### Navigate to Countdown List Page
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const jumpUrl = `functional://ElectricianTimer/countdown?deviceId=${deviceId}`;
ty.navigateTo({
  url: jumpUrl,
});
```

### Navigate to Countdown Setting Page
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const jumpUrl = `functional://ElectricianTimer/setCountdown?deviceId=${deviceId}`;
ty.navigateTo({
  url: jumpUrl,
});
```

### Navigate to Inching Timer List Page
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const jumpUrl = `functional://ElectricianTimer/inching?deviceId=${deviceId}`;
ty.navigateTo({
  url: jumpUrl,
});
```

### Navigate to Inching Timer Setting Page
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const jumpUrl = `functional://ElectricianTimer/inching/add?deviceId=${deviceId}`;
ty.navigateTo({
  url: jumpUrl,
});
```

### Navigate to Astronomical Timer List Page
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const jumpUrl = `functional://ElectricianTimer/astronomical?deviceId=${deviceId}`;
ty.navigateTo({
  url: jumpUrl,
});
```

### Navigate with Background Image
```typescript
const deviceId = 'YOUR_DEVICE_ID';
const imageUrl = 'YOUR_IMAGE_URL'; // Ensure the URL is properly encoded
const jumpUrl = `functional://ElectricianTimer/schedule?deviceId=${deviceId}&bgImgUrl=${encodeURIComponent(imageUrl)}`;
ty.navigateTo({
  url: jumpUrl,
});
```
```

--------------------------------

### Install @ray-js/recycle-view using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/RecycleView/README-zh_CN.md

This snippet shows how to install the @ray-js/recycle-view package using either npm or yarn. It's a common first step before using the library in a project.

```shell
$ npm install @ray-js/recycle-view

# or

$ yarn add @ray-js/recycle-view
```

--------------------------------

### Install @ray-js/lamp-percent-slider using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampPercentSlider/README.md

This snippet shows how to add the @ray-js/lamp-percent-slider package to your project using either npm or yarn package managers. It's a direct dependency installation.

```sh
$ npm install @ray-js/lamp-percent-slider
# or
$ yarn add @ray-js/lamp-percent-slider
```

--------------------------------

### Advanced Usage: Custom Colors and Downward Horizontal Ring

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CircleProgress/README-zh_CN.md

Shows how to configure the circular progress bar with custom colors and a downward-oriented horizontal display. This example adjusts the start and offset degrees for a specific layout.

```tsx
import RayCircleProgress from '@ray-js/circle-progress';

const [value, setValue] = useState(0);

const handleMove = (v: number) => {
  console.warn('handleMove', v);
  setValue(v);
};

const handleEnd = (v: number) => {
  console.warn('handleEnd', v);
  setValue(v);
};
<RayCircleProgress
  value={value3}
  innerRingRadius={84}
  ringRadius={100}
  startDegree={0}
  colorList={[
    { offset: 0, color: '#e8a989' },
    { offset: 0.5, color: '#efce85' },
    { offset: 1, color: '#d66e6b' },
  ]}
  offsetDegree={180}
  onTouchMove={handleMove3}
  onTouchEnd={handleEnd3}
/>;
```

--------------------------------

### Example Usage of LampSaturationSlider

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampSaturationSlider/README-zh_CN.md

Demonstrates how to use the LampSaturationSlider component in a React application, including state management for saturation and simulating DP reporting.

```tsx
import { LampSaturationSlider } from '@ray-js/components-ty-lamp';

export default () => {
  const [saturation, setSaturation] = useState(100);

  useEffect(() => {
    // 模拟dp上报
    setTimeout(() => {
      setSaturation(321);
    }, 3000);
  }, []);

  return (
    <LampSaturationSlider
      hue={100}
      value={saturation}
      onTouchEnd={val => {
        setSaturation(val);
      }}
    />
  );
};
```

--------------------------------

### Enable Echarts Plugins

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CommonCharts/README_en.md

Instructions on how to enable Echarts plugins by installing echarts and configuring `usingPlugins` in `global.config.ts`.

```bash
npm install echarts
```

```jsx
<CommonCharts usingPlugin={true}></CommonCharts>
```

```json
{
  "usingPlugins": ["rjs://echarts"]
}
```

--------------------------------

### Advanced Usage: Custom Colors and Full Circle

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CircleProgress/README-zh_CN.md

Demonstrates creating a full circular progress bar with custom color gradients. This example sets the start degree to 90 and offset degree to 360 to cover the entire circle.

```tsx
import RayCircleProgress from '@ray-js/circle-progress';

const [value, setValue] = useState(0);

const handleMove = (v: number) => {
  console.warn('handleMove', v);
  setValue(v);
};

const handleEnd = (v: number) => {
  console.warn('handleEnd', v);
  setValue(v);
};

<RayCircleProgress
  value={value}
  startDegree={90}
  offsetDegree={360}
  colorList={[
    { offset: 0, color: '#e8a989' },
    { offset: 0.5, color: '#efce85' },
    { offset: 1, color: '#d66e6b' },
  ]}
  onTouchMove={handleMove}
  onTouchEnd={handleEnd}
/>;
```

--------------------------------

### 开发命令

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampBeadStrip/README-zh_CN.md

提供用于实时编译组件代码和 Demo 代码的开发命令。

```sh
# 实时编译组件代码
yarn watch
# 实时编译Demo代码
yarn start:tuya
```

--------------------------------

### Develop @ray-js/lamp-strip-light-smear Components

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampStripLightSmear/README-zh_CN.md

Commands to watch component code changes and compile demo code for development.

```bash
# Watch component code in real-time
yarn watch
# Compile demo code in real-time
yarn start:tuya
```

--------------------------------

### Develop @ray-js/graffiti

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/Graffiti/README.md

Instructions for setting up dependencies and running the development watch compile for the demo.

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

--------------------------------

### Navigate to and Preset Data for Power Memory Functional Page

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/functional-page/LampPowerMemoryFunctional/README-zh_CN.md

Demonstrates how to construct the navigation URL for the Power Memory Functional Page, including device or group IDs. It also shows how to use the `presetFunctionalData` API to set initial data, such as collected colors and white settings, before navigating.

```typescript
import { navigateTo } from '@ray-js/ray';

// LampPowerMemoryFunctional is the functional page name configured in global.config.ts
const jumpUrl = `functional://LampPowerMemoryFunctional/home?deviceId=${deviceId || ''}&groupId=${ groupId || ''}`;
// Preset data
const data: PowerMemoryFunctionalData = {
  collectColors: [{ hue: 100, saturation: 1000, value: 1000 }],
  collectWhites: [{ brightness: 1000, temperature: 1000 }],
};

// Promise-based function to preset functional page data
export const presetFunctionalData = (
  url: string,
  data: Record<string, any>
): Promise<boolean> => {
  return new Promise((resolve, reject) => {
    ty.presetFunctionalData({
      url,
      data,
      success: () => resolve(true),
      fail: err => reject(err),
    });
  });
};

// Add preset data for the functional page
await presetFunctionalData(jumpUrl, data);
// Navigate to the functional page
navigateTo({ url: jumpUrl, fail: err => console.warn(err) });
```

--------------------------------

### Usage of LampMusicBar

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampMusicCard/README-zh_CN.md

Shows how to use the LampMusicBar component, which is likely a visual component for music synchronization. It demonstrates passing a list of colors and a background color.

```tsx
import { LampMusicBar, musicColorArr2 } from '@ray-js/lamp-music-card';

const colorList = [...musicColorArr2]; // Customizable color effects
<LampMusicBar colorList={colorList} bgColor="#eee" />
```

--------------------------------

### Vertical Slider Examples

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/TySlider/README.md

Provides examples of vertical sliders in NormalSlider, PrettoSlider, and ScaleSlider variants, with custom dimensions and styles.

```tsx
// NormalSlider
<Slider
  isVertical
  maxTrackWidth="4px"
  maxTrackHeight="200px"
  minTrackWidth="4px"
  minTrackHeight="28px"
  style={{ marginRight: '30px' }}
/>
// PrettoSlider
<Slider
  isVertical
  maxTrackWidth="26px"
  maxTrackHeight="200px"
  maxTrackRadius="26px"
  minTrackWidth="22px"
  minTrackHeight="22px"
  thumbWidth="18px"
  thumbHeight="18px"
  style={{ marginRight: '30px' }}
/>
// ScaleSlider
<Slider
  isVertical
  isShowTicks
  step={25}
  maxTrackWidth="40px"
  maxTrackHeight="200px"
  maxTrackRadius="16px"
  minTrackWidth="40px"
  minTrackHeight="40px"
  thumbWidth="0px"
  maxTrackTickWidth="12px"
  maxTrackTickHeight="4px"
  minTrackTickWidth="12px"
  minTrackTickHeight="4px"
/>
```

--------------------------------

### Install @ray-js/svg with npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/Svg/README.md

Install the @ray-js/svg library using either npm or yarn package managers.

```sh
$ npm install @ray-js/svg
# or
$ yarn add @ray-js/svg
```

--------------------------------

### Configuration for Global Settings

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/functional-page/LampNoDisturbFunctional/README-zh_CN.md

Details how to configure the feature page entry within the `global.config.ts` file, specifying the `appid` and `version` for the "LampNoDisturbFunctional" page.

```APIDOC
## Configuration in global.config.ts

### Description
This section describes how to register the "LampNoDisturbFunctional" feature page in your project's global configuration file (`src/global.config.ts`). This allows the application to locate and load the feature page correctly.

### Method
Configuration

### Endpoint
`src/global.config.ts`

### Parameters
#### Request Body
```javascript
const tuya = {
  // ... other configurations
  functionalPages: {
    // The name of the route for the feature page, fixed.
    LampNoDisturbFunctional: {
      // `typsxgb7vfl1unmkbt` is the feature page's ID.
      appid: 'typsxgb7vfl1unmkbt',
      // The currently recommended version.
      version: "0.1.9",
    },
    // ... other potential feature pages
  },
};
```

### Response
N/A (This is a configuration step, not an API request).
```

--------------------------------

### Install @ray-js/lamp-vertical-touch-slider

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampVerticalTouchSlider/README.md

Installs the vertical touch slider component using either npm or yarn package managers. This is the first step to integrating the slider into your project.

```sh
$ npm install @ray-js/lamp-vertical-touch-slider
# or
$ yarn add @ray-js/lamp-vertical-touch-slider
```

--------------------------------

### 安装 @ray-js/lamp-bead-strip

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampBeadStrip/README-zh_CN.md

安装 @ray-js/lamp-bead-strip 库，可以使用 npm 或 yarn 进行安装。

```sh
$ npm install @ray-js/lamp-bead-strip
// 或者
$ yarn add @ray-js/lamp-bead-strip
```

--------------------------------

### Install @ray-js/pencil-flow Package

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/RayPencilFlow/README.md

Command to install the @ray-js/pencil-flow package using yarn, which is the primary dependency for using the Tuya canvas rendering engine.

```bash
yarn add @ray-js/pencil-flow
```

--------------------------------

### Usage Example of DimmerStrip Component

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampStripLightSmear/README-zh_CN.md

A React component demonstrating the usage of the DimmerStrip from @ray-js/lamp-strip-light-smear. It shows how to manage light states, colors (HSV to RGB conversion), and handle user interactions like color changes.

```tsx
import DimmerStrip, { hsv2rgbString } from '@ray-js/lamp-strip-light-smear';

export default () => {
  const [smearedColor, setSmearedColor] = useState<HSV>({ h: 0, s: 1000, v: 1000 });
  const [lightColorMaps, setLightColorMaps] = useState({});
  const [smearMode, setSmearMode] = useState(SmearMode.all);

  useEffect(() => {
    // Simulate changing the current smeared color
    setTimeout(() => {
      setSmearedColor({ h: 120, s: 1000, v: 1000 });
    }, 1000);
  }, []);

  useEffect(() => {
    const _lightColorMaps = {};
    const { h, s, v } = smearedColor;
    new Array(20).fill(0).forEach((_, index) => {
      _lightColorMaps[index] = hsv2rgbString(h, s / 10, v / 10, 1);
    });
    setLightColorMaps(_lightColorMaps);
  }, []);

  const onChange = data => {
    const newCheckedMapColor = {};
    [...data].forEach(item => {
      newCheckedMapColor[item] = hsv2rgbString(
        smearedColor.h,
        smearedColor.s / 10,
        smearedColor.v / 10,
        1
      );
    });
    const _lightColorMaps = {
      ...lightColorMaps,
      ...newCheckedMapColor,
    };
    setLightColorMaps(_lightColorMaps);
  };

  const onEnd = data => {
    const newCheckedMapColor = {};
    [...data].forEach(item => {
      newCheckedMapColor[item] = hsv2rgbString(
        smearedColor.h,
        smearedColor.s / 10,
        smearedColor.v / 10,
        1
      );
    });
    const _lightColorMaps = {
      ...lightColorMaps,
      ...newCheckedMapColor,
    };
    setLightColorMaps(_lightColorMaps);
  };

  return (
    <DimmerStrip
      className="aaa"
      disabled={false}
      type={smearMode}
      gradient
      smearedColor={smearedColor}
      lightColorMaps={lightColorMaps}
      onLightChange={onChange}
      onLightEnd={onEnd}
    />
  );
};

```

--------------------------------

### Install @ray-js/lamp-vertical-percent-slider using npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampVerticalPercentSlider/README.md

Shows how to install the @ray-js/lamp-vertical-percent-slider package using either npm or yarn package managers.

```sh
$ npm install @ray-js/lamp-vertical-percent-slider
# or
$ yarn add @ray-js/lamp-vertical-percent-slider
```

--------------------------------

### Install @ray-js/lamp-touch-slider with npm or yarn

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampTouchSlider/README-zh_CN.md

Installs the @ray-js/lamp-touch-slider package using either npm or yarn package managers. This is the first step to using the component in your project.

```sh
$ npm install @ray-js/lamp-touch-slider
// 或者
$ yarn add @ray-js/lamp-touch-slider
```

--------------------------------

### Applying Themes (dark/light)

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CommonCharts/README-zh_CN.md

Demonstrates how to switch between predefined 'dark' and 'light' themes for the charts by using the `theme` prop.

```jsx
<CommonCharts
  ...
  theme="dark" // 支持 dark light
/>
```

--------------------------------

### Basic Usage of LampColorCollection

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/LampColorCollection/README-zh_CN.md

Demonstrates the basic usage of the LampColorCollection component, including state management for color list and active index, and event handlers for add, delete, and checked actions.

```tsx
import { LampColorCollection } from '@ray-js/components-ty-lamp';

const defaultColorList = [
  { h: 200, s: 1000, v: 1000 },
  { b: 1000, t: 670 },
];

const [colorList, setColorList] = useState(defaultColorList);
const [activeIndex, setActiveIndex] = useState(0);
const handleAdd = () => {
  setColorList([
    ...colorList,
    {
      b: Math.round(Math.random() * 1000),
      t: Math.round(Math.random() * 1000),
    },
  ]);
};

const handleDelete = (_colorList, _activeIndex) => {
  setColorList([..._colorList]);
  setActiveIndex(_activeIndex);
};

const handleChecked = (colorItem, _activeIndex: number) => {
  setActiveIndex(_activeIndex);
};

<LampColorCollection
  disableDelete={colorList.length > 2}
  theme="dark"
  activeIndex={activeIndex}
  colorList={colorList}
  onAdd={handleAdd}
  onDelete={handleDelete}
  onChecked={handleChecked}
/>;
```

--------------------------------

### Slider Displaying Current Value

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/TySlider/README.md

Example of displaying the current slider value alongside the slider, updating in real-time.

```tsx
<View style={{ display: 'flex', alignItems: 'center' }}>
  <Slider value={value} onChange={onChange} maxTrackColor="orange" />
  <View style={{ marginLeft: '4px' }}>
    <Text>{value}</Text>
  </View>
</View>
```

--------------------------------

### PrettoSlider Customization

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/TySlider/README-zh_CN.md

Provides examples of customizing the 'PrettoSlider' variant, focusing on track and thumb dimensions for a distinct look.

```tsx
<Slider
  maxTrackHeight="26px"
  maxTrackRadius="26px"
  minTrackHeight="22px"
  minTrackWidth="22px"
  thumbWidth="18px"
  thumbHeight="18px"
/>
```

```tsx
<Slider
  maxTrackHeight="26px"
  maxTrackRadius="6px"
  minTrackHeight="22px"
  minTrackWidth="10px"
  thumbWidth="3px"
  thumbHeight="16px"
  thumbRadius="1.5px"
/>
```

--------------------------------

### Basic Usage of RayCircleProgress

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CircleProgress/README-zh_CN.md

Shows a fundamental example of using the RayCircleProgress component with basic value and touch event handlers. It illustrates setting the initial value and handling movement and end events.

```tsx
import RayCircleProgress from '@ray-js/circle-progress';

const [value, setValue] = useState(0);

const handleMove = (v: number) => {
  console.warn('handleMove', v);
  setValue(v);
};

const handleEnd = (v: number) => {
  console.warn('handleEnd', v);
  setValue(v);
};

<RayCircleProgress
  value={value}
  startDegree={125}
  offsetDegree={290}
  onTouchMove={handleMove}
  onTouchEnd={handleEnd}
/>;
```

--------------------------------

### Set Chart Theme

Source: https://github.com/tuya-community/tuya-ray-materials/blob/main/materials/CommonCharts/README_en.md

Example of how to apply a 'dark' or 'light' theme to the CommonCharts component.

```jsx
<CommonCharts
  ... // other props
  theme="dark" // support dark light
/>
```