@viamrobotics/motion-tools 0.7.0 → 0.9.0

package/dist/WorldObject.d.ts

@@ -17,6 +17,8 @@ export type Metadata = {
     };
     points?: Vector3[];
     pointSize?: number;
+    lineWidth?: number;
+    lineDotColor?: ColorRepresentation;
     batched?: {
         id: number;
         object: BatchedMesh;

package/dist/components/Camera.svelte

@@ -1,38 +1,36 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { PerspectiveCamera, OrthographicCamera } from 'three'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
 	let { children, ...rest } = $props()
 
 	const settings = useSettings()
 	const mode = $derived(settings.current.cameraMode)
-
-	const perspective = new PerspectiveCamera()
-	perspective.near = 0.01
-	perspective.up.set(0, 0, 1)
-
-	const orthographic = new OrthographicCamera()
-	orthographic.near = -100
-	orthographic.far = 100
-	orthographic.up.set(0, 0, 1)
-	orthographic.zoom = 200
 </script>
 
 {#if mode === 'perspective'}
-	<T
-		is={perspective}
+	<T.PerspectiveCamera
 		makeDefault
+		near={0.01}
+		up={[0, 0, 1]}
+		oncreate={(ref) => {
+			ref.lookAt(0, 0, 0)
+		}}
 		{...rest}
 	>
 		{@render children?.()}
-	</T>
+	</T.PerspectiveCamera>
 {:else if mode === 'orthographic'}
-	<T
-		is={orthographic}
+	<T.OrthographicCamera
 		makeDefault
+		near={-100}
+		far={100}
+		up={[0, 0, 1]}
+		oncreate={(ref) => {
+			ref.lookAt(0, 0, 0)
+		}}
 		{...rest}
 	>
 		{@render children?.()}
-	</T>
+	</T.OrthographicCamera>
 {/if}

package/dist/components/CameraControls.svelte

@@ -4,10 +4,21 @@
 	import KeyboardControls from './KeyboardControls.svelte'
 	import Portal from './portal/Portal.svelte'
 	import Button from './dashboard/Button.svelte'
+	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
 
+	const drawAPI = useDrawAPI()
 	const transformControls = useTransformControls()
 
 	let ref = $state.raw<CameraControlsRef>()
+
+	$effect(() => {
+		if (drawAPI.camera) {
+			const { position, lookAt, animate } = drawAPI.camera
+			ref?.setPosition(position.x, position.y, position.z, animate)
+			ref?.setLookAt(position.x, position.y, position.z, lookAt.x, lookAt.y, lookAt.z, animate)
+			drawAPI.clearCamera()
+		}
+	})
 </script>
 
 <Portal id="dashboard">

package/dist/components/Focus.svelte

@@ -23,7 +23,7 @@
 	})
 </script>
 
-<Camera position={[0, 0, size[0] + 1]}>
+<Camera position={[size[0] + 1, size[0] + 1, size[0] + 1]}>
 	<TrackballControls target={center}>
 		<Gizmo />
 	</TrackballControls>

package/dist/components/Geometry.svelte

@@ -101,7 +101,7 @@
 	{#if geometry?.case === 'line'}
 		<MeshLineMaterial
 			{color}
-			width={0.005}
+			width={metadata.lineWidth ?? 0.005}
 		/>
 	{:else if geometry}
 		<T.MeshToonMaterial

package/dist/components/Line.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Instance, InstancedMesh } from '@threlte/extras'
+	import Frame from './Frame.svelte'
+	import type { WorldObject } from '../WorldObject'
+	import { useSettings } from '../hooks/useSettings.svelte'
+
+	interface Props {
+		object: WorldObject
+	}
+
+	let { object }: Props = $props()
+
+	const settings = useSettings()
+</script>
+
+<Frame
+	{...object}
+	metadata={{
+		...object.metadata,
+		lineWidth: settings.current.lineWidth,
+	}}
+/>
+
+{#if object.metadata.lineDotColor && object.metadata.points}
+	<InstancedMesh frustumCulled={false}>
+		<T.SphereGeometry />
+		<T.MeshBasicMaterial color={object.metadata.lineDotColor} />
+
+		{#each object.metadata.points as { x, y, z }, i (i)}
+			<Instance
+				position.x={x}
+				position.y={y}
+				position.z={z}
+				scale={Number(settings.current.lineDotSize)}
+			/>
+		{/each}
+	</InstancedMesh>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { WorldObject } from '../WorldObject';
+interface Props {
+    object: WorldObject;
+}
+declare const Line: import("svelte").Component<Props, {}, "">;
+type Line = ReturnType<typeof Line>;
+export default Line;

package/dist/components/Pointclouds.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { Portal } from './portal'
 	import { usePointClouds } from '../hooks/usePointclouds.svelte'
-	import { useShapes } from '../hooks/useShapes.svelte'
+	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
 	import Pointcloud from './Pointcloud.svelte'
 
 	const points = usePointClouds()
-	const shapes = useShapes()
+	const drawAPI = useDrawAPI()
 </script>
 
 {#each points.current as object (object.uuid)}
@@ -14,7 +14,7 @@
 	</Portal>
 {/each}
 
-{#each shapes.points as object (object.uuid)}
+{#each drawAPI.points as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Pointcloud {object} />
 	</Portal>

package/dist/components/RefreshRate.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Select } from '@viamrobotics/prime-core'
-	import { useRefreshRates } from '../hooks/useRefreshRates.svelte'
+	import { useMachineSettings } from '../hooks/useMachineSettings.svelte'
 	import type { Snippet } from 'svelte'
 
 	interface Props {
@@ -10,8 +10,8 @@
 
 	let { name, children }: Props = $props()
 
-	const pollingRates = useRefreshRates()
-	const rate = $derived(pollingRates.get(name))
+	const { refreshRates } = useMachineSettings()
+	const rate = $derived(refreshRates.get(name))
 </script>
 
 <label class="flex flex-col gap-1">
@@ -20,7 +20,7 @@
 		onchange={(event: InputEvent) => {
 			if (event.target instanceof HTMLSelectElement) {
 				const { value } = event.target
-				pollingRates.set(name, Number.parseInt(value, 10))
+				refreshRates.set(name, Number.parseInt(value, 10))
 			}
 		}}
 		value={String(rate ?? '')}

package/dist/components/SceneProviders.svelte

@@ -6,8 +6,8 @@
 	import { provideSelection } from '../hooks/useSelection.svelte'
 	import { provideStaticGeometries } from '../hooks/useStaticGeometries.svelte'
 	import { provideVisibility } from '../hooks/useVisibility.svelte'
-	import { provideShapes } from '../hooks/useShapes.svelte'
-	import { provideRefreshRates } from '../hooks/useRefreshRates.svelte'
+	import { provideDrawAPI } from '../hooks/useDrawAPI.svelte'
+	import { provideMachineSettings } from '../hooks/useMachineSettings.svelte'
 	import { provideTransformControls } from '../hooks/useControls.svelte'
 	import type { Snippet } from 'svelte'
 	import { provideObjects } from '../hooks/useObjects.svelte'
@@ -27,12 +27,12 @@
 	provideSettings()
 	provideTransformControls()
 	provideVisibility()
-	provideRefreshRates()
+	provideMachineSettings()
 	provideLogs()
 
 	provideOrigin()
 	provideStaticGeometries()
-	provideShapes()
+	provideDrawAPI()
 
 	provideFrames(() => partID.current)
 	provideGeometries(() => partID.current)

package/dist/components/Shapes.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
 	import { Portal, PortalTarget } from './portal'
-	import { useShapes } from '../hooks/useShapes.svelte'
+	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
 	import WorldObject from './WorldObject.svelte'
 	import Frame from './Frame.svelte'
+	import Line from './Line.svelte'
 
-	const shapes = useShapes()
+	const drawAPI = useDrawAPI()
 </script>
 
 <T
-	name={shapes.object3ds.batchedArrow.object3d.name}
-	is={shapes.object3ds.batchedArrow.object3d}
+	name={drawAPI.object3ds.batchedArrow.object3d.name}
+	is={drawAPI.object3ds.batchedArrow.object3d}
 	dispose={false}
 />
 
-{#each shapes.meshes as object (object.uuid)}
+{#each drawAPI.meshes as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Frame
 			uuid={object.uuid}
@@ -28,7 +29,7 @@
 	</Portal>
 {/each}
 
-{#each shapes.nurbs as object (object.uuid)}
+{#each drawAPI.nurbs as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Frame
 			uuid={object.uuid}
@@ -42,8 +43,12 @@
 	</Portal>
 {/each}
 
-{#each shapes.models as object (object.uuid)}
+{#each drawAPI.models as object (object.uuid)}
 	<WorldObject {object}>
 		<PortalTarget id={object.name} />
 	</WorldObject>
 {/each}
+
+{#each drawAPI.lines as object (object.uuid)}
+	<Line {object} />
+{/each}

package/dist/components/Tree/Settings.svelte

@@ -4,8 +4,14 @@
 	import { useMotionClient } from '../../hooks/useMotionClient.svelte'
 	import Drawer from './Drawer.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { useMachineSettings } from '../../hooks/useMachineSettings.svelte'
 
+	const partID = usePartID()
+	const cameras = useResourceNames(() => partID.current, 'camera')
 	const settings = useSettings()
+	const { disabledCameras } = useMachineSettings()
 	const motionClient = useMotionClient()
 </script>
 
@@ -14,20 +20,30 @@
 	defaultOpen
 >
 	<div class="flex h-100 flex-col gap-2 overflow-scroll p-3">
-		<h3 class="text-base"><strong>Refresh rates</strong></h3>
+		<h3 class="text-sm"><strong>Machine connection</strong></h3>
 
-		<RefreshRate name="Frames">
-			<option value="0">Do not fetch</option>
-			<option value="1">Fetch on reconfigure</option>
-		</RefreshRate>
-		<RefreshRate name="Pointclouds" />
 		<RefreshRate name="Geometries" />
 		<RefreshRate name="Poses" />
-
-		<h3 class="text-base"><strong>Motion</strong></h3>
+		<RefreshRate name="Pointclouds" />
+		<div>
+			<div>Enabled pointcloud cameras</div>
+			{#each cameras.current as camera (camera)}
+				<div class="flex items-center justify-between gap-4 py-2">
+					{camera.name}
+					<Switch
+						on={disabledCameras.get(camera.name) !== true}
+						on:change={(event) => {
+							disabledCameras.set(camera.name, !event.detail)
+						}}
+					/>
+				</div>
+			{:else}
+				No cameras detected
+			{/each}
+		</div>
 
 		<label class="flex flex-col gap-1">
-			Client
+			Motion client
 			<Select
 				onchange={(event: InputEvent) => {
 					if (event.target instanceof HTMLSelectElement) {
@@ -42,7 +58,7 @@
 			</Select>
 		</label>
 
-		<h3 class="text-base"><strong>Pointclouds</strong></h3>
+		<h3 class="pt-2 text-sm"><strong>Pointclouds</strong></h3>
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between gap-2">
 				Default point size
@@ -68,7 +84,7 @@
 			</label>
 		</div>
 
-		<h3 class="text-base"><strong>Grid</strong></h3>
+		<h3 class="pt-2 text-sm"><strong>Grid</strong></h3>
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between gap-2">
 				Enabled <Switch bind:on={settings.current.grid} />
@@ -108,7 +124,32 @@
 			</label>
 		</div>
 
-		<h3 class="text-base"><strong>Misc</strong></h3>
+		<h3 class="pt-2 text-sm"><strong>Lines</strong></h3>
+		<div class="flex flex-col gap-2.5">
+			<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>
+
+		<h3 class="pt-2 text-sm"><strong>Misc</strong></h3>
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between gap-2">
 				Render stats <Switch bind:on={settings.current.renderStats} />

package/dist/hooks/{useShapes.svelte.d.ts → useDrawAPI.svelte.d.ts}

@@ -1,8 +1,10 @@
+import { Vector3 } from 'three';
 import { BatchedArrow } from '../three/BatchedArrow';
 import { WorldObject, type PointsGeometry } from '../WorldObject';
 type ConnectionStatus = 'connecting' | 'open' | 'closed';
 interface Context {
     points: WorldObject<PointsGeometry>[];
+    lines: WorldObject[];
     meshes: WorldObject[];
     poses: WorldObject[];
     nurbs: WorldObject[];
@@ -11,7 +13,13 @@ interface Context {
     object3ds: {
         batchedArrow: BatchedArrow;
     };
+    camera: {
+        position: Vector3;
+        lookAt: Vector3;
+        animate: boolean;
+    } | undefined;
+    clearCamera: () => void;
 }
-export declare const provideShapes: () => void;
-export declare const useShapes: () => Context;
+export declare const provideDrawAPI: () => void;
+export declare const useDrawAPI: () => Context;
 export {};

package/dist/hooks/{useShapes.svelte.js → useDrawAPI.svelte.js}

@@ -5,7 +5,7 @@ import { parsePcdInWorker } from '../loaders/pcd';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { BatchedArrow } from '../three/BatchedArrow';
 import { WorldObject } from '../WorldObject';
-const key = Symbol('websocket-context-key');
+const key = Symbol('draw-api-context-key');
 const tryParse = (json) => {
     try {
         return JSON.parse(json);
@@ -31,7 +31,7 @@ class Float32Reader {
         return result;
     }
 }
-export const provideShapes = () => {
+export const provideDrawAPI = () => {
     let pointsIndex = 0;
     let geometryIndex = 0;
     let poseIndex = 0;
@@ -39,10 +39,12 @@ export const provideShapes = () => {
     const maxReconnectDelay = 5_000;
     let ws;
     const points = $state([]);
+    const lines = $state([]);
     const meshes = $state([]);
     const poses = $state([]);
     const nurbs = $state([]);
     const models = $state([]);
+    let camera = $state.raw();
     let connectionStatus = $state('connecting');
     const color = new Color();
     const direction = new Vector3();
@@ -172,11 +174,45 @@ export const provideShapes = () => {
                 : {
                     color: new Color(r, g, b).convertLinearToSRGB(),
                 };
-        points.push(new WorldObject(label ?? `points ${++pointsIndex}`, undefined, undefined, {
+        points.push(new WorldObject(label, undefined, undefined, {
             case: 'points',
             value: positions,
         }, metadata));
     };
+    const addLine = async (reader) => {
+        // Read label length
+        const labelLen = reader.read();
+        let label = '';
+        for (let i = 0; i < labelLen; i++) {
+            label += String.fromCharCode(reader.read());
+        }
+        // Read counts
+        const nPoints = reader.read();
+        // Read default color
+        const lineR = reader.read();
+        const lineG = reader.read();
+        const lineB = reader.read();
+        const dotR = reader.read();
+        const dotG = reader.read();
+        const dotB = reader.read();
+        // Read positions
+        const positions = new Float32Array(nPoints * 3);
+        for (let i = 0; i < nPoints * 3; i++) {
+            positions[i] = reader.read();
+        }
+        const points = [];
+        for (let i = 0; i < positions.length; i += 3) {
+            points.push(new Vector3(positions[i], positions[i + 1], positions[i + 2]));
+        }
+        lines.push(new WorldObject(label, undefined, undefined, {
+            case: 'line',
+            value: positions,
+        }, {
+            points,
+            color: lineR === -1 ? undefined : new Color().setRGB(lineR, lineG, lineB),
+            lineDotColor: dotR === -1 ? undefined : new Color().setRGB(dotR, dotG, dotB),
+        }));
+    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const addGeometries = (geometries, colors, parent) => {
         let i = 0;
@@ -224,10 +260,16 @@ export const provideShapes = () => {
                 models.splice(index, 1);
                 continue;
             }
+            index = lines.findIndex((m) => m.name === name);
+            if (index !== -1) {
+                lines.splice(index, 1);
+                continue;
+            }
         }
     };
     const removeAll = () => {
         points.splice(0, points.length);
+        lines.splice(0, lines.length);
         meshes.splice(0, meshes.length);
         nurbs.splice(0, nurbs.length);
         models.splice(0, models.length);
@@ -270,6 +312,9 @@ export const provideShapes = () => {
                 return addPoses(reader);
             }
             else if (type === 2) {
+                return addLine(reader);
+            }
+            else if (type === 3) {
                 return addPCD(reader.buffer);
             }
             else {
@@ -279,6 +324,13 @@ export const provideShapes = () => {
         const data = tryParse(event.data);
         if (!data)
             return;
+        if ('setCameraPose' in data) {
+            camera = {
+                position: new Vector3(data.Position.X, data.Position.Y, data.Position.Z),
+                lookAt: new Vector3(data.LookAt.X, data.LookAt.Y, data.LookAt.Z),
+                animate: data.Animate,
+            };
+        }
         if ('geometries' in data) {
             return addGeometries(data.geometries, data.colors, data.parent);
         }
@@ -310,6 +362,9 @@ export const provideShapes = () => {
         get points() {
             return points;
         },
+        get lines() {
+            return lines;
+        },
         get meshes() {
             return meshes;
         },
@@ -328,8 +383,14 @@ export const provideShapes = () => {
         object3ds: {
             batchedArrow,
         },
+        get camera() {
+            return camera;
+        },
+        clearCamera: () => {
+            camera = undefined;
+        },
     });
 };
-export const useShapes = () => {
+export const useDrawAPI = () => {
     return getContext(key);
 };

package/dist/hooks/useFrames.svelte.js

@@ -1,7 +1,6 @@
 import { getContext, setContext, untrack } from 'svelte';
 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';
@@ -11,24 +10,14 @@ export const provideFrames = (partID) => {
     const client = useRobotClient(partID);
     const machineStatus = useMachineStatus(partID);
     const logs = useLogs();
-    const refreshRates = useRefreshRates();
-    if (!refreshRates.has('Frames')) {
-        refreshRates.set('Frames', 1);
-    }
     const query = createRobotQuery(client, 'frameSystemConfig');
     const revision = $derived(machineStatus.current?.config.revision);
-    const shouldFetch = $derived(refreshRates.get('Frames') === 1);
     observe.pre(() => [revision], () => {
-        if (shouldFetch) {
-            untrack(() => query.current).refetch();
-            logs.add('Fetching frames...');
-        }
+        untrack(() => query.current).refetch();
+        logs.add('Fetching frames...');
     });
     const current = $derived.by(() => {
         const objects = [];
-        if (!shouldFetch) {
-            return objects;
-        }
         for (const { frame } of query.current.data ?? []) {
             if (frame === undefined) {
                 continue;

package/dist/hooks/useGeometries.svelte.js

@@ -3,7 +3,7 @@ import { createQueries, queryOptions } from '@tanstack/svelte-query';
 import { createResourceClient, useResourceNames } from '@viamrobotics/svelte-sdk';
 import { setContext, getContext } from 'svelte';
 import { fromStore, toStore } from 'svelte/store';
-import { useRefreshRates } from './useRefreshRates.svelte';
+import { useMachineSettings } from './useMachineSettings.svelte';
 import { WorldObject } from '../WorldObject';
 import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
 import { useLogs } from './useLogs.svelte';
@@ -15,7 +15,7 @@ export const provideGeometries = (partID) => {
     const cameras = useResourceNames(partID, 'camera');
     const grippers = useResourceNames(partID, 'gripper');
     const logs = useLogs();
-    const refreshRates = useRefreshRates();
+    const { refreshRates } = useMachineSettings();
     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)));
@@ -23,22 +23,27 @@ export const provideGeometries = (partID) => {
     if (!refreshRates.has('Geometries')) {
         refreshRates.set('Geometries', 1000);
     }
-    const options = $derived(clients.map((client) => {
+    const options = $derived.by(() => {
         const interval = refreshRates.get('Geometries');
-        return queryOptions({
-            enabled: interval !== -1 && client.current !== undefined,
-            refetchInterval: interval === 0 ? false : interval,
-            queryKey: ['partID', partID(), client.current?.name, 'getGeometries'],
-            queryFn: async () => {
-                if (!client.current) {
-                    throw new Error('No client');
-                }
-                logs.add(`Fetching geometries for ${client.current.name}...`);
-                const geometries = await client.current.getGeometries();
-                return { name: client.current.name, geometries };
-            },
-        });
-    }));
+        const results = [];
+        for (const client of clients) {
+            const options = queryOptions({
+                enabled: interval !== -1 && client.current !== undefined,
+                refetchInterval: interval === 0 ? false : interval,
+                queryKey: ['partID', partID(), client.current?.name, 'getGeometries'],
+                queryFn: async () => {
+                    if (!client.current) {
+                        throw new Error('No client');
+                    }
+                    logs.add(`Fetching geometries for ${client.current.name}...`);
+                    const geometries = await client.current.getGeometries();
+                    return { name: client.current.name, geometries };
+                },
+            });
+            results.push(options);
+        }
+        return results;
+    });
     const { updateUUIDs } = usePersistentUUIDs();
     const queries = fromStore(createQueries({ queries: toStore(() => options) }));
     const geometries = $derived.by(() => {

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

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

package/dist/hooks/useMachineSettings.svelte.js

@@ -0,0 +1,40 @@
+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 setFromEntries = (map, entries) => {
+    if (entries) {
+        for (const [key, value] of entries) {
+            map.set(key, value);
+        }
+    }
+};
+export const provideMachineSettings = () => {
+    const refreshRates = new SvelteMap();
+    const disabledCameras = new SvelteMap();
+    get(refreshRatesKey).then((entries) => {
+        setFromEntries(refreshRates, entries);
+    });
+    get(disabledCamerasKey).then((entries) => {
+        setFromEntries(disabledCameras, entries);
+    });
+    $effect(() => {
+        set(refreshRatesKey, [...refreshRates.entries()]);
+    });
+    $effect(() => {
+        set(disabledCamerasKey, [...disabledCameras.entries()]);
+    });
+    setContext(key, {
+        get refreshRates() {
+            return refreshRates;
+        },
+        get disabledCameras() {
+            return disabledCameras;
+        },
+    });
+};
+export const useMachineSettings = () => {
+    return getContext(key);
+};

package/dist/hooks/useObjects.svelte.js

@@ -2,25 +2,26 @@ import { getContext, setContext } from 'svelte';
 import { useFrames } from './useFrames.svelte';
 import { useGeometries } from './useGeometries.svelte';
 import { useStaticGeometries } from './useStaticGeometries.svelte';
-import { useShapes } from './useShapes.svelte';
+import { useDrawAPI } from './useDrawAPI.svelte';
 import { usePointClouds } from './usePointclouds.svelte';
 const key = Symbol('objects-context');
 export const provideObjects = () => {
     const frames = useFrames();
     const geometries = useGeometries();
     const statics = useStaticGeometries();
-    const shapes = useShapes();
+    const drawAPI = useDrawAPI();
     const points = usePointClouds();
     const objects = $derived([
         ...frames.current,
         ...geometries.current,
         ...points.current,
-        ...shapes.meshes,
-        ...shapes.models,
-        ...shapes.nurbs,
-        ...shapes.points,
         ...statics.current,
-        ...shapes.poses,
+        ...drawAPI.meshes,
+        ...drawAPI.models,
+        ...drawAPI.nurbs,
+        ...drawAPI.points,
+        ...drawAPI.lines,
+        ...drawAPI.poses,
     ]);
     setContext(key, {
         get current() {

package/dist/hooks/usePointclouds.svelte.js

@@ -4,39 +4,46 @@ import { setContext, getContext } from 'svelte';
 import { fromStore, toStore } from 'svelte/store';
 import { createResourceClient, useResourceNames } from '@viamrobotics/svelte-sdk';
 import { parsePcdInWorker } from '../loaders/pcd';
-import { useRefreshRates } from './useRefreshRates.svelte';
+import { useMachineSettings } from './useMachineSettings.svelte';
 import { WorldObject } from '../WorldObject';
 import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
 import { useLogs } from './useLogs.svelte';
 const key = Symbol('pointcloud-context');
 export const providePointclouds = (partID) => {
     const logs = useLogs();
-    const refreshRates = useRefreshRates();
+    const { refreshRates, disabledCameras } = useMachineSettings();
     const cameras = useResourceNames(partID, 'camera');
     if (!refreshRates.has('Pointclouds')) {
         refreshRates.set('Pointclouds', -1);
     }
     const clients = $derived(cameras.current.map((camera) => createResourceClient(CameraClient, partID, () => camera.name)));
-    const options = $derived(clients.map((cameraClient) => {
-        const name = cameraClient.current?.name ?? '';
+    const options = $derived.by(() => {
         const interval = refreshRates.get('Pointclouds');
-        return queryOptions({
-            enabled: interval !== -1 && cameraClient.current !== undefined,
-            refetchInterval: interval === 0 ? false : interval,
-            queryKey: ['partID', partID(), name, 'getPointCloud'],
-            queryFn: async () => {
-                if (!cameraClient.current) {
-                    throw new Error('No camera client');
-                }
-                logs.add(`Fetching pointcloud for ${cameraClient.current.name}`);
-                const response = await cameraClient.current.getPointCloud();
-                if (!response)
-                    return null;
-                const { positions, colors } = await parsePcdInWorker(new Uint8Array(response));
-                return new WorldObject(`${name}:pointcloud`, undefined, name, { case: 'points', value: positions }, colors ? { colors } : undefined);
-            },
-        });
-    }));
+        const results = [];
+        for (const cameraClient of clients) {
+            const name = cameraClient.current?.name ?? '';
+            const options = queryOptions({
+                enabled: interval !== -1 &&
+                    cameraClient.current !== undefined &&
+                    disabledCameras.get(name) !== true,
+                refetchInterval: interval === 0 ? false : interval,
+                queryKey: ['partID', partID(), name, 'getPointCloud'],
+                queryFn: async () => {
+                    if (!cameraClient.current) {
+                        throw new Error('No camera client');
+                    }
+                    logs.add(`Fetching pointcloud for ${cameraClient.current.name}`);
+                    const response = await cameraClient.current.getPointCloud();
+                    if (!response)
+                        return null;
+                    const { positions, colors } = await parsePcdInWorker(new Uint8Array(response));
+                    return new WorldObject(`${name}:pointcloud`, undefined, name, { case: 'points', value: positions }, colors ? { colors } : undefined);
+                },
+            });
+            results.push(options);
+        }
+        return results;
+    });
     const { updateUUIDs } = usePersistentUUIDs();
     const queries = fromStore(createQueries({
         queries: toStore(() => options),

package/dist/hooks/usePose.svelte.js

@@ -2,17 +2,17 @@ import { createResourceClient, useResourceNames } from '@viamrobotics/svelte-sdk
 import { usePartID } from './usePartID.svelte';
 import { MotionClient } from '@viamrobotics/sdk';
 import { createQuery, queryOptions } from '@tanstack/svelte-query';
-import { useRefreshRates } from './useRefreshRates.svelte';
+import { useMachineSettings } from './useMachineSettings.svelte';
 import { fromStore, toStore } from 'svelte/store';
 import { useMotionClient } from './useMotionClient.svelte';
 export const usePose = (name, parent) => {
-    const refreshRates = useRefreshRates();
+    const { refreshRates } = useMachineSettings();
     const partID = usePartID();
     const motionClient = useMotionClient();
     const resources = useResourceNames(() => partID.current);
     const resource = $derived(resources.current.find((resource) => resource.name === name()));
     const client = createResourceClient(MotionClient, () => partID.current, () => motionClient.current ?? '');
-    const interval = refreshRates.get('Poses');
+    const interval = $derived(refreshRates.get('Poses'));
     const options = $derived(queryOptions({
         enabled: interval !== -1 && client.current !== undefined && resource !== undefined,
         refetchInterval: interval === 0 ? false : interval,

package/dist/hooks/usePoses.svelte.js

@@ -3,10 +3,10 @@ import { MotionClient, PoseInFrame, ResourceName } from '@viamrobotics/sdk';
 import { createResourceClient, useResourceNames } from '@viamrobotics/svelte-sdk';
 import { getContext, setContext } from 'svelte';
 import { fromStore, toStore } from 'svelte/store';
-import { useRefreshRates } from './useRefreshRates.svelte';
+import { useMachineSettings } from './useMachineSettings.svelte';
 const key = Symbol('poses-context');
 export const providePoses = (partID) => {
-    const refreshRates = useRefreshRates();
+    const { refreshRates } = useMachineSettings();
     const resources = useResourceNames(partID);
     const components = $derived(resources.current.filter(({ type }) => type === 'component'));
     const motionResources = useResourceNames(partID, 'motion');

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

@@ -9,6 +9,8 @@ interface Settings {
     gridFadeDistance: number;
     pointSize: number;
     pointColor: string;
+    lineWidth: number;
+    lineDotSize: number;
     enableXR: boolean;
     enableMeasure: boolean;
     renderStats: boolean;

package/dist/hooks/useSettings.svelte.js

@@ -11,7 +11,9 @@ const defaults = () => ({
     gridSectionSize: 10,
     gridFadeDistance: 25,
     pointSize: 0.01,
-    pointColor: '#333',
+    pointColor: '#333333',
+    lineWidth: 0.005,
+    lineDotSize: 0.01,
     enableMeasure: false,
     enableXR: false,
     renderStats: false,

package/package.json

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

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

@@ -1,5 +0,0 @@
-import { SvelteMap } from 'svelte/reactivity';
-type Context = SvelteMap<string, number>;
-export declare const provideRefreshRates: () => SvelteMap<string, number>;
-export declare const useRefreshRates: () => Context;
-export {};

package/dist/hooks/useRefreshRates.svelte.js

@@ -1,23 +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 idbKey = 'polling-rate';
-export const provideRefreshRates = () => {
-    const map = new SvelteMap();
-    get(idbKey).then((entries) => {
-        if (entries) {
-            for (const [key, value] of entries) {
-                map.set(key, value);
-            }
-        }
-    });
-    $effect(() => {
-        set(idbKey, [...map.entries()]);
-    });
-    setContext(key, map);
-    return map;
-};
-export const useRefreshRates = () => {
-    return getContext(key);
-};