Add leva

pyrad/viewer/app/package.json

@@ -9,14 +9,15 @@
     "@testing-library/user-event": "^14.2.0",
     "ccapture.js": "github:aceslowman/ccapture.js#npm-fix",
     "dat.gui": "^0.7.9",
+    "leva": "^0.9.29",
     "msgpack-lite": "^0.1.26",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "^5.0.1",
     "socket.io-client": "^4.5.1",
     "three": "^0.142.0",
-    "websocket": "^1.0.34",
     "three-wtm": "^1.0",
+    "websocket": "^1.0.34",
     "wwobjloader2": "^4.0"
   },
   "scripts": {

pyrad/viewer/app/src/Viewer.jsx

@@ -31,7 +31,7 @@ function findCameraObjectUnderObject3D(object) {
 
 var msgpack = require("msgpack-lite");
 
-export class Viewer extends Component {
+export class ViewerState extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -43,11 +43,11 @@ export class Viewer extends Component {
       viewport_width: null,
       viewport_height: null,
     };
-    this.created_controls = false;
     this.update = this.update.bind(this);
     this.set_object = this.set_object.bind(this);
     this.handle_command = this.handle_command.bind(this);
     this.threejs_ref = React.createRef();
+    this.props = props;
   }
 
   handleResize() {
@@ -203,57 +203,6 @@ export class Viewer extends Component {
     }
   }
 
-  // TODO(evonne): eventually change name to setup backend functions
-  set_output_options(object) {
-    if (this.created_controls === false) {
-      let output_options_control = new (function () {
-        this.output_options = "default";
-      })();
-      // add output options
-      this.state.gui
-        .add(output_options_control, "output_options", object)
-        .name("Output Options")
-        .listen()
-        .onChange((value) => {
-          this.send_output_type_over_websocket(value);
-        });
-      // add pause training switch
-      let switch_params = {
-        switch: false,
-      };
-      this.state.gui
-        .add(switch_params, "switch")
-        .name("Pause Training?")
-        .listen()
-        .onChange((value) => {
-          this.send_training_state_over_websocket(value);
-        });
-      // add min resolution
-      let min_slider_params = {
-        value: 50,
-      };
-      this.state.gui
-        .add(min_slider_params, "value", 25, 100)
-        .name("Min Resolution")
-        .listen()
-        .onFinishChange((value) => {
-          this.send_min_resolution_over_websocket(value);
-        });
-      // add max resolution
-      let max_slider_params = {
-        value: 1000,
-      };
-      this.state.gui
-        .add(max_slider_params, "value", 800, 2000)
-        .name("Max Resolution")
-        .listen()
-        .onFinishChange((value) => {
-          this.send_max_resolution_over_websocket(value);
-        });
-    }
-    this.created_controls = true;
-  }
-
   handle_command(cmd) {
     // convert binary serialization format back to JSON
     cmd = msgpack.decode(new Uint8Array(cmd));
@@ -273,7 +222,8 @@ export class Viewer extends Component {
       let path = split_path(cmd.path);
       this.set_property(path, cmd.property, cmd.value);
     } else if (cmd.type == "set_output_options") {
-      this.set_output_options(cmd.output_options);
+      this.props.setOutputOptions(cmd.output_options);
+      this.props.setControls({ output_options: 1 });
     }
     // web rtc commands
     else if (cmd.type === "answer") {
@@ -470,6 +420,33 @@ export class Viewer extends Component {
     this.update();
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    // Pause training
+    if (prevProps.pause_training !== this.props.pause_training) {
+      this.send_training_state_over_websocket(this.props.pause_training);
+    }
+
+    // Choose render type
+    if (prevProps.output_options !== this.props.output_options) {
+      console.log(this.props.output_options);
+      this.send_output_type_over_websocket(this.props.output_options);
+    }
+
+    // Set minimum render resolution
+    if (prevProps.min_resolution !== this.props.min_resolution) {
+      this.send_min_resolution_over_websocket(
+        this.props.min_resolution.slice(0, -2)
+      );
+    }
+
+    // Set maximum render resolution
+    if (prevProps.max_resolution !== this.props.max_resolution) {
+      this.send_max_resolution_over_websocket(
+        this.props.max_resolution.slice(0, -2)
+      );
+    }
+  }
+
   render() {
     return (
       <div>

pyrad/viewer/app/src/controlPanel.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { Leva, button, buttonGroup, useControls } from "leva";
+
+export function PanelConfig() {
+  let params = { titleBar: false };
+  let panel = (
+    <div style={{ position: "relative", width: 250, top: 60 }}>
+      <Leva fill oneLineLabels {...params} />
+    </div>
+  );
+  return panel;
+}
+
+export function RenderControls() {
+  const [outputOptions, setOutputOptions] = React.useState([]);
+  const [controls, setControls] = useControls(
+    "Render Options",
+    () => ({
+      pause_training: {
+        label: "Pause Training?",
+        value: false,
+      },
+      output_options: {
+        label: "Output Render",
+        options: outputOptions,
+      },
+      min_resolution: {
+        label: "Min Res.",
+        value: 50,
+        min: 10,
+        max: 100,
+        step: 1,
+        suffix: "px",
+      },
+      " ": buttonGroup({
+        "25px": () => setControls({ min_resolution: 25 }),
+        "50px": () => setControls({ min_resolution: 50 }),
+        "75px": () => setControls({ min_resolution: 75 }),
+        "100px": () => setControls({ min_resolution: 100 }),
+      }),
+      max_resolution: {
+        label: "Max Res.",
+        min: 10,
+        max: 2048,
+        step: 1,
+        value: 512,
+        suffix: "px",
+      },
+      "  ": buttonGroup({
+        "128px": () => setControls({ max_resolution: 128 }),
+        "256px": () => setControls({ max_resolution: 256 }),
+        "512px": () => setControls({ max_resolution: 512 }),
+        "1024px": () => setControls({ max_resolution: 1024 }),
+      }),
+    }),
+    [outputOptions]
+  );
+
+  return [controls, setControls, setOutputOptions];
+}

pyrad/viewer/app/src/index.js

@@ -2,10 +2,27 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import * as serviceWorker from "./serviceWorker";
-import { Viewer } from "./Viewer";
+import { ViewerState } from "./Viewer";
+import { PanelConfig, RenderControls } from "./controlPanel";
+
+function App() {
+  let [controls, setControls, setOutputOptions] = RenderControls();
+
+  console.log(controls);
+  return (
+    <div>
+      <ViewerState
+        {...controls}
+        setControls={setControls}
+        setOutputOptions={setOutputOptions}
+      />
+      <PanelConfig />
+    </div>
+  );
+}
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<Viewer />);
+root.render(<App />);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.