diff --git a/examples/02_gui.py b/examples/02_gui.py index 425ced3db..72976934c 100644 --- a/examples/02_gui.py +++ b/examples/02_gui.py @@ -10,9 +10,7 @@ import time import numpy as onp -import plotly.express as px import viser -from PIL import Image def main() -> None: @@ -94,45 +92,6 @@ def _(_) -> None: point_positions = onp.random.uniform(low=-1.0, high=1.0, size=(5000, 3)) color_coeffs = onp.random.uniform(0.4, 1.0, size=(point_positions.shape[0])) - with server.add_gui_folder("Plots"): - plot_dropdown = server.add_gui_dropdown( - "Plot", - options=["Image", "Line"], - initial_value="Image", - ) - - cal_img_path = "examples/assets/Cal_logo.png" - img = Image.open(cal_img_path) - fig = px.imshow(img) - fig.update_layout( - margin=dict(l=20, r=20, t=20, b=20), - ) - image_plot = server.add_gui_plotly(figure=fig, aspect_ratio=1.0, visible=True) - - x_data = onp.linspace(0, 6 * onp.pi, 50) - y_data = onp.sin(x_data) * 10 - x_data, y_data = list(x_data), list(y_data) - - fig = px.line(x=x_data, y=y_data, labels={"x": "x", "y": "sin(x)"}) - fig.update_layout( - margin=dict(l=20, r=20, t=20, b=20), - ) - line_plot = server.add_gui_plotly( - figure=fig, - aspect_ratio=1.0, - visible=False, - ) - - @plot_dropdown.on_update - def _(_) -> None: - """Callback for when the plot dropdown changes.""" - if plot_dropdown.value == "Image": - image_plot.visible = True - line_plot.visible = False - elif plot_dropdown.value == "Line": - image_plot.visible = False - line_plot.visible = True - counter = 0 while True: # We can set the value of an input to a particular value. Changes are diff --git a/examples/23_plotly.py b/examples/23_plotly.py new file mode 100644 index 000000000..37ae6bd16 --- /dev/null +++ b/examples/23_plotly.py @@ -0,0 +1,106 @@ +"""Plotly. + +Examples of visualizing plotly plots in Viser.""" + +import time + +import numpy as onp +import plotly.express as px +import plotly.graph_objects as go +import viser +from PIL import Image + +server = viser.ViserServer() + +# We want to showcase multiple types of plots, so we'll have a dropdown to switch between them. +# Note that this isn't an exhaustive list of plot types! +# We should be able to support all plots in https://plotly.com/python/. +plot_dropdown = server.add_gui_dropdown( + "Plot", + options=["Line", "Image", "3D Scatter"], + initial_value="Line", +) + +# Plot type 1: Line plot. +def create_sinusoidal_wave(t: float) -> go.Figure: + """Create a sinusoidal wave plot, starting at time t.""" + x_data = onp.linspace(t, t + 6 * onp.pi, 50) + y_data = onp.sin(x_data) * 10 + x_data, y_data = list(x_data), list(y_data) + + fig = px.line(x=x_data, y=y_data, labels={"x": "x", "y": "sin(x)"}, title="Sinusoidal Wave") + + fig.layout.title.automargin = True # type: ignore -- this sets the margins to be tight around the title. + fig.update_layout( + margin=dict(l=20, r=20, t=20, b=20), + ) # Reduce plot margins. + + return fig + +line_plot_time = 0 +line_plot = server.add_gui_plotly( + figure=create_sinusoidal_wave(line_plot_time), + visible=True, +) +line_plot.font = "Inter" # You can also update the font family of the plot. + + +# Plot type 2: Image plot. +fig = px.imshow(Image.open("examples/assets/Cal_logo.png")) +fig.update_layout( + margin=dict(l=20, r=20, t=20, b=20), +) +image_plot = server.add_gui_plotly( + figure=fig, + aspect_ratio=1.0, + visible=False, +) + + +# Plot type 3: 3D Scatter plot. +fig = px.scatter_3d( + px.data.iris(), + x="sepal_length", + y="sepal_width", + z="petal_width", + color="species", +) +fig.update_layout(legend=dict( + yanchor="top", + y=0.99, + xanchor="left", + x=0.01 +)) +fig.update_layout( + margin=dict(l=20, r=20, t=20, b=20), +) +scatter_plot = server.add_gui_plotly( + figure=fig, + aspect_ratio=1.0, + visible=False, +) + + +@plot_dropdown.on_update +def _(_) -> None: + """Callback for when the plot dropdown changes.""" + if plot_dropdown.value == "Image": + image_plot.visible = True + line_plot.visible = False + scatter_plot.visible = False + elif plot_dropdown.value == "Line": + image_plot.visible = False + line_plot.visible = True + scatter_plot.visible = False + elif plot_dropdown.value == "3D Scatter": + image_plot.visible = False + line_plot.visible = False + scatter_plot.visible = True + + +while True: + # Update the line plot. + line_plot_time += 0.1 + line_plot.figure = create_sinusoidal_wave(line_plot_time) + + time.sleep(0.01)