Introduction

This article aims to present a in-depth discussion of working with operators in HOOPS Communicator, as well as provide additional resources to explore more on your own.

Discussion

In order to allow the user to interact with the 3D model, your application needs to respond to various input events, such as those from a mouse, keyboard, or touch device. While you are free to handle user input yourself using the browser engine directly, we provide the concept of "Operators" in the API to simplify and enhance this concept. An Operator is a hook into the user input event loop with a predefined structure to respond to user input in a sensible way.

If you prefer to learn by video, you can view the tutorial below.

The Web Viewer has a set of pre-built, standard operators for various user interactions like camera manipulation, selection or inserting markup, but you can also write your own operators with completely custom functionality.

Directly out of the box, you can use any of these prebuilt operators in your own application. If one of the existing pre-built operators does not meet your needs, or you need a more complex or modified version of that operator, you can create your own custom operator. You can do this by either extending the capability of a pre-built operator class through inheritance, or you can build up your operator from scratch by implementing the Communicator.Operator interface.

Operators are managed with the OperatorManager object, which is a property of the WebViewer. The OperatorManager manages a stack of operator objects, each listening for input events captured and thrown by Communicator. As such, its methods are similar to the traditional stack operations: push, pop, peek, etc. When an operator is on the stack, it is considered active and will receive events, and run any associated callback functionality. You can see the OperatorManager API Reference here.

Built in operator objects are instantiated on WebViewer initialization. However, only a few operators (Select, Navigate, Axis Triad, NavCube, etc) are active at the start. In order to retrieve a particular operator object to either push/pop to/from the stack, or to modify its behavior, you can use the getOperator method in the OperatorManager class. getOperator takes an enumeration parameter, and those enumerations can be referenced here.

Looking at the API reference, we can see what built in operators are available for use. Take a look at each, and see what additional APIs can be called to modify the behavior of each.

We also encourage you took take a look at the Typescript source code for these built-in operators. We ship the full source code for you to review and modify to our own liking in your own operators. You can find the source in {HC_INSTALL_DIR/web_viewer/typescript/operators and its child directories.

Operators have priority on the operator stack and events propagate down the stack to each operator, unless explicitly handled by an earlier operator. This allows you to have multiple active operators in your scene (i.e. Selection and Navigation operators can be used together and respond to the same click events). However, this also means you should take care in what is on your operator stack, as you could create a scenario of undesirable clashing operators. If you have clashing operators, consider handling the event in your operator to stop propagating the event, or reorganize your operator stack.

To create your own operators, see code snippets, read more about the operator stack, or find other operator information, please take a look at our documentation in our related articles.

Deep Dive: Operators in HOOPS Communicator

Introduction

Discussion

Related Articles