Read 《Scene Management》 to understand the concept of scenes. This chapter only explains the scene-related API.
By calling displayer.entireScenes(), the information of all scenes and scene groups in the room can be obtained. It will return a dictionary structured object, the Key is the address of the scene group, and the Value is an array indicating the information of all scenes in the scene group. For example, a room may return the following content after calling this method.
{
"/math": [
{name: "lesson-1", componentsCount: 0},
{name: "lesson-2", componentsCount: 0},
],
"/biology": [
{name: "lesson-1", componentsCount: 12},
{name: "lesson-2", componentsCount: 0},
{name: "lesson-3", componentsCount: 3},
],
"/biology/__tmp": [
{name: "temp", componentsCount: 0},
],
}
From the above content, we can extract the following information about the room:
There are three scene groups in this room /math, /biology, and /biology/__tmp. Among them, /math contains two scenes, namely /math/lesson-1 and /math/lesson-2. And /biology contains three scenes (not listed here) and a sub scene group /biology/__tmp. This sub-scene group also contains a scene /biology/__tmp/temp.
In addition, we can also read an address according to the displayer.scenePathType method to determine the type of the address. The specific code is as follows.
// Print "dir" for scene group
console.log(displayer.scenePathType("/biology/__tmp"));
// print "page" to indicate the scene
console.log(displayer.scenePathType("/math/lesson-1"));
// Print "none" to indicate that the address does not exist
console.log(displayer.scenePathType("/math/__tmp"));
putScenes(path: string, scenes: ReadonlyArray<SceneDefinition>, index?: number): void;
This method can insert one or more scenes into the specified path. For example, the following code can insert a scene into the room, and the path is /math/lesson.
room.putScenes("/math", [{name: "lesson"}]);
You can also insert multiple scenes through the following methods, and make the paths of these scenes: /math/lesson-1, /math/lesson-2, /math/lesson-3 .
room.putScenes("/math", [
{name: "lesson-1"},
{name: "lesson-2"},
{name: "lesson-3"},
]);
You can also initialize the background PPT content when inserting a scene.
room.putScenes("/math", [
{name: "lesson-1", {width: 720, height: 640, src: "http://my-domain/ppt-1.png"}},
{name: "lesson-2", {width: 720, height: 640, src: "http://my-domain/ppt-2.png"}},
{name: "lesson-3", {width: 720, height: 640, src: "http://my-domain/ppt-3.png"}},
]);
When calling room.putScenes, we can request the scene to be inserted into the specified index of the scene group by specifying the third parameter index.
For example, suppose there are multiple scenes in the scene group /biology/, so when we call room.entireScenes(), the following content will be returned.
{
"/biology": [
{name: "lesson-1", componentsCount: 12},
{name: "lesson-2", componentsCount: 0},
{name: "lesson-3", componentsCount: 3},
{name: "lesson-4", componentsCount: 7},
{name: "lesson-5", componentsCount: 1},
],
}
At this point we execute the following code.
room.putScenes("/biology", [{name: "foo"}, {name: "bar"}], 3);
When ``room.entireScenes()'' is called again, the following content will be returned.
{
"/biology": [
{name: "lesson-1", componentsCount: 12},
{name: "lesson-2", componentsCount: 0},
{name: "lesson-3", componentsCount: 3},
{name: "foo", componentsCount: 0},
{name: "bar", componentsCount: 0},
{name: "lesson-4", componentsCount: 7},
{name: "lesson-5", componentsCount: 1},
],
}
removeScenes(path: string): void;
This method can delete the scene corresponding to the specified address. For example, the following code will delete the scene whose address is /math/lesson-1.
room.removeScenes("/math/lesson-1");
If the address corresponds to a scene group, not only will the scene group be deleted, but all the scenes and scene groups directly or indirectly contained in the scene group will also be deleted.
room.removeScenes("/math");
You can also delete all scenes in the room through the following code.
room.removeScenes("/");
This will delete all scenes and immediately create an empty scene with /init and switch to that scene.
moveScene(originalPath: string, targetPath: string): void;
This method can move the scene corresponding to the address originalPath to the targetPath address. This method cannot move the scene group.
At the same time, the same room can only be in a specific scene. We can get the address of the current scene through the following code.
displayer.state.sceneState.scenePath;
We can also switch the current scene through the following methods.
// Switch to the scene with address /math/lesson-1
room.setScenePath("/math/lesson-1");
When the room is in a certain scene, the scene group to which the scene belongs is called the "context scene group". We can get all the scene information in the context scene group through the following code.
displayer.state.sceneState.scenes;
The return value of the code may grow like this.
[
{name: "lesson-1", componentsCount: 12},
{name: "lesson-2", componentsCount: 0},
{name: "lesson-3", componentsCount: 3},
]
Through the following code, we can know the index position of the current scene in the context scene group.
displayer.state.sceneState.index;
Knowing the index of the current scene, we can use the following code to make a function similar to "cut to the next page".
var nextIndex = room.state.sceneState.index + 1;
var scenes = room.state.sceneState.scenes;
if (nextIndex <scenes.length) {
room.setSceneIndex(nextIndex);
}