Spaces:
Running
Running
File size: 4,615 Bytes
2a5f02e 7dd28c3 84f84e9 2a5f02e 5045156 7dd28c3 2990dcd 5045156 2990dcd 5045156 2990dcd 5045156 2990dcd 5045156 7dd28c3 5045156 1d8520b 5045156 2a5f02e 5045156 84f84e9 5045156 84f84e9 5045156 84f84e9 5045156 2a5f02e 84f84e9 5045156 84f84e9 5045156 84f84e9 5045156 7dd28c3 5045156 84f84e9 5045156 84f84e9 5045156 84f84e9 5045156 2a5f02e 7dd28c3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<html>
<head>
<title>Whole Slide Image Visualization</title>
</head>
<body>
<h1>Simple demo for visualization of WSIs in the browser! </h1>
<div style="padding: 0 1.5em; height: 90%;">
<div class="info" style="float: left; width: 10%;">
<div class="position"></div>
<div class="zoom" style="margin-top: 3em;"></div>
</div>
<div id="openseadragon1" style="float: right; width: 90%; height: 100%; background: black;"></div>
</div>
<script src="openseadragon-bin-5.0.0/openseadragon.min.js"></script>
<script type="text/javascript">
var counter = 3;
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "openseadragon-bin-5.0.0/images/",
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "A05_files/",
Format: "jpeg",
Overlap: "0",
TileSize: "256",
Size: {
Height: 42625,
Width: 51553
}
},
},
sequenceMode: false,
autoHideControls: true,
animationTime: 1.0,
blendTime: 0.5,
constrainDuringPan: false,
maxZoomPixelRatio: 1.15,
visibilityRatio: 1,
zoomPerScroll: 2,
//zoomPerClick: 1,
defaultZoomLevel: 0,
showReferenceStrip: false,
showNavigator: true,
showFullPageControl: false,
gestureSettingsMouse: {
clickToZoom: false
},
});
var positionEl = document.querySelectorAll('.info .position')[0];
var zoomEl = document.querySelectorAll('.info .zoom')[0];
var updateZoom = function() {
var zoom = viewer.viewport.getZoom(true);
var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
zoomEl.innerHTML = 'Zoom:<br>' + (Math.round(zoom * 100) / 100) +
'<br><br>Image Zoom:<br>' + (Math.round(imageZoom * 100) / 100);
}
viewer.addHandler('open', function() {
var tracker = new OpenSeadragon.MouseTracker({
element: viewer.container,
moveHandler: function(event) {
var webPoint = event.position;
var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
var zoom = viewer.viewport.getZoom(true);
var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
positionEl.innerHTML = 'Web:<br>' + webPoint.toString() +
'<br><br>Viewport:<br>' + viewportPoint.toString() +
'<br><br>Image:<br>' + imagePoint.toString();
updateZoom();
}
});
tracker.setTracking(true);
viewer.addHandler('animation', updateZoom);
});
viewer.addHandler('canvas-double-click', function(event) {
var webPoint = event.position;
var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
var zoom = viewer.viewport.getZoom(true);
var val = 42625/51553;
var elt = document.createElement("div");
elt.id = "overlay-rotation-exact2";
elt.className = "highlight";
var width = 0.02;
var height = 0.02;
width /= zoom;
height /= zoom;
var someRect = new OpenSeadragon.Rect(viewportPoint.x - width/2, viewportPoint.y - height/2, width, height);
viewer.addOverlay({
element: elt,
location: someRect
});
});
</script>
</body>
</html> |