Hugging Face's logo

Spaces:
andreped
/
wsi-visualization-demo
Running

App Files Community
andreped commited on
Commit
84f84e9
·
1 Parent(s): 7dd28c3

Added mouse and zoom tracking info to page

Browse files
Files changed (1) hide show
  1. index.html +63 -13
index.html CHANGED
@@ -1,26 +1,20 @@
1
  <html></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
 
8
  <div style="padding: 0 1.5em; height: 90%;">
9
- <div class="info" style="float: left; width: 10%;">
10
- <div class="position"></div>
11
- <div class="zoom" style="margin-top: 3em;"></div>
12
- </div>
13
- <div id="openseadragon1" style="float: right; width: 90%; height: 100%; background: black;"></div>
14
  </div>
15
-
16
- <!-- <div id="openseadragon1" style="width: 100%; height: 100%";></div> -->
17
- <!-- html comment syntax -->
18
  <script src="/Users/andreped/Downloads/openseadragon-bin-5.0.0/openseadragon.min.js"></script>
19
- <!-- <script src="/OpenSeadragonCanvasOverlay/openseadragon-canvas-overlay.js"></script> -->
20
-
21
  <script type="text/javascript">
22
  var counter = 3;
23
-
24
  var viewer = OpenSeadragon({
25
  id: "openseadragon1",
26
  prefixUrl: "/Users/andreped/Downloads/openseadragon-bin-5.0.0/images/",
@@ -54,7 +48,63 @@
54
  clickToZoom: false
55
  },
56
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  </script>
59
  </body>
60
  </html>
 
1
  <html></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
 
8
  <div style="padding: 0 1.5em; height: 90%;">
9
+ <div class="info" style="float: left; width: 10%;">
10
+ <div class="position"></div>
11
+ <div class="zoom" style="margin-top: 3em;"></div>
12
+ </div>
13
+ <div id="openseadragon1" style="float: right; width: 90%; height: 100%; background: black;"></div>
14
  </div>
 
 
 
15
  <script src="/Users/andreped/Downloads/openseadragon-bin-5.0.0/openseadragon.min.js"></script>
 
 
16
  <script type="text/javascript">
17
  var counter = 3;
 
18
  var viewer = OpenSeadragon({
19
  id: "openseadragon1",
20
  prefixUrl: "/Users/andreped/Downloads/openseadragon-bin-5.0.0/images/",
 
48
  clickToZoom: false
49
  },
50
  });
51
+
52
+ var positionEl = document.querySelectorAll('.info .position')[0];
53
+ var zoomEl = document.querySelectorAll('.info .zoom')[0];
54
+
55
+ var updateZoom = function() {
56
+ var zoom = viewer.viewport.getZoom(true);
57
+ var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
58
+
59
+ zoomEl.innerHTML = 'Zoom:<br>' + (Math.round(zoom * 100) / 100) +
60
+ '<br><br>Image Zoom:<br>' + (Math.round(imageZoom * 100) / 100);
61
+ }
62
+
63
+ viewer.addHandler('open', function() {
64
+ var tracker = new OpenSeadragon.MouseTracker({
65
+ element: viewer.container,
66
+ moveHandler: function(event) {
67
+ var webPoint = event.position;
68
+ var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
69
+ var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
70
+ var zoom = viewer.viewport.getZoom(true);
71
+ var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
72
+
73
+ positionEl.innerHTML = 'Web:<br>' + webPoint.toString() +
74
+ '<br><br>Viewport:<br>' + viewportPoint.toString() +
75
+ '<br><br>Image:<br>' + imagePoint.toString();
76
+
77
+ updateZoom();
78
+ }
79
+ });
80
+ tracker.setTracking(true);
81
+ viewer.addHandler('animation', updateZoom);
82
+ });
83
+
84
+ viewer.addHandler('canvas-double-click', function(event) {
85
+ var webPoint = event.position;
86
+ var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
87
+ var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
88
+ var zoom = viewer.viewport.getZoom(true);
89
+ var val = 42625/51553;
90
+
91
+ var elt = document.createElement("div");
92
+ elt.id = "overlay-rotation-exact2";
93
+ elt.className = "highlight";
94
 
95
+ var width = 0.02;
96
+ var height = 0.02;
97
+
98
+ width /= zoom;
99
+ height /= zoom;
100
+
101
+ var someRect = new OpenSeadragon.Rect(viewportPoint.x - width/2, viewportPoint.y - height/2, width, height);
102
+
103
+ viewer.addOverlay({
104
+ element: elt,
105
+ location: someRect
106
+ });
107
+ });
108
  </script>
109
  </body>
110
  </html>