Programming Guide   >   Viewing   >   Miscellaneous Topics

User Interface

While the HOOPS Web Viewer supports viewing functionality, it is primarily a library with an API for developing any kind of browser-based application which requires 3D (or 2D) engineering graphics. Every feature in the default UI maps to a publicly exposed function or set of functions in the API, making it easy to integrate the HOOPS Web Viewer into your web-application, using your own UI framework.

Default UI

The HOOPS Web Viewer with some of its default UI Components.

The HOOPS Web Viewer includes a complete viewing-oriented User Interface with a navigation bar, a model tree and other useful functionality. It utilizes jQuery UI, but most of its components (like the Model tree) are written from scratch. While the UI is not part of the public API of the HOOPS Web Viewer, its source code can be found in \web_viewer\src\js\web_viewer_ui.js. Please note that the JS source for the UI assumes a specific DOM structure that is defined in web_viewer\src\hoops_web_viewer_sample.html. If your plan is to modify or tweak the existing UI your best bet currently is to make changes in these two files directly. We are working on a more component-based architecture for the default UI, which would make it easier to modify and extend existing functionality without altering the source code.

Writing Your Own Model Tree

A functional model tree is one of the more complex UI components in any application. To understand the basics of how to implement a model tree please see the Model Tree programming guide as well as Chapter 6 of the Getting Started Tutorial.

The Getting Started Guide only scratches the surface of implementing a fully functional model tree. It does not deal with synchronization between the tree and 3D Model in case of attribute changes, or if a new subtree is loaded into an existing node. The following callbacks are important for keeping the model tree updated with changes in the 3D Model:

Apart from those specific callbacks that directly get triggered by changes in the model tree hierarchy, you also should make sure that your application responds to the various callbacks related to selection and visibility changes, as well as handle the creation of new markup elements. Please see the Callbacks programming guide for more information.

Model Tree UI Performance Optimizations

Dealing with a complex product structure hierarchy and keeping the model tree up-to-date can have performance implications. In order to mitigate those, you should only create DOM elements for model tree nodes that are actually visible, or are about to be opened by the user. For example, the default model tree only creates DOM elements for the first few top level nodes in the hierarchy, and only creates any nodes further in the hierarchy in an "on-demand" fashion, as the user opens its children.

You should also consider grouping nodes on the same hierarchy level into a single "container node", as each DOM element has a memory overhead and might take a while to be displayed.

A large number of child nodes grouped together in the default UI to improve performance and memory footprint.

Integrating with Modern UI Toolkits

We know that a lot of our Web Developers use UI toolkits such as react.js, vue.js, meteor, polymer or others. The HOOPS Web Viewer should integrate well with those libraries using the steps described in the Minimal Application chapter of the Getting Started Guide. Just to summarize them again here:

  1. Include hoops_web_viewer.js with a script tag.
  2. Create a new WebViewer object and pass it the correct model and endpoint, as well as the id of the canvas you want the HOOPS Web Viewer to render into.
  3. Start the HOOPS Web Viewer.
If you are running into any issues with a particular UI Toolkit, please don't hesistate to contact us for assistance.