Update images in dash

Dash Python
1

I am trying to insert the image’s directory and then the image updates automatically in dash

import hyperspy.api as hs
import numpy as np
import plotly.express as px
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
import plotly.graph_objects as go

app = dash.Dash(__name__,)
server = app.server


app.layout = html.Div(children=[
        html.Div(children=[
            html.H3(children='Filename'),
            dcc.Input(id='filename-input',
                  value=r'C \Users\User\Documents\test\particles.dm3',
                  style={'width':'100%'}
                  )]),
        
        html.Div(children=[dcc.Graph(id='image')],
                 style={'display':'inline-block', 'vertical-align': 'top'})
       
    ]
)

@app.callback(
    Output("image", "figure"),
    Input("filename-input", "value"),
   
)
def update_image(filename):
    data = hs.load(filename)
   
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)
2

Hi,

You need to create a Plotly figure from the image data. This is usually done with imshow, but I am not sure if it supports the format you have… Another alternative is to use html.Iframe. Might also be a better idea to have the directory hardcoded and not as part of the Input value.