跳到主要内容

Scene Store

SceneStore is the preset manager. Scenes are named snapshots that apply multiple device settings at once — one tap to set the mood.

What it does​

Instead of adjusting lights, blinds, and thermostats individually, scenes let you say "Movie Night" and apply a whole preset of settings. Store manages create, activate, edit, and delete.

API reference​

Properties​

PropertyTypePurpose
sceneListESPCDFScene[]All scenes (computed from internal map)

Getting the store​

import { initCDF } from "@espressif/rainmaker-base-cdf";

const espCDF = await initCDF({ sdkAdaptorRegistry });
const { sceneStore } = espCDF;

How to use it​

Load scenes​

const group = espCDF.groupStore.getGroupById("group-id")!;
await group.getScenes();

// sceneStore is now populated
console.log(espCDF.sceneStore.sceneList.length);

Query scenes​

// All scenes
const scenes = espCDF.sceneStore.sceneList;

// Single scene by ID
const scene = espCDF.sceneStore.getScene("scene-id");

Create a scene​

const group = espCDF.groupStore.getGroupById("group-id")!;

// Check which devices support scenes first
const rows = await group.getSceneCapableDevices();
// rows: Array<{ node: ESPCDFNode; device: ESPCDFDevice; isMaxSceneReached: boolean }>

const scene = await group.createScene({
  id: "scene-movie",
  name: "Movie Night",
  nodes: ["node-1", "node-2"],
  actions: {
    "node-1": { Light: { Power: true, Brightness: 20, ColorTemp: 3000 } },
    "node-2": { Projector: { Power: true } },
  },
});

GroupStoreSynchronizer adds the returned entity to SceneStore.

Activate, rename, and delete scenes​

const scene = espCDF.sceneStore.getScene("scene-id")!;

// Activate — applies all device actions in the scene
await scene.activate();

// Rename
await scene.edit({ name: "Chill Night" });

// Delete — SceneStoreSynchronizer removes it from the store
await scene.remove();

Reactive scene grid​

import { observer } from "mobx-react-lite";
import type { ESPCDF } from "@espressif/rainmaker-base-cdf";

const SceneGrid = observer(function SceneGrid({ espCDF }: { espCDF: ESPCDF }) {
  const scenes = espCDF.sceneStore.sceneList;
  return (
    <FlatList
      data={scenes}
      numColumns={2}
      keyExtractor={(s) => s.id}
      renderItem={({ item }) => (
        <Pressable onPress={() => item.activate()}>
          <Text>{item.name}</Text>
        </Pressable>
      )}
    />
  );
});

See also​

Implementation

API Reference

On this page