I created a simple app with a Graph with an editable rectangle shape that the user can move around.
When checking the callback to read the values of the shape like x0 and x1 when a button is pressed (by simply printing the values) they stay the same even after moving around the rectangle in the app.
Is there a way to get the current position of the shape after moving it in the app ?
Also another problem is that the text box does not seem to update with the new value.
def image_layout(id, image_path):
encoded_image = base64.b64encode(open(image_path, 'rb').read())
return dcc.Graph(
id=id,
figure={
'data': [],
'layout': {
'xaxis': {
'range': RANGE,
'showline': False,
'showticklabels': False,
},
#'margin': 0,
'yaxis': {
'range': RANGE,
'scaleanchor': 'x',
'scaleratio': 1,
'showline': False,
'showticklabels': False,
},
'height': img_height,
'width': img_width,
'images': [{
'xref': 'x',
'yref': 'y',
'x': RANGE[0],
'y': RANGE[1],
'sizex': RANGE[1] - RANGE[0],
'sizey': RANGE[1] - RANGE[0],
'sizing': 'fit',
'layer': 'above',
'source': 'data:image/png;base64,{}'.format(encoded_image.decode())
}],
'shapes': [{
'type': 'rect',
'x0': 0.5,
'x1': 0.6,
'xref': 'paper',
'y0': 0.5,
'y1': 0.6,
'yref': 'y',
'line': {
'width': 4,
'color': 'rgb(255, 0, 0)',
}
}]
},
},
config={
'editable': True,
'edits': {
'shapePosition': True,
}
}
)
app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'})
app.layout = html.Div([
html.Div(className='row', children=[
html.Div(image_layout('image', image_file), className='six columns')
]),
html.Div(className='row', children=[html.Button('Blur', id='btn1')]),
dcc.Input(id='text_for_test', value='initial value', type='text')
])
@app.callback(Output('text_for_test', 'value'),
[Input('btn1', 'n_clicks'), Input('image', 'figure')])
def update_histogram(n1, fig):
print(n1)
print(str(fig['layout']['shapes'][0]['x0']))
return str(fig['layout']['shapes'][0]['x0'])
if __name__ == '__main__':
app.run_server(debug=True)