diglettk
Version:
A medical imaging toolkit, built on top of vtk.js
193 lines (175 loc) • 5.42 kB
HTML
<html class="h-100 overflow-hidden">
<head>
<meta charset="UTF-8" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/vs2015.min.css"
/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
<title>DigletTK - VR example</title>
</head>
<body class="h-100" style="background-color: #000000; color: #ffffff">
<div class="row h-100">
<!-- views -->
<div class="col-8 h-100">
<!-- <div class="row h-50">
<div
id="viewer"
class="h-100"
style="background-color: rgb(0, 0, 0)"
></div>
</div> -->
<div class="row h-100">
<div
id="viewer-2"
class="h-100"
style="background-color: rgb(0, 0, 0)"
></div>
</div>
</div>
<!-- code preview -->
<div class="col-4 h-100">
<!-- widget target element -->
<h3 style="margin-bottom: 20px">Opacity Widget</h3>
<pre>
Drag outside the gaussian to move it along the histogram.
Drag inside the gaussian to modify its shape.
Double click to add a curve.
Right click to delete a curve.
</pre>
<!-- inputs -->
<form class="form-inline">
<div style="margin-bottom: 4px">
<label class="sr-only" for="select-lut">LUT</label>
<select
style="max-width: 150px"
id="select-lut"
onchange="updateLut(this.options[this.selectedIndex].text)"
></select>
<input
checked
type="checkbox"
class="custom-control-input"
id="customControlAutosizing"
onchange="updateRescale(this.checked)"
/>
<label class="custom-control-label" for="customControlAutosizing"
>rescale LUT</label
>
</div>
</form>
<!-- end inputs -->
<div
id="widget"
style="height: 120px; margin: auto; border: 3px solid green"
></div>
<h3 style="margin-top: 20px; margin-bottom: 10px">Code Example</h3>
<pre class="h-100">
<code class="javascript">
/**
* Header must be in the form:
* {
* volume: {
* rows: number,
* cols: number.
* imageIds: [],
* imagePosition: [number, number, number],
* sliceThickness: number
* }
* }
*
* Data is a TypedArray
*/
const element = document.getElementById('viewer-2')
const widgetContainer = document.getElementById("widget");
const image = diglettk.buildVtkVolume(header, data);
// run vr
vr = new diglettk.VRView(element);
// set an image
vr.setImage(image);
// set widget element to control opacity
vr.widgetElement = widgetContainer;
// set a LUT
let lutList = vr.getLutList();
fillSelect(lutList, "MuscleBone");
// vr.lut = lutList[0];
vr.lut = "MuscleBone";
vr.rescaleLUT = true;
// activate crop widget
// vr.cropWidget = true;
// activate edge enhancement
// vr.edgeEnhancement = true;
</code>
</pre>
</div>
</div>
<script src="./diglettk.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
let vr = null;
function fillSelect(list, initialLUT) {
let select = document.getElementById("select-lut");
let index = 0;
for (let element of list) {
var opt = document.createElement("option");
opt.value = index;
opt.innerHTML = element;
select.appendChild(opt);
index++;
}
}
function updateLut(v) {
console.log("update LUT", v);
vr.lut = v;
}
function updateRescale(v) {
console.log("rescale", v);
vr.rescaleLUT = v;
}
const element = document.getElementById("viewer-2");
const widgetContainer = document.getElementById("widget");
let header, data;
fetch("./demo/header.json")
.then(data => data.json())
.then(_header => {
header = _header;
console.log("header", header);
fetch("./demo/data.json")
.then(data => data.arrayBuffer())
.then(buffer => {
console.log(buffer);
data = new Int16Array(buffer);
console.log("data", data);
loadScene();
});
});
function loadScene() {
const image = diglettk.buildVtkVolume(header, data);
// run vr
vr = new diglettk.VRView(element);
// set an image
vr.setImage(image);
// set widget element to control opacity
vr.widgetElement = widgetContainer;
// adjust wwwl
vr.wwwl = [500, 1000];
// set a LUT
let lutList = vr.getLutList();
fillSelect(lutList, "MuscleBone");
// vr.lut = lutList[0];
vr.lut = "MuscleBone";
vr.rescaleLUT = true;
}
</script>
</body>
</html>