Update Dash Graph Image Data Faster

Dash Python
1

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[0], 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?

1 Like
2

This might help:
Use the html.Img and update the source property.