Skip to content

Commit 0d7c9c7

Browse files
thewtexthewtex
committed
WIP: Gradients demo
1 parent 0407068 commit 0d7c9c7

File tree

2 files changed

+208
-0
lines changed

2 files changed

+208
-0
lines changed

‎packages/niivue/demos/features/gradients.html

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<title>Gradients</title>
8+
<style>
9+
html {
10+
height: auto;
11+
min-height: 100%;
12+
margin: 0;
13+
}
14+
body {
15+
display: flex;
16+
flex-direction: column;
17+
margin: 0;
18+
min-height: 100%;
19+
width: 100%;
20+
position: absolute;
21+
font-family: system-ui, Arial, Helvetica, sans-serif;
22+
user-select: none; /* Standard syntax */
23+
color: white;
24+
background: #202020;
25+
}
26+
header {
27+
margin: 10px;
28+
}
29+
footer {
30+
margin: 5px;
31+
}
32+
.page-wrapper {
33+
margin: 2px;
34+
}
35+
.row {
36+
display: flex;
37+
flex-direction: row;
38+
flex-wrap: wrap;
39+
width: 100%;
40+
min-height: 40%;
41+
margin: 2px;
42+
}
43+
.column {
44+
display: flex;
45+
flex-direction: column;
46+
flex-basis: 100%;
47+
flex: 1;
48+
background: #404040;
49+
}
50+
canvas:focus {
51+
outline: red 1px solid;
52+
}
53+
</style>
54+
</head>
55+
<body>
56+
<noscript>
57+
<strong
58+
>niivue doesn't work properly without JavaScript enabled. Please enable
59+
it to continue.</strong
60+
>
61+
</noscript>
62+
<header>
63+
<section>
64+
<label id="images"></label>
65+
</section>
66+
</header>
67+
<main id="container">
68+
<div class='page-wrapper'>
69+
<div class='row'>
70+
<div class='column'>
71+
<div>
72+
<canvas id="gl1" height="512"></canvas>
73+
</div>
74+
</div>
75+
<div class='column'>
76+
<div>
77+
<canvas id="gl2" height="512"></canvas>
78+
</div>
79+
</div>
80+
</div>
81+
<div class='row'>
82+
<div class='column'>
83+
<div>
84+
<canvas id="gl3" height="512"></canvas>
85+
</div>
86+
</div>
87+
<div class='column'>
88+
<div>
89+
<canvas id="gl4" height="512"></canvas>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</main>
95+
<footer>
96+
<label for="canvasHeight">Height</label>
97+
<select id="canvasHeight">
98+
<option value="256">256</option>
99+
<option value="640" selected>512</option>
100+
<option value="768">768</option>
101+
</select>
102+
103+
<label id="colormaps"></label>
104+
</footer>
105+
</body>
106+
</html>
107+
<script type="module">
108+
import * as niivue from "../dist/index.js";
109+
110+
const backColor = [0.7, 0.7, 0.9, 1];
111+
const clipPlane = [0.35, 270, 0];
112+
const illumination = 0.8;
113+
114+
const volumeList1 = [
115+
{
116+
url: "../images/mni152.nii.gz",
117+
colormap: "gray",
118+
opacity: 1,
119+
visible: true,
120+
},
121+
];
122+
const nv1 = new niivue.Niivue({ backColor });
123+
nv1.attachTo("gl1");
124+
nv1.loadVolumes(volumeList1);
125+
nv1.opts.isColorbar = true;
126+
nv1.setSliceType(nv1.sliceTypeRender);
127+
nv1.setClipPlane(clipPlane);
128+
nv1.setVolumeRenderIllumination(illumination);
129+
130+
const nv2 = new niivue.Niivue({ backColor });
131+
nv2.attachTo("gl2");
132+
nv2.loadVolumes(volumeList1);
133+
nv2.opts.isColorbar = true;
134+
nv2.setSliceType(nv2.sliceTypeRender);
135+
nv2.setClipPlane(clipPlane);
136+
nv2.setVolumeRenderIllumination(illumination);
137+
138+
const nv3 = new niivue.Niivue({ backColor });
139+
nv3.attachTo("gl3");
140+
nv3.loadVolumes(volumeList1);
141+
nv3.opts.isColorbar = true;
142+
nv3.setSliceType(nv3.sliceTypeRender);
143+
nv3.setClipPlane(clipPlane);
144+
nv3.setVolumeRenderIllumination(illumination);
145+
146+
const nv4 = new niivue.Niivue({ backColor });
147+
nv4.attachTo("gl4");
148+
nv4.loadVolumes(volumeList1);
149+
nv4.opts.isColorbar = true;
150+
nv4.setSliceType(nv4.sliceTypeRender);
151+
nv4.setClipPlane(clipPlane);
152+
nv4.setVolumeRenderIllumination(illumination);
153+
154+
nv1.broadcastTo([nv2, nv3, nv4], { "3d": true });
155+
nv2.broadcastTo([nv1, nv3, nv4], { "3d": true });
156+
nv3.broadcastTo([nv1, nv2, nv4], { "3d": true });
157+
nv4.broadcastTo([nv1, nv2, nv3], { "3d": true });
158+
159+
let imgs = [
160+
"chris_MRA",
161+
"chris_PD",
162+
"chris_t1",
163+
"chris_t2",
164+
"CT_Abdo",
165+
"CT_AVM",
166+
"CT_Electrodes",
167+
"CT_Philips",
168+
"CT_pitch",
169+
"fmri_pitch",
170+
"Iguana",
171+
"mni152",
172+
"MR_Gd",
173+
"pcasl",
174+
"spm152",
175+
"spmMotor",
176+
"visiblehuman",
177+
];
178+
let imgEl = document.getElementById("images");
179+
for (let i = 0; i < imgs.length; i++) {
180+
let btn = document.createElement("button");
181+
btn.innerHTML = imgs[i];
182+
btn.onclick = function () {
183+
let root = "https://niivue.github.io/niivue-demo-images/";
184+
let img = root + imgs[i] + ".nii.gz";
185+
console.log("Loading: " + img);
186+
volumeList1[0].url = img;
187+
[nv1, nv2, nv3, nv4].forEach((nv) => {
188+
nv.loadVolumes(volumeList1);
189+
nv.updateGLVolume();
190+
});
191+
};
192+
imgEl.appendChild(btn);
193+
}
194+
195+
canvasHeight.onchange = function () {
196+
gl1.height = this.value;
197+
gl2.height = this.value;
198+
gl3.height = this.value;
199+
gl4.height = this.value;
200+
nv1.resizeListener();
201+
nv2.resizeListener();
202+
nv3.resizeListener();
203+
nv4.resizeListener();
204+
}
205+
</script>

‎packages/niivue/demos/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,9 @@ <h1>NiiVue Demos</h1>
372372
<a href="./features/labels.anchored.html" target="_blank" rel="noopener noreferrer">Anchored labels</a>
373373
</section>
374374
</section>
375+
<section>
376+
<a href="./features/gradients.html" target="_blank" rel="noopener noreferrer">Gradients</a>
377+
</section>
375378
<!--
376379
<section>
377380
<a href="./features/niimath.command.html" target="_blank" rel="noopener noreferrer">Process image with niimath command</a>

0 commit comments

Comments
 (0)