UNPKG

diglettk

Version:

A medical imaging toolkit, built on top of vtk.js

3,010 lines (641 loc) 33.7 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>VRView - DigleTTK</title> <meta name="keywords" content="medical, imaging, dicom, webgl" /> <meta name="keyword" content="medical, imaging, dicom, webgl" /> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc.css"> <script src="scripts/nav.js" defer></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav > <input type="text" id="nav-search" placeholder="Search" /> <h2><a href="index.html">Home</a></h2><h2><a href="https://github.com/dvisionlab/DigletTK" target="_blank" class="menu-item" id="repository" >Github repo</a></h2><h3>Classes</h3><ul><li><a href="baseView.html">baseView</a></li><li><a href="MPRManager.html">MPRManager</a><ul class='methods'><li data-type='method' style='display: none;'><a href="MPRManager.html#destroy">destroy</a></li><li data-type='method' style='display: none;'><a href="MPRManager.html#getInitialState">getInitialState</a></li><li data-type='method' style='display: none;'><a href="MPRManager.html#onRotate">onRotate</a></li><li data-type='method' style='display: none;'><a href="MPRManager.html#onThickness">onThickness</a></li><li data-type='method' style='display: none;'><a href="MPRManager.html#resize">resize</a></li><li data-type='method' style='display: none;'><a href="MPRManager.html#setImage">setImage</a></li><li data-type='method' style='display: none;'><a href="MPRManager.html#setTool">setTool</a></li></ul></li><li><a href="VRView.html">VRView</a><ul class='methods'><li data-type='method' style='display: none;'><a href="VRView.html#_initCropWidget">_initCropWidget</a></li><li data-type='method' style='display: none;'><a href="VRView.html#_initPicker">_initPicker</a></li><li data-type='method' style='display: none;'><a href="VRView.html#addLandmarks">addLandmarks</a></li><li data-type='method' style='display: none;'><a href="VRView.html#addSurface">addSurface</a></li><li data-type='method' style='display: none;'><a href="VRView.html#destroy">destroy</a></li><li data-type='method' style='display: none;'><a href="VRView.html#getLutList">getLutList</a></li><li data-type='method' style='display: none;'><a href="VRView.html#resetMeasurementState">resetMeasurementState</a></li><li data-type='method' style='display: none;'><a href="VRView.html#resetView">resetView</a></li><li data-type='method' style='display: none;'><a href="VRView.html#resize">resize</a></li><li data-type='method' style='display: none;'><a href="VRView.html#setImage">setImage</a></li><li data-type='method' style='display: none;'><a href="VRView.html#setSurfaceVisibility">setSurfaceVisibility</a></li><li data-type='method' style='display: none;'><a href="VRView.html#setTool">setTool</a></li><li data-type='method' style='display: none;'><a href="VRView.html#turnPickingOff">turnPickingOff</a></li><li data-type='method' style='display: none;'><a href="VRView.html#turnPickingOn">turnPickingOn</a></li><li data-type='method' style='display: none;'><a href="VRView.html#updateLandmarkPosition">updateLandmarkPosition</a></li><li data-type='method' style='display: none;'><a href="VRView.html#updateSurface">updateSurface</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#addSphereInPoint">addSphereInPoint</a></li><li><a href="global.html#applyAngleStrategy">applyAngleStrategy</a></li><li><a href="global.html#applyLengthStrategy">applyLengthStrategy</a></li><li><a href="global.html#buildVtkVolume">buildVtkVolume</a></li><li><a href="global.html#createRGBStringFromRGBValues">createRGBStringFromRGBValues</a></li><li><a href="global.html#createSurfaceActor">createSurfaceActor</a></li><li><a href="global.html#createVolumeActor">createVolumeActor</a></li><li><a href="global.html#degrees2radians">degrees2radians</a></li><li><a href="global.html#fitToWindow">fitToWindow</a></li><li><a href="global.html#getAbsoluteRange">getAbsoluteRange</a></li><li><a href="global.html#getCroppingPlanes">getCroppingPlanes</a></li><li><a href="global.html#getRelativeRange">getRelativeRange</a></li><li><a href="global.html#getVideoCardInfo">getVideoCardInfo</a></li><li><a href="global.html#getVOI">getVOI</a></li><li><a href="global.html#getVolumeCenter">getVolumeCenter</a></li><li><a href="global.html#larvitarInitialized">larvitarInitialized</a></li><li><a href="global.html#setActorProperties">setActorProperties</a></li><li><a href="global.html#setCamera">setCamera</a></li><li><a href="global.html#setupCropWidget">setupCropWidget</a></li><li><a href="global.html#setupPickingPlane">setupPickingPlane</a></li><li><a href="global.html#State">State</a></li></ul> </nav> <div id="main"> <h1 class="page-title">VRView</h1> <section> <header> <h2> VRView </h2> <div class="class-description usertext"><p>A class representing a Volume Rendering scene</p></div> </header> <article> <div class="container-overview"> <h2>Constructor</h2> <h4 class="name" id="VRView"><span class="type-signature"></span>new VRView<span class="signature">(element)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line38">line 38</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Create a volume rendering scene</p> </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>element</code></td> <td class="type"> <span class="param-type">HTMLElement</span> </td> <td class="description last"><p>the target html element to render the scene</p></td> </tr> </tbody> </table> </div> <h3 class="subsection-title">Classes</h3> <dl> <dt><a href="VRView.html">VRView</a></dt> <dd></dd> </dl> <h3 class="subsection-title">Members</h3> <h4 class="name" id="blurOnInteraction"><span class="type-signature"></span>blurOnInteraction<span class="type-signature"> :bool</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line256">line 256</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Toggle blurring on interaction (Increase performance)</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">bool</span> </li> </ul> <h4 class="name" id="cropWidget"><span class="type-signature"></span>cropWidget<span class="type-signature"> :bool</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line202">line 202</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Crop widget on / off</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">bool</span> </li> </ul> <h4 class="name" id="edgeEnhancement"><span class="type-signature"></span>edgeEnhancement<span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line293">line 293</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Toggle edge enhancement</p> </div> <h4 class="name" id="lut"><span class="type-signature"></span>lut<span class="type-signature"> :String</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line214">line 214</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Set colormap and opacity function<br> lutName - as in presets list</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">String</span> </li> </ul> <h4 class="name" id="presetsList"><span class="type-signature"></span>presetsList<span class="type-signature"> :Array</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line144">line 144</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Presets</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Array</span> </li> </ul> <h4 class="name" id="rangeLUT"><span class="type-signature"></span>rangeLUT<span class="type-signature"> :Array</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line190">line 190</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Set range to apply lut !!! WIP</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Array</span> </li> </ul> <h4 class="name" id="rescaleLUT"><span class="type-signature"></span>rescaleLUT<span class="type-signature"> :bool</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line169">line 169</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Flag to set lut rescaling on opacity range</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">bool</span> </li> </ul> <h4 class="name" id="resolution"><span class="type-signature"></span>resolution<span class="type-signature"> :Number</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line128">line 128</a> </li></ul></dd> </dl> <div class="description usertext"> <p>raysDistance</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Number</span> </li> </ul> <h4 class="name" id="widgetElement"><span class="type-signature"></span>widgetElement<span class="type-signature"> :HTMLelement</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line152">line 152</a> </li></ul></dd> </dl> <div class="description usertext"> <p>PGwidgetElement (set null to hide)</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">HTMLelement</span> </li> </ul> <h4 class="name" id="wwwl"><span class="type-signature"></span>wwwl<span class="type-signature"> :Array</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line103">line 103</a> </li></ul></dd> </dl> <div class="description usertext"> <p>wwwl</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type">Array</span> </li> </ul> <h3 class="subsection-title">Methods</h3> <h4 class="name" id="_initCropWidget"><span class="type-signature"></span>_initCropWidget<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line701">line 701</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Setup crop widget</p> </div> <h4 class="name" id="_initPicker"><span class="type-signature"></span>_initPicker<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line847">line 847</a> </li></ul></dd> </dl> <div class="description usertext"> <p>initPicker</p> </div> <h4 class="name" id="addLandmarks"><span class="type-signature"></span>addLandmarks<span class="signature">(landmarks)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line379">line 379</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Add landmarks to be rendered as spheres</p> </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>landmarks</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last"><p>[{label, x, y, z, color, radius}]</p></td> </tr> </tbody> </table> <h4 class="name" id="addSurface"><span class="type-signature"></span>addSurface<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line350">line 350</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Add surfaces to be rendered</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>{buffer: bufferarray, fileType?: string, props: Object}<br> Props contains color, label, opacity, wireframe</p></td> </tr> </tbody> </table> <h4 class="name" id="destroy"><span class="type-signature"></span>destroy<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line544">line 544</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Destroy webgl content and release listeners</p> </div> <h4 class="name" id="getLutList"><span class="type-signature"></span>getLutList<span class="signature">()</span><span class="type-signature"> &rarr; {Array}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line467">line 467</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Get vtk LUTs list</p> </div> <h5>Returns:</h5> <div class="param-desc"> <ul> <li>Lut list as array of strings</li> </ul> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">Array</span> </dd> </dl> <h4 class="name" id="resetMeasurementState"><span class="type-signature"></span>resetMeasurementState<span class="signature">(measurementState)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line475">line 475</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Reset measurement state to default</p> </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>measurementState</code></td> <td class="type"> <span class="param-type">*</span> </td> <td class="description last"></td> </tr> </tbody> </table> <h4 class="name" id="resetView"><span class="type-signature"></span>resetView<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line526">line 526</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Reset view</p> </div> <h4 class="name" id="resize"><span class="type-signature"></span>resize<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line536">line 536</a> </li></ul></dd> </dl> <div class="description usertext"> <p>on resize callback</p> </div> <h4 class="name" id="setImage"><span class="type-signature"></span>setImage<span class="signature">(image)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line308">line 308</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Set the image to be rendered</p> </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>image</code></td> <td class="type"> <span class="param-type">ArrayBuffer</span> </td> <td class="description last"><p>The image content data as buffer array</p></td> </tr> </tbody> </table> <h4 class="name" id="setSurfaceVisibility"><span class="type-signature"></span>setSurfaceVisibility<span class="signature">(label, toggle)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line428">line 428</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Toggle surface visibility on/off</p> </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>label</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>The string that identifies the surface</p></td> </tr> <tr> <td class="name"><code>toggle</code></td> <td class="type"> <span class="param-type">Boolean</span> </td> <td class="description last"></td> </tr> </tbody> </table> <h4 class="name" id="setTool"><span class="type-signature"></span>setTool<span class="signature">(toolName, options, measurementState)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line502">line 502</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Set active tool<br> (&quot;Length/Angle&quot;, {mouseButtonMask:1}, measurementState)</p> </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>toolName</code></td> <td class="type"> <span class="param-type">*</span> </td> <td class="description last"></td> </tr> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">*</span> </td> <td class="description last"></td> </tr> <tr> <td class="name"><code>measurementState</code></td> <td class="type"> <span class="param-type">*</span> </td> <td class="description last"></td> </tr> </tbody> </table> <h4 class="name" id="turnPickingOff"><span class="type-signature"></span>turnPickingOff<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line837">line 837</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Unregister the picking callback.</p> </div> <h4 class="name" id="turnPickingOn"><span class="type-signature"></span>turnPickingOn<span class="signature">(callback, targetLabels)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line781">line 781</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Register a callback for picking on a list of actors.<br> The callback will receive an object with { worldPosition, displayPosition, actorLabel }</p> </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>callback</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="description last"><p>The function to call on pick.</p></td> </tr> <tr> <td class="name"><code>targetLabels</code></td> <td class="type"> <span class="param-type">Array.&lt;String></span> </td> <td class="description last"><p>A list of actor labels to pick from.</p></td> </tr> </tbody> </table> <h4 class="name" id="updateLandmarkPosition"><span class="type-signature"></span>updateLandmarkPosition<span class="signature">(label, position)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line411">line 411</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Update the position of an existing landmark.</p> </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>label</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>The label of the landmark.</p></td> </tr> <tr> <td class="name"><code>position</code></td> <td class="type"> <span class="param-type">Array.&lt;Number></span> </td> <td class="description last"><p>The new position as [x, y, z].</p></td> </tr> </tbody> </table> <h4 class="name" id="updateSurface"><span class="type-signature"></span>updateSurface<span class="signature">(label, buffer, fileType)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="vrView.js.html">vrView.js</a>, <a href="vrView.js.html#line440">line 440</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Update surface buffer<br> TODO maybe there is a more efficient way</p> </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>label</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>The string that identifies the surface</p></td> </tr> <tr> <td class="name"><code>buffer</code></td> <td class="type"> <span class="param-type">ArrayBuffer</span> </td> <td class="description last"></td> </tr> <tr> <td class="name"><code>fileType</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>Optional file type ('stl' or 'vtp')</p></td> </tr> </tbody> </table> </article> </section> </div> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme. </footer> <script>prettyPrint();</script> <script src="scripts/polyfill.js"></script> <script src="scripts/linenumber.js"></script> <script src="scripts/search.js" defer></script> <script src="scripts/collapse.js" defer></script> </body> </html>