Created
September 1, 2015 11:50
-
-
Save swederik/8a416ad61dea2fcf9deb to your computer and use it in GitHub Desktop.
Test reported bug https://github.com/chafey/cornerstoneTools/issues/109
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE 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 Scroll Tools Example | |
</h1> | |
<p> | |
This page contains an example of the stackScroll tool, the play/stopClip tools, and integration with an HTML5 "range" input. | |
Scroll by left click dragging or using the mouse wheel | |
</p> | |
<a href="../index.html">Go back to the Examples page</a> | |
</div> | |
<div class="row"> | |
<div class="col-xs-6"> | |
<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:6px; right:3px"> | |
<div id="frameRate"></div> | |
<div id="zoomText">Zoom: </div> | |
<div id="sliceText">Image: </div> | |
</div> | |
<div id="mrbottomleft" style="position: absolute;bottom:3px; left:3px"> | |
WW/WC: | |
</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 hammer.js library for touch gestures--> | |
<script src="../hammer.min.js"></script> | |
<!-- include the hammer.fakemultitouch so we can test with a mouse --> | |
<script src="../touch-emulator.js"></script> | |
<script> TouchEmulator(); </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="../dicomParser.js"></script> | |
<script src="../cornerstoneWADOImageLoader.js"></script> | |
<script src="../cornerstoneWebImageLoader.js"></script> | |
<script> | |
var element = $('#dicomImage').get(0); | |
var imageIds = [ | |
"dicomweb:https://vna.hackathon.siim.org/dcm4chee-arc/wado/DCM4CHEE?requestType=WADO&studyUID=1.3.6.1.4.1.14519.5.2.1.7777.9002.988079582344471175076015633105&seriesUID=1.3.6.1.4.1.14519.5.2.1.7777.9002.227571573286142502566010959726&objectUID=1.3.6.1.4.1.14519.5.2.1.7777.9002.309859580039258764624742918740&contentType=application%2Fdicom", | |
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Clear_cell_renal_cell_carcinoma_high_mag.jpg/230px-Clear_cell_renal_cell_carcinoma_high_mag.jpg" | |
]; | |
var stack = { | |
currentImageIdIndex : 0, | |
imageIds: imageIds | |
}; | |
// Enable the dicomImage element and the mouse inputs | |
cornerstone.enable(element); | |
cornerstoneTools.touchInput.enable(element); | |
cornerstone.loadImage(imageIds[0]).then(function(image) { | |
// Display the image | |
cornerstone.displayImage(element, image); | |
// Set the stack as tool state | |
cornerstoneTools.addStackStateManager(element, ['stack']); | |
cornerstoneTools.addToolState(element, 'stack', stack); | |
// Enable all tools we want to use with this element | |
cornerstoneTools.zoomTouchPinch.activate(element); | |
cornerstoneTools.stackScrollTouchDrag.activate(element); | |
}); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment