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:

• Remove the header to be focused on the main content (the windows !).
• Add BIMData API demo ids to load a model.
• Disable some plugins to clean the "3d" window and simplify the example.

const viewer = makeBIMDataViewer({
  ui: {
    headerVisible: false,
  },
  api: {
    ifcIds: [15097],
    cloudId: 10344,
    projectId: 237466,
    accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
  },
  plugins: {
    bcf: false,
    "structure-properties": false,
    fullscreen: false,
    section: false,
    search: false,
    projection: false,
  }
});

Create and register windows

Then we register two windows named "window1" and "window2":

const window1 = {
  name: "window1",
  plugins: [],
};

const window2 = {
  name: "window2",
  plugins: [],
};

viewer.registerWindow(window1);
viewer.registerWindow(window2);

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({
  ui: {
    headerVisible: false,
  },
  api: {
    ifcIds: [15097],
    cloudId: 10344,
    projectId: 237466,
    accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
  },
  plugins: {
    bcf: false,
    "structure-properties": false,
    fullscreen: false,
    section: false,
    search: false,
    projection: false,
  }
});

// Create and register windows
const window1 = {
  name: "window1",
  plugins: [],
};

const window2 = {
  name: "window2",
  plugins: [],
};

viewer.registerWindow(window1);
viewer.registerWindow(window2);

// Mount custom layout
const customLayout = {
  ratios: [40, 60],
  children: [
    "3d",
    {
      ratios: [50, 50],
      direction: "column",
      children: ["window1", "window2"],
    },
  ],
};

viewer.mount("#viewerId", customLayout);