ViewerAPI¶

Interface ViewerAPI

Visualizing 3D data with webvis: The ViewerAPI

Overview

The ViewerAPI provides methods to interact with the viewer.

Quick Start

A viewer is always part of a webvis context. Please note, that a context can contain one or more viewers. To create a viewer, you can use ContextAPI.createViewer.

const canvas1 = document.getElementById("canvas-element-1");
const canvas2 = document.getElementById("canvas-element-2");
const viewer1 = webvis.getContext().createViewer("viewer-id-1", canvas1);
const viewer2 = webvis.getContext().createViewer("viewer-id-2", canvas2);

console.log(viewer1.getID()); // "viewer-id-1"
console.log(viewer2.getID()); // "viewer-id-2"

The viewer's settings

Each viewer of a context has its own settings. You can configure the viewer by passing the initial settings to the ContextAPI.createViewer method. A full list of available viewer settings can be found in the ViewerSettingStrings.

const viewerSettings = {
  [ViewerSettingStrings.RENDER_MODE]: RenderMode.Topology,
  [ViewerSettingStrings.CAMERA_FIELD_OF_VIEW]: 60,
  // and other initial settings you would like to set ...
};
const viewer = webvis.getContext().createViewer("viewer-id", undefined, viewerSettings);

You can also change the settings of a viewer at runtime using ViewerAPI.changeSetting and read the current settings with ViewerAPI.readSetting. Use ViewerAPI.resetSetting to reset a setting to its default value.

viewer.changeSetting(ViewerSettingStrings.RENDER_MODE, RenderMode.Faces);
console.log(viewer.readSetting(ViewerSettingStrings.RENDER_MODE));
viewer.resetSetting(ViewerSettingStrings.RENDER_MODE);

Viewer settings vs. context settings

You can also change settings on the context level via ContextAPI.changeSetting. The difference between viewer settings and context settings is that viewer settings are only applied to the specific viewer while context settings are applied to all viewers of the context. The same applies to resetting a setting via ContextAPI.resetSetting.

This also means that if you read a setting via ContextAPI.readSetting, you will get the value of the context setting which might differ from the value of settings of a specific viewer.

Manipulating the camera view

The viewer provides methods to manipulate the camera's view. The most important one is ViewerAPI.setViewMatrix which allows you to set the view matrix directly. The view matrix transforms the geometry from world space into camera space.

const viewMatrix = [
 0.1, 0.2, 0.3, 0,
 0.4, 0.5, 0.6, 0,
 0.7, 0.8, 0.9, 0,
 0.5, 0.4, 0.6, 1
];
await viewer.setViewMatrix(viewMatrix);

If you prefer to animate the camera movement, you can use ViewerAPI.animateViewToViewmatrix:

const viewMatrix = [
 // your view matrix
];
const transitionTime = 2000; // 2 seconds
await viewer.animateViewToViewmatrix(viewMatrix, transitionTime);

If you want to read out the current view matrix at a specific frame, you can use ViewerAPI.getViewMatrix

const viewMatrix = viewer.getViewMatrix();

However, if you are interested in subscribing to view changes, you can listen to the ViewChangedEvent:

webvis.getContext().registerListener(
 [EventType.VIEW_CHANGED],
 (event) => {
  console.log("The view has changed. Current view matrix:", event.matrix);
 }
);

Receiving information about the 3D scene via the ViewerAPI

The ViewerAPI provides methods to retrieve information about the 3D scene based on the current view. For instance, you can get the node IDs which are included or overlapped by a specific 2D screen space rectangle using ViewerAPI.requestNodeIdsByRect:

const x = 100;
const y = 100;
const width = 200;
const height = 200;
includeOverlappingNodes = true;
const nodeIDs = await viewer.requestNodeIdsByRect(x, y, width, height, includeOverlappingNodes);

Another example is to get all TopologyHandles which are included and overlapped by a specific 2D screen space rectangle using ViewerAPI.requestTopologyHandlesByRect:

const x = 100;
const y = 100;
const width = 200;
const height = 200;
const topologyHandles = await viewer.requestTopologyHandlesByRect(x, y, width, height);

Taking screenshots

The ViewerAPI provides a method to take screenshots of the current view. You can use ViewerAPI.requestScreenshot to request a screenshot of the current viewer at the current view:

const width = 800;
const height = 600;
const mimeType = "image/png";
const resetCanvasSize = true;
const screenshot = await viewer.requestScreenshot(width, height, mimeType, resetCanvasSize);

interface ViewerAPI {
    animateViewToViewmatrix(
        matrix:
            | Float32Array<ArrayBufferLike>
            | [
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
            ],
        transitionTime?: number,
    ): Promise<void>;
    cancelDrawingMode(): void;
    changeGlobalHeatmapConfig(config: HeatmapConfig): void;
    changeHeatmap(id: number, properties: HeatmapProperties): void;
    changeMagnifier(
        properties: ViewerMagnifierProperties,
    ): ViewerMagnifierProperties;
    changePointCloud(
        pointCloudId: number,
        properties: PointCloudProperties,
    ): void;
    changePolyline(polylineId: number, properties: PolylineProperties): void;
    changeSetting<T extends string>(
        viewerSetting: T,
        value: ViewerSettingType<T>,
    ): boolean;
    changeXREdgeCompare(
        properties: XREdgeCompareProperties,
    ): XREdgeCompareProperties;
    createCollectionFromGizmo(
        includeOverlappingNodes: boolean,
    ): Promise<number>;
    createGeometry(userGeoData: UserGeometryData): number;
    createHeatmap(properties: HeatmapProperties): number;
    createPointCloud(
        points: CloudPoint[],
        properties?: PointCloudProperties,
    ): number;
    createPolyline(
        positions: number[],
        properties?: PolylineProperties,
    ): number;
    dehighlightEntity(highlightHandle?: number): void;
    enableNavigation(flag?: boolean): void;
    enableSnapping(useSnapping: boolean): void;
    enterColorCompareMode(): void;
    enterDrawingMode(): void;
    fitView(
        view?: Float32Array<ArrayBufferLike> | [number, number, number],
        up?: Float32Array<ArrayBufferLike> | [number, number, number],
        transitionTime?: number,
    ): Promise<void>;
    fitViewToAuxNode(nodeID: number, transitionTime?: number): Promise<void>;
    fitViewToDirection(
        direction?: ViewDirection,
        transitionTime?: number,
    ): Promise<void>;
    fitViewToNode(
        nodeID: number,
        view?: Float32Array<ArrayBufferLike> | [number, number, number],
        up?: Float32Array<ArrayBufferLike> | [number, number, number],
        transitionTime?: number,
    ): Promise<void>;
    fitViewToRectangle(
        x: number,
        y: number,
        width: number,
        height: number,
        transitionTime?: number,
    ): Promise<void>;
    fitViewToVolume(
        volume: BoxVolume,
        view?: Float32Array<ArrayBufferLike> | [number, number, number],
        up?: Float32Array<ArrayBufferLike> | [number, number, number],
        transitionTime?: number,
    ): Promise<void>;
    fitViewToVolumeFromDirection(
        volume: BoxVolume,
        direction?: ViewDirection,
        transitionTime?: number,
    ): Promise<void>;
    flipAuxToView(): void;
    forceRenderMode(renderMode: RenderMode): void;
    getActiveItem(): ActiveItemInfo;
    getAvailableGizmoTransformationModes(): number;
    getBoxGizmoProperties(): BoxGizmoProperties;
    getCameraPosition(): | Float32Array<ArrayBufferLike>
    | [number, number, number];
    getCameraProjectionType(): CameraProjectionType;
    getCenterOfRotation(): | Float32Array<ArrayBufferLike>
    | [number, number, number];
    getContext(): ContextAPI;
    getCurrentGizmoType(): GizmoType;
    getGizmoSize(): Float32Array<ArrayBufferLike> | [number, number, number];
    getGizmoTransform(): | Float32Array<ArrayBufferLike>
    | [
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
    ];
    getGizmoTransformationMode(): GizmoTransformationMode;
    getGlobalHeatmapConfig(): HeatmapConfig;
    getHeatmapColorSchemeLegend(): number[];
    getHeatmapData(id: number): HeatmapProperties;
    getHeatmaps(): number[];
    getID(): string;
    getInteractionLevel(): ViewerInteractionLevel;
    getMagnifierProperties(): ViewerMagnifierProperties;
    getPointCloudData(pointCloudId: number): PointCloudProperties;
    getPointClouds(): number[];
    getProjectionMatrix(): | Float32Array<ArrayBufferLike>
    | [
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
    ];
    getState(): ViewerState;
    getToCoordinateSystemMatrix(): | Float32Array<ArrayBufferLike>
    | [
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
    ];
    getViewMatrix(): [
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
    ];
    getXREdgeCompareProperties(): XREdgeCompareProperties;
    hideAllLineMarkers(): void;
    hideAllMarkers(): void;
    hideAllPointMarkers(): void;
    hideGizmo(): void;
    hidePointMarker(index?: number): void;
    highlightArc(
        pickedPt1: Float32Array<ArrayBufferLike> | [number, number, number],
        pickedPt3: Float32Array<ArrayBufferLike> | [number, number, number],
        center: Float32Array<ArrayBufferLike> | [number, number, number],
        axis: Float32Array<ArrayBufferLike> | [number, number, number],
        angle: number,
        measurementID: number,
    ): number;
    highlightBBox(
        center: Float32Array<ArrayBufferLike> | [number, number, number],
        size: Float32Array<ArrayBufferLike> | [number, number, number],
    ): number;
    highlightCircularArc(
        circularArcDescriptor: TopologyCircularArcDescriptor,
    ): number;
    highlightEntity(
        handle: TopologyHandle,
        highlightParameters?: ViewerHighlightParameters,
    ): Promise<number>;
    highlightLine(values: number[], scale: number, markerIndex: number): void;
    highlightPoint(
        position: Float32Array<ArrayBufferLike> | [number, number, number],
        markerIndex: number,
    ): void;
    isSnappingEnabled(): boolean;
    leaveColorCompareMode(): void;
    leaveDrawingMode(
        options?: ViewerDrawingProcessOptions,
    ): Promise<ViewerDrawingResult>;
    readSetting<T extends string>(viewerSetting: T): ViewerSettingType<T>;
    removeGeometry(id: number): void;
    removeHeatmap(id: number): void;
    removePointCloud(pointCloudId: number): void;
    removePolyline(polylineId: number): void;
    requestNodeIdsByRect(
        x: number,
        y: number,
        width: number,
        height: number,
        includeOverlappingNodes?: boolean,
    ): Promise<number[]>;
    requestScreenshot(
        width?: number,
        height?: number,
        mimeType?: "image/png" | "image/jpeg",
        resetCanvasSize?: boolean,
    ): Promise<string>;
    requestTopologyHandlesByRect(
        x: number,
        y: number,
        width: number,
        height: number,
    ): Promise<TopologyHandle[]>;
    requestXRAutoDetectScores(nodeIDs: number[]): Promise<XRAutoDetectScore[]>;
    reset(): void;
    resetSetting(viewerSetting: ViewerSettingStrings): void;
    restoreInitView(): void;
    setActiveItem(id: number, type: ActiveItemType): void;
    setCenterOfRotation(
        center?: Float32Array<ArrayBufferLike> | [number, number, number],
    ): Promise<void>;
    setCORGizmoVisible(flag: boolean): void;
    setGizmoTransformationMode(mode: GizmoTransformationMode): void;
    setInteractionLevel(level: ViewerInteractionLevel): void;
    setProjectionMatrix(
        matrix:
            | Float32Array<ArrayBufferLike>
            | [
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
            ],
    ): void;
    setView(
        position: Float32Array<ArrayBufferLike> | [number, number, number],
        target: Float32Array<ArrayBufferLike> | [number, number, number],
        upVector?: Float32Array<ArrayBufferLike> | [number, number, number],
        transitionTime?: number,
    ): Promise<void>;
    setViewMatrix(
        matrix:
            | Float32Array<ArrayBufferLike>
            | [
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
            ],
        transitionTime?: number,
    ): Promise<void>;
    showAxisMarker(
        values:
            | Float32Array<ArrayBufferLike>
            | [number, number, number, number, number, number],
        scale?: number,
        index?: number,
    ): void;
    showBoxGizmo(properties?: BoxGizmoProperties): void;
    showClippingBoxGizmo(clipRoomID: number): void;
    showPointMarker(
        position: Float32Array<ArrayBufferLike> | [number, number, number],
        index?: number,
    ): void;
    showSelectionBoxGizmo(
        size?: Float32Array<ArrayBufferLike> | [number, number, number],
        transform?:
            | Float32Array<ArrayBufferLike>
            | [
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
                number,
            ],
    ): void;
    showSelectionBoxGizmoFromVolume(volume?: BoxVolume): void;
    showSelectionTransformationGizmo(nodeIds: number[]): void;
    takeScreenshot(
        callback: (dataUrl: string) => void,
        mimeType?: string,
        width?: number,
        height?: number,
    ): void;
    updateGeometry(id: number, data: UserGeometryData): void;
}

Hierarchy (View Summary)

Index

Methods

animateViewToViewmatrix cancelDrawingMode changeGlobalHeatmapConfig changeHeatmap changeMagnifier changePointCloud changePolyline changeSetting changeXREdgeCompare createCollectionFromGizmo createGeometry createHeatmap createPointCloud createPolyline dehighlightEntity enableNavigation enableSnapping enterColorCompareMode enterDrawingMode fitView fitViewToAuxNode fitViewToDirection fitViewToNode fitViewToRectangle fitViewToVolume fitViewToVolumeFromDirection flipAuxToView forceRenderMode getActiveItem getAvailableGizmoTransformationModes getBoxGizmoProperties getCameraPosition getCameraProjectionType getCenterOfRotation getContext getCurrentGizmoType getGizmoSize getGizmoTransform getGizmoTransformationMode getGlobalHeatmapConfig getHeatmapColorSchemeLegend getHeatmapData getHeatmaps getID getInteractionLevel getMagnifierProperties getPointCloudData getPointClouds getProjectionMatrix getState getToCoordinateSystemMatrix getViewMatrix getXREdgeCompareProperties hideAllLineMarkers hideAllMarkers hideAllPointMarkers hideGizmo hidePointMarker highlightArc highlightBBox highlightCircularArc highlightEntity highlightLine highlightPoint isSnappingEnabled leaveColorCompareMode leaveDrawingMode readSetting removeGeometry removeHeatmap removePointCloud removePolyline requestNodeIdsByRect requestScreenshot requestTopologyHandlesByRect requestXRAutoDetectScores reset resetSetting restoreInitView setActiveItem setCenterOfRotation setCORGizmoVisible setGizmoTransformationMode setInteractionLevel setProjectionMatrix setView setViewMatrix showAxisMarker showBoxGizmo showClippingBoxGizmo showPointMarker showSelectionBoxGizmo showSelectionBoxGizmoFromVolume showSelectionTransformationGizmo takeScreenshot updateGeometry

Methods

animateViewToViewmatrix

animateViewToViewmatrix(
    matrix:
        | Float32Array<ArrayBufferLike>
        | [
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
        ],
    transitionTime?: number,
): Promise<void>
Animates to the specified view matrix. The optional transitionTime parameter allows for controlling animation speed.
Parameters
- matrix:
      | Float32Array<ArrayBufferLike>
      | [
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
      ]
  The new view matrix for the camera
- OptionaltransitionTime: number
  Defines the transition time for the camera movement in milliseconds. Default: 600.
Returns Promise<void>
A promise that resolves when the camera movement is finished.

cancelDrawingMode

cancelDrawingMode(): void
Leaves the 2D Drawing Mode and discards all drawings.

Returns void
Inherited from ViewerDrawingAPI.cancelDrawingMode

changeGlobalHeatmapConfig

changeGlobalHeatmapConfig(config: HeatmapConfig): void

Experimental

Experimental. May be changed in the future without notice.

Configures global heatmap settings and triggers a ViewerHeatmapConfigChangedEvent.

Parameters

config: HeatmapConfig
Settings to configure.

Returns void

Example: Configuring the heatmap:

viewer.changeGlobalHeatmapConfig({
  // set a color scheme
  colorScheme: webvis.HeatmapColorScheme.BLACKBODY,
  // calculated density is normalized, upper end of color scheme is mapped to maxValue
  maxValue: 100,
  // configure heatmap to be had 5 separated bands of colors (smooth gradient by default)
  colorBands: true,
  colorResolution: 5,
  // kernel defines the falloff from a point's center to its edge
  // this defaults to a gaussian curve, but other options are available
  kernel: webvis.HeatmapKernal.LINEAR,
  // scale all points' size uniformly for more/less overlap
  sizeFactor: 2,
  // scale all point's strength uniformly
  // this has the same effect as adjusting maxValue by the inverse factor
  strengthFactor: 1.5,
});

changeHeatmap

changeHeatmap(id: number, properties: HeatmapProperties): void
Experimental
Experimental. May be changed in the future without notice.

Changes one or more properties of the heatmap with the specified ID and triggers a ViewerHeatmapCreatedEvent.
Parameters
- id: number
  ID of dataset to update. Obtained using createHeatmap.
- properties: HeatmapProperties
  The properties of the Heatmap you want change.
Returns void
Example: Adding points to an existing heatmap dataset:
```
// [continued createHeatmapData example]

// add points
heatmapPositions.push(
  1, 3, 0, // fourth point
  3, 0, 1, // fifth point
)

// update data by passing id and data to override
viewer.changeHeatmap(heatmapDataId, { position: heatmapPositions });
```
Inherited from ViewerHeatmapAPI.changeHeatmap

changeMagnifier

changeMagnifier(
properties: ViewerMagnifierProperties,
): ViewerMagnifierProperties
Changes the properties of the viewers magnifier.
Parameters
- properties: ViewerMagnifierProperties
  Object of Properties which should be changed.
Returns ViewerMagnifierProperties
An Object with the changed Properties.

Inherited from ViewerMagnifierAPI.changeMagnifier

changePointCloud

changePointCloud(pointCloudId: number, properties: PointCloudProperties): void
Experimental
Experimental. May be changed in the future without notice.

Changes one or more properties of the point cloud with the specified ID and triggers a ViewerPointCloudChangedEvent.
Parameters
- pointCloudId: number
  The ID of the point cloud to update. Obtained using createPointCloud.
- properties: PointCloudProperties
  The properties of the point cloud you want change.
Returns void
Inherited from ViewerPointCloudAPI.changePointCloud

changePolyline

changePolyline(polylineId: number, properties: PolylineProperties): void
Changes the properties of the Polyline with the specified Id.
Parameters
- polylineId: number
  The Id of the Polyline which should be removed.
- properties: PolylineProperties
  The properties which should be changed.
Returns void
Inherited from ViewerPolylineAPI.changePolyline

changeSetting

changeSetting<T extends string>(
viewerSetting: T,
value: ViewerSettingType<T>,
): boolean
Changes the viewer setting with the given name to the given value.

Triggers a ViewerSettingChangedEvent if the new value is different from the old value.
Type Parameters
- T extends string
  The type of the setting to change.
Parameters
- viewerSetting: T
  Specifies the particular viewer setting which should be changed.
- value: ViewerSettingType<T>
  The new value for the setting.
Returns boolean
True if the setting was changed successfully, false otherwise.

See
ViewerSettingStrings for a list of available viewer settings.

changeXREdgeCompare

changeXREdgeCompare(
properties: XREdgeCompareProperties,
): XREdgeCompareProperties
Experimental
Sets the specified properties.
Parameters
- properties: XREdgeCompareProperties
  An object with all or a subset of properties to update.
Returns XREdgeCompareProperties
An object with the changed properties.

Inherited from ViewerXREdgeCompareAPI.changeXREdgeCompare

createCollectionFromGizmo

createCollectionFromGizmo(includeOverlappingNodes: boolean): Promise<number>
Parameters
- includeOverlappingNodes: boolean
Returns Promise<number>
Inherited from ViewerGizmoAPI.createCollectionFromGizmo

createGeometry

createGeometry(userGeoData: UserGeometryData): number
Parameters
- userGeoData: UserGeometryData
Returns number
Inherited from ViewerUserGeometryAPI.createGeometry

createHeatmap

createHeatmap(properties: HeatmapProperties): number
Experimental
Experimental. May be changed in the future without notice.

Creates a new heatmap and triggers a ViewerHeatmapCreatedEvent.
Parameters
- properties: HeatmapProperties
  Initial properties of the created Heatmap.
Returns number
ID of dataset or -1 if an error occurred.
Example: Adding heatmap data:
```
// positions are stored in a flat array
const heatmapPositions = [
  0, 1, 0, // first point
  0, 1, 1, // second point
  0, 0, 2, // third point
];
const heatmapDataId = viewer.createHeatmap({ position: heatmapPositions });
```
Example: Adding heatmap data with varying size/strength:
By specifying per-point size and/or strength, you can tweak ther influence on the heatmap. This example defines two points:
- Small radius and high strength. Represents a precisely located but highly important issue.
- High radius and low strength. Represents a low-priority issue affecting a larger area.
Note: The number of points defined by position, size and strength must match. Since position contains the coordinates, its length must be three times that of size and strength.
```
const position = [
  0, 0, 0, // first point
  1, 0, 0, // second point
];
const size = [
  0.2, // first point has small radius
  3, // second point has large radius
];
const strength = [
  2, // first point has a high impact
  0.5, // second point has a low impact
];
const heatmapDataId = viewer.createHeatmap({ position, size, strength });
```
Inherited from ViewerHeatmapAPI.createHeatmap

createPointCloud

createPointCloud(
points: CloudPoint[],
properties?: PointCloudProperties,
): number
Experimental
Experimental. May be changed in the future without notice.

Creates a new point cloud and triggers a ViewerPointCloudCreatedEvent.
Parameters
- points: CloudPoint[]
  The list of points.
- Optionalproperties: PointCloudProperties
  Initial properties of the created point cloud.
Returns number
The ID of the newly created point cloud.

Inherited from ViewerPointCloudAPI.createPointCloud

createPolyline

createPolyline(positions: number[], properties?: PolylineProperties): number
Creates a new Polyline with the specified positions and properties.
Parameters
- positions: number[]
  List of 3D positions which defines the Polyline.
- Optionalproperties: PolylineProperties
  The properties of the Polyline.
Returns number
Inherited from ViewerPolylineAPI.createPolyline

dehighlightEntity

dehighlightEntity(highlightHandle?: number): void
Disable highlighting for the handle
Parameters
- OptionalhighlightHandle: number
  : number
Returns void
Inherited from ViewerHighlightAPI.dehighlightEntity

enableNavigation

enableNavigation(flag?: boolean): void
Sets the enabled state of the 3D navigation to on or off. If called without any flag, the state will be toggled.
Parameters
- Optionalflag: boolean
  Specifies if the navigation should be enabled or disabled. Default: true.
Returns void

enableSnapping

enableSnapping(useSnapping: boolean): void
Parameters
- useSnapping: boolean
Returns void
Inherited from ViewerInteractionAPI.enableSnapping

enterColorCompareMode

enterColorCompareMode(): void
Enters the color compare mode which renders nodes depending on their Property.COMPARISON_GROUP.

In the color compare mode, the viewer will render the pixels of nodes with the Property.COMPARISON_GROUP set to the value ComparisonGroup.A in the color specified by the ViewerSettingStrings.COLOR_COMPARISON_FIRST_COLOR setting. The pixels of nodes with the Property.COMPARISON_GROUP set to the value ComparisonGroup.B will be rendered in the color specified by the ViewerSettingStrings.COLOR_COMPARISON_SECOND_COLOR setting. However, in this mode, the depth value at each pixel is compared between the two groups. If the depth values overlap within a certain threshold, the pixel is rendered in the color specified by the ViewerSettingStrings.COLOR_COMPARISON_MATCHING_COLOR setting.

By this approach, the viewer can visualize the differences between two groups of nodes ("3-color-comparison").

Returns void
See
- InteractionMode.COLOR_COMPARISON
- leaveColorCompareMode to leave the color compare mode.

enterDrawingMode

enterDrawingMode(): void
Enters the 2D drawing Mode where you can draw on top of your 3D Model.

Returns void
Inherited from ViewerDrawingAPI.enterDrawingMode

fitView

fitView(
    view?: Float32Array<ArrayBufferLike> | [number, number, number],
    up?: Float32Array<ArrayBufferLike> | [number, number, number],
    transitionTime?: number,
): Promise<void>
Positions the camera such that the whole geometry is fitting into the view. The optional view and up parameters allow to define a viewing direction and roll for the resulting camera pose, while the optional transitionTime parameter allows for controlling animation speed.

Triggers a ViewChangedEvent.
Parameters
- Optionalview: Float32Array<ArrayBufferLike> | [number, number, number]
  Defines the desired viewing direction
- Optionalup: Float32Array<ArrayBufferLike> | [number, number, number]
  Defines the desired camera orientation in conjunction with the viewing direction
- OptionaltransitionTime: number
  Defines the transition time for the camera movement in milliseconds. Default: 100.
Returns Promise<void>
A promise that resolves when the camera movement is finished.

fitViewToAuxNode

fitViewToAuxNode(nodeID: number, transitionTime?: number): Promise<void>
Positions the camera such that the aux node with the specified nodeID is fitting into the view. The optional transitionTime parameter allows for controlling animation speed.

Triggers a ViewChangedEvent.
Parameters
- nodeID: number
  The ID of the node on which the view will be fitted on
- OptionaltransitionTime: number
  Defines the transition time for the camera movement in milliseconds. Default: 100.
Returns Promise<void>
A promise that resolves when the camera movement is finished.

See
NodeType.AUX

fitViewToDirection

fitViewToDirection(
direction?: ViewDirection,
transitionTime?: number,
): Promise<void>
Positions the camera such that it looks from a specific ViewDirection. The optional transitionTime parameter allows for controlling animation speed.

Triggers a ViewChangedEvent.
Parameters
- Optionaldirection: ViewDirection
  The direction to fit. Default: ViewDirection.CURRENT.
- OptionaltransitionTime: number
  Defines the transition time for the camera movement in milliseconds. Default: 100.
Returns Promise<void>
A promise that resolves when the camera movement is finished.

See
ViewDirection

fitViewToNode

fitViewToNode(
    nodeID: number,
    view?: Float32Array<ArrayBufferLike> | [number, number, number],
    up?: Float32Array<ArrayBufferLike> | [number, number, number],
    transitionTime?: number,
): Promise<void>
Positions the camera such that the bounding box of the node with the nodeID is fitting into the view. The optional view and up parameter allow to define a viewing direction and roll for the resulting camera pose, while the optional transitionTime parameter allows for controlling animation speed.
Parameters
- nodeID: number
  The ID of the node on which the view will be fitted on
- Optionalview: Float32Array<ArrayBufferLike> | [number, number, number]
  The direction in which the camera will look on the node
- Optionalup: Float32Array<ArrayBufferLike> | [number, number, number]
  The orientation in which the camera will look on the node
- OptionaltransitionTime: number
  Defines the transition time for the cameramovement in milliseconds. Default: 100.
Returns Promise<void>
A promise that resolves when the camera movement is finished.

fitViewToRectangle

fitViewToRectangle(
    x: number,
    y: number,
    width: number,
    height: number,
    transitionTime?: number,
): Promise<void>
Positions the camera such that the view is focused onto the given rectangle. The optional transitionTime parameter allows for controlling animation speed.

Triggers a ViewChangedEvent.
Parameters
- x: number
  Specifies the X-coordinate of the 2D screen space rectangle in pixels.
- y: number
  Specifies the Y-coordinate of the 2D screen space rectangle in pixels.
- width: number
  Specifies the width of the 2D screen space rectangle in pixels.
- height: number
  Specifies the height of the 2D screen space rectangle in pixels.
- OptionaltransitionTime: number
  Defines the transition time for the camera movement in milliseconds. Default: 1000.
Returns Promise<void>
A promise that resolves when the camera movement is finished.

fitViewToVolume

fitViewToVolume(
    volume: BoxVolume,
    view?: Float32Array<ArrayBufferLike> | [number, number, number],
    up?: Float32Array<ArrayBufferLike> | [number, number, number],
    transitionTime?: number,
): Promise<void>
Positions the camera such that the view is focused onto the given BoxVolume. The optional view and up parameters allow to define a viewing direction and roll for the resulting camera pose, while the optional transitionTime parameter allows for controlling animation speed.

Triggers a ViewChangedEvent.
Parameters
- volume: BoxVolume
  A particular volume on which the view will be fitted
- Optionalview: Float32Array<ArrayBufferLike> | [number, number, number]
  Specifies the direction in which the camera will look on the volume
- Optionalup: Float32Array<ArrayBufferLike> | [number, number, number]
  Specifies the orientation in which the camera will look on the volume
- OptionaltransitionTime: number
  Defines the transition time for the camera movement in milliseconds. Default: 100.
Returns Promise<void>
A promise that resolves when the camera movement is finished.

See
BoxVolume

fitViewToVolumeFromDirection

fitViewToVolumeFromDirection(
    volume: BoxVolume,
    direction?: ViewDirection,
    transitionTime?: number,
): Promise<void>
Positions the camera such that it looks from the specified ViewDirection onto the specified BoxVolume. The optional transitionTime parameter allows for controlling animation speed.

Triggers a ViewChangedEvent.
Parameters
- volume: BoxVolume
  The volume on which the camera will be fitted
- Optionaldirection: ViewDirection
  The direction to fit. Default: ViewDirection.CURRENT.
- OptionaltransitionTime: number
  Defines the transition time for the camera movement in milliseconds. Default: 100.
Returns Promise<void>
A promise that resolves when the camera movement is finished.
See
- BoxVolume
- ViewDirection

flipAuxToView

flipAuxToView(): void
Flips specific elements in the auxiliary geometry (like text or specific polygons) with respect to the current view.

Returns void

forceRenderMode

forceRenderMode(renderMode: RenderMode): void
Forces the viewer to render in the specified RenderMode regardless of any other RenderMode settings. If RenderMode.Unset is passed, the viewer will switch back to the default mode, specified in ViewerSettingStrings.RENDER_MODE.
Parameters
- renderMode: RenderMode
  The render mode to force the viewer to render in.
Returns void

getActiveItem

getActiveItem(): ActiveItemInfo
Returns ActiveItemInfo
Inherited from ViewerGizmoAPI.getActiveItem

getAvailableGizmoTransformationModes

getAvailableGizmoTransformationModes(): number
Returns number
Inherited from ViewerGizmoAPI.getAvailableGizmoTransformationModes

getBoxGizmoProperties

getBoxGizmoProperties(): BoxGizmoProperties
Returns the properties of the BoxGizmo

Returns BoxGizmoProperties
The properties of the BoxGizmo

Inherited from ViewerGizmoAPI.getBoxGizmoProperties

getCameraPosition

getCameraPosition(): Float32Array<ArrayBufferLike> | [number, number, number]
Returns the current camera position as a 3D vector.

Returns Float32Array<ArrayBufferLike> | [number, number, number]
The current camera position.

getCameraProjectionType

getCameraProjectionType(): CameraProjectionType
Returns the current CameraProjectionType of the camera.

Returns CameraProjectionType
The current camera projection type.

See
ViewerSettingStrings.PROJECTION_TYPE

getCenterOfRotation

getCenterOfRotation(): Float32Array<ArrayBufferLike> | [number, number, number]
Returns the center of rotation being the point around which the camera rotates around.

Returns Float32Array<ArrayBufferLike> | [number, number, number]
A 3D vector representing the center of rotation

getContext

getContext(): ContextAPI
Returns the webvis context to which the viewer belongs.

Returns ContextAPI
The context of the viewer

getCurrentGizmoType

getCurrentGizmoType(): GizmoType
Returns GizmoType
Inherited from ViewerGizmoAPI.getCurrentGizmoType

getGizmoSize

getGizmoSize(): Float32Array<ArrayBufferLike> | [number, number, number]
Returns Float32Array<ArrayBufferLike> | [number, number, number]
Inherited from ViewerGizmoAPI.getGizmoSize

getGizmoTransform

getGizmoTransform(): | Float32Array<ArrayBufferLike>
| [
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
]
Returns
    | Float32Array<ArrayBufferLike>
    | [
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
    ]
Inherited from ViewerGizmoAPI.getGizmoTransform

getGizmoTransformationMode

getGizmoTransformationMode(): GizmoTransformationMode
Returns GizmoTransformationMode
Inherited from ViewerGizmoAPI.getGizmoTransformationMode

getGlobalHeatmapConfig

getGlobalHeatmapConfig(): HeatmapConfig
Experimental
Experimental. May be changed in the future without notice.

Return the current global heatmap configuration.

Returns HeatmapConfig
Current global heatmap configuration.

Inherited from ViewerHeatmapAPI.getGlobalHeatmapConfig

getHeatmapColorSchemeLegend

getHeatmapColorSchemeLegend(): number[]

Experimental

Experimental. May be changed in the future without notice.

Returns data which can be used to create a legend. The data has 4 color channels (RGBA) each in a range between 0 and 255 packed into an Array.

Returns number[]

Color scheme legend data.

Example: Creating a legend:

Note: Canvas can be resized using CSS width/height settings to achieve desired display size.

const legend = document.createElement("canvas");
// fetch data
const legendData = viewer.getHeatmapColorSchemeLegend();
// width matches colorResolution set using configureHeatmap
const width = legendData.length / 4;
// canvas requires ImageData as source
const img = new ImageData(new Uint8ClampedArray(legendData), width, 1);
// resize canvas render resolution
legend.width = width;
legend.height = 1;
// get canvas 2d context and fill canvas with data
const ctx = legend.getContext("2d");
ctx.putImageData(img, 0, 0);

getHeatmapData

getHeatmapData(id: number): HeatmapProperties
Experimental
Experimental. May be changed in the future without notice.

Returns the properties of a heatmap dataset.
Parameters
- id: number
  ID of dataset to query. Obtained using createHeatmap.
Returns HeatmapProperties
Properties of the heatmap dataset.

Inherited from ViewerHeatmapAPI.getHeatmapData

getHeatmaps

getHeatmaps(): number[]
Experimental
Experimental. May be changed in the future without notice.

Returns a list of all heatmap datasets.

Returns number[]
Array of heatmap dataset IDs.

Inherited from ViewerHeatmapAPI.getHeatmaps

getID

getID(): string
Returns the ID of the viewer.

Returns string
The ID of the viewer

getInteractionLevel

getInteractionLevel(): ViewerInteractionLevel
Returns the Viewer interaction level.

Returns ViewerInteractionLevel
The current interaction level.

Inherited from ViewerInteractionAPI.getInteractionLevel

getMagnifierProperties

getMagnifierProperties(): ViewerMagnifierProperties
Returns the current properties of the magnifier.

Returns ViewerMagnifierProperties
The current properties of the magnifier.

Inherited from ViewerMagnifierAPI.getMagnifierProperties

getPointCloudData

getPointCloudData(pointCloudId: number): PointCloudProperties
Experimental
Experimental. May be changed in the future without notice.

Returns the properties of a point cloud dataset.
Parameters
- pointCloudId: number
  The ID of point cloud to query. Obtained using createPointCloud.
Returns PointCloudProperties
Properties of the point cloud.

Inherited from ViewerPointCloudAPI.getPointCloudData

getPointClouds

getPointClouds(): number[]
Experimental
Experimental. May be changed in the future without notice.

Returns a list of all point clouds.

Returns number[]
Array of point cloud IDs.

Inherited from ViewerPointCloudAPI.getPointClouds

getProjectionMatrix

getProjectionMatrix(): | Float32Array<ArrayBufferLike>
| [
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
]
Returns the current projection matrix. The 4x4 transformation matrix is represented as a flat 16-element array in column-major order.

Returns
    | Float32Array<ArrayBufferLike>
    | [
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
    ]
The current projection matrix

See
ViewerAPI.setProjectionMatrix

getState

getState(): ViewerState
Returns ViewerState
Inherited from ViewerStateAPI.getState

getToCoordinateSystemMatrix

getToCoordinateSystemMatrix(): | Float32Array<ArrayBufferLike>
| [
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
]
Returns
    | Float32Array<ArrayBufferLike>
    | [
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
        number,
    ]
The toCoordinateSystem matrix

Deprecated
use CoordinateSystemAPI.getCoordinateSystemMatrix instead

Returns a 4x4 rotation matrix which is used to transform the internal default right-handed coordinate system with X and Y as front plane axis to the configured one.

getViewMatrix

getViewMatrix(): [
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
]
Returns the current view matrix. The 4x4 transformation matrix is represented as a flat 16-element array in column-major order.

Returns [
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
    number,
]
The current view matrix of the camera

See
ViewerAPI.setViewMatrix

getXREdgeCompareProperties

getXREdgeCompareProperties(): XREdgeCompareProperties
Experimental
Returns the currently set XR Edge Compare properties.

Returns XREdgeCompareProperties
The currently set properties.

Inherited from ViewerXREdgeCompareAPI.getXREdgeCompareProperties

hideAllLineMarkers

hideAllLineMarkers(): void
Returns void
Inherited from ViewerGizmoAPI.hideAllLineMarkers

hideAllMarkers

hideAllMarkers(): void
Returns void
Inherited from ViewerGizmoAPI.hideAllMarkers

hideAllPointMarkers

hideAllPointMarkers(): void
Returns void
Inherited from ViewerGizmoAPI.hideAllPointMarkers

hideGizmo

hideGizmo(): void
Hides the currently visible Gizmo

Returns void
Inherited from ViewerGizmoAPI.hideGizmo

hidePointMarker

hidePointMarker(index?: number): void
Parameters
- Optionalindex: number
Returns void
Inherited from ViewerGizmoAPI.hidePointMarker

highlightArc

highlightArc(
    pickedPt1: Float32Array<ArrayBufferLike> | [number, number, number],
    pickedPt3: Float32Array<ArrayBufferLike> | [number, number, number],
    center: Float32Array<ArrayBufferLike> | [number, number, number],
    axis: Float32Array<ArrayBufferLike> | [number, number, number],
    angle: number,
    measurementID: number,
): number
Parameters
- pickedPt1: Float32Array<ArrayBufferLike> | [number, number, number]
- pickedPt3: Float32Array<ArrayBufferLike> | [number, number, number]
- center: Float32Array<ArrayBufferLike> | [number, number, number]
- axis: Float32Array<ArrayBufferLike> | [number, number, number]
- angle: number
- measurementID: number
Returns number
Inherited from ViewerHighlightAPI.highlightArc

highlightBBox

highlightBBox(
center: Float32Array<ArrayBufferLike> | [number, number, number],
size: Float32Array<ArrayBufferLike> | [number, number, number],
): number
Parameters
- center: Float32Array<ArrayBufferLike> | [number, number, number]
- size: Float32Array<ArrayBufferLike> | [number, number, number]
Returns number
Inherited from ViewerHighlightAPI.highlightBBox

highlightCircularArc

highlightCircularArc(
circularArcDescriptor: TopologyCircularArcDescriptor,
): number
Parameters
- circularArcDescriptor: TopologyCircularArcDescriptor
Returns number
Inherited from ViewerHighlightAPI.highlightCircularArc

highlightEntity

highlightEntity(
handle: TopologyHandle,
highlightParameters?: ViewerHighlightParameters,
): Promise<number>
Enable highlighting of the entity , which matches the attributes informed in the viewerDataSelector
Parameters
- handle: TopologyHandle
  : IViewerHighlightSelector
- OptionalhighlightParameters: ViewerHighlightParameters
Returns Promise<number>
the highlightHandle, which it reqed to remove the highlighting

Inherited from ViewerHighlightAPI.highlightEntity

highlightLine

highlightLine(values: number[], scale: number, markerIndex: number): void
Parameters
- values: number[]
- scale: number
- markerIndex: number
Returns void
Inherited from ViewerHighlightAPI.highlightLine

highlightPoint

highlightPoint(
position: Float32Array<ArrayBufferLike> | [number, number, number],
markerIndex: number,
): void
Parameters
- position: Float32Array<ArrayBufferLike> | [number, number, number]
- markerIndex: number
Returns void
Inherited from ViewerHighlightAPI.highlightPoint

isSnappingEnabled

isSnappingEnabled(): boolean
Returns boolean
Inherited from ViewerInteractionAPI.isSnappingEnabled

leaveColorCompareMode

leaveColorCompareMode(): void
Leaves the color compare mode. For a description of the color compare mode see enterColorCompareMode.

Returns void
See
- Property.COMPARISON_GROUP
- InteractionMode.COLOR_COMPARISON
- enterColorCompareMode to enter the color compare mode.

leaveDrawingMode

leaveDrawingMode(
options?: ViewerDrawingProcessOptions,
): Promise<ViewerDrawingResult>
Leaves the 2D Drawing Mode and returns the processed 2D drawing data which can be used to create a Drawing with the help of the DrawingAPI.
Parameters
- Optionaloptions: ViewerDrawingProcessOptions
  Options to configure the result of the processing.
Returns Promise<ViewerDrawingResult>
The processed 2D drawing data.

Inherited from ViewerDrawingAPI.leaveDrawingMode

readSetting

readSetting<T extends string>(viewerSetting: T): ViewerSettingType<T>
Returns the current value of a viewer setting.
Type Parameters
- T extends string
  The type of the setting to read.
Parameters
- viewerSetting: T
  The name of the setting to read.
Returns ViewerSettingType<T>
The current value of the setting.

See
ViewerSettingStrings for a list of available viewer settings.

removeGeometry

removeGeometry(id: number): void
Parameters
- id: number
Returns void
Inherited from ViewerUserGeometryAPI.removeGeometry

removeHeatmap

removeHeatmap(id: number): void
Experimental
Experimental. May be changed in the future without notice.

Removes the heatmap with the specified ID and triggers a ViewerHeatmapRemovedEvent.
Parameters
- id: number
  The ID of heatmap to remove. Obtained using createHeatmap.
Returns void
Inherited from ViewerHeatmapAPI.removeHeatmap

removePointCloud

removePointCloud(pointCloudId: number): void
Experimental
Experimental. May be changed in the future without notice.

Removes the point cloud with the specified ID and triggers a ViewerPointCloudRemovedEvent.
Parameters
- pointCloudId: number
  The ID of point cloud to remove. Obtained using createPointCloud.
Returns void
Inherited from ViewerPointCloudAPI.removePointCloud

removePolyline

removePolyline(polylineId: number): void
Removes the Polyline with the specified Id.
Parameters
- polylineId: number
  The Id of the Polyline which should be removed.
Returns void
Inherited from ViewerPolylineAPI.removePolyline

requestNodeIdsByRect

requestNodeIdsByRect(
    x: number,
    y: number,
    width: number,
    height: number,
    includeOverlappingNodes?: boolean,
): Promise<number[]>
Returns a list of all node IDs which are included or overlapped by the specified 2D screen space rectangle.
Parameters
- x: number
  Specifies the X-Coordinate of the 2D screen space rectangle.
- y: number
  Specifies the Y-Coordinate of the 2D screen space rectangle.
- width: number
  Specifies the width of the 2D screen space rectangle.
- height: number
  Specifies the height of the 2D screen space rectangle.
- OptionalincludeOverlappingNodes: boolean
  Specifies that the result should include nodes which overlap the specified 2D screen space rectangle as well. Default: false.
Returns Promise<number[]>
List of all node IDs which are included or overlapped by the specified 2D screen space rectangle.

requestScreenshot

requestScreenshot(
    width?: number,
    height?: number,
    mimeType?: "image/png" | "image/jpeg",
    resetCanvasSize?: boolean,
): Promise<string>
Requests a screenshot of the current viewer at the current view.
Parameters
- Optionalwidth: number
  The width of the requested screenshot. If not specified it uses the width of the current view.
- Optionalheight: number
  The height of the requested screenshot. If not specified it uses the height of the current view.
- OptionalmimeType: "image/png" | "image/jpeg"
  A string indicating the image format. Default: image/png.
- OptionalresetCanvasSize: boolean
  If 'true', it ensures that the “normal” screen-dependent resolution is used again after taking the screenshot. Default: true.
Returns Promise<string>
- A string containing the requested screenshot as dataUrl.

requestTopologyHandlesByRect

requestTopologyHandlesByRect(
    x: number,
    y: number,
    width: number,
    height: number,
): Promise<TopologyHandle[]>
Returns a list of all TopologyHandles which are included and overlapped by the specified 2D screen space rectangle.
Parameters
- x: number
  Specifies the X-coordinate of the 2D screen space rectangle in pixels.
- y: number
  Specifies the Y-xoordinate of the 2D screen space rectangle in pixels.
- width: number
  Specifies the width of the 2D screen space rectangle in pixels.
- height: number
  Specifies the height of the 2D screen space rectangle in pixels.
Returns Promise<TopologyHandle[]>
A list of all TopologyHandles which are included and overlapped by the specified 2D screen space rectangle.

requestXRAutoDetectScores

requestXRAutoDetectScores(nodeIDs: number[]): Promise<XRAutoDetectScore[]>

Experimental

Request scores caluclated based on the ratio of matching/non-matching pixels of the XR Edge Compare feature. Passed nodes must be in XR Edge Compare mode mode to produce a valid score. Multiple concurrent requests of this method are not allowed.

Example

// Get an instance of the ContextAPI
const myContext : ContextAPI = webvis.getContext( "example" )

// The node to request a result for
const nodeID = 1;

// Enable XR Edge Compare mode for node
myContext.setProperty(nodeID, webvis.Property.COMPARISON_GROUP, webvis.ComparisonGroup.XR_EDGE);

async function update() {
    // Request score
    const result = await myContext.getViewer().requestXRAutoDetectScores([nodeID]);

    // Check score value
    console.log(result[0].score > 0.5 ? "Positive" : "Negative");

    // Re-request score twice per second as long as node is in XR Edge Compare mode
    if (result[0].details.edgeCompareEnabled) {
        setTimeout(update, 500);
    }
}

// Start loop
update();

Parameters

nodeIDs: number[]
The nodeIDs to process.

Returns Promise<XRAutoDetectScore[]>

A promise containing a list of auto detect score results.

reset

reset(): void
Returns void
Deprecated
Will be removed in a future version because it is not needed anymore to switch between render setups.

The viewer is destroyed and reinitialized with renderSetup selection

resetSetting

resetSetting(viewerSetting: ViewerSettingStrings): void
Resets the value of a viewer setting to its default value.

Triggers a ViewerSettingChangedEvent.
Parameters
- viewerSetting: ViewerSettingStrings
  The name of the viewer setting that should be reset.
Returns void
See
ViewerSettingStrings for a list of available viewer settings.

restoreInitView

restoreInitView(): void
Sets the camera to the initial position specified in the ViewerSettingStrings.INIT_VIEW setting. If the setting is not defined or empty, there will be no effect.

Triggers a ViewChangedEvent if the ViewerSettingStrings.INIT_VIEW setting is set.

Returns void

setActiveItem

setActiveItem(id: number, type: ActiveItemType): void
Parameters
- id: number
- type: ActiveItemType
Returns void
Inherited from ViewerGizmoAPI.setActiveItem

setCenterOfRotation

setCenterOfRotation(
center?: Float32Array<ArrayBufferLike> | [number, number, number],
): Promise<void>
Sets the center of rotation being the point around which the inspection camera rotates. If no center parameter is supplied the center of rotation is set to the center of all currently loaded models.
Parameters
- Optionalcenter: Float32Array<ArrayBufferLike> | [number, number, number]
  The new center of rotation represented by a 3D vector
Returns Promise<void>
A promise that resolves when the center of rotation is set

setCORGizmoVisible

setCORGizmoVisible(flag: boolean): void
Parameters
- flag: boolean
Returns void
Inherited from ViewerGizmoAPI.setCORGizmoVisible

setGizmoTransformationMode

setGizmoTransformationMode(mode: GizmoTransformationMode): void
Parameters
- mode: GizmoTransformationMode
Returns void
Inherited from ViewerGizmoAPI.setGizmoTransformationMode

setInteractionLevel

setInteractionLevel(level: ViewerInteractionLevel): void
Sets the Viewer interaction level.
Parameters
- level: ViewerInteractionLevel
  Specifies the interaction level.
Returns void
Inherited from ViewerInteractionAPI.setInteractionLevel

setProjectionMatrix

setProjectionMatrix(
    matrix:
        | Float32Array<ArrayBufferLike>
        | [
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
        ],
): void
Sets the current projection matrix. The 4x4 transformation matrix must be represented as a flat 16-element array in column-major order.
Parameters
- matrix:
      | Float32Array<ArrayBufferLike>
      | [
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
      ]
  The new projection matrix
Returns void
See
ViewerAPI.getProjectionMatrix

setView

setView(
    position: Float32Array<ArrayBufferLike> | [number, number, number],
    target: Float32Array<ArrayBufferLike> | [number, number, number],
    upVector?: Float32Array<ArrayBufferLike> | [number, number, number],
    transitionTime?: number,
): Promise<void>
Sets the camera position, its target and the up-vector. If the up-vector is not defined, the previous up-vector is kept. The optional transitionTime parameter allows for controlling animation speed.
Parameters
- position: Float32Array<ArrayBufferLike> | [number, number, number]
  Specifies the new position or center of the camera
- target: Float32Array<ArrayBufferLike> | [number, number, number]
  Specifies the point on which the camera will look
- OptionalupVector: Float32Array<ArrayBufferLike> | [number, number, number]
  Specifies the new orientation of the camera
- OptionaltransitionTime: number
  Defines the transition time for the camera movement in milliseconds. Default: 0.
Returns Promise<void>
A promise that resolves when the camera movement is finished.

setViewMatrix

setViewMatrix(
    matrix:
        | Float32Array<ArrayBufferLike>
        | [
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
        ],
    transitionTime?: number,
): Promise<void>
Sets the view matrix. The optional transitionTime parameter allows for controlling animation speed.
Parameters
- matrix:
      | Float32Array<ArrayBufferLike>
      | [
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
      ]
  The new view matrix for the camera
- OptionaltransitionTime: number
  Defines the transition time for the camera movement in milliseconds. Default: 0.
Returns Promise<void>
A promise that resolves when the camera movement is finished.

showAxisMarker

showAxisMarker(
    values:
        | Float32Array<ArrayBufferLike>
        | [number, number, number, number, number, number],
    scale?: number,
    index?: number,
): void
Parameters
- values: Float32Array<ArrayBufferLike> | [number, number, number, number, number, number]
- Optionalscale: number
- Optionalindex: number
Returns void
Inherited from ViewerGizmoAPI.showAxisMarker

showBoxGizmo

showBoxGizmo(properties?: BoxGizmoProperties): void
Shows the BoxGizmo based on the specified properties. If the BoxGizmo is already visible the specified properties will be updated.
Parameters
- Optionalproperties: BoxGizmoProperties
  The properties of the BoxGizmo.
Returns void
Inherited from ViewerGizmoAPI.showBoxGizmo

showClippingBoxGizmo

showClippingBoxGizmo(clipRoomID: number): void
Parameters
- clipRoomID: number
Returns void
Inherited from ViewerGizmoAPI.showClippingBoxGizmo

showPointMarker

showPointMarker(
position: Float32Array<ArrayBufferLike> | [number, number, number],
index?: number,
): void
Parameters
- position: Float32Array<ArrayBufferLike> | [number, number, number]
- Optionalindex: number
Returns void
Inherited from ViewerGizmoAPI.showPointMarker

showSelectionBoxGizmo

showSelectionBoxGizmo(
    size?: Float32Array<ArrayBufferLike> | [number, number, number],
    transform?:
        | Float32Array<ArrayBufferLike>
        | [
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
        ],
): void
Parameters
- Optionalsize: Float32Array<ArrayBufferLike> | [number, number, number]
- Optionaltransform:
      | Float32Array<ArrayBufferLike>
      | [
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
          number,
      ]
Returns void
Inherited from ViewerGizmoAPI.showSelectionBoxGizmo

showSelectionBoxGizmoFromVolume

showSelectionBoxGizmoFromVolume(volume?: BoxVolume): void
Parameters
- Optionalvolume: BoxVolume
Returns void
Inherited from ViewerGizmoAPI.showSelectionBoxGizmoFromVolume

showSelectionTransformationGizmo

showSelectionTransformationGizmo(nodeIds: number[]): void
Parameters
- nodeIds: number[]
Returns void
Inherited from ViewerGizmoAPI.showSelectionTransformationGizmo

takeScreenshot

takeScreenshot(
    callback: (dataUrl: string) => void,
    mimeType?: string,
    width?: number,
    height?: number,
): void
Takes a screenshot from the current view.
Parameters
- callback: (dataUrl: string) => void
  A callback containing the result which is executed after all Rendering operations are finished.
- OptionalmimeType: string
  A string indicating the image format. The default type is image/png.
- Optionalwidth: number
  The width of the requested screenshot. If not specified it uses the width of the current view.
- Optionalheight: number
  The height of the requested screenshot. If not specified it uses the height of the current view.
Returns void
Deprecated
takeScreenshot is deprecated, please use requestScreenshot instead

updateGeometry

updateGeometry(id: number, data: UserGeometryData): void
Parameters
- id: number
- data: UserGeometryData
Returns void
Inherited from ViewerUserGeometryAPI.updateGeometry

Did you find this page useful? Please give it a rating:

★ ★ ★ ★ ★

Thank you for rating this page!

Any issues or feedback?

What kind of problem would you like to report?

This page needs code samples
Code samples do not work
Information is missing
Please tell us more about what's wrong:
Information is incorrect
Please tell us more about what's wrong:
Information is unclear or confusing
Please tell us more about what's wrong:
The page is rendered incorrectly (styling/CSS)
Give Feedback

ViewerAPI¶

Interface ViewerAPI

Visualizing 3D data with webvis: The ViewerAPI

Overview

Quick Start

The viewer's settings

Viewer settings vs. context settings

Manipulating the camera view

Receiving information about the 3D scene via the ViewerAPI

Taking screenshots

Hierarchy (View Summary)

Index

Methods

Methods

animateViewToViewmatrix

Parameters

Returns Promise<void>

cancelDrawingMode

Returns void

changeGlobalHeatmapConfig

Parameters

Returns void

Example: Configuring the heatmap:

changeHeatmap

Parameters

Returns void

Example: Adding points to an existing heatmap dataset:

changeMagnifier

Parameters

Returns ViewerMagnifierProperties

changePointCloud

Parameters

Returns void

changePolyline

Parameters

Returns void

changeSetting

Type Parameters

Parameters

Returns boolean

See

changeXREdgeCompare

Parameters

Returns XREdgeCompareProperties

createCollectionFromGizmo

Parameters

Returns Promise<number>

createGeometry

Parameters

Returns number

createHeatmap

Parameters

Returns number

Example: Adding heatmap data:

Example: Adding heatmap data with varying size/strength:

createPointCloud

Parameters

Returns number

createPolyline

Parameters

Returns number

dehighlightEntity

Parameters

Returns void

enableNavigation

Parameters

Returns void

enableSnapping

Parameters

Returns void

enterColorCompareMode

Returns void

See

enterDrawingMode

Returns void

fitView

Parameters

Returns Promise<void>

fitViewToAuxNode

Parameters

Returns
| Float32Array<ArrayBufferLike>
| [
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
]