Merge branch 'dev'

FNNDSC · Dec 30, 2016 · ed58d0d · ed58d0d
2 parents 85aa5c5 + b13d810
commit ed58d0d
Show file tree

Hide file tree

Showing 23 changed files with 454 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -212,9 +212,9 @@ Volume rendering, 2D viewer, arbitrary reslicing and more examples and advanced
 |-------------------- |----------- |----------------- |------------------------ |
 | ✅ 2D Visulization | ✅ Dicom | ✅ VTK (THREEJS) | 🔶 Handle (2D/3D) |
 | ✅ 3D Visualization | ✅ NRRD | ✅ STL (THREEJS) | 🔶 Probe (2D/3D) |
-| ✅ Volume Rendering | 🔶 Nifti | 🔶 TRK | 🔶 Ruler (2D/3D) |
+| ✅ Volume Rendering | ✅ Nifti | 🔶 TRK | 🔶 Ruler (2D/3D) |
 | ✅ Lookup Tables | ❌ MGH/MGZ | ❌ CURV | 🔶 Angle (2D/3D) |
-| 🔶 Label Maps  | ❌ JPEG | ❌ FSM | 🔶 Orientation (2D/3D) |
+| 🔶 Label Maps  | ❌ JPEG | ❌ FSM | 🔶 Orientation (2D/3D) |
 
 ## Usage
 
@@ -247,7 +247,7 @@ 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.11/ami.min.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

diff --git a/bower.json b/bower.json
@@ -1,5 +1,5 @@
 {
  "name": "ami.js",
- "version": "v0.0.12",
+ "version": "0.0.13",
  "dependencies": {}
-}
+}
diff --git a/build/ami.js b/build/ami.js
diff --git a/build/ami.min.js b/build/ami.min.js
diff --git a/examples/viewers_upload/viewers_upload.css b/examples/viewers_upload/viewers_upload.css
@@ -3,14 +3,9 @@
  outline: none;
 }
 
-#stats {
- position: absolute;
- top:0;
- left: 0;
-}
 
-#r3d {
- background-color: #000;
+#viewer, #r3d, #orientation {
+ background-color: #212121;
  left: 0;
  right: 0;
  top: 0;
@@ -21,6 +16,44 @@
  overflow:hidden;
 }
 
+#orientation {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+}
+
+.direction {
+ z-index: 1;
+ color: #fff;
+ text-transform: uppercase;
+ font-size: 16px;
+ position: absolute;
+ margin: 14px;
+ padding: 4px;
+ border-radius: 50%;
+ width: 18px;
+ height: 18px;
+ text-align: center;
+ background-color: rgba(0, 0, 0, .3);
+}
+
+#top {
+ top: 24px;
+}
+
+#bottom {
+ bottom: 0;
+}
+
+#left {
+ left: 0;
+}
+
+#right {
+ right: 0;
+}
+
 #my-gui-container {
  position: fixed;
  top: 30px;
@@ -65,7 +98,7 @@
  left: 0;
  bottom: 0;
  right: 0;
- background-color: #B0BEC5;
+ background-color: #212121;
  z-index: 99;
  align-items: center;
  display: flex;

diff --git a/examples/viewers_upload/viewers_upload.html b/examples/viewers_upload/viewers_upload.html
@@ -12,5 +12,15 @@
  <div id="my-lut-canvases"></div>
 </div>
 
-<div id="r3d"></div>
+<div id="viewer">
+ <div id="orientation">
+ <div id="top" class="direction"></div>
+ <div id="bottom" class="direction"></div>
+ <div id="left" class="direction"></div>
+ <div id="right" class="direction"></div>
+ </div>
+ <div id="r3d"></div>
+</div>
+
+
 <div style="background-color: #f9f9f9; width: 0; height: 0;"></div>
diff --git a/examples/viewers_upload/viewers_upload.js b/examples/viewers_upload/viewers_upload.js
@@ -32,7 +32,6 @@ function init() {
  // render
  controls.update();
  renderer.render(scene, camera);
- statsyay.update();
 
  // request new frame
  requestAnimationFrame(function() {
@@ -46,17 +45,10 @@ function init() {
  antialias: true
  });
  renderer.setSize(threeD.clientWidth, threeD.clientHeight);
- renderer.setClearColor(0x607D8B, 1);
-
- //let maxTextureSize = renderer.context.getParameter(renderer.context.MAX_TEXTURE_SIZE);
- //let maxTextureImageUnits = renderer.context.getParameter(renderer.context.MAX_TEXTURE_IMAGE_UNITS);
+ renderer.setClearColor(0x212121, 1);
 
  threeD.appendChild(renderer.domElement);
 
- // stats
- statsyay = new Stats();
- threeD.appendChild(statsyay.domElement);
-
  // scene
  scene = new THREE.Scene();
  // camera
@@ -81,6 +73,29 @@ window.onload = function() {
  // init threeJS...
  init();
 
+ function updateLabels( labels, modality ){
+
+ if( modality === 'CR' ||
+ modality === 'DX' ){
+
+ return;
+
+ }
+
+ var top = document.getElementById('top');
+ top.innerHTML = labels[0];
+
+ var bottom = document.getElementById('bottom');
+ bottom.innerHTML = labels[1];
+
+ var right = document.getElementById('right');
+ right.innerHTML = labels[2];
+
+ var left = document.getElementById('left');
+ left.innerHTML = labels[3];
+
+ }
+
  function buildGUI(stackHelper) {
  let stack = stackHelper._stack;
 
@@ -126,18 +141,24 @@ window.onload = function() {
  let invertRows = cameraFolder.add(camUtils, 'invertRows');
  invertRows.onChange(function() {
  camera.invertRows();
+ updateLabels( camera.directionsLabel, stack.modality );
  });
 
  let invertColumns = cameraFolder.add(camUtils, 'invertColumns');
  invertColumns.onChange(function() {
  camera.invertColumns();
+ updateLabels( camera.directionsLabel, stack.modality );
  });
 
  let angle = cameraFolder.add(camera, 'angle', 0, 360).step(1).listen();
+ angle.onChange(function() {
+ updateLabels( camera.directionsLabel, stack.modality );
+ });
 
  let rotate = cameraFolder.add(camUtils, 'rotate');
  rotate.onChange(function() {
  camera.rotate();
+ updateLabels( camera.directionsLabel, stack.modality );
  });
 
  let orientationUpdate = cameraFolder.add(camUtils, 'orientation', ['default', 'axial', 'coronal', 'sagittal']);
@@ -146,16 +167,18 @@ window.onload = function() {
  camera.update();
  camera.fitBox(2);
  stackHelper.orientation = camera.stackOrientation;
+ updateLabels( camera.directionsLabel, stack.modality );
  });
 
  let conventionUpdate = cameraFolder.add(camUtils, 'convention', ['radio', 'neuro']);
  conventionUpdate.onChange(function(value) {
  camera.convention = value;
  camera.update();
  camera.fitBox(2);
+ updateLabels( camera.directionsLabel, stack.modality );
  });
 
- cameraFolder.open();
+ //cameraFolder.open();
  }
 
  function hookCallbacks(stackHelper) {
@@ -239,7 +262,7 @@ window.onload = function() {
 
  let stackHelper = new HelpersStack(stack);
  stackHelper.bbox.visible = false;
- stackHelper.border.color = 0x9996F3;
+ stackHelper.border.visible = false;
  scene.add(stackHelper);
 
  // set camera
@@ -268,6 +291,7 @@ window.onload = function() {
  camera.update();
  camera.fitBox(2);
 
+ updateLabels( camera.directionsLabel, stack.modality );
  buildGUI(stackHelper);
  hookCallbacks(stackHelper);
  }

diff --git a/lessons/00/demo.html b/lessons/00/demo.html
@@ -14,7 +14,7 @@
 
 
 <!-- AMI CDN -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.12/ami.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.13/ami.min.js"></script>
 
 
 

diff --git a/lessons/01/demo.html b/lessons/01/demo.html
@@ -15,7 +15,7 @@
 
 
 <!-- AMI CDN -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.12/ami.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.13/ami.min.js"></script>
 
 
 

diff --git a/lessons/02/demo.html b/lessons/02/demo.html
@@ -21,7 +21,7 @@
 
 
 <!-- AMI CDN -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.12/ami.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.13/ami.min.js"></script>
 
 
 

diff --git a/lessons/03/demo.html b/lessons/03/demo.html
@@ -15,7 +15,7 @@
 
 
 <!-- AMI CDN -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.12/ami.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.13/ami.min.js"></script>
 
 
 

diff --git a/lessons/04/demo.html b/lessons/04/demo.html
@@ -20,7 +20,7 @@
 
 
 <!-- AMI CDN -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.12/ami.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.13/ami.min.js"></script>
 
 
 

diff --git a/lessons/05/demo.html b/lessons/05/demo.html
@@ -16,7 +16,7 @@
 
 
 <!-- AMI CDN -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.12/ami.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.13/ami.min.js"></script>
 
 
 

diff --git a/lessons/06/demo.html b/lessons/06/demo.html
@@ -20,7 +20,7 @@
 
 
 <!-- AMI CDN -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.12/ami.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.13/ami.min.js"></script>
 
 
 

diff --git a/lessons/08/demo.html b/lessons/08/demo.html
@@ -14,7 +14,7 @@
 
 
 <!-- AMI CDN -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.12/ami.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.13/ami.min.js"></script>
 
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ami.js",
- "version": "0.0.12",
+ "version": "0.0.13",
  "main": "src/ami.js",
  "keywords": ["ami", "ami.js","three.js", "webgl", "dicom", "nifti", "awesome", "medical", "imaging", "xtk", "nrrd", "vtk", "stl", "trk"],
  "author": {