Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Viser slider support display controls #341

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Viser slider support display controls #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
08e3d48
Pass session_id to viser server via message listener
taoyudong Nov 20, 2024
d1dd923
feat: display slider input controls & fix type errors
taoyudong Nov 22, 2024
1f1a70e
fix: improve style
taoyudong Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/viser/_gui_api.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1267,6 +1267,7 @@ def add_slider(
visible: bool = True,
hint: str | None = None,
order: float | None = None,
hideControls: bool = True
) -> GuiSliderHandle[IntOrFloat]:
"""Add a slider to the GUI. Types of the min, max, step, and initial value should match.

Expand All @@ -1283,6 +1284,7 @@ def add_slider(
visible: Whether the slider is visible.
hint: Optional hint to display on hover.
order: Optional ordering, smallest values will be displayed first.
hideControls: hide the button control in the number input

Returns:
A handle that can be used to interact with the GUI element.
Expand Down Expand Up @@ -1325,6 +1327,7 @@ def add_slider(
precision=_compute_precision_digits(step),
visible=visible,
disabled=disabled,
hideControls=hideControls,
_marks=tuple(
GuiSliderMark(value=float(x[0]), label=x[1])
if isinstance(x, tuple)
Expand Down
2 changes: 2 additions & 0 deletions src/viser/_messages.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -949,6 +949,8 @@ class GuiSliderProps(GuiBaseProps):
step: float
"""Step size for the slider. Synchronized automatically when assigned."""
precision: int
"""display the controls on input number"""
hideControls: bool
"""Number of decimal places to display for the slider value. Synchronized automatically when assigned."""
_marks: Optional[Tuple[GuiSliderMark, ...]] = None
"""(Private) Optional tuple of GuiSliderMark objects to display custom marks on the slider. Synchronized automatically when assigned."""
Expand Down
85 changes: 57 additions & 28 deletions src/viser/client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-662WDGHPZZ"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);

<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-662WDGHPZZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());

gtag("config", "G-662WDGHPZZ");
</script>
<script>
async function sendSessionID2Server(session_id) {
labels = [].filter.call(
document.getElementsByTagName("label"),
el => el.textContent === "Session ID"
)
if (labels.length > 0) {
input = labels[0].parentElement.parentElement.parentElement.getElementsByTagName("input")[0]
console.log("Setting session id", session_id, input);
input.value = session_id;
input_event = new Event('change', { bubbles: true })
input_event.simulated = true
if (input._valueTracker) {
input._valueTracker.setValue("this-is-a-fake-dummy-string");
}
input.dispatchEvent(input_event);
} else {
console.log("Viser not loaded yet, retrying in 1s");
setTimeout(() => sendSessionID2Server(session_id), 1000);
}
gtag("js", new Date());
}

gtag("config", "G-662WDGHPZZ");
</script>
<meta charset="utf-8" />
<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" />
<!--
window.addEventListener("message", (event) => {
if (typeof event.data === 'string' && event.data.startsWith("SESSION_ID:")) {
console.log("Received message", event.data);
sendSessionID2Server(event.data.substring(11));
}
});
</script>
<meta charset="utf-8" />
<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" />
<!--
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/
-->
<link rel="manifest" href="/manifest.json" />
<title>Viser</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
<link rel="manifest" href="/manifest.json" />
<title>Viser</title>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>

</html>
1 change: 1 addition & 0 deletions src/viser/client/src/WebsocketMessages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -735,6 +735,7 @@ export interface GuiSliderMessage {
max: number;
step: number;
precision: number;
hideControls: boolean;
_marks: { value: number; label: string | null }[] | null;
};
}
Expand Down
19 changes: 5 additions & 14 deletions src/viser/client/src/components/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default function SliderComponent({
max,
precision,
step,
hideControls,
_marks: marks,
},
}: GuiSliderMessage) {
Expand All @@ -30,7 +31,7 @@ export default function SliderComponent({
const updateValue = (value: number) => setValue(uuid, value);
const colorScheme = useMantineColorScheme().colorScheme;
const input = (
<Flex justify="space-between">
<Flex justify="space-between" align="center">
<Slider
id={uuid}
className={marks === null ? sliderDefaultMarks : undefined}
Expand Down Expand Up @@ -63,8 +64,6 @@ export default function SliderComponent({
: theme.primaryColor,
},
})}
pt="0.3em"
pb="0.2em"
showLabelOnHover={false}
min={min}
max={max}
Expand Down Expand Up @@ -97,18 +96,10 @@ export default function SliderComponent({
size="xs"
min={min}
max={max}
hideControls
hideControls = {hideControls === undefined ? true: hideControls}
step={step ?? undefined}
// precision={precision}
style={{ width: "3rem" }}
styles={{
input: {
padding: "0.375em",
letterSpacing: "-0.5px",
minHeight: "1.875em",
height: "1.875em",
},
}}
decimalScale={precision}
style={{ width: "4rem" }}
ml="xs"
/>
</Flex>
Expand Down