custom-cornerstone-tools
Version:
Medical imaging tools for the Cornerstone library - customized for DrNuvem
243 lines (217 loc) • 10.1 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="../bootstrap.min.css" rel="stylesheet">
<link href="../cornerstone.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>
All Image Tools Example
</h1>
<p>
This page contains an example of all image tools
</p>
<a href="../index.html">Go back to the Examples page</a>
</div>
<br>
<div class="row">
<div class="col-xs-2">
<ul class="list-group">
<a id="enableWindowLevelTool" class="list-group-item">WW/WC</a>
<a id="pan" class="list-group-item">Pan</a>
<a id="zoom" class="list-group-item">Zoom</a>
<a id="enableLength" class="list-group-item">Length</a>
<a id="probe" class="list-group-item">Probe</a>
<a id="circleroi" class="list-group-item">Elliptical ROI</a>
<a id="rectangleroi" class="list-group-item">Rectangle ROI</a>
<a id="angle" class="list-group-item">Angle</a>
<a id="highlight" class="list-group-item">Highlight</a>
<a id="freehand" class="list-group-item">Freeform ROI</a>
</ul>
<div class="checkbox">
<label><input type="checkbox" id="chkshadow">Apply shadow</label>
</div>
<br/>
</div>
<div class="col-xs-10">
<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:3px; right:3px">
Zoom:
</div>
<div id="mrbottomleft" style="position: absolute;bottom:3px; left:3px">
WW/WC:
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Functionality</h3>
<ul>
<li>Activation of a tool for the left mouse button
<ul>
<li>WW/WC - Adjust the window width and window center of the image (activated by default)</li>
<li>Pan - Pan the image</li>
<li>Zoom - Zoom the image</li>
<li>Length - Length measurement tool</li>
<li>Probe - Display the image x,y coordinate under cursor as well as the pixel value (stored pixel and modality)</li>
<li>Elliptical ROI - An elliptical ROI that shows mean, stddev and area</li>
<li>Rectangle ROI - A rectangular ROI that shows mean, stddev and area</li>
<li>Highlight - Darkens the image around a rectangular ROI</li>
<li>Angle - Cobb angle tool</li>
</ul>
</li>
<li>Use the activated tool by dragging the left mouse button</li>
<li>Pan by dragging the middle mouse button</li>
<li>Zoom by dragging the right mouse button</li>
<li>Zoom by rolling the mouse wheel</li>
<li>Tool dragging - left click drag on any measurement tool line to move it</li>
<li>Tool deletion - left click drag on any measurement tool line and drop it off the image to delete it</li>
<li>Tool handles - left click drag on any measurement tool handle (the circle) to change the handles position</li>
</ul>
</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>
var element = $('#dicomImage').get(0);
// 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);
$('#mrbottomleft').text("WW/WC: " + Math.round(viewport.voi.windowWidth) + "/" + Math.round(viewport.voi.windowCenter));
$('#mrbottomright').text("Zoom: " + viewport.scale.toFixed(2));
};
element.addEventListener('cornerstoneimagerendered', onImageRendered);
var imageId = 'example://1';
var config = {
// invert: true,
minScale: 0.25,
maxScale: 20.0,
preventZoomOutsideImage: true
};
cornerstoneTools.zoom.setConfiguration(config);
$('#chkshadow').on('change', function(){
cornerstoneTools.length.setConfiguration({shadow: this.checked});
cornerstoneTools.angle.setConfiguration({shadow: this.checked});
cornerstone.updateImage(element);
});
// image enable the dicomImage element
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
cornerstoneTools.mouseInput.enable(element);
cornerstoneTools.mouseWheelInput.enable(element);
// Enable all tools we want to use with this element
cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button
cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button
cornerstoneTools.zoomWheel.activate(element); // zoom is the default tool for middle mouse wheel
cornerstoneTools.probe.enable(element);
cornerstoneTools.length.enable(element);
cornerstoneTools.ellipticalRoi.enable(element);
cornerstoneTools.rectangleRoi.enable(element);
cornerstoneTools.angle.enable(element);
cornerstoneTools.highlight.enable(element);
activate("#enableWindowLevelTool");
function activate(id)
{
$('a').removeClass('active');
$(id).addClass('active');
}
// helper function used by the tool button handlers to disable the active tool
// before making a new tool active
function disableAllTools()
{
cornerstoneTools.wwwc.disable(element);
cornerstoneTools.pan.activate(element, 2); // 2 is middle mouse button
cornerstoneTools.zoom.activate(element, 4); // 4 is right mouse button
cornerstoneTools.probe.deactivate(element, 1);
cornerstoneTools.length.deactivate(element, 1);
cornerstoneTools.ellipticalRoi.deactivate(element, 1);
cornerstoneTools.rectangleRoi.deactivate(element, 1);
cornerstoneTools.angle.deactivate(element, 1);
cornerstoneTools.highlight.deactivate(element, 1);
cornerstoneTools.freehand.deactivate(element, 1);
}
// Tool button event handlers that set the new active tool
$('#enableWindowLevelTool').click(function() {
activate('#enableWindowLevelTool')
disableAllTools();
cornerstoneTools.wwwc.activate(element, 1);
});
$('#pan').click(function() {
activate('#pan')
disableAllTools();
cornerstoneTools.pan.activate(element, 3); // 3 means left mouse button and middle mouse button
});
$('#zoom').click(function() {
activate('#zoom')
disableAllTools();
cornerstoneTools.zoom.activate(element, 5); // 5 means left mouse button and right mouse button
});
$('#enableLength').click(function() {
activate('#enableLength')
disableAllTools();
cornerstoneTools.length.activate(element, 1);
});
$('#probe').click(function() {
activate('#probe')
disableAllTools();
cornerstoneTools.probe.activate(element, 1);
});
$('#circleroi').click(function() {
activate('#circleroi')
disableAllTools();
cornerstoneTools.ellipticalRoi.activate(element, 1);
});
$('#rectangleroi').click(function() {
activate('#rectangleroi')
disableAllTools();
cornerstoneTools.rectangleRoi.activate(element, 1);
});
$('#angle').click(function () {
activate('#angle')
disableAllTools();
cornerstoneTools.angle.activate(element, 1);
});
$('#highlight').click(function() {
activate('#highlight')
disableAllTools();
cornerstoneTools.highlight.activate(element, 1);
});
$('#freehand').click(function() {
activate('#freehand')
disableAllTools();
cornerstoneTools.freehand.activate(element, 1);
});
});
</script>
</html>