Layout timer

Allow a layout to start a timer when it is loaded. This can be done by setting timer flag to an id of a timer that you want to start. This id should be unique to a page. When a layout is loaded, we will start this timer. If we want to display it, we can used a broadcast-timer widget to subscribe to this timer. This widget will display the current time that this timer is currently at (as a timer value). The value of the timer (in milliseconds) can be accessed from layout widget by using the expression {timer.value}.

Launch a layout with a timer

Below, the id of the timer is test-timer. With flag of styles.appBar.timer is set to show, we will also display the timer at the header/app bar.

Launch layout from Navigation

{
  "id": "media-loader",
  "timer": "test-timer",
  "styles": {
    "appBar": {
      "timer": "show"
    }
  }
}

Launch layout from layout action

{
    "component": "button",
    "text": "Launch a layout",
    "onClick": {
        "target": "layout",
        "options": {
            "id": "media-loader",
            "timer": "test-timer",
            "styles": {
                "appBar": {
                "timer": "show"
                }
            }
        }
    }
}

Display the timer at another place in the layout using a broadcast-timer widget

{
    "component": "broadcast-timer",
    "options": {
        "listen": {
            "id": "test-timer"
        }
    }
}

Use the timer value

Below will retrieve the timer from the parent layout of the widget

{
    "component": "button",
    "text": "Save timer",
    "onClick": {
        "target": "createDispatch",
        "options": {
            "tracker": "test-tracker",
            "data": {
                "seconds": "{timer.value}"
            }
        }
    }
}