diglettk
Version:
A medical imaging toolkit, built on top of vtk.js
166 lines (152 loc) • 5.03 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-50">
<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">
const element = document.getElementById('viewer-2')
const widgetContainer = document.getElementById("widget");
diglettk.loadSerieWithLarvitar(larvitar, serie => {
let header = larvitar.buildHeader(serie);
let data = larvitar.buildData(serie, false);
console.log(serie)
// build vtk volume with larvitar
const image = diglettk.buildVtkVolume(header, data);
// run vr
let vr = new diglettk.VRView(element);
// set an image
vr.setImage(image);
// set widget element to control opacity
vr.widgetElement = widgetContainer;
// set a LUT
vr.lut = "MuscleBone";
vr.rescaleLUT = 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 src="./larvitar.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");
diglettk.loadDemoSerieWithLarvitar("knee", larvitar, serie => {
// build vtk volume with larvitar
let header = larvitar.buildHeader(serie);
let data = larvitar.buildData(serie, false);
console.log(serie);
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;
});
</script>
</body>
</html>