SlimLabs BIM Viewer SDK

Overview

SlimLabs is the driving company in transforming the way we use building information in our daily lives. Our aim is to make the use of rich, location based building information available to everyone. We do this by making tools available that are powered by BIM.

The SlimLabs BIM Viewer is a web based application that enabled users and businesses to easily embed BIM models into their applications.

Contact us at [email protected] if you want to make use of the SlimLabs BIM Viewer.

1. Introduction

Layer model introduction

The SDK consists of two layers:

1. API layer
2. Data Logic Integration layer

To meet the demand of customization and easy of integration, there are different ways you can get started. The SDK consists of different layers as depicted in the image below. The layers are as follows:

Layers

a. API layer

The lowest level is the API layer. This layer consists of the FloorPlan, ModelView and Database services. The advantage of using this layer is that you have total freedom in customising your integration. The disadvantage is that it requires a steep learning curve and effort.

SlimLabsBimViewer.FloorPlanService

The {@link FloorPlanService} handles all FloorPlan related operations. You can for example, load spaces or objects into view. Set the stroke and color of individual elements and add text to the view. The FloorPlan is interactive out of the box, but that can be disabled.

SlimLabsBimViewer.BuildingViewService

The {@link BuildingViewService} handles all 3d view related operations. You can add models to the view, set the color and transparency of elements, and make sections to make inspecting certain parts of the model easier.

SlimLabsBimViewer.DatabaseService

The {@link DatabaseService} handles all calls related to retrieving data from the database. You can for example, query for spaces with a specific name or drill down through the IFC structure. Please refer to the Rest API documentation for further details on the data structure.

b. Integration layer

The integration layer consists of a Data-, Interaction- and ThemeController. The DataController contains most of the logic and will be the main interface for defining which services will be initialised and which parts of the project should be rendered.

SlimLabsBimViewer.DataController

The {@link DataController} can be used to have granular control over data. Where in the API layer you have to load elements yourself, the DataController handles this for you and abstracting it to setting, for example, the active storey instead of loading the individual elements yourself. The DataController will also listen for events coming from the lowest level API's and convert it to the actual data. So for example, if the user clicks a certain element, the DataController will fetch the data for you and emit it through the callback that is registered.

SlimLabsBimViewer.InteractionController

The {@link InteractionController} interacts with the {@link ThemeController} to determine the visual interaction preset. So if the user clicks an element, the InteractionController will make sure that that element gets a different color.

SlimLabsBimViewer.ThemeController

The {@link ThemeController} can be used to specify presets of how what the interaction will look like, for example which color a selected element will get on click.

2. Loading the SDK Layers

The SDK can be loaded in different ways, depending on the application stack that you are using. There are currently three different module systems you can use to load the SlimLabsBimViewer SDK:

1. UMD

If you have no idea what all of this means, pick this one. It is build as a Universal Module Definition and can be used straight into your browser.

https://slimlabs.nl/developer/viewer_sdk/(beta/)vx.x.x/slimlabs-viewer-sdk.umd.min.js

As script tag (SlimLabsBimViewer will be bound to the window object)

  <script src="https://slimlabs.nl/developer/viewer_sdk/(beta/)vx.x.x/slimlabs-viewer-sdk.umd.min.js"></script>
  <script>
    console.log(window.SlimLabsBimViewer);
  </script>

Or require it into your application:

  var SlimLabsBimViewer = require("SlimLabsBimViewer");

2. AMD

AMD users can load the ADM build:

https://slimlabs.nl/developer/viewer_sdk/(beta/)vx.x.x/slimlabs-viewer-sdk.amd.min.js

3. CommonJs

The SDK is also available as CommonJs package:

https://slimlabs.nl/developer/viewer_sdk/(beta/)vx.x.x/slimlabs-viewer-sdk.commonjs.min.js

    var SlimLabsBimViewer = require("SlimLabsBimViewer");

3. Using the SDK to add views to your site

The following code snippets allows you to easily embed a single project into view:

HTML

FloorPlan

To add a FloorPlan to your site, add a section where the SDK can load the FloorPlans in. The SDK will make sure that the view inside it is responsive.

An example would be:

<div id="put-floorplan-here"></div>

ModelView

To add a 3D Model to your site, add a section where the SDK can load the models in. The SDK will make sure that the view inside it is responsive.

<div id="put-model-here"></div>

JavaScript

With the HTML in place, you can use the DataController to initialise the SDK and specify which project should be rendered:

  
  SlimLabsBimViewer.DataController.init({
    userToken: "one-of-your-user-tokens",
    modeloptions: {
      viewParentId: "put-floorplan-here",
    },
    floorplanoptions: {
      viewParentId: "put-model-here",
    },
  }, function() {
    console.log("SDK has been initialized");
  });
  

After the SDK has been initialised, you can set an active project:

  
  SlimLabsBimViewer.DataController.setActiveProjectById({
    projectId: "a-project-id"
  });
  

And that is it to get started, to learn more about the SDK, start off with the {@link DataController}