diglettk

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Home - 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>  <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"> <section class="package"> <h3> </h3> </section> <section class="readme usertext"> <article><p align="center"> <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/050.png" width="100" title="Diglett" alt="Diglett"> </p> <h1 id="diglettk">DigletTK</h1> <p>DigletTK is a library to interact with medical images in a 3d context, such as Multi Planar Reformat, MIP and Volume Rendering. It's based on vtk.js and takes inspiration from <a href="https://github.com/mix3d/vue-vtkjs-viewport">vue-vtksjs-viewport</a> and <a href="https://github.com/OHIF/react-vtkjs-viewport">react-vtkjs-viewport</a>, but it is built to be agnostic with respect to frontend frameworks.<br> It also provides glue-functions to easily integrate with cornerstone.js, via <a href="https://github.com/dvisionlab/Larvitar">Larvitar</a> library.</p> <h2 id="install">Install</h2> <ul> <li> <p><code>yarn add diglettk</code></p> <p>OR</p> </li> <li> <p>clone the repository and <code>yarn add /path/to/repository</code></p> <p>OR</p> </li> <li> <p><code>yarn add https://github.com/dvisionlab/DigletTK.git#master</code></p> </li> </ul> <h2 id="use">Use</h2> <p>Examples and docs at http://diglettk.dvisionlab.com/. Short mpr version:</p> <pre class="prettyprint source lang-javascript"><code>/** Define viewports as: { key: String - The view id (must be unique) element: HTMLElement - The target rendering div } */ const targetElements = { top: { element: document.getElementById("viewer-1"), key: "top" }, left: { element: document.getElementById("viewer-2"), key: "left" }, front: { element: document.getElementById("viewer-3"), key: "front" } }; // import DigletTK import * as dtk from "DigletTK"; // load a dicom serie using larvitar glue function dtk.loadSerieWithLarvitar(larvitar, serie => { let header = larvitar.buildHeader(serie); let data = larvitar.buildData(serie, false); // build vtk volume with larvitar const image = dtk.buildVtkVolume(header, data); // run mpr mpr = new dtk.MPRManager(targetElements); // get initial state obj: this object will be used to share data updates state = mpr.getInitialState(); // set image mpr.setImage(state, image); // set active tool ("level" or "crosshair") mpr.setTool("level", state); // change view rotation mpr.onRotate("top", "x", 30, state); // change view MIP thickness mpr.onThickness("top", "x", 50, state); }); </code></pre> <h2 id="dev">DEV</h2> <p><code>yarn dev && cp ./dist/diglettk.js ./docs/examples/diglettk.js</code> to build the lib and move it from <code>dist</code> folder to <code>examples</code>.</p> <p>then load the desired example with a webserver (eg VS code liveserver).</p> <p><code>yarn build</code> to build the librery for production</p> <p><code>yarn generate-docs</code> to build the documentation in the <code>documentation</code> folder.</p> <p><code>yarn codehawk</code> to run static code analysis with <a href="https://github.com/sgb-io/codehawk-cli">codehawk</a>.</p> <p>If you have <a href="https://github.com/sverweij/dependency-cruiser">dependency cruiser</a> globally installed, you can generate dependency graphs with:<br> <code>yarn dep:svg</code> to build a dependency graph (.svg)<br> <code>yarn dep:html</code> to build an interactive dependency graph (.html)</p> <h3 id="roadmap">RoadMap</h3> <p>--</p> <ul> <li>[x] Volume Rendering</li> <li>[x] Measuring tools</li> <li>[ ] Segmentations (Cornerstone.js >>> data >>> vtk.js)</li> <li>[x] Colormaps</li> <li>[ ] Multi Slice Image Mapper (a different MPR implementation)</li> </ul> <h3 id="todo">TODO</h3> <ul> <li>[x] documentation</li> <li>[x] <s>rollup config</s> webpack config</li> <li>[x] examples</li> <li>[x] npm package</li> <li>[ ] webpack-dev-server for a better dev experience</li> </ul></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>