Robotics workspace

Build with Vlak
Inspection armCell 04 / commissioning
Local simulation
Base frame / metresSample 000
Articulated inspection / 03 axesStreaming
Loading arm geometry
Camera fault
Solid arm / measured pose
Tool centrex 1.217 · y 2.235 · z 0.000 m
Sample cycle / 24 seconds
Inspector

Shoulder joint

Target editor

Reported at: Sample 000

  • Shoulder

    Reported: 24 deg

    Limits: -90 to 90 deg

Editing a target does not move a joint. The host handles motion and reports its result.

Local kinematic modelNo hardware connected

Pause telemetry → select a joint → edit and confirm a simulated target → inspect the event

View source

Inside the interface

A commissioning desk for an illustrative inspection arm. The live viewport and joint readings share a deterministic local clock. Selecting a joint opens its draft target; a separate confirmation applies that target to the simulation. Mission review and diagnostic events remain close to the machine view.

Telemetry and motion are deterministic local examples. No robot, controller or remote service is connected. Targets change the illustration only after explicit simulation confirmation; mission review does not execute a mission. Changes reset on reload.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed
Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Joint panel edits one selected joint while the separate viewport keeps reported readings visible. A second Vlak Button confirms the request in the local simulator.
  • Robot pose, Robot mission queue and Alarm panel occupy focused inspector views. Mission review and alarm acknowledgement update local records and append diagnostic events.
  • An original Three.js inspection arm uses shared forward kinematics for its nested joint pivots and tool readout. Native controls select camera views, playback speed, gripper state and sample trace. Reduced motion pauses automatic playback; a live vector projection remains available if WebGL fails.
  • At specimen widths of 640px and below, Monitor, Joints, Mission and Debug become focused screens with persistent bottom navigation. Joint, pose and event details scroll independently; Back restores focus to the originating joint or event. Telemetry controls remain separate from scrolling content.