Run prettier, add missing docs page

nerfstudio-project · Sep 21, 2023 · 3e5dd05 · 3e5dd05
1 parent 14d4b1e
commit 3e5dd05
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 77 deletions.
diff --git a/docs/source/examples/19_get_renders.rst b/docs/source/examples/19_get_renders.rst
@@ -0,0 +1,58 @@
+.. Comment: this file is automatically generated by `update_example_docs.py`.
+   It should not be modified manually.
+
+Get Renders
+==========================================
+
+
+Example for getting renders from a client's viewport to the Python API.
+
+
+
+.. code-block:: python
+        :linenos:
+
+
+        import time
+
+        import imageio.v3 as iio
+        import numpy as onp
+
+        import viser
+
+
+        def main():
+            server = viser.ViserServer()
+
+            button = server.add_gui_button("Render a GIF")
+
+            @button.on_click
+            def _(event: viser.GuiEvent) -> None:
+                client = event.client
+                assert client is not None
+
+                client.reset_scene()
+
+                images = []
+
+                for i in range(20):
+                    positions = onp.random.normal(size=(30, 3)) * 3.0
+                    client.add_spline_catmull_rom(
+                        f"/catmull_{i}",
+                        positions,
+                        tension=0.5,
+                        line_width=3.0,
+                        color=onp.random.uniform(size=3),
+                    )
+                    images.append(client.get_render(height=1080, width=1920))
+
+                print("Writing GIF...")
+                iio.imwrite("saved.gif", images)
+                print("Wrote GIF!")
+
+            while True:
+                time.sleep(10.0)
+
+
+        if __name__ == "__main__":
+            main()
diff --git a/src/viser/client/.eslintrc.js b/src/viser/client/.eslintrc.js
@@ -37,6 +37,6 @@ module.exports = {
         skipUndeclared: true,
       },
     ],
-    "react-refresh/only-export-components": "warn"
+    "react-refresh/only-export-components": "warn",
   },
 };
diff --git a/src/viser/client/index.html b/src/viser/client/index.html
@@ -1,14 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Viser client"
-    />
+    <meta name="description" content="Viser client" />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

diff --git a/src/viser/client/src/App.tsx b/src/viser/client/src/App.tsx
@@ -68,7 +68,7 @@ export type ViewerContextContents = {
   getRenderRequest: React.MutableRefObject<null | GetRenderRequestMessage>;
 };
 export const ViewerContext = React.createContext<null | ViewerContextContents>(
-  null
+  null,
 );
 
 THREE.ColorManagement.enabled = true;
@@ -86,7 +86,7 @@ function ViewerRoot() {
     return server;
   }
   const servers = new URLSearchParams(window.location.search).getAll(
-    searchParamKey
+    searchParamKey,
   );
   const initialServer =
     servers.length >= 1 ? servers[0] : getDefaultServerFromUrl();
@@ -268,7 +268,7 @@ function BackgroundImage() {
     // Logic ahead relies on perspective camera assumption.
     if (!(camera instanceof THREE.PerspectiveCamera)) {
       console.error(
-        "Camera is not a perspective camera, cannot render background image"
+        "Camera is not a perspective camera, cannot render background image",
       );
       return;
     }
@@ -278,7 +278,7 @@ function BackgroundImage() {
     backgroundMesh.current!.position.set(
       camera.position.x,
       camera.position.y,
-      camera.position.z
+      camera.position.z,
     );
     backgroundMesh.current!.position.addScaledVector(lookdir, 1.0);
     backgroundMesh.current!.quaternion.copy(camera.quaternion);
@@ -288,7 +288,7 @@ function BackgroundImage() {
     backgroundMesh.current!.scale.set(
       camera.getFilmWidth() / f,
       camera.getFilmHeight() / f,
-      1.0
+      1.0,
     );
 
     // Set near/far uniforms.
@@ -312,7 +312,7 @@ function SceneContextSetter() {
   const { sceneRef, cameraRef } = React.useContext(ViewerContext)!;
   sceneRef.current = useThree((state) => state.scene);
   cameraRef.current = useThree(
-    (state) => state.camera as THREE.PerspectiveCamera
+    (state) => state.camera as THREE.PerspectiveCamera,
   );
   return <></>;
 }

diff --git a/src/viser/client/src/ControlPanel/ControlPanel.tsx b/src/viser/client/src/ControlPanel/ControlPanel.tsx
@@ -34,7 +34,7 @@ export default function ControlPanel(props: {
   // TODO: will result in unnecessary re-renders.
   const viewer = React.useContext(ViewerContext)!;
   const showGenerated = viewer.useGui(
-    (state) => "root" in state.guiIdSetFromContainerId
+    (state) => "root" in state.guiIdSetFromContainerId,
   );
   const [showSettings, { toggle }] = useDisclosure(false);
 

diff --git a/src/viser/client/src/ControlPanel/Generated.tsx b/src/viser/client/src/ControlPanel/Generated.tsx
@@ -46,7 +46,7 @@ export default function GeneratedGuiContainer({
   if (viewer === undefined) viewer = React.useContext(ViewerContext)!;
 
   const guiIdSet = viewer.useGui(
-    (state) => state.guiIdSetFromContainerId[containerId]
+    (state) => state.guiIdSetFromContainerId[containerId],
   );
   const guiConfigFromId = viewer.useGui((state) => state.guiConfigFromId);
 
@@ -505,7 +505,7 @@ function VectorInput(
         precision: number;
         onChange: (value: number[]) => void;
         disabled: boolean;
-      }
+      },
 ) {
   return (
     <Flex justify="space-between" style={{ columnGap: "0.3rem" }}>

diff --git a/src/viser/client/src/ControlPanel/SidebarPanel.tsx b/src/viser/client/src/ControlPanel/SidebarPanel.tsx
@@ -46,7 +46,9 @@ export default function SidebarPanel({
           toggleCollapsed();
         }}
       >
-        <Tooltip zIndex={100} label={"Show sidebar"}>{<IconChevronLeft />}</Tooltip>
+        <Tooltip zIndex={100} label={"Show sidebar"}>
+          {<IconChevronLeft />}
+        </Tooltip>
       </ActionIcon>
     </Box>
   );

diff --git a/src/viser/client/src/SceneTree.tsx b/src/viser/client/src/SceneTree.tsx
@@ -12,7 +12,7 @@ import { Text } from "@mantine/core";
 import { useSceneTreeState } from "./SceneTreeState";
 
 export type MakeObject<T extends THREE.Object3D = THREE.Object3D> = (
-  ref: React.Ref<T>
+  ref: React.Ref<T>,
 ) => React.ReactNode;
 
 /** Scenes will consist of nodes, which form a tree. */
@@ -25,7 +25,7 @@ export class SceneNode<T extends THREE.Object3D = THREE.Object3D> {
   constructor(
     public name: string,
     public makeObject: MakeObject<T>,
-    public cleanup?: () => void
+    public cleanup?: () => void,
   ) {
     this.children = [];
     this.clickable = false;
@@ -40,8 +40,9 @@ function SceneNodeThreeChildren(props: {
   parent: THREE.Object3D;
 }) {
   const viewer = React.useContext(ViewerContext)!;
-  const children =
-    viewer.useSceneTree((state) => state.nodeFromName[props.name]?.children);
+  const children = viewer.useSceneTree(
+    (state) => state.nodeFromName[props.name]?.children,
+  );
 
   // Create a group of children inside of the parent object.
   return createPortal(
@@ -52,15 +53,15 @@ function SceneNodeThreeChildren(props: {
         })}
       <SceneNodeLabel name={props.name} />
     </group>,
-    props.parent
+    props.parent,
   );
 }
 
 /** Component for updating attributes of a scene node. */
 function SceneNodeLabel(props: { name: string }) {
   const viewer = React.useContext(ViewerContext)!;
   const labelVisible = viewer.useSceneTree(
-    (state) => state.labelVisibleFromName[props.name]
+    (state) => state.labelVisibleFromName[props.name],
   );
   return labelVisible ? (
     <Html>
@@ -83,10 +84,10 @@ function SceneNodeLabel(props: { name: string }) {
 export function SceneNodeThreeObject(props: { name: string }) {
   const viewer = React.useContext(ViewerContext)!;
   const makeObject = viewer.useSceneTree(
-    (state) => state.nodeFromName[props.name]?.makeObject
+    (state) => state.nodeFromName[props.name]?.makeObject,
   );
   const cleanup = viewer.useSceneTree(
-    (state) => state.nodeFromName[props.name]?.cleanup
+    (state) => state.nodeFromName[props.name]?.cleanup,
   );
   const clickable =
     viewer.useSceneTree((state) => state.nodeFromName[props.name]?.clickable) ??
@@ -100,7 +101,7 @@ export function SceneNodeThreeObject(props: { name: string }) {
   // PivotControls.
   const objNode = React.useMemo(
     () => makeObject && makeObject(setRef),
-    [makeObject]
+    [makeObject],
   );
   const children =
     obj === null ? null : (
@@ -145,7 +146,7 @@ export function SceneNodeThreeObject(props: { name: string }) {
   // Clicking logic.
   const sendClicksThrottled = makeThrottledMessageSender(
     viewer.websocketRef,
-    50
+    50,
   );
   const [hovered, setHovered] = React.useState(false);
   useCursor(hovered);

diff --git a/src/viser/client/src/SearchParamsUtils.tsx b/src/viser/client/src/SearchParamsUtils.tsx
@@ -14,10 +14,10 @@ function setServerParams(serverParams: string[]) {
   if (
     serverParams.length === 1 &&
     (window.location.host.includes(
-      serverParams[0].replace("ws://", "").replace("/", "")
+      serverParams[0].replace("ws://", "").replace("/", ""),
     ) ||
       window.location.host.includes(
-        serverParams[0].replace("wss://", "").replace("/", "")
+        serverParams[0].replace("wss://", "").replace("/", ""),
       ))
   )
     serverParams = [];
@@ -29,6 +29,6 @@ function setServerParams(serverParams: string[]) {
     // it. We're going to just not escape the string. :)
     serverParams.length === 0
       ? window.location.href.split("?")[0]
-      : `?${serverParams.map((s) => `${searchParamKey}=${s}`).join("&")}`
+      : `?${serverParams.map((s) => `${searchParamKey}=${s}`).join("&")}`,
   );
 }