---
title: Lighting Scenario Library Extension
---

## Feature Introduction

### Prerequisites

#### Applicable Scope

This extension is applicable to lighting categories with scenario functionality, enabling visualization during the development process and significantly improving development efficiency.

#### Applicable Scenarios
The product has scene dp (scene_data\mix_light_scene\dreamlight_scene_mode), and there is a requirement to develop the scene function.

### Function

- Cloud Scenario Library
- Local Scenario Library

## Usage Process

### Installation

1. In Tuya MiniApp Tools, open the device tool, authorize login, and select a device from the device list. Click to enter the device page.

<Image src="https://images.tuyaus.com/content-platform/hestia/17304287706174b3ed515.png" style={{zoom:'50%'}} />

2. On the device page, click on 'Extension Management' in the top right corner to enter the extension market.

<Image src="https://images.tuyaus.com/content-platform/hestia/173042875702b6e3cf658.png"  style={{zoom:'50%'}} />

3. In the extension market, find '面板 IDE 照明情景库扩展' and click install.

<Image src="https://images.tuyaus.com/content-platform/hestia/1730428658b7c1299f233.png"  style={{zoom:'50%'}} />

### Usage

**1. After a successful installation, an 'Scene Library' entry will appear in the top navigation bar on the device page. Click on 'Scenario Library' to enter the scenario library management page.**

<Image src="/images/panel-plugins/dev-scene/scene2_en.png" style={{zoom:'100%'}} />

**2. On the scenario library management page, you can develop both the cloud scenario library and the local scenario library.**

**2.1 Cloud Scenario Library**

  2.1.1 After switching to the cloud scenario library<br/>
  2.1.2 Click to inject scenario library code capabilities<br/>
  <Image src="/images/panel-plugins/dev-scene/scene5_en.png" style={{zoom:'100%'}} />
  <br/>
  2.1.3 If it has already been injected, a confirmation box will pop up. After confirmation, the code will be overwritten and injected into the project.
  <Image src="/images/panel-plugins/dev-scene/scene4_en.png" style={{zoom:'100%'}} />
  2.1.4 Reference the corresponding code in the project to complete the development
```tsx
import { useDevice } from '@ray-js/panel-sdk';
import { jumpToCoolBar } from '@/standModel/sceneModel/CloudScene';

type Props = {};

export const Demo: React.FC<Props> = ({ style }) => {
  const { devInfo } = useDevice();

  const handleJumpToCoolBar = () => {
    const { devId, groupId } = devInfo || {};
    jumpToCoolBar(devId, groupId);
  };

  return (
    <View onClick={handleJumpToCoolBar}>
      Jump to Online Scenario Library
    </View>
  );
};
```

**2.2 Local Device Scenario**

  2.2.1 Switch to local scenario library<br/>
  2.2.2 Select the desired scenario effects, either single or all.<br/>
  2.2.3 After selecting the desired effect item, click Scenario Library Code Injection<br/>
  <Image src="/images/panel-plugins/dev-scene/scene3_en.png" style={{zoom:'100%'}} />
  <br/>
  2.2.4 If it has already been injected, a confirmation box will pop up, and after confirmation, the code will be overwritten into the project.
  <Image src="/images/panel-plugins/dev-scene/scene4_en.png" style={{zoom:'100%'}} />
  2.2.5 By referencing the corresponding code in the project, you can complete the development (If there are custom development needs, you can modify the corresponding code adaptation in the `@/standModel/sceneModel/LocalScene` folder)

```tsx
import LocalScene from '@/standModel/sceneModel/LocalScene';

export const Scene: React.FC<Props> = ({ style }) => {
  return (
    <View style={style} className={styles.list}>
      <LocalScene />
    </View>
  );
};
```


## Precautions
- Attention ⚠️: The online scenario library requires activation of advanced capabilities. You can directly ask in the official group or post an inquiry at https://tuyaos.com/viewforum.php?f=10.
- Note ⚠️: If the cloud scenario library fails to jump, please check whether it is configured in `app.config.ts`.
```json
"functionalPages": {
  "rayPlayCoolFunctional": {
    "appid": "tyg0szxsm3vog8nf6n"
  }
}
```

## Release Notes

### v0.0.9

Release Date: 2024.10.25

- Support cloud scenario library
- Support local scenario library