Add corner logo (#117)

* Add corner logo * Update example markdown * Remove unused imports
nerfstudio-project · Oct 20, 2023 · 64ced0c · 64ced0c
1 parent ef64ff7
commit 64ced0c
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 23 deletions.
diff --git a/examples/13_theming.py b/examples/13_theming.py
@@ -31,8 +31,8 @@
     ),
 )
 image = TitlebarImage(
-    image_url_light="https://docs.nerf.studio/en/latest/_static/imgs/logo.png",
-    image_url_dark="https://docs.nerf.studio/en/latest/_static/imgs/logo-dark.png",
+    image_url_light="https://docs.nerf.studio/_static/imgs/logo.png",
+    image_url_dark="https://docs.nerf.studio/_static/imgs/logo-dark.png",
     image_alt="NerfStudio Logo",
     href="https://docs.nerf.studio/",
 )
@@ -48,6 +48,7 @@
 )
 titlebar = server.add_gui_checkbox("Titlebar", initial_value=True)
 dark_mode = server.add_gui_checkbox("Dark mode", initial_value=True)
+show_logo = server.add_gui_checkbox("Show logo", initial_value=True)
 brand_color = server.add_gui_rgb("Brand color", (230, 180, 30))
 synchronize = server.add_gui_button("Apply theme", icon=viser.Icon.CHECK)
 
@@ -57,9 +58,10 @@
 def synchronize_theme() -> None:
     global gui_theme_code
     server.configure_theme(
-        dark_mode=dark_mode.value,
         titlebar_content=titlebar_theme if titlebar.value else None,
         control_layout=control_layout.value,
+        dark_mode=dark_mode.value,
+        show_logo=show_logo.value,
         brand_color=brand_color.value,
     )
     server.world_axes.visible = True
@@ -70,9 +72,10 @@ def synchronize_theme() -> None:
         ### Current applied theme
         ```
         server.configure_theme(
-            dark_mode={dark_mode.value},
             titlebar_content={"titlebar_content" if titlebar.value else None},
             control_layout="{control_layout.value}",
+            dark_mode={dark_mode.value},
+            show_logo={show_logo.value},
             brand_color={brand_color.value},
         )
         ```

diff --git a/src/viser/_message_api.py b/src/viser/_message_api.py
@@ -177,6 +177,7 @@ def configure_theme(
         titlebar_content: Optional[theme.TitlebarConfig] = None,
         control_layout: Literal["floating", "collapsible", "fixed"] = "floating",
         dark_mode: bool = False,
+        show_logo: bool = True,
         brand_color: Optional[Tuple[int, int, int]] = None,
     ) -> None:
         """Configure the viser front-end's visual appearance."""
@@ -223,6 +224,7 @@ def configure_theme(
                 titlebar_content=titlebar_content,
                 control_layout=control_layout,
                 dark_mode=dark_mode,
+                show_logo=show_logo,
                 colors=colors_cast,
             ),
         )

diff --git a/src/viser/_messages.py b/src/viser/_messages.py
@@ -521,8 +521,9 @@ class ThemeConfigurationMessage(Message):
 
     titlebar_content: Optional[theme.TitlebarConfig]
     control_layout: Literal["floating", "collapsible", "fixed"]
-    colors: Optional[Tuple[str, str, str, str, str, str, str, str, str, str]]
+    show_logo: bool
     dark_mode: bool
+    colors: Optional[Tuple[str, str, str, str, str, str, str, str, str, str]]
 
 
 @dataclasses.dataclass

diff --git a/src/viser/client/index.html b/src/viser/client/index.html
@@ -2,11 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.svg" />
+    <link rel="icon" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <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
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/src/viser/client/public/favicon.svg → src/viser/client/public/logo.svg b/src/viser/client/public/favicon.svg → src/viser/client/public/logo.svg
diff --git a/src/viser/client/src/App.tsx b/src/viser/client/src/App.tsx
@@ -15,7 +15,7 @@ import {
 import { BlendFunction, KernelSize } from "postprocessing";
 
 import { SynchronizedCameraControls } from "./CameraControls";
-import { Box, MantineProvider, MediaQuery } from "@mantine/core";
+import { Box, Image, MantineProvider, MediaQuery } from "@mantine/core";
 import React from "react";
 import { SceneNodeThreeObject, UseSceneTree } from "./SceneTree";
 
@@ -149,11 +149,30 @@ function ViewerContents() {
                 theme.colorScheme === "light" ? "#fff" : theme.colors.dark[9],
               flexGrow: 1,
               width: "10em",
+              position: "relative",
             })}
           >
             <ViewerCanvas>
               <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>
+            ) : null}
           </Box>
         </MediaQuery>
         <ControlPanel control_layout={control_layout} />

diff --git a/src/viser/client/src/ControlPanel/GuiState.tsx b/src/viser/client/src/ControlPanel/GuiState.tsx
@@ -62,6 +62,7 @@ const cleanGuiState: GuiState = {
     titlebar_content: null,
     control_layout: "floating",
     dark_mode: false,
+    show_logo: true,
     colors: null,
   },
   label: "",

diff --git a/src/viser/client/src/ControlPanel/ServerControls.tsx b/src/viser/client/src/ControlPanel/ServerControls.tsx
@@ -1,14 +1,12 @@
 import { ViewerContext } from "../App";
 import {
-  Anchor,
   Button,
-  Box,
   Divider,
   Stack,
   Switch,
   TextInput,
 } from "@mantine/core";
-import { IconBrandGithub, IconHomeMove, IconPhoto } from "@tabler/icons-react";
+import { IconHomeMove, IconPhoto } from "@tabler/icons-react";
 import { Stats } from "@react-three/drei";
 import React from "react";
 import SceneTreeTable from "./SceneTreeTable";
@@ -121,16 +119,6 @@ export default function ServerControls() {
         <Divider mt="xs" />
         Scene tree
         <MemoizedTable compact={true} />
-        <Anchor
-          mt="xs"
-          href="https://github.com/nerfstudio-project/viser"
-          target="_blank"
-          sx={{ display: "flex", alignItems: "center", gap: "0.3em" }}
-          color="dimmed"
-        >
-          <IconBrandGithub height="1.5em" style={{ display: "block" }} />{" "}
-          <Box>nerfstudio-project/viser</Box>
-        </Anchor>
       </Stack>
     </>
   );

diff --git a/src/viser/client/src/WebsocketMessages.tsx b/src/viser/client/src/WebsocketMessages.tsx
@@ -345,7 +345,7 @@ export interface _GuiAddInputBase {
   hint: string | null;
   initial_value: any;
 }
-/** GuiAddButtonMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'bool', color: "Optional[Literal['dark', 'gray', 'red', 'pink', 'grape', 'violet', 'indigo', 'blue', 'cyan', 'green', 'lime', 'yellow', 'orange', 'teal']]", icon_base64: 'Optional[str]')
+/** GuiAddButtonMessage(order: 'float', id: 'str', label: 'str', container_id: 'str', hint: 'Optional[str]', initial_value: 'bool', color: "Optional[Literal[('dark', 'gray', 'red', 'pink', 'grape', 'violet', 'indigo', 'blue', 'cyan', 'green', 'lime', 'yellow', 'orange', 'teal')]]", icon_base64: 'Optional[str]')
  *
  * (automatically generated)
  */
@@ -607,6 +607,8 @@ export interface ThemeConfigurationMessage {
     } | null;
   } | null;
   control_layout: "floating" | "collapsible" | "fixed";
+  show_logo: boolean;
+  dark_mode: boolean;
   colors:
     | [
         string,
@@ -621,7 +623,6 @@ export interface ThemeConfigurationMessage {
         string,
       ]
     | null;
-  dark_mode: boolean;
 }
 /** Message from server->client carrying Catmull-Rom spline information.
  *