Spaces:
Running
Running
File size: 4,342 Bytes
2a5f02e 7dd28c3 84f84e9 2a5f02e 7dd28c3 2a5f02e 1d8520b 7dd28c3 1d8520b 2a5f02e 1d8520b 2a5f02e 1d8520b 84f84e9 1d8520b 84f84e9 1d8520b 84f84e9 1d8520b 2a5f02e 1d8520b 84f84e9 1d8520b 84f84e9 2a5f02e 1d8520b 84f84e9 1d8520b 7dd28c3 1d8520b 84f84e9 2a5f02e 84f84e9 2a5f02e 84f84e9 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="/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> |