How to incorporate a "play" button into a Dash by Plot.ly dashboard using python?

Question

I currently have a dashboard with a scattermapbox map that plots the movement of people across a network, and uses several callbacks to update graphs based on hoverdata, etc. The mapbox graph uses a slider (dcc.Slider) to adjust the timestep that is currently showing. I want to add a "play" button that automates the process of clicking through the different timesteps on the slider.

I had success with the same dataset and parameters creating a play button in Plotly, because there are no callbacks and the sliders are an element in the layout dictionary for the figure. However, I am unsure where to place the callback for the buttons in Dash and unsure if it should use the animate method or the relayout method.

Currently I have just created a frame for each timestep (separate from the traces encompassed in data).

Answer 1

When it comes to advancing a slider, I haven't found a "good"/natural way to do it. However, I got a workaround with an Interval component working.

import dash_core_components as dcc
import dash_html_components as html
import dash.dependencies
from dash.dependencies import Input, Output



app.layout = html.Div(children=[
dcc.Interval(id='auto-stepper',
            interval=1*1000, # in milliseconds
             n_intervals=0
),
dcc.Slider(
    id = "steper",
    min=1,
    max=step_num,
    value=1
)]

Then, I have a callback:

@app.callback(
    dash.dependencies.Output('steper', 'value'),
    [dash.dependencies.Input('auto-stepper', 'n_intervals')])
def on_click(n_intervals):
    if n_intervals is None:
        return 0
    else:
        return (n_intervals+1)%step_num

End result of this is triggering the callback to my slider every second, advancing it. Note the modulus at the end to stop it from going to far.