@viamrobotics/motion-tools 1.5.0 → 1.9.0

package/dist/components/Overlay/ToggleGroup.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { normalizeProps, useMachine } from '@zag-js/svelte'
+	import * as toggle from '@zag-js/toggle-group'
+
+	interface Props {
+		multiple: boolean
+		buttons: {
+			on?: boolean
+			disabled?: boolean
+			label?: string
+			value: string
+		}[]
+		onclick: (details: string[]) => void
+	}
+
+	let { multiple, buttons, onclick }: Props = $props()
+
+	const id = $props.id()
+	const service = useMachine(toggle.machine, () => ({
+		id,
+		value: buttons.filter((button) => button.on).map((button) => button.value),
+		multiple,
+		onValueChange(details) {
+			onclick(details.value)
+		},
+	}))
+	const api = $derived(toggle.connect(service, normalizeProps))
+</script>
+
+<div
+	class="flex items-center"
+	{...api.getRootProps()}
+>
+	{#each buttons as button (button.value)}
+		<button
+			class="-ml-px flex h-5 w-5 items-center justify-center border text-xs"
+			{...api.getItemProps({ value: button.value })}
+		>
+			{button.label ?? button.value}
+		</button>
+	{/each}
+</div>
+
+<style>
+	button[data-state='on'] {
+		background: green;
+		border-color: black;
+		color: white;
+	}
+
+	button[data-disabled] {
+		opacity: 0.5;
+
+		filter: grayscale(100%);
+	}
+
+	button[data-focus] {
+		outline: none;
+	}
+</style>

package/dist/components/Overlay/ToggleGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    multiple: boolean;
+    buttons: {
+        on?: boolean;
+        disabled?: boolean;
+        label?: string;
+        value: string;
+    }[];
+    onclick: (details: string[]) => void;
+}
+declare const ToggleGroup: import("svelte").Component<Props, {}, "">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/Scene.svelte

@@ -14,7 +14,7 @@
 	import { useOrigin } from './xr/useOrigin.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import CameraControls from './CameraControls.svelte'
-	import MeasureTool from './MeasureTool.svelte'
+	import MeasureTool from './MeasureTool/MeasureTool.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
 	import BatchedArrows from './BatchedArrows.svelte'
 	import Arrows from './Arrows/ArrowGroups.svelte'

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,29 @@
 			<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 sub-entity hover detail <Switch
+					bind:on={settings.current.renderSubEntityHoverDetail}
+				/>
+			</label>
+			<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/dashboard/Button.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
 	import { Ruler } from 'lucide-svelte'
-	import type { ClassValue, MouseEventHandler } from 'svelte/elements'
+	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 
-	interface Props {
+	interface Props extends HTMLButtonAttributes {
 		icon: IconName | 'ruler'
 		active?: boolean
 		description: string
 		hotkey?: string
 		class?: ClassValue | null | undefined
+		tooltipLocation?: 'bottom' | 'right'
 		onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined
 	}
 
@@ -18,13 +19,15 @@
 		description,
 		hotkey = '',
 		class: className = '',
+		tooltipLocation,
 		onclick,
+		...rest
 	}: Props = $props()
 </script>
 
 <Tooltip
 	let:tooltipID
-	location="bottom"
+	location={tooltipLocation ?? 'bottom'}
 >
 	<label
 		class={[
@@ -40,6 +43,7 @@
 			aria-label={description}
 			aria-checked={active}
 			{onclick}
+			{...rest}
 		>
 			{#if icon === 'ruler'}
 				<Ruler size="16" />

package/dist/components/dashboard/Button.svelte.d.ts

@@ -1,11 +1,12 @@
 import { type IconName } from '@viamrobotics/prime-core';
-import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-interface Props {
+import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
     icon: IconName | 'ruler';
     active?: boolean;
     description: string;
     hotkey?: string;
     class?: ClassValue | null | undefined;
+    tooltipLocation?: 'bottom' | 'right';
     onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;

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/ecs/traits.d.ts

@@ -30,11 +30,17 @@ export declare const Center: import("koota").Trait<{
     oZ: number;
     theta: number;
 }>;
+export declare const Hover: import("koota").Trait<{
+    index: number;
+    x: number;
+    y: number;
+    z: number;
+}>;
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances
  */
-export declare const Instanced: import("koota").TagTrait;
+export declare const Instanced: import("koota").Trait<() => boolean>;
 export declare const Instance: import("koota").Trait<{
     meshID: number;
     instanceID: number;
@@ -49,7 +55,7 @@ export declare const Color: import("koota").Trait<{
     g: number;
     b: number;
 }>;
-export declare const Arrow: import("koota").TagTrait;
+export declare const Arrow: import("koota").Trait<() => boolean>;
 export declare const Positions: import("koota").Trait<() => Float32Array<ArrayBuffer>>;
 export declare const Colors: import("koota").Trait<() => Uint8Array<ArrayBuffer>>;
 export declare const Instances: import("koota").Trait<{
@@ -61,7 +67,7 @@ export declare const Arrows: import("koota").Trait<{
 /**
  * Render entity as points
  */
-export declare const Points: import("koota").TagTrait;
+export declare const Points: import("koota").Trait<() => boolean>;
 /**
  * A box, in mm
  */
@@ -108,15 +114,15 @@ export declare const Scale: import("koota").Trait<{
     y: number;
     z: number;
 }>;
-export declare const FramesAPI: import("koota").TagTrait;
-export declare const GeometriesAPI: import("koota").TagTrait;
-export declare const DrawAPI: import("koota").TagTrait;
-export declare const WorldStateStoreAPI: import("koota").TagTrait;
-export declare const SnapshotAPI: import("koota").TagTrait;
+export declare const FramesAPI: import("koota").Trait<() => boolean>;
+export declare const GeometriesAPI: import("koota").Trait<() => boolean>;
+export declare const DrawAPI: import("koota").Trait<() => boolean>;
+export declare const WorldStateStoreAPI: import("koota").Trait<() => boolean>;
+export declare const SnapshotAPI: import("koota").Trait<() => boolean>;
 /**
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
-export declare const DroppedFile: import("koota").TagTrait;
+export declare const DroppedFile: import("koota").Trait<() => boolean>;
 /**
  * Point size, in mm
  */
@@ -125,12 +131,12 @@ export declare const PointSize: import("koota").Trait<() => number>;
  * Line width, in mm
  */
 export declare const LineWidth: import("koota").Trait<() => number>;
-export declare const ReferenceFrame: import("koota").TagTrait;
+export declare const ReferenceFrame: import("koota").Trait<() => boolean>;
 /**
  * This entity can be safetly removed from the scene by the user
  */
-export declare const Removable: import("koota").TagTrait;
-export declare const Geometry: (geometry: ViamGeometry) => import("koota").TagTrait | [import("koota").Trait<{
+export declare const Removable: import("koota").Trait<() => boolean>;
+export declare const Geometry: (geometry: ViamGeometry) => import("koota").Trait<() => boolean> | [import("koota").Trait<{
     x: number;
     y: number;
     z: number;

package/dist/ecs/traits.js

@@ -8,11 +8,17 @@ export const Parent = trait(() => 'world');
 export const Pose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const EditedPose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const Center = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
+export const Hover = trait({
+    index: -1, // Sub-entity index, -1 if not applicable
+    x: 0, // World position X in meters
+    y: 0, // World position Y in meters
+    z: 0, // World position Z in meters
+});
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances
  */
-export const Instanced = trait();
+export const Instanced = trait(() => true);
 export const Instance = trait({
     meshID: -1,
     instanceID: -1,
@@ -23,7 +29,7 @@ export const Opacity = trait(() => 1);
  * @default { r: 1, g: 0, b: 0 }
  */
 export const Color = trait({ r: 0, g: 0, b: 0 });
-export const Arrow = trait();
+export const Arrow = trait(() => true);
 export const Positions = trait(() => new Float32Array());
 export const Colors = trait(() => new Uint8Array());
 export const Instances = trait({
@@ -35,7 +41,7 @@ export const Arrows = trait({
 /**
  * Render entity as points
  */
-export const Points = trait();
+export const Points = trait(() => true);
 /**
  * A box, in mm
  */
@@ -59,15 +65,15 @@ export const GLTF = trait(() => ({
     animationName: '',
 }));
 export const Scale = trait({ x: 1, y: 1, z: 1 });
-export const FramesAPI = trait();
-export const GeometriesAPI = trait();
-export const DrawAPI = trait();
-export const WorldStateStoreAPI = trait();
-export const SnapshotAPI = trait();
+export const FramesAPI = trait(() => true);
+export const GeometriesAPI = trait(() => true);
+export const DrawAPI = trait(() => true);
+export const WorldStateStoreAPI = trait(() => true);
+export const SnapshotAPI = trait(() => true);
 /**
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
-export const DroppedFile = trait();
+export const DroppedFile = trait(() => true);
 // === Shape Properties ===
 /**
  * Point size, in mm
@@ -77,11 +83,11 @@ export const PointSize = trait(() => 10);
  * Line width, in mm
  */
 export const LineWidth = trait(() => 5);
-export const ReferenceFrame = trait();
+export const ReferenceFrame = trait(() => true);
 /**
  * This entity can be safetly removed from the scene by the user
  */
-export const Removable = trait();
+export const Removable = trait(() => true);
 export const Geometry = (geometry) => {
     if (geometry.geometryType.case === 'box') {
         return Box(createBox(geometry.geometryType.value));

package/dist/ecs/useQuery.svelte.js

@@ -1,29 +1,29 @@
 import { untrack } from 'svelte';
-import { $internal as internal, cacheQuery } from 'koota';
+import { $internal as internal, createQuery } from 'koota';
 import { useWorld } from './useWorld';
 export function useQuery(...parameters) {
     const world = useWorld();
-    const hash = cacheQuery(...parameters);
+    const createdQuery = createQuery(...parameters);
     // Using internals to get the query data.
-    const query = world[internal].queriesHashMap.get(hash);
+    const query = world[internal].queriesHashMap.get(createdQuery.hash);
     const initialQueryVersion = query?.version;
     let version = $state.raw(0);
-    let entities = $state.raw(world.query(hash));
+    let entities = $state.raw(world.query(createdQuery));
     $effect(() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         version;
         // Compare the initial version to the current version to
         // see it the query has changed.
-        const query = world[internal].queriesHashMap.get(hash);
+        const query = world[internal].queriesHashMap.get(createdQuery.hash);
         if (query?.version !== initialQueryVersion) {
-            entities = world.query(hash);
+            entities = world.query(createdQuery);
         }
         return untrack(() => {
-            const unsubAdd = world.onQueryAdd(hash, () => {
-                entities = world.query(hash);
+            const unsubAdd = world.onQueryAdd(createdQuery, () => {
+                entities = world.query(createdQuery);
             });
-            const unsubRemove = world.onQueryRemove(hash, () => {
-                entities = world.query(hash);
+            const unsubRemove = world.onQueryRemove(createdQuery, () => {
+                entities = world.query(createdQuery);
             });
             return () => {
                 unsubAdd();