@viamrobotics/motion-tools 1.32.0 → 1.33.0

package/dist/components/overlay/settings/Settings.svelte

@@ -1,43 +1,34 @@
 <script lang="ts">
+	import type { Component } from 'svelte'
+
 	import { useThrelte } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
-	import { Input, Switch } from '@viamrobotics/prime-core'
-	import { useResourceNames } from '@viamrobotics/svelte-sdk'
 	import { PersistedState } from 'runed'
-	import { onMount } from 'svelte'
-	import { Color } from 'three'
 
 	import DashboardButton from '../dashboard/Button.svelte'
-	import XRControllerSettings from '../../xr/XRControllerSettings.svelte'
-	import { useGeometries } from '../../../hooks/useGeometries.svelte'
-	import { usePartID } from '../../../hooks/usePartID.svelte'
-	import { usePointcloudObjects } from '../../../hooks/usePointcloudObjects.svelte'
-	import { usePointClouds } from '../../../hooks/usePointclouds.svelte'
-	import { useRefetchPoses } from '../../../hooks/useRefetchPoses'
-	import { RefreshRates, useSettings } from '../../../hooks/useSettings.svelte'
-	import { useWeblabs, WEBLABS_EXPERIMENTS } from '../../../hooks/useWeblabs.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
 
 	import FloatingPanel from '../FloatingPanel.svelte'
-	import RefreshRate from '../RefreshRate.svelte'
-	import ToggleGroup from '../ToggleGroup.svelte'
+	import ConnectionSettings from './ConnectionSettings.svelte'
+	import DebugSettings from './DebugSettings.svelte'
+	import PointcloudSettings from './PointcloudSettings.svelte'
+	import SceneSettings from './SceneSettings.svelte'
 	import Tabs from './Tabs.svelte'
+	import VisionSettings from './VisionSettings.svelte'
+	import WeblabSettings from './WeblabSettings.svelte'
+	import WidgetSettings from './WidgetSettings.svelte'
+
+	interface Props {
+		settingsTabs?: {
+			label: string
+			component: Component
+		}[]
+	}
+
+	let { settingsTabs = [] }: Props = $props()
 
 	const { invalidate } = useThrelte()
-	const partID = usePartID()
-	const cameras = useResourceNames(() => partID.current, 'camera')
-	const visionServices = useResourceNames(() => partID.current, 'vision')
 	const settings = useSettings()
-	const { disabledCameras, disabledVisionServices } = $derived(settings.current)
-	const geometries = useGeometries()
-	const pointclouds = usePointClouds()
-	const pointcloudObjects = usePointcloudObjects()
-	const { refetchPoses } = useRefetchPoses()
-	const weblabs = useWeblabs()
-	const knownWeblabs = Object.keys(WEBLABS_EXPERIMENTS)
-
-	onMount(() => {
-		weblabs.load(knownWeblabs)
-	})
 
 	// Invalidate the renderer for any settings change
 	$effect(() => {
@@ -49,14 +40,8 @@
 		invalidate()
 	})
 
-	const currentRobotCameraWidgets = $derived(
-		settings.current.openCameraWidgets[partID.current] || []
-	)
-
 	const isOpen = new PersistedState('settings-is-open', false)
 	const activeTab = new PersistedState('settings-active-tab', 'Connection')
-
-	const colorHex = $derived(`#${new Color(settings.current.pointColor).getHexString()}`)
 </script>
 
 <Portal id="dashboard">
@@ -72,276 +57,6 @@
 	</fieldset>
 </Portal>
 
-{#snippet SectionTitle(title: string)}
-	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>{title}</strong></h3>
-{/snippet}
-
-{#snippet Connection()}
-	<div class="flex flex-col gap-2.5 text-xs">
-		{@render SectionTitle('Polling rates')}
-
-		<RefreshRate
-			id={RefreshRates.poses}
-			label="Poses"
-			allowLive
-			onManualRefetch={() => {
-				refetchPoses()
-				geometries.refetch()
-			}}
-		/>
-		<RefreshRate
-			id={RefreshRates.pointclouds}
-			label="Pointclouds from cameras"
-			onManualRefetch={() => {
-				pointclouds.refetch()
-			}}
-		/>
-		<RefreshRate
-			id={RefreshRates.vision}
-			label="Vision service pointcloud segments and objects"
-			onManualRefetch={() => {
-				pointcloudObjects.refetch()
-			}}
-		/>
-	</div>
-{/snippet}
-
-{#snippet Pointclouds()}
-	<div class="flex flex-col gap-1 text-xs">
-		<label class="flex items-center justify-between gap-2">
-			Default point size
-
-			<div class="w-20">
-				<Input
-					bind:value={settings.current.pointSize}
-					on:keydown={(event) => event.stopImmediatePropagation()}
-				/>
-			</div>
-		</label>
-
-		<label class="flex items-center justify-between gap-2">
-			Default point color
-
-			<div class="w-20">
-				<Input
-					type="color"
-					value={colorHex}
-					on:change={(event) => {
-						const value = (event.target as HTMLInputElement).value
-						settings.current.pointColor = value
-					}}
-					on:keydown={(event) => event.stopImmediatePropagation()}
-				/>
-			</div>
-		</label>
-
-		{@render SectionTitle('Enabled cameras')}
-
-		{#each cameras.current as camera (camera)}
-			<div class="flex items-center justify-between py-0.5 text-xs">
-				{camera.name}
-				<Switch
-					on={disabledCameras[camera.name] !== true}
-					on:change={(event) => {
-						disabledCameras[camera.name] = !event.detail
-					}}
-				/>
-			</div>
-		{:else}
-			No cameras detected
-		{/each}
-	</div>
-{/snippet}
-
-{#snippet Vision()}
-	<div class="text-gray-9 flex flex-col gap-1 text-xs">
-		{@render SectionTitle('Enabled vision services')}
-
-		{#each visionServices.current as visionService (visionService)}
-			<div class="flex items-center justify-between py-0.5">
-				{visionService.name}
-				<Switch
-					on={disabledVisionServices[visionService.name] !== true}
-					on:change={(event) => {
-						disabledVisionServices[visionService.name] = !event.detail
-					}}
-				/>
-			</div>
-		{:else}
-			No vision services detected
-		{/each}
-	</div>
-{/snippet}
-
-{#snippet Scene()}
-	<div class="text-gray-9 flex flex-col gap-1 text-xs">
-		<label class="flex items-center justify-between gap-2 py-1">
-			Arm Models
-
-			<ToggleGroup
-				multiple
-				options={[
-					{
-						label: 'Colliders',
-						value: 'colliders',
-						selected: settings.current.renderArmModels.includes('colliders'),
-					},
-					{
-						label: 'Model',
-						value: 'model',
-						selected: settings.current.renderArmModels.includes('model'),
-					},
-				]}
-				onSelect={(value) => {
-					settings.current.renderArmModels = (value.join('+') || 'colliders') as
-						| 'colliders'
-						| 'model'
-						| 'colliders+model'
-
-					console.log(settings.current.renderArmModels)
-				}}
-			/>
-		</label>
-
-		<label class="flex items-center justify-between gap-2">
-			Single item hover details <Switch bind:on={settings.current.renderSubEntityHoverDetail} />
-		</label>
-
-		<label class="flex items-center justify-between gap-2">
-			Object labels <Switch bind:on={settings.current.enableLabels} />
-		</label>
-
-		{@render SectionTitle('Grid')}
-
-		<label class="flex items-center justify-between gap-2 py-1">
-			Visible <Switch bind:on={settings.current.grid} />
-		</label>
-
-		<label class="flex items-center justify-between gap-2">
-			Cell size (m)
-
-			<div class="w-20">
-				<Input
-					bind:value={settings.current.gridCellSize}
-					on:keydown={(event) => event.stopImmediatePropagation()}
-				/>
-			</div>
-		</label>
-
-		<label class="flex items-center justify-between gap-2">
-			Section size (m)
-
-			<div class="w-20">
-				<Input
-					bind:value={settings.current.gridSectionSize}
-					on:keydown={(event) => event.stopImmediatePropagation()}
-				/>
-			</div>
-		</label>
-
-		<label class="flex items-center justify-between gap-2">
-			Fade distance (m)
-
-			<div class="w-20">
-				<Input
-					bind:value={settings.current.gridFadeDistance}
-					on:keydown={(event) => event.stopImmediatePropagation()}
-				/>
-			</div>
-		</label>
-
-		{@render SectionTitle('Lines')}
-
-		<label class="flex items-center justify-between gap-2">
-			Thickness
-
-			<div class="w-20">
-				<Input
-					bind:value={settings.current.lineWidth}
-					on:keydown={(event) => event.stopImmediatePropagation()}
-				/>
-			</div>
-		</label>
-
-		<label class="flex items-center justify-between gap-2">
-			Dot size
-
-			<div class="w-20">
-				<Input
-					bind:value={settings.current.lineDotSize}
-					on:keydown={(event) => event.stopImmediatePropagation()}
-				/>
-			</div>
-		</label>
-	</div>
-{/snippet}
-
-{#snippet Stats()}
-	<div class="flex w-full flex-col gap-2.5 text-xs">
-		<label class="flex items-center justify-between gap-2">
-			Render stats <Switch bind:on={settings.current.renderStats} />
-		</label>
-	</div>
-{/snippet}
-
-{#snippet XR()}
-	<div class="flex flex-col gap-2.5 text-xs">
-		<XRControllerSettings />
-	</div>
-{/snippet}
-
-{#snippet Weblabs()}
-	<div class="flex flex-col gap-1 text-xs">
-		{#each knownWeblabs as experiment (experiment)}
-			<label class="flex items-center justify-between gap-2 py-0.5">
-				{experiment}
-				<Switch
-					on={weblabs.isActive(experiment)}
-					on:change={() => weblabs.toggle(experiment)}
-				/>
-			</label>
-		{:else}
-			No weblabs defined
-		{/each}
-	</div>
-{/snippet}
-
-{#snippet Widgets()}
-	<div class="text-gray-9 flex flex-col gap-1 text-xs">
-		<label class="flex items-center justify-between gap-2 py-1">
-			Arm positions
-			<Switch bind:on={settings.current.enableArmPositionsWidget} />
-		</label>
-
-		{@render SectionTitle('Camera widgets')}
-
-		{#each cameras.current as camera (camera)}
-			{@const isWidgetOpen = currentRobotCameraWidgets.includes(camera.name)}
-			<div class="flex items-center justify-between gap-2 py-0.5">
-				<span class="min-w-0 truncate">{camera.name}</span>
-				<Switch
-					on={isWidgetOpen}
-					on:change={(event) => {
-						settings.current.openCameraWidgets = event.detail
-							? {
-									...settings.current.openCameraWidgets,
-									[partID.current]: [...currentRobotCameraWidgets, camera.name],
-								}
-							: {
-									...settings.current.openCameraWidgets,
-									[partID.current]: currentRobotCameraWidgets.filter(
-										(widget) => widget !== camera.name
-									),
-								}
-					}}
-				/>
-			</div>
-		{:else}
-			No cameras detected
-		{/each}
-	</div>
-{/snippet}
-
 <FloatingPanel
 	title="Settings"
 	bind:isOpen={isOpen.current}
@@ -350,14 +65,14 @@
 	<Tabs
 		defaultTab={activeTab.current}
 		items={[
-			{ label: 'Connection', content: Connection },
-			{ label: 'Scene', content: Scene },
-			{ label: 'Pointclouds', content: Pointclouds },
-			{ label: 'Vision', content: Vision },
-			{ label: 'Widgets', content: Widgets },
-			{ label: 'Stats', content: Stats },
-			{ label: 'Weblabs', content: Weblabs },
-			...('xr' in navigator ? [{ label: 'VR / AR', content: XR }] : []),
+			{ label: 'Connection', component: ConnectionSettings },
+			{ label: 'Scene', component: SceneSettings },
+			{ label: 'Pointclouds', component: PointcloudSettings },
+			{ label: 'Vision', component: VisionSettings },
+			{ label: 'Widgets', component: WidgetSettings },
+			{ label: 'Debug', component: DebugSettings },
+			{ label: 'Weblabs', component: WeblabSettings },
+			...settingsTabs,
 		]}
 		onValueChange={(value) => {
 			activeTab.current = value

package/dist/components/overlay/settings/Settings.svelte.d.ts

@@ -1,3 +1,10 @@
-declare const Settings: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Component } from 'svelte';
+interface Props {
+    settingsTabs?: {
+        label: string;
+        component: Component;
+    }[];
+}
+declare const Settings: Component<Props, {}, "">;
 type Settings = ReturnType<typeof Settings>;
 export default Settings;

package/dist/components/overlay/settings/Tabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
+	import type { Component } from 'svelte'
 
 	import { normalizeProps, useMachine } from '@zag-js/svelte'
 	import * as tabs from '@zag-js/tabs'
@@ -9,7 +9,7 @@
 		onValueChange: (value: string) => void
 		items: {
 			label: string
-			content: Snippet
+			component: Component
 		}[]
 	}
 
@@ -45,11 +45,13 @@
 	</div>
 
 	{#each items as item (item.label)}
+		{@const Component = item.component}
+
 		<div
 			{...api.getContentProps({ value: item.label })}
 			class="h-full w-full overflow-y-auto p-4"
 		>
-			{@render item.content()}
+			<Component />
 		</div>
 	{/each}
 </div>

package/dist/components/overlay/settings/Tabs.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
 interface Props {
     defaultTab?: string;
     onValueChange: (value: string) => void;
     items: {
         label: string;
-        content: Snippet;
+        component: Component;
     }[];
 }
-declare const Tabs: import("svelte").Component<Props, {}, "">;
+declare const Tabs: Component<Props, {}, "">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/overlay/settings/VisionSettings.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	const partID = usePartID()
+
+	const visionServices = useResourceNames(() => partID.current, 'vision')
+	const settings = useSettings()
+	const { disabledVisionServices } = $derived(settings.current)
+</script>
+
+<div class="text-gray-9 flex flex-col gap-1 text-xs">
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Enabled vision services</strong></h3>
+
+	{#each visionServices.current as visionService (visionService)}
+		<div class="flex items-center justify-between py-0.5">
+			{visionService.name}
+			<Switch
+				on={disabledVisionServices[visionService.name] !== true}
+				on:change={(event) => {
+					disabledVisionServices[visionService.name] = !event.detail
+				}}
+			/>
+		</div>
+	{:else}
+		No vision services detected
+	{/each}
+</div>

package/dist/components/overlay/settings/VisionSettings.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VisionSettings: import("svelte").Component<Record<string, never>, {}, "">;
+type VisionSettings = ReturnType<typeof VisionSettings>;
+export default VisionSettings;

package/dist/components/overlay/settings/WeblabSettings.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { onMount } from 'svelte'
+
+	import { useWeblabs, WEBLABS_EXPERIMENTS } from '../../../hooks/useWeblabs.svelte'
+
+	const weblabs = useWeblabs()
+	const knownWeblabs = Object.keys(WEBLABS_EXPERIMENTS)
+
+	onMount(() => {
+		weblabs.load(knownWeblabs)
+	})
+</script>
+
+<div class="flex flex-col gap-1 text-xs">
+	{#each knownWeblabs as experiment (experiment)}
+		<label class="flex items-center justify-between gap-2 py-0.5">
+			{experiment}
+			<Switch
+				on={weblabs.isActive(experiment)}
+				on:change={() => weblabs.toggle(experiment)}
+			/>
+		</label>
+	{:else}
+		No weblabs defined
+	{/each}
+</div>

package/dist/components/overlay/settings/WeblabSettings.svelte.d.ts

@@ -0,0 +1,18 @@
+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 WeblabSettings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type WeblabSettings = InstanceType<typeof WeblabSettings>;
+export default WeblabSettings;

package/dist/components/overlay/settings/WidgetSettings.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	const partID = usePartID()
+	const cameras = useResourceNames(() => partID.current, 'camera')
+	const settings = useSettings()
+
+	const currentRobotCameraWidgets = $derived(
+		settings.current.openCameraWidgets[partID.current] || []
+	)
+</script>
+
+<div class="text-gray-9 flex flex-col gap-1 text-xs">
+	<label class="flex items-center justify-between gap-2 py-1">
+		Arm positions
+		<Switch bind:on={settings.current.enableArmPositionsWidget} />
+	</label>
+
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Camera widgets</strong></h3>
+
+	{#each cameras.current as camera (camera)}
+		{@const isWidgetOpen = currentRobotCameraWidgets.includes(camera.name)}
+		<div class="flex items-center justify-between gap-2 py-0.5">
+			<span class="min-w-0 truncate">{camera.name}</span>
+			<Switch
+				on={isWidgetOpen}
+				on:change={(event) => {
+					settings.current.openCameraWidgets = event.detail
+						? {
+								...settings.current.openCameraWidgets,
+								[partID.current]: [...currentRobotCameraWidgets, camera.name],
+							}
+						: {
+								...settings.current.openCameraWidgets,
+								[partID.current]: currentRobotCameraWidgets.filter(
+									(widget) => widget !== camera.name
+								),
+							}
+				}}
+			/>
+		</div>
+	{:else}
+		No cameras detected
+	{/each}
+</div>

package/dist/components/overlay/settings/WidgetSettings.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const WidgetSettings: import("svelte").Component<Record<string, never>, {}, "">;
+type WidgetSettings = ReturnType<typeof WidgetSettings>;
+export default WidgetSettings;

package/dist/components/overlay/widgets/FramePov.svelte

@@ -7,7 +7,6 @@
 	import { usePartID } from '../../../hooks/usePartID.svelte'
 	import { useSettings } from '../../../hooks/useSettings.svelte'
 
-	import { useOrigin } from '../../xr/useOrigin.svelte'
 	import Button from '../dashboard/Button.svelte'
 	import FloatingPanel from '../FloatingPanel.svelte'
 
@@ -20,7 +19,6 @@
 	const { scene, renderer: mainRenderer, renderStage, invalidate } = useThrelte()
 	const settings = useSettings()
 	const partID = usePartID()
-	const origin = useOrigin()
 
 	// Three.js cameras look down -Z; Viam camera frames conventionally have the
 	// optical axis along +Z with image-down along +Y. A 180° rotation around X
@@ -53,7 +51,6 @@
 	const orthoHeight = $derived(BASE_ORTHO_HEIGHT / orthoZoom)
 
 	const composed = new Matrix4()
-	const originMat = new Matrix4()
 
 	$effect(() => {
 		if (!canvasEl) return
@@ -121,15 +118,7 @@
 
 			const povCamera = cameraMode === 'perspective' ? perspectiveCamera : orthographicCamera
 
-			// Compose origin × worldMatrix × VIAM_TO_THREE_CAMERA. The frame
-			// entities' WorldMatrix lives in ECS world space; the rendered scene
-			// is wrapped in a T.Group that applies `origin` on top, so the POV
-			// camera needs the same origin transform to share coordinate space
-			// with the meshes it's rendering.
-			originMat
-				.makeRotationZ(origin.rotation)
-				.setPosition(origin.position[0], origin.position[1], origin.position[2])
-			composed.copy(originMat).multiply(worldMat).multiply(VIAM_TO_THREE_CAMERA)
+			composed.multiplyMatrices(worldMat, VIAM_TO_THREE_CAMERA)
 			composed.decompose(povCamera.position, povCamera.quaternion, povCamera.scale)
 
 			const aspect = width / height

package/dist/{components/xr → plugins/XR}/ArmTeleop.svelte

@@ -6,14 +6,12 @@
 	import { createResourceClient } from '@viamrobotics/svelte-sdk'
 	import { Quaternion, Vector3 } from 'three'
 
-	import {
-		calculatePositionTarget,
-		getFrameTransformationQuaternion,
-	} from './math'
-	import { xrToast } from './toasts.svelte'
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { OrientationVector } from '../../three/OrientationVector'
 
+	import { calculatePositionTarget, getFrameTransformationQuaternion } from './math'
+	import { xrToast } from './toasts.svelte'
+
 	interface Props {
 		armName: string
 		gripperName?: string

package/dist/plugins/XR/DebugPanel.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Text } from 'threlte-uikit'
+	import { Panel } from 'threlte-uikit/horizon'
+
+	import { xrDebug } from './debug.svelte'
+	import WristDisplay from './WristDisplay.svelte'
+
+	const messages = $derived(xrDebug.messages)
+</script>
+
+<WristDisplay position={[0, 0.005, 0.2]}>
+	<Panel
+		flexDirection="column"
+		padding={12}
+		gap={4}
+		backgroundColor="#0a0a0a"
+		borderRadius={8}
+		minWidth={400}
+		minHeight={40}
+	>
+		{#each messages as message, i (i)}
+			<Text
+				text={message}
+				fontSize={14}
+				color="#ffffff"
+			/>
+		{/each}
+	</Panel>
+</WristDisplay>

package/dist/plugins/XR/DebugPanel.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DebugPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type DebugPanel = ReturnType<typeof DebugPanel>;
+export default DebugPanel;