diff --git a/src/reducer/metadata.js b/src/reducer/metadata.js index 933bf04..ebffd92 100644 --- a/src/reducer/metadata.js +++ b/src/reducer/metadata.js @@ -2,7 +2,7 @@ import {createSlice} from '@reduxjs/toolkit' import {initFrameData, updateFrameData, getFrameData, initAnnotationData, updateAnnotationData, getAnnotationData, initColumnData, setMedia, initMedia} from '../processing/actions' -const initialState = {horizontal_res: 0, vertical_res: 0, frame_rate: 1, media_type: "in_video", total_frames: 0, skip_value: 1} +const initialState = {horizontal_res: 0, vertical_res: 0, frame_rate: 1, media_type: "in_video", total_frames: 0, skip_value: null} const metadataSlice = createSlice({ name: 'metadata', @@ -20,13 +20,13 @@ const metadataSlice = createSlice({ state.vertical_res = payload.payload.vertical_res }, setFrameRate(state, payload){ - // When the frame rate is changed, we first calculate the current frame rate and then multiply the total frames by the ratio of the new frame rate to the old frame rate - if (state.media_type != "in_image") { // only for videos - var curr_framerate = JSON.parse(JSON.stringify(state))['frame_rate'] - state.total_frames = state.total_frames / curr_framerate - state.total_frames = state.total_frames * payload.payload.frame_rate - state.frame_rate = payload.payload.frame_rate - } + // When the frame rate is changed, we first calculate the current frame rate and then multiply the total frames by the ratio of the new frame rate to the old frame rate + if (state.media_type != "in_image") { // only for videos + // var curr_framerate = JSON.parse(JSON.stringify(state))['frame_rate'] + // state.total_frames = state.total_frames / curr_framerate + // state.total_frames = state.total_frames * payload.payload.frame_rate + state.frame_rate = payload.payload.frame_rate + } }, setMediaType(state, payload){ state.media_type = payload.payload.media_type diff --git a/src/ui_elements/Components/nav_bar.js b/src/ui_elements/Components/nav_bar.js index 30c7bde..ceae5d4 100755 --- a/src/ui_elements/Components/nav_bar.js +++ b/src/ui_elements/Components/nav_bar.js @@ -10,226 +10,117 @@ import Form from 'react-bootstrap/Form' import Dropdown from 'react-bootstrap/Dropdown' import { ButtonGroup } from 'react-bootstrap'; import Modal from 'react-bootstrap/Modal' +import Col from 'react-bootstrap/Col' +import InputGroup from 'react-bootstrap/InputGroup' import "react-datepicker/dist/react-datepicker.css"; import Instructions from './instructions'; -import { downloadFileJSON} from '../../processing/download'; +import { downloadFileJSON } from '../../processing/download'; import ExportingAnnotation from '../../processing/exporting_annotation'; import ProcessVideo from './process_video'; -import store from '../../store' -import {INPUT_IMAGE, INPUT_VIDEO} from '../../static_data/const' +import store from '../../store' +import { INPUT_IMAGE, INPUT_VIDEO } from '../../static_data/const' import { useSelector } from "react-redux"; +import UploadModal from './upload_modal'; -import {initFrameData, updateFrameData, getFrameData, initAnnotationData, updateAnnotationData, getAnnotationData, initColumnData, setMedia, initMedia, setFrameRate, setMediaType, setSkipValue, getMetaData, togglePlay} from '../../processing/actions' +import { initFrameData, updateFrameData, getFrameData, initAnnotationData, updateAnnotationData, getAnnotationData, initColumnData, setMedia, initMedia, setFrameRate, setMediaType, setSkipValue, getMetaData, togglePlay, setTotalFrames } from '../../processing/actions' +import { init } from '../../reducer/frame_data'; initMedia(1) -export default function CustomNavBar(props){ +export default function CustomNavBar(props) { const [show, setShow] = useState(false); const [uploadShow, setUploadShow] = useState(true); const [videoFormat, setVideoFormat] = useState(INPUT_VIDEO) const [process, setProcess] = useState(false) - const [columnLoad, setColumnLoad] = useState(false) - const [numStrems, setNumStreams] = useState(1) const [playText, setPlayText] = useState(false) + const [firstUpload, setFirstUpload] = useState(false) + const [stateFrameRate, setStateFrameRate] = useState(null) + const [stateSkipValue, setStateSkipValue] = useState(null) + + const play_redux = useSelector(state => state.play_status.play) const handleClose = () => setShow(false); const handleShow = () => setShow(true); - const handleUploadClose = () => {setUploadShow(false); setProcess(true)} - const handleUploadShow = () => { - setUploadShow(true) + const handleUploadToggle = () => { + setUploadShow(!uploadShow) } - const play_redux = useSelector(state => state.play_status.play) + const handleDownloadJSON = () => { var converted_annot = new ExportingAnnotation(store.getState().frame_data.data, props.video_width, props.video_height, getMetaData(), store.getState().media_data.data[0]).get_frame_json() console.log(converted_annot) downloadFileJSON(converted_annot, getMetaData()) } - const handleVideoFormat = (type) => { - //TODO Make sure bug is resolved and simply have video format equal type - //type = parseInt(type) - if(type === INPUT_VIDEO){ - setVideoFormat(INPUT_VIDEO) - setMediaType(INPUT_VIDEO) - }else if (type === INPUT_IMAGE){ - setVideoFormat(INPUT_IMAGE) - setMediaType(INPUT_IMAGE) - }else { - alert("Wrong input detected - please report this bug.") - } - } - - const convertFileToURLBlob = (file) => { - return URL.createObjectURL(file) - } - - const handleMediaUpload = (event) => { - if(videoFormat == INPUT_VIDEO){ - setMedia(parseInt(event.target.id), event.target.files) - }else{ - setMedia(parseInt(event.target.id), event.target.files) - } - } - - const handleColumnUpload = (event) => { - var promise = downloadColumn(event) - promise.then(function (result) { - if(result['columns'] == undefined){ - alert("Error in processing columns. Please check the file and try again.") - return; - } - - if(result != null){ - setColumnLoad(true); - initColumnData(result) - }else{ - alert("Error in processing columns. Please check the file and try again.") - return; - } - }) - } - - const downloadColumn = (file) => { - return new Promise((resolve, reject) => { - var reader = new FileReader(); - reader.onload = function(e) { - resolve((JSON.parse(e.target.result))); - } - reader.readAsText(file.target.files[0]) - }) - } - - const handleStreamNumChange = (event) => { - setNumStreams(event.target.value) - initMedia(event.target.value) - } - - const generateUploadButtons = () => { - var uploadButtons = [] - for(var i = 0; i < numStrems; i++){ - let button_image = ( -
- {handleMediaUpload(event)}} /> - - ) - let button_video = ( -
- {handleMediaUpload(event)}} /> - - ) - if (videoFormat === INPUT_IMAGE){ - uploadButtons.push(button_image) - }else if (videoFormat === INPUT_VIDEO){ - uploadButtons.push(button_video) - } - } - return ( -
- { - uploadButtons.map((but, _) => { - return ( - but - ) - }) - } -
- ) - } const handlePlaying = (event) => { togglePlay() } useEffect(() => { - if (play_redux == false){ + if (play_redux == false) { setPlayText("Play") - }else { + } else { setPlayText("Pause") } }, [play_redux]) return (
- - - Instructions - - - - - - - - - Upload - - -
- {/*onClick and onBlur events are for the sole purpose to stop the eventKeys from firing off*/} -
- Media Format: - {handleVideoFormat(event.target.value)}} - defaultValue={videoFormat} - > - - - - - -
- Stream Num: {props.toggleKeyCheck(false)}} onBlur={(event) => {props.toggleKeyCheck(true)}} onChange={handleStreamNumChange}> -
- - { - generateUploadButtons() - } - -
- - -
- - - - Frame Rate: {props.toggleKeyCheck(false)}} onBlur={(event) => {props.toggleKeyCheck(true)}} onChange={(event) => {setFrameRate(event.target.value);}}> - - Skip Value: {setSkipValue(event.target.value)}}> - -
- - - - - - + + + Instructions + + + + + + + + AVAT
- {' '} + {' '} {' '} {' '} - Skip Value: {setSkipValue(event.target.value)}}> +
+ Skip Value + { setSkipValue(event.target.value) }} + onClick={props.toggleKeyCheck(false)} + onBlur={props.toggleKeyCheck(true)} + defaultValue={props.skip_value} + /> +
{' '} - + {' '} { - videoFormat === INPUT_VIDEO && + videoFormat === INPUT_VIDEO && } {' '} @@ -238,14 +129,14 @@ export default function CustomNavBar(props){ - {props.change_annotation_type("1")}}>Behavior Annotation - {props.change_annotation_type("2")}}>BoundingBox - {props.change_annotation_type("3")}}>Segmentation + { props.change_annotation_type("1") }}>Behavior Annotation + { props.change_annotation_type("2") }}>BoundingBox + { props.change_annotation_type("3") }}>Segmentation {/*{' '}*/}
- +
) } diff --git a/src/ui_elements/Components/upload_modal.js b/src/ui_elements/Components/upload_modal.js new file mode 100644 index 0000000..6a79efe --- /dev/null +++ b/src/ui_elements/Components/upload_modal.js @@ -0,0 +1,258 @@ +import React, { useEffect } from 'react'; +import { useState } from 'react'; +import "bootstrap/dist/css/bootstrap.min.css"; + +import Button from 'react-bootstrap/Button' +import { NavDropdown, NavLink } from 'react-bootstrap'; +import Form from 'react-bootstrap/Form' +import Modal from 'react-bootstrap/Modal' +import Col from 'react-bootstrap/Col' +import InputGroup from 'react-bootstrap/InputGroup' + +import "react-datepicker/dist/react-datepicker.css"; + +import { INPUT_IMAGE, INPUT_VIDEO } from '../../static_data/const' +import { useSelector } from "react-redux"; + +import { initFrameData, updateFrameData, getFrameData, initAnnotationData, updateAnnotationData, getAnnotationData, initColumnData, setMedia, initMedia, setFrameRate, setMediaType, setSkipValue, getMetaData, togglePlay, setTotalFrames } from '../../processing/actions' +import { init } from '../../reducer/frame_data'; +import media_data from '../../reducer/media_data'; + +export default function UploadModal(props){ + const [show, setShow] = useState(false); + + const [videoFormat, setVideoFormat] = useState(INPUT_VIDEO) + const [firstUpload, setFirstUpload] = useState(false) + const [stateFrameRate, setStateFrameRate] = useState(null) + const [stateSkipValue, setStateSkipValue] = useState(null) + const [stateColumnData, setStateColumnData] = useState(null) + const [uploadExistingAnnotation, setUploadExistingAnnotation] = useState(false) + + const frame_count = useSelector(state => state.metadata.total_frames) + const frame_rate = useSelector(state => state.metadata.frame_rate) + + const handleClose = () => setShow(false); + const handleShow = () => setShow(true); + const handleUpload = () => { + props.handleUploadToggle() + setSkipValue(parseInt(stateSkipValue)) + if(!firstUpload && !uploadExistingAnnotation){ + setFirstUpload(true) + let totalFrames = -1 + if(videoFormat === INPUT_VIDEO){ + setFrameRate(parseInt(stateFrameRate)) + totalFrames = parseInt(parseInt(stateFrameRate) * frame_count) + }else { + totalFrames = frame_count + } + setTotalFrames(totalFrames) + initFrameData(totalFrames) + initColumnData(stateColumnData) + initAnnotationData(totalFrames) + }else if(uploadExistingAnnotation){ + initColumnData(stateColumnData) + if(videoFormat === INPUT_VIDEO){ + let totalFrames = parseInt(parseInt(frame_rate) * parseInt(frame_count)) + setTotalFrames(totalFrames) + } + } + } + + const toggleUploadExistingAnnotation = (event) => { + props.handleOldAnnotation(event) + setUploadExistingAnnotation(true) + } + + const downloadColumn = (file) => { + return new Promise((resolve, reject) => { + var reader = new FileReader(); + reader.onload = function (e) { + resolve((JSON.parse(e.target.result))); + } + reader.readAsText(file.target.files[0]) + }) + } + + const handleVideoFormat = (type) => { + //TODO Make sure bug is resolved and simply have video format equal type + //type = parseInt(type) + if (type === INPUT_VIDEO) { + setVideoFormat(INPUT_VIDEO) + setMediaType(INPUT_VIDEO) + } else if (type === INPUT_IMAGE) { + setVideoFormat(INPUT_IMAGE) + setMediaType(INPUT_IMAGE) + } else { + alert("Wrong input detected - please report this bug.") + } + } + const handleMediaUpload = (event) => { + if (videoFormat == INPUT_VIDEO) { + setMedia(parseInt(event.target.id), event.target.files) + } else { + setMedia(parseInt(event.target.id), event.target.files) + } + } + + const handleColumnUpload = (event) => { + var promise = downloadColumn(event) + promise.then(function (result) { + if (result['columns'] == undefined) { + alert("Error in processing columns. Please check the file and try again.") + return; + } + + if (result != null) { + setStateColumnData(result) + } else { + alert("Error in processing columns. Please check the file and try again.") + return; + } + }) + } + + const generateUploadButtons = () => { + var uploadButtons = [] + for (var i = 0; i < 1; i++) { + let button_image = ( +
+ { handleMediaUpload(event) }} disabled={firstUpload} /> + + ) + let button_video = ( +
+ { handleMediaUpload(event) }} disabled={firstUpload} /> + + ) + if (videoFormat === INPUT_IMAGE) { + uploadButtons.push(button_image) + } else if (videoFormat === INPUT_VIDEO) { + uploadButtons.push(button_video) + } + } + return ( +
+ { + uploadButtons.map((but, _) => { + return ( + but + ) + }) + } +
+ ) + } + + return( + + + Upload + + +
+ {/*onClick and onBlur events are for the sole purpose to stop the eventKeys from firing off*/} + + + + { handleVideoFormat(event.target.value) }} + defaultValue={videoFormat} + htmlSize={2} + custom + disabled={firstUpload} + > + + + + + + { + generateUploadButtons() + } + + + + + + + + + + + + Frame Rate + + { setStateFrameRate(event.target.value ? event.target.value : 1); }} + disabled={(videoFormat === INPUT_IMAGE) || firstUpload} + isInvalid={(stateFrameRate == null || stateFrameRate == undefined || stateFrameRate == "") && videoFormat !== INPUT_IMAGE} + defaultValue={stateFrameRate} + /> + + Please enter a frame rate. + + + + + + + + + Skip Value + + { setStateSkipValue(event.target.value ? event.target.value : 1) }} + isInvalid={stateSkipValue == null || stateSkipValue == undefined || stateSkipValue == ""} + defaultValue={stateSkipValue} + /> + + Please enter a skip value. + + + + + + + + + + + + + + + + +
+ + + + + + ) +} \ No newline at end of file diff --git a/src/ui_elements/Pages/main_upload.js b/src/ui_elements/Pages/main_upload.js index e68fc51..68c9d47 100755 --- a/src/ui_elements/Pages/main_upload.js +++ b/src/ui_elements/Pages/main_upload.js @@ -33,7 +33,7 @@ import {initFrameData, updateFrameData, getFrameData, initMedia, initMetadata, setRes, setFrameRate, setTotalFrames, initColumnData, - initPlay} from '../../processing/actions' + initPlay, togglePlay} from '../../processing/actions' import { useSelector } from "react-redux"; // Data imports @@ -68,10 +68,10 @@ var play_button_text = "Play" var segmentation_flag = false; //TODO remove after fixing null exceptions -initAnnotationData(1) -initFrameData(1) +//initAnnotationData(1) +//initFrameData(1) initCurrentFrame(0) -initMetadata(scaling_factor_width, scaling_factor_height, 1, INPUT_VIDEO, 1) +initMetadata(scaling_factor_width, scaling_factor_height, null, INPUT_VIDEO, 1) initPlay() console.log(default_column) initColumnData( @@ -351,8 +351,8 @@ export default function MainUpload() { skip_frame_backward() }else if (event.key === "e"){ skip_frame_forward() - }else if(event.key === "c"){ - + }else if(event.key === "w"){ + togglePlay() } }