@viamrobotics/motion-tools 1.15.7 → 1.16.0

package/dist/components/xr/OriginMarker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
+	import { useTask, useThrelte } from '@threlte/core'
 	import { Grid, useGamepad } from '@threlte/extras'
+	import { Hand, useHand, useXR } from '@threlte/xr'
 	import { Group, Quaternion, Vector2, Vector3 } from 'three'
 
 	import { useAnchors } from './useAnchors.svelte'
@@ -9,17 +10,20 @@
 	const origin = useOrigin()
 	const anchors = useAnchors()
 
-	const group = new Group()
 	const anchorObject = new Group()
 
 	const leftPad = useGamepad({ xr: true, hand: 'left' })
 	const rightPad = useGamepad({ xr: true, hand: 'right' })
 
-	const speed = 0.05
+	let speed = $state(0.05)
 
 	const vec2 = new Vector2()
 	const target = new Vector2()
 
+	leftPad.squeeze.on('change', () => {
+		speed = leftPad.squeeze.pressed ? 0.005 : 0.05
+	})
+
 	leftPad.thumbstick.on('change', ({ value }) => {
 		if (typeof value === 'number') {
 			return
@@ -29,6 +33,8 @@
 		const [x, y, z] = origin.position
 		const r = origin.rotation
 
+		vec2.set(z, r).lerp(target.set(z + vy * speed, r + vx * speed), 0.5)
+
 		origin.set([x, y, z + vy * speed], r + vx * speed)
 	})
 
@@ -56,19 +62,90 @@
 			anchors.bindAnchorObject(anchor, anchorObject)
 		})
 	})
+
+	let startLeftPinchTranslation = new Vector3()
+	let leftPinchTranslation = new Vector3()
+	let startRightPinchTranslation = new Vector3()
+	let rightPinchTranslation = new Vector3()
+
+	const leftHand = useHand('left')
+	const rightHand = useHand('right')
+
+	let translating = $state(false)
+	let rotating = $state(false)
+
+	const { renderer } = useThrelte()
+	const { isPresenting } = useXR()
+
+	$effect(() => {
+		if (!$isPresenting) {
+			return
+		}
+		renderer.xr.getHand(0).addEventListener('pinchstart', () => {
+			if (leftHand.current?.targetRay.position) {
+				translating = true
+				startLeftPinchTranslation.copy(leftHand.current.targetRay.position)
+			}
+		})
+	})
+
+	useTask(
+		() => {
+			if (leftHand.current?.targetRay && translating) {
+				leftPinchTranslation
+					.copy(leftHand.current.targetRay.position)
+					.sub(startLeftPinchTranslation)
+				origin.set(leftPinchTranslation.toArray(), origin.rotation)
+			}
+		},
+		{
+			running: () => translating,
+		}
+	)
+
+	useTask(
+		() => {
+			if (rightHand.current?.targetRay && rotating) {
+				rightPinchTranslation.copy(rightHand.current.targetRay.position)
+				const rotation =
+					origin.rotation + rightPinchTranslation.distanceTo(startRightPinchTranslation)
+				origin.set(leftPinchTranslation.toArray(), rotation)
+			}
+		},
+		{
+			running: () => rotating,
+		}
+	)
 </script>
 
-<T
-	is={group}
-	position={[0, 0.05, 0]}
->
-	<Grid
-		plane="xy"
-		position.y={0.05}
-		fadeDistance={5}
-		fadeOrigin={new Vector3()}
-		cellSize={0.1}
-		cellColor="#fff"
-		sectionColor="#fff"
-	/>
-</T>
+<Grid
+	plane="xy"
+	fadeDistance={5}
+	fadeOrigin={new Vector3()}
+	cellSize={0.1}
+	cellColor="#fff"
+	sectionColor="#fff"
+/>
+
+<Hand
+	left
+	onpinchstart={() => {
+		console.log('pinchstart')
+		if (leftHand.current?.targetRay.position) {
+			translating = true
+			startLeftPinchTranslation.copy(leftHand.current.targetRay.position)
+		}
+	}}
+	onpinchend={() => (translating = false)}
+/>
+
+<Hand
+	right
+	onpinchstart={() => {
+		if (rightHand.current?.targetRay.position) {
+			rotating = true
+			startRightPinchTranslation.copy(rightHand.current.targetRay.position)
+		}
+	}}
+	onpinchend={() => (rotating = false)}
+/>

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,5 +1,13 @@
 export interface Settings {
     cameraMode: 'orthographic' | 'perspective';
+    interactionMode: 'navigate' | 'measure' | 'select';
+    refreshRates: {
+        poses: number;
+        pointclouds: number;
+        vision: number;
+    };
+    disabledCameras: Record<string, boolean>;
+    disabledVisionServices: Record<string, boolean>;
     transforming: boolean;
     snapping: boolean;
     transformMode: 'translate' | 'rotate' | 'scale';
@@ -11,7 +19,6 @@ export interface Settings {
     pointColor: string;
     lineWidth: number;
     lineDotSize: number;
-    interactionMode: 'navigate' | 'measure' | 'lasso';
     enableMeasureAxisX: boolean;
     enableMeasureAxisY: boolean;
     enableMeasureAxisZ: boolean;
@@ -45,6 +52,11 @@ interface Context {
     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,8 +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 = () => ({
     cameraMode: 'perspective',
+    refreshRates: {
+        poses: 1000,
+        pointclouds: 5000,
+        vision: 1000,
+    },
+    disabledCameras: {},
+    disabledVisionServices: {},
     transforming: false,
     snapping: false,
     transformMode: 'translate',
@@ -53,7 +65,7 @@ export const provideSettings = () => {
     });
     $effect(() => {
         if (isLoaded) {
-            set('motion-tools-settings', $state.snapshot(settings));
+            set('motion-tools-settings', $state.snapshot({ ...settings, interactionMode: 'navigate' }));
         }
     });
     const context = {

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { default as MotionTools } from './components/App.svelte';
-export { default as LassoTool } from './components/Lasso/Tool.svelte';
+export { default as SelectionTool } from './components/Selection/Tool.svelte';
 export { default as PCD } from './components/PCD.svelte';

package/dist/index.js

@@ -1,4 +1,4 @@
 export { default as MotionTools } from './components/App.svelte';
 // Plugins
-export { default as LassoTool } from './components/Lasso/Tool.svelte';
+export { default as SelectionTool } from './components/Selection/Tool.svelte';
 export { default as PCD } from './components/PCD.svelte';

package/package.json

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

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 {};

package/dist/hooks/useMachineSettings.svelte.js

@@ -1,58 +0,0 @@
-import { get, set } from 'idb-keyval';
-import { getContext, setContext } from 'svelte';
-import { SvelteMap } from 'svelte/reactivity';
-const key = Symbol('polling-rate-context');
-const refreshRatesKey = 'polling-rate';
-const disabledCamerasKey = 'disabled-cameras';
-const disabledVisionServicesKey = 'disabled-vision-services-object-pointcloud';
-export const RefreshRates = {
-    poses: 'poses',
-    pointclouds: 'pointclouds',
-};
-const setFromEntries = (map, entries) => {
-    if (entries) {
-        for (const [key, value] of entries) {
-            map.set(key, value);
-        }
-    }
-};
-export const provideMachineSettings = () => {
-    const refreshRates = new SvelteMap([
-        [RefreshRates.poses, 1000],
-        [RefreshRates.pointclouds, -1],
-    ]);
-    const disabledCameras = new SvelteMap();
-    const disabledVisionServices = new SvelteMap();
-    get(refreshRatesKey).then((entries) => {
-        setFromEntries(refreshRates, entries);
-    });
-    get(disabledCamerasKey).then((entries) => {
-        setFromEntries(disabledCameras, entries);
-    });
-    get(disabledVisionServicesKey).then((entries) => {
-        setFromEntries(disabledVisionServices, entries);
-    });
-    $effect(() => {
-        set(refreshRatesKey, [...refreshRates.entries()]);
-    });
-    $effect(() => {
-        set(disabledCamerasKey, [...disabledCameras.entries()]);
-    });
-    $effect(() => {
-        set(disabledVisionServicesKey, [...disabledVisionServices.entries()]);
-    });
-    setContext(key, {
-        get refreshRates() {
-            return refreshRates;
-        },
-        get disabledCameras() {
-            return disabledCameras;
-        },
-        get disabledVisionServices() {
-            return disabledVisionServices;
-        },
-    });
-};
-export const useMachineSettings = () => {
-    return getContext(key);
-};