diff --git a/assets/js/main.js b/assets/js/main.js index cc89a71..93140d6 100644 --- 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 index 1790c7d..a079e89 100644 --- 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 index 1d073d6..9f4c400 100644 --- 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 index 11756c5..77d39c3 100644 --- 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 index 732edf6..ff8b82a 100644 --- a/views/layouts/layout.ejs +++ b/views/layouts/layout.ejs @@ -140,7 +140,7 @@
- + +
@@ -187,6 +193,12 @@ data-toggle="popover"> + @@ -224,6 +236,12 @@ data-toggle="popover"> + @@ -265,16 +283,26 @@ -
- -
-
- +
+ +
+ +
+ + diff --git a/views/pages/annotations.ejs b/views/pages/annotations.ejs index 06f21d5..f99ef1f 100644 --- a/views/pages/annotations.ejs +++ b/views/pages/annotations.ejs @@ -21,10 +21,11 @@ -
-
+
+
- +
+
diff --git a/views/pages/ground-truths.ejs b/views/pages/ground-truths.ejs index 994ae1b..4559e7b 100644 --- a/views/pages/ground-truths.ejs +++ b/views/pages/ground-truths.ejs @@ -32,17 +32,19 @@
-
+
- +
+
-
+
+
diff --git a/views/pages/line-divisions.ejs b/views/pages/line-divisions.ejs index 4a84793..1aff43a 100644 --- a/views/pages/line-divisions.ejs +++ b/views/pages/line-divisions.ejs @@ -16,16 +16,18 @@ />
 
-
-
- -
+
+
+
+ +
-
-
- -
+
+
+ +
+