added download and upload funcs

sahirgomez1 · Jun 28, 2021 · 6591597 · 6591597
1 parent 0ffc976
commit 6591597
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 25 deletions.
diff --git a/src/components/AnnotationView.js b/src/components/AnnotationView.js
@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { Dropdown, Button, ButtonGroup } from 'react-bootstrap';
 import ReactPlayer from 'react-player';
 import EnvironmentContainer from './EnvironmentContainer';
+import { getFixedNumber } from '../utils/MathUtils';
 import FormattedTime from '../components/videoPlayer/FormattedTime';
 import { useVideoStore } from '../stores/VideoStore';
 import { useAnnotationStore } from '../stores/AnnotationStore';
@@ -64,6 +65,7 @@ const AnnotationView = ({camPosition, objScale}) => {
     }
 
     const handleSeekMouseUp = e => {
+
       handleSeekingtoFalse()
       player.current.seekTo(parseFloat(e.target.value))
       findAnnotation(parseFloat(e.target.value))

diff --git a/src/components/EnvironmentContainer.js b/src/components/EnvironmentContainer.js
@@ -14,7 +14,7 @@ const Banana = ({camPosition, ...props}) => {
     const group = useRef();
     const object = useRef();
 
-    const { objectSelected, objPosition, objRotation, handleTranslation, handleRotation } = useObjectStore();
+    const { objectSelected, objPosition, objRotation, objScale, handleTranslation, handleRotation } = useObjectStore();
     const videoState = useVideoStore()
     const { addAnnotation } = useAnnotationStore()
 
@@ -28,7 +28,7 @@ const Banana = ({camPosition, ...props}) => {
     const rotation = Object.values(objRotation)
 
     const handleKeys = useCallback((e) => {
-      if (!e.shiftKey || !e.ctrKey) {
+      if (!e.shiftKey || !e.ctrlKey) {
         handleRotation(object.current.rotation)
       } return
     }, [handleRotation]); 
@@ -84,7 +84,7 @@ const Banana = ({camPosition, ...props}) => {
               ref={object}
               geometry={nodes.Node.geometry}
               material={materials.material_0}
-              scale={props.objScale}
+              scale={objScale}
               position={position} 
               rotation={rotation}
               onPointerUp={(e) => handleTranslation(object.current.position) }
@@ -96,8 +96,8 @@ const Banana = ({camPosition, ...props}) => {
           castShadow 
           position={[0, 0, -0.5]} 
           onClick={annotateFrame}
-          onPointerOver={(event) => setHover(true)}
-          onPointerOut={(event) => setHover(false)}
+          onPointerOver={(e) => setHover(true)}
+          onPointerOut={(e) => setHover(false)}
         >
             <sphereBufferGeometry args={[0.05, 64, 64]} />
             <meshPhysicalMaterial color={'purple'} clearcoat={1} clearcoatRoughness={0} />
@@ -120,14 +120,14 @@ const Loader = () => {
   return <Html center> Loading... </Html>
 }
 
-const EnvironmentContainer = ({position, ...props}) => {
+const EnvironmentContainer = ({position}) => {
 
     return (
         <>
           <Canvas shadows>   
             <ambientLight intensity={0.5} />
             <Suspense fallback={<Loader/>}>
-              <Banana camPosition={position} objScale={props.objScale}/>
+              <Banana camPosition={position}/>
               <Environment preset="lobby" />                
             </Suspense>
             <axesHelper />      

diff --git a/src/components/OutputContainer.js b/src/components/OutputContainer.js
@@ -1,24 +1,78 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Container, Row, Col, Button } from "react-bootstrap";
 import { useAnnotationStore } from '../stores/AnnotationStore';
 
 const OutputContainer = () => {
 
-  const { outputAnnotation } = useAnnotationStore()
-  const outputJSON = JSON.stringify(outputAnnotation);
+  const inputFile = useRef()
+
+  const annotationStore = useAnnotationStore()
+  const outputJSON = JSON.stringify(annotationStore.outputAnnotation);
+
+  const openFile = (e) => {
+    const fileObj = e.target.files[0];
+    const reader = new FileReader();      
+    reader.onload = (e) => {
+      const fileContents = e.target.result;
+      annotationStore.setAnnotationsFromFile(JSON.parse(fileContents))
+    }
+    if (fileObj) reader.readAsText(fileObj);
+    else return  
+  }
+
+  const upload = (e) => {
+  	e.preventDefault();
+    inputFile.current.click()
+  }
 
     return (
       <Container fluid="md" className="mt-2">
-        <Row className="section-wrapper">
+        <Row className="section-wrapper justify-content-center">
           <Col md="10">
             <div className="output">
               <code>Output: </code>
               <br/>
               <code>{outputJSON}</code>       
             </div>
           </Col>
-          <Col md="2">
-            <Button size="sm" variant="light">Edit</Button> <Button size="sm" variant="dark">Generate</Button>
+          <Col md="2" className="align-items-center">
+            <Row className="text-center mt-2">
+              <Button size="sm" variant="light">Edit</Button>{" "}
+            </Row>
+            <hr/>
+            <Row className="text-center mt-2">
+              <h5>Annotations</h5>
+              <Col>
+                <Button 
+                  size="sm" 
+                  variant="success"
+                  href={`data:text/json;charset=utf-8,${encodeURIComponent( JSON.stringify(annotationStore.outputAnnotation, null, 4))}`}
+                  download="3Dannotation.json"
+                >
+                  Download
+                </Button>
+              </Col>
+              <Col>
+                <Button 
+                  size="sm" 
+                  variant="primary"
+                  className="px-3" 
+                  onClick={upload}
+                >
+                    Upload
+                </Button>
+
+                <input 
+                  type="file" 
+                  name="file" 
+                  ref={inputFile}
+                  style={{display: "none"}}
+                  multiple={false}
+                  accept=".json,application/json"
+                  onChange={openFile} />    
+
+              </Col>
+            </Row>
           </Col>
         </Row>
       </Container>

diff --git a/src/components/TopSection.js b/src/components/TopSection.js
@@ -7,16 +7,14 @@ import AnnotationView from './AnnotationView';
 const TopSection = () => {
 
     const [camPosition, setCamPosition] = useState({ xCamPos: 5, yCamPos:5, zCamPos:8, fov:4 })
-    const [objScale, setObjScale] = useState(3)
-
-    const { objectSelected, defaultObjects, handleSelectObject, objPosition, objRotation, handleTranslation, handleRotation } = useObjectStore()
+    const { objectSelected, defaultObjects, handleSelectObject, objPosition, objRotation, objScale, handleTranslation, handleRotation, setObjScale } = useObjectStore()
     const { url, setVideoOnScene } = useVideoStore()
 
     const handleChangeCam = e => {
       const { name, value } = e.target;
       setCamPosition({ ...camPosition, [name]: parseFloat(value) })
     };
-    const handleChangeObj = e => {
+    const handleObjPosition = e => {
       const { name, value } = e.target;
       const newObjPosition = { ...objPosition, [name]: parseFloat(value) }
       handleTranslation({...newObjPosition})
@@ -155,7 +153,7 @@ const TopSection = () => {
                                     name="x"
                                     step="0.05"
                                     value={objPosition.x || 0}
-                                    onChange={handleChangeObj}     
+                                    onChange={handleObjPosition}     
                                   />
                                 </InputGroup>
                                 <InputGroup size="sm" className="mb-3">
@@ -169,7 +167,7 @@ const TopSection = () => {
                                     name="y" 
                                     step="0.05"
                                     value={objPosition.y || 0}
-                                    onChange={handleChangeObj}     
+                                    onChange={handleObjPosition}     
                                   />
                                 </InputGroup>
                                 <InputGroup size="sm" className="mb-3">
@@ -183,12 +181,12 @@ const TopSection = () => {
                                     name="z"
                                     step="0.05"
                                     value={objPosition.z || 0}
-                                    onChange={handleChangeObj}     
+                                    onChange={handleObjPosition}     
                                   />
                                 </InputGroup>
                                 <label className="h5"> ROTATION (deg) </label>
                                 <InputGroup size="sm" className="mb-3">
-                                  <label>X: {Math.round(objRotation._x * (180 / Math.PI) * 10) / 10} </label>
+                                  <label className="h5">X: {Math.round(objRotation._x * (180 / Math.PI) * 10) / 10} </label>
                                   <input 
                                     type="range" 
                                     className="tactile-slider" 
@@ -202,7 +200,7 @@ const TopSection = () => {
                                   </input>
                                 </InputGroup>
                                 <InputGroup size="sm" className="mb-3">
-                                  <label>Y: {Math.round(objRotation._y * (180 / Math.PI) * 10) / 10} </label>
+                                  <label className="h5">Y: {Math.round(objRotation._y * (180 / Math.PI) * 10) / 10} </label>
                                   <input 
                                     type="range" 
                                     className="tactile-slider" 
@@ -216,7 +214,7 @@ const TopSection = () => {
                                   </input>
                                 </InputGroup>
                                 <InputGroup size="sm" className="mb-3">
-                                  <label>Z: {Math.round(objRotation._z * (180 / Math.PI) * 10) / 10}</label>
+                                  <label className="h5">Z: {Math.round(objRotation._z * (180 / Math.PI) * 10) / 10}</label>
                                   <input 
                                     type="range" 
                                     className="tactile-slider" 
@@ -238,7 +236,11 @@ const TopSection = () => {
                     </Row>
                 </Tab.Container>
                 <hr/>
-                <h6>Press shift to rotate object | Click to translate object</h6>
+                <h6>
+                  Press Shift to rotate object over X and Y, 
+                  press Control to rotate over Z <br/> 
+                  Click to translate object
+                </h6>
               </div>
             </Col>
             <Col md={9}>

diff --git a/src/stores/AnnotationStore.js b/src/stores/AnnotationStore.js
@@ -9,7 +9,7 @@ const addRecord = (list, annotation) => {
     const modifiedList = list.map((o) => (o.id === annotation.id ? annotation : o));
     return modifiedList;
   }
-};
+};  // Add a new annotation to the queue, it replaces old annotation or add new
 
 const useAnnotationStore = create((set, get) => ({
   outputAnnotation: { url: "", videoWidth: 0, videoHeight: 0, annotations: [] },
@@ -22,6 +22,7 @@ const useAnnotationStore = create((set, get) => ({
         videoWidth: e.getInternalPlayer().videoWidth
       },
     })),
+  setAnnotationsFromFile: (fileContent) => set ((state) => ({outputAnnotation : fileContent})),
   addAnnotation: (annotation) =>
     set(
       (state) => (

diff --git a/src/stores/ObjectStore.js b/src/stores/ObjectStore.js
@@ -9,6 +9,7 @@ const useObjectStore = create((set) => ({
   objectSelected: { name: "Banana", gltfFile: "/banana.gltf" },
   objPosition: { x: 0, y: 0.2, z: 0 },
   objRotation: { _x: Math.PI / 2, _y: 0, _z: 0 },
+  objScale: 3,
   handleSelectObject: (e) =>
     set((state) => ({
       objectSelected: state.defaultObjects.find((i) => i.name === e),
@@ -23,6 +24,7 @@ const useObjectStore = create((set) => ({
         _z: newRotation._z,
       },
     })),
+  setObjScale: (scale) => set((state) => ({objScale: scale}))  
 }));
 
 export { useObjectStore };
diff --git a/src/utils/MathUtils.js b/src/utils/MathUtils.js
@@ -0,0 +1,4 @@
+const getFixedNumber = (number, digits) =>
+  Math.round(number * 10 ** digits) / 10 ** digits;
+
+export { getFixedNumber };