@niivue/niivue 0.44.1 → 0.44.2-dev.2

package/src/index_sync.html

@@ -0,0 +1,333 @@
+<!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>Bidirectional Sync</title>
+<style>
+  html {
+    height: auto;
+    min-height: 100%;
+    margin: 0;
+  }
+  body {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    min-height: 100%;
+    width: 100%;
+    position: absolute;
+    font-family: system-ui, Arial, Helvetica, sans-serif;
+    user-select: none; /* Standard syntax */
+    color: white;
+    background: #202020;
+  }
+  header {
+    margin: 10px;
+  }
+  footer {
+    margin: 5px;
+  }
+  .page-wrapper {
+    margin: 2px;
+  }
+  .row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    min-height: 100%;
+    margin: 2px;
+  }
+  .column {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex: 1;
+    background: #404040;
+  }
+  canvas:focus {
+    outline: red 1px solid;
+  }
+</style>
+  </head>
+  <body>
+    <noscript>niivue requires JavaScript.</noscript>
+    <header>
+      <label for="layout">Layout</label>
+      <select id="layout">
+        <option value="0" selected>Auto</option>
+        <option value="1">Column</option>
+        <option value="2">Grid</option>
+        <option value="3">Row</option>
+      </select>
+      <label for="canvasHeight">Height</label>
+      <select id="canvasHeight">
+        <option value="256">256</option>
+        <option value="640" selected>512</option>
+        <option value="768">768</option>
+      </select>
+      <label for="syncDrop"> Broadcast</label>
+      <select id="syncDrop">
+        <option value="disabled">Sync Disabled</option>
+        <option value="2d">Sync 2D</option>
+        <option value="3d">Sync 3D</option>
+        <option value="crosshair" selected>crosshair</option>
+        <option value="zoomPan">zoomPan</option>
+        <option value="gamma">gamma</option>
+        <option value="sliceType">sliceType</option>
+        <option value="clipPlane">clipPlane</option>
+        <option value="cal_min">cal_min</option>
+        <option value="cal_max">cal_max</option>
+        <!-- everything -->
+         <option value="all">all except intensity</option>
+      </select>
+      <!-- slider for gamma -->
+      <label for="gammaSlider">Gamma</label>
+      <input
+      type="range"
+      min="10"
+      max="400"
+      value="100"
+      class="slider"
+      id="gammaSlider"
+    />
+    <!-- sliceType select -->
+    <label for="sliceType">Slice Type</label>
+    <select id="sliceType">
+      <option value="0">Axial</option>
+      <option value="1">Coronal</option>
+      <option value="2">Sagittal</option>
+      <option value="3" selected>Multi</option>
+    </select>
+    
+    <!-- slider for cal_min -->
+    <label for="calMin">min</label>
+    <input
+      type="range"
+      min="0"
+      max="100"
+      value="0"
+      class="slider"
+      id="calMin"
+    />
+    <!-- slider for cal_max -->
+    <label for="calMax">max</label>
+    <input
+      type="range"
+      min="0"
+      max="100"
+      value="100"
+      class="slider"
+      id="calMax"
+    />
+    </header>
+    <main>
+      <div class='page-wrapper'>
+        <div class='row'>
+          <div class='column'>
+            <div>
+              <canvas id="gl1" height="512">
+            </div>
+          </div>
+          <div class='column'>
+            <div>
+              <canvas id="gl2" height="512">
+            </div>
+          </div>
+          <div class='column'>
+            <div>
+              <canvas id="gl3" height="512">
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer>
+      <x id="intensity"> &nbsp;</x>
+      <x id="intensity2"> &nbsp;</x>
+      <x id="intensity3"> &nbsp;</x>
+    </footer>
+    <script type="module" async>
+      import {
+        Niivue,
+        NVImage,
+        NVMesh,
+        NVMeshLoaders,
+        SHOW_RENDER
+      } from "./niivue/index.ts";
+      layout.onchange = function () {
+        nv1.setMultiplanarLayout(parseInt(this.value));
+        nv2.setMultiplanarLayout(parseInt(this.value));
+        nv3.setMultiplanarLayout(parseInt(this.value));
+      }
+      canvasHeight.onchange = function () {
+        gl1.height = this.value;
+        gl2.height = this.value;
+        gl3.height = this.value;
+        nv1.resizeListener();
+        nv2.resizeListener();
+        nv3.resizeListener();
+      }
+
+      gammaSlider.onchange = function() {
+        const v = parseFloat(gammaSlider.value) * 0.01
+        nv1.setGamma(v)
+        nv1.gl.canvas.focus()
+        nv1.sync()
+        nv1.gl.canvas.blur()
+      }
+
+      syncDrop.onchange = function(e) {
+        const v = e.target.value
+        // let is2D = false
+        // let is3D = false
+        // if (v % 2) {
+        //     is2D = true
+        // }
+        // if (v > 1) {
+        //     is3D = true
+        // }
+        
+        // check if v === "all", if so, add everything
+        if (v === "all") {
+          nv1.broadcastTo([nv2, nv3], {
+            ['3d']: true,
+            crosshair: true,
+            zoomPan: true,
+            gamma: true,
+            sliceType: true,
+            clipPlane: true,
+            // cal_min: true,
+            // cal_max: true,
+          })
+          nv2.broadcastTo([nv1, nv3], {
+            ['3d']: true,
+            crosshair: true,
+            zoomPan: true,
+            gamma: true,
+            sliceType: true,
+            clipPlane: true,
+            // cal_min: true,
+            // cal_max: true,
+          })
+          nv3.broadcastTo([nv1, nv2], {
+            ['3d']: true,
+            crosshair: true,
+            zoomPan: true,
+            gamma: true,
+            sliceType: true,
+            clipPlane: true,
+            // cal_min: true,
+            // cal_max: true,
+          })
+          return
+        }
+        nv1.broadcastTo([nv2, nv3], { [v]: true })
+        nv2.broadcastTo([nv1, nv3], { [v]: true })
+        nv3.broadcastTo([nv1, nv2], { [v]: true })
+      }
+
+      calMin.onchange = function() {
+        const v = parseFloat(calMin.value)
+        nv2.volumes[0].cal_min = v
+        // set focus to the canvas
+        nv2.gl.canvas.focus()
+        nv2.updateGLVolume()
+        // remove focus from the canvas
+        nv2.gl.canvas.blur()
+      }
+
+      calMax.onchange = function() {
+        const v = parseFloat(calMax.value)
+        nv2.volumes[0].cal_max = v
+        // set focus to the canvas
+        nv2.gl.canvas.focus()
+        nv2.updateGLVolume()
+        // remove focus from the canvas
+        nv2.gl.canvas.blur()
+      }
+
+      sliceType.onchange = function() {
+        const v = parseInt(sliceType.value)
+        nv1.setSliceType(v)
+        nv2.setSliceType(v)
+        nv3.setSliceType(v)
+      }
+
+      function handleIntensityChange(data) {
+        document.getElementById("intensity").innerHTML =
+          "&nbsp;&nbsp;" + data.string;
+      }
+      function handleIntensityChange2(data) {
+        document.getElementById("intensity2").innerHTML =
+          "&nbsp;&nbsp;" + data.string;
+      }
+      function handleIntensityChange3(data) {
+        document.getElementById("intensity3").innerHTML =
+          "&nbsp;&nbsp;" + data.string;
+      }
+      var nv1 = new Niivue({
+        show3Dcrosshair: true,
+        onLocationChange: handleIntensityChange,
+        backColor: [1, 1, 1, 1],
+        dragMode: 3,
+        sliceType: 3,
+        multiplanarShowRender: SHOW_RENDER.ALWAYS,
+        isRadiologicalConvention: true
+      });
+      nv1.attachTo("gl1");
+      var volumeList1 = [{ url: "../demos/images/pcasl.nii.gz" }];
+      await nv1.loadVolumes(volumeList1);
+      var nv2 = new Niivue({
+        show3Dcrosshair: true,
+        onLocationChange: handleIntensityChange2,
+        backColor: [1, 1, 1, 1],
+        dragMode: 3,
+        sliceType: 3,
+        multiplanarShowRender: SHOW_RENDER.ALWAYS
+      });
+      nv2.attachTo("gl2");
+      var nv3 = new Niivue({
+        show3Dcrosshair: true,
+        onLocationChange: handleIntensityChange3,
+        backColor: [1, 1, 1, 1],
+        dragMode: 0,
+        sliceType: 3,
+        multiplanarShowRender: SHOW_RENDER.ALWAYS
+      });
+      nv3.attachTo("gl3");
+      var volumeList2 = [{ url: "../demos/images/mni152.nii.gz" }];
+      var volumeList3 = [{ url: "../demos/images/mni152.nii.gz" }];
+      await nv2.loadVolumes(volumeList2);
+      // once the volumes are loaded for nv2, set the min and max values for 
+      // the calMin and calMax sliders to the min and max values of the volume
+      calMin.min = nv2.volumes[0].global_min
+      calMin.max = nv2.volumes[0].global_max
+      calMin.value = nv2.volumes[0].cal_min
+      calMax.min = nv2.volumes[0].global_min
+      calMax.max = nv2.volumes[0].global_max
+      calMax.value = nv2.volumes[0].cal_max
+
+      await nv3.loadVolumes(volumeList3);
+      const syncOpts = {
+        // "2d": true, // legacy option
+        // "3d": true, // legacy option
+        // new options allowing more fine-grained control below.
+        crosshair: true,
+        zoomPan: true,
+        gamma: true,
+        sliceType: true,
+        clipPlane: true,
+        cal_min: false,
+        cal_max: false,
+      }
+      // make sure all views can control each other
+      nv1.broadcastTo([nv2, nv3], syncOpts);
+      nv2.broadcastTo([nv1, nv3], syncOpts);
+      nv3.broadcastTo([nv1, nv2], syncOpts);
+
+    </script>
+  </body>
+</html>