@viamrobotics/motion-tools 0.5.5 → 0.6.0

package/dist/color.d.ts

@@ -7,18 +7,23 @@ import { Color, type ColorRepresentation } from 'three';
  */
 export declare const darkenColor: (value: ColorRepresentation, percent: number) => Color;
 export declare const colors: {
-    readonly selected: string;
     readonly default: string;
-    readonly arm: {
-        readonly selected: string;
-        readonly default: string;
-    };
-    readonly camera: {
-        readonly selected: string;
-        readonly default: string;
-    };
-    readonly gripper: {
-        readonly selected: string;
-        readonly default: string;
-    };
+};
+export declare const resourceColors: {
+    readonly arm: string;
+    readonly camera: string;
+    readonly base: string;
+    readonly board: string;
+    readonly button: string;
+    readonly encoder: string;
+    readonly gantry: string;
+    readonly gripper: string;
+    readonly motor: string;
+    readonly movement_sensor: string;
+    readonly pose_tracker: string;
+    readonly power_sensor: string;
+    readonly sensor: string;
+    readonly servo: string;
+    readonly switch: string;
+    readonly webcam: string;
 };

package/dist/color.js

@@ -51,19 +51,25 @@ export const darkenColor = (value, percent) => {
     hsl.l = Math.max(0, hsl.l * (1 - percent / 100));
     return new Color().setHSL(hsl.h, hsl.s, hsl.l);
 };
+const darkness = '600';
 export const colors = {
-    selected: oklchToHex(twColors.red['900']),
-    default: oklchToHex(twColors.red['500']),
-    arm: {
-        selected: oklchToHex(twColors.amber['900']),
-        default: oklchToHex(twColors.amber['500']),
-    },
-    camera: {
-        selected: oklchToHex(twColors.blue['900']),
-        default: oklchToHex(twColors.blue['500']),
-    },
-    gripper: {
-        selected: oklchToHex(twColors.cyan['900']),
-        default: oklchToHex(twColors.cyan['500']),
-    },
+    default: oklchToHex(twColors.red[darkness]),
+};
+export const resourceColors = {
+    arm: oklchToHex(twColors.amber[darkness]),
+    camera: oklchToHex(twColors.blue[darkness]),
+    base: oklchToHex(twColors.slate[darkness]),
+    board: oklchToHex(twColors.emerald[darkness]),
+    button: oklchToHex(twColors.gray[darkness]),
+    encoder: oklchToHex(twColors.lime[darkness]),
+    gantry: oklchToHex(twColors.purple[darkness]),
+    gripper: oklchToHex(twColors.cyan[darkness]),
+    motor: oklchToHex(twColors.orange[darkness]),
+    movement_sensor: oklchToHex(twColors.indigo[darkness]),
+    pose_tracker: oklchToHex(twColors.rose[darkness]),
+    power_sensor: oklchToHex(twColors.violet[darkness]),
+    sensor: oklchToHex(twColors.teal[darkness]),
+    servo: oklchToHex(twColors.yellow[darkness]),
+    switch: oklchToHex(twColors.stone[darkness]),
+    webcam: oklchToHex(twColors.sky[darkness]),
 };

package/dist/components/Details.svelte

@@ -1,5 +1,16 @@
-<script lang="ts">
+<script
+	module
+	lang="ts"
+>
+	import { OrientationVector } from '../three/OrientationVector'
 	import { Quaternion, Vector3 } from 'three'
+
+	const vec3 = new Vector3()
+	const quaternion = new Quaternion()
+	const ov = new OrientationVector()
+</script>
+
+<script lang="ts">
 	import { Check, Copy } from 'lucide-svelte'
 	import { Button, Icon } from '@viamrobotics/prime-core'
 	import {
@@ -10,7 +21,7 @@
 		useSelectedObject3d,
 	} from '../hooks/useSelection.svelte'
 	import { useDraggable } from '../hooks/useDraggable.svelte'
-	import { OrientationVector } from '../three/OrientationVector'
+	import { useTask } from '@threlte/core'
 
 	const focused = useFocused()
 	const focusedObject = useFocusedObject()
@@ -21,15 +32,42 @@
 
 	const object = $derived(focusedObject.current ?? selectedObject.current)
 	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
-	const worldPosition = $derived(object3d?.getWorldPosition(new Vector3()))
-	const worldQuaternion = $derived(object3d?.getWorldQuaternion(new Quaternion()))
-	const worldOrientation = $derived(
-		worldQuaternion ? new OrientationVector().setFromQuaternion(worldQuaternion) : undefined
-	)
+	const worldPosition = $state({ x: 0, y: 0, z: 0 })
+	const worldOrientation = $state({ x: 0, y: 0, z: 1, th: 0 })
 
 	let copied = $state(false)
 
 	const draggable = useDraggable('details')
+
+	const { start, stop } = useTask(
+		() => {
+			object3d?.getWorldPosition(vec3)
+			if (!vec3.equals(worldPosition)) {
+				worldPosition.x = vec3.x
+				worldPosition.y = vec3.y
+				worldPosition.z = vec3.z
+			}
+
+			object3d?.getWorldQuaternion(quaternion)
+			ov.setFromQuaternion(quaternion)
+
+			if (!ov.equals(worldOrientation)) {
+				worldOrientation.x = ov.x
+				worldOrientation.y = ov.y
+				worldOrientation.z = ov.z
+				worldOrientation.th = ov.th
+			}
+		},
+		{ autoStart: false }
+	)
+
+	$effect.pre(() => {
+		if (object3d) {
+			start()
+		} else {
+			stop()
+		}
+	})
 </script>
 
 {#if object}

package/dist/components/Focus.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
 	import { TrackballControls, Gizmo } from '@threlte/extras'
-	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
-	import { Box3, Vector3 } from 'three'
+	import { Box3, type Object3D, Vector3 } from 'three'
 	import Camera from './Camera.svelte'
 
-	const focusedObject = useFocusedObject3d()
-	const object3d = $derived(focusedObject.current)
+	interface Props {
+		object3d: Object3D
+	}
+
+	let { object3d }: Props = $props()
 
 	const box = new Box3()
 	const vec = new Vector3()
@@ -14,22 +16,18 @@
 	let center = $state.raw<[number, number, number]>([0, 0, 0])
 	let size = $state.raw<[number, number, number]>([0, 0, 0])
 
-	$effect(() => {
-		if (object3d) {
-			box.setFromObject(object3d)
-			size = box.getSize(vec).toArray()
-			center = box.getCenter(vec).toArray()
-		}
+	$effect.pre(() => {
+		box.setFromObject(object3d)
+		size = box.getSize(vec).toArray()
+		center = box.getCenter(vec).toArray()
 	})
 </script>
 
-<Camera position={[size[0], 0, 0]}>
+<Camera position={[0, 0, size[0] + 1]}>
 	<TrackballControls target={center}>
 		<Gizmo />
 	</TrackballControls>
 </Camera>
 
-{#if object3d}
-	<T is={object3d} />
-	<T.BoxHelper args={[object3d, 'red']} />
-{/if}
+<T is={object3d} />
+<T.BoxHelper args={[object3d, 'red']} />

package/dist/components/Focus.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const Focus: import("svelte").Component<Record<string, never>, {}, "">;
+import { type Object3D } from 'three';
+interface Props {
+    object3d: Object3D;
+}
+declare const Focus: import("svelte").Component<Props, {}, "">;
 type Focus = ReturnType<typeof Focus>;
 export default Focus;

package/dist/components/Frame.svelte

@@ -1,6 +1,11 @@
+<script module>
+	import { Color, type Object3D } from 'three'
+
+	const colorUtil = new Color()
+</script>
+
 <script lang="ts">
 	import type { Snippet } from 'svelte'
-	import type { Object3D } from 'three'
 	import type { WorldObject } from '../WorldObject'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import Geometry from './Geometry.svelte'
@@ -20,13 +25,15 @@
 
 	const selected = useSelected()
 	const events = useObjectEvents(() => uuid)
+
+	const color = $derived(rest.metadata.color ?? colors.default)
 </script>
 
 <Geometry
 	{uuid}
 	color={selected.current === uuid
-		? `#${darkenColor(rest.metadata.color ?? colors.default, 75).getHexString()}`
-		: undefined}
+		? `#${darkenColor(color, 75).getHexString()}`
+		: `#${colorUtil.set(color).getHexString()}`}
 	{...events}
 	{...rest}
 />

package/dist/components/Frame.svelte.d.ts

@@ -1,5 +1,5 @@
+import { type Object3D } from 'three';
 import type { Snippet } from 'svelte';
-import type { Object3D } from 'three';
 import type { WorldObject } from '../WorldObject';
 interface Props {
     uuid: string;

package/dist/components/Geometry.svelte

@@ -48,7 +48,7 @@
 		poseToObject3d(pose, mesh)
 	})
 
-	let geo = $state<BufferGeometry>()
+	let geo = $state.raw<BufferGeometry>()
 
 	const oncreate = (ref: BufferGeometry) => {
 		geo = ref

package/dist/components/Scene.svelte

@@ -16,7 +16,7 @@
 	import StaticGeometries from './StaticGeometries.svelte'
 	import Shapes from './Shapes.svelte'
 	import Camera from './Camera.svelte'
-	import { useFocused } from '../hooks/useSelection.svelte'
+	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
 	import type { Snippet } from 'svelte'
 	import { useXR } from '@threlte/xr'
 	import { useTransformControls } from '../hooks/useControls.svelte'
@@ -39,10 +39,12 @@
 		},
 	})
 
-	const focused = useFocused()
+	const focusedObject3d = useFocusedObject3d()
 	const transformControls = useTransformControls()
 	const origin = useOrigin()
 
+	const object3d = $derived(focusedObject3d.current)
+
 	const { isPresenting } = useXR()
 </script>
 
@@ -56,7 +58,9 @@
 	rotation.x={$isPresenting ? -Math.PI / 2 : 0}
 	rotation.z={origin.rotation}
 >
-	{#if focused.current === undefined}
+	{#if object3d}
+		<Focus {object3d} />
+	{:else}
 		{#if !$isPresenting}
 			<Camera position={[3, 3, 3]}>
 				<CameraControls enabled={!transformControls.active}>
@@ -88,8 +92,6 @@
 				fadeDistance={25}
 			/>
 		{/if}
-	{:else}
-		<Focus />
 	{/if}
 
 	{@render children?.()}

package/dist/components/StaticGeometries.svelte

@@ -39,7 +39,9 @@
 					<TransformControls
 						object={ref}
 						{mode}
-						onmouseDown={() => transformControls.setActive(true)}
+						onmouseDown={() => {
+							transformControls.setActive(true)
+						}}
 						onmouseUp={() => {
 							transformControls.setActive(false)
 

package/dist/hooks/useFrames.svelte.js

@@ -1,11 +1,13 @@
 import { getContext, setContext, untrack } from 'svelte';
-import { useRobotClient, createRobotQuery, useMachineStatus } from '@viamrobotics/svelte-sdk';
+import { useRobotClient, createRobotQuery, useMachineStatus, useResourceNames, } from '@viamrobotics/svelte-sdk';
 import { WorldObject } from '../WorldObject';
 import { useRefreshRates } from './useRefreshRates.svelte';
 import { observe } from '@threlte/core';
 import { useLogs } from './useLogs.svelte';
+import { resourceColors } from '../color';
 const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
+    const resourceNames = useResourceNames(partID);
     const client = useRobotClient(partID);
     const machineStatus = useMachineStatus(partID);
     const logs = useLogs();
@@ -28,9 +30,15 @@ export const provideFrames = (partID) => {
             return objects;
         }
         for (const { frame } of query.current.data ?? []) {
-            if (frame) {
-                objects.push(new WorldObject(frame.referenceFrame ? frame.referenceFrame : 'Unnamed frame', frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject?.geometryType));
+            if (frame === undefined) {
+                continue;
             }
+            const resourceName = resourceNames.current.find((item) => item.name === frame.referenceFrame);
+            objects.push(new WorldObject(frame.referenceFrame ? frame.referenceFrame : 'Unnamed frame', frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject?.geometryType, resourceName
+                ? {
+                    color: resourceColors[resourceName.subtype],
+                }
+                : undefined));
         }
         return objects;
     });

package/dist/hooks/useGeometries.svelte.js

@@ -7,13 +7,15 @@ import { useRefreshRates } from './useRefreshRates.svelte';
 import { WorldObject } from '../WorldObject';
 import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
 import { useLogs } from './useLogs.svelte';
+import { resourceColors } from '../color';
 const key = Symbol('geometries-context');
 export const provideGeometries = (partID) => {
-    const logs = useLogs();
-    const refreshRates = useRefreshRates();
+    const resourceNames = useResourceNames(partID);
     const arms = useResourceNames(partID, 'arm');
     const cameras = useResourceNames(partID, 'camera');
     const grippers = useResourceNames(partID, 'gripper');
+    const logs = useLogs();
+    const refreshRates = useRefreshRates();
     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)));
@@ -45,7 +47,10 @@ export const provideGeometries = (partID) => {
             if (!query.data)
                 continue;
             for (const { center, label, geometryType } of query.data.geometries) {
-                results.push(new WorldObject(label ? label : 'Unnamed geometry', center, query.data.name, geometryType));
+                const resourceName = resourceNames.current.find((item) => item.name === query.data.name);
+                results.push(new WorldObject(label ? label : 'Unnamed geometry', center, query.data.name, geometryType, resourceName
+                    ? { color: resourceColors[resourceName.subtype] }
+                    : undefined));
             }
         }
         updateUUIDs(results);

package/dist/hooks/useObjectEvents.svelte.js

@@ -33,6 +33,8 @@ export const useObjectEvents = (uuid) => {
                 selected.set(uuid());
             }
         },
-        onpointermissed: () => selected.set(),
+        onpointermissed: () => {
+            selected.set();
+        },
     };
 };

package/dist/hooks/useSelection.svelte.js

@@ -7,6 +7,7 @@ const selectionKey = Symbol('selection-context');
 const focusKey = Symbol('focus-context');
 const selectedObjectKey = Symbol('selected-frame-context');
 const focusedObjectKey = Symbol('focused-frame-context');
+const focusedObject3dKey = Symbol('focused-object-3d-context');
 export const provideSelection = () => {
     let selected = $state();
     let focused = $state();
@@ -46,13 +47,21 @@ export const provideSelection = () => {
         },
     };
     setContext(selectedObjectKey, selectedObjectContext);
-    const focusedFrame = $derived(objects.current.find((object) => object.uuid === focused));
-    const focusedFrameContext = {
+    const focusedObject = $derived(objects.current.find((object) => object.uuid === focused));
+    const focusedObjectContext = {
         get current() {
-            return focusedFrame;
+            return focusedObject;
         },
     };
-    setContext(focusedObjectKey, focusedFrameContext);
+    setContext(focusedObjectKey, focusedObjectContext);
+    const { scene } = useThrelte();
+    const uuid = $derived(focusedObject?.uuid);
+    const focusedObject3d = $derived(uuid ? scene.getObjectByProperty('uuid', uuid)?.clone() : undefined);
+    setContext(focusedObject3dKey, {
+        get current() {
+            return focusedObject3d;
+        },
+    });
     return {
         selection: selectionContext,
         focus: focusContext,
@@ -72,16 +81,7 @@ export const useSelectedObject = () => {
     return getContext(selectedObjectKey);
 };
 export const useFocusedObject3d = () => {
-    const focusedObject = useFocusedObject();
-    const { scene } = useThrelte();
-    const object = $derived(focusedObject.current
-        ? scene.getObjectByProperty('uuid', focusedObject.current.uuid)?.clone()
-        : undefined);
-    return {
-        get current() {
-            return object;
-        },
-    };
+    return getContext(focusedObject3dKey);
 };
 const matrix = new Matrix4();
 export const useSelectedObject3d = () => {

package/dist/three/OrientationVector.d.ts

@@ -1,5 +1,11 @@
 import { Euler, Quaternion } from 'three';
 export declare const EPSILON = 0.0001;
+type OrientationVectorLike = OrientationVector | {
+    x: number;
+    y: number;
+    z: number;
+    th: number;
+};
 /**
  * Golang: https://github.com/viamrobotics/rdk/blob/main/spatialmath/orientationVector.go
  * Rust:   https://github.com/viamrobotics/rust-utils/blob/main/src/spatialmath/utils.rs
@@ -62,6 +68,7 @@ export declare class OrientationVector {
      * Copies value of ov to this orientation vector.
      */
     copy(ov: OrientationVector): this;
+    equals(orientationVector: OrientationVectorLike): boolean;
     fromArray(array: number[], offset?: number): this;
     toArray(array?: number[], offset?: number): number[];
     toJson(): number[];
@@ -69,3 +76,4 @@ export declare class OrientationVector {
     toQuaternion(dest: Quaternion): Quaternion;
     toEuler(dest: Euler): Euler;
 }
+export {};

package/dist/three/OrientationVector.js

@@ -151,6 +151,12 @@ export class OrientationVector {
         this.#onChangeCallback?.();
         return this;
     }
+    equals(orientationVector) {
+        return (this.x === orientationVector.x &&
+            this.y === orientationVector.y &&
+            this.z === orientationVector.z &&
+            this.th === orientationVector.th);
+    }
     fromArray(array, offset = 0) {
         this.#vec.set(array[offset] ?? 0, array[offset + 1] ?? 0, array[offset + 2] ?? 0);
         this.th = array[offset + 3] ?? 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -11,38 +11,38 @@
     "@changesets/cli": "2.29.5",
     "@dimforge/rapier3d-compat": "0.17.3",
     "@eslint/compat": "1.3.1",
-    "@eslint/js": "9.30.1",
-    "@playwright/test": "1.53.2",
-    "@sentry/sveltekit": "9.34.0",
-    "@skeletonlabs/skeleton": "3.1.3",
-    "@skeletonlabs/skeleton-svelte": "1.2.3",
+    "@eslint/js": "9.31.0",
+    "@playwright/test": "1.54.1",
+    "@sentry/sveltekit": "9.39.0",
+    "@skeletonlabs/skeleton": "3.1.7",
+    "@skeletonlabs/skeleton-svelte": "1.3.0",
     "@sveltejs/adapter-static": "3.0.8",
-    "@sveltejs/kit": "2.22.2",
-    "@sveltejs/package": "2.3.12",
-    "@sveltejs/vite-plugin-svelte": "5.1.0",
+    "@sveltejs/kit": "2.24.0",
+    "@sveltejs/package": "2.4.0",
+    "@sveltejs/vite-plugin-svelte": "6.1.0",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/vite": "4.1.11",
-    "@tanstack/svelte-query": "5.81.5",
-    "@tanstack/svelte-query-devtools": "5.81.5",
+    "@tanstack/svelte-query": "5.83.0",
+    "@tanstack/svelte-query-devtools": "5.83.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/svelte": "5.2.8",
-    "@threlte/core": "8.0.5",
-    "@threlte/extras": "9.4.0",
+    "@threlte/core": "8.1.3",
+    "@threlte/extras": "9.4.2",
     "@threlte/rapier": "3.1.4",
     "@threlte/xr": "1.0.8",
-    "@types/bun": "1.2.17",
+    "@types/bun": "1.2.18",
     "@types/lodash-es": "4.17.12",
-    "@types/three": "0.178.0",
-    "@typescript-eslint/eslint-plugin": "8.35.1",
-    "@typescript-eslint/parser": "8.35.1",
+    "@types/three": "0.178.1",
+    "@typescript-eslint/eslint-plugin": "8.37.0",
+    "@typescript-eslint/parser": "8.37.0",
     "@viamrobotics/prime-core": "0.1.5",
-    "@viamrobotics/sdk": "0.45.0",
-    "@viamrobotics/svelte-sdk": "0.4.1",
+    "@viamrobotics/sdk": "0.46.0",
+    "@viamrobotics/svelte-sdk": "0.4.3",
     "@vitejs/plugin-basic-ssl": "2.1.0",
-    "@zag-js/svelte": "1.18.1",
-    "@zag-js/tree-view": "1.18.1",
-    "camera-controls": "2.10.1",
-    "eslint": "9.30.1",
+    "@zag-js/svelte": "1.18.3",
+    "@zag-js/tree-view": "1.18.3",
+    "camera-controls": "3.1.0",
+    "eslint": "9.31.0",
     "eslint-config-prettier": "10.1.5",
     "eslint-plugin-svelte": "3.10.1",
     "globals": "16.3.0",
@@ -52,10 +52,10 @@
     "lucide-svelte": "0.525.0",
     "prettier": "3.6.2",
     "prettier-plugin-svelte": "3.4.0",
-    "prettier-plugin-tailwindcss": "0.6.13",
+    "prettier-plugin-tailwindcss": "0.6.14",
     "publint": "0.3.12",
-    "runed": "0.29.1",
-    "svelte": "5.34.8",
+    "runed": "0.31.0",
+    "svelte": "5.36.1",
     "svelte-check": "4.2.2",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.11",
@@ -63,9 +63,9 @@
     "threlte-uikit": "1.2.0",
     "tsx": "4.20.3",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.35.1",
+    "typescript-eslint": "8.37.0",
     "vite": "6.3.5",
-    "vite-plugin-devtools-json": "0.2.1",
+    "vite-plugin-devtools-json": "0.3.0",
     "vite-plugin-mkcert": "1.17.8",
     "vitest": "3.2.4"
   },