Smooth animation in Dash for Julia with dcc_interval

Community
, , , ,
1

Hi, I have been exploring how to do smooth animations in Dash for Julia and found a way of doing it using dcc_interval. I am not sure this is the best way to proceed but it seems to work fine when running in the local server in my computer. I need to explore how it will work when running on a remote server.

DashSmoothAnimation

using Pkg
Pkg.activate(".")
using Dash, DashHtmlComponents, DashCoreComponents, PlotlyJS

app = dash()

layout = Layout(;
    title = "Interval animation", 
    xaxis_title="x",
    yaxis_title="y",
    xaxis_range=[-2, 2],
    yaxis_range=[-2, 2], width=550,height=500
)

t = LinRange(0,2*pi,300)

function anim_frame(λ)
    x = cos.(λ*t)
    y = sin.(3*t)
    sc = scatter(;x=x, y=y, mode="lines", name="graphics")
    plot(sc,layout)
end

gr = dcc_graph(id="graph", figure=anim_frame(1.0))
app.layout = html_div(
    [
        gr,
        dcc_interval(
            id="interval-component",
            interval=50, # in milliseconds
            n_intervals=0
        ),
        html_div(id="counter",[1])
    ]
)

time = 0.0
Δt = .01


callback!(app,Output("counter","children"), Output("graph","figure"), Input("interval-component", "n_intervals")) do n
    global time
    time = time + Δt
    return ["time=$time"], anim_frame(2+3*sin(time))
end

run_server(app, "0.0.0.0", debug = true)
5 Likes