I am trying to determine the viability of dash as a replacement for a MATLAB GUI that I have created in the past. It appears, that dash may be a suitable solution, but I have come up against one problem that I’m having trouble figuring out how to resolve. However, I’m confident dash must have a solution. Here’s my problem.
- I have a bunch of images stored in a 3D array with dimensions of frames X rows X columns.
- I want an image graph and a slider such that when the slider is moved, it changes the image frame. It needs to update efficiently .
My code looks like this:
import dash import dash_core_components as dcc import dash_html_components as html import h5py import plotly.express as px fig = px.imshow(image_frames, color_continuous_scale='gray') fig.update_layout(width=400, height=400) external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) app.layout = html.Div(children=[ html.H1(children='Hello Dash'), dcc.Graph( id='example-graph', animate=True, figure=fig ), dcc.Slider( id='frame-slider', min=0, max=len(image_frames), value=0, step=1 ) ]) @app.callback( dash.dependencies.Output('example-graph', 'figure'), [dash.dependencies.Input('frame-slider', 'value')]) def update_output(value): print(value) fig = px.imshow(image_frames[value], color_continuous_scale='gray') fig.update_layout(width=400, height=400) return fig if __name__ == '__main__': app.run_server(debug=True, port=2000)
The trouble right now is that it takes too long to update the figure to be suitable for my application. I need it to be able to play through the image data at no less than 4 frames per second. I suspect that the reason it takes so long is that I am returning an completely new figure rather than only updating the image data. How can I update the dcc.Graph image data alone rather than replacing the entire figure?