Lamp heatmap
A heatmap as a matrix of small panel lamps set into the plate: each lamp’s brightness is the value, off to full in four steps, with a printed legend. Deploys per day over a year, incidents by hour of the week, energy by the hour.
Kit parts
Uptime strip
A row of ticks, one for each day or hour, on a strip of dark glass, each tick a lamp in its own slot, with the percentage on an LCD above. A lit green lamp is a period that was up; amber lit in the lower half only is one that was degraded; red lit across but cut by a slit is one that was down; a lamp that is out is a period with no reading. Move across the strip, or use the arrow keys, and the tick you are on is read out in words under it. A key below spells the four lamps.
Seats open in 11 days. Want one email that morning?
Anatomy
A strip of the same dark glass as the ladder, with one of the kit’s lamps in a slot for each period; the kit’s lamp is drawn the way each finish draws it, so a tick is a spot of colour on Paper and a lit pixel on AMOLED. The strip is a flexible row, so any number of ticks share the width, and the script is about sixty lines of arrow keys and a readout.
Variants
- Thirty days
- Twenty-four hours
- Ninety days
- A clean run
- A new service · no reading yet
- A bad week
States
- Up
- Degraded
- Down
- No reading
Props and options
| Name | Kind | Description |
|---|---|---|
| uptimePercent() · uptimeSummary() · uptimeTickWords() · uptimeState() · uptimeStateText() | function | The share up (an empty string when nothing was read), the run in words, one tick in words, and the state a name means. |
Usage notes
Move the pointer along the strip: the readout under it names the day and how it went. Tab onto the strip and use Left, Right, Home and End. The red tick has a slit through it and says “down” in the readout and to a screen reader; the amber ones are half height.
Accessibility
- The strip is a list with one item for each period, and every item has its date and its state in words (“9 Sep: down, 2 hours 10 minutes”), so it reads in order without the script and without the lamps. The paragraph before it gives the percentage and the run in words, and the LCD is hidden so it is not read twice.
- No state is only a colour. Up is lit full height, degraded is lit in the lower half, down is lit full height and cut by a slit, and no reading is an unlit slot; the key under the strip shows the same shapes with their words, and the readout names the state.
- With the script the strip is one tab stop, with Left, Right, Home and End to move along it and a lit mark above the tick you are on; the pointer reads the nearest tick as it moves, and a touch reads the tick under the finger. Leaving the strip puts the whole run back in the readout.
- Percentages are cut down, never rounded up. A run that has no readings at all has no percentage.
- On a phone the strip is taller so the ticks are easy to read and point at, and ninety ticks narrow to a few pixels each without ever scrolling the page sideways.
Related parts
LCD
A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
Lamp
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
Sparkline
A word-sized line for the margin of a table or beside a readout. It is an SVG that takes the size of the type around it and the ink of the place it sits in, so on a panel it is ink and on display glass it is the display’s light. The last value is marked with a dot seated in a faint ring, and a lamp lights the dot when the reading matters. The trend and the last value are said in words on the image’s label, so the line is a second sign and never the only one.