Spaces:
Running
Running
File size: 5,234 Bytes
7dd28c3 84f84e9 7dd28c3 84f84e9 7dd28c3 84f84e9 7dd28c3 84f84e9 7dd28c3 84f84e9 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 110 |
<html></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="/Users/andreped/Downloads/openseadragon-bin-5.0.0/openseadragon.min.js"></script>
<script type="text/javascript">
var counter = 3;
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "/Users/andreped/Downloads/openseadragon-bin-5.0.0/images/",
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "/Users/andreped/workspace/PyWSIViewer/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> |