@viamrobotics/motion-tools 0.17.0 → 0.18.0

package/README.md

@@ -72,3 +72,11 @@ VITE_CONFIGS='
 The visualizer includes a golang package that allows executing commands to the visualizer.
 
 The list of available commands [can be found here](https://pkg.go.dev/github.com/viam-labs/motion-tools@v0.9.0/client/client).
+
+### Programmatic camera control
+
+It is possible to programmatically move the viewer camera and even modify the camera settings during runtime.
+
+To do this, open the Javascript console while using the visualizer and call methods or set properties on the `cameraControls` object.
+
+The following APIs are available: https://github.com/yomotsu/camera-controls?tab=readme-ov-file#properties

package/dist/components/RefreshRate.svelte

@@ -1,5 +1,22 @@
+<script
+	module
+	lang="ts"
+>
+	export const RefetchRates = {
+		OFF: -1,
+		MANUAL: 0,
+		FPS_60: 17,
+		FPS_30: 33,
+		MS_500: 500,
+		MS_1000: 1000,
+		MS_2000: 2000,
+		MS_5000: 5000,
+		MS_10000: 10_000,
+	} as const
+</script>
+
 <script lang="ts">
-	import { Select } from '@viamrobotics/prime-core'
+	import { Select, IconButton } from '@viamrobotics/prime-core'
 	import { useMachineSettings } from '../hooks/useMachineSettings.svelte'
 	import type { Snippet } from 'svelte'
 
@@ -7,46 +24,70 @@
 		id: string
 		label: string
 		allowLive?: boolean
+		onManualRefetch: () => void
 		children?: Snippet
 	}
 
-	let { id, label, allowLive = false, children }: Props = $props()
+	let { id, label, allowLive = false, onManualRefetch, children }: Props = $props()
 
 	const { refreshRates } = useMachineSettings()
-	const rate = $derived(refreshRates.get(id))
+	const rate = $derived(refreshRates.get(id) ?? RefetchRates.MANUAL)
 </script>
 
 <label class="flex flex-col gap-1">
 	{label}
-	<Select
-		onchange={(event: InputEvent) => {
-			if (event.target instanceof HTMLSelectElement) {
-				const { value } = event.target
-				refreshRates.set(id, Number.parseInt(value, 10))
-			}
-		}}
-		value={String(rate ?? '')}
-	>
-		{#if children}
-			{@render children()}
-		{:else}
-			<option value="-1">Do not fetch</option>
-			<option value="0">Do not refresh</option>
-			{#if allowLive}
-				<option value="17">60fps</option>
-				<option value="33">30fps</option>
+	<div class="flex items-center gap-1">
+		<Select
+			style="
+				-webkit-appearance: none;
+				-moz-appearance: none; 
+				appearance: none; 
+			"
+			onchange={(event: InputEvent) => {
+				if (event.target instanceof HTMLSelectElement) {
+					const { value } = event.target
+					refreshRates.set(id, Number.parseInt(value, 10))
+				}
+			}}
+			value={String(rate)}
+		>
+			{#if children}
+				{@render children()}
+			{:else}
+				<option value={String(RefetchRates.OFF)}>Do not fetch</option>
+				<option value={String(RefetchRates.MANUAL)}>Manual</option>
+				{#if allowLive}
+					<option value={String(RefetchRates.FPS_60)}>60fps</option>
+					<option value={String(RefetchRates.FPS_30)}>30fps</option>
+				{/if}
+				<option value={String(RefetchRates.MS_500)}>Refresh every 0.5 second</option>
+				<option value={String(RefetchRates.MS_1000)}>Refresh every second</option>
+				<option value={String(RefetchRates.MS_2000)}>Refresh every 2 seconds</option>
+				<option value={String(RefetchRates.MS_5000)}>Refresh every 5 seconds</option>
+				<option value={String(RefetchRates.MS_10000)}>Refresh every 10 seconds</option>
 			{/if}
-			<option value="500">Refresh every 0.5 second</option>
-			<option value="1000">Refresh every second</option>
-			<option value="2000">Refresh every 2 seconds</option>
-			<option value="5000">Refresh every 5 seconds</option>
-			<option value="10000">Refresh every 10 seconds</option>
+		</Select>
+
+		{#if rate === RefetchRates.MANUAL}
+			<IconButton
+				icon="refresh"
+				label="refetch"
+				variant="secondary"
+				cx="border-light border"
+				onclick={() => {
+					onManualRefetch()
+				}}
+			/>
+		{:else}
+			<IconButton
+				icon={rate === RefetchRates.OFF ? 'play-circle-outline' : 'pause'}
+				label="pause"
+				variant="secondary"
+				cx="border-light border"
+				onclick={() => {
+					refreshRates.set(id, RefetchRates.MANUAL)
+				}}
+			/>
 		{/if}
-	</Select>
+	</div>
 </label>
-
-<style>
-	label :global svg {
-		display: none;
-	}
-</style>

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

@@ -1,8 +1,20 @@
+export declare const RefetchRates: {
+    readonly OFF: -1;
+    readonly MANUAL: 0;
+    readonly FPS_60: 17;
+    readonly FPS_30: 33;
+    readonly MS_500: 500;
+    readonly MS_1000: 1000;
+    readonly MS_2000: 2000;
+    readonly MS_5000: 5000;
+    readonly MS_10000: 10000;
+};
 import type { Snippet } from 'svelte';
 interface Props {
     id: string;
     label: string;
     allowLive?: boolean;
+    onManualRefetch: () => void;
     children?: Snippet;
 }
 declare const RefreshRate: import("svelte").Component<Props, {}, "">;

package/dist/components/Tree/Settings.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Select, Switch, Input } from '@viamrobotics/prime-core'
+	import { useQueryClient } from '@tanstack/svelte-query'
 	import RefreshRate from '../RefreshRate.svelte'
 	import { useMotionClient } from '../../hooks/useMotionClient.svelte'
 	import Drawer from './Drawer.svelte'
@@ -10,6 +11,7 @@
 	import WeblabActive from '../weblab/WeblabActive.svelte'
 	import { WEBLABS_EXPERIMENTS } from '../../hooks/useWeblabs.svelte'
 
+	const queryClient = useQueryClient()
 	const partID = usePartID()
 	const cameras = useResourceNames(() => partID.current, 'camera')
 	const settings = useSettings()
@@ -28,10 +30,16 @@
 			id={RefreshRates.poses}
 			label="Poses"
 			allowLive
+			onManualRefetch={() => {
+				queryClient.refetchQueries({ queryKey: ['getPose', 'getGeometries'], exact: false })
+			}}
 		/>
 		<RefreshRate
 			id={RefreshRates.pointclouds}
 			label="Pointclouds"
+			onManualRefetch={() => {
+				queryClient.refetchQueries({ queryKey: ['getPointCloud'], exact: false })
+			}}
 		/>
 		<div>
 			<div>Enabled pointcloud cameras</div>

package/dist/hooks/useGeometries.svelte.js

@@ -10,6 +10,7 @@ import { useLogs } from './useLogs.svelte';
 import { resourceColors } from '../color';
 import { Color } from 'three';
 import { useFrames } from './useFrames.svelte';
+import { RefetchRates } from '../components/RefreshRate.svelte';
 const key = Symbol('geometries-context');
 export const provideGeometries = (partID) => {
     const frames = useFrames();
@@ -32,9 +33,9 @@ export const provideGeometries = (partID) => {
         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'],
+                enabled: interval !== RefetchRates.OFF && client.current !== undefined,
+                refetchInterval: interval === RefetchRates.MANUAL ? false : interval,
+                queryKey: ['getGeometries', 'partID', partID(), client.current?.name],
                 queryFn: async () => {
                     if (!client.current) {
                         throw new Error('No client');

package/dist/hooks/usePointclouds.svelte.js

@@ -8,6 +8,7 @@ import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
 import { WorldObject } from '../WorldObject.svelte';
 import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
 import { useLogs } from './useLogs.svelte';
+import { RefetchRates } from '../components/RefreshRate.svelte';
 const key = Symbol('pointcloud-context');
 export const providePointclouds = (partID) => {
     const logs = useLogs();
@@ -20,11 +21,11 @@ export const providePointclouds = (partID) => {
         for (const cameraClient of clients) {
             const name = cameraClient.current?.name ?? '';
             const options = queryOptions({
-                enabled: interval !== -1 &&
+                enabled: interval !== RefetchRates.OFF &&
                     cameraClient.current !== undefined &&
                     disabledCameras.get(name) !== true,
-                refetchInterval: interval === 0 ? false : interval,
-                queryKey: ['partID', partID(), name, 'getPointCloud'],
+                refetchInterval: interval === RefetchRates.MANUAL ? false : interval,
+                queryKey: ['getPointCloud', 'partID', partID(), name],
                 queryFn: async () => {
                     if (!cameraClient.current) {
                         throw new Error('No camera client');

package/dist/hooks/usePose.svelte.js

@@ -9,6 +9,7 @@ import { useEnvironment } from './useEnvironment.svelte';
 import { observe } from '@threlte/core';
 import { untrack } from 'svelte';
 import { useFrames } from './useFrames.svelte';
+import { RefetchRates } from '../components/RefreshRate.svelte';
 export const usePose = (name, parent) => {
     const { refreshRates } = useMachineSettings();
     const partID = usePartID();
@@ -21,11 +22,11 @@ export const usePose = (name, parent) => {
     const client = createResourceClient(MotionClient, () => partID.current, () => motionClient.current ?? '');
     const interval = $derived(refreshRates.get(RefreshRates.poses));
     const options = $derived(queryOptions({
-        enabled: interval !== -1 &&
+        enabled: interval !== RefetchRates.OFF &&
             client.current !== undefined &&
             environment.current.viewerMode === 'monitor',
-        refetchInterval: interval === 0 ? false : interval,
-        queryKey: ['partID', partID.current, client.current?.name, 'getPose', name(), parent()],
+        refetchInterval: interval === RefetchRates.MANUAL ? false : interval,
+        queryKey: ['getPose', 'partID', partID.current, client.current?.name, name(), parent()],
         queryFn: async () => {
             if (!client.current) {
                 throw new Error('No client');

package/dist/hooks/useWeblabs.svelte.js

@@ -55,5 +55,12 @@ export const provideWeblabs = () => {
     setContext(WEBLABS_CONTEXT_KEY, createWeblabs());
 };
 export const useWeblabs = () => {
-    return getContext(WEBLABS_CONTEXT_KEY);
+    const context = getContext(WEBLABS_CONTEXT_KEY);
+    if (!context) {
+        return {
+            load: () => { },
+            isActive: () => false,
+        };
+    }
+    return context;
 };

package/package.json

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