Insert figure on top of an image

Dash Python
1

Hi, everybody,
I’m trying to do graphics in Dash and I’ve run into a problem. The thing is that I would like to insert an image in which I can zoom, move in it etc (just like in a graphic) and also add some rectangles on top of it. I managed to insert the background image but I don’t know how to add more elements on top of it. The idea is to do something like what I show you in the image below.

I hope you can help me, thank you very much to everyone!

ejemplo
ejemplo1132×1132 1.13 MB

2

Hi @josemanuu welcome to the forum! You can add the image either as a layout image (https://plot.ly/python/images/) or as an image trace (https://plot.ly/python/imshow/) if you would like to interact more with the image (hover, selection, etc.). As for adding rectangles, you can add shapes to the figure, see https://plot.ly/python/shapes/. Or do you want to add the shapes by drawing (click and drag) on the image? The latter feature is not available yet with plotly/dash but we’re experimenting with it.

3

Hello,

I am having the similar issue and wondering if somebody can help me. I have an image in a .png file. I will need display this image as a background image. Additional I have some image data(in RGB format) stored in a database and I will be able to convert it to a numpy.ndarray. I would like to display the image data as a data_trace on top of the background image. I also would like to make the new image trace to be disappear/appear when I check/uncheck a checkbox. let us say I have an image file called background.png and new data in numpy.ndarray in data variable. I tried following:
backgroundimage = skio.imread(“background.png”)
figure = px.imshow(backgroundimage)
figure.add_trace(px.imshow(data))

at this point I am getting the following error:

ValueError:
Invalid element(s) received for the ‘data’ property of
Invalid elements include: [Figure({
‘data’: [{‘hovertemplate’: ‘x: %{x}
y: %{y}
color: %{z}’,
‘name’: ‘0’,
‘source’: (‘data:image/png;base64,iVBORw0K’ … ‘OLJguNb4bxpgAAAABJRU5ErkJggg==’),
‘type’: ‘image’,
‘xaxis’: ‘x’,
‘yaxis’: ‘y’}],
‘layout’: {‘margin’: {‘t’: 60},
‘template’: ‘…’,
‘xaxis’: {‘anchor’: ‘y’, ‘domain’: [0.0, 1.0]},
‘yaxis’: {‘anchor’: ‘x’, ‘domain’: [0.0, 1.0]}}
})]

The 'data' property is a tuple of trace instances
that may be specified as:
  - A list or tuple of trace instances
    (e.g. [Scatter(...), Bar(...)])
  - A single trace instance
    (e.g. Scatter(...), Bar(...), etc.)
  - A list or tuple of dicts of string/value properties where:
    - The 'type' property specifies the trace type
        One of: ['bar', 'barpolar', 'box', 'candlestick',
                 'carpet', 'choropleth', 'choroplethmapbox',
                 'cone', 'contour', 'contourcarpet',
                 'densitymapbox', 'funnel', 'funnelarea',
                 'heatmap', 'heatmapgl', 'histogram',
                 'histogram2d', 'histogram2dcontour', 'icicle',
                 'image', 'indicator', 'isosurface', 'mesh3d',
                 'ohlc', 'parcats', 'parcoords', 'pie',
                 'pointcloud', 'sankey', 'scatter',
                 'scatter3d', 'scattercarpet', 'scattergeo',
                 'scattergl', 'scattermapbox', 'scatterpolar',
                 'scatterpolargl', 'scattersmith',
                 'scatterternary', 'splom', 'streamtube',
                 'sunburst', 'surface', 'table', 'treemap',
                 'violin', 'volume', 'waterfall']

    - All remaining properties are passed to the constructor of
      the specified trace type

    (e.g. [{'type': 'scatter', ...}, {'type': 'bar, ...}])

Looks like I can’t use px.imshow() to create a trace to be used in add_trace. Can somebody please help me?
thanks

4

I have figured it out. Instead of using:
figure.add_trace(px.imshow(data)) as I showed above I used following:

figure.add_trace(go.Image(z=data, colormodel=‘rgba256’)) assuming data is a two dimensional numpy.ndarry and each pixel is a 4 digits array with last digit representing transparency.