Merge pull request #3 from jonathanlurie/dev

Dev
Pixpipe · Mar 28, 2017 · f3d4f21 · f3d4f21
2 parents 3f49985 + 2c20582
commit f3d4f21
Show file tree

Hide file tree

Showing 39 changed files with 22,944 additions and 1,011 deletions.
diff --git a/dist/pixpipe.js b/dist/pixpipe.js
diff --git a/dist/pixpipe.js.map b/dist/pixpipe.js.map
diff --git a/doc/index.html b/doc/index.html
diff --git a/examples/css/style.css b/examples/css/style.css
@@ -19,3 +19,11 @@ code {
   border-radius: 3px;
   font-family: monospace;
 }
+
+a{
+  text-decoration: none;
+}
+
+.canvasDiv{
+  margin-bottom: 10px;
+}
diff --git a/examples/fileToArrayBuffer.html b/examples/fileToArrayBuffer.html
@@ -0,0 +1,69 @@
+<html>
+<head>
+  <title>FileToArrayBufferReader to ArrayBuffer</title>
+
+  <script src="../dist/pixpipe.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
+  <p>
+  This does the following :
+  <ul>
+    <li>opening a local file, using <code>pixpipe.FileToArrayBufferReader</code></li>
+    <li>display the length of the ArrayBuffer in Bytes</li>
+  </ul>
+
+  </p>
+
+  <div>
+		Select an file:
+		<input type="file" id="fileInput" multiple="multiple">
+    <br>
+    <span id="fileInfo"></span>
+	</div>
+
+  <script>
+  window.onload = function() {
+
+    var fileInput = document.getElementById('fileInput');
+
+    // The filter to read image from URL
+    var file2Buff = new pixpipe.FileToArrayBufferReader();
+
+    // the image is loaded...
+    // here, filter = url2ImgFilter
+    file2Buff.on("ready", function( filter ){
+
+      var filenames = filter.getMetadata("filenames");
+
+      filter.forEachOutput( function( category, output){
+        document.getElementById('fileInfo').innerHTML += "<br><b>" + filenames[category] + "</b> successfully loaded (" + output.byteLength + " bytes)";
+      })
+
+    });
+
+
+    // event listener of the file input
+    fileInput.addEventListener('change', function(e) {
+      var files = e.target.files;
+      var filenames = {};
+
+      for(var i=0; i<files.length; i++){
+        // set the input, an HTML5 File object and a category (ID)
+        file2Buff.addInput(files[i], i);
+        filenames[i] = files[i].name ;
+      }
+
+      file2Buff.setMetadata("filenames", filenames);
+
+      // Perform the reading + conversion ibto ArrayBuffer
+      file2Buff.update();
+		});
+
+  }
+  </script>
+
+</body>
+</html>
diff --git a/examples/fileToImage2D.html b/examples/fileToImage2D.html
@@ -1,13 +1,13 @@
 <html>
 <head>
-  <title>URL to Image2D</title>
+  <title>File to Image2D</title>
 
   <script src="../dist/pixpipe.js"></script>
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
-  <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
+  <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
   <p>
   This does the following :
   <ul>
@@ -39,7 +39,7 @@ <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
 
     // the image is loaded...
     // here, filter = url2ImgFilter
-    file2ImgFilter.on("imageLoaded", function( filter ){
+    file2ImgFilter.on("ready", function( filter ){
         // use the output of the UrlImageReader as the input for CanvasImageWriter
         imageToCanvasFilter.addInput( filter.getOutput() );
         // actually copy the data from the Image2D into the inner HTML5 canvas

diff --git a/examples/fileToMinc2.html b/examples/fileToMinc2.html
@@ -0,0 +1,102 @@
+<html>
+<head>
+  <title>File to Minc2</title>
+
+  <script src="../dist/pixpipe.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
+  <p>
+  This does the following :
+  <ul>
+    <li>open a local Minc2 file, using <code>pixpipe.FileToArrayBufferReader</code></li>
+    <li>redirect the file buffer into a <code>pixpipe.Minc2Decoder</code> to extract Minc dataset and metadata</li>
+    <li>get the output as a generique <code>pixpipe.MniVolume</code> object</li>
+    <li><code>slice()</code> the volume 3 times, along 3 given axis to get 3 <code>pixpipe.Image2D</code> objects</li>
+    <li>display the images in separate canvas using a single instance of <code>pixpipe.CanvasImageWriter</code></li>
+  </ul>
+
+  </p>
+
+  <div>
+		Select an file:
+		<input type="file" id="fileInput">
+    <br>
+    <span id="fileInfo"></span>
+	</div>
+
+  <div id="myDiv_x"></div>
+  <div id="myDiv_y"></div>
+  <div id="myDiv_z"></div>
+
+  <script>
+  window.onload = function() {
+
+    var fileInput = document.getElementById('fileInput');
+
+    // The filter to read image from URL
+    var file2Buff = new pixpipe.FileToArrayBufferReader();
+
+    // the image is loaded...
+    // here, filter = url2ImgFilter
+    file2Buff.on("ready", function( filter ){
+
+      var filenames = filter.getMetadata("filenames");
+
+      var mincBuff = filter.getOutput();
+
+      var minc2Decoder = new pixpipe.Minc2Decoder();
+      minc2Decoder.addInput( mincBuff );
+      minc2Decoder.update();
+
+      var mniVolume_ORIG = minc2Decoder.getOutput();
+      var mniVolume = mniVolume_ORIG.clone();
+
+      if(mniVolume){
+        // create a filter to write the image into a canvas
+        var imageToCanvasFilter = new pixpipe.CanvasImageWriter( );
+        // replace the default min max values of [0, 255]
+        imageToCanvasFilter.setMetadata("min", mniVolume.getMetadata("voxel_min"));
+        imageToCanvasFilter.setMetadata("max", mniVolume.getMetadata("voxel_max"));
+
+        imageToCanvasFilter.setMetadata( "parentDivID", "myDiv_x" );
+        imageToCanvasFilter.addInput( mniVolume.getSlice("xspace", 80) );
+        imageToCanvasFilter.update();
+
+        imageToCanvasFilter.setMetadata( "parentDivID", "myDiv_y" );
+        imageToCanvasFilter.addInput( mniVolume.getSlice("yspace", 128) );
+        imageToCanvasFilter.update();
+
+        imageToCanvasFilter.setMetadata( "parentDivID", "myDiv_z" );
+        imageToCanvasFilter.addInput( mniVolume.getSlice("zspace", 128) );
+        imageToCanvasFilter.update();
+      }else{
+        console.warn("Non-existant output for minc2Decoder.");
+      }
+    });
+
+
+    // event listener of the file input
+    fileInput.addEventListener('change', function(e) {
+      var files = e.target.files;
+      var filenames = {};
+
+      for(var i=0; i<files.length; i++){
+        // set the input, an HTML5 File object and a category (ID)
+        file2Buff.addInput(files[i], i);
+        filenames[i] = files[i].name ;
+      }
+
+      file2Buff.setMetadata("filenames", filenames);
+
+      // Perform the reading + conversion ibto ArrayBuffer
+      file2Buff.update();
+		});
+
+  }
+  </script>
+
+</body>
+</html>
diff --git a/examples/fileToNifti.html b/examples/fileToNifti.html
@@ -0,0 +1,104 @@
+<html>
+<head>
+  <title>File to Nifti</title>
+
+  <script src="../dist/pixpipe.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
+  <p>
+  This does the following :
+  <ul>
+    <li>open a local NIfTI file, using <code>pixpipe.FileToArrayBufferReader</code></li>
+    <li>redirect the file buffer into a <code>pixpipe.NiftiDecoder</code> to extract NIfTI dataset and metadata</li>
+    <li>get the output as a generique <code>pixpipe.MniVolume</code> object</li>
+    <li><code>slice()</code> the volume 3 times, along 3 given axis to get 3 <code>pixpipe.Image2D</code> objects</li>
+    <li>display the images in separate canvas using a single instance of <code>pixpipe.CanvasImageWriter</code></li>
+  </ul>
+
+  </p>
+
+  <div>
+		Select an file:
+		<input type="file" id="fileInput">
+    <br>
+    <span id="fileInfo"></span>
+	</div>
+
+  <div id="myDiv_x"></div>
+  <div id="myDiv_y"></div>
+  <div id="myDiv_z"></div>
+
+  <script>
+  window.onload = function() {
+
+    var fileInput = document.getElementById('fileInput');
+
+    // The filter to read image from URL
+    var file2Buff = new pixpipe.FileToArrayBufferReader();
+
+    // the image is loaded...
+    // here, filter = url2ImgFilter
+    file2Buff.on("ready", function( filter ){
+
+      var filenames = filter.getMetadata("filenames");
+
+      var niftiBuff = filter.getOutput();
+
+      var niftiDecoder = new pixpipe.NiftiDecoder();
+      niftiDecoder.addInput( niftiBuff );
+      niftiDecoder.update();
+
+      var mniVolume = niftiDecoder.getOutput();
+
+      if(mniVolume){
+        // create a filter to write the image into a canvas
+        var imageToCanvasFilter = new pixpipe.CanvasImageWriter( );
+        // replace the default min max values of [0, 255]
+        imageToCanvasFilter.setMetadata("min", mniVolume.getMetadata("voxel_min"));
+        imageToCanvasFilter.setMetadata("max", mniVolume.getMetadata("voxel_max"));
+
+        // display sagital
+        imageToCanvasFilter.setMetadata( "parentDivID", "myDiv_x" );
+        imageToCanvasFilter.addInput( mniVolume.getSlice("xspace", 80) );
+        imageToCanvasFilter.update();
+
+        // display coronal
+        imageToCanvasFilter.setMetadata( "parentDivID", "myDiv_y" );
+        imageToCanvasFilter.addInput( mniVolume.getSlice("yspace", 128) );
+        imageToCanvasFilter.update();
+
+        // display axial
+        imageToCanvasFilter.setMetadata( "parentDivID", "myDiv_z" );
+        imageToCanvasFilter.addInput( mniVolume.getSlice("zspace", 128) );
+        imageToCanvasFilter.update();
+      }else{
+        console.warn("Non-existant output for niftiDecoder.");
+      }
+    });
+
+
+    // event listener of the file input
+    fileInput.addEventListener('change', function(e) {
+      var files = e.target.files;
+      var filenames = {};
+
+      for(var i=0; i<files.length; i++){
+        // set the input, an HTML5 File object and a category (ID)
+        file2Buff.addInput(files[i], i);
+        filenames[i] = files[i].name ;
+      }
+
+      file2Buff.setMetadata("filenames", filenames);
+
+      // Perform the reading + conversion ibto ArrayBuffer
+      file2Buff.update();
+		});
+
+  }
+  </script>
+
+</body>
+</html>
diff --git a/examples/forEachPixel.html b/examples/forEachPixel.html
@@ -9,7 +9,7 @@
 
 </head>
 <body>
-  <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
+  <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
   <p>
   This does the following :
   <ul>
@@ -41,7 +41,7 @@ <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
 
   // the image is loaded...
   // here, filter = url2ImgFilter
-  url2ImgFilter.on( "imageLoaded", function(filter){
+  url2ImgFilter.on( "ready", function(filter){
 
     var forEachPixelFilter = new pixpipe.ForEachPixelImageFilter();
 

diff --git a/examples/forEachPixelGradient.html b/examples/forEachPixelGradient.html
@@ -9,7 +9,7 @@
 
 </head>
 <body>
-  <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
+  <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
   <p>
   This does the following :
   <ul>
@@ -41,7 +41,7 @@ <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
 
   // the image is loaded...
   // here, filter = url2ImgFilter
-  url2ImgFilter.on( "imageLoaded", function(filter){
+  url2ImgFilter.on( "ready", function(filter){
     var loadedImage = url2ImgFilter.getOutput();
 
     // create an image, monoband, init to black (0)

diff --git a/examples/forEachPixelGradientBlend.html b/examples/forEachPixelGradientBlend.html
@@ -9,7 +9,7 @@
 
 </head>
 <body>
-  <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
+  <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
   <p>
   This does the following :
   <ul>
@@ -41,7 +41,7 @@ <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
 
   // the image is loaded...
   // here, filter = url2ImgFilter
-  url2ImgFilter.on( "imageLoaded", function(filter){
+  url2ImgFilter.on( "ready", function(filter){
     var loadedImage = url2ImgFilter.getOutput();
 
     // create an image, monoband, init to black (0)

diff --git a/examples/forEachPixelGradient_pipeline.html b/examples/forEachPixelGradient_pipeline.html
@@ -9,7 +9,7 @@
 
 </head>
 <body>
-  <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
+  <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
   <p>
   This does the following :
   <ul>
@@ -44,7 +44,7 @@ <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
 
   // the image is loaded...
   // here, filter = url2ImgFilter
-  url2ImgFilter.on( "imageLoaded", function(filter){
+  url2ImgFilter.on( "ready", function(filter){
 
     var loadedImage = url2ImgFilter.getOutput();
 

diff --git a/examples/image2DToCanvas.html b/examples/image2DToCanvas.html
@@ -9,7 +9,7 @@
 
 </head>
 <body>
-  <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
+  <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
   <p>
   This does the following :
   <ul>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     </head>
     <body>
-      <h1><span style="color: #ff91d7">Pixpipe</span>js</h1>
+      <h1><a href="https://github.com/jonathanlurie/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
       <p>
       This does the following :
       <ul>
@@ Expand Down @@