Spaces:
Sleeping
Sleeping
| <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> |