cornerstone-tools-cacalc
Version:
Medical imaging tools for the Cornerstone library with added functionality for computing Agatston calcium scores
179 lines (147 loc) • 6.08 kB
HTML
<html>
<head>
<!-- support for mobile touch devices -->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
-->
<link href="../cornerstone.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>
Region Tools Example
</h1>
<p>
This page contains an example of the region tools.
</p>
<a href="../index.html">Go back to the Examples page</a>
</div>
<div class="row">
<div class="col-xs-6">
<div style="width:512px;height:512px;position:relative;display:inline-block;color:white;"
oncontextmenu="return false"
class='cornerstone-enabled-image'
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'>
<div id="dicomImage"
style="width:512px;height:512px;top:0px;left:0px; position:absolute;">
</div>
<div id="mrtopleft" style="position: absolute;top:3px; left:3px">
Patient Name
</div>
<div id="mrtopright" style="position: absolute;top:3px; right:3px">
Hospital
</div>
<div id="mrbottomright" style="position: absolute;bottom:6px; right:3px">
<div id="frameRate"></div>
<div id="zoomText">Zoom: </div>
<div id="sliceText">Image: </div>
</div>
<div id="mrbottomleft" style="position: absolute;bottom:3px; left:3px">
WW/WC:
</div>
</div>
</div>
</div>
</body>
<!-- jquery - included to make things easier to demo, not needed or used by the cornerstone library but
is used by our example image loader-->
<script src="../jquery.min.js"></script>
<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>
<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>
<!-- include the cornerstoneWADOImageLoader library -->
<script src="./dicomParser.min.js"></script>
<script src="./cornerstoneWADOImageLoader.min.js"></script>
<button id="calculate">scores</button>
<button id="undo">undo</button>
<button id="redo">redo</button>
<div>
<label for="thresholdVal">Thresholding value:</label>
<input type="text" id="thresholdVal" value="130">
</div>
<div>
<input type="file" multiple id="selectFile" >
</div>
<button id="examples">or use example pictures</button>
<script>
var element = $('#dicomImage').get(0);
// Enable the dicomImage element and the mouse inputs
cornerstone.enable(element);
cornerstoneTools.mouseInput.enable(element);
cornerstoneTools.mouseWheelInput.enable(element);
var config = {
webWorkerPath : './cornerstoneWADOImageLoaderWebWorker.min.js',
taskConfiguration: {
'decodeTask' : {
codecsPath: './cornerstoneWADOImageLoaderCodecs.min.js'
}
}
};
cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
function loadAndViewImages(imageIds) {
var stack = {
currentImageIdIndex : 0,
imageIds: imageIds
};
console.log("LOAD AND VIEW", imageIds)
cornerstone.loadImage(imageIds[0]).then(function(image) {
// Display the image
cornerstone.displayImage(element, image);
// Set the stack as tool state
cornerstoneTools.addStackStateManager(element, ['stack', 'regions', 'drawing']);
cornerstoneTools.addToolState(element, 'stack', stack);
// Enable all tools we want to use with this element
cornerstoneTools.regionsThreshold.activate(element);
cornerstoneTools.regionsDraw.activate(element, 4);
cornerstoneTools.regionsGrow.activate(element, 1);
cornerstoneTools.stackScrollWheel.activate(element);
cornerstoneTools.scrollIndicator.enable(element);
});
}
document.getElementById('examples').addEventListener('click', function(){
loadAndViewImages([
'example://1',
'example://2',
'example://3'
])
})
document.getElementById('calculate').addEventListener('click', function(){
var scores = cornerstoneTools.regionsScore({
SliceThickness: 3,
PixelSpacing: [0.6, 0.6],
KVP: 120,
RescaleSlope: 1,
RescaleIntercept: 1024,
}).then(function(scores){
console.log("YO", scores);
});
})
document.getElementById('undo').addEventListener('click', function(){
cornerstoneTools.regionsThreshold.undo(element);
});
document.getElementById('redo').addEventListener('click', function(){
cornerstoneTools.regionsThreshold.redo(element);
});
document.getElementById('selectFile').addEventListener('change', function(e){
var files = Array.from(e.target.files);
var imageIds = files.map(cornerstoneWADOImageLoader.wadouri.fileManager.add)
loadAndViewImages(imageIds);
})
document.getElementById('thresholdVal').addEventListener('blur', function(event) {
var config = cornerstoneTools.regionsThreshold.getConfiguration();
config.calciumThresholdHu = parseInt(event.target.value);
cornerstoneTools.regionsThreshold.setConfiguration(config)
cornerstoneTools.regionsThreshold.update(element);
console.log("updated...");
})
</script>
</html>