dicom-microscopy-viewer

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JSDoc: Class: VolumeImageViewer</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>  <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <div id="main"> <h1 class="page-title">Class: VolumeImageViewer</h1> <section> <header> <h2><span class="attribs"><span class="type-signature"></span></span> <span class="ancestors"><a href="viewer.html">viewer</a>.</span>VolumeImageViewer<span class="signature">(options)</span><span class="type-signature"></span></h2> <div class="class-description">Interactive viewer for DICOM VL Whole Slide Microscopy Image instances with Image Type VOLUME.</div> </header> <article> <div class="container-overview"> <h2>Constructor</h2> <h4 class="name" id="VolumeImageViewer"><span class="type-signature"></span>new VolumeImageViewer<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> Create a viewer instance for displaying VOLUME images. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"> <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>metadata</code></td> <td class="type"> <span class="param-type">Array.<<a href="metadata.VLWholeSlideMicroscopyImage.html">metadata.VLWholeSlideMicroscopyImage</a>></span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last">Metadata of DICOM VL Whole Slide Microscopy Image instances that should be diplayed.</td> </tr> <tr> <td class="name"><code>client</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> </td> <td class="description last">A DICOMwebClient instance for search for and retrieve data from an origin server over HTTP</td> </tr> <tr> <td class="name"><code>clientMapping</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> </td> <td class="description last">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.</td> </tr> <tr> <td class="name"><code>preload</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> 0 </td> <td class="description last">Number of resolution levels that should be preloaded</td> </tr> <tr> <td class="name"><code>controls</code></td> <td class="type"> <span class="param-type">Array.<string></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> [] </td> <td class="description last">Names of viewer control elements that should be included in the viewport</td> </tr> <tr> <td class="name"><code>debug</code></td> <td class="type"> <span class="param-type">boolean</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> false </td> <td class="description last">Whether debug features should be turned on (e.g., display of tile boundaries)</td> </tr> <tr> <td class="name"><code>tilesCacheSize</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> 1000 </td> <td class="description last">Number of tiles that should be cached to avoid repeated retrieval for the DICOMweb server</td> </tr> <tr> <td class="name"><code>primaryColor</code></td> <td class="type"> <span class="param-type">Array.<number></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> [0, 126, 163] </td> <td class="description last">Primary color of the application</td> </tr> <tr> <td class="name"><code>highlightColor</code></td> <td class="type"> <span class="param-type">Array.<number></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> [140, 184, 198] </td> <td class="description last">Color that should be used to highlight things that get selected by the user</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line725">line 725</a> </li></ul></dd> </dl> </div> <h3 class="subsection-title">Members</h3> <h4 class="name" id="areROIsVisible"><span class="type-signature"></span>areROIsVisible<span class="type-signature"></span></h4> <div class="description"> Whether annotated regions of interest are currently visible. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line3016">line 3016</a> </li></ul></dd> </dl> <h4 class="name" id="boundingBox"><span class="type-signature"></span>boundingBox<span class="type-signature"> :Array.<Array.<number>></span></h4> <div class="description"> Bounding box that contains the images. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Array.<Array.<number>></span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2110">line 2110</a> </li></ul></dd> </dl> <h4 class="name" id="frameOfReferenceUID"><span class="type-signature"></span>frameOfReferenceUID<span class="type-signature"> :string</span></h4> <div class="description"> Frame of Reference UID. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">string</span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2052">line 2052</a> </li></ul></dd> </dl> <h4 class="name" id="isDragPanInteractionActive"><span class="type-signature"></span>isDragPanInteractionActive<span class="type-signature"> :boolean</span></h4> <div class="description"> Whether drag pan interaction is active. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">boolean</span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2316">line 2316</a> </li></ul></dd> </dl> <h4 class="name" id="isDragZoomInteractionActive"><span class="type-signature"></span>isDragZoomInteractionActive<span class="type-signature"> :boolean</span></h4> <div class="description"> Whether drag zoom interaction is active. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">boolean</span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2325">line 2325</a> </li></ul></dd> </dl> <h4 class="name" id="isDrawInteractionActive"><span class="type-signature"></span>isDrawInteractionActive<span class="type-signature"> :boolean</span></h4> <div class="description"> Whether draw interaction is active </div> <h5>Type:</h5> <ul> <li> <span class="param-type">boolean</span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2307">line 2307</a> </li></ul></dd> </dl> <h4 class="name" id="isModifyInteractionActive"><span class="type-signature"></span>isModifyInteractionActive<span class="type-signature"> :boolean</span></h4> <div class="description"> Whether modify interaction is active. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">boolean</span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2661">line 2661</a> </li></ul></dd> </dl> <h4 class="name" id="isSelectInteractionActive"><span class="type-signature"></span>isSelectInteractionActive<span class="type-signature"> :boolean</span></h4> <div class="description"> Whether select interaction is active. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">boolean</span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2591">line 2591</a> </li></ul></dd> </dl> <h4 class="name" id="isTranslateInteractionActive"><span class="type-signature"></span>isTranslateInteractionActive<span class="type-signature"> :boolean</span></h4> <div class="description"> Whether translate interaction is active. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">boolean</span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2334">line 2334</a> </li></ul></dd> </dl> <h4 class="name" id="numberOfROIs"><span class="type-signature"></span>numberOfROIs<span class="type-signature"></span></h4> <div class="description"> Number of annotated regions of interest. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2696">line 2696</a> </li></ul></dd> </dl> <h4 class="name" id="numLevels"><span class="type-signature"></span>numLevels<span class="type-signature"> :number</span></h4> <div class="description"> Number of zoom levels. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">number</span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2043">line 2043</a> </li></ul></dd> </dl> <h4 class="name" id="physicalOffset"><span class="type-signature"></span>physicalOffset<span class="type-signature"> :Array.<number></span></h4> <div class="description"> Physical offset of images. Offset along the X and Y axes of the slide coordinate system in millimeter unit. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Array.<number></span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2074">line 2074</a> </li></ul></dd> </dl> <h4 class="name" id="physicalSize"><span class="type-signature"></span>physicalSize<span class="type-signature"> :Array.<number></span></h4> <div class="description"> Physical size of images. Length along the X and Y axes of the slide coordinate system in millimeter unit. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Array.<number></span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2089">line 2089</a> </li></ul></dd> </dl> <h4 class="name" id="size"><span class="type-signature"></span>size<span class="type-signature"> :Array.<number></span></h4> <div class="description"> Size of the viewport. </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Array.<number></span> </li> </ul> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line1842">line 1842</a> </li></ul></dd> </dl> <h3 class="subsection-title">Methods</h3> <h4 class="name" id="activateDragPanInteraction"><span class="type-signature"></span>activateDragPanInteraction<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> Activate drag pan interaction. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">Options.</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2525">line 2525</a> </li></ul></dd> </dl> <h4 class="name" id="activateDragZoomInteraction"><span class="type-signature"></span>activateDragZoomInteraction<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> Activate drag zoom interaction. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">Options.</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2435">line 2435</a> </li></ul></dd> </dl> <h4 class="name" id="activateDrawInteraction"><span class="type-signature"></span>activateDrawInteraction<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> Activate the draw interaction for graphic annotation of regions of interest. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> </td> <td class="description last">Drawing options <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>geometryType</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> </td> <td class="description last">Name of the geometry type (point, circle, box, polygon, freehandpolygon, line, freehandline)</td> </tr> <tr> <td class="name"><code>maxPoints</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Maximum number of points for "line" geometry</td> </tr> <tr> <td class="name"><code>minPoints</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Mininum number of points for "line" geometry</td> </tr> <tr> <td class="name"><code>styleOptions</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Style options</td> </tr> </tbody> </table> </td> </tr> <tr> <td class="name"><code>styleOptions.stroke</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Style options for the contour of the geometry <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>color</code></td> <td class="type"> <span class="param-type">Array.<number></span> </td> <td class="description last">RGBA color of the contour</td> </tr> <tr> <td class="name"><code>width</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="description last">Width of the contour</td> </tr> </tbody> </table> </td> </tr> <tr> <td class="name"><code>styleOptions.fill</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Style options for the body of the geometry <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>color</code></td> <td class="type"> <span class="param-type">Array.<number></span> </td> <td class="description last">RGBA color of the body</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2169">line 2169</a> </li></ul></dd> </dl> <h4 class="name" id="activateModifyInteraction"><span class="type-signature"></span>activateModifyInteraction<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> Activate modify interaction. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">Modification options.</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2600">line 2600</a> </li></ul></dd> </dl> <h4 class="name" id="activateOpticalPath"><span class="type-signature"></span>activateOpticalPath<span class="signature">(opticalPathIdentifier)</span><span class="type-signature"></span></h4> <div class="description"> Activate an optical path. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>opticalPathIdentifier</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="description last">Optical Path Identifier</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line1672">line 1672</a> </li></ul></dd> </dl> <h4 class="name" id="activateSelectInteraction"><span class="type-signature"></span>activateSelectInteraction<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> Activate select interaction. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">selection options.</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2473">line 2473</a> </li></ul></dd> </dl> <h4 class="name" id="activateSnapInteraction"><span class="type-signature"></span>activateSnapInteraction<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> Activate snap interaction. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">Snap options.</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2565">line 2565</a> </li></ul></dd> </dl> <h4 class="name" id="activateTranslateInteraction"><span class="type-signature"></span>activateTranslateInteraction<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> Activate translate interaction. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">Translation options.</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2343">line 2343</a> </li></ul></dd> </dl> <h4 class="name" id="addAnnotationGroups"><span class="type-signature"></span>addAnnotationGroups<span class="signature">(metadata)</span><span class="type-signature"></span></h4> <div class="description"> Add annotation groups. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>metadata</code></td> <td class="type"> <span class="param-type"><a href="metadata.MicroscopyBulkSimpleAnnotations.html">metadata.MicroscopyBulkSimpleAnnotations</a></span> </td> <td class="description last">Metadata of a DICOM Microscopy Simple Bulk Annotations instance</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line3026">line 3026</a> </li></ul></dd> </dl> <h4 class="name" id="addParameterMappings"><span class="type-signature"></span>addParameterMappings<span class="signature">(metadata)</span><span class="type-signature"></span></h4> <div class="description"> Add parameter mappings. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>metadata</code></td> <td class="type"> <span class="param-type">Array.<<a href="metadata.ParametricMap.html">metadata.ParametricMap</a>></span> </td> <td class="description last">Metadata of one or more DICOM Parametric Map instances</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line4110">line 4110</a> </li></ul></dd> </dl> <h4 class="name" id="addROI"><span class="type-signature"></span>addROI<span class="signature">(roi, styleOptions<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <div class="description"> Add a regions of interest. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>roi</code></td> <td class="type"> <span class="param-type"><a href="roi.ROI.html">roi.ROI</a></span> </td> <td class="attributes"> </td> <td class="description last">Regions of interest</td> </tr> <tr> <td class="name"><code>styleOptions</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Style options <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>stroke</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Style options for the contour of the geometry <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>color</code></td> <td class="type"> <span class="param-type">Array.<number></span> </td> <td class="description last">RGBA color of the contour</td> </tr> <tr> <td class="name"><code>width</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="description last">Width of the contour</td> </tr> </tbody> </table> </td> </tr> <tr> <td class="name"><code>fill</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last">Style options for the body of the geometry <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>color</code></td> <td class="type"> <span class="param-type">Array.<number></span> </td> <td class="description last">RGBA color of the body</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2793">line 2793</a> </li></ul></dd> </dl> <h4 class="name" id="addROIEvaluation"><span class="type-signature"></span>addROIEvaluation<span class="signature">(uid, item)</span><span class="type-signature"></span></h4> <div class="description"> Add a qualitative evaluation to a region of interest. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>uid</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="description last">Unique identifier of the region of interest</td> </tr> <tr> <td class="name"><code>item</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">CODE content item representing a qualitative evaluation</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2748">line 2748</a> </li></ul></dd> </dl> <h4 class="name" id="addROIMeasurement"><span class="type-signature"></span>addROIMeasurement<span class="signature">(uid, item)</span><span class="type-signature"></span></h4> <div class="description"> Add a measurement to a region of interest. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>uid</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="description last">Unique identifier of the region of interest</td> </tr> <tr> <td class="name"><code>item</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">NUM content item representing a measurement</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line2725">line 2725</a> </li></ul></dd> </dl> <h4 class="name" id="addSegments"><span class="type-signature"></span>addSegments<span class="signature">(metadata)</span><span class="type-signature"></span></h4> <div class="description"> Add segments. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>metadata</code></td> <td class="type"> <span class="param-type">Array.<<a href="metadata.Segmentation.html">metadata.Segmentation</a>></span> </td> <td class="description last">Metadata of one or more DICOM Segmentation instances</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="viewer.js.html">viewer.js</a>, <a href="viewer.js.html#line3694">line 3694</a> </li></ul></dd> </dl> <h4 class="name" id="addViewportOverlay"><span class="type-signature"></span>addViewportOverlay<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> Add a new viewport overlay. </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last">Overlay options <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>element</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last">The custom overlay HTML element</td> </tr> <tr> <td class="name"><code>coordinates</code></td> <td class="type">