Power and Energy Card

Who it’s for

For anyone whose meter can point in two directions — a rooftop solar station owner whose only real question is “am I buying or selling right now?”; an infrastructure engineer checking a server rack’s draw against the breaker’s limit before adding another server; an energy manager comparing kWh per shift to catch a night shift quietly using 15% more power for the same output; an EV charging operator checking how much was delivered in a session for billing and diagnostics; or accounting in a mall billing a tenant’s monthly consumption.

What it does

Reads instantaneous power and renders it against its sign rather than its magnitude — negative power means sending energy back to the grid, not an error:

• Power shows as Import (drawing from the grid), Export (sending back to the grid), or Idle (near zero, the calm default state, not a warning) — each with its own color and icon, so a negative reading never looks like a fault or gets silently turned positive.
• Imported energy, exported energy, and power factor each get their own tile if bound, all styled the same way — a tinted background and a border in the same color as the key’s own text and icon, so none of the three reads as a lesser afterthought next to the others.
• No tariff or cost math happens anywhere on this card — it shows the readings, not a bill.
• The whole card scales as one — text, icons, and spacing all grow or shrink together to fit the widget, so there’s nothing to configure for different card sizes.

How to set up

1. Add Power and Energy Card to a dashboard state.
2. Bind a key on the Data tab and set its Role to Power — exactly one key needs this role.
3. If your meter reports accumulated energy, bind up to two more keys and set their Roles to Energy import and Energy export.
4. If your meter reports power factor, bind a key for it and set its Role to Power factor.
5. Set each key’s own Units, Decimals, and Color under the Data tab’s normal key settings — these aren’t duplicated anywhere else in this widget.

How to customize

• To change the idle threshold — adjust Idle threshold under Settings → Display; readings within this range of zero show as Idle instead of Import or Export.
• To change Power’s own status colors — adjust Import color, Export color, Idle color, and Missing/no data color under Settings → Display. A key’s own Color (from the Data tab) is what colors its tile for Energy import, Energy export, and Power factor instead.
• To hide the last-updated time — turn off Show last updated under Settings → Display.
• To restyle the text — adjust Label font and Value font under Settings → Display; everything else scales from these two automatically.

Notes

• Every role is matched by literal Role selection on the key itself (Settings → the key’s own Role field on the Data tab), not a per-widget key-name setting. Units, decimals, and color all come from the key’s own native settings rather than being duplicated into this widget’s own configuration.
• Power is required exactly once; Energy import, Energy export, and Power factor are each optional but can be used by at most one key — assigning the same role to two keys is flagged directly on the card, since the settings form can’t validate that across keys before saving.
• Imported and exported energy are read exactly as reported by whatever already accumulates them — this widget does not calculate either figure from Power itself, so a device that doesn’t report both separately will simply have nothing to show in whichever tile is missing.
• The last-updated time uses moment.js, already available in the ThingsBoard widget environment.