HOOPS Web Viewer programming concepts

When writing applications based on HOOPS Communicator, there are a number of top level objects that you will be interacting with. Each object exposes a corresponding area of the Communicator API.

Communicator.WebViewer

Creation of a <a href=”api_ref/typedoc/classes/communicator.webviewer.html”>WebViewer</a> object is the first step to using the Communicator API. This object exposes a number of general functions. You will use this class to set the endpoint for model streaming, register and activate operators, and actually start the viewer. The WebViewer also provides access to classes with additional specialized functionality.

    const viewer = new Communicator.WebViewer({
        endpointUri: "ws://localhost:55555",
        model: "myModel",
        containerId: "myContainer",
    });

    viewer.start();

Communicator.View

The <a href=”api_ref/typedoc/classes/communicator.view.html”>View</a> is the object that is used to interact with the camera and rendering related aspects of the WebViewer.

    const view = viewer.view;
    view.setProjectionMode(Communicator.Projection.Orthographic);
    view.setViewOrientation(Communicator.ViewOrientation.Top);
    view.setLineVisibility(false);

Communicator.Model

The <a href=”api_ref/typedoc/classes/communicator.model.html”>Model</a> is the object that is used to query and modify properties of parts. This Object also provides methods to interrogate the structure of the model.

    const model = viewer.model;
    model.setNodesFaceColor(someNodes, Communicator.Color.red());
    model.setNodesOpacity(someOtherNodes, 0.5);
    model.setNodesVisibility(moreNodes, false);

Communicator.MarkupManager

The <a href=”api_ref/typedoc/classes/communicator.markupmanager.html”>MarkupManager</a> is the object that is used to interact with viewer markup. This class is used to load, edit and export markup objects. It also provides access to a <a href=”api_ref/typedoc/interfaces/communicator.markup.markuprenderer.html”>MarkupRenderer</a> which can be used to draw your own custom markup items.

    const markupManager = viewer.markupManager;

    const markupjson = JSON.stringify(markupManager.exportMarkup());
    markupManager.loadMarkupData(markupjson);

    const savedViewHandle = markupManager.createMarkupView("My New View");
    markupManager.activateMarkupViewWithPromise(savedViewHandle);

Communicator.SelectionManager

The <a href=”api_ref/typedoc/classes/communicator.selectionmanager.html”>SelectionManager</a> is the object that is used to work with the selection facilities of the viewer. This object contains methods for performing picking and selection. It also supports multiple selection by managing a set of <a href=”api_ref/typedoc/classes/communicator.selection.selectionitem.html”>SelectionItems</a>.

Communicator.OperatorManager

The <a href=”api_ref/typedoc/classes/communicator.operatormanager.html”>OperatorManager</a> is the object that is used to interact with operator objects. This object contains methods for manipulating the operator stack. It also can be used for registering and retrieving <a href=”api_ref/typedoc/interfaces/communicator.operator.operator.html”>Operator</a> objects.

    const operatorManager = viewer.operatorManager;
    const customOperator = new MyCustomOperator();
    const customOperatorId = operatorManager.registerCustomOperator(customOperator);
    operatorManager.push(customOperatorId);
    operatorManager.push(Communicator.OperatorId.Walk);

Communicator.OverlayManager

The <a href=”api_ref/typedoc/classes/communicator.overlaymanager.html”>OverlayManager</a> is the object that is used to interact with overlays. Overlays are useful for rendering obejcts such as an axis triad or nav cube on top of the main viewport.

    const overlayManager = viewer.overlayManager;

    const overlayIndex = 2;
    const overlayCamera = new Communicator.Camera();

    overlayManager.setViewport(
        overlayIndex,
        Communicator.OverlayAnchor.UpperRightCorner,
        10,
        Communicator.OverlayUnit.Pixels,
        10,
        Communicator.OverlayUnit.Pixels,
        100,
        Communicator.OverlayUnit.Pixels,
        100,
        Communicator.OverlayUnit.Pixels,
    );

    overlayManager.addNodes(overlayIndex, nodeIds);
    overlayManager.setCamera(overlayIndex, overlayCamera);