@niivue/niivue 0.44.2 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@niivue/niivue",
-  "version": "0.44.2",
+  "version": "0.45.0",
   "description": "minimal webgl2 nifti image viewer",
   "types": "./build/index.d.ts",
   "main": "./build/index.js",

package/src/index.html

@@ -58,7 +58,30 @@
         class="slider"
         id="fiberCalMin"
       />
-      <button id="about">About</button>
+      <label for="layoutSelect">Layout</label>
+      <select id="layoutSelect">
+        <option value="0" selected>Auto</option>
+        <option value="1">Column</option>
+        <option value="2">Grid</option>
+        <option value="3">Row</option>
+      </select>
+      <label for="renderingSelect">MultiplanarRendering</label>
+      <select id="renderingSelect">
+        <option value="0">Never</option>
+        <option value="1">Always</option>
+        <option value="2" selected>Auto</option>
+      </select>
+      <select id="sliceType">
+        <option value="0">Axial</option>
+        <option value="1">Coronal</option>
+        <option value="2">Sagittal</option>
+        <option value="4">Render</option>
+        <option value="3" selected>Multiplanar</option>
+      </select>
+      <label for="equalCheck">EqualSize</label>
+      <input type="checkbox" id="equalCheck" checked />
+      <label for="cornerCheck">CornerText</label>
+      <input type="checkbox" id="cornerCheck" unchecked />
     </header>
     <main id="canvas-container">
       <canvas id="gl1"></canvas>
@@ -107,16 +130,31 @@
         nv1.meshes[0].dpv[0].cal_min = this.value * 1; //*1 converts string to number
         nv1.setMeshProperty(nv1.meshes[0].id, "colormap", fiberColormap.value);
       };
-      about.onclick = function () {
-        window.alert(
-          "The `Per Vertex` colors visualize a tsf format overlay created with tcksample",
-        );
-      };
+      layoutSelect.onchange = function () {
+        nv1.setMultiplanarLayout(Number(this.value));
+      }
+      renderingSelect.onchange = function () {
+        nv1.opts.multiplanarShowRender =  Number(this.value);
+        nv1.drawScene();
+      }
+      equalCheck.onchange = function () {
+        nv1.opts.multiplanarEqualSize = this.checked
+        nv1.drawScene()
+      }
+      cornerCheck.onchange = function () {
+        //nv1.opts.isCornerOrientationText = this.checked\
+        nv1.setCornerOrientationText(this.checked)
+      }
+      sliceType.onchange = function () {
+        let st = parseInt(document.getElementById("sliceType").value);
+        nv1.setSliceType(st)
+      }
       var volumeList1 = [{ url: "../demos/images/mni152.nii.gz" }];
       let defaults = {
         backColor: [0, 0, 0, 1],
         show3Dcrosshair: true,
-        loglevel: 'debug'
+        loglevel: 'debug',
+        isRuler: true
       };
       var nv1 = new Niivue(defaults);
       nv1.attachToCanvas(gl1);
@@ -152,6 +190,7 @@
         };
         cmapEl.appendChild(btn);
       }
+      equalCheck.onchange()
     </script>
   </body>
-</html>
+</html>