From 21eddc4b17a22a28bde3298d4b28c417e76f5fc6 Mon Sep 17 00:00:00 2001
From: Abhik Ahuja <ahujaabhik@berkeley.edu>
Date: Tue, 18 Oct 2022 23:59:55 -0700
Subject: [PATCH] Add ability to load path from file (#804)

* Added button in camera panel to load camera path from file

* Loading camera paths not backwards compatible with old camera paths.
---
 .../viewer/app/src/modules/Scene/Scene.jsx    | 11 ++-
 .../SidePanel/CameraPanel/CameraPanel.jsx     | 84 ++++++++++++++++++-
 2 files changed, 92 insertions(+), 3 deletions(-)

diff --git a/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx b/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx
index 8ad2bc5d76..dd0d36fc63 100644
--- a/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx
+++ b/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx
@@ -253,7 +253,12 @@ export function get_scene_tree() {
     mouseVector.x = 2 * (e.clientX / size.x) - 1;
     mouseVector.y = 1 - 2 * ((e.clientY - BANNER_HEIGHT) / size.y);
 
-    if (mouseVector.x > 1 || mouseVector.x < -1 || mouseVector.y > 1 || mouseVector.y < -1) {
+    if (
+      mouseVector.x > 1 ||
+      mouseVector.x < -1 ||
+      mouseVector.y > 1 ||
+      mouseVector.y < -1
+    ) {
       if (selectedCam !== null) {
         selectedCam.material.color = new THREE.Color(1, 1, 1);
         selectedCam = null;
@@ -268,7 +273,9 @@ export function get_scene_tree() {
       selectedCam.material.color = new THREE.Color(1, 1, 1);
       selectedCam = null;
     }
-    const filtered_intersections = intersections.filter(isect => checkVisibility(isect.object));
+    const filtered_intersections = intersections.filter((isect) =>
+      checkVisibility(isect.object),
+    );
     if (filtered_intersections.length > 0) {
       selectedCam = filtered_intersections[0].object;
       selectedCam.material.color = new THREE.Color(0xfab300);
diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
index 948e166f41..3a50feb126 100644
--- a/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
+++ b/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
@@ -423,14 +423,27 @@ export default function CameraPanel(props) {
       });
     }
 
+    const keyframes = [];
+    for (let i = 0; i < cameras.length; i += 1) {
+      const camera = cameras[i];
+      keyframes.push({
+        matrix: JSON.stringify(camera.matrix.toArray()),
+        fov: camera.fov,
+        aspect: camera_render.aspect,
+      });
+    }
+
     // const myData
     const camera_path_object = {
-      keyframes: [],
+      keyframes,
       render_height,
       render_width,
       camera_path,
       fps,
       seconds,
+      smoothness_value,
+      is_cycle,
+      is_linear,
     };
     return camera_path_object;
   };
@@ -461,6 +474,58 @@ export default function CameraPanel(props) {
     URL.revokeObjectURL(href);
   };
 
+  const load_camera_path = (camera_path_object) => {
+    // TODO UI for getting json
+
+    const new_camera_list = [];
+
+    setRenderHeight(camera_path_object.render_height);
+    setUIRenderHeight(camera_path_object.render_height);
+    setRenderWidth(camera_path_object.render_width);
+    setUIRenderWidth(camera_path_object.render_width);
+
+    setFps(camera_path_object.fps);
+    setUIfps(camera_path_object.fps);
+
+    setSeconds(camera_path_object.seconds);
+    setUISeconds(camera_path_object.seconds);
+
+    set_smoothness_value(camera_path_object.smoothness_value);
+    setIsCycle(camera_path_object.is_cycle);
+    setIsLinear(camera_path_object.is_linear);
+
+    for (let i = 0; i < camera_path_object.keyframes.length; i += 1) {
+      const keyframe = camera_path_object.keyframes[i];
+      const camera = new THREE.PerspectiveCamera(
+        keyframe.fov,
+        keyframe.aspect,
+        0.1,
+        1000,
+      );
+
+      const mat = new THREE.Matrix4();
+      mat.fromArray(JSON.parse(keyframe.matrix));
+      // camera.matrix = mat;
+      set_camera_position(camera, mat);
+      new_camera_list.push(camera);
+    }
+
+    setCameras(new_camera_list);
+    reset_slider_render_on_add(new_camera_list);
+  };
+
+  const uploadCameraPath = (e) => {
+    const fileUpload = e.target.files[0];
+
+    const fr = new FileReader();
+    fr.onload = (res) => {
+      const camera_path_object = JSON.parse(res.target.result);
+      load_camera_path(camera_path_object);
+    };
+
+    fr.readAsText(fileUpload);
+  };
+
   const copy_cmd_to_clipboard = () => {
     console.log('copy_cmd_to_clipboard');
 
@@ -543,6 +608,23 @@ export default function CameraPanel(props) {
             Export Path
           </Button>
         </div>
+        <div className="CameraPanel-top-button">
+          <Button
+            size="small"
+            className="CameraPanel-top-button"
+            component="label"
+            variant="outlined"
+          >
+            Load Path
+            <input
+              type="file"
+              accept=".json"
+              name="Camera Path"
+              onChange={uploadCameraPath}
+              hidden
+            />
+          </Button>
+        </div>
         <div className="CameraPanel-top-button">
           <Tooltip title="Copy Cmd to Clipboard">
             <IconButton onClick={copy_cmd_to_clipboard}>