@viamrobotics/motion-tools 1.2.3 → 1.3.0

package/dist/components/SceneProviders.svelte

@@ -20,6 +20,7 @@
 	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
 	import { provide3DModels } from '../hooks/use3DModels.svelte'
+	import { providePointcloudObjects } from '../hooks/usePointcloudObjects.svelte'
 
 	interface Props {
 		cameraPose?: CameraPose
@@ -44,6 +45,7 @@
 	provideGeometries(() => partID.current)
 	provide3DModels(() => partID.current)
 	providePointclouds(() => partID.current)
+	providePointcloudObjects(() => partID.current)
 	provideArmClient(() => partID.current)
 	provideWorldStates()
 	provideFramelessComponents()

package/dist/components/Tree/Settings.svelte

@@ -16,8 +16,9 @@
 	const { invalidate } = useThrelte()
 	const partID = usePartID()
 	const cameras = useResourceNames(() => partID.current, 'camera')
+	const visionServices = useResourceNames(() => partID.current, 'vision')
 	const settings = useSettings()
-	const { disabledCameras } = useMachineSettings()
+	const { disabledCameras, disabledVisionServicesObjectPointclouds } = useMachineSettings()
 	const geometries = useGeometries()
 	const pointclouds = usePointClouds()
 	const { refetchPoses } = useRefetchPoses()
@@ -56,8 +57,9 @@
 				pointclouds.refetch()
 			}}
 		/>
-		<div>
-			<div>Enabled pointcloud cameras</div>
+
+		<div class="mt-4">
+			<h3 class="text-sm"><strong>Enabled pointcloud cameras</strong></h3>
 			{#each cameras.current as camera (camera)}
 				<div class="flex items-center justify-between gap-4 py-2">
 					{camera.name}
@@ -73,6 +75,23 @@
 			{/each}
 		</div>
 
+		<div class="mt-4">
+			<h3 class="text-sm"><strong>Enabled vision services</strong></h3>
+			{#each visionServices.current as visionService (visionService)}
+				<div class="flex items-center justify-between gap-4 py-2">
+					{visionService.name}
+					<Switch
+						on={disabledVisionServicesObjectPointclouds.get(visionService.name) !== true}
+						on:change={(event) => {
+							disabledVisionServicesObjectPointclouds.set(visionService.name, !event.detail)
+						}}
+					/>
+				</div>
+			{:else}
+				No vision services detected
+			{/each}
+		</div>
+
 		<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">

package/dist/components/Tree/TreeContainer.svelte

@@ -28,7 +28,10 @@
 
 	const partID = usePartID()
 	const selectedEntity = useSelectedEntity()
-	const resizable = useResizable(() => 'treeview')
+	const resizable = useResizable(
+		() => 'treeview',
+		() => ({ width: 240, height: window.innerHeight - 20 })
+	)
 	const environment = useEnvironment()
 	const partConfig = usePartConfig()
 	const world = useWorld()

package/dist/entries.d.ts

@@ -0,0 +1 @@
+export declare const typeSafeObjectFromEntries: <const T extends ReadonlyArray<readonly [PropertyKey, unknown]>>(entries: T) => { [K in T[number] as K[0]]: K[1]; };

package/dist/entries.js

@@ -0,0 +1,3 @@
+export const typeSafeObjectFromEntries = (entries) => {
+    return Object.fromEntries(entries);
+};

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

@@ -6,6 +6,7 @@ export declare const RefreshRates: {
 type Context = {
     refreshRates: SvelteMap<string, number>;
     disabledCameras: SvelteMap<string, boolean>;
+    disabledVisionServicesObjectPointclouds: SvelteMap<string, boolean>;
 };
 export declare const provideMachineSettings: () => void;
 export declare const useMachineSettings: () => Context;

package/dist/hooks/useMachineSettings.svelte.js

@@ -4,6 +4,7 @@ import { SvelteMap } from 'svelte/reactivity';
 const key = Symbol('polling-rate-context');
 const refreshRatesKey = 'polling-rate';
 const disabledCamerasKey = 'disabled-cameras';
+const disabledVisionServicesObjectPointcloudsKey = 'disabled-vision-services-object-pointcloud';
 export const RefreshRates = {
     poses: 'poses',
     pointclouds: 'pointclouds',
@@ -21,12 +22,16 @@ export const provideMachineSettings = () => {
         [RefreshRates.pointclouds, -1],
     ]);
     const disabledCameras = new SvelteMap();
+    const disabledVisionServicesObjectPointclouds = new SvelteMap();
     get(refreshRatesKey).then((entries) => {
         setFromEntries(refreshRates, entries);
     });
     get(disabledCamerasKey).then((entries) => {
         setFromEntries(disabledCameras, entries);
     });
+    get(disabledVisionServicesObjectPointcloudsKey).then((entries) => {
+        setFromEntries(disabledVisionServicesObjectPointclouds, entries);
+    });
     $effect(() => {
         set(refreshRatesKey, [...refreshRates.entries()]);
     });
@@ -40,6 +45,9 @@ export const provideMachineSettings = () => {
         get disabledCameras() {
             return disabledCameras;
         },
+        get disabledVisionServicesObjectPointclouds() {
+            return disabledVisionServicesObjectPointclouds;
+        },
     });
 };
 export const useMachineSettings = () => {

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

@@ -0,0 +1,6 @@
+interface Context {
+    refetch: () => void;
+}
+export declare const providePointcloudObjects: (partID: () => string) => void;
+export declare const usePointcloudObjects: () => Context;
+export {};

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -0,0 +1,174 @@
+import { GeometriesInFrame, PointCloudObject, VisionClient } from '@viamrobotics/sdk';
+import { createResourceClient, createResourceQuery, useResourceNames, } from '@viamrobotics/svelte-sdk';
+import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
+import { useLogs } from './useLogs.svelte';
+import { parsePcdInWorker } from '../lib';
+import { getContext, setContext } from 'svelte';
+import { traits, useWorld } from '../ecs';
+import { createBufferGeometry, updateBufferGeometry } from '../attribute';
+import { useEnvironment } from './useEnvironment.svelte';
+import { RefetchRates } from '../components/RefreshRate.svelte';
+import { createPose } from '../transform';
+const key = Symbol('pointcloud-object-context');
+export const providePointcloudObjects = (partID) => {
+    const world = useWorld();
+    const environment = useEnvironment();
+    const { refreshRates, disabledVisionServicesObjectPointclouds } = useMachineSettings();
+    const services = useResourceNames(partID, 'vision');
+    const clients = $derived(services.current.map((service) => createResourceClient(VisionClient, partID, () => service.name)));
+    const propQueries = $derived(clients.map((client) => [
+        client.current?.name,
+        createResourceQuery(client, 'getProperties', {
+            staleTime: Infinity,
+            refetchOnMount: false,
+            refetchInterval: false,
+        }),
+    ]));
+    const fetchedPropQueries = $derived(propQueries.every(([, query]) => query.isPending === false));
+    const enabledClients = $derived.by(() => {
+        const results = [];
+        for (const client of clients) {
+            if (environment.current.viewerMode === 'monitor' &&
+                fetchedPropQueries &&
+                client.current?.name &&
+                interval !== RefetchRates.OFF) {
+                results.push(client);
+            }
+        }
+        return results;
+    });
+    /**
+     * Some machines have a lot of vision services, so before enabling all of them
+     * we'll first check pointcloud object support.
+     *
+     * We'll disable cameras that don't support pointclouds,
+     * but still allow users to manually enable if they want to.
+     */
+    $effect(() => {
+        for (const [name, query] of propQueries) {
+            if (name && query.data?.objectPointCloudsSupported === false) {
+                if (disabledVisionServicesObjectPointclouds.get(name) === undefined) {
+                    disabledVisionServicesObjectPointclouds.set(name, true);
+                }
+            }
+        }
+    });
+    const logs = useLogs();
+    const interval = $derived(refreshRates.get(RefreshRates.pointclouds));
+    const options = $derived({
+        enabled: interval !== -1,
+        refetchInterval: (interval === 0 ? false : interval),
+    });
+    const queries = $derived(enabledClients.map((client) => [
+        client.current.name,
+        createResourceQuery(client, 'getObjectPointClouds', [''], () => options),
+    ]));
+    $effect(() => {
+        for (const [name, query] of queries) {
+            if (query.isFetching) {
+                logs.add(`Fetching pointcloud for ${name}...`);
+            }
+            else if (query.error) {
+                logs.add(`Error fetching pointcloud from ${name}: ${query.error.message}`, 'error');
+            }
+        }
+    });
+    let pcResults = $state.raw([]);
+    $effect(() => {
+        const responses = [];
+        for (const [name, query] of queries) {
+            const { data } = query;
+            if (name && data) {
+                responses.push([name, data]);
+            }
+        }
+        Promise.allSettled(responses.map(async ([name, pointcloudObjects]) => {
+            const pointclouds = await Promise.all(pointcloudObjects.map((value) => parsePcdInWorker(new Uint8Array(value.pointCloud))));
+            return {
+                name,
+                pointclouds,
+                geometries: pointcloudObjects.map((value) => value.geometries),
+            };
+        })).then((results) => {
+            const fulfilledResults = [];
+            for (const result of results) {
+                if (result.status === 'fulfilled') {
+                    fulfilledResults.push(result.value);
+                }
+                else if (result.status === 'rejected') {
+                    logs.add(result.reason, 'error');
+                }
+            }
+            pcResults = fulfilledResults;
+        });
+    });
+    const entities = new Map();
+    $effect(() => {
+        const active = {};
+        for (const { name, pointclouds, geometries } of pcResults) {
+            for (const [pointcloudIndex, pointcloud] of pointclouds.entries()) {
+                const poincloudLabel = `${name} pointcloud ${pointcloudIndex + 1}`;
+                const existing = entities.get(poincloudLabel);
+                active[poincloudLabel] = true;
+                if (existing) {
+                    const geometry = existing.get(traits.BufferGeometry);
+                    if (geometry) {
+                        updateBufferGeometry(geometry, pointcloud.positions, pointcloud.colors);
+                    }
+                }
+                else {
+                    const geometry = createBufferGeometry(pointcloud.positions, pointcloud.colors);
+                    const entity = world.spawn(traits.Name(poincloudLabel), traits.BufferGeometry(geometry), traits.Points);
+                    entities.set(poincloudLabel, entity);
+                }
+                if (geometries) {
+                    for (const geometriesInFrame of geometries) {
+                        if (geometriesInFrame) {
+                            for (const [geometryIndex, geometry] of geometriesInFrame.geometries.entries()) {
+                                const geometryLabel = `${name} pointcloud ${pointcloudIndex} geometry ${geometryIndex + 1}`;
+                                const pose = createPose(geometry.center);
+                                active[geometryLabel] = true;
+                                const existing = entities.get(geometryLabel);
+                                if (existing) {
+                                    existing.set(traits.Pose, pose);
+                                }
+                                else {
+                                    const entityTraits = [
+                                        traits.Name(geometryLabel),
+                                        traits.Pose(pose),
+                                        traits.GeometriesAPI,
+                                        traits.Geometry(geometry),
+                                        traits.Opacity(0.2),
+                                        traits.Color({ r: 0, g: 1, b: 0 }),
+                                    ];
+                                    if (geometriesInFrame.referenceFrame) {
+                                        entityTraits.push(traits.Parent(geometriesInFrame.referenceFrame));
+                                    }
+                                    const entity = world.spawn(...entityTraits);
+                                    entities.set(geometryLabel, entity);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // Clean up old entities
+        for (const [label, entity] of entities) {
+            if (!active[label]) {
+                entity.destroy();
+                entities.delete(label);
+            }
+        }
+    });
+    setContext(key, {
+        refetch() {
+            for (const [, query] of queries) {
+                query.refetch();
+            }
+        },
+    });
+};
+export const usePointcloudObjects = () => {
+    return getContext(key);
+};

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

@@ -8,5 +8,5 @@ interface Context {
     observe: (target: HTMLElement) => void;
 }
 export declare const MIN_DIMENSIONS: Dimensions;
-export declare const useResizable: (name: () => string) => Context;
+export declare const useResizable: (name: () => string, defaultDimensions?: () => Dimensions) => Context;
 export {};

package/dist/hooks/useResizable.svelte.js

@@ -1,8 +1,8 @@
 import { get, set } from 'idb-keyval';
 export const MIN_DIMENSIONS = { width: 240, height: 320 };
-export const useResizable = (name) => {
+export const useResizable = (name, defaultDimensions) => {
     const key = $derived(`${name()}-resizable`);
-    let dimensions = $state.raw(MIN_DIMENSIONS);
+    let dimensions = $derived(defaultDimensions?.() ?? MIN_DIMENSIONS);
     let loaded = $state(false);
     let observer;
     $effect(() => {

package/dist/three/arrow.js

@@ -7,7 +7,7 @@ import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js
  */
 export const createArrowGeometry = () => {
     const length = 0.1;
-    const headLength = length * 0.2;
+    const headLength = length * 0.3;
     const headWidth = headLength * 0.3;
     const tailLength = length - headLength;
     const tailWidth = 0.001;
@@ -15,7 +15,7 @@ export const createArrowGeometry = () => {
     const tailGeometry = new BoxGeometry(tailWidth, tailLength, tailWidth);
     tailGeometry.translate(0, tailLength * 0.5, 0);
     // Head: cone centered at origin spanning [-h/2, +h/2] in y
-    const radialSegments = 5;
+    const radialSegments = 3;
     const headGeo = new ConeGeometry(headWidth * 0.5, headLength, radialSegments, 1, false);
     // Place its center at y = shaftLength + headLength/2 so tip lands at y = shaftLength + headLength
     headGeo.translate(0, tailLength + headLength * 0.5, 0);

package/package.json

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