@viamrobotics/motion-tools 1.5.0 → 1.7.0

package/README.md

@@ -17,21 +17,28 @@ make setup
 
 This single command will:
 
-1. Install and configure **nvm** (Node Version Manager)
-2. Install the latest **Node.js LTS** version via nvm
-3. Install **pnpm** package manager
-4. Install **bun** runtime
+1. Install **fnm** (Fast Node Manager) and **Node.js 22**
+2. Install **pnpm** package manager
+3. Install **bun** runtime
+4. Install **Go** and **buf** (for protobuf generation)
 5. Install all project dependencies
+6. Generate protobuf code
+
+After setup completes, add the shell configuration it prints to your shell config file (`~/.zshrc` or `~/.bashrc`), then restart your terminal.
 
 #### Manual setup
 
 If the above does not work for you, or if you prefer to install dependencies manually:
 
-1. [Install nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
-2. Install Node.js LTS: `nvm install --lts && nvm use --lts`
-3. [Install pnpm](https://pnpm.io/installation)
-4. [Install bun](https://bun.sh/docs/installation)
-5. Install dependencies: `pnpm i`
+1. [Install fnm](https://github.com/Schniz/fnm#installation): `curl -fsSL https://fnm.vercel.app/install | bash`
+2. Install Node.js: `fnm install 22 && fnm use 22`
+3. [Install pnpm](https://pnpm.io/installation): `curl -fsSL https://get.pnpm.io/install.sh | sh -`
+4. [Install bun](https://bun.sh/docs/installation): `curl -fsSL https://bun.sh/install | bash`
+5. [Install Go](https://go.dev/doc/install)
+6. [Install buf](https://buf.build/docs/installation): download from GitHub releases
+7. Install Go tools: `go install google.golang.org/protobuf/cmd/protoc-gen-go@latest`
+8. Install dependencies: `pnpm install`
+9. Generate protobufs: `make proto`
 
 ### Env files for machine configs
 

package/dist/components/App.svelte

@@ -26,6 +26,7 @@
 		provideDrawConnectionConfig,
 		type DrawConnectionConfig,
 	} from '../hooks/useDrawConnectionConfig.svelte'
+	import Camera from './widgets/Camera.svelte'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -64,6 +65,8 @@
 	const settings = provideSettings()
 	const environment = provideEnvironment()
 
+	const currentRobotCameraWidgets = $derived(settings.current.openCameraWidgets[partID] || [])
+
 	$effect(() => {
 		settings.current.enableKeybindings = enableKeybindings
 	})
@@ -138,6 +141,15 @@
 					<ArmPositions {@attach domPortal(root)} />
 				{/if}
 
+				{#if !focus}
+					{#each currentRobotCameraWidgets as cameraName (cameraName)}
+						<Camera
+							name={cameraName}
+							{@attach domPortal(root)}
+						/>
+					{/each}
+				{/if}
+
 				<FileDrop {@attach domPortal(root)} />
 			{/snippet}
 		</SceneProviders>

package/dist/components/Frame.svelte

@@ -3,12 +3,10 @@
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import { Color, Group, type Object3D } from 'three'
 	import Geometry from './Geometry2.svelte'
-	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 	import { useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import { use3DModels } from '../hooks/use3DModels.svelte'
 	import { colors, darkenColor, resourceColors } from '../color'
-	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
 	import type { Entity } from 'koota'
 	import { traits, useTrait } from '../ecs'
 	import type { Pose } from '@viamrobotics/sdk'
@@ -31,7 +29,6 @@
 	const componentModels = use3DModels()
 	const selectedEntity = useSelectedEntity()
 	const resourceByName = useResourceByName()
-	const weblabs = useWeblabs()
 
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useTrait(() => entity, traits.Parent)
@@ -57,10 +54,6 @@
 	})
 
 	const model = $derived.by(() => {
-		if (!weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_RENDER_ARM_MODELS)) {
-			return
-		}
-
 		if (!name.current) {
 			return
 		}

package/dist/components/Tree/Settings.svelte

@@ -6,8 +6,6 @@
 	import { useResourceNames } from '@viamrobotics/svelte-sdk'
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { RefreshRates, useMachineSettings } from '../../hooks/useMachineSettings.svelte'
-	import WeblabActive from '../weblab/WeblabActive.svelte'
-	import { WEBLABS_EXPERIMENTS } from '../../hooks/useWeblabs.svelte'
 	import { useGeometries } from '../../hooks/useGeometries.svelte'
 	import { usePointClouds } from '../../hooks/usePointclouds.svelte'
 	import { useThrelte } from '@threlte/core'
@@ -195,26 +193,24 @@
 			<label class="flex items-center justify-between gap-2">
 				Render stats <Switch bind:on={settings.current.renderStats} />
 			</label>
-			<WeblabActive experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_RENDER_ARM_MODELS}>
-				<label class="flex items-center justify-between gap-2">
-					Render Arm Models
-					<Select
-						value={settings.current.renderArmModels}
-						onchange={(event: InputEvent) => {
-							if (event.target instanceof HTMLSelectElement) {
-								settings.current.renderArmModels = event.target.value as
-									| 'colliders'
-									| 'colliders+model'
-									| 'model'
-							}
-						}}
-					>
-						<option value="colliders">Colliders</option>
-						<option value="colliders+model">Colliders + Model</option>
-						<option value="model">Model</option>
-					</Select>
-				</label>
-			</WeblabActive>
+			<label class="flex items-center justify-between gap-2">
+				Render Arm Models
+				<Select
+					value={settings.current.renderArmModels}
+					onchange={(event: InputEvent) => {
+						if (event.target instanceof HTMLSelectElement) {
+							settings.current.renderArmModels = event.target.value as
+								| 'colliders'
+								| 'colliders+model'
+								| 'model'
+						}
+					}}
+				>
+					<option value="colliders">Colliders</option>
+					<option value="colliders+model">Colliders + Model</option>
+					<option value="model">Model</option>
+				</Select>
+			</label>
 		</div>
 	</div>
 </Drawer>

package/dist/components/Tree/Widgets.svelte

@@ -2,8 +2,20 @@
 	import { Switch } from '@viamrobotics/prime-core'
 	import Drawer from './Drawer.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
 
 	const settings = useSettings()
+	const resourceByName = useResourceByName()
+	const partID = usePartID()
+
+	const cameras = $derived(
+		Object.values(resourceByName.current).filter((resource) => resource?.subtype === 'camera')
+	)
+
+	const currentRobotCameraWidgets = $derived(
+		settings.current.openCameraWidgets[partID.current] || []
+	)
 </script>
 
 <Drawer name="Widgets">
@@ -17,5 +29,37 @@
 				}}
 			/>
 		</div>
+
+		<div class="mt-4">
+			<h3 class="text-sm"><strong>Camera Widgets</strong></h3>
+			{#each cameras as camera (camera?.name)}
+				{#if camera}
+					{@const isOpen = currentRobotCameraWidgets.includes(camera.name)}
+					<div class="flex items-center justify-between gap-4 py-2">
+						{camera.name}
+						<Switch
+							on={isOpen}
+							on:change={(event) => {
+								if (event.detail) {
+									settings.current.openCameraWidgets = {
+										...settings.current.openCameraWidgets,
+										[partID.current]: [...currentRobotCameraWidgets, camera.name],
+									}
+								} else {
+									settings.current.openCameraWidgets = {
+										...settings.current.openCameraWidgets,
+										[partID.current]: currentRobotCameraWidgets.filter(
+											(widget) => widget !== camera.name
+										),
+									}
+								}
+							}}
+						/>
+					</div>
+				{/if}
+			{:else}
+				<div class="py-2">No cameras detected</div>
+			{/each}
+		</div>
 	</div>
 </Drawer>

package/dist/components/Tree/Widgets.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Widgets: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Widgets = InstanceType<typeof Widgets>;
+declare const Widgets: import("svelte").Component<Record<string, never>, {}, "">;
+type Widgets = ReturnType<typeof Widgets>;
 export default Widgets;

package/dist/components/widgets/Camera.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import { draggable } from '@neodrag/svelte'
+	import { Icon, Select } from '@viamrobotics/prime-core'
+	import { CameraStream, useRobotClient } from '@viamrobotics/svelte-sdk'
+	import { StreamClient } from '@viamrobotics/sdk'
+	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
+
+	interface Resolution {
+		width: number
+		height: number
+	}
+
+	const { name, ...rest } = $props<{ name: string }>()
+
+	const settings = useSettings()
+	const partID = usePartID()
+	const client = useRobotClient(() => partID.current)
+	const environment = useEnvironment()
+
+	let dragElement = $state.raw<HTMLElement>()
+	let aspectRatio = $state.raw<number | undefined>(undefined)
+	let fps = $state(0)
+	let resolutions = $state<Resolution[]>([])
+	let currentResolution = $state<string>('')
+	let isLoading = $state(true)
+	let error = $state<string | undefined>(undefined)
+
+	let fpsInterval: ReturnType<typeof setInterval> | undefined
+	let fpsCounterActive = false
+
+	// Cleanup on destroy
+	$effect(() => {
+		return () => {
+			if (fpsInterval) clearInterval(fpsInterval)
+			fpsCounterActive = false
+		}
+	})
+
+	const onMediaLoad = (e: Event) => {
+		const target = e.target as HTMLVideoElement
+
+		// Update aspect ratio
+		if (target.videoWidth && target.videoHeight) {
+			aspectRatio = target.videoWidth / target.videoHeight
+		}
+
+		// Start FPS counter
+		if ('requestVideoFrameCallback' in target) {
+			if (fpsInterval) clearInterval(fpsInterval)
+			fpsCounterActive = false
+
+			let frameCount = 0
+			fpsCounterActive = true
+
+			const onFrame = () => {
+				if (!fpsCounterActive) return
+				frameCount++
+				target.requestVideoFrameCallback(onFrame)
+			}
+			target.requestVideoFrameCallback(onFrame)
+
+			// Update FPS state every 500ms
+			fpsInterval = setInterval(() => {
+				// FPS = frames / 0.5s = frames * 2
+				fps = frameCount * 2
+				frameCount = 0
+			}, 500)
+		}
+	}
+
+	// Create a single StreamClient instance per robot client
+	let streamClient = $derived(client.current ? new StreamClient(client.current) : undefined)
+
+	$effect(() => {
+		if (streamClient) {
+			isLoading = true
+			error = undefined
+			streamClient
+				.getOptions(name)
+				.then((options) => {
+					resolutions = options.map((opt) => ({ width: opt.width, height: opt.height }))
+					isLoading = false
+				})
+				.catch((e) => {
+					error = e instanceof Error ? e.message : 'Failed to get stream options'
+					isLoading = false
+				})
+		}
+	})
+
+	const handleResolutionChange = async (e: Event) => {
+		const target = e.target as HTMLSelectElement
+		if (!target.value || !streamClient) return
+
+		const [w, h] = target.value.split('x').map(Number)
+		if (isNaN(w) || isNaN(h)) return
+
+		try {
+			await streamClient.setOptions(name, w, h)
+			error = undefined
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to set resolution'
+		}
+	}
+</script>
+
+<div
+	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 flex resize-x flex-col overflow-hidden border text-xs"
+	style:width="320px"
+	style:height="auto !important"
+	use:draggable={{
+		bounds: 'body',
+		handle: dragElement,
+	}}
+	{...rest}
+>
+	<div class="flex h-full min-w-0 flex-col">
+		<div class="flex w-full shrink-0 items-center justify-between">
+			<div class="border-medium flex w-full items-center gap-1 border-b p-2">
+				<button bind:this={dragElement}>
+					<Icon name="drag" />
+				</button>
+				<h3 class="min-w-0 truncate">{name}</h3>
+				<div class="flex-1"></div>
+
+				{#if isLoading}
+					<span class="text-subtle mr-2">Loading...</span>
+				{:else if resolutions.length > 0}
+					<div class="mr-2 w-32">
+						<Select
+							bind:value={currentResolution}
+							onchange={handleResolutionChange}
+						>
+							<option value="">Default</option>
+							{#each resolutions as res (`${res.width}x${res.height}`)}
+								<option value={`${res.width}x${res.height}`}>{res.width}x{res.height}</option>
+							{/each}
+						</Select>
+					</div>
+				{/if}
+
+				<button
+					aria-label="close"
+					class="hover:text-default"
+					onclick={() => {
+						const widgets = settings.current.openCameraWidgets[partID.current] || []
+						settings.current.openCameraWidgets = {
+							...settings.current.openCameraWidgets,
+							[partID.current]: widgets.filter((widget) => widget !== name),
+						}
+					}}
+				>
+					<Icon
+						name="close"
+						size="xs"
+					/>
+				</button>
+			</div>
+		</div>
+
+		<div
+			class="relative min-h-0 w-full flex-1 overflow-hidden bg-black [&_img]:h-full [&_img]:w-full [&_img]:object-fill [&_video]:h-full [&_video]:w-full [&_video]:object-fill"
+			style:aspect-ratio={aspectRatio}
+		>
+			{#key environment.current.viewerMode === 'monitor'}
+				<CameraStream
+					{name}
+					partID={partID.current}
+					onloadedmetadata={onMediaLoad}
+					onload={onMediaLoad}
+				/>
+			{/key}
+
+			<!-- FPS Pill -->
+			{#if fps > 0}
+				<div
+					class="absolute bottom-2 left-2 z-10 rounded-[3px] bg-black/30 px-1 py-0.5 text-right font-mono text-xs text-white"
+				>
+					{fps.toFixed(1)}fps
+				</div>
+			{/if}
+
+			<!-- Error display -->
+			{#if error}
+				<div
+					class="absolute inset-0 flex items-center justify-center bg-black/50 p-2 text-center text-white"
+				>
+					{error}
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/widgets/Camera.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    name: string;
+};
+declare const Camera: import("svelte").Component<$$ComponentProps, {}, "">;
+type Camera = ReturnType<typeof Camera>;
+export default Camera;

package/dist/hooks/use3DModels.svelte.js

@@ -1,7 +1,6 @@
 import { ArmClient } from '@viamrobotics/sdk';
 import { createResourceClient, useResourceNames } from '@viamrobotics/svelte-sdk';
 import { getContext, setContext } from 'svelte';
-import { useWeblabs, WEBLABS_EXPERIMENTS } from './useWeblabs.svelte';
 import { useSettings } from './useSettings.svelte';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
@@ -11,7 +10,6 @@ dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5
 gltfLoader.setDRACOLoader(dracoLoader);
 const key = Symbol('3d-models-context');
 export const provide3DModels = (partID) => {
-    const weblabs = useWeblabs();
     const settings = useSettings();
     let current = $state.raw({});
     const arms = useResourceNames(partID, 'arm');
@@ -52,7 +50,7 @@ export const provide3DModels = (partID) => {
         const shouldFetchModels = settings.current.isLoaded &&
             (settings.current.renderArmModels === 'model' ||
                 settings.current.renderArmModels === 'colliders+model');
-        if (weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_RENDER_ARM_MODELS) && shouldFetchModels) {
+        if (shouldFetchModels) {
             fetch3DModels();
         }
     });

package/dist/hooks/useSettings.svelte.d.ts

@@ -18,6 +18,7 @@ export interface Settings {
     enableQueryDevtools: boolean;
     enableXR: boolean;
     enableArmPositionsWidget: boolean;
+    openCameraWidgets: Record<string, string[]>;
     renderStats: boolean;
     renderArmModels: 'colliders' | 'colliders+model' | 'model';
 }

package/dist/hooks/useSettings.svelte.js

@@ -21,6 +21,7 @@ const defaults = () => ({
     enableQueryDevtools: false,
     enableXR: false,
     enableArmPositionsWidget: false,
+    openCameraWidgets: {},
     renderStats: false,
     renderArmModels: 'colliders+model',
 });

package/dist/hooks/useWeblabs.svelte.d.ts

@@ -1,6 +1,4 @@
-export declare const WEBLABS_EXPERIMENTS: {
-    readonly MOTION_TOOLS_RENDER_ARM_MODELS: "MOTION_TOOLS_RENDER_ARM_MODELS";
-};
+export declare const WEBLABS_EXPERIMENTS: {};
 export declare const WEBLABS_CONTEXT_KEY: unique symbol;
 interface Context {
     load: (experiments: string[]) => void;

package/dist/hooks/useWeblabs.svelte.js

@@ -1,8 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
-export const WEBLABS_EXPERIMENTS = {
-    MOTION_TOOLS_RENDER_ARM_MODELS: 'MOTION_TOOLS_RENDER_ARM_MODELS',
-};
+export const WEBLABS_EXPERIMENTS = {};
 export const WEBLABS_CONTEXT_KEY = Symbol('weblabs-context');
 const getCookie = (name) => {
     const value = `; ${document.cookie}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",