diglettk
Version:
A medical imaging toolkit, built on top of vtk.js
179 lines (153 loc) • 6.29 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>
Rotation: drag to rotate
Length and angle: click 2x or 3x
</pre>
<!-- inputs -->
<form class="form-inline">
<div style="margin-bottom: 4px;">
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btn-level" autocomplete="off" checked onclick="updateTool('Rotation')">
<label class="btn btn-outline-danger" for="btn-level">Rotation</label>
<input type="radio" class="btn-check" name="btnradio" id="btn-cross" autocomplete="off" onclick="updateTool('Length')">
<label class="btn btn-outline-danger" for="btn-cross">Length</label>
<input type="radio" class="btn-check" name="btnradio" id="btn-pan" autocomplete="off" onclick="updateTool('Angle')">
<label class="btn btn-outline-danger" for="btn-pan">Angle</label>
</div>
</div>
</form>
<!-- end inputs -->
<label style="margin-right: 4px;">Measure:</label><label id="result"></label>
<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");
// init state
let state = {p1:new Array(2), p2: new Array(2), p3: new Array(2), label:''}
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 = "2hot";
// set a tool
vr.setTool("Rotation", {}, state)
})
function updateTool(toolName){
vr.resetMeasurementState(state);
vr.setTool(toolName, {}, state)
}
</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>
const overlaySize = 15;
const overlayBorder = 2;
const overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.width = `${overlaySize}px`;
overlay.style.height = `${overlaySize}px`;
overlay.style.border = `solid ${overlayBorder}px red`;
overlay.style.borderRadius = '50%';
overlay.style.left = '-100px';
overlay.style.pointerEvents = 'none';
overlay.id = "overlay";
let vr = null;
const element = document.getElementById('viewer-2')
element.appendChild(overlay);
const widgetContainer = document.getElementById("widget");
let state = {p1:new Array(2), p2: new Array(2), p3: new Array(2), label:''}
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();
vr.lut = lutList[13];
vr.rescaleLUT = true;
// set a tool
vr.setTool("Rotation", {}, state)
})
element.addEventListener('mouseup', ()=>{
console.log(state)
document.getElementById('result').innerHTML = state.label
let pt = state.p3[0] ? state.p3 : (state.p2[0] ? state.p2 : state.p1);
let px = pt[0] - overlaySize - overlayBorder
let py = window.innerHeight - pt[1] - (overlaySize * 0.5 - overlayBorder)
document.getElementById('overlay').style.left = `${px}px`
document.getElementById('overlay').style.top = `${py}px`
})
function updateTool(toolName){
vr.resetMeasurementState(state);
vr.setTool(toolName, {}, state)
document.getElementById('result').innerHTML = state.label
document.getElementById('overlay').style.left = `-10px`
document.getElementById('overlay').style.top = `-10px`
}
</script>
</body>
</html>