# Make your own window layout
In this first tutorial, let's create a custom windows layout.
# Step by step
# Configure the viewer
We first create a viewer with a specific configuration:
- Blank viewer (no additional plugins).
- Add BIMData API demo ids to load a model.
- Disable some plugins to clean the "3d" window and simplify the example.
const viewer = makeBIMDataViewer({
api: {
modelIds: [15097],
cloudId: 10344,
projectId: 237466,
accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
},
ui: {
version: false,
bimdataLogo: false,
menuVisible: false,
},
plugins: {
bcf: false,
fullscreen: false,
measure3d: false,
projection: false,
search: false,
section: false,
"structure-properties": false,
viewer3d: {
navCube: false,
help: false,
modelLoader: "hidden",
},
"viewer3d-parameters": false,
"window-split": false,
}
});
# Create and register windows
Then we register two windows named "window1" and "window2":
// register empty plugin
const plugin = {
name: "test"
};
viewer.registerPlugin(plugin);
const window1 = {
name: "window1",
plugins: ["test"],
};
const window2 = {
name: "window2",
plugins: ["test"],
};
TIP
Note that this windows are without any plugins for now.
# Create custom layout and mount the viewer
Finally, we create a custom layout and mount the viewer into the DOM using the mount
method. Our layout is a three windows part layout :
- One "3d" native window on the left.
- Our two custom windows on the right, with "window1" on top on "window2".
const customLayout = {
ratios: [40, 60],
children: [
"3d",
{
ratios: [50, 50],
direction: "column",
children: ["window1", "window2"],
},
],
};
viewer.mount("#viewerId", customLayout);
WARNING
viewerId
must be the id of a valid HTML element (typically a <div>
element).
# Resulting viewer
# Complete code example
// Configure the viewer
const viewer = makeBIMDataViewer({
api: {
modelIds: [15097],
cloudId: 10344,
projectId: 237466,
accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
},
ui: {
version: false,
bimdataLogo: false,
},
plugins: {
bcf: false,
fullscreen: false,
measure3d: false,
projection: false,
search: false,
section: false,
"structure-properties": false,
viewer3d: {
navCube: false,
help: false,
modelLoader: "hidden",
},
"viewer3d-parameters": false,
"window-split": false,
}
});
// Create and register windows
const plugin = {
name: "test"
};
viewer.registerPlugin(plugin);
const window1 = {
name: "window1",
plugins: ["test"],
};
const window2 = {
name: "window2",
plugins: ["test"],
};
// Mount custom layout
const customLayout = {
ratios: [40, 60],
children: [
"3d",
{
ratios: [50, 50],
direction: "column",
children: ["window1", "window2"],
},
],
};
viewer.mount("#viewerId", customLayout);