React Jog / Axis Control Pad

Copy Page

Directional jog for X, Y, and Z, built around the two things that keep it from crashing a stage: the step size is a deliberate choice, and a direction that would drive an axis past its soft limit is disabled at the button — so the operator feels the wall instead of discovering it.

Installation

Props

The step size is a safety control

A 10 mm jog and a 0.1 mm jog issue the same click; the only thing standing between "fine adjustment" and "drove the head into the fixture" is which step is selected, so it sits prominently in the header and reads back in tabular-nums. This mirrors how a real jog pendant works, and for the same reason: the increment is the most dangerous setting on the panel precisely because it is invisible in the motion itself.

Limits are enforced before the move, not after

Each direction button checks whether one more step would overrun that axis's soft limit and disables itself if so, rather than moving and clamping. The difference matters: clamping lets an operator hold a direction expecting motion and get silence, which reads as a fault; a greyed button says "this axis is at its limit" before the click. The per-axis readout shows a LIM flag at the boundary, and the live X/Y indicator plots the head inside its work envelope so the operator keeps spatial context while jogging.

Home returns every axis to its configured home in one action. Wire onMove to your motion controller; the component owns the display position, and your controller owns the truth — reconcile them on the controller's position feedback in a real integration.