Hugging Face's logo

Spaces:
andreped
/
wsi-visualization-demo
Running

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

Minor refactoring

Browse files
Files changed (1) hide show
  1. index.html +93 -94
index.html CHANGED
@@ -1,110 +1,109 @@
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/",
21
- tileSources: {
22
- Image: {
23
- xmlns: "http://schemas.microsoft.com/deepzoom/2008",
24
- Url: "/Users/andreped/workspace/PyWSIViewer/A05_files/",
25
- Format: "jpeg",
26
- Overlap: "0",
27
- TileSize: "256",
28
- Size: {
29
- Height: 42625,
30
- Width: 51553
31
- }
32
- },
 
33
  },
34
- sequenceMode: false,
35
- autoHideControls: true,
36
- animationTime: 1.0,
37
- blendTime: 0.5,
38
- constrainDuringPan: false,
39
- maxZoomPixelRatio: 1.15,
40
- visibilityRatio: 1,
41
- zoomPerScroll: 2,
42
- //zoomPerClick: 1,
43
- defaultZoomLevel: 0,
44
- showReferenceStrip: false,
45
- showNavigator: true,
46
- showFullPageControl: false,
47
- gestureSettingsMouse: {
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>
 
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>