# Controls

A teach pendant: one slider per joint, driving an arm in forward kinematics. Pass the same angles array to the arm.

> For the complete index, see [llms.txt](https://robocn.dev/llms.txt). A Markdown version of any page is available by appending `.md` to its URL or by sending an `Accept: text/markdown` header.

## Install

```bash
bunx --bun shadcn@latest add https://robocn.dev/r/arm-controls.json
```

Registry item: `arm-controls` · [`https://robocn.dev/r/arm-controls.json`](https://robocn.dev/r/arm-controls.json)

## Usage

```tsx
const [angles, setAngles] = React.useState([62, -70, -28])

<RobotArm angles={angles} showAngles />
<ArmControls
  angles={angles}
  onAnglesChange={setAngles}
  onReset={() => setAngles([62, -70, -28])}
/>
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `angles` | `number[]` | — | One angle per joint, in degrees, relative to the previous segment. |
| `onAnglesChange` | `(angles: number[]) => void` | — | Called on every slider move. |
| `limits` | `[number, number] | [number, number][]` | `[-180, 180]` | One range for every joint, or a range each. |
| `labels` | `string[]` | — | Joint names. Defaults to J1, J2, … |
| `tool / onToolChange / tools` | `RobotTool` | — | Shows the end-effector selector when a change handler is given. |
| `readouts` | `{ label: string; value: ReactNode }[]` | — | Extra values under the sliders, e.g. the tip position. |
| `onReset` | `() => void` | — | Shows a Home button. |
| `playable` | `boolean` | `false` | Show a Run button that drives `program` into `onAnglesChange`, frame by frame. Moving a slider stops it: whoever has a hand on the machine has control of it. |
| `program` | `(clock: number, limits: [number, number][]) => number[]` | — | Joint angles at `clock` seconds. Defaults to a sweep of every joint, each a little out of step with the last. |
| `speed` | `number` | `0.2` | Program cycles per second. |
| `playing / onPlayingChange` | `boolean / (playing: boolean) => void` | — | Control the Run state yourself, or just watch it. |

## Source

- `src/components/ui/arm-controls.tsx`