import plotly.graph_objects as go
import numpy as np
import base64
import os
from PIL import Image
folder_path = "XXX/visualize/gt/multiview"
file_names = os.listdir(folder_path)
img_paths = [os.path.join(folder_path, file_name) for file_name in file_names if file_name.endswith((".png", ".jpg", ".jpeg"))]
# make figure
fig_dict = {
"data": [],
"layout": {},
"frames": []
}
# fill in most of layout
fig_dict["layout"]["hovermode"] = "closest"
fig_dict["layout"]["updatemenus"] = [
{
"buttons": [
{
"args": [None, {"frame": {"duration": 500, "redraw": True},
"fromcurrent": True, "transition": {"duration": 300,
"easing": "quadratic-in-out"}}],
"label": "Play",
"method": "animate"
},
{
"args": [[None], {"frame": {"duration": 0, "redraw": True},
"mode": "immediate",
"transition": {"duration": 0}}],
"label": "Pause",
"method": "animate"
}
],
"direction": "left",
"pad": {"r": 10, "t": 87},
"showactive": False,
"type": "buttons",
"x": 0.1,
"xanchor": "right",
"y": 0,
"yanchor": "top"
}
]
sliders_dict = {
"active": 0,
"yanchor": "top",
"xanchor": "left",
"currentvalue": {
"font": {"size": 20},
"prefix": "Frame:",
"visible": True,
"xanchor": "right"
},
"transition": {"duration": 300, "easing": "cubic-in-out"},
"pad": {"b": 10, "t": 50},
"len": 0.9,
"x": 0.1,
"y": 0,
"steps": []
}
with open(img_paths[0], "rb") as img_file:
img_data = base64.b64encode(img_file.read()).decode()
img = Image.open(img_paths[0])
imwidth, imheight = img.size
# make data
image_dict = go.layout.Image(
source="data:image/png;base64," + img_data,
x=0,
y=imheight,
xref="x",
yref="y",
sizex=imwidth,
sizey=imheight,
opacity=1.0,
visible=True,
layer="below"
)
fig_dict["data"].append(image_dict)
for i, img_path in enumerate(img_paths[:5]):
frame = {"data": [], "name": str(i+1)}
with open(img_path, "rb") as img_file:
img_data = base64.b64encode(img_file.read()).decode()
img = Image.open(img_path)
imwidth, imheight = img.size
image_dict = go.layout.Image(
source="data:image/png;base64," + img_data,
x=0,
y=imheight,
xref="x",
yref="y",
sizex=imwidth,
sizey=imheight,
opacity=1.0,
visible=(i==0),
layer="below"
)
frame["data"].append(image_dict)
fig_dict["frames"].append(frame)
slider_step = {
"args": [
[str(i+1)],
{"frame": {"duration": 300, "redraw": True},
"mode": "immediate",
"transition": {"duration": 300},
"visible": [(j == i) for j in range(5)]}
],
"label": f"Image {i+1}",
"method": "animate"
}
# fig_dict["layout"]["sliders"][0]["steps"].append(slider_step)
sliders_dict["steps"].append(slider_step)
import pdb;pdb.set_trace()
fig_dict["layout"]["sliders"] = [sliders_dict]
fig = go.Figure(fig_dict)
fig.update_layout(
sliders=sliders,
xaxis=dict(
range=[0, 1600],
showgrid=False,
),
yaxis=dict(
range=[0, 900],
showgrid=False,
scaleanchor='x',
),
)
output_folder = "/xxx/visualize/plotly"
output_filename = "multiphoto1.html"
output_path = os.path.join(output_folder, output_filename)
pio.write_html(fig, output_path)
This is the code I modified based on the code generated by the reference to generate 3D scatter plot. I thought that the form of custom image input is the same as loading 3D data, and the same data format can be used to control the change of 3D scatter plot by sliding the slider, but the image is actually different. The format of the image cannot be passed
I have tried another set of codes before, which is done through visible, but it can only display the first picture and the slider cannot be controlled
