Value card with color rules

Who it’s for

Dashboard authors who want one number to say more than just its value ask “is this fine, or does it need a look — without me reading the number?” A plain value card shows a figure; this one also colors it, so a glance across a row of cards tells you which ones need attention.

What it does

A tank sensor reporting 78 turns its card orange the moment the reading crosses the warning threshold, with no separate alarm widget required. A status key reporting FAULT can show the word “Fault” in red with its own icon instead of the raw string.

• One rule type per card — numeric thresholds, a list of text or true/false values, or whether the entity has an active alarm
• The color can paint the value, the units, the icon, or the whole card — four independent switches, so a subtle tint and a fully flooded background are both options
• Thresholds can read a bound from an attribute, so a limit set elsewhere on the entity drives the card without touching the dashboard
• A stale reading is called out, dimmed and given its own color, so yesterday’s temperature never looks like today’s
• The value auto-scales to the card, growing and shrinking with both the card’s size and the number’s own length
• Shows one value on one card; it doesn’t chart history or combine more than one key — pair it with a chart for that

How to set up

Data keys

This is a single-entity widget with exactly one data key, of any kind — a number, a string, or a boolean.

Colour the card by its value decides which kind of rule applies, and that choice also decides what else the card subscribes to: numeric thresholds mode subscribes to any attribute a row references with ${attributeName}, so the card still needs only the one data key even when a limit lives elsewhere on the entity; alarm mode subscribes to the entity’s own alarms instead. Text-or-boolean mode and “no rule” use only the one data key.

How to customize

Which rule applies

• To choose which kind of rule colors the card — set Colour the card by its value: numeric thresholds, text and true/false values, whether there’s an alarm, or none.
• To match on numbers — edit Numeric thresholds: an operator, a value and a color per row. Rows are read from the top and the first one that’s true wins, so put the most specific row first. A row’s value can be ${attributeName} instead of a plain number, taking the bound from an attribute on the same entity.
• To match on text or true/false — edit Text and true/false values: one row per value the device can report, each with what to show instead, a color, and an optional icon. Matching ignores case; an unlisted value is shown as it came, in the plain color.
• To color by whether there’s an alarm — set Colour while an alarm is active and Colour when there is none, and optionally Count alarms from severity to ignore anything below a floor. This checks alarms for all time, not the dashboard time window, and cleared alarms never count.

What the color paints

• To choose what takes the color — turn on or off Apply it to the value, Apply it to the units, Apply it to the icon, and Apply it to the card background independently.
• To set what the background flood looks like — set Text once the background is filled; with the whole card flooded, the value, units, caption and icon all switch to this one color so they stay readable, and the widget’s own title switches with them.
• To set the color when nothing matches — set Value when no rule matches, Caption and the updated line, and Units.

Icon

• To hide the icon — turn off Show an icon.
• To change it — pick Icon; a matched text rule can replace it automatically.
• To fix the icon’s color regardless of the rules — set Icon colour; empty lets it follow them.
• To move the icon — set Icon position: pinned to the top corner with the value keeping full width, or level with the value at the far edge.
• To change the shape behind it — set Shape behind the icon and, to override its automatic tint, Colour behind the icon.

Staleness

• To hide the “last updated” line — turn off Show when the value last arrived.
• To mark an old reading as stale — set Treat the value as stale after (s); 0 turns this off. A stale value takes Colour when stale, which wins over any matched rule, since a dead sensor should never look either alarming or fine.

Text & layout

• To override the caption or move it — edit Caption under the value and Where the caption goes: into the widget title, above or below the value, or hidden.
• To change alignment — set Alignment.
• To change the placeholder before the key has ever reported — edit Shown when the key has never reported; the platform’s own no-data message covers an empty datasource, not a key that just hasn’t sent anything yet, so the card needs its own text for that.
• To use a comma instead of a point — set Decimal separator.
• To stop the value scaling to the card — turn off Scale the value to fill the card; the font size below is then used as-is instead of a starting point.
• To match your dashboard’s fonts — set Value font, Units font, and Caption font.

Tips

• Send the caption into the widget title (the default) to keep the card to one heading instead of two; move it above or below the value only when the title is doing something else.
• Give a threshold row ${attributeName} instead of a fixed number when the limit is something an installer sets per device, like a low-fuel cutoff — the card follows the attribute without anyone touching the dashboard.
• A row whose ${attributeName} doesn’t resolve to anything is skipped, not treated as a match — check the attribute exists on the entity if a threshold never seems to fire.
• Flooding the background reads best on a small card in a status row; on a large card, coloring just the value and icon is usually easier to read.