added basic annotation function

README.md

@@ -6,9 +6,9 @@ To install
 `git clone https://github.com/sahirgomez1/ycb_objects.git`
 
 In the project directory :
-`cd ycb_objects_app`
-you can run to install all dependencies
-`npm install`
+`cd ycb_objects_app`.\
+you can run
+`npm install` to install all dependencies.\
 then run
 `npm start`.
 

src/components/AnnotationView.js

@@ -26,6 +26,7 @@ const AnnotationView = ({camPosition, objScale}) => {
 
     const player = useRef()
     const { 
+        url,
         playing, 
         played, 
         duration, 
@@ -70,7 +71,7 @@ const AnnotationView = ({camPosition, objScale}) => {
               ref={player}
               width='100%'
               height='auto'
-              url={"https://storage.turbo360.co/instagram_clone-vjcpvp/rbgt_banana.mp4"}
+              url={url}
               playing={playing}
               controls={false}
               loop={loop}
@@ -116,7 +117,7 @@ const AnnotationView = ({camPosition, objScale}) => {
                 </div>
                 <div className='d-flex align-items-center'>
                   <div className='player-control__time'>
-                    <FormattedTime seconds={ played * duration } />
+                    <FormattedTime seconds={ played * duration} />
                     {' / ' }
                     <FormattedTime seconds={ duration } />
                   </div>

src/components/EnvironmentContainer.js

@@ -3,6 +3,7 @@ import { Canvas, useFrame, useThree, extend } from "@react-three/fiber";
 import { useGLTF, Environment, Html, softShadows, Shadow } from "@react-three/drei";
 import { useObjectStore } from '../stores/ObjectStore';
 import { useAnnotationStore } from '../stores/AnnotationStore';
+import { useVideoStore } from '../stores/VideoStore';
 import { ObjectControls } from '../ObjectControls';
 import { DragControls } from 'three-stdlib';
 extend({ DragControls, ObjectControls })
@@ -16,6 +17,7 @@ const Banana = ({camPosition, ...props}) => {
     const [ hovered, setHover ] = useState(false)
 
     const { objPosition, objRotation, handleTranslation, handleRotation } = useObjectStore();
+    const videoState = useVideoStore()
     const { addAnnotation } = useAnnotationStore()
 
     const { camera, gl: { domElement }} = useThree();
@@ -47,13 +49,15 @@ const Banana = ({camPosition, ...props}) => {
 
     const annotateFrame = () => {
       console.log(object.current)
+      let video_metadata = { url: videoState.url }
       let dataAnnotation = {
-          id:1, 
+          id: videoState.played, 
+          time: (videoState.played * videoState.duration),
           position: object.current.position,
           rotation: object.current.rotation,
           scale: object.current.scale
       }
-      addAnnotation(dataAnnotation)
+      addAnnotation(video_metadata, dataAnnotation)
     }
 
     return (

src/components/OutputContainer.js

@@ -12,6 +12,7 @@ const OutputContainer = () => {
         <Row className="section-wrapper">
           <div className="output">
             <code>Output: </code>
+            <br/>
             <code>{outputJSON}</code>
 
           </div>

src/stores/AnnotationStore.js

@@ -1,20 +1,24 @@
 import create from 'zustand';
 
+const addRecord = (list, annotation) => {
+  let ann_found = list.some(o => o.id === annotation.id);
+  if (!ann_found) list.push(annotation);
+  list.map(o => (o.id === annotation.id) ? annotation : o)
+  return list;
+}
+
 const useAnnotationStore = create(set => ({
-    outputAnnotation : {url: "https://camera1-video.mp4", videoWidth: 500, videoHeight: 400 },
-    addAnnotation : (value) => 
+    outputAnnotation : { url: "", videoWidth: 500, videoHeight: 400, annotations:[] },
+    addAnnotation : (video_metadata, annotation) => 
         set(state => ({ 
             outputAnnotation: {
-                ...state.outputAnnotation, 
-                annotations: [{
-                    id:value.id, 
-                    position: value.position,
-                    rotation: value.rotation
-                }] 
+                ...state.outputAnnotation,
+                url: video_metadata.url, 
+                annotations: addRecord(state.outputAnnotation.annotations, annotation)
             }
         })),
 
 }))
 
 
-export { useAnnotationStore };
+export { useAnnotationStore };

src/stores/VideoStore.js

@@ -1,7 +1,7 @@
 import create from 'zustand';
 
 const useVideoStore = create(set => ({
-    url: '',
+    url: "https://storage.turbo360.co/instagram_clone-vjcpvp/rbgt_banana.mp4",
     duration: 0,
     id :'react-player',
     played: 0,