Add hints/tooltips

nerfstudio-project · Jun 19, 2023 · b958b64 · b958b64
1 parent 49bd503
commit b958b64
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 45 deletions.
diff --git a/examples/11_colmap_visualizer.py b/examples/11_colmap_visualizer.py
@@ -39,7 +39,7 @@ def main(
     cameras = read_cameras_binary(colmap_path / "cameras.bin")
     images = read_images_binary(colmap_path / "images.bin")
     points3d = read_points3d_binary(colmap_path / "points3D.bin")
-    gui_reset_up = server.add_gui_button("Reset up direction")
+    gui_reset_up = server.add_gui_button("Reset up direction", hint="Set the camera control 'up' direction to the current camera's 'up'.")
 
     @gui_reset_up.on_click
     def _(_) -> None:

diff --git a/viser/_gui.py b/viser/_gui.py
@@ -67,6 +67,7 @@ class _GuiHandleState(Generic[T]):
     order: float
     id: str
     initial_value: T
+    hint: Optional[str]
 
 
 @dataclasses.dataclass
@@ -245,6 +246,7 @@ def options(self, options: Iterable[StringType]) -> None:
                 id=self._impl.id,
                 label=self._impl.label,
                 folder_labels=self._impl.folder_labels,
+                hint=self._impl.hint,
                 initial_value=self._impl.initial_value,
                 options=self._impl_options,
             )

diff --git a/viser/_message_api.py b/viser/_message_api.py
@@ -229,6 +229,7 @@ def add_gui_button(
         label: str,
         disabled: bool = False,
         visible: bool = True,
+        hint: Optional[str] = None,
     ) -> GuiButtonHandle:
         """Add a button to the GUI. The value of this input is set to `True` every time
         it is clicked; to detect clicks, we can manually set it back to `False`."""
@@ -243,6 +244,7 @@ def add_gui_button(
                     id=id,
                     label=label,
                     folder_labels=tuple(self._gui_folder_labels),
+                    hint=hint,
                     initial_value=False,
                 ),
                 disabled=disabled,
@@ -263,6 +265,7 @@ def add_gui_button_group(
         options: Tuple[TLiteralString, ...],
         visible: bool = True,
         disabled: bool = False,
+        hint: Optional[str] = None,
     ) -> GuiButtonGroupHandle[TLiteralString]:
         ...
 
@@ -273,6 +276,7 @@ def add_gui_button_group(
         options: Tuple[TString, ...],
         visible: bool = True,
         disabled: bool = False,
+        hint: Optional[str] = None,
     ) -> GuiButtonGroupHandle[TString]:
         ...
 
@@ -282,6 +286,7 @@ def add_gui_button_group(
         options: Tuple[TLiteralString, ...] | Tuple[TString, ...],
         visible: bool = True,
         disabled: bool = False,
+        hint: Optional[str] = None,
     ) -> GuiButtonGroupHandle[Any]:  # Return types are specified in overloads.
         """Add a button group to the GUI."""
         initial_value = options[0]
@@ -294,6 +299,7 @@ def add_gui_button_group(
                     id=id,
                     label=label,
                     folder_labels=tuple(self._gui_folder_labels),
+                    hint=hint,
                     initial_value=initial_value,
                     options=options,
                 ),
@@ -320,6 +326,7 @@ def add_gui_checkbox(
                 id=id,
                 label=label,
                 folder_labels=tuple(self._gui_folder_labels),
+                hint=hint,
                 initial_value=initial_value,
             ),
             disabled=disabled,
@@ -344,6 +351,7 @@ def add_gui_text(
                 id=id,
                 label=label,
                 folder_labels=tuple(self._gui_folder_labels),
+                hint=hint,
                 initial_value=initial_value,
             ),
             disabled=disabled,
@@ -387,6 +395,7 @@ def add_gui_number(
                 id=id,
                 label=label,
                 folder_labels=tuple(self._gui_folder_labels),
+                hint=hint,
                 initial_value=initial_value,
                 min=min,
                 max=max,
@@ -431,6 +440,7 @@ def add_gui_vector2(
                 id=id,
                 label=label,
                 folder_labels=tuple(self._gui_folder_labels),
+                hint=hint,
                 initial_value=initial_value,
                 min=min,
                 max=max,
@@ -475,6 +485,7 @@ def add_gui_vector3(
                 id=id,
                 label=label,
                 folder_labels=tuple(self._gui_folder_labels),
+                hint=hint,
                 initial_value=initial_value,
                 min=min,
                 max=max,
@@ -530,6 +541,7 @@ def add_gui_dropdown(
                     id=id,
                     label=label,
                     folder_labels=tuple(self._gui_folder_labels),
+                    hint=hint,
                     initial_value=initial_value,
                     options=tuple(options),
                 ),
@@ -577,6 +589,7 @@ def add_gui_slider(
                 id=id,
                 label=label,
                 folder_labels=tuple(self._gui_folder_labels),
+                hint=hint,
                 min=min,
                 max=max,
                 step=step,
@@ -605,6 +618,7 @@ def add_gui_rgb(
                 id=id,
                 label=label,
                 folder_labels=tuple(self._gui_folder_labels),
+                hint=hint,
                 initial_value=initial_value,
             ),
             disabled=disabled,
@@ -628,6 +642,7 @@ def add_gui_rgba(
                 id=id,
                 label=label,
                 folder_labels=tuple(self._gui_folder_labels),
+                hint=hint,
                 initial_value=initial_value,
             ),
             disabled=disabled,
@@ -1022,6 +1037,7 @@ def _create_gui_input(
             id=message.id,
             order=message.order,
             initial_value=initial_value,
+            hint=message.hint,
         )
         self._gui_handle_state_from_id[handle_state.id] = handle_state
         handle_state.cleanup_cb = lambda: self._gui_handle_state_from_id.pop(

diff --git a/viser/_messages.py b/viser/_messages.py
@@ -274,6 +274,7 @@ class _GuiAddMessageBase(Message):
     id: str
     label: str
     folder_labels: Tuple[str, ...]
+    hint: Optional[str]
 
 
 @dataclasses.dataclass

diff --git a/viser/client/build/asset-manifest.json b/viser/client/build/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "/static/css/main.82973013.css",
-    "main.js": "/static/js/main.fb147a9e.js",
+    "main.js": "/static/js/main.679eff5c.js",
     "index.html": "/index.html",
     "main.82973013.css.map": "/static/css/main.82973013.css.map",
-    "main.fb147a9e.js.map": "/static/js/main.fb147a9e.js.map"
+    "main.679eff5c.js.map": "/static/js/main.679eff5c.js.map"
   },
   "entrypoints": [
     "static/css/main.82973013.css",
-    "static/js/main.fb147a9e.js"
+    "static/js/main.679eff5c.js"
   ]
 }
diff --git a/viser/client/build/index.html b/viser/client/build/index.html
@@ -1 +1 @@
-<!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="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.fb147a9e.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></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="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.679eff5c.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/...r/client/build/static/js/main.fb147a9e.js → ...r/client/build/static/js/main.679eff5c.js b/...r/client/build/static/js/main.fb147a9e.js → ...r/client/build/static/js/main.679eff5c.js
diff --git a/...ld/static/js/main.fb147a9e.js.LICENSE.txt → ...ld/static/js/main.679eff5c.js.LICENSE.txt b/...ld/static/js/main.fb147a9e.js.LICENSE.txt → ...ld/static/js/main.679eff5c.js.LICENSE.txt
diff --git a/...ient/build/static/js/main.fb147a9e.js.map → ...ient/build/static/js/main.679eff5c.js.map b/...ient/build/static/js/main.fb147a9e.js.map → ...ient/build/static/js/main.679eff5c.js.map
diff --git a/viser/client/src/ControlPanel/Generated.tsx b/viser/client/src/ControlPanel/Generated.tsx
@@ -15,6 +15,7 @@ import {
   Stack,
   Text,
   TextInput,
+  Tooltip,
 } from "@mantine/core";
 import { makeThrottledMessageSender } from "../WebsocketInterface";
 
@@ -144,47 +145,45 @@ function GeneratedInput({ conf }: { conf: GuiConfig }) {
       break;
     case "GuiAddSliderMessage":
       input = (
-        <>
-          <Flex justify="space-between">
-            <Box sx={{ flexGrow: 1 }}>
-              <Slider
-                id={conf.id}
-                size="sm"
-                pt="0.3rem"
-                showLabelOnHover={false}
-                min={conf.min}
-                max={conf.max}
-                step={conf.step ?? undefined}
-                precision={conf.precision}
-                value={value}
-                onChange={updateValue}
-                marks={[{ value: conf.min }, { value: conf.max }]}
-                disabled={disabled}
-              />
-              <Flex justify="space-between" sx={{ marginTop: "-0.2em" }}>
-                <Text fz="0.7rem" c="dimmed">
-                  {conf.min}
-                </Text>
-                <Text fz="0.7rem" c="dimmed">
-                  {conf.max}
-                </Text>
-              </Flex>
-            </Box>
-            <NumberInput
-              value={value}
-              onChange={updateValue}
-              size="xs"
+        <Flex justify="space-between">
+          <Box sx={{ flexGrow: 1 }}>
+            <Slider
+              id={conf.id}
+              size="sm"
+              pt="0.3rem"
+              showLabelOnHover={false}
               min={conf.min}
               max={conf.max}
-              hideControls
               step={conf.step ?? undefined}
               precision={conf.precision}
-              sx={{ width: "3rem", height: "1rem", minHeight: "1rem" }}
-              styles={{ input: { padding: "0.3rem" } }}
-              ml="xs"
+              value={value}
+              onChange={updateValue}
+              marks={[{ value: conf.min }, { value: conf.max }]}
+              disabled={disabled}
             />
-          </Flex>
-        </>
+            <Flex justify="space-between" sx={{ marginTop: "-0.2em" }}>
+              <Text fz="0.7rem" c="dimmed">
+                {conf.min}
+              </Text>
+              <Text fz="0.7rem" c="dimmed">
+                {conf.max}
+              </Text>
+            </Flex>
+          </Box>
+          <NumberInput
+            value={value}
+            onChange={updateValue}
+            size="xs"
+            min={conf.min}
+            max={conf.max}
+            hideControls
+            step={conf.step ?? undefined}
+            precision={conf.precision}
+            sx={{ width: "3rem", height: "1rem", minHeight: "1rem" }}
+            styles={{ input: { padding: "0.3rem" } }}
+            ml="xs"
+          />
+        </Flex>
       );
       break;
     case "GuiAddNumberMessage":
@@ -315,6 +314,13 @@ function GeneratedInput({ conf }: { conf: GuiConfig }) {
       );
   }
 
+  if (conf.hint !== null)
+    input = (
+      <Tooltip label={conf.hint} multiline w="15rem" withArrow openDelay={500}>
+        {input}
+      </Tooltip>
+    );
+
   if (labeled)
     return <LabeledInput id={conf.id} label={conf.label} input={input} />;
   else return input;

diff --git a/viser/client/src/WebsocketMessages.tsx b/viser/client/src/WebsocketMessages.tsx
@@ -139,13 +139,15 @@ export interface _GuiAddMessageBase {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
 }
 export interface GuiAddButtonMessage {
   type: "GuiAddButtonMessage";
   order: number;
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: boolean;
 }
 export interface GuiAddSliderMessage {
@@ -154,6 +156,7 @@ export interface GuiAddSliderMessage {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   min: number;
   max: number;
   step: number | null;
@@ -166,6 +169,7 @@ export interface GuiAddNumberMessage {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: number;
   precision: number;
   step: number;
@@ -178,6 +182,7 @@ export interface GuiAddRgbMessage {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: [number, number, number];
 }
 export interface GuiAddRgbaMessage {
@@ -186,6 +191,7 @@ export interface GuiAddRgbaMessage {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: [number, number, number, number];
 }
 export interface GuiAddCheckboxMessage {
@@ -194,6 +200,7 @@ export interface GuiAddCheckboxMessage {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: boolean;
 }
 export interface GuiAddVector2Message {
@@ -202,6 +209,7 @@ export interface GuiAddVector2Message {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: [number, number];
   min: [number, number] | null;
   max: [number, number] | null;
@@ -214,6 +222,7 @@ export interface GuiAddVector3Message {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: [number, number, number];
   min: [number, number, number] | null;
   max: [number, number, number] | null;
@@ -226,6 +235,7 @@ export interface GuiAddTextMessage {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: string;
 }
 export interface GuiAddDropdownMessage {
@@ -234,6 +244,7 @@ export interface GuiAddDropdownMessage {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: string;
   options: string[];
 }
@@ -243,6 +254,7 @@ export interface GuiAddButtonGroupMessage {
   id: string;
   label: string;
   folder_labels: string[];
+  hint: string | null;
   initial_value: string;
   options: string[];
 }