Hugging Face's logo

Spaces:
andreped
/
wsi-annotation-demo
Running

App Files Community
andreped commited on
Commit
41d0781
·
1 Parent(s): 02b5e10

Refactored HTML after splitting

Browse files
Files changed (1) hide show
  1. index.html +34 -185
index.html CHANGED
@@ -1,189 +1,38 @@
1
  <html>
2
- <head>
3
- <title>Whole Slide Image Annotation</title>
4
-
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
-
7
- <link rel="stylesheet" href="node_modules/@recogito/annotorious/dist/annotorious.min.css">
8
- <link rel="stylesheet" href="node_modules/@recogito/annotorious-selector-pack/dist/annotorious-selector-pack.min.css">
9
-
10
- <!-- Dependencies -->
11
- <script src="node_modules/openseadragon/build/openseadragon/openseadragon.min.js"></script>
12
- <script src="node_modules/@recogito/annotorious-openseadragon/dist/openseadragon-annotorious.min.js"></script>
13
- <script src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious-toolbar.min.js"></script>
14
- <script src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious-selector-pack.min.js"></script>
15
-
16
- <style>
17
- /** New style for the annotation outlines **/
18
- svg.a9s-annotationlayer .a9s-selection .a9s-inner,
19
- svg.a9s-annotationlayer .a9s-annotation .a9s-inner {
20
- stroke-width:4;
21
- stroke:blue;
22
- fill: rgba(0, 0, 255, 0.4);
23
- }
24
- </style>
25
- </head>
26
- <body>
27
- <div style="padding: 0 0em; height: 100%; background: #303030">
28
- <div class="sidebar-left" style="float: left; width: 10%;">
29
- <h1 style="color: white; font-size: 16px; padding: 0 1.5em;">Whole Slide Image Annotation Demo</h1>
30
-
31
- <hr style="border: 2px solid white;">
32
-
33
- <div id="annotations-container">
34
- <h2 style="color: white; padding: 0 0.5em; font-size: 14px;">Annotations</h2>
35
- <hr style="border: 0.25px solid white;">
36
- <div id="annotations-list"></div>
37
- </div>
38
  </div>
39
- <div id="wsi-canvas" style="float: left; width: 80%; height: 100%; background: white;"></div>
40
- <div id="annotation-toolbar"></div>
41
-
42
- <div class="sidebar-right" style="float: right; width: 10%;">
43
- <h2 style="color: white; padding: 0 0.5em; font-size: 14px;">View tracking information</h2>
44
- <hr style="border: 0.25px solid white;">
45
-
46
- <div class="position" style="color: white; padding: 0 0.5em; font-size: 14px;"></div>
47
- <hr style="border: 0.25px solid white;">
48
- <div class="zoom" style="color: white; padding: 0 0.5em; font-size: 14px;"></div>
49
- </div>
50
-
51
- <div id="annotation_list" style="display: none;"></div>
52
  </div>
53
- <link rel="stylesheet" href="annotorious.min.css">
54
- <script type="text/javascript">
55
- var viewer = OpenSeadragon({
56
- id: "wsi-canvas",
57
- prefixUrl: "node_modules/openseadragon/build/openseadragon/images/",
58
- zoomPerScroll: 2,
59
- zoomPerClick: 1,
60
- showNavigator: true,
61
- showHomeControl: false,
62
- showFullPageControl: false,
63
- showZoomControl: false,
64
- minZoomLevel: 0.25,
65
- maxZoomLevel: 40,
66
- tileSources: {
67
- Image: {
68
- xmlns: "http://schemas.microsoft.com/deepzoom/2008",
69
- Url: "A05_files/",
70
- Format: "jpeg",
71
- Overlap: "0",
72
- TileSize: "256",
73
- Size: {
74
- Height: 42625,
75
- Width: 51553
76
- }
77
- },
78
- overlays: [],
79
- },
80
- });
81
- viewer.innerTracker.keyHandler = null;
82
-
83
- var anno = OpenSeadragon.Annotorious(viewer);
84
- Annotorious.SelectorPack(anno);
85
-
86
- const toolbar = new Annotorious.Toolbar(anno, document.getElementById('annotation-toolbar'));
87
- viewer.addControl(document.getElementById("annotation-toolbar"), {anchor: OpenSeadragon.ControlAnchor.TOP_LEFT});
88
-
89
- document.getElementById('annotation-toolbar').addEventListener('click', function(event) {
90
- event.preventDefault();
91
- });
92
-
93
- // Listen for annotation creation event
94
- anno.on('createAnnotation', function(annotation) {
95
- // Create a new div element for the annotation
96
- var annotationItem = document.createElement('div');
97
- annotationItem.className = 'annotation-item';
98
- annotationItem.style.color = 'white';
99
- annotationItem.style.padding = '10px';
100
- annotationItem.style.border = '1px solid white';
101
- annotationItem.style.marginTop = '10px';
102
- annotationItem.style.cursor = 'pointer';
103
- annotationItem.style.fontSize = '12px'; // Set font size in pixels
104
- annotationItem.dataset.annotationId = annotation.id;
105
-
106
- // Add annotation details to the item
107
- annotationItem.innerHTML = `
108
- ${annotation.body[0].value}
109
- `;
110
-
111
- // Add click event to make the annotation active
112
- annotationItem.addEventListener('click', function() {
113
- anno.selectAnnotation(annotation.id);
114
- });
115
-
116
- // Append the annotation item to the annotations list in the sidebar
117
- document.getElementById('annotations-list').appendChild(annotationItem);
118
- });
119
-
120
- // Listen for annotation deletion event
121
- anno.on('deleteAnnotation', function(annotation) {
122
- // Find the corresponding annotation item in the sidebar
123
- var annotationItems = document.querySelectorAll('.annotation-item');
124
- annotationItems.forEach(function(item) {
125
- if (item.dataset.annotationId === annotation.id) {
126
- item.remove();
127
- }
128
- });
129
- });
130
-
131
- // Disable panning when polygon tool is active
132
- anno.on('startSelection', function(event) {
133
- if (event.tool === 'polygon') {
134
- viewer.setMouseNavEnabled(false);
135
- }
136
- });
137
-
138
- // Re-enable panning when polygon tool is deactivated
139
- anno.on('cancelSelection', function(event) {
140
- if (event.tool === 'polygon') {
141
- viewer.setMouseNavEnabled(true);
142
- }
143
- });
144
-
145
- anno.on('createAnnotation', function(event) {
146
- if (event.tool === 'polygon') {
147
- viewer.setMouseNavEnabled(true);
148
- }
149
- });
150
-
151
- // Add a listener to the viewer to update the position and zoom info
152
- var positionEl = document.querySelectorAll('.sidebar-right .position')[0];
153
- var zoomEl = document.querySelectorAll('.sidebar-right .zoom')[0];
154
-
155
- // Default values
156
- positionEl.innerHTML = 'Web:<br> (NA) <br><br>Viewport:<br> (NA) <br><br>Image:<br> (NA)';
157
- zoomEl.innerHTML = 'Zoom:<br> NA <br><br>Image Zoom:<br> NA';
158
-
159
- var updateZoom = function() {
160
- var zoom = viewer.viewport.getZoom(true);
161
- var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
162
-
163
- zoomEl.innerHTML = 'Zoom:<br>' + (Math.round(zoom * 100) / 100) +
164
- '<br><br>Image Zoom:<br>' + (Math.round(imageZoom * 100) / 100);
165
- }
166
-
167
- viewer.addHandler('open', function() {
168
- var tracker = new OpenSeadragon.MouseTracker({
169
- element: viewer.container,
170
- moveHandler: function(event) {
171
- var webPoint = event.position;
172
- var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
173
- var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
174
- var zoom = viewer.viewport.getZoom(true);
175
- var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
176
-
177
- positionEl.innerHTML = 'Web:<br>' + webPoint.toString() +
178
- '<br><br>Viewport:<br>' + viewportPoint.toString() +
179
- '<br><br>Image:<br>' + imagePoint.toString();
180
-
181
- updateZoom();
182
- }
183
- });
184
- tracker.setTracking(true);
185
- viewer.addHandler('animation', updateZoom);
186
- });
187
- </script>
188
- </body>
189
  </html>
 
1
  <html>
2
+ <head>
3
+ <title>Whole Slide Image Annotation</title>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
5
+ <link rel="stylesheet" href="node_modules/@recogito/annotorious/dist/annotorious.min.css">
6
+ <link rel="stylesheet" href="node_modules/@recogito/annotorious-selector-pack/dist/annotorious-selector-pack.min.css">
7
+ <link rel="stylesheet" href="css/styles.css">
8
+ <!-- Dependencies -->
9
+ <script src="node_modules/openseadragon/build/openseadragon/openseadragon.min.js"></script>
10
+ <script src="node_modules/@recogito/annotorious-openseadragon/dist/openseadragon-annotorious.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious-toolbar.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-[email protected]/dist/annotorious-selector-pack.min.js"></script>
13
+ </head>
14
+ <body>
15
+ <div>
16
+ <div class="sidebar-left">
17
+ <h1>Whole Slide Image Annotation Demo</h1>
18
+ <hr>
19
+ <div id="annotations-container">
20
+ <h2>Annotations</h2>
21
+ <hr>
22
+ <div id="annotations-list"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </div>
25
+ <div id="wsi-canvas"></div>
26
+ <div id="annotation-toolbar"></div>
27
+ <div class="sidebar-right">
28
+ <h2>View tracking information</h2>
29
+ <hr>
30
+ <div class="position"></div>
31
+ <hr>
32
+ <div class="zoom"></div>
33
+ </div>
34
+ <div id="annotation_list" style="display: none;"></div>
35
+ </div>
36
+ <script type="text/javascript" src="js/scripts.js"></script>
37
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  </html>