Spaces:
Running
Running
Show annotation objects in left-hand sidebar
Browse files- index.html +47 -4
index.html
CHANGED
|
@@ -2,6 +2,8 @@
|
|
| 2 |
<head>
|
| 3 |
<title>Whole Slide Image Annotation</title>
|
| 4 |
|
|
|
|
|
|
|
| 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 |
|
|
@@ -14,12 +16,15 @@
|
|
| 14 |
<body>
|
| 15 |
<div style="padding: 0 0em; height: 95%; background: #303030">
|
| 16 |
<div class="sidebar-left" style="float: left; width: 10%;">
|
| 17 |
-
<h1 style="color: white; font-size:
|
| 18 |
|
| 19 |
-
<hr style="border:
|
| 20 |
|
| 21 |
-
<div
|
| 22 |
-
|
|
|
|
|
|
|
|
|
|
| 23 |
</div>
|
| 24 |
<div id="wsi-canvas" style="float: left; width: 80%; height: 100%; background: white;"></div>
|
| 25 |
<div id="annotation-toolbar"></div>
|
|
@@ -70,6 +75,44 @@
|
|
| 70 |
document.getElementById('annotation-toolbar').addEventListener('click', function(event) {
|
| 71 |
event.preventDefault();
|
| 72 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 73 |
</script>
|
| 74 |
</body>
|
| 75 |
</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 |
|
|
|
|
| 16 |
<body>
|
| 17 |
<div style="padding: 0 0em; height: 95%; background: #303030">
|
| 18 |
<div class="sidebar-left" style="float: left; width: 10%;">
|
| 19 |
+
<h1 style="color: white; font-size: 16px; padding: 0 1.5em;">Whole Slide Image Annotation Demo</h1>
|
| 20 |
|
| 21 |
+
<hr style="border: 2px solid white;">
|
| 22 |
|
| 23 |
+
<div id="annotations-container">
|
| 24 |
+
<h2 style="color: white; padding: 0 0.5em; font-size: 14px;">Annotations</h2>
|
| 25 |
+
<hr style="border: 0.25px solid white;">
|
| 26 |
+
<div id="annotations-list"></div>
|
| 27 |
+
</div>
|
| 28 |
</div>
|
| 29 |
<div id="wsi-canvas" style="float: left; width: 80%; height: 100%; background: white;"></div>
|
| 30 |
<div id="annotation-toolbar"></div>
|
|
|
|
| 75 |
document.getElementById('annotation-toolbar').addEventListener('click', function(event) {
|
| 76 |
event.preventDefault();
|
| 77 |
});
|
| 78 |
+
|
| 79 |
+
// Listen for annotation creation event
|
| 80 |
+
anno.on('createAnnotation', function(annotation) {
|
| 81 |
+
// Create a new div element for the annotation
|
| 82 |
+
var annotationItem = document.createElement('div');
|
| 83 |
+
annotationItem.className = 'annotation-item';
|
| 84 |
+
annotationItem.style.color = 'white';
|
| 85 |
+
annotationItem.style.padding = '10px';
|
| 86 |
+
annotationItem.style.border = '1px solid white';
|
| 87 |
+
annotationItem.style.marginTop = '10px';
|
| 88 |
+
annotationItem.style.cursor = 'pointer';
|
| 89 |
+
annotationItem.style.fontSize = '12px'; // Set font size in pixels
|
| 90 |
+
annotationItem.dataset.annotationId = annotation.id;
|
| 91 |
+
|
| 92 |
+
// Add annotation details to the item
|
| 93 |
+
annotationItem.innerHTML = `
|
| 94 |
+
${annotation.body[0].value}
|
| 95 |
+
`;
|
| 96 |
+
|
| 97 |
+
// Add click event to make the annotation active
|
| 98 |
+
annotationItem.addEventListener('click', function() {
|
| 99 |
+
anno.selectAnnotation(annotation.id);
|
| 100 |
+
});
|
| 101 |
+
|
| 102 |
+
// Append the annotation item to the annotations list in the sidebar
|
| 103 |
+
document.getElementById('annotations-list').appendChild(annotationItem);
|
| 104 |
+
});
|
| 105 |
+
|
| 106 |
+
// Listen for annotation deletion event
|
| 107 |
+
anno.on('deleteAnnotation', function(annotation) {
|
| 108 |
+
// Find the corresponding annotation item in the sidebar
|
| 109 |
+
var annotationItems = document.querySelectorAll('.annotation-item');
|
| 110 |
+
annotationItems.forEach(function(item) {
|
| 111 |
+
if (item.dataset.annotationId === annotation.id) {
|
| 112 |
+
item.remove();
|
| 113 |
+
}
|
| 114 |
+
});
|
| 115 |
+
});
|
| 116 |
</script>
|
| 117 |
</body>
|
| 118 |
</html>
|