@chinhui/niivue
Version:
minimal webgl2 nifti image viewer
149 lines (139 loc) • 5.07 kB
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>NiiVue</title>
<style>
section {
margin: 20px;
}
</style>
</head>
<body style="font-family: sans-serif;">
<div id="app">
<noscript>
<strong>niivue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<section>
<h1>
hot reloadable development preview
</h1>
</section>
<section>
<div>
<label for="drawPen">Draw color:</label>
<select name="drawPen" id="drawPen">
<option value="-1">Off</option>
<option value="0">Erase</option>
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="8">Filled Erase</option>
<option value="9">Filled Red</option>
<option value="10">Filled Green</option>
<option value="11">Filled Blue</option>
</select>
<button id="left">left</button>
<button id="right">right</button>
<button id="posterior">posterior</button>
<button id="anterior">anterior</button>
<button id="inferior">inferior</button>
<button id="superior">superior</button>
<button id="save">save drawing</button>
<div class="slidecontainer">
drawing opacity <input type="range" min="0" max="100" value="80" class="slider" id="drawOpacity">
</div>
</div>
</section>
<!-- demo 1 -->
<section>
<div id="demo1" style="width:90%; height:640px;">
<canvas id="gl1" height=640 width=640>
</canvas>
</div>
</section>
<section>
<p id="location"></p>
</section>
<!-- <script type="module" src="./index.js">
</script> -->
<script type="module" async>
document.getElementById("drawOpacity").addEventListener("change", doDrawOpacity);
function doDrawOpacity(){
nv1.setDrawOpacity(this.value * 0.01);
}
document.getElementById("drawPen").addEventListener("change", doDrawPen);
function doDrawPen(){
const mode = parseInt(document.getElementById("drawPen").value);
nv1.setDrawingEnabled(mode >= 0);
if (mode >= 0)
nv1.setPenValue( (mode & 7), mode > 7);
}
document.getElementById("left").addEventListener("click", doLeft);
function doLeft(){
nv1.moveCrosshairInVox(-1, 0, 0);
}
document.getElementById("right").addEventListener("click", doRight);
function doRight(){
nv1.moveCrosshairInVox(1, 0, 0);
}
document.getElementById("posterior").addEventListener("click", doPosterior);
function doPosterior(){
nv1.moveCrosshairInVox(0, -1, 0);
}
document.getElementById("anterior").addEventListener("click", doAnterior);
function doAnterior(){
nv1.moveCrosshairInVox(0, 1, 0);
}
document.getElementById("inferior").addEventListener("click", doInferior);
function doInferior(){
nv1.moveCrosshairInVox(0, 0, -1);
}
document.getElementById("superior").addEventListener("click", doSuperior);
function doSuperior(){
nv1.moveCrosshairInVox(0, 0, 1);
}
document.getElementById("save").addEventListener("click", doSave);
function doSave(){
nv1.saveImage('test.nii', true);
}
import { Niivue } from './niivue.js'
import {NVImage} from './nvimage.js'
import {NVMesh} from './nvmesh.js'
let query = window.location.search
const params = new URLSearchParams(query);
let url = params.get('url')
var volumeList1 = [
// first item is brackground image
{
//url: url ? url : "../demos/images/example4d+orig.HEAD",//"./AIL.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
url: url ? url : "../demos/images/AIL.nii.gz",//"./AIL.nii.gz",//"./images/RAS.nii.gz", "./images/spm152.nii.gz",
//url: "./mni152.nii.gz",
colorMap: "gray",
//urlImgData : "../demos/images/example4d+orig.BRIK.gz",
opacity: 1,
visible: true,
},
]
var nv1 = new Niivue({
logging: false,
show3Dcrosshair: true,
loadingText: 'there are no images',
dragAndDropEnabled: true,
backColor: [0.3, 0.2, 0.4, 1],
//thumbnail: "../demos/images/DoG.png"
})
nv1.setRadiologicalConvention(false)
nv1.attachTo('gl1')
await nv1.loadVolumes(volumeList1)
// example of using the 'location' change event with a callback function
nv1.on('location', (data) => {
// data is an object with properties: {mm: [N N N], vox: [N N N], frac: [N N N]}
document.getElementById('location').innerHTML = 'voxel location: ' + data.vox + ' ' + data.values
})
</script>
</div>
</body>
</html>