Display count down and call a callback

Dash Python
1

Hi,

I want to make a web page and display a count down for example 5 minutes. It will count from 05:00.00 to 00:00.00 in 10ms interval. There will be a start button to start the timer. Timer will be shown on page as format 04:45.23.

After reaching 0, I want to display something (text in div or span).

How is it possible?

2

Hey @kahlenberg There is a pull request in the queue for a new dcc.Timer component that will make this super easy to do. You can track the progress and see a preview here:

4

Ok, thank you but I need this functionality now :slight_smile:
So, I implemented my own rudimentary timer callback with desired functionality:

time_interval_s = 120
time_interval_ms = time_interval_s * 1000

...
@app.callback(
        Output("timer_display", "children"),
        Input("interval-component", "n_intervals"),
)
def update_output(n):
    #calculate remaining time in ms
    remaining = time_interval_ms - (n * 100)

    minute = (remaining // 60000)
    second = (remaining % 60000) // 1000
    milisecond = (remaining % 1000) // 10
    return u'{:02d}:{:02d}.{:02d}'.format(minute, second, milisecond)
5

In case someone is looking for a complete working solution over this topic, I have combined the pseudo code provided by @kahlenberg above with working solution by @AnnMarieW from https://community.plotly.com/t/using-dcc-interval-for-continuous-update/41071/10 into the following codes:

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

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        # "start value",
        dcc.Input(id="total", type="number", value=120 * 1000),

        # "countdown value", "  #can be hidden - or use dcc.Store instead
        # dcc.Input(id="countdown", type="number", value=0, disabled=True),

        html.Div(id="page-content"),

        dcc.Interval(id="interval", n_intervals=0, interval=3000),
    ]
)

@app.callback(
    Output("page-content", "children"),

    Input("total", "value"),
    Input("interval", "n_intervals"),
)
def display_page(value, n):
    if not value:
        raise PreventUpdate

    if not value:
        raise PreventUpdate

    ctx = dash.callback_context
    callback_input_id = ctx.triggered[0]["prop_id"].split(".")[0]

    if callback_input_id == "total":
        remaining = value
    else:
        #calculate remaining time in ms
        remaining = value - (n * 100)

    minute = (remaining // 60000)
    second = (remaining % 60000) // 1000
    milisecond = (remaining % 1000) // 10
    return u'{:02d}:{:02d}.{:02d}'.format(minute, second, milisecond)


if __name__ == "__main__":
    app.run_server(debug=True)

If you would like to see how @kahlenberg pseudo code is functioning.