As promised, here is now my updated code thanks to you! I also re-added the sliders in two different ways, as explained below. Also, the example here which I had mentioned above was not working, indeed does work but again not in vscode. At that time I did not yet found out that we have to paste the code into the Julia Terminal /view it in a browser.
My first code does not combine the sliders into the updatemenus attribute. That means when pressing the play button, the slider does not update its position respective to the played frame but works indepentently. The second code below combines everything.
FIRST CODE
#Code for generating a plotly plot with multiple frames.
#The individual frames can be viewed by clicking and dragging a slider or with clicking the play/pause buttons.
#The buttons only work when viewing the plot in a browser (which will automatically open when pasting the code into the Julia Terminal).
using PlotlyJS
#data to be plotted: a vector of random matrices
Matrices = [rand(2, 2) for i = 1:100]
#define colorscheme for the plot
colorscale = [[0, "white"], [1, "cyan"]]
#generate the initial frame
maps = [heatmap(z = Matrices[1], colorscale = colorscale)]
#store all frames in a vector
frames = PlotlyFrame[
frame(
data = [attr(z = Matrices[k], colorscale = colorscale)],
layout = attr(title_text = "Heatmap $k"), #update title
name = "frame_$k", #update frame name
) for k = 1:length(Matrices)
]
#define the slider for manually viewing the frames
sliders_attr = [
attr(
active = 0,
pad_t = 10,
steps = [
attr(
method = "restyle",
label = "Heatmap $k",
args = [attr(z = (Matrices[k],), colorscale = (colorscale,))],
) for k = 1:length(Matrices)
],
),
]
#define the displaying time per played frame (in milliseconds)
dt_frame = 250
#define the play and pause buttons
buttons_attr = [
attr(
label = "Play",
method = "animate",
args = [
nothing,
attr(
fromcurrent = true,
transition = (duration = dt_frame,),
frame = attr(duration = dt_frame, redraw = true),
),
],
),
attr(
label = "Pause",
method = "animate",
args = [
[nothing],
attr(
mode = "immediate",
fromcurrent = true,
transition = attr(duration = dt_frame),
frame = attr(duration = dt_frame, redraw = true),
),
],
),
]
#layout for the plot
layout = Layout(
width = 500,
height = 500,
margin_b = 90,
# add buttons to play the animation
updatemenus = [
attr(
x = 0.5,
y = 0,
yanchor = "top",
xanchor = "center",
showactive = true,
direction = "left",
type = "buttons",
pad = attr(t = 90, r = 10),
buttons = buttons_attr,
),
],
#add the sliders
sliders = sliders_attr,
)
#save the plot and show it
plotdata = Plot(maps, layout, frames)
display(plotdata)
SECOND CODE
#Code for generating a plotly plot with multiple frames.
#The individual frames can be viewed by clicking and dragging a slider or with clicking the play/pause buttons.
#The buttons only work when viewing the plot in a browser (which will automatically open when pasting the code into the Julia Terminal).
using PlotlyJS
#data to be plotted: a vector of random matrices
Matrices = [rand(2, 2) for i = 1:100]
#define colorscheme for the plot
colorscale = [[0, "white"], [1, "cyan"]]
#generate the initial frame
trace = [heatmap(z = Matrices[1], colorscale = colorscale)]
#store all frames in a vector
frames = PlotlyFrame[
frame(
data = [attr(z = Matrices[k], colorscale = colorscale)],
layout = attr(title_text = "Heatmap $k"), #update title
name = "frame_$k", #update frame name
traces = [0],
) for k = 1:length(Matrices)
]
#define the slider for manually viewing the frames
sliders_attr = [
attr(
active = 0,
minorticklen = 0,
pad_t = 10,
steps = [
attr(
method = "animate",
label = "Heatmap $k",
args = [
["frame_$k"], #match the name of the frame again
attr(
mode = "immediate",
transition = attr(duration = 0),
frame = attr(duration = 5, redraw = true),
),
],
) for k = 1:length(Matrices)
],
),
]
#define the displaying time per played frame (in milliseconds)
dt_frame = 250
#define the play and pause buttons
buttons_attr = [
attr(
label = "Play",
method = "animate",
args = [
nothing,
attr(
fromcurrent = true,
transition = (duration = dt_frame,),
frame = attr(duration = dt_frame, redraw = true),
),
],
),
attr(
label = "Pause",
method = "animate",
args = [
[nothing],
attr(
mode = "immediate",
fromcurrent = true,
transition = attr(duration = dt_frame),
frame = attr(duration = dt_frame, redraw = true),
),
],
),
]
#layout for the plot
layout = Layout(
width = 500,
height = 500,
margin_b = 90,
# add buttons to play the animation
updatemenus = [
attr(
x = 0.5,
y = 0,
yanchor = "top",
xanchor = "center",
showactive = true,
direction = "left",
type = "buttons",
pad = attr(t = 90, r = 10),
buttons = buttons_attr,
),
],
#add the sliders
sliders = sliders_attr,
)
#save the plot and show it
plotdata = Plot(trace, layout, frames)
display(plotdata)
