Getting Started with Angular

Create a new Project

This guide presumes you have already Nodejs, Npm and Angular installed as a global package

Create a new folder and execute the following command in powershell

ng new bimct-viewer-demo

The command will prompt you for some questions on how to create the project. The answers depend on the scope of your application.

For this guide just accept the defaults by pressing enter.

After the command is finished a new folder will be created with a skeleton angular application.

Note: All the commands and files mentioned from now and on should be run/edited on the newly created bimct-viewer-demo folder.

Setup npm registry

To download Nomitech's propriaty packages you need to setup

To do so on the newly created folder create a file named .npmrc with the following contents

registry=http://subversion.nomitech.us:8081/repository/npm-group/

To login to this registry run the following command on Powershell

npm login --registry=http://subversion.nomitech.us:8081/repository/npm-group/

This will create a .npmrc file in your home folder with the following contents

  //subversion.nomitech.us:8081/repository/npm-group/:_authToken=NpmToken.XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

Add bimct-viewer package

Run the following command to install the latest version of bimct-viewer

npm install @nomitech/bimct-viewer --save

Setup angular.json

Edit the file angular.json and perform the following changes

Find the following path in this json file

projects["bimct-viewer-demo"].architect.build.options

Change the assets property so that it looks like this

"assets": [
    "src/favicon.ico",
    "src/assets",
    {
    "glob": "**/*",
    "input": "./node_modules/@nomitech/bimct-viewer/assets",
    "output": "./assets"
    },
    {
    "glob": "**/*",
    "input": "./node_modules/@nomitech/bimct-viewer/wasm/no-threads",
    "output": "./assets"
    },
    {
    "glob": "**/*",
    "input": "./node_modules/@nomitech/bimct-viewer/css",
    "output": "./assets"
    }              
]

Change the scripts property so that it looks like this

"scripts": [
    "node_modules/@nomitech/bimct-viewer/wasm/no-threads/BIMEngine-Core.js"
]

The assets configiration tell the angular compiler to copy files to the assets directory of the application

The scripts configuration tell the angular compiler to include extra javascript files to the compiled output

Setup index.html

Edit the file src/index.html

Add the following line inside the head tag

  <link rel="stylesheet" href="assets/bimct-viewer.css" />

This will load globaly the bimct-viewer.css

Setup the app components

Setup the HTML

Edit the src/app/app.component.html

Replace the contents of the file with the following

<div class="content" role="main">
  <div #bimctViewer id="bimct-viewer">
  </div>
</div>

Setup the CSS

Edit the src/app/app.components.css

Replace the contents of the file with the following

:host {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .content {
      flex-grow: 1;
      display: flex;
  }

  #bimct-viewer {
    flex-grow: 1;
  }

This will make the bimct-viewer element to fill the whole page

Note: The div must have non-zero width and height for the application to work correctly

Setup the Code

Edit the src/app/app.component.ts

Replace the contents of the file with the following

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { initializeBimEngineCore, BimCTWebGL2Renderer, RendererInititializationOptions, MEASUREMENT_SYSTEM } from '@nomitech/bimct-viewer'

let isEngineInitialized = false;

const options: RendererInititializationOptions = {
  ecoRenderingOn: true,
  gui: {
    useContextMenu: true,
    useToolbar: true,
    useSettingsWindow: true,
    useDesignTreeWindow: true,
    usePropertiesWindow: true,
    useFilterElementsWindow: true,
    useTouchWidget: true,
  },
  rollOverEnabled: false,
  snappingEnabled: true,
  preloadProperties: false,
  measurementSystem: MEASUREMENT_SYSTEM.METRIC,
  logging: {
    console: {
      comments: true,
      debug: false,
      errors: true,
      warnings: true
    }
  },
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild("bimctViewer") bimctViewerElement!: ElementRef;
  private renderer!: BimCTWebGL2Renderer;


  title = 'bimct-viewer-demo';

  async ngOnInit() {
    await this.initializeEngine();
  }

  async ngAfterViewInit() {
    await this.initializeEngine();
    this.renderer = new BimCTWebGL2Renderer(this.bimctViewerElement.nativeElement, options);
    await this.renderer.init();
    this.renderer.selectionChangeEvent.subscribe((renderer, elements) => {
      console.log('Elements selected: ', elements);
    });
    await this.renderer.loadModelFromUrl("assets/InstituteProps.bimct");
    this.renderer.beginDrawLoop();
  }

  async initializeEngine(){
    if (!isEngineInitialized) {
      await initializeBimEngineCore({ wasmBinaryUrl: "assets/BIMEngine-Core.wasm" });
      isEngineInitialized = true;
    }
  }
}

Setup the sample BIM file

Copy the file InstituteProps.bimct to the folder src/assets/

Build the application

Run the following command

ng build

This will build everything on the dist folder

Test the application

Run the following command

ng serve

This will start a server on a port, usually 4200. Check the output of the command to see the port number.

Open your browser on http://localhost:4200/ to use the application

Typescript code explanation

let isEngineInitialized = false;

async initializeEngine(){
    if (!isEngineInitialized) {
      await initializeBimEngineCore({ wasmBinaryUrl: "assets/BIMEngine-Core.wasm" });
      isEngineInitialized = true;
    }
  }

The engine must be initialized exactly one time before a renderer is created. To make sure that this is the case we have created a variable outside the class that will keep the initialization state.

  <div #bimctViewer id="bimct-viewer">
  </div>

@ViewChild("bimctViewer") bimctViewerElement!: ElementRef;

Here we get a reference for the bimct-viewer div from html to Typescript

const options: RendererInititializationOptions = {
 ...
}

This are the initialization options of the renderer. See the renderer reference for all options

this.renderer = new BimCTWebGL2Renderer(this.bimctViewerElement.nativeElement, options);
    await this.renderer.init();
    ...
    this.renderer.beginDrawLoop();

Create a renderer object using the bimctViewer element injected above, as well the defined options and then initialize the renderer. Finally tell the renderer to start the animation.

    this.renderer.selectionChangeEvent.subscribe((renderer, elements) => {
      console.log('Elements selected: ', elements);
    });

Subscribe to one of the renderer events.

    await this.renderer.loadModelFromUrl("assets/InstituteProps.bimct");

Load a model to the renderer