Timer widget

Timer / Runtime / Since-update

A compact single-key timer that counts down to a target time, counts up elapsed runtime, or shows how long it has been since the last update. Built for maintenance, uptime and device-liveness monitoring, with a data-derived progress ring, auto-fitting text, and configurable threshold coloring.

Features

• Three modes: Countdown to event, Runtime (count up), Time since last update
• Data-derived progress ring for countdown — no manual “window” to configure
• Auto-fitting value: the text scales to the widget size, so long durations never overflow and it survives resizing
• Configurable time format (days + HH:MM:SS, total hours, no seconds, compact, or all units)
• Threshold coloring with a greater-than / less-than operator (Runtime & Since)
• Custom value, ring, overdue and threshold colors
• Uses the native ThingsBoard widget title — no duplicate heading inside the card

Data key

The widget uses a single data key (maxDataKeys: 1).

• primary (timeseries or attribute) — an epoch timestamp. Interpreted as milliseconds by default; enable Key value is in seconds for 10-digit Unix seconds.

What the value means depends on the mode:

Progress ring (countdown)

The ring fills with real progress toward the target, derived from the data itself:

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

So if the value was written yesterday and points to tomorrow, the ring shows ~50% today, and the subtitle reads e.g. Due 4 Aug, 20:28 · 50%. This assumes the value is written once per cycle (e.g. when maintenance is done you write the next due date); a frequently re-posted value keeps start at “now” and holds progress near 0%.

Configuration

• Timer mode — Countdown / Runtime / Since.
• Time format — how the duration is rendered (see below).
• Show subtitle — toggles the small line under the value (date / status).
• Key value is in seconds — treat the value as seconds instead of milliseconds (Countdown & Runtime).
• Value color — big-value color in the normal state (all modes).
• Countdown → Ring color — progress-ring color in the normal state.
• Countdown → Overdue color — value and ring color once the event is overdue.
• Threshold → Enable threshold — turn on value coloring by elapsed time (Runtime & Since).
• Threshold → Trigger when elapsed is — Greater than or Less than the threshold.
• Threshold → Threshold + unit — the limit and its unit (ms / s / min / h / d).
• Threshold → Threshold color — value color when the condition is met.

Countdown mode has no threshold; it only distinguishes the normal state from the overdue state.

Time formats

Notes

• The display updates every second, so the timer ticks smoothly between telemetry updates.
• Colors default to the light theme; once you set custom colors they apply on any theme.