@viamrobotics/motion-tools 0.2.0 → 0.3.0

package/README.md

@@ -18,3 +18,25 @@ Open the machine config page (bottom right) and enter in connection details to v
 - remote IP access
 - ortho points are messed up size-wise
 - geometries parented to parent
+- end effector pose visualized
+- poses of all frames
+- bounding boxes should include just the thing and not children
+- configure frames from here
+- color pallet for resource to color
+
+## Env files
+
+To add a list of connection configs in an `.env.local` file, use the following format:
+
+```
+VITE_CONFIGS='
+{
+  "fleet-rover-01": {
+    "host": "fleet-rover-01-main.ve4ba7w5qr.viam.cloud",
+    "partId": "myPartID",
+    "apiKeyId": "myApiKeyId",
+    "apiKeyValue": "MyApiKeyValue",
+    "signalingAddress": "https://app.viam.com:443"
+  }
+}
+```

package/dist/components/SceneProviders.svelte

@@ -13,6 +13,7 @@
 	import type { Snippet } from 'svelte'
 	import { provideObjects } from '../hooks/useObjects.svelte'
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
+	import { provideLogs } from '../hooks/useLogs.svelte'
 
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
@@ -25,6 +26,7 @@
 	provideTransformControls()
 	provideVisibility()
 	provideRefreshRates()
+	provideLogs()
 
 	provideStaticGeometries()
 	provideShapes()

package/dist/components/Tree/Drawer.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { PersistedState } from 'runed'
+	import { Icon } from '@viamrobotics/prime-core'
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		name: string
+		children: Snippet
+	}
+
+	let { name, children }: Props = $props()
+
+	const expanded = $derived(new PersistedState(`${name}-expanded`, false))
+</script>
+
+<button
+	class="border-medium w-full border-t p-2 text-left"
+	onclick={() => (expanded.current = !expanded.current)}
+>
+	<h3 class="text-default flex items-center gap-1.5">
+		<Icon
+			name={expanded.current ? 'unfold-more-horizontal' : 'unfold-less-horizontal'}
+			label="unfold more icon"
+			variant="ghost"
+			cx="size-6"
+			on:click={() => (expanded.current = !expanded.current)}
+		/>
+		{name}
+	</h3>
+</button>
+
+{#if expanded.current}
+	<div class="border-medium border-t">
+		{@render children()}
+	</div>
+{/if}

package/dist/components/Tree/Drawer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    name: string;
+    children: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/Tree/Logs.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { useLogs } from '../../hooks/useLogs.svelte'
+	import Drawer from './Drawer.svelte'
+
+	const logs = useLogs()
+	const truncated = $derived(logs.current.slice(0, 100).reverse())
+</script>
+
+<Drawer name="Logs">
+	<div class="flex h-[250px] w-[240px] flex-col gap-2 overflow-auto p-3">
+		{#each truncated as log (log.uuid)}
+			<div>
+				<div class="flex flex-wrap items-center gap-1.5">
+					<div
+						class={[
+							'h-2 w-2 rounded-full',
+							{
+								'bg-danger-dark': log.level === 'error',
+								'bg-amber-300': log.level === 'warn',
+								'bg-blue-400': log.level === 'info',
+							},
+						]}
+					></div>
+					<div class="text-subtle-2">{log.timestamp}</div>
+				</div>
+				<div>{log.message}</div>
+			</div>
+		{:else}
+			No logs
+		{/each}
+	</div>
+</Drawer>

package/dist/components/Tree/Logs.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Logs: import("svelte").Component<Record<string, never>, {}, "">;
+type Logs = ReturnType<typeof Logs>;
+export default Logs;

package/dist/components/Tree/Settings.svelte

@@ -1,32 +1,14 @@
 <script lang="ts">
-	import { PersistedState } from 'runed'
-	import { Icon, Select } from '@viamrobotics/prime-core'
+	import { Select } from '@viamrobotics/prime-core'
 	import RefreshRate from '../RefreshRate.svelte'
 	import { useMotionClient } from '../../hooks/useMotionClient.svelte'
-
-	const showSettings = new PersistedState('show-settings', false)
+	import Drawer from './Drawer.svelte'
 
 	const motionClient = useMotionClient()
 </script>
 
-<button
-	class="border-medium w-full border-t p-2 text-left"
-	onclick={() => (showSettings.current = !showSettings.current)}
->
-	<h3 class="text-default flex items-center gap-1.5">
-		<Icon
-			name={showSettings.current ? 'unfold-more-horizontal' : 'unfold-less-horizontal'}
-			label="unfold more icon"
-			variant="ghost"
-			cx="size-6"
-			on:click={() => (showSettings.current = !showSettings.current)}
-		/>
-		Settings
-	</h3>
-</button>
-
-{#if showSettings.current}
-	<div class="border-medium flex flex-col gap-2 border-t p-3">
+<Drawer name="Settings">
+	<div class="flex flex-col gap-2 p-3">
 		<RefreshRate name="Frames">
 			<option value="0">Do not fetch</option>
 			<option value="1">Fetch on reconfigure</option>
@@ -51,4 +33,4 @@
 			</Select>
 		</label>
 	</div>
-{/if}
+</Drawer>

package/dist/components/Tree/TreeContainer.svelte

@@ -10,6 +10,7 @@
 	import { isEqual } from 'lodash-es'
 	import { useObjects } from '../../hooks/useObjects.svelte'
 	import Settings from './Settings.svelte'
+	import Logs from './Logs.svelte'
 
 	const showTreeview = new PersistedState('show-treeview', true)
 
@@ -65,6 +66,7 @@
 			/>
 		{/key}
 
+		<Logs />
 		<Settings />
 	</div>
 {/if}

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

@@ -7,6 +7,9 @@ interface ConnectionConfig {
 }
 interface Context {
     current: ConnectionConfig[];
+    add: () => void;
+    remove: (index: number) => void;
+    isEnvConfig: (config: ConnectionConfig) => boolean;
 }
 export declare const provideConnectionConfigs: () => void;
 export declare const useConnectionConfigs: () => Context;

package/dist/hooks/useConnectionConfigs.svelte.js

@@ -1,7 +1,8 @@
 import { get, set } from 'idb-keyval';
 import { PersistedState } from 'runed';
 import { getContext, setContext } from 'svelte';
-import { envDialConfigs } from '../../routes/lib/configs';
+import { envConfigs } from '../../routes/lib/configs';
+import { isEqual } from 'lodash-es';
 const key = Symbol('connection-config-context');
 const activeConfig = new PersistedState('active-connection-config', 0);
 export const provideConnectionConfigs = () => {
@@ -14,11 +15,29 @@ export const provideConnectionConfigs = () => {
     $effect(() => {
         set('connection-configs', $state.snapshot(connectionConfigs));
     });
-    const envConfigs = Object.values(envDialConfigs);
+    const merged = $derived([...envConfigs, ...connectionConfigs]);
+    const add = () => {
+        connectionConfigs.push({
+            host: '',
+            partId: '',
+            apiKeyId: '',
+            apiKeyValue: '',
+            signalingAddress: '',
+        });
+    };
+    const remove = (index) => {
+        connectionConfigs.splice(index - envConfigs.length, 1);
+    };
+    const isEnvConfig = (config) => {
+        return envConfigs.some((value) => isEqual(config, value));
+    };
     setContext(key, {
         get current() {
-            return [...envConfigs, ...connectionConfigs];
+            return merged;
         },
+        add,
+        remove,
+        isEnvConfig,
     });
 };
 export const useConnectionConfigs = () => {

package/dist/hooks/useFrames.svelte.js

@@ -3,12 +3,14 @@ import { useRobotClient, createRobotQuery, useMachineStatus } from '@viamrobotic
 import { WorldObject } from '../WorldObject';
 import { useRefreshRates } from './useRefreshRates.svelte';
 import { observe } from '@threlte/core';
+import { useLogs } from './useLogs.svelte';
 const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
     const refreshRates = useRefreshRates();
     if (!refreshRates.has('Frames')) {
         refreshRates.set('Frames', 1);
     }
+    const logs = useLogs();
     const client = useRobotClient(partID);
     const query = createRobotQuery(client, 'frameSystemConfig');
     const machineStatus = useMachineStatus(partID);
@@ -17,6 +19,7 @@ export const provideFrames = (partID) => {
     observe.pre(() => [revision], () => {
         if (shouldFetch) {
             untrack(() => query.current).refetch();
+            logs.add('Fetching frames...');
         }
     });
     const current = $derived.by(() => {

package/dist/hooks/useGeometries.svelte.js

@@ -6,8 +6,10 @@ import { fromStore, toStore } from 'svelte/store';
 import { useRefreshRates } from './useRefreshRates.svelte';
 import { WorldObject } from '../WorldObject';
 import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
+import { useLogs } from './useLogs.svelte';
 const key = Symbol('geometries-context');
 export const provideGeometries = (partID) => {
+    const logs = useLogs();
     const refreshRates = useRefreshRates();
     const arms = useResourceNames(partID, 'arm');
     const cameras = useResourceNames(partID, 'camera');
@@ -28,6 +30,7 @@ export const provideGeometries = (partID) => {
                 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 };
             },

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

@@ -0,0 +1,14 @@
+type Level = 'info' | 'warn' | 'error';
+interface Log {
+    uuid: string;
+    message: string;
+    level: Level;
+    timestamp: string;
+}
+interface Context {
+    current: Log[];
+    add(message: string, level?: Level): void;
+}
+export declare const provideLogs: () => void;
+export declare const useLogs: () => Context;
+export {};

package/dist/hooks/useLogs.svelte.js

@@ -0,0 +1,29 @@
+import { getContext, setContext } from 'svelte';
+import { MathUtils } from 'three';
+const key = Symbol('logs-context');
+export const provideLogs = () => {
+    const logs = $state([]);
+    const intl = new Intl.DateTimeFormat('en-US', {
+        dateStyle: 'short',
+        timeStyle: 'short',
+    });
+    setContext(key, {
+        get current() {
+            return logs;
+        },
+        add(message, level = 'info') {
+            logs.push({
+                message,
+                level,
+                uuid: MathUtils.generateUUID(),
+                timestamp: intl.format(Date.now()),
+            });
+            if (logs.length > 1000) {
+                logs.shift();
+            }
+        },
+    });
+};
+export const useLogs = () => {
+    return getContext(key);
+};

package/dist/hooks/usePointclouds.svelte.js

@@ -7,8 +7,10 @@ import { parsePCD } from '../loaders/pcd';
 import { useRefreshRates } from './useRefreshRates.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 cameras = useResourceNames(partID, 'camera');
     if (!refreshRates.has('Pointclouds')) {
@@ -18,6 +20,7 @@ export const providePointclouds = (partID) => {
     const options = $derived(clients.map((cameraClient) => {
         const name = cameraClient.current?.name ?? '';
         const interval = refreshRates.get('Pointclouds');
+        console.log(interval);
         return queryOptions({
             enabled: interval !== -1 && cameraClient.current !== undefined,
             refetchInterval: interval === 0 ? false : interval,
@@ -26,6 +29,7 @@ export const providePointclouds = (partID) => {
                 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;

package/dist/hooks/useShapes.svelte.js

@@ -21,7 +21,6 @@ export const provideShapes = () => {
     let poseIndex = 0;
     let reconnectDelay = 200;
     const maxReconnectDelay = 5_000;
-    const { BACKEND_IP, BUN_SERVER_PORT } = globalThis;
     let ws;
     const points = $state([]);
     const meshes = $state([]);
@@ -168,6 +167,7 @@ export const provideShapes = () => {
         models.push(new WorldObject(gltf.scene.name, undefined, undefined, undefined, { gltf }));
         URL.revokeObjectURL(url);
     };
+    const { BACKEND_IP, BUN_SERVER_PORT } = globalThis;
     const scheduleReconnect = () => {
         setTimeout(() => {
             reconnectDelay = Math.min(reconnectDelay * 2, maxReconnectDelay);
@@ -227,12 +227,14 @@ export const provideShapes = () => {
         }
     };
     const connect = () => {
-        const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-        ws = new WebSocket(`${protocol}://${BACKEND_IP}:${BUN_SERVER_PORT}/ws`);
-        ws.onclose = onClose;
-        ws.onerror = onError;
-        ws.onopen = onOpen;
-        ws.onmessage = onMessage;
+        if (BACKEND_IP && BUN_SERVER_PORT) {
+            const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+            ws = new WebSocket(`${protocol}://${BACKEND_IP}:${BUN_SERVER_PORT}/ws`);
+            ws.onclose = onClose;
+            ws.onerror = onError;
+            ws.onopen = onOpen;
+            ws.onmessage = onMessage;
+        }
     };
     connect();
     setContext(key, {

package/dist/hooks/xr/useAnchors.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Context {
+    anchors: XRAnchor[];
+}
+export declare const provideAnchors: () => void;
+export declare const useAnchors: () => Context;
+export {};

package/dist/hooks/xr/useAnchors.svelte.js

@@ -1 +1,12 @@
-"use strict";
+import { getContext, setContext } from 'svelte';
+const key = Symbol('anchors-context');
+export const provideAnchors = () => {
+    setContext(key, {
+        get anchors() {
+            return [];
+        },
+    });
+};
+export const useAnchors = () => {
+    return getContext(key);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -9,20 +9,20 @@
     "@ag-grid-community/core": "^32.3.5",
     "@ag-grid-community/styles": "^32.3.5",
     "@changesets/cli": "^2.29.4",
-    "@dimforge/rapier3d-compat": "^0.17.0",
+    "@dimforge/rapier3d-compat": "^0.17.1",
     "@eslint/compat": "^1.2.9",
     "@eslint/js": "^9.27.0",
     "@playwright/test": "^1.52.0",
     "@skeletonlabs/skeleton": "3.1.3",
-    "@skeletonlabs/skeleton-svelte": "1.2.2",
+    "@skeletonlabs/skeleton-svelte": "1.2.3",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/vite": "^4.1.7",
-    "@tanstack/svelte-query": "^5.76.2",
-    "@tanstack/svelte-query-devtools": "^5.76.2",
+    "@tanstack/svelte-query": "^5.77.2",
+    "@tanstack/svelte-query-devtools": "^5.77.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
     "@threlte/core": "^8.0.4",
@@ -39,13 +39,13 @@
     "@viamrobotics/svelte-sdk": "0.1.4",
     "@viamrobotics/three": "^0.0.9",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
-    "@zag-js/svelte": "1.12.4",
-    "@zag-js/tree-view": "1.12.4",
+    "@zag-js/svelte": "1.13.1",
+    "@zag-js/tree-view": "1.13.1",
     "camera-controls": "^2.10.1",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-svelte": "^3.9.0",
-    "globals": "^16.1.0",
+    "globals": "^16.2.0",
     "idb-keyval": "^6.2.2",
     "jsdom": "^26.1.0",
     "lodash-es": "^4.17.21",
@@ -55,7 +55,7 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "publint": "^0.3.12",
     "runed": "^0.28.0",
-    "svelte": "5.33.0",
+    "svelte": "5.33.4",
     "svelte-check": "^4.2.1",
     "svelte-virtuallists": "^1.4.2",
     "tailwindcss": "^4.1.7",