Documentation

# Viewer SDK

We have pre-configured a VueJS environment to develop BIMData Viewer plugins. You can develop, test, build, package and share your plugin easily.

In this section, you get tutorials and references for installing and using the BIMData Viewer SDK (opens new window)

# Setup

First, you have to clone the sdk repo and install SDK dependencies :

git clone https://github.com/bimdata/bimdata-viewer-sdk.git
cd bimdata-viewer-sdk
npm install

Note:

If you want to create you own application you can copy the .env.example file :

cp .env.example .env

Then you can read this guide : Create your application (opens new window)

# Compiles and hot-reloads for development

npm run dev

# Usage

When going on http://localhost:8080 (opens new window), a simple interface will let you open the project and model you want. You can directly open one by opening an URL using specific Ids, for example : http://localhost:8080/viewer?cloudId=391&projectId=634&ifcId=1491 (opens new window)

# Create your plugin

npm run init-plugin

This tool asks you a couple of questions about the plugin you develop and generate from your answers boilerplate files for your plugin.

Files are created in the directory src/plugins/{name_of_your_plugin}.

Then import your newly created plugin in src/viewer/viewer.vue and add it to the registeredPlugin array.

import SnowflakesPlugin from "@/plugins/snowflakes/src/snowflakes.plugin.js";
import SplitPlugin from "@/plugins/split/src/split.plugin.js";

...
mounted() {
  this.$refs.bimdataViewerInstance.registerPlugins([
    SnowflakesPlugin,
    SplitPlugin,
  ]);
}
...

# Package your plugin

To load your plugin in a real environment, you need to package and publish your plugin. The plugin template is pre-configured with a rollup (opens new window) config that let you do this easily:

cd src/plugins/{your_plugin}
npm install
npm run build

This creates a dist/ folder in your plugin directory with a simple js file. This minified file includes the CSS and the assets (encoded in base64). It's not the most performant way, but it's the simplest and the Viewer loads many mega-bytes models anyway.

You can either copy-paste this file in your environment and load it at your convenience, or you can publish it on NPM. To publish it, update the package.json file with the proper information and just run an npm publish.

The code is minified to protect your code as much as possible.

# More info about how it works

The SDK itself uses Webpack to build. The packaging uses Rollup. If you need a complex JS flow, it may lead to some issues. To see these issues before deploying, load the packaged version in the SDK:

cd src/plugins/{your_plugin}
npm run watch

And load the dist version of the plugin:

import SplitPlugin from "@/plugins/split/dist/split.plugin.js";

...
mounted() {
  this.$refs.bimdataViewerInstance.registerPlugins([
    SplitPlugin,
  ]);
}
...

You can also edit the webpack and rollup config as you want.

← Release Notes →