ViewerAPI

Interface ViewerAPI

The ViewerAPI provides methods to interact with the viewer.

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"

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);

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.

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);
 }
);

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);

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 {
    addPointsToSet(id: number, pois: PointOfInterest[]): number[];
    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;
    changePointsInSet(
        poiSetId: number,
        poiIds: number[],
        pois: PointOfInterest[],
    ): void;
    changePOISet(id: number, properties: POISetProperties): POISetProperties;
    changePOIStyle(
        poiStyleId: number,
        properties: POIStyleProperties,
    ): POIStyleProperties;
    changePolyline(polylineId: number, properties: PolylineProperties): void;
    changeSetting<T extends string>(
        viewerSetting: T,
        value: ViewerSettingType<T>,
    ): boolean;
    changeXREdgeCompare(
        properties: XREdgeCompareProperties,
    ): XREdgeCompareProperties;
    clearBackground(): void;
    createCollectionFromGizmo(
        includeOverlappingNodes: boolean,
    ): Promise<number>;
    createGeometry(userGeoData: UserGeometryData): number;
    createHeatmap(properties: HeatmapProperties): number;
    createPointCloud(
        points: CloudPoint[],
        properties?: PointCloudProperties,
    ): number;
    createPOISet(properties?: POISetProperties): number;
    createPOIStyle(properties?: POIStyleProperties): 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[];
    getPOISetData(id: number): POISetProperties;
    getPOISets(): number[];
    getPOIStyleData(poiStyleId: number): POIStyleProperties;
    getPOIStyles(): 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;
    removePointsFromSet(id: number, poiIds: number[]): void;
    removePOISet(id: number): void;
    removePOIStyle(poiStyleId: 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

addPointsToSet animateViewToViewmatrix cancelDrawingMode changeGlobalHeatmapConfig changeHeatmap changeMagnifier changePointCloud changePointsInSet changePOISet changePOIStyle changePolyline changeSetting changeXREdgeCompare clearBackground createCollectionFromGizmo createGeometry createHeatmap createPointCloud createPOISet createPOIStyle 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 getPOISetData getPOISets getPOIStyleData getPOIStyles getProjectionMatrix getState getToCoordinateSystemMatrix getViewMatrix getXREdgeCompareProperties hideAllLineMarkers hideAllMarkers hideAllPointMarkers hideGizmo hidePointMarker highlightArc highlightBBox highlightCircularArc highlightEntity highlightLine highlightPoint isSnappingEnabled leaveColorCompareMode leaveDrawingMode readSetting removeGeometry removeHeatmap removePointCloud removePointsFromSet removePOISet removePOIStyle 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

  • 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.

  • Experimental

    Experimental. May be changed in the future without notice.

    Configures global heatmap settings and triggers a ViewerHeatmapConfigChangedEvent.

    Parameters

    Returns void

    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,
});
  • 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

    Returns void

    // [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 });
  • Experimental

    Experimental. May be changed in the future without notice.

    Changes points in an existing POI set.

    Triggers a ViewerPOISetPointsChangedEvent event if the points were changed successfully.

    Parameters

    • poiSetId: number

      The ID of the POI set

    • poiIds: number[]

      The IDs of the POIs to change.

    • pois: PointOfInterest[]

      The new PointOfInterest data. The length of this array must match the length of the poiIds array.

    Returns 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

  • 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.

    ViewerSettingStrings for a list of available viewer settings.

  • Clears the viewer's background.

    Returns void

  • Parameters

    • includeOverlappingNodes: boolean

    Returns Promise<number>

  • Parameters

    • userGeoData: UserGeometryData

    Returns number

  • Experimental

    Experimental. May be changed in the future without notice.

    Creates a new heatmap and triggers a ViewerHeatmapCreatedEvent.

    Parameters

    Returns number

    ID of dataset or -1 if an error occurred.

    // 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 });

    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 });

  • 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

  • Disable highlighting for the handle

    Parameters

    • OptionalhighlightHandle: number

      : number

    Returns 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

    use ViewerSettingStrings.NAVIGATION_MODE instead

  • Enables or disables snapping in the viewer.

    Parameters

    • useSnapping: boolean

      Whether to enable or disable snapping.

    Returns 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.

  • 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.

    NodeType.AUX

  • 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.

    ViewDirection

  • 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.

  • 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.

  • 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.

    BoxVolume

  • 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.

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

    Returns void

  • Returns the current camera position as a 3D vector.

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

    The current camera position.

  • 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

  • Returns the webvis context to which the viewer belongs.

    Returns ContextAPI

    The context of the viewer

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

  • Returns
        | Float32Array<ArrayBufferLike>
        | [
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            number,
            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.

    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 changeGlobalHeatmapConfig
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);
  • Experimental

    Experimental. May be changed in the future without notice.

    Returns a list of all heatmap datasets.

    Returns number[]

    Array of heatmap dataset IDs.

  • Returns the ID of the viewer.

    Returns string

    The ID of the viewer

  • Experimental

    Experimental. May be changed in the future without notice.

    Returns a list of all point clouds.

    Returns number[]

    Array of point cloud IDs.

  • Experimental

    Experimental. May be changed in the future without notice.

    Returns the IDs of all existing POI sets.

    Returns number[]

    A number array representing the IDs of all POI sets.

  • Experimental

    Experimental. May be changed in the future without notice.

    Returns the IDs of all existing POI styles.

    Returns number[]

    A number array representing the IDs of all POI styles.

  • 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

    ViewerAPI.setProjectionMatrix

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

    The toCoordinateSystem matrix

    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.

  • 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

    ViewerAPI.setViewMatrix

  • 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

  • Parameters

    • center: Float32Array<ArrayBufferLike> | [number, number, number]
    • size: Float32Array<ArrayBufferLike> | [number, number, number]

    Returns number

  • Parameters

    • values: number[]
    • scale: number
    • markerIndex: number

    Returns void

  • Parameters

    • position: Float32Array<ArrayBufferLike> | [number, number, number]
    • markerIndex: number

    Returns void

  • Returns whether snapping is enabled in the viewer.

    Returns boolean

    true if snapping is enabled, false otherwise.

  • 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.

    ViewerSettingStrings for a list of available viewer settings.

  • Parameters

    • id: number

    Returns void

  • Experimental

    Experimental. May be changed in the future without notice.

    Removes points from an existing POI set.

    Triggers a ViewerPOISetPointsRemovedEvent event if the points were removed successfully.

    Parameters

    • id: number

      The ID of the POI set

    • poiIds: number[]

      The IDs of the POIs to remove.

    Returns void

  • Experimental

    Experimental. May be changed in the future without notice.

    Removes the POI set with the given identifier.

    Triggers a ViewerPOISetRemovedEvent event if the set was removed successfully.

    Parameters

    • id: number

      The ID of the POI set to be removed.

    Returns void

  • Experimental

    Experimental. May be changed in the future without notice.

    Removes the POI style with the given identifier.

    Triggers a ViewerPOIStyleRemovedEvent event if the style was removed successfully.

    Parameters

    • poiStyleId: number

      The ID of the POI style to be removed.

    Returns void

  • Removes the Polyline with the specified Id.

    Parameters

    • polylineId: number

      The Id of the Polyline which should be removed.

    Returns void

  • 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.

  • 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.

  • 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.

  • 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.

  • Returns void

    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

  • 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

  • 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

    ViewerAPI.getProjectionMatrix

  • 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.

  • 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.

  • Parameters

    • values: Float32Array<ArrayBufferLike> | [number, number, number, number, number, number]
    • Optionalscale: number
    • Optionalindex: number

    Returns void

  • Shows the BoxGizmo based on the specified properties. If the BoxGizmo is already visible the specified properties will be updated.

    Parameters

    Returns void

  • Parameters

    • position: Float32Array<ArrayBufferLike> | [number, number, number]
    • Optionalindex: number

    Returns 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

  • 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

    takeScreenshot is deprecated, please use requestScreenshot instead

  • Parameters

    • id: number
    • data: UserGeometryData

    Returns void