I’m trying to plot a set of boxes on top of an image to express a characteristic of each of these boxes (colourfulness, to be precise).
My idea is to get something like this:
And, on hover, to get the colourfulness value of that specific box. Now, these boxes and the colourfulness of the part of the image contained inside of them are already calculated and stored in a DataFrame which looks like this:
"colourfulness_test (1).jpeg": [
{
"img_rect": [
0.0,
0.0,
256.0,
192.0
],
"M": 40.86526507358546
},
{
"img_rect": [
256.0,
0.0,
512.0,
192.0
],
"M": 43.13601554186694
},
... ]
}
The name of the column is the name of the file, and M is the colourfulness specified by the square (x0, y0, x1, y1) . I’m trying to add the image on the background following the docs but there is a strange behaviour regarding the size. This is the snippet of code I’m using.
import plotly.graph_objects as go
from PIL import Image
fig = go.Figure()
# Add trace
# Instead of the whole dictionary of boxes, I'm using this tailored
# arrays with just two boxes to do small tests.
fig.add_trace(
go.Scatter(
x=[0, 200, 200, 0, 0, None, 500, 700, 700, 500, 500],
y=[0, 0, 200, 200, 0, None, 500, 500, 700, 700, 500],
customdata=[10,10,10,10,10,20,20,20,20,20,20],
hovertemplate="%{customdata}")
)
fig.add_layout_image(
dict(
source=Image.open("./colourfulness_test (1).jpeg"),
xref="x",
yref="y",
x=0,
y=1536,
sizex=2048,
sizey=1536,
sizing="fill",
opacity=0.5,
layer="below"
)
)
The image in the background is 2048 x 1536 (width x height). The width is set correctly, but somehow the height is not, and the image gets cut. I have to specify some random big height in sizey and y to get the picture in the right place.
This is how it looks if I set the height and width properly. The width of the picture is right, but height isn’t.
This is the image I get if I set y to 4000 and sizey to 4000 as well (the image renders perfectly, respecting proportions, etc.).
I need the image to align correctly so that if I place a box in the square (1948, 1436, 2048, 1536) , it aligns correctly with the bottom-right edge of the image (also I need the y-axis to render in reverse so 0 is at the top, just like in the first image that I show in this post).