Awesome
<p align="center"> <img src="https://user-images.githubusercontent.com/214063/46479857-4cd66e80-c7f0-11e8-9585-5748409c9490.png" width="60%"> </p> <p align="center"> <a href="https://travis-ci.org/FNNDSC/ami"> <img src="https://travis-ci.org/FNNDSC/ami.svg?branch=master" alt="Build Status"> </a> <a href="https://cdnjs.com/libraries/ami.js"> <img src="https://img.shields.io/cdnjs/v/ami.js.svg" alt="CDNJS Version"> </a> <a href="https://www.npmjs.com/package/ami.js"> <img src="https://img.shields.io/npm/v/ami.js/next.svg" alt="NPM Version"> </a> <a href="https://join.slack.com/t/amijs/shared_invite/enQtNDU5MTQ1OTMzMDYxLWE5NTBlMWM2ZjhlYjVkNzZmZDg3YTdjYzQxYWI3NTY4NmIyZGY5MmQyYjE4NmQyOGZkY2NlYzY1MTk5ZDFmNWY"> <img src="https://img.shields.io/badge/slack-join-blue.svg" alt="Slack"> </a> </p>Content
Hello AMI
<table> <tr> <!-- Lesson 00 --> <td valign="middle" width="100"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/00' target=_blank> <img src="https://unpkg.com/ami.js@next/lessons/00/assets/thumbnail-128x128.jpg" alt="lesson00" title="Click me!"> </a> </td> <td valign="top" width="326"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/00'> <b>Lesson 00: Load</b> </a> <div> Load DICOM Data and get a nice Series/Stack/Frame structure. </div> </td> <!-- Lesson 01 --> <td valign="middle" width="100"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/01' target=_blank> <img src="https://cloud.githubusercontent.com/assets/214063/14734707/8963a142-086c-11e6-99e2-35125f5ebb83.gif" style="width:128x, height:128px" alt="lesson01" title="Click me!"> </a> </td> <td valign="top" width="326"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/01'> <b>Lesson 01: Visualize 3D</b> </a> <div> Look at the data we loaded in 3D. </div> </td> </tr> <tr> <!-- Lesson 02 --> <td valign="middle" width="100"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/02' target=_blank> <img src="https://cloud.githubusercontent.com/assets/214063/14734782/1aa3006c-086d-11e6-9f56-6476e5ac6188.gif" style="width:128x, height:128px" alt="lesson00" title="Click me!"> </a> </td> <td valign="top" width="326"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/02'> <b>Lesson 02: Mesh</b> </a> <div> Add a mesh to the scene. </div> </td> <!-- Lesson 03 --> <td valign="middle" width="100"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/03' target=_blank> <img src="https://cloud.githubusercontent.com/assets/214063/14734860/99882c22-086d-11e6-99ae-16b7e5371f40.gif" style="width:128x, height:128px" alt="lesson00" title="Click me!"> </a> </td> <td valign="top" width="326"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/03'> <b>Lesson 03: Visualize 2D</b> </a> <div> Look at the data in 2D. </div> </td> </tr> <tr> <!-- Lesson 04 --> <td valign="middle" width="100"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/04' target=_blank> <img src="https://cloud.githubusercontent.com/assets/214063/16259390/b04a7d96-3862-11e6-8937-3019b913a21f.gif" style="width:128x, height:128px" alt="lesson00" title="Click me!"> </a> </td> <td valign="top" width="326"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/04' target=_blank> <b>Lesson 04: Labelmap</b> </a> <div> Overlays on top of you data. </div> </td> <!-- Lesson 05 --> <td valign="middle" width="100"> <!--<a href='http://jsfiddle.net/gh/get/library/pure/fnndsc/ami/tree/master/lessons/02#run' target=_blank>--> <!-- <img src="https://cdn.rawgit.com/fnndsc/ami/master/lessons/02/thumbnail-128x128.jpg" alt="lesson00" title="Click me!">--> <!-- <img src="http://xtk.github.com/fiddlelogo_small2.png">--> <!--</a>--> </td> <td valign="top" width="326"> <!--<a href='http://jsfiddle.net/gh/get/library/pure/fnndsc/ami/tree/master/lessons/02#run'>--> <b>Lesson 05: TRK</b> <!--</a>--> <div> TRK - coming soon. </div> </td> </tr> <tr> <!-- Lesson 06 --> <td valign="middle" width="100"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/06' target=_blank> <img src="https://cloud.githubusercontent.com/assets/214063/20212355/fdf512b2-a802-11e6-884d-bfafd0a1ec7d.gif" style="width:128x, height:128px" alt="lesson00" title="Click me!"> </a> </td> <td valign="top" width="326"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/06'> <b>Lesson 06: Volume Rendering</b> </a> <div> Volume Rendering. </div> </td> <!-- Lesson 07 --> <td valign="middle" width="100"> <!--<a href='http://jsfiddle.net/gh/get/library/pure/fnndsc/ami/tree/master/lessons/02#run' target=_blank>--> <!-- <img src="https://cdn.rawgit.com/fnndsc/ami/master/lessons/02/thumbnail-128x128.jpg" alt="lesson00" title="Click me!">--> <!-- <img src="http://xtk.github.com/fiddlelogo_small2.png">--> <!--</a>--> </td> <td valign="top" width="326"> <!--<a href='http://jsfiddle.net/gh/get/library/pure/fnndsc/ami/tree/master/lessons/02#run'>--> <b>Lesson 07: Lookup tables</b> <!--</a>--> <div> Lookup Tables - coming soon. </div> </td> </tr> <tr> <!-- Lesson 08 --> <td valign="middle" width="100"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/08' target=_blank> <img src="https://cloud.githubusercontent.com/assets/214063/20597899/9b7ec102-b246-11e6-804b-be8ac6dc9a68.gif" style="width:128x, height:128px" alt="lesson00" title="Click me!"> </a> </td> <td valign="top" width="326"> <a href='https://codesandbox.io/s/github/FNNDSC/ami/tree/master/lessons/08'> <b>Lesson 08: Custom progress bar</b> </a> <div> Custom progress bars. </div> </td> </tr> </table>(more) Advanced demos
Volume rendering, 2D viewer, arbitrary reslicing and more examples and advanced demos there!
Features
ā READY š¶ IN PROGRESS OR LIMITED SUPPORT ā ON ROADMAP
Capabilities | Volumes | Meshes | Widgets |
---|---|---|---|
ā 2D Visulization | ā Dicom | ā VTK (THREEJS) | š¶ Handle (2D/3D) |
ā 3D Visualization | ā NRRD | ā STL (THREEJS) | š¶ Probe (2D/3D) |
ā Volume Rendering | ā Nifti | ā TRK | š¶ Ruler (2D/3D) |
ā Lookup Tables | ā MHD/(Z)RAW | ā FSM | š¶ Orientation (2D/3D) |
ā Label Maps | ā MGH/MGZ | ā CURV | š¶ Angle (2D/3D) |
ā JPEG |
Usage
Pre-requisites
- ES2015 promises support. (consider using polyfills if needed)
- Load THREEJS your index.html BEFORE AMI.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r81/three.js"></script>
Yarn
$> yarn add ami.js
Note: you might need to include babel transforms in you build process.
// app.js
import * as AMI form 'ami.js';
window.console.log('Ready to rock!!');
ami.js
Check-out the lessons to get started quickly.
New: Use the new factory not to have to include three
in index.html.
import * as THREE from 'three';
import {stackHelperFactory} from 'ami.js';
const StackHelper = stackHelperFactory(THREE);
const stackHelper = new StackHelper();
Add AMI in your index.html after THREEJS.
<!-- index.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r81/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ami.js/0.0.12/ami.min.js"></script>
<script src="app.js"></script>
#app.js
const AMI = AMI;
window.console.log('Ready to rock!!');
Developer corner
Get the source code and related packages.
$> git clone https://github.com/FNNDSC/ami.git
$> cd ami
$> yarn install
To run examples (browserify/babelify/serve the example)
$> yarn example <examples name>
#run the geometries_slice example
$> yarn example geometries_slice
Build standalone library to lib/
$> yarn build:ami
Build minified standalone version run
$> yarn build:ami:prod
Tests
$> yarn test
Documentation
$> yarn doc
Build and deploy dist/ to gh-pages
$> yarn deploy
Find out more about the API.
Change log
Credits
AMI would not exist without them:
THREEJS
- Base components such as Vectors, Matrices and Objects3D.
- HTML template for example page.
- Author(s): mrdoob
DicomParser
- DICOM parsing relies on it.
- Author(s): chafey
CornerstoneWADOImageLoader
- Was used to figure out how to use the dicom parser properly.
- Author(s): chafey
NIFTI-Reader-JS
- Nifti parsing relies on it.
- Author(s): rii-mango
NRRD-JS
- NRRD parsing relies on it.
- Author(s): jaspervdg
JPEGLosslessDecoderJS
- JPEG Lossless Decoder for DICOM images
- Author(s): rii-mango
Image-JPEG2000
Pako
- GZ file decompression
- Author(s): nodeca
Citations
2017
- From brain imaging to weather imaging - McCaie - informaticslab, Met Office (blog post)
- Medical imaging in the browser with the A* Medical Imaging (AMI) toolkit. - Rannou et al. - ESMRMB 2017 (poster)
- Reusable Client-Side JavaScript Modules for Immersive Web-Based Real-Time Collaborative Neuroimage Visualization - Bernal-Rusiel et al. - Frontiers in Neuroinformatics 2017 (article)