Hugging Face's logo

Spaces:
andreped
/
wsi-visualization-demo
Running

App Files Community
andreped commited on
Commit
5045156
·
1 Parent(s): 1d8520b

More intent fixes

Browse files
Files changed (1) hide show
  1. index.html +86 -86
index.html CHANGED
@@ -4,106 +4,106 @@
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>
 
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>