Value card with color rules

Value card with colour rules

One value on a card, with a colour that follows a rule. Numbers can be matched against thresholds, text and true/false values against a list, or the colour can simply say whether the entity has an alarm. The matched colour paints the value, the units, the icon, or the whole widget.

Setting it up

Datasource	One entity.
Data key	One, of any kind. A number, a string or a boolean all work.
Units and decimals	Taken from the data key, so they are set in one place rather than twice.
Title	By default the key’s label becomes the widget’s own title, so the card has one heading rather than two. It can sit above or below the value instead, or be hidden.

Colour rules

Pick one kind of rule per card — a key reports one kind of value, so mixing them would only invite contradictions. The editor for the kind you choose is the only one shown.

Numeric thresholds

Each row is an operator, a value and a colour: < 20 blue, >= 40 red, = 0 grey. Rows are read from the top and the first one that is true decides, so put the most specific first.

A row’s value can be a number, or ${attributeName} to take it from an attribute on the same entity:

When the value is	Value	Colour
less than	${lowFuelThreshold}	red
greater than or equal to	${targetLevel}	green

The card subscribes to those attributes itself, so it still needs only one data key. Change the attribute and the card follows without touching the dashboard. A row whose value resolves to nothing is skipped.

Text and true/false values

One row per value the device can report. Each row carries what to show instead of the raw value, a colour, and optionally an icon that replaces the card’s own:

Value reported	Shown instead	Colour	Icon
ON	Running	green	mdi:play
FAULT	Fault	red	mdi:alert

Matching ignores case. A value that is not listed is shown exactly as it came, in the plain colour.

Whether there is an alarm

Red while the entity has an active alarm, green when it has none — both colours are settings. A minimum severity can be set, so minor and warning alarms need not count.

This looks at alarms for all time, not the dashboard timewindow: moving the timewindow does not change whether the card is red. Cleared alarms never count.

What the colour paints

Four switches, independent of each other: the value, the units, the icon, the whole widget background.

Flooding the background changes the whole widget, not just the inside of the card. When it does, the value, units, caption, icon and the widget’s own title all switch to one colour chosen for sitting on top of it — otherwise dark text on a red card would be unreadable. The original background and title colour are put back when the rule stops matching.

State	What decides the colour
A rule matched	the colour on that row
No rule matched	Value when no rule matches
Stale	Colour when stale — this wins over any matched rule

A dead sensor taking a threshold colour would look either alarming or fine when it is neither, so stale comes first.

The icon

Optional, and always on the right: in the top corner, where the value keeps the card’s full width, or level with the value, pushed to the far edge. Behind it sits a circle or a rounded square in a soft tint of its own colour, or nothing. Both the icon and that shape can be given fixed colours instead.

Staleness and the last update

Show when the value last arrived puts a line along the bottom reading Updated a few seconds ago, counting up on its own. On a dashboard left open all day, that is what tells you the reading is still live.

Treat the value as stale after dims the value and takes the stale colour once the reading is older than that many seconds. 0 turns it off. Nothing is shown until the key has reported at least once.

Sizing and text

Scale the value to fill the card grows and shrinks the number with the card and with its own length, so a four-digit reading does not spill out of a card that fitted two. The size on the value font is the starting point; with scaling off, it is used as it stands.

The value, the units and the caption each have their own font and their own colour. Alignment is left or centred, and the decimal separator can be a point or a comma.

When the key has never reported

The card shows the placeholder from Shown when the key has never reported, a dash by default. The platform’s own no-data message covers an empty datasource, which is a different situation — a key that simply has not sent anything yet still leaves the card in place.

Every setting

Each field also carries its explanation behind the question mark beside it.

Value

Setting	Default	What it does
Caption under the value	empty	Overrides the caption; empty uses the data key’s label
Where the caption goes	title	Into the widget title, above the value, below it, or hidden
Alignment	left	Left or centred
Shown when the key has never reported	—	Placeholder before the key has ever reported
Decimal separator	.	A point or a comma between the parts of a number

Colour

Setting	Default	What it does
Colour the card by its value	thresholds	Which kind of rule colours the card, or none
Numeric thresholds	two rows	Operator, value and colour per row; first true row wins
Text and true/false values	empty	Text and true/false values, each with a label, colour and icon
Colour while an alarm is active	#E53935	Colour while the entity has an active alarm
Colour when there is none	#43A047	Colour when it has none
Count alarms from severity	empty	Ignore alarms below this severity; empty counts all
Apply it to the value	on	Paint the value with the matched colour
Apply it to the units	off	Paint the units with it
Apply it to the icon	on	Paint the icon with it
Apply it to the card background	off	Flood the whole widget with it
Text once the background is filled	#FFFFFF	The one colour every text takes once the widget is flooded
Value when no rule matches	#344054	The value when no rule matched
Caption and the updated line	#667085	The caption and the updated line
Units	#667085	The units

Icon

Setting	Default	What it does
Show an icon	on	Whether there is an icon at all
Icon	mdi:thermometer	Which icon; a text rule can replace it
Icon colour	empty	Fixed icon colour; empty follows the rules
Icon position	top	Top right corner, or right and level with the value
Shape behind the icon	circle	Circle, rounded square, or nothing behind it
Colour behind the icon	empty	Fixed colour for that shape; empty tints the icon colour

Stale

Setting	Default	What it does
Show when the value last arrived	on	The Updated a few seconds ago line along the bottom
Treat the value as stale after (s)	0	Seconds after which the reading counts as stale; 0 is off
Colour when stale	#9E9E9E	Colour once it is stale

Text

Setting	Default	What it does
Scale the value to fill the card	on	Grow and shrink the value with the card and its own length
Value font	40px Roboto 500	Family, weight, style and starting size of the value
Units font	22px Roboto 400	The same for the units
Caption font	13px Roboto 400	The same for the caption and the updated line