custom-cornerstone-tools
Version:
Medical imaging tools for the Cornerstone library - customized for DrNuvem
184 lines (161 loc) • 6.92 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 Index Synchronizer Example
</h1>
<p>
This page contains an example of the stack image index synchronizer tool. It uses the index of the
image in the stack to synchronize. You may want to use this if the images don't have the
image position attribute.
</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.stackImageIndexSynchronizer);
// 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>