custom-cornerstone-tools
Version:
Medical imaging tools for the Cornerstone library - customized for DrNuvem
184 lines (161 loc) • 6.97 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>
Stack Image Position Synchronizer Example
</h1>
<p>
This page contains an example of the stack image position synchronizer tool. It uses the image position
of the image in the stack to synchronize. Using the image position allows stacks with different distances
between each slice to still stay in sync.
</p>
</div>
<div class="row">
<div class="col-xs-2">
<ul class="list-group">
<a href="#" id="add" class="list-group-item active">Add All</a>
<a href="#" id="remove" class="list-group-item">Remove All</a>
<a href="#" id="add3" class="list-group-item">Add 3rd</a>
<a href="#" id="remove3" class="list-group-item">Remove 3rd</a>
</ul>
</div>
<div class="col-xs-10">
<div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
oncontextmenu="return false"
class='cornerstone-enabled-image'
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'>
<div id="axial1"
style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
</div>
</div>
<div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
oncontextmenu="return false"
class='cornerstone-enabled-image'
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'>
<div id="axial2"
style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
</div>
</div>
<div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
oncontextmenu="return false"
class='cornerstone-enabled-image'
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'>
<div id="axial3"
style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
</div>
</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>
<script src="../exampleMetaDataProvider.js"></script>
<script>
var axialElement1 = $('#axial1').get(0);
var axialElement2 = $('#axial2').get(0);
var axialElement3 = $('#axial3').get(0);
var axialImageIds = [
'example://1',
'example://2'
]
var axialStack1 = {
currentImageIdIndex : 0,
imageIds: axialImageIds
};
var axialStack2 = {
currentImageIdIndex : 0,
imageIds: axialImageIds
};
var axialStack3 = {
currentImageIdIndex : 0,
imageIds: axialImageIds
};
var synchronizer = new cornerstoneTools.Synchronizer("CornerstoneNewImage", cornerstoneTools.stackImagePositionSynchronizer);
// image enable the dicomImage element and the mouse inputs
cornerstone.enable(axialElement1);
cornerstone.enable(axialElement2);
cornerstone.enable(axialElement3);
cornerstoneTools.mouseInput.enable(axialElement1);
cornerstoneTools.mouseWheelInput.enable(axialElement1);
cornerstoneTools.mouseInput.enable(axialElement2);
cornerstoneTools.mouseWheelInput.enable(axialElement2);
cornerstoneTools.mouseInput.enable(axialElement3);
cornerstoneTools.mouseWheelInput.enable(axialElement3);
cornerstone.loadImage(axialImageIds[0]).then(function(image) {
// display this image
cornerstone.displayImage(axialElement1, image);
cornerstone.displayImage(axialElement2, image);
cornerstone.displayImage(axialElement3, image);
// set the stack as tool state
cornerstoneTools.addStackStateManager(axialElement1, ['stack']);
cornerstoneTools.addStackStateManager(axialElement2, ['stack']);
cornerstoneTools.addStackStateManager(axialElement3, ['stack']);
cornerstoneTools.addToolState(axialElement1, 'stack', axialStack1);
cornerstoneTools.addToolState(axialElement2, 'stack', axialStack2);
cornerstoneTools.addToolState(axialElement3, 'stack', axialStack3);
// Enable all tools we want to use with this element
cornerstoneTools.stackScroll.activate(axialElement1, 1);
cornerstoneTools.stackScrollWheel.activate(axialElement1);
cornerstoneTools.stackScroll.activate(axialElement2, 1);
cornerstoneTools.stackScrollWheel.activate(axialElement2);
cornerstoneTools.stackScroll.activate(axialElement3, 1);
cornerstoneTools.stackScrollWheel.activate(axialElement3);
synchronizer.add(axialElement1);
synchronizer.add(axialElement2);
synchronizer.add(axialElement3);
function activate(id)
{
$('a').removeClass('active');
$(id).addClass('active');
}
$('#add').click(function() {
activate("#add");
synchronizer.add(axialElement1);
synchronizer.add(axialElement2);
synchronizer.add(axialElement3);
return false;
});
$('#remove').click(function() {
activate("#remove");
synchronizer.remove(axialElement1);
synchronizer.remove(axialElement2);
synchronizer.remove(axialElement3);
return false;
});
$('#add3').click(function() {
activate("#add3");
synchronizer.add(axialElement3);
return false;
});
$('#remove3').click(function() {
activate("#remove3");
synchronizer.remove(axialElement3);
return false;
});
});
</script>
</html>