custom-cornerstone-tools
Version:
Medical imaging tools for the Cornerstone library - customized for DrNuvem
163 lines (135 loc) • 5.78 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">
<style>
/* These are some good CSS settings for a circular magnifying glass
Try removing the border-radius to make a square magnifying glass */
.magnifyTool{
border: 4px white solid;
box-shadow: 2px 2px 10px #1e1e1e;
border-radius: 50%;
display: none;
cursor: none;
}
/* 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>
Magnify Example
</h1>
<p>
This page contains an example of the magnification tool.
</p>
<a href="../index.html">Go back to the Examples page</a>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2">
<ul class="list-group">
<a id="activate" class="list-group-item">Activate</a>
<a id="disable" class="list-group-item">Disable</a>
</ul>
<label for="magLevelRange">Magnification Level</label>
<input id="magLevelRange" type="range" min="1" value="2" max="10" />
<br/>
<label for="magSizeRange">Magnifying glass size</label>
<input id="magSizeRange" type="range" min="100" value="225" max="300" step="25"/>
</div>
<div class="col-xs-12 col-sm-6">
<div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
oncontextmenu="return false"
class='cornerstone-enabled-image class='cornerstone-enabled-image disable-selection noIbar''
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'>
<div id="dicomImage"
style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<p><strong>Note:</strong> The position of the magnifying glass is absolute, relative to the position of your container. The container must have it's CSS position set to relative, or the tool will be placed incorrectly.<p>
</div>
</div>
</body>
<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>
var element = $('#dicomImage').get(0);
var imageId = 'example://1';
// image enable the dicomImage element
cornerstone.enable(element);
// Enable mouse and touch input
cornerstoneTools.mouseInput.enable(element);
cornerstoneTools.touchInput.enable(element);
var magLevelRange = $("#magLevelRange")
magLevelRange.on("change", function() {
var config = cornerstoneTools.magnify.getConfiguration();
config.magnificationLevel = parseInt(magLevelRange.val(), 10);
});
var magSizeRange = $("#magSizeRange")
magSizeRange.on("change", function() {
var config = cornerstoneTools.magnify.getConfiguration();
config.magnifySize = parseInt(magSizeRange.val(), 10)
var magnify = $(".magnifyTool").get(0);
magnify.width = config.magnifySize;
magnify.height = config.magnifySize;
});
var config = {
magnifySize: parseInt(magSizeRange.val(), 10),
magnificationLevel: parseInt(magLevelRange.val(), 10)
};
cornerstoneTools.magnify.setConfiguration(config);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
cornerstoneTools.magnify.enable(element);
cornerstoneTools.magnifyTouchDrag.enable(element);
cornerstoneTools.pan.activate(element, 2);
cornerstoneTools.zoom.activate(element, 4);
// Enable all tools we want to use with this element
cornerstoneTools.magnify.activate(element, 1);
cornerstoneTools.magnifyTouchDrag.activate(element);
activate("#activate");
function activate(id)
{
$('a').removeClass('active');
$(id).addClass('active');
}
// Tool button event handlers that set the new active tool
$('#disable').click(function() {
activate("#disable");
cornerstoneTools.magnify.disable(element);
cornerstoneTools.magnifyTouchDrag.disable(element);
return false;
});
$('#activate').click(function() {
activate("#activate");
cornerstoneTools.magnify.activate(element, 1);
cornerstoneTools.magnifyTouchDrag.activate(element);
return false;
});
});
</script>
</html>