custom-cornerstone-tools
Version:
Medical imaging tools for the Cornerstone library - customized for DrNuvem
146 lines (117 loc) • 4.92 kB
HTML
<html>
<head>
<!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="../cornerstone.min.css" rel="stylesheet">
<style>
/* prevents selection when left click dragging */
.disable-selection {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
/* prevents cursor from changing to the i bar on the overlays*/
.noIbar {
cursor:default;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>On-canvas orientation markers</h1>
<p>
DICOM Orientation markers (e.g. for Anterior/Posterior, Superior/Inferior, Left/Right) can be determined from direction cosines of the image plane.
</p>
<a href="../index.html">Go back to the Examples page</a>
</div>
<div class="col-xs-8 col-sm-2">
<div class="btn-group-vertical" role="group">
<a id="hFlip" class="btn btn-default">HFlip</a>
<a id="vFlip" class="btn btn-default">VFlip</a>
<a id="lRotate" class="btn btn-default">Rotate Left</a>
<a id="rRotate" class="btn btn-default">Rotate Right</a>
<a id="reset" class="btn btn-default">Reset</a>
</div>
</div>
<div class="col-xs-12 col-sm-10">
<div style="width:512px;height:512px;position:relative;color: white;display:inline-block;border-style:solid;border-color:black;"
oncontextmenu="return false"
class='disable-selection noIbar'
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'>
<div id="dicomImage"
style="width:512px;height:512px;top:0px;left:0px;position:absolute;overflow:hidden;">
</div>
</div>
</div>
</div>
</body>
<!-- jquery - currently a dependency and thus required for using cornerstoneWADOImageLoader -->
<script src="../jquery.min.js"></script>
<!-- include the hammer.js library for touch gestures-->
<script src="../hammer.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 container = $('#dicomImage');
var element = container.get(0);
var imageId = 'example://1';
cornerstone.enable(element);
// Enable mouse and touch input
cornerstoneTools.mouseInput.enable(element);
cornerstoneTools.touchInput.enable(element);
var config = {
drawAllMarkers: true
}
// Comment this out to draw only the top and left markers
cornerstoneTools.orientationMarkers.setConfiguration(config);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
var viewport = cornerstone.getViewport(element);
cornerstoneTools.orientationMarkers.enable(element);
cornerstoneTools.pan.activate(element, 2);
cornerstoneTools.zoom.activate(element, 4);
// Enable all tools we want to use with this element
cornerstoneTools.rotate.activate(element, 1);
cornerstoneTools.rotateTouchDrag.activate(element);
// Add event handlers to flip or rotate the image
$('#hFlip').click(function (e) {
viewport = cornerstone.getViewport(element);
viewport.hflip = !viewport.hflip;
cornerstone.setViewport(element, viewport);
});
$('#vFlip').click(function (e) {
viewport = cornerstone.getViewport(element);
viewport.vflip = !viewport.vflip;
cornerstone.setViewport(element, viewport);
});
$('#lRotate').click(function (e) {
viewport = cornerstone.getViewport(element);
viewport.rotation -=90;
cornerstone.setViewport(element, viewport);
});
$('#rRotate').click(function (e) {
viewport = cornerstone.getViewport(element);
viewport.rotation +=90;
cornerstone.setViewport(element, viewport);
});
$('#reset').click(function (e) {
viewport = cornerstone.getViewport(element);
viewport.hflip = false;
viewport.vflip = false;
viewport.rotation = 0;
cornerstone.setViewport(element, viewport);
});
});
</script>
</html>