DigletTK

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 vue-vtksjs-viewport and react-vtkjs-viewport, but it is built to be agnostic with respect to frontend frameworks. It also provides glue-functions to easily integrate with cornerstone.js, via Larvitar library.

Install

• yarn add diglettk

  OR

• clone the repository and yarn add /path/to/repository

  OR

• yarn add https://github.com/dvisionlab/DigletTK.git#master

Use

Examples and docs at http://diglettk.dvisionlab.com/. Short mpr version:

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

DEV

yarn dev && cp ./dist/diglettk.js ./docs/examples/diglettk.js to build the lib and move it from dist folder to examples.

then load the desired example with a webserver (eg VS code liveserver).

yarn build to build the librery for production

yarn generate-docs to build the documentation in the documentation folder.

yarn codehawk to run static code analysis with codehawk.

If you have dependency cruiser globally installed, you can generate dependency graphs with: yarn dep:svg to build a dependency graph (.svg) yarn dep:html to build an interactive dependency graph (.html)

RoadMap

--

• Volume Rendering
• Measuring tools
• Segmentations (Cornerstone.js >>> data >>> vtk.js)
• Colormaps
• Multi Slice Image Mapper (a different MPR implementation)

TODO

• documentation
• rollup config webpack config
• examples
• npm package
• webpack-dev-server for a better dev experience