As defined in ``css/BIMViewer.css``, the backdrop gets the following style, which allows the dialog to position itself correctly within the backdrop:

``css
.xeokit-busy-modal-backdrop {
position:relative;
}
``

If you need to tweak CSS relating to the dialog, search for "xeokit-busy-dialog" within ``css/BIMViewer.css``.

$3

Tooltips are not part of the core JavaScript for the viewer. Instead, viewer HTML elements are marked with ``data-tippy-content`` attributes that provide strings to show in their tooltips.

For example, the Toggle 2D/3D button's element looks like this:

``html

``

In the app/index.html file for the standalone viewer, we're using tippy.js, which automatically creates tooltips for those elements.

$3

The viewer loads colors for the various IFC element types straight from the IFC model, except where overrides are defined in the configuration file src/IFCObjectDefaults/IFCObjectDefaults.js.

You can add or remove configurations in that file if you need to customize the color or pickability of specific IFC types.

For example, to ensure that ``IfcWindow`` and ``IfcSpace`` types are initially visible, transparent and pickable (ie. able to be selected by clicking on them), you might configure that file as shown below:

``javascript
const IFCObjectDefaults = {
IfcSpace: {
visible: true,
pickable: true,
opacity: 0.2
},
IfcWindow: {
visible: true,
pickable: true,
opacity: 0.5
}
};

export {IFCObjectDefaults};
``

Sometimes IFC models have opaque ``IfcWindow`` and ``IfcSpace`` elements, so it's a good idea to have configurations in there so that we can see through them.



Programming API

Each model consists of an ``.XKT`` binary geometry file and a JSON metadata file which classifies its IFC elements.

Models are grouped within projects. Each project can contain multiple models, and has a JSON ``index.json`` manifest which lists its models.

At the root of ``./data`` is a JSON ``index.json`` manifest that lists all the projects.

The directory structure is designed to support RESTful queries, ie:


| Query | Path |
|---|---|
| Get all projects | ``GET ./data/index.json`` |
| Get project | ``GET ./data/WestRiversideHospital/index.json`` |
| Get model geometry | ``GET ./data/WestRiversideHospital/electrical/geometry.xkt`` |
| Get model metadata | ``GET ./data/WestRiversideHospital/electrical/metadata.json`` |

Shown below is a portion of the ``./data`` directory, showing the directory structure.

``
./data/
└── projects
├── index.json
├── Duplex
│   ├── index.json
│   └── models
│   └── design
│   ├── geometry.xkt
│   ├── issues.json
│   └── metadata.json
└── WestRiversideHospital
├── index.json
└── models
├── electrical
│   ├── geometry.xkt
│   └── metadata.json
├── fireAlarms
│   ├── geometry.xkt
│   └── metadata.json
├── plumbing
│   ├── geometry.xkt
│   └── metadata.json
├── sprinklers
│   ├── geometry.xkt
│   └── metadata.json
└── structure
├── geometry.xkt
└── metadata.json
``

The ``index.json`` at the root of ``./data`` shown below. The ``id`` of each project matches the name of that project's subdirectory.

``json
{
"projects": [
{
"id": "Duplex",
"name": "Duplex",
"position": [-20, 0.0, -10.0],
"scale": [1.0, 1.0, 1.0],
"rotation": [0.0, 0.0, 0.0]
},
{
"id": "WestRiversideHospital",
"name": "West Riverside Hospital",
"position": [20, 0.0, 0.0],
"scale": [1.0, 1.0, 1.0],
"rotation": [0.0, 0.0, 0.0]
},
//...
]
}
``

The ``index.json`` for the "WestRiversideHospital" project is shown below. The ``id`` of each model matches the name of that model's subdirectory, while ``name`` is the string that's displayed for the model in the viewers Models tab.

``json
{
"id": "WestRiversideHospital",
"name": "West Riverside Hospital",
"models": [
{
"id": "structure",
"name": "Hospital Structure",
"default": true
},
{
"id": "electrical",
"name": "Hospital Electrical"
},
{
"id": "sprinklers",
"name": "Hospital Sprinklers"
},
{
"id": "plumbing",
"name": "Hospital Plumbing"
},
{
"id": "fireAlarms",
"name": "Hospital Fire Alarms"
}
]
}
``

Adding Your Own Models

To add your own project to the database, you need to:

add a new project directory within ``./data``,
* add a subdirectory within that for each model, containing each model's ``.XKT`` and metadata files,
* add a ``index.json`` manifest of the models within the project directory, which lists the models, and
* list your project in the ``index.json`` at the root of ``./data``.

#### Loading models from a custom source

To load models from a different source than the file system, configure

``javascript


``

Building the Viewer

Initialize:

``
sudo npm install
``

Building ES6 module in ``/dist/main.js``:

``
npm run build
``

Then, within ``index.hml``, we use the module like so:

``javascript
import {Server, ViewerUI} from "./dist/main.js";

const server = new Server({
dataDir: "./data/"
});

const viewerUI = new ViewerUI(server, {
//...
});
```