Added output container

README.md

@@ -1,6 +1,4 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# YCB Object 3d annotation
 
 ## Available Scripts
 

src/App.js

@@ -1,6 +1,7 @@
 import TopSection from './components/TopSection';
 import DashboardNavbar from './components/DashboardNavbar';
 import Header from './components/Header';
+import OutputContainer from './components/OutputContainer';
 
 function App() {
   return (
@@ -9,7 +10,7 @@ function App() {
         <DashboardNavbar/>
         <Header/>
         <TopSection/>
-            
+        <OutputContainer/>
       </div>
     </>
   );

src/assets/scss/main_content.scss

@@ -3,6 +3,7 @@
     height: 100%;
     min-height: 90vh;
     background-color: $gray-100;
+    padding-bottom: 5vh;
 
     // Navbar
     .navbar-top {
@@ -18,6 +19,19 @@
     }
 }
 
+.section-wrapper {
+    position: relative;
+    background-color: $gray-200;;
+    border-radius: 5px;
+    padding: 1rem;
+}
+
+.controls {
+    background-color: $gray-100;
+    border-radius: 5px;
+    padding: 1rem;
+}
+
 .video_overlays {
     position: absolute;
     background-color:rgba(0, 0, 0, 0.1);
@@ -48,4 +62,15 @@
     z-index: 1;
 }
 
+.output {
+    background-color: $primary;
+    border-radius: 5px;
+    padding: 1rem;
+    height: 15vh;
+    overflow: auto;
+    code {
+        color: #f0f0f0;
+        font-size: small;
+    }
+}
 

src/components/EnvironmentContainer.js

@@ -1,9 +1,10 @@
 import React, { useRef, useEffect, useCallback, Suspense } from "react";
 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 { ObjectControls } from '../ObjectControls';
 import { DragControls } from 'three-stdlib';
-import { useObjectStore } from '../stores/ObjectStore';
 extend({ DragControls, ObjectControls })
 
 softShadows()
@@ -13,7 +14,8 @@ const Banana = ({camPosition, ...props}) => {
     const object = useRef();
     const { nodes, materials } = useGLTF("/banana.gltf");
 
-    const { objPosition, objRotation, handleTranslation, handleRotation } = useObjectStore()
+    const { objPosition, objRotation, handleTranslation, handleRotation } = useObjectStore();
+    const { addAnnotation } = useAnnotationStore()
 
     const { camera, gl: { domElement }} = useThree();
     camera.position.set( camPosition.xCamPos, camPosition.yCamPos, camPosition.zCamPos)
@@ -44,6 +46,12 @@ const Banana = ({camPosition, ...props}) => {
 
     const annotateFrame = () => {
       console.log(object.current.position, object.current.rotation)
+      let dataAnnotation = {
+          id:1, 
+          position: object.current.position,
+          rotation: object.current.rotation
+      }
+      addAnnotation(dataAnnotation)
     }
 
     return (
@@ -71,8 +79,8 @@ const Banana = ({camPosition, ...props}) => {
             <directionalLight position={[4,3,3]} castShadow intensity={1.5} shadow-camera-far={70} />
         </mesh>
 
-        <dragControls args={[[ object.current ], camera, domElement]} /> 
-        { object.current && <objectControls args={[camera, domElement, object.current ]}/>}
+        { object.current && <dragControls args={[[ object.current ], camera, domElement]} /> }
+        { object.current && <objectControls args={[camera, domElement, object.current ]}/>  }
       </>
     );
 }

src/components/Header.js

@@ -9,6 +9,7 @@ const Header = () => {
                 <p>YCB objects</p>
             </Col>
         </Row>
+        <hr/>
       </Container>
     )
 }

src/components/OutputContainer.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Container, Row } from "react-bootstrap";
+import { useAnnotationStore } from '../stores/AnnotationStore';
+
+const OutputContainer = () => {
+
+  const { outputAnnotation } = useAnnotationStore()
+  const outputJSON = JSON.stringify(outputAnnotation);
+
+    return (
+      <Container fluid="md" className="mt-2">
+        <Row className="section-wrapper">
+          <div className="output">
+            <code>Output: </code>
+            <code>{outputJSON}</code>
+
+          </div>
+        </Row>
+      </Container>
+    )
+}
+
+export default OutputContainer

src/components/TopSection.js

@@ -26,10 +26,11 @@ const TopSection = () => {
     };
 
     return (
-        <Container fluid="md">
+        <Container fluid="md" className="">
         <Row className="justify-content-center">
-            <Col md={3} >
-                <Tab.Container id="left-tabs-example" defaultActiveKey="camera">
+            <Col md={3} className="section-wrapper" >
+              <div className="controls">
+                <Tab.Container id="left-tabs-example" defaultActiveKey="camera" >
                     <Row>
                         <Col sm={6}>
                           <Nav variant="pills" className="flex-column">
@@ -109,6 +110,7 @@ const TopSection = () => {
                                   <FormControl 
                                     aria-describedby="scale"
                                     type="number" 
+                                    step="0.5"
                                     name="objScale"
                                     value={objScale || 1}
                                     onChange={e => setObjScale(e.target.value)}     
@@ -208,9 +210,11 @@ const TopSection = () => {
                         </Col>
                     </Row>
                 </Tab.Container>
+                <hr/>
+                <h6>Press shift to rotate object | Click to translate object</h6>
+                </div>
             </Col>
             <Col md={9} >
-                <h6 className="text-center">Press shift to rotate object</h6>
                 <div className="video_box">
                     <div className="video_overlays">
                       <div className="scene-container">

src/stores/AnnotationStore.js

@@ -0,0 +1,20 @@
+import create from 'zustand';
+
+const useAnnotationStore = create(set => ({
+    outputAnnotation : {url: "https://camera1-video.mp4", videoWidth: 500, videoHeight: 400 },
+    addAnnotation : (value) => 
+        set(state => ({ 
+            outputAnnotation: {
+                ...state.outputAnnotation, 
+                annotations: [{
+                    id:value.id, 
+                    position: value.position,
+                    rotation: value.rotation
+                }] 
+            }
+        })),
+
+}))
+
+
+export { useAnnotationStore };