From b4ca6d1703bb6f23af3263e6b7e4d336801c1edf Mon Sep 17 00:00:00 2001 From: Pradeep Senthil Date: Sat, 16 Mar 2024 21:12:24 -0500 Subject: [PATCH] fix: exporting annotations and fixed frame saving bug --- src/processing/exporting_annotation.js | 8 +++-- src/ui_elements/Components/fabric_canvas.js | 37 +++++++++++---------- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/processing/exporting_annotation.js b/src/processing/exporting_annotation.js index 529f5a0..04970a4 100644 --- a/src/processing/exporting_annotation.js +++ b/src/processing/exporting_annotation.js @@ -28,13 +28,13 @@ export default class ExportingAnnotation{ for(var j = 0; j < frame_objects.length; j++){ try { console.log(frame_objects[j]) - if(frame_objects[j] == undefined){ + if(frame_objects[j] == undefined || frame_objects[j]['type'] !== "group"){ continue; } - if(frame_objects[j]['type'] !== "group"){ + if (frame_objects[j]._objects == undefined){ continue; } - if(frame_objects[j]._objects[0] === "rect"){ + if(frame_objects[j]._objects[0]['type'] === "rect"){ console.log(frame_objects[j]) var x = (frame_objects[j]['left'] / this.width) * this.metadata['horizontal_res'] var y = (frame_objects[j]['top'] / this.height) * this.metadata['vertical_res'] @@ -67,6 +67,8 @@ export default class ExportingAnnotation{ curr.push({"type": "segmentation", "points": points, "local_id": local_id, "fileName:": this.metadata['name'], "dataType": "video"}) } //curr.push({"type": "segmentation", "points": points, "local_id": local_id}) + }else{ + alert("Error in exporting annotation. Please check the annotation and try again.") } } catch (error) { console.log(error) diff --git a/src/ui_elements/Components/fabric_canvas.js b/src/ui_elements/Components/fabric_canvas.js index dca43e0..bd3090b 100755 --- a/src/ui_elements/Components/fabric_canvas.js +++ b/src/ui_elements/Components/fabric_canvas.js @@ -12,11 +12,13 @@ import {INPUT_IMAGE, INPUT_VIDEO} from '../../static_data/const' const fabric = require("fabric").fabric; -const canvasBackgroundUpdate = (currFrameData, inputType, image_url, scaling_factor_width, scaling_factor_height, fabricCanvas, video, playing=false) => { +const canvasBackgroundUpdate = (currFrameData, inputType, image_url, scaling_factor_width, scaling_factor_height, fabricCanvas, remove_obj=true) => { if(inputType == INPUT_IMAGE){ //This is for when images are uploaded var img = new Image() img.onload = function() { - fabricCanvas.clear() + if (remove_obj){ + fabricCanvas.clear(); + } if(currFrameData != undefined){ fabric.util.enlivenObjects(currFrameData, function (enlivenedObjects){ enlivenedObjects.forEach(function (obj, index) { @@ -37,7 +39,9 @@ const canvasBackgroundUpdate = (currFrameData, inputType, image_url, scaling_fac img.src = URL.createObjectURL(image_url) return; }else{ //This is for videos - fabricCanvas.remove(...fabricCanvas.getObjects()); + if (remove_obj){ + fabricCanvas.remove(...fabricCanvas.getObjects()); + } if(currFrameData != undefined){ fabric.util.enlivenObjects(currFrameData, function (enlivenedObjects){ enlivenedObjects.forEach(function (obj, index) { @@ -63,15 +67,14 @@ export default function FabricRender(props){ const play_redux = useSelector(state => state.play_status.play) const image_data = image_data_store['data'][props.stream_num] - var save_data = (frame_number) => { - console.log(fabricCanvas) + var save_data = (frame_number, reason) => { if(fabricCanvas){ + console.log('SAVING DATA FOR FRAME', frame_number, reason) updateFrameData(frame_number, fabricCanvas.getObjects()) } } useEffect(() => { - var temp_fabricCanvas = (new fabric.Canvas('c', { uniScaleTransform: true, uniformScaling: false, @@ -102,6 +105,7 @@ export default function FabricRender(props){ }); temp_fabricCanvas.on('mouse:down', function(opt) { + save_data(frameToUpdate, "mouse_down") var evt = opt.e; if (evt.altKey === true) { this.isDragging = true; @@ -111,6 +115,7 @@ export default function FabricRender(props){ } }); temp_fabricCanvas.on('mouse:move', function(opt) { + save_data(frameToUpdate, "mouse_move") if (this.isDragging) { var e = opt.e; var vpt = this.viewportTransform; @@ -122,9 +127,8 @@ export default function FabricRender(props){ } }); temp_fabricCanvas.on('mouse:up', function(opt) { + save_data(frameToUpdate, "mouse_up") if(this.objDrag){ - console.log("UPDATED DATA BACKGROUND") - save_data() this.objDrag = false; } this.setViewportTransform(this.viewportTransform); @@ -143,20 +147,18 @@ export default function FabricRender(props){ setFabricCanvas(temp_fabricCanvas) }, []); - - useEffect(() => { if(fabricCanvas){ - save_data(frameToUpdate) + save_data(frameToUpdate, "frame_change") setFrameToUpdate(currframe_redux) var video = document.getElementsByTagName('video')[props.stream_num] if(upload == true){ video.currentTime = (video.duration * ((currframe_redux+1)/metadata_redux['total_frames'])) } if(metadata_redux['media_type'] == INPUT_VIDEO){ - canvasBackgroundUpdate(getFrameData(currframe_redux), INPUT_VIDEO, image_data[0], props.scaling_factor_width, props.scaling_factor_height, fabricCanvas,video,play_redux) + canvasBackgroundUpdate(getFrameData(currframe_redux), INPUT_VIDEO, image_data[0], props.scaling_factor_width, props.scaling_factor_height, fabricCanvas) }else if (metadata_redux['media_type'] == INPUT_IMAGE){ - canvasBackgroundUpdate(getFrameData(currframe_redux), INPUT_IMAGE, image_data[currframe_redux], props.scaling_factor_width, props.scaling_factor_height, fabricCanvas,play_redux) + canvasBackgroundUpdate(getFrameData(currframe_redux), INPUT_IMAGE, image_data[currframe_redux], props.scaling_factor_width, props.scaling_factor_height, fabricCanvas) } } }, [currFrame]) @@ -167,7 +169,7 @@ export default function FabricRender(props){ } var video = document.getElementsByTagName('video')[props.stream_num] if(play_redux){ - save_data(frameToUpdate) + save_data(frameToUpdate, "play") video.play() fabric.util.requestAnimFrame(function renderLoop() { fabricCanvas.renderAll(); @@ -185,8 +187,9 @@ export default function FabricRender(props){ useEffect(() => { // We want to redraw when a annotation is added or removed. Unfortunately this also causes a redraw when the current frame is changed. // This is not ideal, but it is a good enough solution for now. This should NOT save the data. + if(fabricCanvas){ - canvasBackgroundUpdate(getFrameData(currframe_redux), metadata_redux['media_type'], image_data[currframe_redux], props.scaling_factor_width, props.scaling_factor_height, fabricCanvas, play_redux) + canvasBackgroundUpdate(getFrameData(currframe_redux), metadata_redux['media_type'], image_data[currframe_redux], props.scaling_factor_width, props.scaling_factor_height, fabricCanvas) } }, [frame_redux]) @@ -215,14 +218,12 @@ export default function FabricRender(props){ video.width = video.videoWidth video.height = video.videoHeight fabricCanvas.setBackgroundImage(new_vid); - console.log(new_vid) - console.log(props.scaling_factor_width / video.videoWidth, props.scaling_factor_height / video.videoHeight) fabricCanvas.renderAll(); } setUpload(true) } }else if(metadata_redux['media_type'] == INPUT_IMAGE){ - canvasBackgroundUpdate(getFrameData(currframe_redux), INPUT_IMAGE, image_data[currframe_redux], props.scaling_factor_width, props.scaling_factor_height, fabricCanvas,play_redux) + canvasBackgroundUpdate(getFrameData(currframe_redux), INPUT_IMAGE, image_data[currframe_redux], props.scaling_factor_width, props.scaling_factor_height, fabricCanvas) } } }