andreped commited on
Commit
520c932
·
2 Parent(s): 6d71511 5045156

Merge pull request #1 from andreped/demo

Browse files

Implemented simple demo for visualizing WSI in browser using OpenSeadragon

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