custom-cornerstone-tools
Version:
Medical imaging tools for the Cornerstone library - customized for DrNuvem
244 lines (201 loc) • 9.4 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;
}
.orientationMarker {
font-size: 14pt;
font-weight: 100;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Example of identifying DICOM image orientation</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 class="orientationMarkers" style="width:512px;height:512px;top:0px;left:0px; position: absolute">
<div class="mrtopmiddle orientationMarkerDiv" style="position: absolute;top:3px; left:253px">
<span class="orientationMarker">S<span>
</div>
<div class="mrrightmiddle orientationMarkerDiv" style="position: absolute;top:253px; left:495px">
<span class="orientationMarker">P<span>
</div>
<div class="mrbottommiddle orientationMarkerDiv" style="position: absolute;top:480px; left:253px">
<span class="orientationMarker">I<span>
</div>
<div class="mrleftmiddle orientationMarkerDiv" style="position: absolute;top:253px; left:3px">
<span class="orientationMarker">A<span>
</div>
</div>
</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';
function rotateMarker(div, rotation) {
var rotationCSS = {
"-webkit-transform-origin": "center center",
"-moz-transform-origin": "center center",
"-o-transform-origin": "center center",
"transform-origin": "center center",
"transform" : "rotate("+ rotation +"deg)"
};
var oppositeRotationCSS = {
"-webkit-transform-origin": "center center",
"-moz-transform-origin": "center center",
"-o-transform-origin": "center center",
"transform-origin": "center center",
"transform" : "rotate("+ -rotation +"deg)"
};
div.css(rotationCSS);
div.find(".orientationMarkerDiv").css(oppositeRotationCSS);
}
function calculateOrientationMarkers(element, viewport) {
var elementDiv = $(element);
var enabledElement = cornerstone.getEnabledElement(element);
var imagePlaneMetaData = cornerstone.metaData.get('imagePlaneModule', enabledElement.image.imageId);
console.log(imagePlaneMetaData);
var rowString = cornerstoneTools.orientation.getOrientationString(imagePlaneMetaData.rowCosines);
var columnString = cornerstoneTools.orientation.getOrientationString(imagePlaneMetaData.columnCosines);
var oppositeRowString = cornerstoneTools.orientation.invertOrientationString(rowString);
var oppositeColumnString = cornerstoneTools.orientation.invertOrientationString(columnString);
var markers = {
top: oppositeColumnString,
bottom: columnString,
left: oppositeRowString,
right: rowString
}
var topMid = elementDiv.find('.mrtopmiddle .orientationMarker');
var bottomMid = elementDiv.find('.mrbottommiddle .orientationMarker');
var rightMid = elementDiv.find('.mrrightmiddle .orientationMarker');
var leftMid = elementDiv.find('.mrleftmiddle .orientationMarker');
topMid.text(markers.top);
bottomMid.text(markers.bottom);
rightMid.text(markers.right);
leftMid.text(markers.left);
}
function updateOrientationMarkers(element, viewport)
{
var elementDiv = $(element);
var width = elementDiv.width();
var height = elementDiv.width();
//Apply rotations
var orientationMarkers = elementDiv.find('.orientationMarkers');
rotateMarker(orientationMarkers, viewport.rotation);
}
// Listen for changes to the viewport so we can update the text overlays in the corner
function onImageRendered(e) {
var viewport = cornerstone.getViewport(e.target);
updateOrientationMarkers(e.target, viewport);
};
element.addEventListener('cornerstoneimagerendered', onImageRendered);
cornerstone.enable(element);
// Enable mouse and touch input
cornerstoneTools.mouseInput.enable(element);
cornerstoneTools.touchInput.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
var viewport = cornerstone.getViewport(element);
calculateOrientationMarkers(element, viewport);
updateOrientationMarkers(element, viewport);
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);
var elementDiv = $(element);
var rightMid = elementDiv.find('.mrrightmiddle .orientationMarker');
var leftMid = elementDiv.find('.mrleftmiddle .orientationMarker');
var temp = rightMid.text();
rightMid.text(leftMid.text());
leftMid.text(temp);
});
$('#vFlip').click(function (e) {
viewport = cornerstone.getViewport(element);
viewport.vflip = !viewport.vflip;
cornerstone.setViewport(element, viewport);
var elementDiv = $(element);
var topMid = elementDiv.find('.mrtopmiddle .orientationMarker');
var bottomMid = elementDiv.find('.mrbottommiddle .orientationMarker');
var temp = topMid.text();
topMid.text(bottomMid.text());
bottomMid.text(temp);
});
$('#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);
calculateOrientationMarkers(element, viewport);
});
});
</script>
</html>