nilearn · alexisthual · Mar 9, 2023 · Mar 9, 2023 · Mar 16, 2023 · Mar 16, 2023
diff --git a/discussions/niivue_integration/surface_html_templating.py b/discussions/niivue_integration/surface_html_templating.py
@@ -0,0 +1,135 @@
+# %%
+import base64
+import string
+
+from pathlib import Path
+
+import nibabel as nib
+import numpy as np
+
+from nilearn import datasets, surface
+from nilearn.plotting import html_document
+
+# %%
+output_path = Path("/home/alexis/singbrain/data/tmp")
+
+# %%
+fsaverage = datasets.fetch_surf_fsaverage(mesh="fsaverage7")
+
+# %%
+# Save pial map
+pial_left = surface.load_surf_mesh(fsaverage.pial_left)
+pial_left_path = output_path / "pial_left.gii"
+
+gifti_image = nib.gifti.GiftiImage()
+gifti_image.add_gifti_data_array(
+    nib.gifti.GiftiDataArray(pial_left[0], "NIFTI_INTENT_POINTSET")
+)
+gifti_image.add_gifti_data_array(
+    nib.gifti.GiftiDataArray(pial_left[1], "NIFTI_INTENT_TRIANGLE")
+)
+nib.save(gifti_image, pial_left_path)
+
+# %%
+# Create curv sign map
+curv_sign_left = (np.sign(surface.load_surf_data(fsaverage.curv_left)) + 1) / 2
+curv_sign_left_path = output_path / "curv_sign_left.gii"
+
+gifti_image = nib.gifti.GiftiImage()
+gifti_image.add_gifti_data_array(
+    nib.gifti.GiftiDataArray(curv_sign_left, "NIFTI_INTENT_NONE")
+)
+nib.save(gifti_image, curv_sign_left_path)
+
+
+# %%
+motor_images = datasets.fetch_neurovault_motor_task()
+stat_img = motor_images.images[0]
+surface_map = surface.vol_to_surf(stat_img, fsaverage.pial_left)
+
+# %%
+surface_map_path = output_path / "surface_map.gii"
+
+img = nib.gifti.gifti.GiftiImage()
+img.add_gifti_data_array(
+    nib.gifti.gifti.GiftiDataArray(
+        surface_map,
+        intent="NIFTI_INTENT_ZSCORE",
+    )
+)
+nib.save(img, surface_map_path)
+
+# %%
+# <!-- url: "http://0.0.0.0:8000/surface_map.gii", -->
+template = string.Template(
+    """
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>NiiVue</title>
+    <link rel="stylesheet" href="https://niivue.github.io/niivue/features/niivue.css">
+  </head>
+  <body>
+    <canvas id="gl"></canvas>
+  </body>
+  <script src="https://niivue.github.io/niivue/features/niivue.umd.js"></script>
+  <script type="module" async>
+    var nv = new niivue.Niivue();
+    nv.attachTo('gl');
+    let layers = [
+      {
+          name: "bg_map.gii",
+          useNegativeCmap: true,
+          opacity: 0.7,
+          colorMap: "gray",
+          base64: "$bg_map",
+      },
+      {
+          name: "surface_map.gii",
+          useNegativeCmap: true,
+          opacity: 0.7,
+          cal_min: $threshold,
+          base64: "$surf_map",
+      },
+    ];
+    let m = await niivue.NVMesh.loadFromBase64({
+      gl: nv.gl,
+      name: "pial_left.gii",
+      layers: layers,
+      base64:"$surf_mesh"
+    });
+    nv.addMesh(m);
+  </script>
+</html>
+"""
+)
+
+# %%
+encoded = {}
+
+# %%
+encoded["surf_mesh"] = base64.b64encode(
+    pial_left_path.read_bytes()
+).decode("UTF-8")
+
+# %%
+encoded["surf_map"] = base64.b64encode(
+    surface_map_path.read_bytes()
+).decode("UTF-8")
+
+# %%
+encoded["threshold"] = 3
+
+# %%
+encoded["bg_map"] = base64.b64encode(
+    curv_sign_left_path.read_bytes()
+).decode("UTF-8")
+
+# %%
+display = html_document.HTMLDocument(template.safe_substitute(encoded))
+
+# save for later:
+display.save_as_html("/home/alexis/singbrain/data/tmp/niivue_plot.html")
+
+# %%
diff --git a/discussions/niivue_integration/view_anat.py b/discussions/niivue_integration/view_anat.py
@@ -0,0 +1,117 @@
+# %%
+import base64
+import json
+import string
+
+from pathlib import Path
+
+from nilearn import datasets
+from nilearn.plotting import html_document
+from nilearn.plotting.img_plotting import _MNI152Template
+
+# %%
+output_path = Path("/home/alexis/singbrain/data/tmp")
+
+# %%
+localizer_dataset = datasets.fetch_localizer_button_task(legacy_format=False)
+# Contrast map of motor task
+localizer_tmap_filename = Path(localizer_dataset.tmap)
+# Subject specific anatomical image
+localizer_anat_filename = Path(localizer_dataset.anat)
+# localizer_anat_filename = Path(datasets.MNI152_FILE_PATH)
+localizer_anat_filename
+localizer_tmap_filename
+
+# %%
+MNI152TEMPLATE = _MNI152Template()
+
+
+# %%
+def view_anat(
+    anat_img,
+    # cut_coords=None, # Seems to be missing from niivue
+    threshold=None,
+    draw_cross=True,
+    # cmap=plt.cm.gray,
+    # colorbar=False,
+):
+    template = string.Template(
+        """
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>NiiVue</title>
+        <link rel="stylesheet" href="https://niivue.github.io/niivue/features/niivue.css">
+    </head>
+    <body>
+        <noscript>
+        <strong>niivue requires JavaScript.</strong>
+        </noscript>
+        <main>
+        <canvas id="gl1"></canvas>
+        </main>
+        <footer id="location">&nbsp;</footer>
+        <script src="https://niivue.github.io/niivue/features/niivue.umd.js"></script>
+        <script type="module" async>
+        function handleLocationChange(data) {
+            document.getElementById("location").innerHTML =
+            "&nbsp;&nbsp;" + data.string;
+        }
+
+        var nv = new niivue.Niivue({
+            loadingText: "Loading...",
+            backColor: [1, 1, 1, 1],
+            show3Dcrosshair: $draw_cross,
+            onLocationChange: handleLocationChange,
+        });
+
+        nv.setRadiologicalConvention(false);
+        nv.attachTo("gl1");
+        nv.setSliceType(nv.sliceTypeMultiplanar);
+        nv.setSliceMM(false);
+        nv.opts.isColorbar = true;
+
+        let anat = niivue.NVImage.loadFromBase64({
+            name: "bg_map.nii.gz",
+            base64: "$anat_img",
+            cal_min: $threshold,
+            cal_max: 10000,
+        });
+        nv.addVolume(anat);
+
+        nv.volumes[0].cal_minNeg = -10000;
+        nv.volumes[0].cal_maxNeg = -$threshold;
+
+        nv.opts.multiplanarForceRender = true;
+        nv.setInterpolation(true);
+        nv.updateGLVolume();
+        </script>
+    </body>
+    </html>
+    """
+    )
+
+    encoded = {}
+
+    encoded["anat_img"] = base64.b64encode(anat_img.read_bytes()).decode(
+        "UTF-8"
+    )
+
+    encoded["draw_cross"] = "true" if draw_cross else "false"
+
+    encoded["threshold"] = "null" if threshold is None else threshold
+
+    display = html_document.HTMLDocument(template.safe_substitute(encoded))
+
+    return display
+
+
+# %%
+display = view_anat(
+    localizer_anat_filename,
+    threshold=None,
+    draw_cross=True,
+)
+
+display.save_as_html("/home/alexis/singbrain/data/tmp/niivue_plot_anat.html")
diff --git a/discussions/niivue_integration/volume_html_templating.py b/discussions/niivue_integration/volume_html_templating.py
@@ -0,0 +1,120 @@
+# %%
+import base64
+import string
+
+from pathlib import Path
+
+import nibabel as nib
+import numpy as np
+
+from nilearn import datasets, image, surface
+from nilearn.plotting import html_document
+
+# %%
+output_path = Path("/home/alexis/singbrain/data/tmp")
+
+# %%
+localizer_dataset = datasets.fetch_localizer_button_task(legacy_format=False)
+# Contrast map of motor task
+localizer_tmap_filename = Path(localizer_dataset.tmap)
+# Subject specific anatomical image
+localizer_anat_filename = Path(localizer_dataset.anat)
+# localizer_anat_filename = Path(datasets.MNI152_FILE_PATH)
+localizer_anat_filename
+localizer_tmap_filename
+
+# %%
+template = string.Template(
+    """
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>NiiVue</title>
+    <link rel="stylesheet" href="https://niivue.github.io/niivue/features/niivue.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>niivue requires JavaScript.</strong>
+    </noscript>
+    <main>
+      <canvas id="gl1"></canvas>
+    </main>
+    <footer id="location">&nbsp;</footer>
+    <script src="https://niivue.github.io/niivue/features/niivue.umd.js"></script>
+    <script type="module" async>
+      function handleLocationChange(data) {
+        document.getElementById("location").innerHTML =
+          "&nbsp;&nbsp;" + data.string;
+      }
+
+      var nv = new niivue.Niivue({
+        loadingText: "there are no images",
+        backColor: [1, 1, 1, 1],
+        show3Dcrosshair: true,
+        onLocationChange: handleLocationChange,
+      });
+
+      nv.setRadiologicalConvention(false);
+      nv.attachTo("gl1");
+      nv.setSliceType(nv.sliceTypeMultiplanar);
+      nv.setSliceMM(false);
+      nv.opts.isColorbar = true;
+
+      let bg = niivue.NVImage.loadFromBase64({
+        name: "bg_map.nii.gz",
+        base64: "$bg_img",
+        colorbarVisible: false,
+      });
+      nv.addVolume(bg);
+
+      nv.volumes[0].colorbarVisible = false;
+
+      let v = niivue.NVImage.loadFromBase64({
+        name: "stat_map_img.nii.gz",
+        base64: "$stat_map_img",
+        colorMap: "warm",
+        cal_min: $threshold,
+        cal_max: 6,
+      });
+      nv.addVolume(v);
+
+      nv.volumes[1].colorMapNegative = "winter";
+      nv.volumes[1].alphaThreshold = true;
+      nv.volumes[1].cal_minNeg = -6;
+      nv.volumes[1].cal_maxNeg = -$threshold;
+
+      nv.opts.multiplanarForceRender = true;
+      nv.setInterpolation(true);
+      nv.updateGLVolume();
+    </script>
+  </body>
+</html>
+"""
+)
+
+# %%
+encoded = {}
+
+# %%
+encoded["bg_img"] = base64.b64encode(
+    localizer_anat_filename.read_bytes()
+).decode("UTF-8")
+
+# %%
+encoded["stat_map_img"] = base64.b64encode(
+    localizer_tmap_filename.read_bytes()
+).decode("UTF-8")
+
+# %%
+encoded["threshold"] = 3
+
+# %%
+display = html_document.HTMLDocument(template.safe_substitute(encoded))
+
+# save for later:
+display.save_as_html(
+    "/home/alexis/singbrain/data/tmp/niivue_plot_surf_map.html"
+)
+
+# %%