@viamrobotics/motion-tools 1.32.0 → 1.33.0

package/dist/plugins/XR/XRSettings.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+	import { Select, Switch } from '@viamrobotics/prime-core'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+
+	import { useArmClient } from '../../hooks/useArmClient.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
+
+	const settings = useSettings()
+	const armClient = useArmClient()
+	const partID = usePartID()
+	const resources = useResourceNames(() => partID.current, 'gripper')
+
+	const armNames = $derived(armClient.names || [])
+	const gripperNames = $derived(
+		resources.current
+			.filter((r) => r.subtype === 'gripper' && r.type === 'component')
+			.map((r) => r.name)
+	)
+
+	const config = $derived(settings.current.xrController)
+
+	// Filter available arms/grippers - exclude what the other controller has selected
+	const leftAvailableArms = $derived(
+		armNames.filter((name) => name === config.left.armName || name !== config.right.armName)
+	)
+	const rightAvailableArms = $derived(
+		armNames.filter((name) => name === config.right.armName || name !== config.left.armName)
+	)
+
+	const leftAvailableGrippers = $derived(
+		gripperNames.filter(
+			(name) => name === config.left.gripperName || name !== config.right.gripperName
+		)
+	)
+	const rightAvailableGrippers = $derived(
+		gripperNames.filter(
+			(name) => name === config.right.gripperName || name !== config.left.gripperName
+		)
+	)
+
+	function updateConfig(
+		hand: 'left' | 'right',
+		key: string,
+		value: string | number | boolean | undefined
+	) {
+		settings.current.xrController[hand] = {
+			...settings.current.xrController[hand],
+			[key]: value,
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-2.5 text-xs">
+	<div class="flex flex-col gap-2.5">
+		<label class="flex items-center justify-between gap-2">
+			Enable VR / AR mode <Switch bind:on={settings.current.enableXR} />
+		</label>
+
+		<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Left Controller</strong></h3>
+
+		<label class="flex items-center justify-between gap-2">
+			Arm
+			<Select
+				value={config.left.armName || ''}
+				onchange={(event: Event) => {
+					if (event.target instanceof HTMLSelectElement) {
+						updateConfig('left', 'armName', event.target.value || undefined)
+					}
+				}}
+			>
+				<option value="">None</option>
+				{#each leftAvailableArms as armName (armName)}
+					<option value={armName}>{armName}</option>
+				{/each}
+			</Select>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Gripper
+			<Select
+				value={config.left.gripperName || ''}
+				onchange={(event: Event) => {
+					if (event.target instanceof HTMLSelectElement) {
+						updateConfig('left', 'gripperName', event.target.value || undefined)
+					}
+				}}
+			>
+				<option value="">None</option>
+				{#each leftAvailableGrippers as gripperName (gripperName)}
+					<option value={gripperName}>{gripperName}</option>
+				{/each}
+			</Select>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Scale: {config.left.scaleFactor.toFixed(1)}
+			<input
+				class="w-20"
+				type="range"
+				min="0.1"
+				max="3.0"
+				step="0.1"
+				value={config.left.scaleFactor}
+				style="--value: {((config.left.scaleFactor - 0.1) / (3 - 0.1)) * 100}%"
+				oninput={(e) =>
+					updateConfig('left', 'scaleFactor', Number.parseFloat(e.currentTarget.value))}
+			/>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Rotation
+			<Switch
+				on={config.left.rotationEnabled}
+				on:change={(event) => {
+					updateConfig('left', 'rotationEnabled', event.detail)
+				}}
+			/>
+		</label>
+
+		<!-- Right Controller -->
+		<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Right Controller</strong></h3>
+
+		<label class="flex items-center justify-between gap-2">
+			Arm
+			<Select
+				value={config.right.armName || ''}
+				onchange={(event: Event) => {
+					if (event.target instanceof HTMLSelectElement) {
+						updateConfig('right', 'armName', event.target.value || undefined)
+					}
+				}}
+			>
+				<option value="">None</option>
+				{#each rightAvailableArms as armName (armName)}
+					<option value={armName}>{armName}</option>
+				{/each}
+			</Select>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Gripper
+			<Select
+				value={config.right.gripperName || ''}
+				onchange={(event: Event) => {
+					if (event.target instanceof HTMLSelectElement) {
+						updateConfig('right', 'gripperName', event.target.value || undefined)
+					}
+				}}
+			>
+				<option value="">None</option>
+				{#each rightAvailableGrippers as gripperName (gripperName)}
+					<option value={gripperName}>{gripperName}</option>
+				{/each}
+			</Select>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Scale: {config.right.scaleFactor.toFixed(1)}
+			<input
+				class="w-20"
+				type="range"
+				min="0.1"
+				max="3.0"
+				step="0.1"
+				value={config.right.scaleFactor}
+				style="--value: {((config.right.scaleFactor - 0.1) / (3 - 0.1)) * 100}%"
+				oninput={(e) =>
+					updateConfig('right', 'scaleFactor', Number.parseFloat(e.currentTarget.value))}
+			/>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Rotation
+			<Switch
+				on={config.right.rotationEnabled}
+				on:change={(event) => {
+					updateConfig('right', 'rotationEnabled', event.detail)
+				}}
+			/>
+		</label>
+	</div>
+</div>
+
+<style>
+	input[type='range'] {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 100%;
+		background: linear-gradient(
+			to right,
+			#3d7d3f 0%,
+			#3d7d3f var(--value),
+			#d1d5db var(--value),
+			#d1d5db 100%
+		);
+		border-radius: 0.25rem;
+		height: 0.5rem;
+		cursor: pointer;
+		outline: none;
+	}
+
+	/* Webkit browsers (Chrome, Safari, Edge) */
+	input[type='range']::-webkit-slider-track {
+		background: transparent;
+		height: 0.5rem;
+		border-radius: 0.25rem;
+	}
+
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		background: #3d7d3f;
+		height: 1.25rem;
+		width: 1.25rem;
+		border-radius: 50%;
+		border: 2px solid white;
+	}
+
+	/* Firefox */
+	input[type='range']::-moz-range-track {
+		background: transparent;
+		height: 0.5rem;
+		border-radius: 0.25rem;
+	}
+
+	input[type='range']::-moz-range-thumb {
+		background: #3d7d3f;
+		height: 1.25rem;
+		width: 1.25rem;
+		border-radius: 50%;
+		border: 2px solid white;
+	}
+
+	input[type='range']::-moz-range-progress {
+		background: #3d7d3f;
+		height: 0.5rem;
+		border-radius: 0.25rem;
+	}
+</style>

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

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

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { Headset } from '@threlte/xr'
 	import { untrack } from 'svelte'
 	import { CanvasTexture, PlaneGeometry } from 'three'
 
 	import { type ToastVariant, xrToast, type XRToastItem } from './toasts.svelte'
+	import WristDisplay from './WristDisplay.svelte'
 
 	const CANVAS_WIDTH = 700
 	const TOAST_HEIGHT = 80
@@ -204,12 +204,9 @@
 	})
 </script>
 
-<Headset>
-	{#if hasToasts && geometry}
-		<T.Mesh
-			position={[0, -0.3, -1.5]}
-			renderOrder={999}
-		>
+{#if hasToasts && geometry}
+	<WristDisplay position={[0, 0.005, 0.02]}>
+		<T.Mesh renderOrder={999}>
 			<T is={geometry} />
 			<T.MeshBasicMaterial
 				map={texture}
@@ -217,5 +214,5 @@
 				depthTest={false}
 			/>
 		</T.Mesh>
-	{/if}
-</Headset>
+	</WristDisplay>
+{/if}

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

@@ -0,0 +1,7 @@
+declare class DebugStore {
+    messages: string[];
+    add(message: string): void;
+    clear(): void;
+}
+export declare const xrDebug: DebugStore;
+export {};

package/dist/plugins/XR/debug.svelte.js

@@ -0,0 +1,13 @@
+class DebugStore {
+    messages = $state(['debug panel ready']);
+    add(message) {
+        this.messages.push(message);
+        if (this.messages.length > 8) {
+            this.messages = this.messages.slice(-8);
+        }
+    }
+    clear() {
+        this.messages = [];
+    }
+}
+export const xrDebug = new DebugStore();