# Chart recorder

A strip-chart recorder: gridded paper advancing under a pen that rides a rail, drawing the live value as the paper moves and printing the time in the margin. For p95 latency, tokens per second, grid frequency, a cold room’s log.

Kit part · With the Kit · https://tactileui.dev/parts/recorder

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

One custom element. The paper is a plate-coloured strip in a window cut into the panel; a canvas over it draws the printed grid (square, fine and major lines), the dashed set-points, the ink of each pen, and the times the recorder prints in the margin as each major line passes the pen. The ink is the finish’s own printing colour, read from the page, so the chart is ink on paper in aluminium and light printing on black in graphite, and lit inside glass. Readings are stored with the paper position they were made at; the paper position comes from the clock, so a recorder that was off screen catches up exactly. The paper moves a whole device pixel at a time, on a timer, the way a stepper drive feeds it. The pens are elements: a nib, an arm and a carriage on a steel rail, moved by a critically damped servo, all casting one shadow down and to the right; stopped, they lift and the shadow opens. The tear edge is a gradient: a dark edge, a lit crest, a shadow thrown right.

## Variants

- Grid frequency · a band between two set-points
- Tokens per second · a step a reading
- No readings yet · the pen parked
- Cold room · a history, 5 min a division

## States

- Running
- Stopped · pens up
- Alarm
- Off the scale

## Props and options

| Name | Kind | Description |
| - | - | - |
| label | attribute | The chart’s name, printed in the head and read as the figure’s name. |
| unit | attribute | Printed on the display and the scale, and read out with every figure. |
| min · max | attribute | The scale. A reading beyond it pins the pen to its stop; the display still shows it. |
| high · low | attribute | Set-points: an index on the scale, a dashed line on the paper, and the red lamp while pen 1 is past one. |
| divisions · precision | attribute |  |
| pen · pen2 | attribute | The pens’ names in the legend. Naming pen2 brings the second pen, dashed, on its own rail. |
| speed | attribute | How long one division of paper takes to pass the pen. The paper keeps time whether or not readings arrive. |
| advance | attribute | Time moves the paper by the clock; sample moves it one division for each reading, for data that arrives in batches. |
| stopped | attribute | The chart drive is off: the paper halts and the pens lift. Readings still reach the display. |
| values · values2 · interval | attribute | A history from markup, oldest first, ending now; interval is the time between readings. |
| alarm | event | Pen 1 crossed a set-point: level is "high", "low" or "ok". |
| data-level · data-lifted | attribute | Where pen 1 is against the set-points; present while the pens are up. |

## Usage notes

Readings arrive once a second.

## Accessibility

- The latest reading is text on the display, there to be read whenever it is wanted. Crossing a set-point is the one thing announced, once, politely.
- The alarm lamp and the drive lamp always have words beside them. The second pen differs from the first by its dash as well as its tone.
- It is a display, not a control: it takes no focus. Put the keys that act on it (stop, export) beside it.
- Reduced motion: the paper steps one whole division at a time and the pens jump to their readings; every reading is still drawn.

## Related parts

- [Plot](https://tactileui.dev/parts/plot): Line charts drawn as light on glass, or as ink on a panel: gridlines faint, two traces at most, a red line for now.
- [Glass](https://tactileui.dev/parts/glass): Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.
- [LCD](https://tactileui.dev/parts/lcd): A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.