@viamrobotics/motion-tools 1.15.6 → 1.15.8

package/dist/components/xr/XR.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
-	import { World } from '@threlte/rapier'
+	import { useThrelte } from '@threlte/core'
 	import { useXR, XR, XRButton } from '@threlte/xr'
 	import { SvelteMap } from 'svelte/reactivity'
+	import { Quaternion } from 'three'
 
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 
 	import CameraFeed from './CameraFeed.svelte'
-	import Controllers from './Controllers.svelte'
+	import FrameConfigureControllers from './frame-configure/Controllers.svelte'
 	import JointLimitsWidget from './JointLimitsWidget.svelte'
 	import OriginMarker from './OriginMarker.svelte'
+	import TeleopControllers from './teleop/Controllers.svelte'
+	import { provideAnchors } from './useAnchors.svelte'
 	import { useOrigin } from './useOrigin.svelte'
 	import XRToast from './XRToast.svelte'
 
@@ -19,6 +21,7 @@
 	const { isPresenting } = useXR()
 	const settings = useSettings()
 	const origin = useOrigin()
+	provideAnchors()
 	const enableXR = $derived(settings.current.enableXR)
 
 	const partID = usePartID()
@@ -44,6 +47,26 @@
 	const controllerConfig = $derived(settings.current.xrController)
 	const leftArmName = $derived(controllerConfig.left.armName)
 	const rightArmName = $derived(controllerConfig.right.armName)
+
+	const { renderer } = useThrelte()
+
+	// Move into Viam's coordinate system. This basically accomplishes
+	// the same thing as setting z up in the Camera component.
+	$effect(() => {
+		if ($isPresenting) {
+			const q = new Quaternion().setFromAxisAngle({ x: 1, y: 0, z: 0 }, -Math.PI / 2)
+
+			// after the XR session has started and a reference space exists:
+			const baseRefSpace = renderer.xr.getReferenceSpace()
+			if (baseRefSpace) {
+				const rotatedRefSpace = baseRefSpace.getOffsetReferenceSpace(
+					new XRRigidTransform({ x: 0, y: 0, z: 0, w: 1 }, { x: q.x, y: q.y, z: q.z, w: q.w })
+				)
+
+				renderer.xr.setReferenceSpace(rotatedRefSpace)
+			}
+		}
+	})
 </script>
 
 {#if enableXR}
@@ -93,15 +116,13 @@
 
 		<XRToast />
 
-		<World>
-			<Controllers />
+		{#if settings.current.xrMode === 'arm-teleop'}
+			<TeleopControllers />
+		{:else if settings.current.xrMode === 'frame-configure'}
+			<FrameConfigureControllers />
+		{/if}
 
-			<T.Group position.z={-2}>
-				<T.Group rotation.x={$isPresenting ? -Math.PI / 2 : 0}>
-					<OriginMarker />
-				</T.Group>
-			</T.Group>
-		</World>
+		<OriginMarker />
 	</XR>
 
 	<XRButton

package/dist/components/xr/frame-configure/Controllers.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { Controller } from '@threlte/xr'
+</script>
+
+<Controller left />
+<Controller right />

package/dist/components/xr/{HandCollider.svelte.d.ts → frame-configure/Controllers.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const HandCollider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Controllers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type HandCollider = InstanceType<typeof HandCollider>;
-export default HandCollider;
+type Controllers = InstanceType<typeof Controllers>;
+export default Controllers;

package/dist/components/xr/{Controllers.svelte → teleop/Controllers.svelte}

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { RigidBody } from '@threlte/rapier'
 	import { Controller } from '@threlte/xr'
 
-	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
 
-	import ArmTeleop from './ArmTeleop.svelte'
-	import HandCollider from './HandCollider.svelte'
+	import ArmTeleop from '../ArmTeleop.svelte'
 
 	const settings = useSettings()
 
@@ -25,21 +23,8 @@
 	const rightRotationEnabled = $derived(config.right.rotationEnabled)
 </script>
 
-<Controller left>
-	{#snippet grip()}
-		<RigidBody type="kinematicPosition">
-			<HandCollider />
-		</RigidBody>
-	{/snippet}
-</Controller>
-
-<Controller right>
-	{#snippet grip()}
-		<RigidBody type="kinematicPosition">
-			<HandCollider />
-		</RigidBody>
-	{/snippet}
-</Controller>
+<Controller left />
+<Controller right />
 
 <!-- Left Controller Arm Teleop -->
 {#if leftArmName}

package/dist/hooks/use3DModels.svelte.js

@@ -57,7 +57,7 @@ export const provide3DModels = (partID) => {
         }
     };
     $effect(() => {
-        const shouldFetchModels = settings.current.isLoaded && settings.current.renderArmModels.includes('model');
+        const shouldFetchModels = settings.isLoaded && settings.current.renderArmModels.includes('model');
         if (shouldFetchModels) {
             fetch3DModels();
         }

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

@@ -9,6 +9,7 @@ interface CameraControlsContext {
     set(current: CameraControlsRef): void;
     setPose(pose: CameraPose, animate?: boolean): void;
     setInitialPose(): void;
+    setZoom(zoom: number): void;
 }
 export declare const provideCameraControls: (initialCameraPose: () => CameraPose | undefined) => void;
 export declare const useCameraControls: () => CameraControlsContext;

package/dist/hooks/useControls.svelte.js

@@ -9,6 +9,9 @@ export const provideCameraControls = (initialCameraPose) => {
         controls?.setPosition(x, y, z, animate);
         controls?.setLookAt(x, y, z, lookAtX, lookAtY, lookAtZ, animate);
     };
+    const setZoom = (zoom) => {
+        controls?.zoomTo(zoom);
+    };
     const setInitialPose = () => {
         const pose = initialCameraPose();
         setPose(pose ?? { position: [3, 3, 3], lookAt: [0, 0, 0] }, true);
@@ -28,6 +31,7 @@ export const provideCameraControls = (initialCameraPose) => {
         },
         setPose,
         setInitialPose,
+        setZoom,
     });
 };
 export const useCameraControls = () => {

package/dist/hooks/useGeometries.svelte.js

@@ -10,8 +10,8 @@ import { updateGeometryTrait } from '../ecs/traits';
 import { createPose } from '../transform';
 import { useEnvironment } from './useEnvironment.svelte';
 import { useLogs } from './useLogs.svelte';
-import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
 import { useResourceByName } from './useResourceByName.svelte';
+import { RefreshRates, useSettings } from './useSettings.svelte';
 const key = Symbol('geometries-context');
 const colorUtil = new Color();
 export const provideGeometries = (partID) => {
@@ -23,18 +23,16 @@ export const provideGeometries = (partID) => {
     const cameras = useResourceNames(partID, 'camera');
     const grippers = useResourceNames(partID, 'gripper');
     const gantries = useResourceNames(partID, 'gantry');
-    const { refreshRates } = useMachineSettings();
+    const settings = useSettings();
+    const { refreshRates } = $derived(settings.current);
     const armClients = $derived(arms.current.map((arm) => createResourceClient(ArmClient, partID, () => arm.name)));
     const gripperClients = $derived(grippers.current.map((gripper) => createResourceClient(GripperClient, partID, () => gripper.name)));
     const cameraClients = $derived(cameras.current.map((camera) => createResourceClient(CameraClient, partID, () => camera.name)));
     const gantryClients = $derived(gantries.current.map((gantry) => createResourceClient(GantryClient, partID, () => gantry.name)));
-    const interval = $derived(refreshRates.get(RefreshRates.poses));
-    const options = $derived.by(() => {
-        return {
-            enabled: refreshRates.get(RefreshRates.poses) !== RefetchRates.OFF &&
-                environment.current.viewerMode === 'monitor',
-            refetchInterval: interval === RefetchRates.MANUAL ? false : interval,
-        };
+    const interval = $derived(refreshRates[RefreshRates.poses]);
+    const options = $derived({
+        enabled: interval !== RefetchRates.OFF && environment.current.viewerMode === 'monitor',
+        refetchInterval: interval === RefetchRates.MANUAL ? false : interval,
     });
     const armQueries = $derived(armClients.map((client) => [client.current?.name, createResourceQuery(client, 'getGeometries', () => options)]));
     const gripperQueries = $derived(gripperClients.map((client) => [client.current?.name, createResourceQuery(client, 'getGeometries', () => options)]));

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -9,12 +9,13 @@ import { parsePcdInWorker } from '../lib';
 import { createPose } from '../transform';
 import { useEnvironment } from './useEnvironment.svelte';
 import { useLogs } from './useLogs.svelte';
-import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
+import { RefreshRates, useSettings } from './useSettings.svelte';
 const key = Symbol('pointcloud-object-context');
 export const providePointcloudObjects = (partID) => {
     const world = useWorld();
     const environment = useEnvironment();
-    const { refreshRates, disabledVisionServices } = useMachineSettings();
+    const settings = useSettings();
+    const { refreshRates, disabledVisionServices } = $derived(settings.current);
     const services = useResourceNames(partID, 'vision');
     const clients = $derived(services.current.map((service) => createResourceClient(VisionClient, partID, () => service.name)));
     const propQueries = $derived(clients.map((client) => [
@@ -33,7 +34,7 @@ export const providePointcloudObjects = (partID) => {
                 fetchedPropQueries &&
                 client.current?.name &&
                 interval !== RefetchRates.OFF &&
-                disabledVisionServices.get(client.current?.name) !== true) {
+                disabledVisionServices[client.current?.name] !== true) {
                 results.push(client);
             }
         }
@@ -50,13 +51,13 @@ export const providePointcloudObjects = (partID) => {
         for (const [name, query] of propQueries) {
             if (name &&
                 query.data?.objectPointCloudsSupported === false &&
-                disabledVisionServices.get(name) === undefined) {
-                disabledVisionServices.set(name, true);
+                disabledVisionServices[name] === undefined) {
+                disabledVisionServices[name] = true;
             }
         }
     });
     const logs = useLogs();
-    const interval = $derived(refreshRates.get(RefreshRates.pointclouds));
+    const interval = $derived(refreshRates[RefreshRates.vision]);
     const options = $derived({
         enabled: interval !== RefetchRates.OFF,
         refetchInterval: (interval === RefetchRates.MANUAL ? false : interval),

package/dist/hooks/usePointclouds.svelte.js

@@ -7,13 +7,14 @@ import { traits, useWorld } from '../ecs';
 import { parsePcdInWorker } from '../loaders/pcd';
 import { useEnvironment } from './useEnvironment.svelte';
 import { useLogs } from './useLogs.svelte';
-import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
+import { RefreshRates, useSettings } from './useSettings.svelte';
 const key = Symbol('pointcloud-context');
 export const providePointclouds = (partID) => {
     const environment = useEnvironment();
     const world = useWorld();
     const logs = useLogs();
-    const { refreshRates, disabledCameras } = useMachineSettings();
+    const settings = useSettings();
+    const { refreshRates, disabledCameras } = $derived(settings.current);
     const cameras = useResourceNames(partID, 'camera');
     const clients = $derived(cameras.current.map((camera) => createResourceClient(CameraClient, partID, () => camera.name)));
     const propQueries = $derived(clients.map((client) => [
@@ -25,14 +26,14 @@ export const providePointclouds = (partID) => {
         }),
     ]));
     const fetchedPropQueries = $derived(propQueries.every(([, query]) => query.isPending === false));
-    const interval = $derived(refreshRates.get(RefreshRates.pointclouds));
+    const interval = $derived(refreshRates[RefreshRates.pointclouds]);
     const enabledClients = $derived.by(() => {
         const results = [];
         for (const client of clients) {
             if (fetchedPropQueries &&
                 client.current?.name &&
                 interval !== RefetchRates.OFF &&
-                disabledCameras.get(client.current?.name) !== true) {
+                disabledCameras[client.current?.name] !== true) {
                 results.push(client);
             }
         }
@@ -47,8 +48,8 @@ export const providePointclouds = (partID) => {
      */
     $effect(() => {
         for (const [name, query] of propQueries) {
-            if (name && query.data?.supportsPcd === false && disabledCameras.get(name) === undefined) {
-                disabledCameras.set(name, true);
+            if (name && query.data?.supportsPcd === false && disabledCameras[name] === undefined) {
+                disabledCameras[name] = true;
             }
         }
     });

package/dist/hooks/usePose.svelte.js

@@ -6,15 +6,15 @@ import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
 import { useFrames } from './useFrames.svelte';
 import { useLogs } from './useLogs.svelte';
-import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
 import { usePartID } from './usePartID.svelte';
 import { useRefetchPoses } from './useRefetchPoses';
 import { useResourceByName } from './useResourceByName.svelte';
+import { RefreshRates, useSettings } from './useSettings.svelte';
 const originFrameComponentTypes = new Set(['arm', 'gantry', 'gripper', 'base']);
 export const usePose = (name, parent) => {
     const environment = useEnvironment();
     const logs = useLogs();
-    const { refreshRates } = useMachineSettings();
+    const settings = useSettings();
     const partID = usePartID();
     const robotClient = useRobotClient(() => partID.current);
     const currentName = $derived(name());
@@ -25,7 +25,7 @@ export const usePose = (name, parent) => {
     const parentResource = $derived(currentParent ? resourceByName.current[currentParent] : undefined);
     const frames = useFrames();
     let pose = $state();
-    const interval = $derived(refreshRates.get(RefreshRates.poses));
+    const interval = $derived(settings.current.refreshRates[RefreshRates.poses]);
     const resolvedParent = $derived(originFrameComponentTypes.has(parentResource?.subtype ?? '') ? `${parent()}_origin` : parent());
     const resolvedName = $derived(originFrameComponentTypes.has(resource?.subtype ?? '') ? `${currentName}_origin` : currentName);
     const query = createRobotQuery(robotClient, 'getPose', () => [resolvedName, resolvedParent ?? 'world', []], () => ({

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

@@ -1,6 +1,13 @@
 export interface Settings {
-    isLoaded: boolean;
     cameraMode: 'orthographic' | 'perspective';
+    interactionMode: 'navigate' | 'measure' | 'lasso';
+    refreshRates: {
+        poses: number;
+        pointclouds: number;
+        vision: number;
+    };
+    disabledCameras: Record<string, boolean>;
+    disabledVisionServices: Record<string, boolean>;
     transforming: boolean;
     snapping: boolean;
     transformMode: 'translate' | 'rotate' | 'scale';
@@ -12,19 +19,19 @@ export interface Settings {
     pointColor: string;
     lineWidth: number;
     lineDotSize: number;
-    interactionMode: 'navigate' | 'measure' | 'lasso';
     enableMeasureAxisX: boolean;
     enableMeasureAxisY: boolean;
     enableMeasureAxisZ: boolean;
     enableLabels: boolean;
     enableKeybindings: boolean;
     enableQueryDevtools: boolean;
-    enableXR: boolean;
     enableArmPositionsWidget: boolean;
     openCameraWidgets: Record<string, string[]>;
     renderStats: boolean;
     renderArmModels: 'colliders' | 'colliders+model' | 'model';
     renderSubEntityHoverDetail: boolean;
+    enableXR: boolean;
+    xrMode: 'frame-configure' | 'arm-teleop';
     xrController: {
         left: {
             armName?: string;
@@ -42,7 +49,14 @@ export interface Settings {
 }
 interface Context {
     current: Settings;
+    isLoaded: boolean;
+    merge(value: Settings): void;
 }
+export declare const RefreshRates: {
+    readonly poses: "poses";
+    readonly pointclouds: "pointclouds";
+    readonly vision: "vision";
+};
 export declare const provideSettings: () => Context;
 export declare const useSettings: () => Context;
 export {};

package/dist/hooks/useSettings.svelte.js

@@ -1,9 +1,20 @@
 import { get, set } from 'idb-keyval';
 import { getContext, setContext } from 'svelte';
 const key = Symbol('dashboard-context');
+export const RefreshRates = {
+    poses: 'poses',
+    pointclouds: 'pointclouds',
+    vision: 'vision',
+};
 const defaults = () => ({
-    isLoaded: false,
     cameraMode: 'perspective',
+    refreshRates: {
+        poses: 1000,
+        pointclouds: 5000,
+        vision: 1000,
+    },
+    disabledCameras: {},
+    disabledVisionServices: {},
     transforming: false,
     snapping: false,
     transformMode: 'translate',
@@ -22,12 +33,13 @@ const defaults = () => ({
     enableLabels: false,
     enableKeybindings: true,
     enableQueryDevtools: false,
-    enableXR: false,
     enableArmPositionsWidget: false,
     openCameraWidgets: {},
     renderStats: false,
     renderArmModels: 'colliders+model',
     renderSubEntityHoverDetail: false,
+    enableXR: false,
+    xrMode: 'frame-configure',
     xrController: {
         left: {
             scaleFactor: 1,
@@ -40,17 +52,19 @@ const defaults = () => ({
     },
 });
 export const provideSettings = () => {
+    let isLoaded = $state(false);
     let settings = $state(defaults());
-    let settingsLoaded = $state(false);
-    get('motion-tools-settings').then((response) => {
+    get('motion-tools-settings')
+        .then((response) => {
         if (response) {
             settings = { ...settings, ...response };
         }
-        settingsLoaded = true;
-        settings.isLoaded = true;
+    })
+        .finally(() => {
+        isLoaded = true;
     });
     $effect(() => {
-        if (settingsLoaded) {
+        if (isLoaded) {
             set('motion-tools-settings', $state.snapshot(settings));
         }
     });
@@ -61,6 +75,12 @@ export const provideSettings = () => {
         set current(value) {
             settings = value;
         },
+        get isLoaded() {
+            return isLoaded;
+        },
+        merge(value) {
+            settings = { ...settings, ...value };
+        },
     };
     setContext(key, context);
     return context;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.15.6",
+  "version": "1.15.8",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -136,7 +136,7 @@
     "@neodrag/svelte": "^2.3.3",
     "@tanstack/svelte-query-devtools": "^6.0.2",
     "earcut": "^3.0.2",
-    "expr-eval": "^2.0.2",
+    "filtrex": "^3.1.0",
     "koota": "0.6.5",
     "lodash-es": "4.17.23",
     "three-mesh-bvh": "^0.9.8",

package/dist/components/xr/Draggable.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte'
-
-	import { RigidBody as RigidBodyType } from '@dimforge/rapier3d-compat'
-	import { T, useTask } from '@threlte/core'
-	import { useGamepad } from '@threlte/extras'
-	import { AutoColliders, RigidBody } from '@threlte/rapier'
-	import { useController } from '@threlte/xr'
-	import { Group, Vector3 } from 'three'
-
-	interface Props {
-		children: Snippet
-		onPointerEnter?: () => void
-		onPointerLeave?: () => void
-		onPointerDown?: () => void
-		onPointerUp?: () => void
-	}
-
-	let { onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, children }: Props = $props()
-
-	let hovering = $state(false)
-
-	let dragging = $state(false)
-	let rigidBody: RigidBodyType | undefined = $state()
-
-	const group = new Group()
-	const vec3 = new Vector3()
-	const offset = new Vector3()
-	const position = new Vector3()
-
-	const left = useController('left')
-	const right = useController('right')
-	const leftPad = useGamepad({ xr: true, hand: 'left' })
-	const rightPad = useGamepad({ xr: true, hand: 'right' })
-
-	leftPad.trigger.on('down', () => {
-		if (!$left) return
-
-		dragging = true
-		group.getWorldPosition(vec3)
-		offset.copy($left.grip.position).sub(vec3)
-		onPointerDown?.()
-	})
-
-	leftPad.trigger.on('up', () => {
-		dragging = false
-		onPointerUp?.()
-	})
-
-	rightPad.trigger.on('down', () => {
-		if (!$right) return
-
-		dragging = true
-		group.getWorldPosition(vec3)
-		offset.copy($right.grip.position).sub(vec3)
-		onPointerDown?.()
-	})
-
-	rightPad.trigger.on('up', () => {
-		dragging = true
-		onPointerUp?.()
-	})
-
-	const onsensorenter = () => {
-		hovering = true
-		onPointerEnter?.()
-	}
-
-	const onsensorexit = () => {
-		hovering = false
-		onPointerLeave?.()
-	}
-
-	const { start, stop } = useTask(
-		() => {
-			if (!$left || !rigidBody) return
-
-			position.copy($left.grip.position).sub(offset)
-
-			rigidBody.setNextKinematicTranslation({ x: position.x, y: position.y, z: position.z })
-		},
-		{ autoStart: false }
-	)
-
-	$effect(() => (hovering && dragging ? start() : stop()))
-</script>
-
-<T is={group}>
-	<RigidBody
-		bind:rigidBody
-		type="kinematicPosition"
-	>
-		<AutoColliders
-			sensor
-			shape="convexHull"
-			{onsensorenter}
-			{onsensorexit}
-		>
-			{@render children?.()}
-		</AutoColliders>
-	</RigidBody>
-</T>

package/dist/components/xr/Draggable.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    children: Snippet;
-    onPointerEnter?: () => void;
-    onPointerLeave?: () => void;
-    onPointerDown?: () => void;
-    onPointerUp?: () => void;
-}
-declare const Draggable: import("svelte").Component<Props, {}, "">;
-type Draggable = ReturnType<typeof Draggable>;
-export default Draggable;

package/dist/components/xr/HandCollider.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { Group } from 'three'
-
-	import { useParent, useTask } from '@threlte/core'
-	import { Collider, useRigidBody } from '@threlte/rapier'
-
-	const parent = useParent()
-	const rb = useRigidBody()
-
-	useTask(() => {
-		const { position } = $parent as Group
-		rb?.setNextKinematicTranslation({ x: position.x, y: position.y, z: position.z })
-	})
-</script>
-
-<Collider
-	sensor
-	shape="ball"
-	args={[0.1]}
-/>

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

@@ -1,13 +0,0 @@
-import { SvelteMap } from 'svelte/reactivity';
-export declare const RefreshRates: {
-    readonly poses: "poses";
-    readonly pointclouds: "pointclouds";
-};
-type Context = {
-    refreshRates: SvelteMap<string, number>;
-    disabledCameras: SvelteMap<string, boolean>;
-    disabledVisionServices: SvelteMap<string, boolean>;
-};
-export declare const provideMachineSettings: () => void;
-export declare const useMachineSettings: () => Context;
-export {};