-
Notifications
You must be signed in to change notification settings - Fork 54
/
colormaps.html
83 lines (83 loc) · 2.23 KB
/
colormaps.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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>colormaps</title>
<link rel="stylesheet" href="light.css" />
</head>
<body>
<noscript>
<strong
>niivue doesn't work properly without JavaScript enabled. Please enable
it to continue.</strong
>
</noscript>
<header>
<label for="gammaSlider">Gamma</label>
<input
type="range"
min="10"
max="400"
value="100"
class="slider"
id="gammaSlider"
/>
</header>
<main id="container">
<canvas id="gl1"></canvas>
</main>
<footer>
<label id="colormaps"></label>
<button id="custom">custom</button>
</footer>
</body>
</html>
<script src="./niivue.umd.js"></script>
<script>
var slider = document.getElementById("gammaSlider");
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function () {
nv1.setGamma(this.value * 0.01);
};
document.getElementById("custom").addEventListener("click", doCustom);
function doCustom() {
let cmap = {
R: [0, 255, 22, 127],
G: [0, 20, 192, 187],
B: [0, 152, 80, 255],
A: [0, 255, 255, 255],
I: [0, 22, 222, 255],
};
let key = "Custom";
nv1.addColormap(key, cmap);
nv1.volumes[0].colormap = key;
nv1.updateGLVolume();
}
var volumeList1 = [
// first item is background image
{
url: "../images/mni152.nii.gz", //"./images/RAS.nii.gz", "./images/spm152.nii.gz",
colormap: "gray",
opacity: 1,
visible: true,
},
];
var nv1 = new niivue.Niivue();
nv1.attachTo("gl1");
nv1.loadVolumes(volumeList1);
nv1.setSliceType(nv1.sliceTypeMultiplanar);
nv1.opts.isColorbar = true;
let cmaps = nv1.colormaps();
let cmapEl = document.getElementById("colormaps");
for (let i = 0; i < cmaps.length; i++) {
let btn = document.createElement("button");
btn.innerHTML = cmaps[i];
btn.onclick = function () {
nv1.volumes[0].colormap = cmaps[i];
nv1.updateGLVolume();
};
cmapEl.appendChild(btn);
}
</script>