Save plotly camera position before any page reload

🎈 Using Streamlit
, , ,
1

Hi,

I have an application with 3D plotly Surface.

There are pretty much of Streamlit GUI there and I would like the Streamlit to save plotly camera position before any page reload so that after any user button press he sees the same view.

The documentation about camera control is described here.
I can’t understand how can I save camera postion before any page reload (user interaction with Streamlit).

2

Hello @kerim371,

One approach is to use a client-side callback in Plotly Dash, which can be integrated into Streamlit via components. Once you have a mechanism to capture the camera position, you can store this information in Streamlit’s session state.

import streamlit as st
import plotly.graph_objects as go

import numpy as np
x = np.outer(np.linspace(-2, 2, 30), np.ones(30))
y = x.copy().T
z = np.cos(x ** 2 + y ** 2)

fig = go.Figure(data=[go.Surface(z=z, x=x, y=y)])

# Check if there's already a camera position saved in session state
if 'camera_position' in st.session_state:
    fig.update_layout(scene_camera=st.session_state['camera_position'])

st.plotly_chart(fig, use_container_width=True)

if st.button('Save Camera Position'):
    camera_position = {
        "up": {"x": 0, "y": 0, "z": 1},
        "center": {"x": 0, "y": 0, "z": 0},
        "eye": {"x": 1.25, "y": 1.25, "z": 1.25}
    }
    st.session_state['camera_position'] = camera_position

Hope this helps!

Kind Regards,
Sahir Maharaj
Data Scientist | AI Engineer

P.S. Lets connect on LinkedIn!

➤ Want me to build your solution? Lets chat about how I can assist!
➤ Join my Medium community of 30k readers! Sharing my knowledge about data science and AI
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ 100+ FREE Power BI Themes: Download Now

3 Likes
3

Thank you, sounds like a possible solution but don’t know yet how to implement callback to Plotly camera