Merge pull request #128 from WildMeOrg/107_image_grid

107 image grid
WildMeOrg · Dec 9, 2024 · 529b6bf · 529b6bf
2 parents 1ae5b2f + 1c04bd9
commit 529b6bf
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 26 deletions.
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -67,6 +67,31 @@ window.debugAnnotations = async () =>{
 
 $( document ).ready( async () => {  
 
+  $('body').on('change', '.gridswitch', async (e) => {      
+      const gridOverlays = document.querySelectorAll('.gridOverlay');
+      if (e.target.checked) {
+        gridOverlays.forEach(gridOverlay => {
+          gridOverlay.style.display = 'block';
+      });
+      } else {
+        gridOverlays.forEach(gridOverlay => {
+          gridOverlay.style.display = 'none';
+      }); 
+      }   
+  }); 
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'g' || e.key === 'G') {
+      const gridSwitch = document.querySelector('.gridswitch');
+      if (gridSwitch) {
+        // Toggle the grid switch checked state
+        gridSwitch.checked = !gridSwitch.checked;
+        // Trigger the change event manually
+        $(gridSwitch).trigger('change');
+      }
+    }
+  });
+
 $('form.handleable').each(function(index) {
 
   $(this).submit(async function(e){
@@ -143,6 +168,8 @@ $('form.handleable').each(function(index) {
 
   });
 
+
+
 });
 
 /*
@@ -1185,7 +1212,7 @@ $('#annotationInnerWrapper').on('wheel', (e) => {
 function zoomAnnotationImage(factor, mouseX = window.imageHeight/2, mouseY= window.imageHeight/2) {
   const image = $('#imageToAnnotate');
   const wrapper = $('#annotationInnerWrapper');
-
+  const gridOverlay = $('.gridOverlay');
   const oldImageWidth = image.width();
   const oldImageHeight = image.height();
 
@@ -1222,6 +1249,14 @@ function zoomAnnotationImage(factor, mouseX = window.imageHeight/2, mouseY= wind
     width: newWidth + 'px'
   });
 
+  const gridBaseSize = 100; 
+  const gridScale = newHeight / minimumImageHeight; 
+  let newGridSize = Math.max(gridBaseSize * gridScale, 100);
+
+  gridOverlay.css({
+    backgroundSize: `${newGridSize}px ${newGridSize}px`
+  });
+
   wrapper.scrollLeft(newScrollLeft);
   wrapper.scrollTop(newScrollTop);
 
@@ -1365,7 +1400,7 @@ setTimeout( async () => {
 const zoomGroundTruthImage = (factor, mouseX = window.imageHeight/2, mouseY= window.imageHeight/2) => {
   const image = $('#imageToGroundTruth');
   const wrapper = $('#scrollBoxLeft'); // Wrapper for scroll handling
-
+  const gridOverlay = $('.gridOverlay');
   const oldImageWidth = image.width();
   const oldImageHeight = image.height();
 
@@ -1403,6 +1438,14 @@ const zoomGroundTruthImage = (factor, mouseX = window.imageHeight/2, mouseY= win
       width: newWidth + 'px'
     });
 
+    const gridBaseSize = 100; 
+    const gridScale = newHeight / minimumImageHeight; 
+    let newGridSize = Math.max(gridBaseSize * gridScale, 100);
+
+    gridOverlay.css({
+      backgroundSize: `${newGridSize}px ${newGridSize}px`
+    });
+
     wrapper.scrollLeft(newScrollLeft);
     wrapper.scrollTop(newScrollTop);
   // }
@@ -2059,4 +2102,3 @@ window.imagesDelete = async (imageIds) => {
     };
 }
 
-
diff --git a/assets/simple-boxes.css b/assets/simple-boxes.css
@@ -12,10 +12,40 @@
 
 .simpleBoxesImageAndCanvasWrapper{
   position: relative;
+  display: inline-block;
   top: 0;
   left: 0;
 }
 
+#annotationOuterWrapper{
+  position: relative;
+  display: inline-block;
+  top: 0;
+  left: 0;
+}
+
+#gtColumnLeft{
+  position: relative;
+}
+
+#gtColumnRight{
+  position: relative;
+}
+
+.gridOverlay {
+  display: none; 
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Makes grid non-interactive */
+  background-size: 100px 100px;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 1px, transparent 1px),
+                    linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
+}
+
 #imageToBox{
   height: 455px;
   position: absolute;

diff --git a/assets/simple-boxes.js b/assets/simple-boxes.js
@@ -1028,6 +1028,19 @@ $( document ).ready(function() {
     }
   });
 
+  $('body').on('change', '.gridswitch', async (e) => {      
+      const gridOverlays = document.querySelectorAll('.gridOverlay');
+      if (e.target.checked) {
+        gridOverlays.forEach(gridOverlay => {
+          gridOverlay.style.display = 'block';
+      });
+      } else {
+        gridOverlays.forEach(gridOverlay => {
+          gridOverlay.style.display = 'none';
+      }); 
+      }   
+  });
+
   // resize of source image
 
   // Pan and zoom of source image

diff --git a/assets/styles/style.css b/assets/styles/style.css
@@ -168,8 +168,31 @@ tr:hover .tag-edit-button {
 
 #ldBoxLeft{
   position: relative;
+  display: inline-block;
+  top: 0;
+  left: 0;
+}
+
+
+#ldBoxRight{
+  position: relative;
+  display: inline-block;
+  top: 0;
+  left: 0;
+}
+
+.gridOverlay {
+  display: none; 
+  z-index: 1000;
+  position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Makes grid non-interactive */
+  background-size: 100px 100px;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 1px, transparent 1px),
+                    linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
 }
 
 #imageToLineDraw{

diff --git a/views/layouts/layout.ejs b/views/layouts/layout.ejs
@@ -140,7 +140,7 @@
             <div class="btn-group">
               <button id="annotationZoomIn" class="btn btn-light"><i class="bi-zoom-in"></i></button>
               <button id="zoomLevel" class="btn btn-light">0%</button>
-              <button id="annotationZoomOut" class="btn btn-light"><i class="bi-zoom-out"></i></button>
+              <button id="annotationZoomOut" class="btn btn-light"><i class="bi-zoom-out"></i></button>              
               <button
                 type="button"
                 class="btn btn-light"
@@ -152,6 +152,12 @@
                 data-toggle="popover">
                 <i class="bi-info-circle"></i>
               </button>
+              <button class="btn btn-light">
+                <div class="grid-switch form-check form-switch align-items-center justify-content-center">
+                  <input class="form-check-input gridswitch" type="checkbox" id="switch" >
+                  <label class = "form-check-label" id="annotationswitch" for="annotationswitch">Grid</label>
+                </div>
+              </button>
 
             </div>
             <button id="annotationDoneButton" class="btn btn-primary">Done <i class="bi-chevron-right"></i></button>
@@ -187,6 +193,12 @@
                   data-toggle="popover">
                   <i class="bi-info-circle"></i>
                 </button>
+                <button class="btn btn-light">
+                  <div class="grid-switch form-check form-switch align-items-center justify-content-center">
+                    <input class="form-check-input gridswitch" type="checkbox" id="gtswitch1" >
+                    <label class = "form-check-label" id="gtswitch1" for="gtswitch1">Grid</label>
+                  </div>
+                </button>
 
               </div>
               <button class="gtDoneButton btn btn-primary">Done <i class="bi-chevron-right"></i></button>
@@ -224,6 +236,12 @@
                   data-toggle="popover">
                   <i class="bi-info-circle"></i>
                 </button>
+                <button class="btn btn-light">
+                  <div class="grid-switch form-check form-switch align-items-center justify-content-center">
+                    <input class="form-check-input gridswitch" type="checkbox" id="gtswitch2" >
+                    <label class = "form-check-label" id="gtswitch2" for="gtswitch2">Grid</label>
+                  </div>
+                </button>
 
 
               </div>
@@ -265,16 +283,26 @@
                 <button id="divisionBack" <% if(!backEnabled) { %>disabled<% } %>  class="btn btn-primary">
                   <i class="bi-chevron-left"></i>
                 </button>
-                <div id="lineOpenerWrapper" class="btn-group">
-                  <button id="lineOpener" class="btn btn-light">
-                    <i class="bi-slash-square"></i>
-                  </button>
-                </div>
-                <div id="lineCloserWrapper" class="btn-group">
-                  <button id="lineCloser" class="btn btn-light active">
-                    <i class="bi-slash-square"></i>
+                <div class="justify-content-center d-flex flex-row">
+                  <div id="lineOpenerWrapper" class="btn-group">
+                    <button id="lineOpener" class="btn btn-light">
+                      <i class="bi-slash-square"></i>
+                    </button>
+                  </div>
+                
+                  <div id="lineCloserWrapper" class="btn-group">
+                    <button id="lineCloser" class="btn btn-light active">
+                      <i class="bi-slash-square"></i>
+                    </button>
+                  </div>
+                  <button class="btn btn-light">
+                    <div class="grid-switch form-check form-switch align-items-center justify-content-center">
+                      <input class="form-check-input gridswitch" type="checkbox" id="dlswitch" >
+                      <label class = "form-check-label" id="dlswitch" for="dlswitch">Grid</label>
+                    </div>
                   </button>
                 </div>
+                
                 <button id="divisionDone" class="btn btn-primary">
                   Done <i class="bi-chevron-right"></i>
                 </button>

diff --git a/views/pages/annotations.ejs b/views/pages/annotations.ejs
@@ -21,10 +21,11 @@
       </div>
 
   </div>
-    <div id="annotationOuterWrapper">    
-      <div id="annotationInnerWrapper">
+    <div id="annotationOuterWrapper">         
+      <div id="annotationInnerWrapper">        
         <div class="simpleBoxesImageAndCanvasWrapper">
-        <img id="imageToAnnotate" src="/uploads/<%=imageData.id %>" />
+          <div class="gridOverlay"></div> 
+          <img id="imageToAnnotate" src="/uploads/<%=imageData.id %>" />          
         </div>
       </div>
     </div>

diff --git a/views/pages/ground-truths.ejs b/views/pages/ground-truths.ejs
@@ -32,17 +32,19 @@
 
   <div class="sbsRow">
 
-    <div   id="gtColumnLeft" style="width: 100%; float: clear; text-align: center;">
+    <div   id="gtColumnLeft" style="width: 100%; float: clear; text-align: center;">      
       <div id="scrollBoxLeft" class="groundTruthInnerWrapper">
         <div class="simpleBoxesImageAndCanvasWrapper">
-        <img class = "imageToGroundTruth" id="imageToGroundTruth" src="/uploads/<%=imageData.id %>"/>
+          <div class="gridOverlay"></div> 
+          <img class = "imageToGroundTruth" id="imageToGroundTruth" src="/uploads/<%=imageData.id %>"/>
         </div>
       </div>
     </div>
 
-    <div  id="gtColumnRight" style="width: 49.8%; float: right; text-align: left;">
+    <div  id="gtColumnRight" style="width: 49.8%; float: right; text-align: left;">      
       <div id="scrollBoxRight" class="groundTruthInnerWrapperReadOnly">
         <div class="simpleBoxesImageAndCanvasWrapper">
+          <div class="gridOverlay"></div> 
         <img class = "imageToGroundTruth" id="imageComparison" src="/uploads/<%=imageData.id %>/?right=true">
         </div>
       </div>

diff --git a/views/pages/line-divisions.ejs b/views/pages/line-divisions.ejs
@@ -16,16 +16,18 @@
       />
     </div>
     <div style="clear: both; height: 1px;">&nbsp;</div>
-    <div class=""  id="ldColumnLeft" style="width: 49.8%; float: left; text-align: right;">
-      <div id="ldBoxLeft" class="ldBoxInnerWrapper">
-        <img id="imageToLineDraw" src="/uploads/<%=imageLeftId %>"/>
-      </div>
+    <div class=""  id="ldColumnLeft" style="width: 49.8%; float: left; text-align: right;">         
+        <div id="ldBoxLeft" class="ldBoxInnerWrapper">
+            <div class="gridOverlay"></div>   
+            <img id="imageToLineDraw" src="/uploads/<%=imageLeftId %>"/>
+        </div>
     </div>
 
-    <div class="" id="ldColumnRight" style="width: 49.8%; float: right; text-align: left;">
-      <div id="ldBoxRight" class="ldBoxInnerWrapper">
-        <img id="lineDrawNextImage" src="/uploads/<%=imageRightId %>">
-      </div>
+    <div class="" id="ldColumnRight" style="width: 49.8%; float: right; text-align: left;">        
+        <div id="ldBoxRight" class="ldBoxInnerWrapper">
+            <img id="lineDrawNextImage" src="/uploads/<%=imageRightId %>">
+            <div class="gridOverlay"></div> 
+        </div>
     </div>
 
     <div style="clear: both;  height: 1px;">&nbsp;</div>