From a6a46867222588b549281bde49315b333ffc958a Mon Sep 17 00:00:00 2001 From: FabriceKurmann Date: Wed, 26 Jun 2024 15:13:43 -0700 Subject: [PATCH 1/5] Horizontal and vertical image flipping --- static/js/main.js | 41 +++++++++++++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index 08a8474..992401d 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -241,7 +241,10 @@ function addScreenshot(screenshot) { value='${time_input_value}' />
- + + + +
@@ -250,8 +253,8 @@ function addScreenshot(screenshot) { document.querySelector('.screenshot-area').insertAdjacentHTML('beforeend', html); } -// Flip an image in the screenshot area by adding it the the canvas flipped horizontally. -function flipImage(screenshot_id) { +// Flip a screenshot by adding it the the canvas flipped horizontally or vertically. +function flipScreenshot(screenshot_id, axis='y') { // Find correct image, add to canvas to flip. let img = document.querySelector(`.screenshot[data-id="${screenshot_id}"] img`); @@ -260,14 +263,31 @@ function flipImage(screenshot_id) { canvas.height = img.naturalHeight; let context = canvas.getContext('2d'); - context.scale(-1, 1); - context.drawImage(img, -img.naturalWidth, 0); - // Draw the canvas to the image area. - img.src = canvas.toDataURL('image/jpeg'); + // Horizontal flip. + if (axis === 'y') { + context.scale(-1, 1); + context.drawImage(img, -img.naturalWidth, 0); - // Update image metadata and store flipped image. - window.shark.screenshots[screenshot_id]['flipped'] = !Boolean(window.shark.screenshots[screenshot_id]['flipped']); + // Draw the canvas to the image area. + img.src = canvas.toDataURL('image/jpeg'); + + // Update image metadata. + window.shark.screenshots[screenshot_id]['flipped_horizontally'] = !Boolean(window.shark.screenshots[screenshot_id]['flipped_horizontally']); + } + + // Vertical flip. + if (axis === 'x') { + context.scale(1, -1); + context.drawImage(img, 0, -img.naturalHeight); + + // Draw the canvas to the image area. + img.src = canvas.toDataURL('image/jpeg'); + + // Update image metadata. + window.shark.screenshots[screenshot_id]['flipped_vertically'] = !Boolean(window.shark.screenshots[screenshot_id]['flipped_vertically']); + } + window.shark.screenshots[screenshot_id]['dataURL'] = canvas.toDataURL('image/jpeg'); } @@ -360,7 +380,8 @@ function takeVideoScreenshot(query, xPercent, yPercent, widthPercent, heightPerc 'time': time, 'dataURL': takeScreenshot(video, x, y, width, height, format), 'edited_name': false, - 'flipped': false, + 'flipped_horizontally': false, + 'flipped_vertically': false, }; } From f06a9761360baf82f3e3c702ade00333c01c305f Mon Sep 17 00:00:00 2001 From: FabriceKurmann Date: Wed, 26 Jun 2024 15:30:18 -0700 Subject: [PATCH 2/5] Delete button with new screenshot counter --- static/js/main.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/static/js/main.js b/static/js/main.js index 992401d..531a025 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -5,6 +5,8 @@ window.shark = window.shark || {}; window.shark.info = window.shark.info || {}; window.shark.screenshots = window.shark.screenshots || {}; +var screenshot_counter = 0; + function goToLoadingScreen() { document.querySelector('.file-upload-screen').style.display = 'none'; document.querySelector('.loading-screen').style.display = 'initial'; @@ -246,6 +248,9 @@ function addScreenshot(screenshot) { +
+ +
`; @@ -358,7 +363,10 @@ function takeVideoScreenshot(query, xPercent, yPercent, widthPercent, heightPerc let id = randomHex(); - let index_string = String(Object.keys(window.shark.screenshots).length).padStart(3, '0'); + // Get screenshot counter value and update counter. + let index_string = String(screenshot_counter).padStart(3, '0'); + screenshot_counter += 1; + let name = window.shark.info['video'].name + "_" + index_string; let time = undefined; @@ -396,6 +404,15 @@ function takeScreenshot(source, x, y, width, height, format = 'image/jpeg') { return canvas.toDataURL(format); } +// Delete a screenshot, it is no longer displayed or saved. +function delete_screenshot(screenshot_id) { + // Find screenshot area to remove. + let screenshot_area = document.querySelector(`.screenshot[data-id="${screenshot_id}"]`); + screenshot_area.remove(); + // Update screenshots metadata to remove flipped image. + delete window.shark.screenshots[screenshot_id]; +} + // Inputs don't have a timezone aware type. // Instead we use datetime-local (which is always local). // But to format to set it's input is a bit tricky to set (while getting the timezone correct). From 545ea8827fab2f8e4d7e12e13a7cd79b7cde4c16 Mon Sep 17 00:00:00 2001 From: FabriceKurmann Date: Wed, 26 Jun 2024 18:36:35 -0700 Subject: [PATCH 3/5] Addressing comments --- static/js/main.js | 50 ++++++++++++++++++++--------------------------- 1 file changed, 21 insertions(+), 29 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index 531a025..1185109 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -4,8 +4,7 @@ window.shark = window.shark || {}; window.shark.info = window.shark.info || {}; window.shark.screenshots = window.shark.screenshots || {}; - -var screenshot_counter = 0; +window.shark.screenshot_counter = 0; function goToLoadingScreen() { document.querySelector('.file-upload-screen').style.display = 'none'; @@ -244,12 +243,12 @@ function addScreenshot(screenshot) {
- - + +
- +
@@ -259,7 +258,7 @@ function addScreenshot(screenshot) { } // Flip a screenshot by adding it the the canvas flipped horizontally or vertically. -function flipScreenshot(screenshot_id, axis='y') { +function flipScreenshot(screenshot_id, axis) { // Find correct image, add to canvas to flip. let img = document.querySelector(`.screenshot[data-id="${screenshot_id}"] img`); @@ -268,31 +267,25 @@ function flipScreenshot(screenshot_id, axis='y') { canvas.height = img.naturalHeight; let context = canvas.getContext('2d'); - - // Horizontal flip. + + let direction = '' if (axis === 'y') { + direction = 'flipped_horizontally'; context.scale(-1, 1); context.drawImage(img, -img.naturalWidth, 0); - - // Draw the canvas to the image area. - img.src = canvas.toDataURL('image/jpeg'); - - // Update image metadata. - window.shark.screenshots[screenshot_id]['flipped_horizontally'] = !Boolean(window.shark.screenshots[screenshot_id]['flipped_horizontally']); - } - - // Vertical flip. - if (axis === 'x') { + } else if (axis === 'x') { + direction = 'flipped_vertically'; context.scale(1, -1); context.drawImage(img, 0, -img.naturalHeight); + } else { + throw("Invalid flip axis.") + } - // Draw the canvas to the image area. - img.src = canvas.toDataURL('image/jpeg'); + // Draw the canvas to the image area. + img.src = canvas.toDataURL('image/jpeg'); - // Update image metadata. - window.shark.screenshots[screenshot_id]['flipped_vertically'] = !Boolean(window.shark.screenshots[screenshot_id]['flipped_vertically']); - } - + // Update image metadata. + window.shark.screenshots[screenshot_id][direction] = !Boolean(window.shark.screenshots[screenshot_id][direction]); window.shark.screenshots[screenshot_id]['dataURL'] = canvas.toDataURL('image/jpeg'); } @@ -364,8 +357,8 @@ function takeVideoScreenshot(query, xPercent, yPercent, widthPercent, heightPerc let id = randomHex(); // Get screenshot counter value and update counter. - let index_string = String(screenshot_counter).padStart(3, '0'); - screenshot_counter += 1; + let index_string = String(window.shark.screenshot_counter).padStart(3, '0'); + window.shark.screenshot_counter ++; let name = window.shark.info['video'].name + "_" + index_string; @@ -404,12 +397,11 @@ function takeScreenshot(source, x, y, width, height, format = 'image/jpeg') { return canvas.toDataURL(format); } -// Delete a screenshot, it is no longer displayed or saved. -function delete_screenshot(screenshot_id) { +function deleteScreenshot(screenshot_id) { // Find screenshot area to remove. let screenshot_area = document.querySelector(`.screenshot[data-id="${screenshot_id}"]`); screenshot_area.remove(); - // Update screenshots metadata to remove flipped image. + delete window.shark.screenshots[screenshot_id]; } From c5d08334e8c8ff241dcca22962bf39cc386bd04c Mon Sep 17 00:00:00 2001 From: FabriceKurmann Date: Thu, 27 Jun 2024 07:00:54 -0700 Subject: [PATCH 4/5] Addressing further comments --- static/js/main.js | 48 +++++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index 1185109..d3f77dd 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -4,7 +4,7 @@ window.shark = window.shark || {}; window.shark.info = window.shark.info || {}; window.shark.screenshots = window.shark.screenshots || {}; -window.shark.screenshot_counter = 0; +window.shark.info['screenshot_counter'] = 0; function goToLoadingScreen() { document.querySelector('.file-upload-screen').style.display = 'none'; @@ -243,8 +243,8 @@ function addScreenshot(screenshot) {
- - + +
@@ -258,30 +258,29 @@ function addScreenshot(screenshot) { } // Flip a screenshot by adding it the the canvas flipped horizontally or vertically. -function flipScreenshot(screenshot_id, axis) { - // Find correct image, add to canvas to flip. +function flipScreenshot(screenshot_id, flip_vertical) { let img = document.querySelector(`.screenshot[data-id="${screenshot_id}"] img`); + // Default values for horizontal flip; + let direction = 'flipped_horizontally'; + let scale_x = -1; + let scale_y = 1; + let draw_x = -img.naturalWidth; + let draw_y = 0; + + if (flip_vertical) { + direction = 'flipped_vertically'; + scale_x = 1, scale_y = -1; + draw_x = 0, draw_y = -img.naturalHeight; + } + let canvas = document.createElement('canvas'); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; let context = canvas.getContext('2d'); - - let direction = '' - if (axis === 'y') { - direction = 'flipped_horizontally'; - context.scale(-1, 1); - context.drawImage(img, -img.naturalWidth, 0); - } else if (axis === 'x') { - direction = 'flipped_vertically'; - context.scale(1, -1); - context.drawImage(img, 0, -img.naturalHeight); - } else { - throw("Invalid flip axis.") - } - - // Draw the canvas to the image area. + context.scale(scale_x, scale_y); + context.drawImage(img, draw_x, draw_y); img.src = canvas.toDataURL('image/jpeg'); // Update image metadata. @@ -357,8 +356,8 @@ function takeVideoScreenshot(query, xPercent, yPercent, widthPercent, heightPerc let id = randomHex(); // Get screenshot counter value and update counter. - let index_string = String(window.shark.screenshot_counter).padStart(3, '0'); - window.shark.screenshot_counter ++; + let index_string = String(window.shark.info['screenshot_counter']).padStart(3, '0'); + window.shark.info['screenshot_counter']++; let name = window.shark.info['video'].name + "_" + index_string; @@ -399,9 +398,8 @@ function takeScreenshot(source, x, y, width, height, format = 'image/jpeg') { function deleteScreenshot(screenshot_id) { // Find screenshot area to remove. - let screenshot_area = document.querySelector(`.screenshot[data-id="${screenshot_id}"]`); - screenshot_area.remove(); - + document.querySelector(`.screenshot[data-id="${screenshot_id}"]`).remove(); + delete window.shark.screenshots[screenshot_id]; } From 427569f1d90fefd393d1324c2e0d4acb9570d9d1 Mon Sep 17 00:00:00 2001 From: FabriceKurmann Date: Thu, 27 Jun 2024 08:12:20 -0700 Subject: [PATCH 5/5] Addressing further comments --- static/js/main.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index d3f77dd..652ef5d 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -270,8 +270,10 @@ function flipScreenshot(screenshot_id, flip_vertical) { if (flip_vertical) { direction = 'flipped_vertically'; - scale_x = 1, scale_y = -1; - draw_x = 0, draw_y = -img.naturalHeight; + scale_x = 1; + scale_y = -1; + draw_x = 0; + draw_y = -img.naturalHeight; } let canvas = document.createElement('canvas'); @@ -397,9 +399,7 @@ function takeScreenshot(source, x, y, width, height, format = 'image/jpeg') { } function deleteScreenshot(screenshot_id) { - // Find screenshot area to remove. document.querySelector(`.screenshot[data-id="${screenshot_id}"]`).remove(); - delete window.shark.screenshots[screenshot_id]; }