75 lines
2.7 KiB
HTML
75 lines
2.7 KiB
HTML
<!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>Basic Multiplanar</title>
|
|
<link rel="stylesheet" href="light.css" />
|
|
</head>
|
|
<body>
|
|
<noscript>
|
|
<strong>niivue requires JavaScript.</strong>
|
|
</noscript>
|
|
<header>
|
|
<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>A+C+S+R</option>
|
|
</select>
|
|
<a id="fileLink" href=""></a>
|
|
</header>
|
|
<main id="container">
|
|
<canvas id="gl1"></canvas>
|
|
</main>
|
|
<footer id="intensity"> </footer>
|
|
</body>
|
|
</html>
|
|
<!-- <script type="module" async></script> -->
|
|
<script type="module" async>
|
|
import * as niivue from "./index.js";
|
|
|
|
var drop = document.getElementById("sliceType");
|
|
drop.onchange = function () {
|
|
let st = parseInt(document.getElementById("sliceType").value);
|
|
nv1.setSliceType(st);
|
|
}
|
|
function handleIntensityChange(data) {
|
|
document.getElementById("intensity").innerHTML =
|
|
" " + data.string;
|
|
console.log(data);
|
|
}
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const filePath = urlParams.get('media');
|
|
const fileLink = document.getElementById("fileLink");
|
|
fileLink.innerHTML = urlParams.get('name');
|
|
fileLink.setAttribute("href", urlParams.get('ref'));
|
|
var volumeList1 = [
|
|
{
|
|
url: filePath,
|
|
colormap: "gray",
|
|
visible: true,
|
|
limitFrames4D: 5,
|
|
opacity: 1
|
|
}
|
|
];
|
|
var nv1 = new niivue.Niivue({
|
|
dragAndDropEnabled: false,
|
|
onLocationChange: handleIntensityChange,
|
|
});
|
|
nv1.attachTo("gl1");
|
|
await nv1.loadVolumes(volumeList1);
|
|
// nv1.setSliceType(nv1.sliceTypeMultiplanar);
|
|
nv1.graph.autoSizeMultiplanar = true // use autosizing
|
|
nv1.opts.multiplanarForceRender = true // ensure that we draw the time series graph in the tile usually reserved for the 3D render
|
|
nv1.graph.normalizeValues = false // use raw data values on y-axis
|
|
nv1.graph.opacity = 1.0 // show the graph
|
|
// Notes:
|
|
// 1. If an image only has one volume, the timeseries graph will not be visible.
|
|
// The 3D render will be placed in the graph tile instead.
|
|
// 2. Users can navigate volumes forward and backward in the series using the left and right arrow keys on desktop devices
|
|
// 3. On touch screens, users can tap on the timeseries graph to jump to a volume index
|
|
// 4. Users can load all volumes by clicking on the "..." displayed on the timeseries graph
|
|
</script>
|