Building the UI Skeleton


In this chapter, we will set up the skeleton code for attaching operators to the provided UI buttons.


  • Using browser event listeners to call the HC API

In subsequent sections we will be writing code to implement particular operators that will be used in our WebViewer. In order to actually toggle or use these operators, we must associate the viewer operators with UI elements in our application. From the provided HTML template, you can see we have four main buttons for user interaction.

  • Tranform handles to a node
  • Instance a node
  • Auto-arrange all parts on the printing plane
  • Open new models

While we will not be able to fully implement the event listener callbacks for these buttons yet, we can write the skeleton code that will enable us to easily fill in the hooks while we write the operators in the upcoming sections.

We have provided the buttons in the HTML for you, so we will simply set the event listeners for each button. We will set them in the constructor of our main class but will abstract the work out to a member function.

setEventListeners() {
// We will use the main viewer to gather scene information
let mainViewer = this._viewerList[0]
document.getElementById("arrange-button").onclick = () => {
document.getElementById("handles-button").onclick = () => {
document.getElementById("instance-button").onclick = () => {
document.getElementById("open-model-button").onclick = () => {
} // End setting event handlers

And in the constructor...


top_level:1 tutorials:1