@niivue/niivue 0.22.2 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@niivue/niivue",
-  "version": "0.22.2",
+  "version": "0.23.0",
   "description": "minimal webgl2 nifti image viewer",
   "main": "./src/niivue.js",
   "unpkg": "./dist/niivue.umd.js",
@@ -42,6 +42,9 @@
   },
   "homepage": "https://github.com/niivue/niivue#readme",
   "dependencies": {
+    "daikon": "^1.2.42",
+    "fflate": "^0.7.3",
+    "gifti-reader-js": "^0.4.4",
     "gl-matrix": "^3.4.3",
     "nifti-reader-js": "^0.5.4",
     "rxjs": "^7.4.0",
@@ -51,7 +54,7 @@
     "clean-jsdoc-theme": "^3.3.1",
     "eslint": "^8.4.1",
     "express": "^4.17.1",
-    "http-server": "^14.0.0",
+    "http-server": "^14.1.0",
     "jest": "^27.4.4",
     "jest-image-snapshot": "^4.5.1",
     "jest-puppeteer": "^6.0.2",

package/src/colortables.js

@@ -0,0 +1,73 @@
+import * as cmaps from "./cmaps";
+
+export const colortables = function () {
+  this.version = 0.1;
+};
+
+colortables.prototype.colorMaps = function (sort = true) {
+  let cm = [];
+  for (const [key] of Object.entries(cmaps)) {
+    cm.push(key);
+  }
+  return sort === true ? cm.sort() : cm;
+};
+
+// not included in public docs
+colortables.prototype.colormap = function (lutName = "") {
+  //function colormap(lutName = "") {
+  let defaultLutName = "gray";
+  let availMaps = this.colorMaps();
+  for (let i = 0; i < availMaps.length; i++) {
+    let key = availMaps[i];
+    if (lutName.toLowerCase() === key.toLowerCase()) {
+      return this.makeLut(
+        cmaps[key].R,
+        cmaps[key].G,
+        cmaps[key].B,
+        cmaps[key].A,
+        cmaps[key].I
+      );
+    }
+  }
+  // if no match the return the default gray lut
+  return this.makeLut(
+    cmaps[defaultLutName].R,
+    cmaps[defaultLutName].G,
+    cmaps[defaultLutName].B,
+    cmaps[defaultLutName].A,
+    cmaps[defaultLutName].I
+  );
+}; // colormap()
+
+colortables.prototype.colormapFromKey = function (name) {
+  let availMaps = luts.colorMaps(); //DoDo let availMaps = this.colorMaps();
+  for (let i = 0; i < availMaps.length; i++) {
+    let key = availMaps[i];
+    if (name.toLowerCase() === key.toLowerCase()) {
+      return cmaps[key];
+    }
+  }
+};
+
+// not included in public docs
+colortables.prototype.makeLut = function (Rs, Gs, Bs, As, Is) {
+  //create color lookup table provided arrays of reds, greens, blues, alphas and intensity indices
+  //intensity indices should be in increasing order with the first value 0 and the last 255.
+  // this.makeLut([0, 255], [0, 0], [0,0], [0,128],[0,255]); //red gradient
+  var lut = new Uint8ClampedArray(256 * 4);
+  for (var i = 0; i < Is.length - 1; i++) {
+    //return a + f * (b - a);
+    var idxLo = Is[i];
+    var idxHi = Is[i + 1];
+    var idxRng = idxHi - idxLo;
+    var k = idxLo * 4;
+    for (var j = idxLo; j <= idxHi; j++) {
+      var f = (j - idxLo) / idxRng;
+      lut[k++] = Rs[i] + f * (Rs[i + 1] - Rs[i]); //Red
+      lut[k++] = Gs[i] + f * (Gs[i + 1] - Gs[i]); //Green
+      lut[k++] = Bs[i] + f * (Bs[i + 1] - Bs[i]); //Blue
+      lut[k++] = As[i] + f * (As[i + 1] - As[i]); //Alpha
+    }
+  }
+  return lut;
+}; // makeLut()

package/src/index.html

@@ -23,23 +23,11 @@
       <h1>
         hot reloadable development preview
       </h1>
-      <p>
-      <h3>Controls</h3>
-      <ul>
-        <li>move the crosshairs: left mouse click and drag (or click around)</li>
-        <li>slice scrolling: mouse or touch pad scroll up and down (pinch zoom for mobile)</li>
-        <li>change intensity range: right mouse click and drag a region (mobile not supported)</li>
-        <li>reset intensity: left mouse click double click (mobile not supported)</li>
-        <li><b>change the view mode by pressing the "v" key on your keyboard (mobile not supported yet)</b></li>
-        <li><b>cycle through clip planes by pressing the "c" key on your keyboard (mobile not supported yet)</b></li>
-      </ul>
-      </p>
     </section>
-
     <!-- demo 1 -->
     <section>
-      <div id="demo1" style="width:90%; height:400px;">
-        <canvas id="gl1" height=480 width=640>
+      <div id="demo1" style="width:90%; height:640px;">
+        <canvas id="gl1" height=640 width=640>
         </canvas>
       </div>
     </section>
@@ -50,48 +38,74 @@
 
     <!-- <script type="module" src="./index.js">
     </script> -->
-    <script type="module">
+    <script type="module" async>
       import { Niivue } from './niivue.js'
 			import {NVImage} from './nvimage.js'
+			import {NVMesh} from './nvmesh.js'
 			let query = window.location.search
 			const params = new URLSearchParams(query);
 			let url = params.get('url')
-			console.log('url is: ',params.get('url'))
-      // console.log(Niivue)
       var volumeList1 = [
         // first item is brackground image
         {
-          url: url ? url : "./mni152.nii.gz",//"./AIL.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
+          //url: url ? url : "../demos/images/example4d+orig.HEAD",//"./AIL.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
+          url: url ? url : "../tests/images/mni152.nii.gz",//"./AIL.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
           //url: "./mni152.nii.gz",
-					colorMap: "gray",
+          colorMap: "gray",
+          //urlImgData : "../demos/images/example4d+orig.BRIK.gz",
           opacity: 1,
           visible: true,
         },
-				{
-					url: "./hippo.nii.gz",
-					colorMap: 'red'
-				}
       ]
 			var nv1 = new Niivue({
-				logging: true,
+				logging: false,
 				show3Dcrosshair: true,
 				loadingText: 'there are no images',
-				dragAndDropEnabled: true
+				dragAndDropEnabled: true,
+				backColor: [0.3, 0.2, 0.4, 1],
+				//thumbnail: "../demos/images/DoG.png"
 			})
       nv1.setRadiologicalConvention(false)
       nv1.attachTo('gl1')
-      nv1.loadVolumes(volumeList1)
-      //nv1.setSliceType(nv1.sliceTypeMultiplanar)
+
       nv1.setSliceType(nv1.sliceTypeRender)
+      nv1.setClipPlane([-0.1, 270, 0])
+      nv1.setRenderAzimuthElevation(90,10)
+
+      await nv1.loadVolumes(volumeList1)
+			
+      var meshLayersList1 = [
+        //{url: "../demos/images/PJM-stc-lh.stc", colorMap: "rocket", opacity: 0.7},
+        //{url: "../demos/images/boggle.lh.annot", colorMap: "rocket", opacity: 0.9},
+      ]
+			
+      await nv1.loadMeshes([
+         {url: "../demos/images/dpsv.trx", rgba255 : [255, 255, 255, 255], layers : meshLayersList1},
+         //{url: "../demos/images/mni152_2009AO.mz3", rgba255 : [255, 255, 255, 255]},
+         //{url: "../demos/images/BrainMesh_ICBM152.lh.mz3", rgba255 : [255, 255, 255, 255], layers : meshLayersList1},
+         //{url: "../demos/images/PJM-example-lh.gii", rgba255 : [255, 255, 255, 255], layers : meshLayersList1},
+      ])
+
       // example of using the 'location' change event with a callback function
       nv1.on('location', (data) => {
         // data is an object with properties: {mm: [N N N], vox: [N N N], frac: [N N N]}
         document.getElementById('location').innerHTML = 'voxel location: ' + data.vox + ' ' + data.values
-
       })
 
-    </script>
+			nv1.on('imageLoaded', (image) => {
+				console.log('imageLoaded', image.name)
+			})
+
+			nv1.on('intensityRange', (image) => {
+			 console.log(image.cal_min, image.cal_max)
+			})
+
+			setTimeout(() => {
+				//nv1.saveImage('test.nii.gz') 
+			}, 2000)
+			
+		</script>
   </div>
 </body>
 
-</html>
+</html>

package/src/indexDraw.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>NiiVue</title>
+  <style>
+    section {
+      margin: 20px;
+    }
+  </style>
+</head>
+
+<body style="font-family: sans-serif;">
+  <div id="app">
+    <noscript>
+      <strong>niivue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+
+    <section>
+      <h1>
+        hot reloadable development preview
+      </h1>
+    </section>
+    <section>
+      <div>
+        <label for="drawPen">Draw color:</label>
+        <select name="drawPen" id="drawPen">
+          <option value="-1">Off</option>
+          <option value="0">Erase</option>
+          <option value="1">Red</option>
+          <option value="2">Green</option>
+          <option value="3">Blue</option>
+        </select>
+        <button id="random">random lines</button>
+        <button id="save">save drawing</button>
+        <div class="slidecontainer">
+          drawing opacity <input type="range" min="0" max="100" value="100" class="slider" id="drawOpacity">
+        </div>
+      </div>
+    </section>
+    <!-- demo 1 -->
+    <section>
+      <div id="demo1" style="width:90%; height:640px;">
+        <canvas id="gl1" height=640 width=640>
+        </canvas>
+      </div>
+    </section>
+
+    <section>
+      <p id="location"></p>
+    </section>
+
+    <!-- <script type="module" src="./index.js">
+    </script> -->
+    <script type="module" async>
+    
+      document.getElementById("drawOpacity").addEventListener("change", doDrawOpacity);
+      function doDrawOpacity(){
+        nv1.setDrawOpacity(this.value * 0.01);
+      }
+      document.getElementById("drawPen").addEventListener("change", doDrawPen);
+      function doDrawPen(){
+        const mode = document.getElementById("drawPen").value;
+        nv1.setDrawingEnabled(mode >= 0);
+        if (mode >= 0)
+          nv1.opts.penValue = mode;
+      }
+      document.getElementById("random").addEventListener("click", doRandom);
+      function doRandom(){
+        nv1.createRandomDrawing(); 
+      }
+
+      document.getElementById("save").addEventListener("click", doSave);
+      function doSave(){
+        nv1.saveImage('test.nii', true);
+      }
+      import { Niivue } from './niivue.js'
+      import {NVImage} from './nvimage.js'
+      import {NVMesh} from './nvmesh.js'
+      let query = window.location.search
+      const params = new URLSearchParams(query);
+      let url = params.get('url')
+      var volumeList1 = [
+        // first item is brackground image
+        {
+          //url: url ? url : "../demos/images/example4d+orig.HEAD",//"./AIL.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
+          url: url ? url : "../demos/images/AIL.nii.gz",//"./AIL.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
+          //url: "./mni152.nii.gz",
+          colorMap: "gray",
+          //urlImgData : "../demos/images/example4d+orig.BRIK.gz",
+          opacity: 1,
+          visible: true,
+        },
+      ]
+      var nv1 = new Niivue({
+        logging: false,
+        show3Dcrosshair: true,
+        loadingText: 'there are no images',
+        dragAndDropEnabled: true,
+        backColor: [0.3, 0.2, 0.4, 1],
+        //thumbnail: "../demos/images/DoG.png"
+      })
+      nv1.setRadiologicalConvention(false)
+      nv1.attachTo('gl1')
+
+      await nv1.loadVolumes(volumeList1)
+      // example of using the 'location' change event with a callback function
+      nv1.on('location', (data) => {
+        // data is an object with properties: {mm: [N N N], vox: [N N N], frac: [N N N]}
+        document.getElementById('location').innerHTML = 'voxel location: ' + data.vox + ' ' + data.values
+      })
+    </script>
+  </div>
+</body>
+
+</html>

package/src/logger.js

@@ -1,3 +1,8 @@
+/**
+ * @class Log
+ * @type Log
+ * @param {number} logLevel
+ */
 export const Log = function (logLevel) {
   // log levels:
   // - 'debug'

package/src/meshes.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>NiiVue</title>
+  <style>
+    section {
+      margin: 20px;
+    }
+  </style>
+</head>
+
+<body style="font-family: sans-serif;">
+  <div id="app">
+    <noscript>
+      <strong>niivue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+
+    <section>
+      <h1>
+        hot reloadable development preview
+      </h1>
+    </section>
+<div class="slidecontainer">
+  intensity Max <input type="range" min="1" max="12" value="3" class="slider" id="fiberLengthSlider">
+</div>
+<div class="slidecontainer">
+  fiber dither <input type="range" min="0" max="10" value="1" class="slider" id="fiberDitherSlider">
+</div>
+
+    <!-- demo 1 -->
+    <section>
+      <div id="demo1" style="width:90%; height:640px;">
+        <canvas id="gl1" height=640 width=640>
+        </canvas>
+      </div>
+    </section>
+
+    <section>
+      <p id="location"></p>
+    </section>
+
+    <!-- <script type="module" src="./index.js">
+    </script> -->
+    <script type="module" async>
+      var slider = document.getElementById("fiberLengthSlider");
+      var sliderD = document.getElementById("fiberDitherSlider");
+      // Update the current slider value (each time you drag the slider handle)
+      slider.oninput = function() {
+        nv1.setMeshLayerProperty(nv1.meshes[0].id, 0, 'cal_min', this.value)
+        nv1.setMeshLayerProperty(nv1.meshes[0].id, 0, 'cal_max', this.value + 2)
+      }
+      sliderD.oninput = function() {
+        nv1.setMeshProperty(nv1.meshes[0].id, 'fiberDither', this.value * 0.1)
+      }
+      import { Niivue } from './niivue.js'
+			import {NVImage} from './nvimage.js'
+			import {NVMesh} from './nvmesh.js'
+			let query = window.location.search
+			const params = new URLSearchParams(query);
+			let url = params.get('url')
+			console.log('url is: ',params.get('url'))
+      // console.log(Niivue)
+      let connectome = {
+      "name": "simpleConnectome",
+      "nodeColormap": "viridis",
+      "nodeColormapNegative": "viridis",
+      "nodeMinColor": 2,
+      "nodeMaxColor": 4,
+      "nodeScale": 3, //scale factor for node, e.g. if 2 and a node has size 3, a 6mm ball is drawn
+      "edgeColormap": "warm",
+      "edgeColormapNegative": "winter",
+      "edgeMin": 2,
+      "edgeMax": 4,
+      "edgeScale": 1,
+      "nodes": {
+        "names":["RF", "LF", "RP","LP"], //currently unused
+        "X":[40, -40, 40, -40], //Xmm for each node
+        "Y":[40, 40, -40, -40], //Ymm for each node
+        "Z":[30, 20, 50, 50], //Zmm for each node
+        "Color":[2, 2, 3, 4], //Used to interpolate color
+        "Size":[2, 2, 3, 4], //Size of node
+      },
+      "edges": [1, 2, -3, 4,
+                0, 1, 0, 6,
+                0, 0, 1, 0,
+                0, 0, 0, 1,],
+    }
+      var volumeList1 = [
+        // first item is brackground image
+        {
+          //url: url ? url : "../demos/images/example4d+orig.HEAD",//"./AIL.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
+          url: url ? url : "../tests/images/mni152.nii.gz",//"./AIL.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
+          //url: "./mni152.nii.gz",
+          colorMap: "gray",
+          //urlImgData : "../demos/images/example4d+orig.BRIK.gz",
+          opacity: 1,
+          visible: true,
+        },
+{
+url: "../demos/images/hippo.nii.gz",
+colorMap: 'red'
+}
+      ]
+			var nv1 = new Niivue({
+				logging: true,
+				show3Dcrosshair: true,
+				loadingText: 'there are no images',
+				dragAndDropEnabled: true,
+				backColor: [0.3, 0.2, 0.4, 1],
+				//thumbnail: "../demos/images/DoG.png"
+			})
+      nv1.setRadiologicalConvention(false)
+      nv1.attachTo('gl1')
+      //await nv1.loadVolumes(volumeList1)
+
+//			nv1.createEmptyDrawing()
+
+      var meshLayersList1 = [
+        {url: "../demos/images/lh.curv", colorMap: "rocket", opacity: 0.7},
+        //{url: "../demos/images/boggle.lh.annot", colorMap: "rocket", opacity: 0.9},
+      ]
+
+
+      nv1.loadMeshes([
+         {url: "../demos/images/lh.pial", rgba255 : [255, 255, 255, 255], layers : meshLayersList1},
+         //{url: "../demos/images/BrainMesh_ICBM152.lh.mz3", rgba255 : [255, 255, 255, 255], layers : meshLayersList1},
+         //{url: "../demos/images/PJM-example-lh.gii", rgba255 : [255, 255, 255, 255], layers : meshLayersList1},
+      ])
+			
+      //nv1.loadConnectome(connectome)
+      //nv1.setSliceType(nv1.sliceTypeMultiplanar)
+      nv1.setSliceType(nv1.sliceTypeRender)
+      nv1.setClipPlane([-0.1, 90, 0])
+      nv1.setRenderAzimuthElevation(90,10)
+      //nv1.volumes[0].frame4D = 5;
+
+      //nv1.updateGLVolume()
+      // example of using the 'location' change event with a callback function
+      nv1.on('location', (data) => {
+        // data is an object with properties: {mm: [N N N], vox: [N N N], frac: [N N N]}
+        document.getElementById('location').innerHTML = 'voxel location: ' + data.vox + ' ' + data.values
+        //nv1.volumes[0].frame4D =  Math.floor(Math.random() * 9);
+        //nv1.updateGLVolume()
+      })
+
+			nv1.on('imageLoaded', (image) => {
+				console.log('imageLoaded', image.name)
+			})
+
+			nv1.on('intensityRange', (image) => {
+			 console.log(image.cal_min, image.cal_max)
+			})
+    </script>
+  </div>
+</body>
+
+</html>