Device Card

Who it’s for

Dashboard authors building a device overview — a fleet page, a floor plan sidebar, a “my equipment” grid — who need each tile to answer “which device is this, is it reachable, and is it on?” without opening anything. The card is meant to be repeated: one per device, readable at a glance, with the one control an operator actually needs sitting right on it.

What it does

A pump reporting online: true and enabled: true shows its photo, its label and serial, a tinted Wi-Fi icon, a green power icon and a toggle already switched on; hovering the Wi-Fi icon shows the SSID and signal strength it reported.

• Every slot is bound to one of your data keys by name; clear the field and that slot disappears
• Each key is an attribute or telemetry independently, chosen in Data settings — one card can mix both freely
• A binding that names a key which is not in Data settings is called out on the card, rather than leaving a blank line
• Wi-Fi and power are separate indicators with separate keys — they no longer both follow one flag
• The SSID and RSSI readings are printed next to the Wi-Fi icon, not hidden in a tooltip that a wall display or a phone can never trigger; the tooltip keeps the fully labelled version
• Layout holds together whichever pieces are missing: only the image grows, so removing it never leaves a stretched gap, and a card with no image centres its labels in the freed height
• On/off toggle either writes back to the attribute behind the state key or sends an RPC command
• The toggle rolls itself back and says why if the write or the command is refused
• An image URL that fails to load falls back to the placeholder instead of the browser’s broken-image glyph
• The toggle is the dashboard theme’s own switch, so the card matches the rest of the dashboard with nothing to configure
• One device per card by design; it does not aggregate, list or chart

How to set up

Two steps, in this order.

First, in Data settings, pick the entity and add one key per thing you want on the card. Each key is added the normal way, so each one is independently an attribute or a timeseries — a card can show a photo from a shared attribute next to an RSSI reading from telemetry. The card is capped at a single datasource, because a single card describes a single device.

Then, in the widget settings, bind each slot to one of those keys by name. That is all the settings form does: it maps a key from the subscription to a place on the card.

Data keys

Key	Role	Type	Description
Key bound to Title	Main label	Attribute / Timeseries	Text. The card’s primary line
Key bound to Subtitle	Second label	Attribute / Timeseries	Text, e.g. a location or a model
Key bound to Identifier line	Third label	Attribute / Timeseries	Text, e.g. a serial or asset number
Key bound to Image URL	Device image	Attribute / Timeseries	Absolute URL to a reachable image
Key bound to On/off state	Toggle position, and the attribute written back to	Attribute (Timeseries works in RPC mode)	Boolean. Accepts true/false, 1/0 or "on"
Key bound to Connectivity	Wi-Fi icon	Attribute / Timeseries	Boolean. Icon is tinted when true
Key bound to Power	Plug icon	Attribute / Timeseries	Boolean. Icon turns green when true
Key bound to Wi-Fi SSID	Printed next to the Wi-Fi icon	Attribute / Timeseries	Text
Key bound to Wi-Fi RSSI	Printed next to the Wi-Fi icon	Attribute / Timeseries	Numeric; the unit is appended

Every binding is optional, and an empty one means that slot is not drawn at all. A card with only a title and an image is a valid card, so the settings form doubles as the checklist of what the card shows.

Bindings resolve against a key’s name, and against its label if you have relabelled it. If a binding names something that is not in Data settings the card says which one, instead of leaving a blank line with no explanation.

The card reads the platform’s own subscription, so current values are there as soon as the dashboard loads and there is nothing extra to configure or wait for. A bound key whose device has never reported keeps its place: the icon shows in its inactive state and the toggle sits off, rather than appearing later and reflowing the card.

In attribute mode the toggle writes to the key bound to On/off state, using that key’s own name, in the scope you choose. That only works if the key really is an attribute — a timeseries key can be shown but not written to, so pair it with Send an RPC command instead.

How to customize

• To change or drop the RSSI unit — edit RSSI unit; clearing it prints the bare number.
• To hide a slot — clear its binding. The image area, the toggle and each icon appear only when bound.
• To stop an image being letterboxed — set Image fit to Fill the area, accepting that it crops.
• To change or remove the empty-image message — edit Placeholder text; clearing it leaves just the icon.
• To make the toggle send a command instead of writing an attribute — set Toggle action to Send an RPC command, then set Method and Parameters, where {$state} becomes true or false.
• To write to server scope instead of shared — change Scope to write to, which only appears when the toggle is in attribute mode.
• To rename a key without breaking the card — relabel it in Data settings; bindings match a label as well as a name.
• To wait for the device to confirm the command — set Mode to Two way and raise Timeout if the device is slow.
• To label the card from the dashboard rather than from data — turn the widget’s own Title back on in Appearance; it is off by default so the data-driven title can be the card’s main line.

Tips

• Add the on/off key as an attribute, not telemetry. The toggle writes an attribute back, so a telemetry key can only be displayed — useful if the device owns the state, but then set the toggle to send an RPC command.
• Use Identifier line for the value an operator would quote to support — a serial, an asset tag, a MAC. It is deliberately the smallest and dimmest line, which is exactly right for something you look up rather than scan.
• If your devices report signal quality but not a plain online flag, drive Connectivity from a calculated field that turns RSSI into a boolean, and bind the raw RSSI so the number stays visible beside the icon.
• Bind either SSID or RSSI rather than both on a narrow card. Both fit, but the pill truncates, and a truncated SSID is worth less than a legible signal figure.