How to modify the TypeScript source files provided by HOOPS Communicator

This is an update to the instructions provided in the HOOPS Communicator documentation (link)

The Typescript source files used to generate the UI for the sample viewer are included in the package for reference. They can be found at web_viewer/typescript/ui . To build them, first you will need to copy the contents of web_viewer/src/js into web_viewer/typescript/ui/js you will also need to copy hoops_web_viewer.d.ts and tcc.d.ts located in web_viewer/typescript into web_viewer/typescript/ui/js . These files will be updated and will need to be re-deployed into the final folder once the TS files are re-compiled into their original source folders.

You will need to set the compiler options to the following in the tsconfig.json in the web_viewer\typescript\ui folder since typescript 3.7 is much more strict on compilation, update:

“compilerOptions”: {

“outFile”: “js/web_viewer_ui.js”,

“declaration”: true,

“typeRoots”: [ “…/…/node_modules/@types” ],

“types”: [ “sizzle”, “jquery”, “jqueryui” ],

"strictNullChecks": false,

"noUnusedLocals": false


You will want to run the following command line entries from the web_viewer/typescript/ui folder to install the dependencies for this process (npm I assume is already installed here):

// Install JQuery UI Items

npm i jquery-ui

// Install Typescript

npm install -g typescript

// Instally JQuery types for the project

npm install @types/jquery -D

npm install @types/jqueryui -D

// Run the typescript compilation of the ts files. (installed with the previous install)


You will then need to copy your newly created web_viewer_ui.js from the web_viewer\typescript\ui\js folder to the web_viewer\src\js for use.

1 Like