@viamrobotics/test-widgets 0.7.0 → 0.9.0

package/dist/components/widgets/motion/frame-system-config.js

@@ -0,0 +1,30 @@
+/**
+ * The components the motion service can `Move` are exactly the frames in the
+ * machine's frame system config. `Move` builds a kinematic chain to a frame, so
+ * anything with a configured frame is a valid target.
+ *
+ * @param config - The machine's frame system config, or `undefined` while loading.
+ * @returns The non-empty reference frame names, sorted alphabetically.
+ */
+export const movableFrameNames = (config) => {
+    if (!config) {
+        return [];
+    }
+    return config
+        .map((entry) => entry.frame?.referenceFrame ?? '')
+        .filter((name) => name !== '')
+        .toSorted((a, b) => a.localeCompare(b));
+};
+/**
+ * The parent frame a component is attached to in the machine's frame system.
+ * A frame's parent is the reference frame of the pose that positions it (its
+ * observer frame), so `getPose` and `Move` can be expressed relative to it.
+ *
+ * @param config - The machine's frame system config, or `undefined` while loading.
+ * @param componentName - The component (frame) whose parent to look up.
+ * @returns The parent frame name, or `'world'` when there is no configured parent.
+ */
+export const parentFrame = (config, componentName) => {
+    const entry = config?.find((item) => item.frame?.referenceFrame === componentName);
+    return entry?.frame?.poseInObserverFrame?.referenceFrame || 'world';
+};

package/dist/components/widgets/motion/motion.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+
+	import MoveWidget from './move-widget.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<ApiSection
+			title="Move"
+			api="rdk:service:motion"
+		>
+			<MoveWidget
+				{partID}
+				{resourceName}
+			/>
+		</ApiSection>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/motion/motion.svelte.d.ts

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

package/dist/components/widgets/motion/move-widget.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { MotionClient, type RobotClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createRobotQuery,
+		useRobotClient,
+	} from '@viamrobotics/svelte-sdk'
+
+	import ComponentNameSelect from './component-name-select.svelte'
+	import { movableFrameNames, parentFrame } from './frame-system-config'
+	import Move from './move.svelte'
+	import { type MoveInput, parseMoveArgs } from './parse-move-args'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const robotClient = useRobotClient(() => partID)
+	const client = createResourceClient(
+		MotionClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const move = createResourceMutation(client, 'move')
+	const frameSystem = createRobotQuery(robotClient, 'frameSystemConfig', () => ({
+		refetchInterval: 5000,
+	}))
+	const frameNames = $derived(movableFrameNames(frameSystem.data))
+
+	let selectedName = $state<string>()
+	const componentName = $derived(selectedName ?? frameNames[0] ?? '')
+
+	const destinationFrame = $derived(parentFrame(frameSystem.data, componentName))
+	const poseArgs = $derived<Parameters<RobotClient['getPose']>>([
+		componentName,
+		destinationFrame,
+		[],
+	])
+
+	const poseQuery = createRobotQuery(
+		robotClient,
+		'getPose',
+		() => poseArgs,
+		() => ({ enabled: componentName !== '' })
+	)
+
+	const currentPose = $derived(poseQuery.data?.pose)
+	const poseError = $derived(poseQuery.error instanceof Error ? poseQuery.error : null)
+
+	let parseError = $state<Error>()
+
+	const executeMove = (input: MoveInput) => {
+		try {
+			parseError = undefined
+			move.mutate(parseMoveArgs(componentName, input), {})
+		} catch (error) {
+			parseError = error instanceof Error ? error : new Error(String(error))
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	<ComponentNameSelect
+		value={componentName}
+		options={frameNames}
+		onChange={(value) => {
+			selectedName = value
+		}}
+	/>
+	<Move
+		{componentName}
+		{currentPose}
+		currentReferenceFrame={destinationFrame}
+		isPending={move.isPending}
+		lastError={parseError ?? move.error ?? poseError}
+		storageKey={`${partID}/${resourceName}/motion-move`}
+		onExecute={executeMove}
+	/>
+</div>

package/dist/components/widgets/motion/move-widget.svelte.d.ts

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

package/dist/components/widgets/motion/move.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { Pose } from '@viamrobotics/sdk'
+
+	import { Button, Progress } from '@viamrobotics/prime-core'
+	import { CodeEditor } from '@viamrobotics/prime-core/code-editor'
+	import { PersistedState } from 'runed'
+
+	import ErrorDisplay from '../../error.svelte'
+
+	import type { MoveInput } from './parse-move-args'
+
+	import PoseInFrameInput from './pose-in-frame-input.svelte'
+
+	interface Props {
+		componentName: string
+		currentPose?: Pose
+		currentReferenceFrame?: string
+		isPending: boolean
+		lastError: Error | null
+		storageKey: string
+		onExecute: (input: MoveInput) => void
+	}
+
+	const {
+		componentName,
+		currentPose,
+		currentReferenceFrame,
+		isPending,
+		lastError,
+		storageKey,
+		onExecute,
+	}: Props = $props()
+
+	const zeroPose: Pose = { x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 }
+
+	let edit = $state<{ component: string; referenceFrame: string; pose: Pose }>()
+	const isEdited = $derived(edit?.component === componentName)
+	const referenceFrame = $derived(
+		isEdited && edit ? edit.referenceFrame : (currentReferenceFrame ?? 'world')
+	)
+
+	const pose = $derived(isEdited && edit ? edit.pose : (currentPose ?? zeroPose))
+
+	// PersistedState is created inside $derived so Svelte can track the storageKey
+	// dependency. The localStorage read on construction is benign and idempotent.
+	// storageKey is stable for the lifetime of this component.
+	const worldState = $derived(new PersistedState(`${storageKey}/world-state`, ''))
+	const constraints = $derived(new PersistedState(`${storageKey}/constraints`, ''))
+
+	const disabled = $derived(componentName === '' || isPending)
+
+	const execute = () => {
+		onExecute({
+			referenceFrame,
+			pose,
+			worldStateJson: worldState.current,
+			constraintsJson: constraints.current,
+		})
+	}
+</script>
+
+<div class="flex min-w-0 flex-col gap-4">
+	<PoseInFrameInput
+		{referenceFrame}
+		{pose}
+		onReferenceFrameChange={(frame) => {
+			edit = { component: componentName, referenceFrame: frame, pose }
+		}}
+		onPoseChange={(next) => {
+			edit = { component: componentName, referenceFrame, pose: next }
+		}}
+	/>
+
+	<div class="flex flex-col gap-1">
+		<span class="text-xs font-medium">
+			World state <abbr class="text-subtle-2">(optional JSON)</abbr>
+		</span>
+		<CodeEditor
+			label="World state"
+			language="json"
+			value={worldState.current}
+			onChange={(next: string) => {
+				worldState.current = next
+			}}
+			class="h-32 overflow-y-auto"
+		/>
+	</div>
+
+	<div class="flex flex-col gap-1">
+		<span class="text-xs font-medium">
+			Constraints <abbr class="text-subtle-2">(optional JSON)</abbr>
+		</span>
+		<CodeEditor
+			label="Constraints"
+			language="json"
+			value={constraints.current}
+			onChange={(next: string) => {
+				constraints.current = next
+			}}
+			class="h-32 overflow-y-auto"
+		/>
+	</div>
+
+	<div class="flex items-center gap-2">
+		<Button
+			class="w-fit"
+			icon="play-circle-outline"
+			variant="dark"
+			{disabled}
+			onclick={execute}
+		>
+			Execute
+		</Button>
+		{#if isPending}
+			<Progress
+				size="medium"
+				variant="dark"
+			/>
+		{/if}
+	</div>
+
+	<p class="text-subtle-2 text-xs">
+		Move blocks until the motion completes. Stop the component itself to interrupt.
+	</p>
+
+	<ErrorDisplay {lastError} />
+</div>

package/dist/components/widgets/motion/move.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Pose } from '@viamrobotics/sdk';
+import type { MoveInput } from './parse-move-args';
+interface Props {
+    componentName: string;
+    currentPose?: Pose;
+    currentReferenceFrame?: string;
+    isPending: boolean;
+    lastError: Error | null;
+    storageKey: string;
+    onExecute: (input: MoveInput) => void;
+}
+declare const Move: import("svelte").Component<Props, {}, "">;
+type Move = ReturnType<typeof Move>;
+export default Move;

package/dist/components/widgets/motion/parse-move-args.d.ts

@@ -0,0 +1,24 @@
+import { Constraints, type Pose, type PoseInFrame, WorldState } from '@viamrobotics/sdk';
+/** User-entered inputs for a motion `Move` call. Pose is always mm + degrees. */
+export interface MoveInput {
+    referenceFrame: string;
+    pose: Pose;
+    /** Optional `WorldState` as proto JSON. Empty/whitespace means "omit". */
+    worldStateJson: string;
+    /** Optional `Constraints` as proto JSON. Empty/whitespace means "omit". */
+    constraintsJson: string;
+}
+/** Positional arguments for `MotionClient.move`, ready to spread into `mutate`. */
+export type MoveArgs = [PoseInFrame, string, WorldState | undefined, Constraints | undefined];
+/**
+ * Builds the positional arguments for `MotionClient.move` from form inputs.
+ *
+ * Empty or whitespace-only JSON fields are omitted (passed as `undefined`).
+ * Non-empty JSON is parsed with the generated message classes and throws on
+ * invalid input — callers should catch and surface the error.
+ *
+ * @param componentName - Name of the component to move.
+ * @param input - The pose, reference frame, and optional world-state/constraints JSON.
+ * @returns The `[destination, componentName, worldState?, constraints?]` tuple.
+ */
+export declare const parseMoveArgs: (componentName: string, input: MoveInput) => MoveArgs;

package/dist/components/widgets/motion/parse-move-args.js

@@ -0,0 +1,23 @@
+import { Constraints, WorldState } from '@viamrobotics/sdk';
+/**
+ * Builds the positional arguments for `MotionClient.move` from form inputs.
+ *
+ * Empty or whitespace-only JSON fields are omitted (passed as `undefined`).
+ * Non-empty JSON is parsed with the generated message classes and throws on
+ * invalid input — callers should catch and surface the error.
+ *
+ * @param componentName - Name of the component to move.
+ * @param input - The pose, reference frame, and optional world-state/constraints JSON.
+ * @returns The `[destination, componentName, worldState?, constraints?]` tuple.
+ */
+export const parseMoveArgs = (componentName, input) => {
+    const destination = {
+        referenceFrame: input.referenceFrame,
+        pose: input.pose,
+    };
+    const worldState = input.worldStateJson.trim() === '' ? undefined : WorldState.fromJsonString(input.worldStateJson);
+    const constraints = input.constraintsJson.trim() === ''
+        ? undefined
+        : Constraints.fromJsonString(input.constraintsJson);
+    return [destination, componentName, worldState, constraints];
+};

package/dist/components/widgets/motion/parse-pasted-pose.d.ts

@@ -0,0 +1,10 @@
+import type { Pose } from '@viamrobotics/sdk';
+/**
+ * Parses a clipboard string as a pose. Accepts a JSON object with numeric
+ * `x`, `y`, `z`, `oX`, `oY`, `oZ`, and `theta` fields — the same shape the arm
+ * `MoveToPosition` widget copies, so poses can be pasted between the two.
+ *
+ * @param data - The pasted string.
+ * @returns The parsed pose, or `undefined` if it is not a valid pose.
+ */
+export declare const parsePastedPose: (data: string) => Pose | undefined;

package/dist/components/widgets/motion/parse-pasted-pose.js

@@ -0,0 +1,30 @@
+const poseKeys = ['x', 'y', 'z', 'oX', 'oY', 'oZ', 'theta'];
+const isPose = (value) => {
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+    const record = value;
+    return poseKeys.every((key) => typeof record[key] === 'number');
+};
+/**
+ * Parses a clipboard string as a pose. Accepts a JSON object with numeric
+ * `x`, `y`, `z`, `oX`, `oY`, `oZ`, and `theta` fields — the same shape the arm
+ * `MoveToPosition` widget copies, so poses can be pasted between the two.
+ *
+ * @param data - The pasted string.
+ * @returns The parsed pose, or `undefined` if it is not a valid pose.
+ */
+export const parsePastedPose = (data) => {
+    let parsed;
+    try {
+        parsed = JSON.parse(data);
+    }
+    catch {
+        return undefined;
+    }
+    if (!isPose(parsed)) {
+        return undefined;
+    }
+    const { x, y, z, oX, oY, oZ, theta } = parsed;
+    return { x, y, z, oX, oY, oZ, theta };
+};

package/dist/components/widgets/motion/pose-in-frame-input.svelte

@@ -0,0 +1,168 @@
+<script
+	lang="ts"
+	module
+>
+	import type { Pose } from '@viamrobotics/sdk'
+
+	const poseLabelsList = Object.entries({
+		x: 'X',
+		y: 'Y',
+		z: 'Z',
+		oX: 'OX',
+		oY: 'OY',
+		oZ: 'OZ',
+		theta: 'θ',
+	}) as [keyof Pose, string][]
+</script>
+
+<script lang="ts">
+	import { Button, Icon, Input, Label, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
+	import CopyButton from '../../copy-button.svelte'
+	import PasteButton from '../../paste-button.svelte'
+	import Table from '../../table.svelte'
+	import { numberValueFromEvent } from '../../../event-handlers'
+	import { degreesToRadians, formatNumeric, radiansToDegrees } from '../../../format'
+
+	import { parsePastedPose } from './parse-pasted-pose'
+
+	interface Props {
+		referenceFrame: string
+		pose: Pose
+		onReferenceFrameChange: (frame: string) => void
+		onPoseChange: (pose: Pose) => void
+	}
+
+	const { referenceFrame, pose, onReferenceFrameChange, onPoseChange }: Props = $props()
+
+	let useRadians = $state(false)
+
+	const displayPose = $derived({
+		...pose,
+		theta: useRadians ? degreesToRadians(pose.theta) : pose.theta,
+	})
+
+	const copyData = $derived(JSON.stringify(pose))
+
+	const handlePaste = (data: string): boolean => {
+		const parsed = parsePastedPose(data)
+		if (!parsed) {
+			return false
+		}
+		onPoseChange(parsed)
+		return true
+	}
+
+	const handleValueChange = (key: keyof Pose, inputValue: number) => {
+		const nextValue = key === 'theta' && useRadians ? radiansToDegrees(inputValue) : inputValue
+		onPoseChange({ ...pose, [key]: nextValue })
+	}
+
+	const zero = () => {
+		onPoseChange({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 })
+	}
+
+	const poseUnits = $derived({
+		x: 'mm',
+		y: 'mm',
+		z: 'mm',
+		oX: '',
+		oY: '',
+		oZ: '',
+		theta: useRadians ? 'rad' : 'deg',
+	})
+</script>
+
+<div class="flex min-w-0 flex-col gap-4">
+	<div class="flex items-center justify-between">
+		<span class="flex flex-row items-center gap-1 text-sm">
+			Destination pose
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<span slot="description">
+					The target pose expressed in the given reference frame. Translations are in millimeters.
+				</span>
+			</Tooltip>
+		</span>
+		<div class="flex gap-1">
+			<AngleUnitToggle
+				{useRadians}
+				onToggle={() => {
+					useRadians = !useRadians
+				}}
+			/>
+			<CopyButton data={copyData} />
+			<PasteButton onPaste={handlePaste} />
+		</div>
+	</div>
+
+	<Label>
+		Reference frame
+
+		<Input
+			slot="input"
+			value={referenceFrame}
+			placeholder="world"
+			on:input={(event) => {
+				onReferenceFrameChange((event.target as HTMLInputElement).value)
+			}}
+		/>
+	</Label>
+
+	<Table>
+		<thead>
+			<tr>
+				<th>Pose</th>
+				<th>Value</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each poseLabelsList as labelList (labelList)}
+				{@const [key, label] = labelList}
+				{@const value = Number.parseFloat(formatNumeric(displayPose[key]))}
+				<tr>
+					<th>
+						<span class="relative inline-flex justify-center">
+							{label}
+							<abbr class="text-subtle-2 absolute left-full ml-1">{poseUnits[key]}</abbr>
+						</span>
+					</th>
+					<th>
+						<NumericInput
+							cx="max-w-[76px]"
+							{value}
+							on:change={(event) => {
+								handleValueChange(key, numberValueFromEvent(event) ?? 0)
+							}}
+						/>
+					</th>
+				</tr>
+			{/each}
+		</tbody>
+	</Table>
+
+	<div class="flex flex-col gap-2">
+		<span class="flex flex-row gap-2">
+			<h4 class="text-xs font-semibold">Quick set</h4>
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<span slot="description"> Will update the pose values but will not execute </span>
+			</Tooltip>
+		</span>
+		<Button
+			class="w-fit"
+			onclick={zero}
+		>
+			Zero
+		</Button>
+	</div>
+</div>

package/dist/components/widgets/motion/pose-in-frame-input.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Pose } from '@viamrobotics/sdk';
+interface Props {
+    referenceFrame: string;
+    pose: Pose;
+    onReferenceFrameChange: (frame: string) => void;
+    onPoseChange: (pose: Pose) => void;
+}
+declare const PoseInFrameInput: import("svelte").Component<Props, {}, "">;
+type PoseInFrameInput = ReturnType<typeof PoseInFrameInput>;
+export default PoseInFrameInput;

package/dist/components/widgets/motor/is-moving-widget.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MotorClient } from '@viamrobotics/sdk'
+
+	import IsMoving from '../../is-moving.svelte'
+	import { ResourceTriplets } from '../../../resource-triplet'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<IsMoving
+	client={MotorClient}
+	api={ResourceTriplets.Motor}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/motor/is-moving-widget.svelte.d.ts

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

package/dist/components/widgets/motor/motor.svelte

@@ -148,10 +148,7 @@
   Stepper motors will report ”true” if they are being powered while holding
   a position and while they are turning."
 						>
-							<Query
-								contentCx="h-4"
-								query={isPoweredQuery}
-							>
+							<Query query={isPoweredQuery}>
 								{#if isPoweredQuery.data !== undefined}
 									{@const [isPowered, powerPct] = isPoweredQuery.data}
 									<span class="font-roboto-mono flex flex-row gap-1 text-xs">
@@ -171,10 +168,7 @@
 								class="gap-3 p-0"
 								tooltip="Reports the position of an encoded motor in revolutions from zero/home."
 							>
-								<Query
-									contentCx=""
-									query={positionQuery}
-								>
+								<Query query={positionQuery}>
 									<p class="font-roboto-mono text-default text-xs">
 										{formatNumeric(positionQuery.data, 4)}
 									</p>

package/dist/components/widgets/movement-sensor/get-accuracy-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { MovementSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Accuracy from './accuracy.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MovementSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getAccuracy', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetAccuracy"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Accuracy data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/movement-sensor/get-accuracy-widget.svelte.d.ts

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