Visual adjustments (initial pass) (#134)

* Alignment * Frontend pass * README strip for publish action * Add mising target="_blank" * Remove test line
nerfstudio-project · Nov 22, 2023 · 58241ad · 58241ad
1 parent c5aea9f
commit 58241ad
Show file tree

Hide file tree

Showing 26 changed files with 428 additions and 146 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -24,6 +24,9 @@ jobs:
           pip install build twine
           # Build client files.
           python -c "import viser; viser.ViserServer()"
+      - name: Strip unsupported tags in README
+        run: |
+          sed -i '/<!-- pypi-strip -->/,/<!-- \/pypi-strip -->/d' README.md
       - name: Build and publish
         env:
           PYPI_USERNAME: ${{ secrets.PYPI_USERNAME }}

diff --git a/README.md b/README.md
@@ -1,44 +1,62 @@
-<h1>
-  viser
-</h1>
-
-**`pip install viser`** &nbsp;&nbsp;&bull;&nbsp;&nbsp; **[
-[API Reference](https://nerfstudio-project.github.io/viser) ]**
-
-![pyright](https://github.com/nerfstudio-project/viser/workflows/pyright/badge.svg)
-![mypy](https://github.com/nerfstudio-project/viser/workflows/mypy/badge.svg)
-![typescript](https://github.com/nerfstudio-project/viser/workflows/typescript-compile/badge.svg)
-[![pypi](https://img.shields.io/pypi/pyversions/viser)](https://pypi.org/project/viser)
-
----
-
-`viser` is a library for interactive 3D visualization + Python, inspired by
+<p align="center">
+    <!--
+    Note that this README will be used for both GitHub and PyPI.
+    We therefore:
+    - Keep all image URLs absolute.
+    - In the GitHub action we use for publishing, strip some HTML tags that aren't supported by PyPI.
+    -->
+    <!-- pypi-strip -->
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="https://viser.studio/_static/viser_banner_dark.svg" />
+    <!-- /pypi-strip -->
+        <img alt="tyro logo" src="https://viser.studio/_static/viser_banner.svg" width="200px" />
+    <!-- pypi-strip -->
+    </picture>
+    <!-- /pypi-strip -->
+
+</p>
+
+<br />
+
+<p align="center">
+    <strong><code>pip install viser</code></strong>
+    &nbsp;&nbsp;&bull;&nbsp;&nbsp;
+    <strong><a href="https://viser.studio">Documentation</a></strong>
+</p>
+
+<p align="center">
+    <img alt="pyright" src="https://github.com/nerfstudio-project/viser/workflows/pyright/badge.svg?branch=main" />
+    <img alt="mypy" src="https://github.com/nerfstudio-project/viser/workflows/mypy/badge.svg?branch=main" />
+    <img alt="typescript-compile" src="https://github.com/nerfstudio-project/viser/workflows/typescript-compile/badge.svg?branch=main" />
+    <a href="https://pypi.org/project/viser/">
+        <img alt="codecov" src="https://img.shields.io/pypi/pyversions/viser" />
+    </a>
+</p>
+
+**`viser`** is a library for interactive 3D visualization + Python, inspired by
 tools like [Pangolin](https://github.com/stevenlovegrove/Pangolin),
 [rviz](https://wiki.ros.org/rviz/),
 [meshcat](https://github.com/rdeits/meshcat), and
-[Gradio](https://github.com/gradio-app/gradio).
+[Gradio](https://github.com/gradio-app/gradio). It's designed to support
+applications in 3D vision and robotics.
 
 As a standalone visualization tool, `viser` features include:
 
-- Web interface for easy use on remote machines.
-- Python API for sending 3D primitives to the browser.
-- Python-configurable inputs: buttons, checkboxes, text inputs, sliders,
-  dropdowns, gizmos.
+- Python API for visualizing 3D primitives in a web browser.
+- Python-configurable GUI elements: buttons, checkboxes, text inputs, sliders,
+  dropdowns, and more.
 - A [meshcat](https://github.com/rdeits/meshcat) and
   [tf](http://wiki.ros.org/tf2)-inspired coordinate frame tree.
 
-The `viser.infra` backend can also be used to build custom web applications
-(example:
-[the original Nerfstudio viewer](https://github.com/nerfstudio-project/nerfstudio)).
-It supports:
+The `viser.infra` backend can also be used to build custom web applications. It
+supports:
 
 - Websocket / HTTP server management, on a shared port.
 - Asynchronous server/client communication infrastructure.
 - Client state persistence logic.
 - Typed serialization; synchronization between Python dataclass and TypeScript
   interfaces.
 
-
 ## Installation
 
 You can install `viser` with `pip`:
@@ -66,8 +84,7 @@ python ./examples/02_gui.py
 After an example script is running, you can connect by navigating to the printed
 URL (default: `http://localhost:8080`).
 
-See also: our [development docs](https://nerfstudio-project.github.io/viser/development/).
-
+See also: our [development docs](https://viser.studio/development/).
 
 ## Examples
 
@@ -81,8 +98,10 @@ Source: `./examples/07_record3d_visualizer.py`
 
 https://github.com/nerfstudio-project/viser/assets/6992947/c51b4871-6cc8-4987-8751-2bf186bcb1ae
 
-Source: [WangFeng18/3d-gaussian-splatting](https://github.com/WangFeng18/3d-gaussian-splatting)
-and [heheyas/gaussian_splatting_3d](https://github.com/heheyas/gaussian_splatting_3d).
+Source:
+[WangFeng18/3d-gaussian-splatting](https://github.com/WangFeng18/3d-gaussian-splatting)
+and
+[heheyas/gaussian_splatting_3d](https://github.com/heheyas/gaussian_splatting_3d).
 
 **SMPLX visualizer**
 

diff --git a/docs/source/_static/css/custom.css b/docs/source/_static/css/custom.css
@@ -1,5 +1,5 @@
 img.sidebar-logo {
-  width: 3em;
+  width: 100%;
   margin: 1em 0 0 0;
 }
 .sidebar-brand-text {

diff --git a/docs/source/_static/viser_banner.svg b/docs/source/_static/viser_banner.svg
@@ -0,0 +1 @@
+../../../src/viser/client/public/viser_banner.svg
diff --git a/docs/source/_static/viser_banner_dark.svg b/docs/source/_static/viser_banner_dark.svg
diff --git a/docs/source/conf.py b/docs/source/conf.py
@@ -72,8 +72,8 @@
             "class": "",
         },
     ],
-    "light_logo": "viser.svg",
-    "dark_logo": "viser.svg",
+    "light_logo": "viser_banner.svg",
+    "dark_logo": "viser_banner_dark.svg",
 }
 
 # Pull documentation types from hints

diff --git a/docs/source/examples/08_smplx_visualizer.rst b/docs/source/examples/08_smplx_visualizer.rst
@@ -44,7 +44,7 @@ parameters to run this script:
             share: bool = False,
         ) -> None:
             server = viser.ViserServer(share=share)
-            server.configure_theme(control_layout="collapsible", dark_mode=True)
+            server.configure_theme(control_layout="collapsible")
             model = smplx.create(
                 model_path=str(model_path),
                 model_type=model_type,
@@ -142,6 +142,7 @@ parameters to run this script:
             # GUI elements: mesh settings + visibility.
             with tab_group.add_tab("View", viser.Icon.VIEWFINDER):
                 gui_rgb = server.add_gui_rgb("Color", initial_value=(90, 200, 255))
+                gui_rgb_text = server.add_gui_text("Color", "")
                 gui_wireframe = server.add_gui_checkbox("Wireframe", initial_value=False)
                 gui_show_controls = server.add_gui_checkbox("Handles", initial_value=False)
 

diff --git a/docs/source/examples/18_splines.rst b/docs/source/examples/18_splines.rst
@@ -22,14 +22,15 @@ Make a ball with some random splines.
 
         def main() -> None:
             server = viser.ViserServer()
-            for i in range(50):
+            for i in range(10):
                 positions = onp.random.normal(size=(30, 3)) * 3.0
                 server.add_spline_catmull_rom(
                     f"/catmull_{i}",
                     positions,
                     tension=0.5,
                     line_width=3.0,
                     color=onp.random.uniform(size=3),
+                    segments=100,
                 )
 
                 control_points = onp.random.normal(size=(30 * 2 - 2, 3)) * 3.0
@@ -39,6 +40,7 @@ Make a ball with some random splines.
                     control_points,
                     line_width=3.0,
                     color=onp.random.uniform(size=3),
+                    segments=100,
                 )
 
             while True:

diff --git a/docs/source/extras.md b/docs/source/extras.md
@@ -0,0 +1,7 @@
+# Extras
+
+<!-- prettier-ignore-start -->
+
+.. automodule:: viser.extras
+
+<!-- prettier-ignore-end -->
diff --git a/docs/source/index.md b/docs/source/index.md
@@ -2,22 +2,22 @@
 
 |mypy| |nbsp| |pyright| |nbsp| |typescript| |nbsp| |versions|
 
-`viser` is a library for interactive 3D visualization + Python, inspired by
+**viser** is a library for interactive 3D visualization + Python, inspired by
 tools like [Pangolin](https://github.com/stevenlovegrove/Pangolin),
-[rviz](https://wiki.ros.org/rviz/), and
-[meshcat](https://github.com/rdeits/meshcat).
+[rviz](https://wiki.ros.org/rviz/),
+[meshcat](https://github.com/rdeits/meshcat), and
+[Gradio](https://github.com/gradio-app/gradio). It's designed to support
+applications in 3D vision and robotics.
 
 As a standalone visualization tool, `viser` features include:
 
-- Web interface for easy use on remote machines.
-- Python API for sending 3D primitives to the browser.
-- Python-configurable inputs: buttons, checkboxes, text inputs, sliders,
-  dropdowns, gizmos.
-- Support for multiple panels and view-synchronized connections.
+- Python API for visualizing 3D primitives in a web browser.
+- Python-configurable GUI elements: buttons, checkboxes, text inputs, sliders,
+  dropdowns, and more.
+- A [meshcat](https://github.com/rdeits/meshcat) and
+  [tf](http://wiki.ros.org/tf2)-inspired coordinate frame tree.
 
-The `viser.infra` backend can also be used to build custom web applications
-(example:
-[the Nerfstudio viewer](https://github.com/nerfstudio-project/nerfstudio)). It
+The `viser.infra` backend can also be used to build custom web applications. It
 supports:
 
 - Websocket / HTTP server management, on a shared port.
@@ -39,7 +39,7 @@ pip install -e .
 
 # Run an example.
 pip install -e .[examples]
-python ./examples/4_gui.py
+python ./examples/02_gui.py
 ```
 
 After an example script is running, you can connect by navigating to the printed
@@ -78,6 +78,7 @@ URL (default: `http://localhost:8080`).
 
    ./infrastructure.md
    ./transforms.md
+   ./extras.md
 
 .. toctree::
    :caption: Examples

diff --git a/examples/08_smplx_visualizer.py b/examples/08_smplx_visualizer.py
@@ -37,7 +37,7 @@ def main(
     share: bool = False,
 ) -> None:
     server = viser.ViserServer(share=share)
-    server.configure_theme(control_layout="collapsible", dark_mode=True)
+    server.configure_theme(control_layout="collapsible")
     model = smplx.create(
         model_path=str(model_path),
         model_type=model_type,

diff --git a/src/viser/client/public/Inter-VariableFont_slnt,wght.ttf b/src/viser/client/public/Inter-VariableFont_slnt,wght.ttf
diff --git a/src/viser/client/public/viser_banner.svg b/src/viser/client/public/viser_banner.svg
diff --git a/src/viser/client/public/viser_banner_dark.svg b/src/viser/client/public/viser_banner_dark.svg
diff --git a/src/viser/client/src/App.tsx b/src/viser/client/src/App.tsx
@@ -15,7 +15,15 @@ import {
 import { BlendFunction, KernelSize } from "postprocessing";
 
 import { SynchronizedCameraControls } from "./CameraControls";
-import { Box, Image, MantineProvider, MediaQuery } from "@mantine/core";
+import {
+  Anchor,
+  Box,
+  Image,
+  MantineProvider,
+  MediaQuery,
+  Modal,
+  useMantineTheme,
+} from "@mantine/core";
 import React from "react";
 import { SceneNodeThreeObject, UseSceneTree } from "./SceneTree";
 
@@ -38,6 +46,7 @@ import { ViserModal } from "./Modal";
 import { useSceneTreeState } from "./SceneTreeState";
 import { GetRenderRequestMessage, Message } from "./WebsocketMessages";
 import { makeThrottledMessageSender } from "./WebsocketFunctions";
+import { useDisclosure } from "@mantine/hooks";
 
 export type ViewerContextContents = {
   // Zustand hooks.
@@ -124,6 +133,8 @@ function ViewerRoot() {
 function ViewerContents() {
   const viewer = React.useContext(ViewerContext)!;
   const control_layout = viewer.useGui((state) => state.theme.control_layout);
+  const [aboutModelOpened, { open: openAbout, close: closeAbout }] =
+    useDisclosure(false);
   return (
     <MantineProvider
       withGlobalStyles
@@ -163,22 +174,34 @@ function ViewerContents() {
               <FrameSynchronizedMessageHandler />
             </ViewerCanvas>
             {viewer.useGui((state) => state.theme.show_logo) ? (
-              <Box
-                sx={{
-                  position: "absolute",
-                  bottom: "1em",
-                  left: "1em",
-                  filter: "saturate(0.625)",
-                  "&:hover": {
-                    filter: "saturate(1.0)",
-                  },
-                }}
-                component="a"
-                target="_blank"
-                href="https://viser.studio"
-              >
-                <Image src="/logo.svg" width="2.5em" height="auto" />
-              </Box>
+              <>
+                <Box
+                  sx={{
+                    position: "absolute",
+                    bottom: "1em",
+                    left: "1em",
+                    filter: "saturate(0.625)",
+                    cursor: "pointer",
+                    "&:hover": {
+                      filter: "saturate(1.0)",
+                    },
+                  }}
+                  component="a"
+                  onClick={openAbout}
+                  title="About Viser"
+                >
+                  <Image src="/logo.svg" width="2.5em" height="auto" />
+                </Box>
+                <Modal
+                  opened={aboutModelOpened}
+                  onClose={closeAbout}
+                  size="xl"
+                  withCloseButton={false}
+                  ta="center"
+                >
+                  <AboutViser />
+                </Modal>
+              </>
             ) : null}
           </Box>
         </MediaQuery>
@@ -413,3 +436,40 @@ export function Root() {
     </Box>
   );
 }
+
+function AboutViser() {
+  return (
+    <Box>
+      <Image
+        src={
+          useMantineTheme().colorScheme === "dark"
+            ? "viser_banner_dark.svg"
+            : "viser_banner.svg"
+        }
+        radius="xs"
+      />
+      <Box mt="1.625em">
+        Viser is a 3D visualization toolkit developed at UC Berkeley.
+      </Box>
+      <p>
+        <Anchor
+          href="https://github.com/nerfstudio-project/viser"
+          target="_blank"
+          fw="800"
+          sx={{ "&:focus": { outline: "none" } }}
+        >
+          GitHub
+        </Anchor>
+        &nbsp;&nbsp;&bull;&nbsp;&nbsp;
+        <Anchor
+          href="https://viser.studio"
+          target="_blank"
+          fw="800"
+          sx={{ "&:focus": { outline: "none" } }}
+        >
+          Documentation
+        </Anchor>
+      </p>
+    </Box>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../../../src/viser/client/public/viser_banner.svg