So we have a slider that is moving based on one second per unit of measure using app.clientside_callbacks. That is working properly but if the button is pushed to stop and then the slider is dragged to a new position then when the play button is pressed again it reverts back to the original position it was in when the stop button was pushed. I know I have to somehow update the time value. Any help would be appreciated.
app.clientside_callback(“function(n_intervals, max){return (n_intervals % max);}”,
Output(“time”, “value”), Input(“trigger”, “n_intervals”), Input(“time”, “max”))
app.clientside_callback(“function(n_clicks){return (n_clicks % 2 == 0)? ‘Play’ : ‘Stop’;}”,
Output(“play”, “children”), Input(“play”, “n_clicks”))
app.clientside_callback(“function(n_clicks){return (n_clicks % 2 == 0)? 0 : -1;}”,
Output(“trigger”, “max_intervals”), Input(“play”, “n_clicks”))
The slider code
dl.Map(children=[
dl.TileLayer(url=mapbox_url.format(id="satellite-streets-v9", access_token=mapbox_access_token)), # background map
dl.LayerGroup(id="layerTargets"),
dl.LayerGroup(dl.PolylineDecorator(positions=positions, patterns=patterns), id="layerFOV"),
dl.LayerGroup(dl.PolylineDecorator(positions=positions, patterns=patterns), id="layer2") # container with data
], center=(positions[1][0], positions[1][1]), zoom=40, style={'height': '50vh'}),
html.P("Time"),
dcc.Slider(min = 0, max = length_time, step=1,
marks={
20: 'Engagement 1',
352: 'Engagement 2',
859: 'Engagement 3',
1139: 'Engagement 4',
1516: 'Engagement 5'
},
value=0, id="time"), # time slider
dcc.Interval(id="trigger", max_intervals = length_time, n_intervals=0), # animation trigger
html.Div(
html.Button("Play", id="play", n_clicks=0),
style={"display": "inline-block"},
),