Skip to content

<Monitor />

<Monitor /> contributes monitor mode: the mode for watching live machine data. Mounting it adds the Monitor button to the workspace mode toggle and a read-only details card for each selected entity — pose, dimensions, count, color, opacity, and relationships.

Monitor is not special. Like build (<BuildFrames />) and move (MoveFrame), it exists only while its plugin is mounted, declared through the same useEnvironmentMode hook. Mount order is priority order — mount <Monitor /> first so it is the leftmost toggle button and the fallback when a persisted mode is unreachable. With no mode plugins mounted at all the mode is none, and the visualizer is a bare renderer: no toggle, no mode UI — the right shape for rendering a snapshot or a single point cloud.

<script lang="ts">
	import { Visualizer } from '@viamrobotics/visualization'
	import { Monitor } from '@viamrobotics/visualization/plugins'
</script>

<div class="h-screen w-screen">
	<Visualizer partID="my-part-id">
		<Monitor />
	</Visualizer>
</div>

While monitor mode is active, each selected entity gets a details card. Cards render every contributed details section with their entity, so both plugins (via useDetailsSection) and the embedding app (via the details snippet on <Visualizer />) can extend them — see Adding overlay UI.

  • A live machine connection fills the cards with live poses; without one they describe whatever is in the scene (a snapshot, dropped files).