JSDoc: Class: VolumeImageViewer

Constructor

new VolumeImageViewer(options)

Create a viewer instance for displaying VOLUME images.

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Attributes	Default	Description
`metadata`	Array.<metadata.VLWholeSlideMicroscopyImage>			Metadata of DICOM VL Whole Slide Microscopy Image instances that should be diplayed.
`client`	Object	<optional>		A DICOMwebClient instance for search for and retrieve data from an origin server over HTTP
`clientMapping`	Object	<optional>		Mapping of SOP Class UIDs to DICOMwebClient instances to search for and retrieve data from different origin servers, depending on the type of DICOM object. Using a mapping can be usedful, for example, if images, image annotations, or image analysis results are stored in different archives.
`preload`	number	<optional>	0	Number of resolution levels that should be preloaded
`controls`	Array.<string>	<optional>	[]	Names of viewer control elements that should be included in the viewport
`debug`	boolean	<optional>	false	Whether debug features should be turned on (e.g., display of tile boundaries)
`tilesCacheSize`	number	<optional>	1000	Number of tiles that should be cached to avoid repeated retrieval for the DICOMweb server
`primaryColor`	Array.<number>	<optional>	[0, 126, 163]	Primary color of the application
`highlightColor`	Array.<number>	<optional>	[140, 184, 198]	Color that should be used to highlight things that get selected by the user

Source:

viewer.js, line 725

Members

areROIsVisible

Whether annotated regions of interest are currently visible.

Source:

viewer.js, line 3016

boundingBox :Array.<Array.<number>>

Bounding box that contains the images.

Type:

Array.<Array.<number>>

Source:

viewer.js, line 2110

frameOfReferenceUID :string

Frame of Reference UID.

Type:

string

Source:

viewer.js, line 2052

isDragPanInteractionActive :boolean

Whether drag pan interaction is active.

Type:

boolean

Source:

viewer.js, line 2316

isDragZoomInteractionActive :boolean

Whether drag zoom interaction is active.

Type:

boolean

Source:

viewer.js, line 2325

isDrawInteractionActive :boolean

Whether draw interaction is active

Type:

boolean

Source:

viewer.js, line 2307

isModifyInteractionActive :boolean

Whether modify interaction is active.

Type:

boolean

Source:

viewer.js, line 2661

isSelectInteractionActive :boolean

Whether select interaction is active.

Type:

boolean

Source:

viewer.js, line 2591

isTranslateInteractionActive :boolean

Whether translate interaction is active.

Type:

boolean

Source:

viewer.js, line 2334

numberOfROIs

Number of annotated regions of interest.

Source:

viewer.js, line 2696

numLevels :number

Number of zoom levels.

Type:

number

Source:

viewer.js, line 2043

physicalOffset :Array.<number>

Physical offset of images. Offset along the X and Y axes of the slide coordinate system in millimeter unit.

Type:

Array.<number>

Source:

viewer.js, line 2074

physicalSize :Array.<number>

Physical size of images. Length along the X and Y axes of the slide coordinate system in millimeter unit.

Type:

Array.<number>

Source:

viewer.js, line 2089

size :Array.<number>

Size of the viewport.

Type:

Array.<number>

Source:

viewer.js, line 1842

Methods

activateDragPanInteraction(options)

Activate drag pan interaction.

Parameters:

Name	Type	Description
`options`	Object	Options.

Source:

viewer.js, line 2525

activateDragZoomInteraction(options)

Activate drag zoom interaction.

Parameters:

Name	Type	Description
`options`	Object	Options.

Source:

viewer.js, line 2435

activateDrawInteraction(options)

Activate the draw interaction for graphic annotation of regions of interest.

Parameters:

Name Type Attributes Description

options

Object

Drawing options

Properties

Name	Type	Attributes	Description
`geometryType`	string		Name of the geometry type (point, circle, box, polygon, freehandpolygon, line, freehandline)
`maxPoints`	number	<optional>	Maximum number of points for "line" geometry
`minPoints`	number	<optional>	Mininum number of points for "line" geometry
`styleOptions`	Object	<optional>	Style options

styleOptions.stroke

Object

Style options for the contour of the geometry

Properties

Name	Type	Description
`color`	Array.<number>	RGBA color of the contour
`width`	number	Width of the contour

styleOptions.fill

Object

Style options for the body of the geometry

Properties

Name	Type	Description
`color`	Array.<number>	RGBA color of the body

Source:

viewer.js, line 2169

activateModifyInteraction(options)

Activate modify interaction.

Parameters:

Name	Type	Description
`options`	Object	Modification options.

Source:

viewer.js, line 2600

activateOpticalPath(opticalPathIdentifier)

Activate an optical path.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1672

activateSelectInteraction(options)

Activate select interaction.

Parameters:

Name	Type	Description
`options`	Object	selection options.

Source:

viewer.js, line 2473

activateSnapInteraction(options)

Activate snap interaction.

Parameters:

Name	Type	Description
`options`	Object	Snap options.

Source:

viewer.js, line 2565

activateTranslateInteraction(options)

Activate translate interaction.

Parameters:

Name	Type	Description
`options`	Object	Translation options.

Source:

viewer.js, line 2343

addAnnotationGroups(metadata)

Add annotation groups.

Parameters:

Name	Type	Description
`metadata`	metadata.MicroscopyBulkSimpleAnnotations	Metadata of a DICOM Microscopy Simple Bulk Annotations instance

Source:

viewer.js, line 3026

addParameterMappings(metadata)

Add parameter mappings.

Parameters:

Name	Type	Description
`metadata`	Array.<metadata.ParametricMap>	Metadata of one or more DICOM Parametric Map instances

Source:

viewer.js, line 4110

addROI(roi, styleOptionsopt)

Add a regions of interest.

Parameters:

Name Type Attributes Description

roi roi.ROI Regions of interest

styleOptions

Object

Style options

Properties

Name Type Attributes Description

stroke

Object

Style options for the contour of the geometry

Properties

Name	Type	Description
`color`	Array.<number>	RGBA color of the contour
`width`	number	Width of the contour

fill

Object

Style options for the body of the geometry

Properties

Name	Type	Description
`color`	Array.<number>	RGBA color of the body

Source:

viewer.js, line 2793

addROIEvaluation(uid, item)

Add a qualitative evaluation to a region of interest.

Parameters:

Name	Type	Description
`uid`	string	Unique identifier of the region of interest
`item`	Object	CODE content item representing a qualitative evaluation

Source:

viewer.js, line 2748

addROIMeasurement(uid, item)

Add a measurement to a region of interest.

Parameters:

Name	Type	Description
`uid`	string	Unique identifier of the region of interest
`item`	Object	NUM content item representing a measurement

Source:

viewer.js, line 2725

addSegments(metadata)

Add segments.

Parameters:

Name	Type	Description
`metadata`	Array.<metadata.Segmentation>	Metadata of one or more DICOM Segmentation instances

Source:

viewer.js, line 3694

addViewportOverlay(options)

Add a new viewport overlay.

Parameters:

Name Type Description

options

Object

Overlay options

Properties

Name	Type	Attributes	Default	Description
`element`	Object			The custom overlay HTML element
`coordinates`	Array.<number>			Offset of the overlay along the X and Y axes of the slide coordinate system
`coordinates`	bool	<optional>	false	Whether the viewer should automatically navigate to the element such that it is in focus and fully visible
`className`	string	<optional>		Class to style the overlay container

Source:

viewer.js, line 2928

cleanup()

Clean up. Release allocated memory and clear the viewport.

Source:

viewer.js, line 1851

deactivateDragPanInteraction()

Deactivate drag pan interaction.

Source:

viewer.js, line 2552

deactivateDragZoomInteraction()

Deactivate drag zoom interaction.

Source:

viewer.js, line 2460

deactivateDrawInteraction()

Deactivate draw interaction.

Source:

viewer.js, line 2294

deactivateModifyInteraction()

Deactivate modify interaction.

Source:

viewer.js, line 2648

deactivateOpticalPath(opticalPathIdentifier)

Deactivate an optical path.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1703

deactivateSelectInteraction()

Deactivate select interaction.

Source:

viewer.js, line 2512

deactivateSnapInteraction()

Deactivate snap interaction.

Source:

viewer.js, line 2578

deactivateTranslateInteraction() → {void}

Deactivate translate interaction.

Source:

viewer.js, line 2422

Returns:

Type: void

getAllAnnotationGroups() → {Array.<annotation.AnnotationGroup>}

Get all annotation groups.

Source:

viewer.js, line 3662

Returns:

Type: Array.<annotation.AnnotationGroup>

getAllOpticalPaths() → {Array.<opticalPath.OpticalPath>}

Get all optical paths.

Source:

viewer.js, line 1659

Returns:

Type: Array.<opticalPath.OpticalPath>

getAllParameterMappings() → {Array.<mapping.ParameterMapping>}

Get all parameter mappings.

Source:

viewer.js, line 4591

Returns:

Type: Array.<mapping.ParameterMapping>

getAllROIs() → {Array.<roi.ROI>}

Get all annotated regions of interest.

Source:

viewer.js, line 2670

Returns:

Array of regions of interest.

Type: Array.<roi.ROI>

getAllSegments() → {Array.<segment.Segment>}

Get all segments.

Source:

viewer.js, line 4097

Returns:

Type: Array.<segment.Segment>

getAnnotationGroupDefaultStyle(annotationGroupUID) → {Object}

Get default style of an annotation group.

Parameters:

Name	Type	Description
`annotationGroupUID`	string	Unique identifier of an annotation group

Source:

viewer.js, line 3621

Returns:

- Default style settings

Type: Object

getAnnotationGroupMetadata(annotationGroupUID) → {metadata.MicroscopyBulkSimpleAnnotations}

Get annotation group metadata.

Parameters:

Name	Type	Description
`annotationGroupUID`	string	Unique identifier of an annotation group

Source:

viewer.js, line 3678

Returns:

- Metadata of DICOM Microscopy Bulk Simple Annotations instance

Type: metadata.MicroscopyBulkSimpleAnnotations

getAnnotationGroupStyle(annotationGroupUID) → {Object}

Get style of an annotation group.

Parameters:

Name	Type	Description
`annotationGroupUID`	string	Unique identifier of an annotation group

Source:

viewer.js, line 3643

Returns:

- Style settings

Type: Object

getOpticalPathDefaultStyle(opticalPathIdentifier) → {Object}

Get the default style of an optical path.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1580

Returns:

Default style of optical path

Type: Object

getOpticalPathMetadata(opticalPathIdentifier) → {Array.<metadata.VLWholeSlideMicroscopyImage>}

Get image metadata for an optical path.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1643

Returns:

Slide microscopy image metadata

Type: Array.<metadata.VLWholeSlideMicroscopyImage>

getOpticalPathStyle(opticalPathIdentifier) → {Object}

Get the style of an optical path.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1611

Returns:

Style of optical path

Type: Object

getParameterMappingDefaultStyle(mappingUID) → {Object}

Get the default style of a parameter mapping.

Parameters:

Name	Type	Description
`mappingUID`	string	Unique tracking identifier of mapping

Source:

viewer.js, line 4531

Returns:

Default style Options

Type: Object

getParameterMappingMetadata(mappingUID) → {Array.<metadata.ParametricMap>}

Get image metadata for a parameter mapping.

Parameters:

Name	Type	Description
`mappingUID`	string	Unique tracking identifier of mapping

Source:

viewer.js, line 4575

Returns:

Metadata of DICOM Parametric Map instances

Type: Array.<metadata.ParametricMap>

getParameterMappingStyle(mappingUID) → {Object}

Get the style of a parameter mapping.

Parameters:

Name	Type	Description
`mappingUID`	string	Unique tracking identifier of mapping

Source:

viewer.js, line 4552

Returns:

Style Options

Type: Object

getPixelSpacing(options) → {Array.<number>}

Get the pixel spacing at a given zoom level.

Parameters:

Name Type Description

options

Object

Options.

Properties

Name	Type	Description
`level`	number	Zoom level.

Source:

viewer.js, line 2063

Returns:

Spacing between the centers of two neighboring pixels

Type: Array.<number>

getROI(uid) → {roi.ROI}

Get an individual annotated region of interest.

Parameters:

Name	Type	Description
`uid`	string	Unique identifier of the region of interest

Source:

viewer.js, line 2706

Returns:

Region of interest.

Type: roi.ROI

getROIStyle(uid) → {Object}

Get the style of a region of interest.

Parameters:

Name	Type	Description
`uid`	string	Unique identifier of the regions of interest

Source:

viewer.js, line 2871

Returns:

- Style settings

Type: Object

getSegmentDefaultStyle(segmentUID) → {Object}

Get the default style of a segment.

Parameters:

Name	Type	Description
`segmentUID`	string	Unique tracking identifier of segment

Source:

viewer.js, line 4039

Returns:

Default style settings

Type: Object

getSegmentMetadata(segmentUID) → {Array.<metadata.Segmentation>}

Get image metadata for a segment.

Parameters:

Name	Type	Description
`segmentUID`	string	Unique tracking identifier of segment

Source:

viewer.js, line 4081

Returns:

Metadata of DICOM Segmentation instances

Type: Array.<metadata.Segmentation>

getSegmentStyle(segmentUID) → {Object}

Get the style of a segment.

Parameters:

Name	Type	Description
`segmentUID`	string	Unique tracking identifier of segment

Source:

viewer.js, line 4060

Returns:

Style settings

Type: Object

hideAnnotationGroup(annotationGroupUID)

Hide an annotation group.

Parameters:

Name	Type	Description
`annotationGroupUID`	string	Unique identifier of an annotation group

Source:

viewer.js, line 3444

hideOpticalPath(opticalPathIdentifier)

Hide an optical path.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1797

hideParameterMapping(mappingUID)

Hide a parameter mapping.

Parameters:

Name	Type	Description
`mappingUID`	string	Unique tracking identifier of a mapping

Source:

viewer.js, line 4416

hideROIs()

Hide annotated regions of interest.

Source:

viewer.js, line 2996

hideSegment(segmentUID)

Hide a segment.

Parameters:

Name	Type	Description
`segmentUID`	string	Unique tracking identifier of a segment

Source:

viewer.js, line 3939

isAnnotationGroupVisible(annotationGroupUID)

Is annotation group visible.

Parameters:

Name	Type	Description
`annotationGroupUID`	string	Unique identifier of an annotation group

Source:

viewer.js, line 3462

isOpticalPathActive(opticalPathIdentifier) → {boolean}

Determine whether an optical path is active.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1726

Returns:

active

Type: boolean

isOpticalPathColorable(opticalPathIdentifier) → {boolean}

Determine whether an optical path is colorable.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1552

Returns:

yes/no answer

Type: boolean

isOpticalPathMonochromatic(opticalPathIdentifier) → {boolean}

Determine whether an optical path is monochromatic.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1566

Returns:

yes/no answer

Type: boolean

isOpticalPathVisible(opticalPathIdentifier) → {boolean}

Determine if an optical path is visible.

Parameters:

Name	Type	Description
`opticalPathIdentifier`	string	Optical Path Identifier

Source:

viewer.js, line 1816

Returns:

Type: boolean

isParameterMappingVisible(mappingUID) → {boolean}

Determine if parameter mapping is visible.

Parameters:

Name	Type	Description
`mappingUID`	string	Unique tracking identifier of a mapping

Source:

viewer.js, line 4434

Returns:

Type: boolean

isSegmentVisible(segmentUID) → {boolean}

Determine if segment is visible.

Parameters:

Name	Type	Description
`segmentUID`	string	Unique tracking identifier of a segment

Source:

viewer.js, line 3957

Returns:

Type: boolean

navigate(options)

Navigate the view to a spatial position or resolution level.

Parameters:

Name Type Description

options

Object

Options.

Properties

Name	Type	Description
`level`	number	Zoom level.
`position`	Array.<number>	X, Y coordinates in slide coordinate system.

Source:

viewer.js, line 2135

popROI() → {roi.ROI}

Pop the most recently annotated regions of interest.

Source:

viewer.js, line 2770

Returns:

Regions of interest.

Type: roi.ROI

removeAllAnnotationGroups()

Remove all annotation groups.

Source:

viewer.js, line 3409

removeAllParameterMappings()

Remove all parameter mappings.

Source:

viewer.js, line 4364

removeAllROIs()

Remove all annotated regions of interest.

Source:

viewer.js, line 2988

removeAllSegments()

Remove all segments.

Source:

viewer.js, line 3888

removeAnnotationGroup(annotationGroupUID)

Remove an annotation group.

Parameters:

Name	Type	Description
`annotationGroupUID`	string	Unique identifier of an annotation group

Source:

viewer.js, line 3392

removeParameterMapping(mappingUID)

Remove a parameter mapping.

Parameters:

Name	Type	Description
`mappingUID`	string	Unique tracking identifier of a mapping

Source:

viewer.js, line 4348

removeROI(uid)

Remove an individual regions of interest.

Parameters:

Name	Type	Description
`uid`	string	Unique identifier of the region of interest

Source:

viewer.js, line 2969

removeSegment(segmentUID)

Remove a segment.

Parameters:

Name	Type	Description
`segmentUID`	string	Unique tracking identifier of a segment

Source:

viewer.js, line 3872

removeViewportOverlay(options)

Remove an existing viewport overlay.

Parameters:

Name Type Description

options

Object

Overlay options

Properties

Name	Type	Description
`element`	Object	The custom overlay HTML element

Source:

viewer.js, line 2955

render(options)

Render the images in the specified viewport container.

Parameters:

Name Type Description

options

Object

Rendering options.

Properties

Name	Type	Description
`container`	string \| HTMLElement	HTML Element in which the viewer should be injected.

Source:

viewer.js, line 1878

resize() → {void}

Resize the viewer to fit the viewport.

Source:

viewer.js, line 1832

Returns:

Type: void

setAnnotationGroupStyle(annotationGroupUID, styleOptions)

Set style of an annotation group.

Parameters:

Name Type Description

annotationGroupUID string Unique identifier of an annotation group

styleOptions

Object

Style options

Properties

Name	Type	Attributes	Description
`opacity`	number	<optional>	Opacity
`color`	Array.<number>	<optional>	RGB color triplet
`measurement`	Object	<optional>	Selected measurement for pseudo-coloring of annotations using measurement values

Source:

viewer.js, line 3484

setOpticalPathStyle(opticalPathIdentifier, styleOptions)

Set the style of an optical path. The style determine how grayscale stored values of a MONOCHROME2 image will be transformed into pseudo-color display values. Grayscale stored values are first transformed into normalized grayscale display values, which are subsequently transformed into pseudo-color values in RGB color space. The input to the first transformation are grayscale stored values in the range defined by parameter "limitValues", which specify a window for optimizing display value intensity and contrast. The resulting normalized grayscale display values are then used as input to the second transformation, which maps them to pseudo-color values ranging from black color (R=0, G=0, B=0) to the color defined by parameter "color" using linear interpolation. Alternatively, a palette color lookup table can be provided to perform more sophisticated pseudo-coloring.

Parameters:

Name Type Description

opticalPathIdentifier string Optical Path Identifier

styleOptions

Object

Properties

Name	Type	Attributes	Description
`color`	Array.<number>	<optional>	RGB color triplet
`paletteColorLookupTable`	Array.<number>	<optional>	palette color lookup table
`opacity`	number	<optional>	Opacity
`limitValues`	Array.<number>	<optional>	Upper and lower windowing limits

Source:

viewer.js, line 1472

setParameterMappingStyle(mappingUID, styleOptions)

Set the style of a parameter mapping.

Parameters:

Name Type Description

mappingUID string Unique tracking identifier of mapping

styleOptions

Object

Properties

Name	Type	Attributes	Description
`opacity`	number	<optional>	Opacity
`limitValues`	Array.<number>	<optional>	Upper and lower windowing

Source:

viewer.js, line 4453

setROIStyle(uid, styleOptions)

Set the style of a region of interest.

Parameters:

Name Type Description

uid string Unique identifier of the regions of interest

styleOptions

Object

Style options

Properties

Name Type Attributes Description

stroke

Object

Style options for the contour of the geometry

Properties

Name	Type	Description
`color`	Array.<number>	RGBA color of the contour
`width`	number	Width of the contour

fill

Object

Style options for the body of the geometry

Properties

Name	Type	Description
`color`	Array.<number>	RGBA color of the body

Source:

viewer.js, line 2905

setSegmentStyle(segmentUID, styleOptions)

Set the style of a segment.

Parameters:

Name Type Description

segmentUID string Unique tracking identifier of segment

styleOptions

Object

Style options

Properties

Name	Type	Attributes	Description
`opacity`	number	<optional>	Opacity

Source:

viewer.js, line 3975

showAnnotationGroup(annotationGroupUID, styleOptions)

Show an annotation group.

Parameters:

Name Type Description

annotationGroupUID string Unique identifier of an annotation group

styleOptions

Object

Properties

Name	Type	Attributes	Description
`opacity`	number	<optional>	Opacity
`color`	Array.<number>	<optional>	RGB color triplet
`measurement`	Object	<optional>	Selected measurement

Source:

viewer.js, line 3425

showOpticalPath(opticalPathIdentifier, styleOptionsopt)

Show an optical path.

Parameters:

Name Type Attributes Description

opticalPathIdentifier string Optical Path Identifier

styleOptions

Object

Properties

Name	Type	Attributes	Description
`color`	Array.<number>	<optional>	RGB color triplet
`paletteColorLookupTable`	Array.<number>	<optional>	palette color lookup table
`opacity`	number	<optional>	Opacity
`limitValues`	Array.<number>	<optional>	Upper and lower windowing limits

Source:

viewer.js, line 1758

showParameterMapping(mappingUID, styleOptionsopt)

Show a parameter mapping.

Parameters:

Name Type Attributes Description

mappingUID string Unique tracking identifier of a mapping

styleOptions

Object

Properties

Name	Type	Attributes	Description
`opacity`	number	<optional>	Opacity
`limitValues`	Array.<number>	<optional>	Upper and lower windowing

Source:

viewer.js, line 4378

showROIs()

Show annotated regions of interest.

Source:

viewer.js, line 3005

showSegment(segmentUID, styleOptionsopt)

Show a segment.

Parameters:

Name Type Attributes Description

segmentUID string Unique tracking identifier of a segment

styleOptions

Object

Properties

Name	Type	Attributes	Description
`opacity`	number	<optional>	Opacity

Source:

viewer.js, line 3901

toggleOverviewMap() → {void}

Toggle overview map.

Source:

viewer.js, line 2399

Returns:

Type: void

updateROI(roi)

Update properties of a region of interest.

Parameters:

Name Type Description

roi

Object

ROI to be updated

Properties

Name Type Description

uid string Unique identifier of the region of interest

properties

Object

ROI properties

Properties

Name	Type	Attributes	Description
`measurements`	Object	<optional>	ROI measurements
`evaluations`	Object	<optional>	ROI evaluations
`label`	Object	<optional>	ROI label
`marker`	Object	<optional>	ROI marker

Source:

viewer.js, line 2853