Added review toggle

src/assets/scss/checkbox.scss

@@ -0,0 +1,53 @@
+.switch_box{
+	display: flex;
+  align-items: center;
+	-webkit-box-pack: center;
+	    -ms-flex-pack: center;
+	        justify-content: center;
+	-webkit-box-align: center;
+	    -ms-flex-align: center;
+	        align-items: center;
+	-webkit-box-flex: 1;
+	    -ms-flex: 1;
+	        flex: 1;
+}
+
+input[type="checkbox"].switch_1{
+	font-size: 30px;
+	-webkit-appearance: none;
+	   -moz-appearance: none;
+	        appearance: none;
+	width: 1em;
+	height: 0.5em;
+	background: #ddd;
+	border-radius: 3em;
+	position: relative;
+	cursor: pointer;
+	outline: none;
+	-webkit-transition: all .2s ease-in-out;
+	transition: all .2s ease-in-out;
+  }
+
+input[type="checkbox"].switch_1:checked{
+	background: $blue;
+}
+
+input[type="checkbox"].switch_1:after{
+	position: absolute;
+	content: "";
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 50%;
+	background: #fff;
+	-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
+	        box-shadow: 0 0 .25em rgba(0,0,0,.3);
+	-webkit-transform: scale(.7);
+	        transform: scale(.7);
+	left: 0;
+	-webkit-transition: all .2s ease-in-out;
+	transition: all .2s ease-in-out;
+}
+
+input[type="checkbox"].switch_1:checked:after{
+	left: calc(100% - 0.5em);
+}

src/assets/scss/custom.scss

@@ -3,6 +3,7 @@
 @import "./video_controls";
 @import "./main_content.scss";
 @import "./sliders.scss";
+@import "./checkbox.scss";
 @import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
 @import "node_modules/bootstrap/scss/bootstrap";
 

src/assets/scss/variables.scss

@@ -83,7 +83,19 @@ $navbar-nav-link-font-weight:              500 !default;
 $navbar-nav-link-text-transform:           normal !default;
 $navbar-nav-link-letter-spacing:           0 !default;
 
+// Border
 
+$border-width:                1px !default;
+$border-color:                $gray-200 !default;
+
+$border-radius:               .375rem !default;
+$border-radius-xl:            .5rem !default;
+$border-radius-lg:            .4375rem !default;
+$border-radius-sm:            .25rem !default;
+
+$box-shadow-sm:               0 0 .5rem rgba($gray-600, .075) !default;
+$box-shadow:                  0 0 2rem 0 rgba($gray-600, .15) !default;
+$box-shadow-lg:               0 0 3rem rgba($gray-600, .175) !default;
 
 // Buttons + Forms
 

src/components/AnnotationView.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { Dropdown, Button, ButtonGroup } from 'react-bootstrap';
 import ReactPlayer from 'react-player';
-import EnvironmentContainer from './EnvironmentContainer';
+import SceneContainer from './SceneContainer';
 import { getFixedNumber } from '../utils/MathUtils';
 import FormattedTime from '../components/videoPlayer/FormattedTime';
 import { useVideoStore } from '../stores/VideoStore';
@@ -103,9 +103,9 @@ const AnnotationView = ({camPosition, objScale}) => {
           <div className="video_box">
             <div className="video_overlays">
               <div className="scene-container">
-                <EnvironmentContainer 
+                <SceneContainer 
                   position={camPosition}
-                  objScale={objScale}/>
+                />
               </div>
             </div>
             <div className="player-wrapper">

src/components/OutputContainer.js

@@ -33,11 +33,16 @@ const OutputContainer = () => {
             <code>{outputJSON}</code>
           </div>
         </Col>
-        <Col md="2" className="align-items-center">
-          <Row className="text-center mt-2">
-            <Button size="sm" variant="light">
-              Edit
-            </Button>{" "}
+        <Col md="2" className="">
+          <Row className="text-center mt-2 px-2">
+            <h5>Review</h5>
+            <div className="switch_box box_1">
+              <input 
+                type="checkbox" 
+                className="switch_1"
+                checked={annotationStore.editMode} 
+                onChange={annotationStore.setReviewMode}/>
+            </div>  
           </Row>
           <hr />
           <Row className="text-center mt-2">
@@ -46,12 +51,13 @@ const OutputContainer = () => {
               <Button
                 size="sm"
                 variant="success"
+                className="px-3"
                 href={`data:text/json;charset=utf-8,${encodeURIComponent(
                   JSON.stringify(annotationStore.outputAnnotation, null, 4)
                 )}`}
                 download="3Dannotation.json"
               >
-                Download
+                Export
               </Button>
             </Col>
             <Col>
@@ -61,7 +67,7 @@ const OutputContainer = () => {
                 className="px-3"
                 onClick={upload}
               >
-                Upload
+                Import
               </Button>
 
               <input

src/components/EnvironmentContainer.js → src/components/SceneContainer.js

@@ -17,23 +17,21 @@ const Banana = ({camPosition, ...props}) => {
 
     const { objectSelected, objPosition, objRotation, objScale, handleTranslation, handleRotation } = useObjectStore();
     const videoState = useVideoStore()
-    const { addAnnotation } = useAnnotationStore()
+    const { addAnnotation, reviewMode } = useAnnotationStore()
 
     const { nodes, materials } = useGLTF(objectSelected.gltfFile);
     const [ hovered, setHover ] = useState(false)
 
     const { camera, gl: { domElement }} = useThree();
     const state = useThree();
     camera.position.set( camPosition.xCamPos, camPosition.yCamPos, camPosition.zCamPos)
-    const position = Object.values(objPosition)
+    //const position = Object.values(objPosition)
     const rotation = Object.values(objRotation)
 
-    const editmode = false
-
     const [vec] = useState(() => new THREE.Vector3())
 
     useFrame(() => {
-      if (!editmode) {
+      if (reviewMode) {
         object.current.position.lerp(vec.set(objPosition.x, objPosition.y, objPosition.z), 0.1)
       } 
     })
@@ -81,7 +79,7 @@ const Banana = ({camPosition, ...props}) => {
               geometry={nodes.Node.geometry}
               material={materials.material_0}
               scale={objScale}
-              position={null} 
+              //position={position} 
               rotation={rotation}
               onPointerUp={(e) => handleTranslation(object.current.position) }
             /> 
@@ -116,7 +114,7 @@ const Loader = () => {
   return <Html center> Loading... </Html>
 }
 
-const EnvironmentContainer = ({position}) => {
+const SceneContainer = ({position}) => {
 
     return (
         <>
@@ -132,4 +130,4 @@ const EnvironmentContainer = ({position}) => {
     )
 }
 
-export default EnvironmentContainer;
+export default SceneContainer;

src/components/TopSection.js

@@ -135,7 +135,7 @@ const TopSection = () => {
                                   <FormControl 
                                     aria-describedby="scale"
                                     type="number" 
-                                    step="0.5"
+                                    step="0.1"
                                     name="objScale"
                                     value={objScale || 1}
                                     onChange={e => setObjScale(e.target.value)}     
@@ -239,7 +239,7 @@ const TopSection = () => {
                 <h6>
                   Press Shift to rotate object over X and Y, 
                   press Control to rotate over Z <br/> 
-                  Click to translate object
+                  Click and drag object to translate.
                 </h6>
               </div>
             </Col>

src/stores/AnnotationStore.js

@@ -19,6 +19,8 @@ const addRecord = (list, annotation) => {
 
 const useAnnotationStore = create((set, get) => ({
   outputAnnotation: { url: "", videoWidth: 0, videoHeight: 0, annotations: [] },
+  reviewMode : false,
+  setReviewMode : () => set((state) => ({ reviewMode : !state.reviewMode})),
   setVideoMetadata: (e) =>
     set((state) => ({
       outputAnnotation: {