Spaces:

andreped
/

wsi-annotation-demo

Running

App Files Files Community

andreped commited on Oct 22, 2024

Commit

29767ab

unverified ·

2 Parent(s): a800e4b 012538a

Merge pull request #6 from andreped/restructuring

Browse files

Moved JS and CSS stuff to separate files; refactored index.html

Files changed (3) hide show

css/styles.css +75 -0
index.html +34 -185
js/viewer.js +124 -0

css/styles.css ADDED Viewed

	@@ -0,0 +1,75 @@

+body {
+    padding: 0 0em;
+    height: 100%;
+    background: #303030;
+}
+.sidebar-left {
+    float: left;
+    width: 10%;
+}
+.sidebar-left h1 {
+    color: white;
+    font-size: 16px;
+    padding: 0 1.5em;
+}
+.sidebar-left hr {
+    border: 2px solid white;
+}
+#annotations-container h2 {
+    color: white;
+    padding: 0 0.5em;
+    font-size: 14px;
+}
+#annotations-container hr {
+    border: 0.25px solid white;
+}
+#wsi-canvas {
+    float: left;
+    width: 80%;
+    height: 100%;
+    background: white;
+}
+.sidebar-right {
+    float: right;
+    width: 10%;
+}
+.sidebar-right h2 {
+    color: white;
+    padding: 0 0.5em;
+    font-size: 14px;
+}
+.sidebar-right hr {
+    border: 0.25px solid white;
+}
+.sidebar-right .position,
+.sidebar-right .zoom {
+    color: white;
+    padding: 0 0.5em;
+    font-size: 14px;
+}
+.annotation-item {
+    color: white;
+    padding: 10px;
+    border: 1px solid white;
+    margin-top: 10px;
+    cursor: pointer;
+    font-size: 12px;
+}
+svg.a9s-annotationlayer .a9s-selection .a9s-inner,
+svg.a9s-annotationlayer .a9s-annotation .a9s-inner {
+    stroke-width: 4;
+    stroke: blue;
+    fill: rgba(0, 0, 255, 0.4);
+}

index.html CHANGED Viewed

@@ -1,189 +1,38 @@
 <html>
-    <head>
-        <title>Whole Slide Image Annotation</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-        <link rel="stylesheet" href="node_modules/@recogito/annotorious/dist/annotorious.min.css">
-        <link rel="stylesheet" href="node_modules/@recogito/annotorious-selector-pack/dist/annotorious-selector-pack.min.css">
-        <!-- Dependencies -->
-        <script src="node_modules/openseadragon/build/openseadragon/openseadragon.min.js"></script>
-        <script src="node_modules/@recogito/annotorious-openseadragon/dist/openseadragon-annotorious.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious-toolbar.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious-selector-pack.min.js"></script>
-        <style>
-            /** New style for the annotation outlines **/
-            svg.a9s-annotationlayer .a9s-selection .a9s-inner,
-            svg.a9s-annotationlayer .a9s-annotation .a9s-inner  {
-                stroke-width:4;
-                stroke:blue;
-                fill: rgba(0, 0, 255, 0.4);
-            }
-        </style>
-    </head>
-    <body>
-        <div style="padding: 0 0em; height: 100%; background: #303030">
-            <div class="sidebar-left" style="float: left; width: 10%;">
-                <h1 style="color: white; font-size: 16px; padding: 0 1.5em;">Whole Slide Image Annotation Demo</h1>
-                <hr style="border: 2px solid white;">
-                <div id="annotations-container">
-                    <h2 style="color: white; padding: 0 0.5em; font-size: 14px;">Annotations</h2>
-                    <hr style="border: 0.25px solid white;">
-                    <div id="annotations-list"></div>
-                </div>
             </div>
-            <div id="wsi-canvas" style="float: left; width: 80%; height: 100%; background: white;"></div>
-            <div id="annotation-toolbar"></div>
-            <div class="sidebar-right" style="float: right; width: 10%;">
-                <h2 style="color: white; padding: 0 0.5em; font-size: 14px;">View tracking information</h2>
-                <hr style="border: 0.25px solid white;">
-                <div class="position" style="color: white; padding: 0 0.5em; font-size: 14px;"></div>
-                <hr style="border: 0.25px solid white;">
-                <div class="zoom" style="color: white; padding: 0 0.5em; font-size: 14px;"></div>
-            </div>
-            <div id="annotation_list" style="display: none;"></div>
         </div>
-        <link rel="stylesheet" href="annotorious.min.css">
-        <script type="text/javascript">
-            var viewer = OpenSeadragon({
-                id: "wsi-canvas",
-                prefixUrl: "node_modules/openseadragon/build/openseadragon/images/",
-                zoomPerScroll: 2,
-                zoomPerClick: 1,
-                showNavigator:  true,
-                showHomeControl: false,
-                showFullPageControl: false,
-                showZoomControl: false,
-                minZoomLevel: 0.25,
-                maxZoomLevel: 40,
-                tileSources: {
-                    Image: {
-                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
-                        Url: "A05_files/",
-                        Format: "jpeg",
-                        Overlap: "0",
-                        TileSize: "256",
-                        Size: {
-                            Height: 42625,
-                            Width: 51553
-                        }
-                    },
-                    overlays: [],
-                },
-            });
-            viewer.innerTracker.keyHandler = null;
-            var anno = OpenSeadragon.Annotorious(viewer);
-            Annotorious.SelectorPack(anno);
-            const toolbar = new Annotorious.Toolbar(anno, document.getElementById('annotation-toolbar'));
-            viewer.addControl(document.getElementById("annotation-toolbar"), {anchor: OpenSeadragon.ControlAnchor.TOP_LEFT});
-            document.getElementById('annotation-toolbar').addEventListener('click', function(event) {
-                event.preventDefault();
-            });
-            // Listen for annotation creation event
-            anno.on('createAnnotation', function(annotation) {
-                // Create a new div element for the annotation
-                var annotationItem = document.createElement('div');
-                annotationItem.className = 'annotation-item';
-                annotationItem.style.color = 'white';
-                annotationItem.style.padding = '10px';
-                annotationItem.style.border = '1px solid white';
-                annotationItem.style.marginTop = '10px';
-                annotationItem.style.cursor = 'pointer';
-                annotationItem.style.fontSize = '12px'; // Set font size in pixels
-                annotationItem.dataset.annotationId = annotation.id;
-                // Add annotation details to the item
-                annotationItem.innerHTML = `
-                    ${annotation.body[0].value}
-                `;
-                // Add click event to make the annotation active
-                annotationItem.addEventListener('click', function() {
-                    anno.selectAnnotation(annotation.id);
-                });
-                // Append the annotation item to the annotations list in the sidebar
-                document.getElementById('annotations-list').appendChild(annotationItem);
-            });
-            // Listen for annotation deletion event
-            anno.on('deleteAnnotation', function(annotation) {
-                // Find the corresponding annotation item in the sidebar
-                var annotationItems = document.querySelectorAll('.annotation-item');
-                annotationItems.forEach(function(item) {
-                    if (item.dataset.annotationId === annotation.id) {
-                        item.remove();
-                    }
-                });
-            });
-            // Disable panning when polygon tool is active
-            anno.on('startSelection', function(event) {
-                if (event.tool === 'polygon') {
-                    viewer.setMouseNavEnabled(false);
-                }
-            });
-            // Re-enable panning when polygon tool is deactivated
-            anno.on('cancelSelection', function(event) {
-                if (event.tool === 'polygon') {
-                    viewer.setMouseNavEnabled(true);
-                }
-            });
-            anno.on('createAnnotation', function(event) {
-                if (event.tool === 'polygon') {
-                    viewer.setMouseNavEnabled(true);
-                }
-            });
-            // Add a listener to the viewer to update the position and zoom info
-            var positionEl = document.querySelectorAll('.sidebar-right .position')[0];
-            var zoomEl = document.querySelectorAll('.sidebar-right .zoom')[0];
-            // Default values
-            positionEl.innerHTML = 'Web:<br> (NA) <br><br>Viewport:<br> (NA) <br><br>Image:<br> (NA)';
-            zoomEl.innerHTML = 'Zoom:<br> NA <br><br>Image Zoom:<br> NA';
-            var updateZoom = function() {
-                var zoom = viewer.viewport.getZoom(true);
-                var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
-                zoomEl.innerHTML = 'Zoom:<br>' + (Math.round(zoom * 100) / 100) +
-                    '<br><br>Image Zoom:<br>' + (Math.round(imageZoom * 100) / 100);
-            }
-            viewer.addHandler('open', function() {
-                var tracker = new OpenSeadragon.MouseTracker({
-                    element: viewer.container,
-                    moveHandler: function(event) {
-                        var webPoint = event.position;
-                        var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
-                        var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
-                        var zoom = viewer.viewport.getZoom(true);
-                        var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
-                        positionEl.innerHTML = 'Web:<br>' + webPoint.toString() +
-                            '<br><br>Viewport:<br>' + viewportPoint.toString() +
-                            '<br><br>Image:<br>' + imagePoint.toString();
-                        updateZoom();
-                    }
-                });
-                tracker.setTracking(true);
-                viewer.addHandler('animation', updateZoom);
-            });
-        </script>
-    </body>
 </html>

 <html>
+<head>
+    <title>Whole Slide Image Annotation</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link rel="stylesheet" href="node_modules/@recogito/annotorious/dist/annotorious.min.css">
+    <link rel="stylesheet" href="node_modules/@recogito/annotorious-selector-pack/dist/annotorious-selector-pack.min.css">
+    <link rel="stylesheet" href="css/styles.css">
+    <!-- Dependencies -->
+    <script src="node_modules/openseadragon/build/openseadragon/openseadragon.min.js"></script>
+    <script src="node_modules/@recogito/annotorious-openseadragon/dist/openseadragon-annotorious.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious-toolbar.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-[email protected]/dist/annotorious-selector-pack.min.js"></script>
+</head>
+<body>
+    <div>
+        <div class="sidebar-left">
+            <h1>Whole Slide Image Annotation Demo</h1>
+            <hr>
+            <div id="annotations-container">
+                <h2>Annotations</h2>
+                <hr>
+                <div id="annotations-list"></div>
             </div>
         </div>
+        <div id="wsi-canvas"></div>
+        <div id="annotation-toolbar"></div>
+        <div class="sidebar-right">
+            <h2>View tracking information</h2>
+            <hr>
+            <div class="position"></div>
+            <hr>
+            <div class="zoom"></div>
+        </div>
+        <div id="annotation_list" style="display: none;"></div>
+    </div>
+    <script type="text/javascript" src="js/viewer.js"></script>
+</body>
 </html>

js/viewer.js ADDED Viewed

	@@ -0,0 +1,124 @@

+var viewer = OpenSeadragon({
+    id: "wsi-canvas",
+    prefixUrl: "../node_modules/openseadragon/build/openseadragon/images/",
+    zoomPerScroll: 2,
+    zoomPerClick: 1,
+    showNavigator: true,
+    showHomeControl: false,
+    showFullPageControl: false,
+    showZoomControl: false,
+    minZoomLevel: 0.25,
+    maxZoomLevel: 40,
+    tileSources: {
+        Image: {
+            xmlns: "http://schemas.microsoft.com/deepzoom/2008",
+            Url: "./A05_files/",
+            Format: "jpeg",
+            Overlap: "0",
+            TileSize: "256",
+            Size: {
+                Height: 42625,
+                Width: 51553
+            }
+        },
+        overlays: [],
+    },
+});
+viewer.innerTracker.keyHandler = null;
+var anno = OpenSeadragon.Annotorious(viewer);
+Annotorious.SelectorPack(anno);
+const toolbar = new Annotorious.Toolbar(anno, document.getElementById('annotation-toolbar'));
+viewer.addControl(document.getElementById("annotation-toolbar"), { anchor: OpenSeadragon.ControlAnchor.TOP_LEFT });
+document.getElementById('annotation-toolbar').addEventListener('click', function (event) {
+    event.preventDefault();
+});
+// Listen for annotation creation event
+anno.on('createAnnotation', function (annotation) {
+    // Create a new div element for the annotation
+    var annotationItem = document.createElement('div');
+    annotationItem.className = 'annotation-item';
+    annotationItem.dataset.annotationId = annotation.id;
+    // Add annotation details to the item
+    annotationItem.innerHTML = `${annotation.body[0].value}`;
+    // Add click event to make the annotation active
+    annotationItem.addEventListener('click', function () {
+        anno.selectAnnotation(annotation.id);
+    });
+    // Append the annotation item to the annotations list in the sidebar
+    document.getElementById('annotations-list').appendChild(annotationItem);
+});
+// Listen for annotation deletion event
+anno.on('deleteAnnotation', function (annotation) {
+    // Find the corresponding annotation item in the sidebar
+    var annotationItems = document.querySelectorAll('.annotation-item');
+    annotationItems.forEach(function (item) {
+        if (item.dataset.annotationId === annotation.id) {
+            item.remove();
+        }
+    });
+});
+// Disable panning when polygon tool is active
+anno.on('startSelection', function (event) {
+    if (event.tool === 'polygon') {
+        viewer.setMouseNavEnabled(false);
+    }
+});
+// Re-enable panning when polygon tool is deactivated
+anno.on('cancelSelection', function (event) {
+    if (event.tool === 'polygon') {
+        viewer.setMouseNavEnabled(true);
+    }
+});
+anno.on('createAnnotation', function (event) {
+    if (event.tool === 'polygon') {
+        viewer.setMouseNavEnabled(true);
+    }
+});
+// Add a listener to the viewer to update the position and zoom info
+var positionEl = document.querySelectorAll('.sidebar-right .position')[0];
+var zoomEl = document.querySelectorAll('.sidebar-right .zoom')[0];
+// Default values
+positionEl.innerHTML = 'Web:<br> (NA) <br><br>Viewport:<br> (NA) <br><br>Image:<br> (NA)';
+zoomEl.innerHTML = 'Zoom:<br> NA <br><br>Image Zoom:<br> NA';
+var updateZoom = function () {
+    var zoom = viewer.viewport.getZoom(true);
+    var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
+    zoomEl.innerHTML = 'Zoom:<br>' + (Math.round(zoom * 100) / 100) +
+        '<br><br>Image Zoom:<br>' + (Math.round(imageZoom * 100) / 100);
+}
+viewer.addHandler('open', function () {
+    var tracker = new OpenSeadragon.MouseTracker({
+        element: viewer.container,
+        moveHandler: function (event) {
+            var webPoint = event.position;
+            var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
+            var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
+            var zoom = viewer.viewport.getZoom(true);
+            var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
+            positionEl.innerHTML = 'Web:<br>' + webPoint.toString() +
+                '<br><br>Viewport:<br>' + viewportPoint.toString() +
+                '<br><br>Image:<br>' + imagePoint.toString();
+            updateZoom();
+        }
+    });
+    tracker.setTracking(true);
+    viewer.addHandler('animation', updateZoom);
+});