@viamrobotics/test-widgets 0.11.3 → 0.12.0

package/dist/components/widgets/arm/arm.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import type { Pose } from '@viamrobotics/sdk'
-
 	import { ArmClient } from '@viamrobotics/sdk'
 	import {
 		createResourceClient,
@@ -17,7 +15,7 @@
 	import GetJointPositions from './get-joint-positions.svelte'
 	import { getJointPositionLimits, type KinematicsJSON } from './joint-position-limits'
 	import MoveToJointPositions from './move-to-joint-positions.svelte'
-	import MoveToPosition from './move-to-position.svelte'
+	import MoveToPositionControl from './move-to-position-control.svelte'
 
 	interface Props {
 		partID: string
@@ -34,22 +32,16 @@
 
 	const options = { refetchInterval: 500 }
 	const jointPositionsQuery = createResourceQuery(client, 'getJointPositions', options)
-	const endPositionQuery = createResourceQuery(client, 'getEndPosition', options)
 	const kinematicsQuery = createResourceQuery(client, 'getKinematics', options)
 	const isMovingQuery = createResourceQuery(client, 'isMoving', options)
 
 	const moveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
 	const stopMutation = createResourceMutation(client, 'stop')
-	const moveToPosMutation = createResourceMutation(client, 'moveToPosition')
 
 	const moveToJointPositions = (jointPositionsList: number[]) => {
 		moveToJointPosMutation.mutate([jointPositionsList], {})
 	}
 
-	const moveToPosition = (position: Pose) => {
-		moveToPosMutation.mutate([position], {})
-	}
-
 	const jointLimitsDegrees = $derived(
 		kinematicsQuery.data ? getJointPositionLimits(kinematicsQuery.data as KinematicsJSON) : []
 	)
@@ -94,15 +86,10 @@
 						title="MoveToPosition"
 						api="rdk:component:arm"
 					>
-						<Query query={endPositionQuery}>
-							{#if endPositionQuery.data}
-								<MoveToPosition
-									endPosition={endPositionQuery.data}
-									{moveToPosition}
-									lastError={moveToPosMutation.error}
-								/>
-							{/if}
-						</Query>
+						<MoveToPositionControl
+							{partID}
+							{resourceName}
+						/>
 					</ApiSection>
 				</div>
 

package/dist/components/widgets/arm/move-control-mode.d.ts

@@ -0,0 +1,19 @@
+/** How the arm MoveToPosition widget executes a move. */
+export type MoveControlMode = 'motion' | 'direct';
+/**
+ * The mode the widget starts in: motion planning whenever the machine has a
+ * motion service, direct arm control only when it has none.
+ */
+export declare const defaultMoveControlMode: (motionServiceNames: string[]) => MoveControlMode;
+/**
+ * The motion service a `Move` call targets: `builtin` when present, otherwise
+ * the first discovered service.
+ *
+ * @returns The service name, or `undefined` when the machine has no motion service.
+ */
+export declare const moveMotionServiceName: (motionServiceNames: string[]) => string | undefined;
+/**
+ * The selectable motion services for the service select: `builtin` first when
+ * present, the rest alphabetical.
+ */
+export declare const motionServiceOptions: (motionServiceNames: string[]) => string[];

package/dist/components/widgets/arm/move-control-mode.js

@@ -0,0 +1,22 @@
+/**
+ * The mode the widget starts in: motion planning whenever the machine has a
+ * motion service, direct arm control only when it has none.
+ */
+export const defaultMoveControlMode = (motionServiceNames) => motionServiceNames.length > 0 ? 'motion' : 'direct';
+/**
+ * The motion service a `Move` call targets: `builtin` when present, otherwise
+ * the first discovered service.
+ *
+ * @returns The service name, or `undefined` when the machine has no motion service.
+ */
+export const moveMotionServiceName = (motionServiceNames) => motionServiceNames.includes('builtin') ? 'builtin' : motionServiceNames[0];
+/**
+ * The selectable motion services for the service select: `builtin` first when
+ * present, the rest alphabetical.
+ */
+export const motionServiceOptions = (motionServiceNames) => {
+    const others = motionServiceNames
+        .filter((name) => name !== 'builtin')
+        .toSorted((a, b) => a.localeCompare(b));
+    return motionServiceNames.includes('builtin') ? ['builtin', ...others] : others;
+};

package/dist/components/widgets/arm/move-to-position-control.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import { Banner, Icon, Label, Select, ToggleButtons, Tooltip } from '@viamrobotics/prime-core'
+	import { ArmClient, MotionClient, type Pose, type RobotClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+		createRobotQuery,
+		useResourceStatuses,
+		useRobotClient,
+	} from '@viamrobotics/svelte-sdk'
+
+	import Query from '../../query.svelte'
+
+	import {
+		defaultMoveControlMode,
+		motionServiceOptions,
+		type MoveControlMode,
+		moveMotionServiceName,
+	} from './move-control-mode'
+	import MoveToPosition from './move-to-position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const motionServices = useResourceStatuses(() => partID, 'motion')
+	const motionServiceNames = $derived(
+		motionServices.current
+			.map((service) => service.name?.name)
+			.filter((name): name is string => name !== undefined)
+	)
+	const hasMotionService = $derived(motionServiceNames.length > 0)
+
+	let userChoice = $state<MoveControlMode>()
+	const mode = $derived(userChoice ?? defaultMoveControlMode(motionServiceNames))
+
+	let userServiceChoice = $state<string>()
+	const activeMotionServiceName = $derived(
+		userServiceChoice ?? moveMotionServiceName(motionServiceNames)
+	)
+	const serviceOptions = $derived(motionServiceOptions(motionServiceNames))
+	const showServiceSelect = $derived(mode === 'motion' && serviceOptions.length > 1)
+
+	const robotClient = useRobotClient(() => partID)
+	const armClient = createResourceClient(
+		ArmClient,
+		() => partID,
+		() => resourceName
+	)
+	const motionClient = createResourceClient(
+		MotionClient,
+		() => partID,
+		() => activeMotionServiceName ?? ''
+	)
+
+	// Pre-fill the editor with the arm's current pose, in the frame the active mode sends to.
+	const poseArgs = $derived<Parameters<RobotClient['getPose']>>([resourceName, 'world', []])
+	const poseQuery = createRobotQuery(
+		robotClient,
+		'getPose',
+		() => poseArgs,
+		() => ({ enabled: mode === 'motion' })
+	)
+	const endPositionQuery = createResourceQuery(armClient, 'getEndPosition', () => ({
+		refetchInterval: 500,
+		enabled: mode === 'direct',
+	}))
+
+	const activeQuery = $derived(mode === 'motion' ? poseQuery : endPositionQuery)
+	const endPosition = $derived(mode === 'motion' ? poseQuery.data?.pose : endPositionQuery.data)
+
+	const moveMutation = createResourceMutation(motionClient, 'move')
+	const moveToPosMutation = createResourceMutation(armClient, 'moveToPosition')
+	const lastError = $derived(mode === 'motion' ? moveMutation.error : moveToPosMutation.error)
+
+	const description = $derived(
+		mode === 'motion'
+			? 'Pose is in the world frame, as required by the motion service.'
+			: 'Pose is with respect to the arm origin and does not take into account the motion service or frame system.'
+	)
+
+	const handleModeInput = (event: CustomEvent<string>) => {
+		userChoice = event.detail === 'Motion service' ? 'motion' : 'direct'
+	}
+
+	const handleServiceChange = (event: Event) => {
+		if (event.target instanceof HTMLSelectElement) {
+			userServiceChoice = event.target.value
+		}
+	}
+
+	const moveToPosition = (position: Pose) => {
+		if (mode === 'motion') {
+			moveMutation.mutate([{ referenceFrame: 'world', pose: position }, resourceName], {})
+		} else {
+			moveToPosMutation.mutate([position], {})
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	{#if hasMotionService}
+		<Label position="top">
+			<span class="flex items-center gap-1 text-xs">
+				Control mode
+				<Tooltip>
+					<Icon
+						name="information-outline"
+						size="sm"
+					/>
+					<span slot="description">
+						Using a motion service will include motion planning and obstacle avoidance. Direct arm
+						control will move the arm without any planning and regardless of obstacles.
+					</span>
+				</Tooltip>
+			</span>
+
+			<ToggleButtons
+				slot="input"
+				options={['Motion service', 'Arm']}
+				selected={mode === 'motion' ? 'Motion service' : 'Arm'}
+				on:input={handleModeInput}
+			/>
+		</Label>
+	{/if}
+	{#if showServiceSelect}
+		<Label>
+			Motion service name
+
+			<Select
+				slot="input"
+				value={activeMotionServiceName ?? ''}
+				on:change={handleServiceChange}
+			>
+				{#each serviceOptions as name (name)}
+					<option value={name}>{name}</option>
+				{/each}
+			</Select>
+		</Label>
+	{/if}
+	<Banner variant={mode === 'motion' ? 'info' : 'danger'}>
+		{#snippet subtitle()}
+			{#if mode === 'motion'}
+				Movement goes through motion planning and attempts to avoid obstacles.
+			{:else}
+				The arm will not avoid obstacles when moving. Use with caution.
+			{/if}
+		{/snippet}
+	</Banner>
+	<Query query={activeQuery}>
+		{#if endPosition}
+			<MoveToPosition
+				{endPosition}
+				{moveToPosition}
+				{lastError}
+				{description}
+			/>
+		{/if}
+	</Query>
+</div>

package/dist/components/widgets/arm/move-to-position-control.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+}
+declare const MoveToPositionControl: import("svelte").Component<Props, {}, "">;
+type MoveToPositionControl = ReturnType<typeof MoveToPositionControl>;
+export default MoveToPositionControl;

package/dist/components/widgets/arm/move-to-position-widget.svelte

@@ -1,14 +1,5 @@
 <script lang="ts">
-	import { ArmClient, type Pose } from '@viamrobotics/sdk'
-	import {
-		createResourceClient,
-		createResourceMutation,
-		createResourceQuery,
-	} from '@viamrobotics/svelte-sdk'
-
-	import Query from '../../query.svelte'
-
-	import MoveToPosition from './move-to-position.svelte'
+	import MoveToPositionControl from './move-to-position-control.svelte'
 
 	interface Props {
 		partID: string
@@ -16,28 +7,9 @@
 	}
 
 	const { partID, resourceName }: Props = $props()
-
-	const client = createResourceClient(
-		ArmClient,
-		() => partID,
-		() => resourceName
-	)
-
-	const endPositionQuery = createResourceQuery(client, 'getEndPosition', {
-		refetchInterval: 500,
-	})
-	const moveToPosMutation = createResourceMutation(client, 'moveToPosition')
-	const moveToPosition = (position: Pose) => {
-		moveToPosMutation.mutate([position], {})
-	}
 </script>
 
-<Query query={endPositionQuery}>
-	{#if endPositionQuery.data}
-		<MoveToPosition
-			endPosition={endPositionQuery.data}
-			{moveToPosition}
-			lastError={moveToPosMutation.error}
-		/>
-	{/if}
-</Query>
+<MoveToPositionControl
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/arm/move-to-position.svelte

@@ -10,9 +10,15 @@
 		endPosition: Pose
 		moveToPosition: (position: Pose) => void
 		lastError: Error | null
+		description?: string
 	}
 
-	const { endPosition, moveToPosition, lastError }: Props = $props()
+	const {
+		endPosition,
+		moveToPosition,
+		lastError,
+		description = 'Pose is with respect to the arm origin and does not take into account the motion service or frame system.',
+	}: Props = $props()
 
 	// svelte-ignore state_referenced_locally
 	let desiredPosition = $state({ ...endPosition })
@@ -41,7 +47,7 @@
 			desiredPosition = next
 		}}
 		title="Pose Values"
-		description="Pose is with respect to the arm origin and does not take into account the motion service or frame system."
+		{description}
 	/>
 
 	<div class="mb-2 flex flex-col gap-2">

package/dist/components/widgets/arm/move-to-position.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     endPosition: Pose;
     moveToPosition: (position: Pose) => void;
     lastError: Error | null;
+    description?: string;
 }
 declare const MoveToPosition: import("svelte").Component<Props, {}, "">;
 type MoveToPosition = ReturnType<typeof MoveToPosition>;

package/dist/components/widgets/do-command/create-do-command-client.svelte.d.ts

@@ -1,7 +1,6 @@
 import { MLModelClient, ResourceName } from '@viamrobotics/sdk';
+import { type ResourceClientContext } from '@viamrobotics/svelte-sdk';
 import { clientMap } from '../../../client-map';
 type DoCommandable = InstanceType<Exclude<(typeof clientMap)[keyof typeof clientMap], typeof MLModelClient>>;
-export declare const createDoCommandClient: (resource: () => ResourceName, partID: () => string, resourceName: () => string) => {
-    current: DoCommandable | undefined;
-};
+export declare const createDoCommandClient: (resource: () => ResourceName, partID: () => string, resourceName: () => string) => ResourceClientContext<DoCommandable>;
 export {};

package/dist/components/widgets/do-command/create-do-command-client.svelte.js

@@ -1,5 +1,5 @@
 import { MachineConnectionEvent, MLModelClient, ResourceName } from '@viamrobotics/sdk';
-import { useConnectionStatus, useRobotClient } from '@viamrobotics/svelte-sdk';
+import { useConnectionStatus, useRobotClient, } from '@viamrobotics/svelte-sdk';
 import { clientForResource, clientMap } from '../../../client-map';
 export const createDoCommandClient = (resource, partID, resourceName) => {
     const robotClient = useRobotClient(partID);
@@ -22,5 +22,11 @@ export const createDoCommandClient = (resource, partID, resourceName) => {
         get current() {
             return resourceClient;
         },
+        get partID() {
+            return partID();
+        },
+        get name() {
+            return resourceName();
+        },
     };
 };

package/dist/components/widgets/do-command/resource-do-command.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+	import { useResourceStatuses } from '@viamrobotics/svelte-sdk'
 
 	import DoCommand from './do-command.svelte'
 
@@ -10,9 +10,9 @@
 
 	const { partID, resourceName }: Props = $props()
 
-	const resourceNames = useResourceNames(() => partID)
+	const statuses = useResourceStatuses(() => partID)
 	const resource = $derived(
-		resourceNames.current.find((candidate) => candidate.name === resourceName)
+		statuses.current.find((status) => status.name?.name === resourceName)?.name
 	)
 </script>
 

package/dist/components/widgets/vision-service/vision-service.svelte

@@ -4,7 +4,7 @@
 	import {
 		createResourceClient,
 		createResourceQuery,
-		useResourceNames,
+		useResourceStatuses,
 	} from '@viamrobotics/svelte-sdk'
 
 	import { useAddImageToDataset } from '../../../add-image-to-dataset'
@@ -46,12 +46,18 @@
 	let showObjectPointClouds = $state(false)
 	let isRemote = $state(false)
 
-	const cameras = useResourceNames(() => partID, 'camera')
+	const cameraStatuses = useResourceStatuses(() => partID, 'camera')
+
+	const cameras = $derived(
+		cameraStatuses.current
+			.map((status) => status.name?.name)
+			.filter((name): name is string => name !== undefined)
+	)
 
 	$effect.pre(() => {
-		if (cameras.current.length > 0 && !initialFetchComplete) {
+		if (cameras.length > 0 && !initialFetchComplete) {
 			initialFetchComplete = true
-			cameraName = cameras.current[0]?.name ?? ''
+			cameraName = cameras[0] ?? ''
 		}
 	})
 
@@ -136,7 +142,7 @@
 							>
 								Default camera
 							</option>
-							{#each cameras.current as { name } (name)}
+							{#each cameras as name (name)}
 								<option
 									selected={cameraName === name}
 									value={name}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "license": "Apache-2.0",
   "type": "module",
   "wireit": {
@@ -249,7 +249,7 @@
     "@types/three": "^0.183.1",
     "@viamrobotics/prime-core": "^0.1.22",
     "@viamrobotics/sdk": "^0.69.0",
-    "@viamrobotics/svelte-sdk": "^1.2.1",
+    "@viamrobotics/svelte-sdk": "^1.5.1",
     "@viamrobotics/tailwind-config": "^1.2.0",
     "@vitest/browser": "^4.1.10",
     "@vitest/browser-playwright": "^4.1.5",