TypeScript's type checking system means that errors can be detected and corrected before the problematic code runs in the browser.
To learn more about TypeScript, visit https://www.TypeScriptLang.org
The TypeScript definition files for HOOPS Communicator are located in the web_viewer/typescript folder of the release package. These files contain definitions for the HOOPS Web Viewer API and default user interface. The files are described below:
|hoops_web_viewer.d.ts||Definition for the HOOPS Web Viewer API. This should be included for all HOOPS Communicator uses.|
|tcc.d.ts||Definition for HOOPS Web Viewer dependencies. This should be included for all HOOPS Communicator uses.|
|hoops_web_viewer_ui.d.ts||Definition for the HOOPS Web Viewer User Interface. This only needs to be included if you want to interact with default user interface components.|
With HOOPS Communicator TypeScript definition files, the code editor can provide inline documentation assistance for HOOPS Web Viewer components:
In this tutorial we'll write a small TypeScript application utilizing HOOPS Communicator using Visual Studio Code.
For this tutorial, the following software must be installed and configured:
Begin by extracting the tutorial files from the provided source archive. The archive contains several starter files that we'll use to build out the tutorial. Before beginning, we will need to copy the following files into the tutorial project directory from the HOOPS Communicator package:
We now have all of the HOOPS Communicator files needed to complete the tutorial. Finally, run the start_server() script located in the quick_start folder of the package. Open the project folder in Visual Studio Code.
For this tutorial, we'll also need to install some package dependencies. They are listed in the package.json file included in the starter archive.
Follow these steps to install the Node Package Manager and start a HOOPS Server:
- Begin by opening a new terminal by selecting Terminal > New Terminal from the main menu bar.
- Install the Node.js dependencies by running: npm install
- Start the http server by running: node_modules\.bin\http-server
- Point your browser to http://localhost:8080 to view the tutorial page. This page will not show anything at the moment – we will be bringing it to life in the next section of the tutorial.
Creating a Viewer
To create a viewer, we need to create an endpoint from the HOOPS Server by sending it a POST request. The HOOPS Server listens for requests on http://localhost:11182. Open up index.ts and add the following code to create a WebViewer:
As you are typing out the code, you will notice that Visual Studio Code's IntelliSense offers code completion hints and code assistance as you type. It will also highlight any errors that you make along the way.
Adding a Simple Callback
Let's add a callback to our page which will write the name of the node that is selected. Add a function in index.ts below the definition of createViewer() that will receive a NodeSelectionEvent array from the HOOPS Web Viewer:
This straightforward method gets the name of the node that was selected using the Model.getNodeName() method if an item was selected. The selectionBox div is then updated with the node's name or None if there was no selection.
At this point, if we rebuild our TypeScript code and then reload our browser page we will see our model appear. If we click on a part, the part's name will appear below the viewer:
In this tutorial we have seen how to set up our code editor for HOOPS Communicator development with TypeScript. We have also seen how TypeScript can speed up the development process and streamline debugging.