Timer widget

Who it’s for

Maintenance and uptime teams watching a single device or asset ask “how long until this is due, how long has it been running, or how long since it last reported?” They want the answer readable from across a room — on a wall display, a shift-handover screen, or a card in a bigger monitoring dashboard — without opening a chart and reading a timestamp themselves.

What it does

A device writes nextMaintenanceTs yesterday, pointing to a target two days out. In Countdown mode, the card shows the time remaining, a progress ring at about 50%, and a subtitle reading Due 4 Aug, 20:28 · 50% — all computed from the key’s own value and last-write time, with nothing else to configure.

• Three modes in one widget — Countdown to event, Runtime (count up), or Time since last update — pick whichever matches the timestamp you’re already storing
• Data-derived progress ring for Countdown, with no separate time window to configure — progress comes from when the value was last written and the target time it points to
• Auto-fitting text that scales to the card’s size, so a long duration like 12d 05:04:03 never overflows, even after a resize
• Optional threshold coloring for Runtime and Since, comparing elapsed time against a limit you set with a greater-than or less-than operator
• Five time formats, from a compact two-unit form to every unit spelled out
• Reads exactly one data key; it does not chart a history of past durations or compare more than one device on the same card

How to set up

Data keys

What the primary key means, by mode:

If the key has never reported, the value reads --:--:--, with a subtitle of “No data” (Countdown and Runtime) or “Waiting for data” (Since).

How to customize

• To choose how the duration reads — set Time format: days + HH:MM:SS, HH:MM:SS as total hours, days + HH:MM, a compact two-unit form, or every unit spelled out.
• To hide the date or status line under the value — turn off Show subtitle.
• To recolor the big value — set Value color. Applies in every mode’s normal state.
• To recolor the countdown ring — set Ring color for the normal state and Overdue color for once the event has passed. Countdown mode only.
• To color the value once elapsed time crosses a limit — turn on Enable threshold, set Trigger when elapsed is to greater than or less than, set Threshold and its unit, and pick Threshold color. Runtime and Since modes only; Countdown has no threshold, only the overdue state.

How the countdown progress ring is calculated

The ring fills with real progress toward the target, worked out from the data itself — there’s no separate window setting to keep in sync:

start    = the primary key's last write time (cycle start)
target   = the primary key's value (event time)
progress = (now - start) / (target - start)

This assumes the key is written once per cycle — for example, you write the next due date when maintenance is finished. A value that gets rewritten often keeps start at “now,” which holds progress near 0%.

Tips

• Write the primary key once per cycle, not on every update, so the progress ring reflects the real proportion of time elapsed rather than resetting toward 0%.
• Colors default to the light theme. Set your own once, and they apply the same way on both themes.
• The display updates every second on its own, so the timer counts smoothly between telemetry updates — no need to poll the device any faster.