Charge point grid
Every charge point of a site as one tile, colored by its OCPP status: charging tiles show the power, free ones say Free, and a faulted one turns red. The grid sizes its tiles so the whole site fits the card, whether it has three charge points or thirty. A click on a tile runs a dashboard action, such as opening that charge point, and outlines it. States, labels, colors and icons are all editable, so any device status works too.
Who it’s for
The Charge point grid widget is for operators of charging sites, parking garages and fleet depots who need to see every charger of a site at once. They want to know which connectors are free, which are charging and at what power, and which one is broken, without reading a table. The question they would type is “how do I show the status of all my EV chargers on one dashboard?”
What it does
A site has eight charge points that report status and power. CP-03 sends status = Charging and power = 21.8, so its tile turns indigo and reads 21.8 kW. CP-02 sends Available and reads Free in green, and CP-06 sends Faulted and turns red with Fault. An operator clicks CP-03: the tile gets an outline, and the dashboard opens that charge point.
- Shows one tile per charge point, each with a tinted background, an icon and a label in the color of its status.
- Shows the power on charging and paused tiles, and a short word such as Free, Done or Fault on the rest.
- Sizes the tiles so the whole site fits the card with no scrolling. Three charge points fill the card with big tiles, and fifty become small colored squares whose name and value show on hover.
- Runs a dashboard action when a tile is clicked, such as opening a state for that charge point, and outlines the tile that is open.
- Ships with the nine OCPP 1.6 states. Every label, color and icon can be changed, and new states can be added, so the grid works for pumps, machines or any device that reports a status.
- Shows the latest status of each entity. It does not draw history or alarms.
How to set up
Data keys
The Charge point grid widget takes a datasource with one entity per charge point, usually an entity alias such as all devices of a station, and two keys per entity.
- Status —
TimeseriesorAttribute, such asstatus. Picks the state of the tile. The value is matched without regard to case, spaces or underscores, soCharging,CHARGINGandchargingall match. A value that is not on the States list shows in gray as it arrived. Without a value the tile reads No data. - Value —
TimeseriesorAttribute, such aspower. Shown on the tile for states that have Show the value instead of the label on. Units and decimals come from the key’s own settings. Without a value the tile shows the state label instead.
Each key has a Role setting: Status, Value shown in the tile or Not shown. When roles are not set, the first key is the status and the second is the value.
States
- States — the nine OCPP 1.6 states by default. Each state has a Status value to match, a Label, a Color, an Icon, and Show the value instead of the label:
- Charging, SuspendedEV and SuspendedEVSE show the value;
- Available shows Free, Preparing shows Plugged in, Finishing shows Done, Reserved shows Reserved, Unavailable shows Off and Faulted shows Fault.
Actions
- On tile click — empty by default. Add an action that opens a dashboard state or updates a state entity. It receives the clicked charge point as the entity.
How to customize
- To change the order of the tiles — set Order: By name by default, which puts CP-2 before CP-10; By state, in the order of the list above; or As the datasource returns them.
- To show how many charge points are in each state — turn on Show counts in the header, off by default.
- To stop outlining the open tile — turn off Outline the selected tile, on by default.
- To rename the card — change the widget title, for example to the station name.
Tips
- Put the grid on a station page and give On tile click an action that sets the charge point as the state entity. A control widget next to the grid then follows the tile the operator clicked, and the grid keeps that tile outlined.
- Order the tiles By state during an incident, so faulted and free charge points are easy to find.
- Leave the size to the grid: a taller card gives bigger tiles, and a site that grows only makes the tiles smaller.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.