@viamrobotics/test-widgets 0.6.1 → 0.8.0

package/dist/components/widgets/arm/move-to-joint-positions.svelte

@@ -1,93 +1,68 @@
 <script lang="ts">
-	import { Button, Icon, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+	import { Icon, Tooltip } from '@viamrobotics/prime-core'
 
 	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
 	import CopyButton from '../../copy-button.svelte'
 	import ErrorDisplay from '../../error.svelte'
 	import PasteButton from '../../paste-button.svelte'
-	import Table from '../../table.svelte'
-	import { numberValueFromEvent } from '../../../event-handlers'
 	import { degreesToRadians, formatNumeric, radiansToDegrees } from '../../../format'
 
-	import { getOutOfBoundsSide, isOutsideJointLimit, type JointLimit } from './joint-position-limits'
+	import JointPositionEditor from './joint-position-editor.svelte'
+	import { type JointLimit } from './joint-position-limits'
+	import JointPositionQuickMove from './joint-position-quick-move.svelte'
+
+	type ControlMode = 'jointPositions' | 'quickMove'
 
 	interface Props {
 		positions: number[]
 		moveToJointPositions: (jointPositions: number[]) => void
 		lastError: Error | null
 		jointLimitsDegrees: JointLimit[]
+		isMoving?: boolean
 	}
 
-	const { positions, moveToJointPositions, lastError, jointLimitsDegrees }: Props = $props()
+	const {
+		positions,
+		moveToJointPositions,
+		lastError,
+		jointLimitsDegrees,
+		isMoving = false,
+	}: Props = $props()
 
 	// svelte-ignore state_referenced_locally
-	let desiredPositions = $state([...positions])
+	let desiredPositions = $state([...positions]) // in degrees
 	let useRadians = $state(false)
+	let controlMode = $state<ControlMode>('jointPositions')
 
-	const resetToZero = () => {
-		desiredPositions = [...desiredPositions].fill(0)
-	}
+	const isQuickMoveMode = $derived(controlMode === 'quickMove')
 
-	const resetToCurrent = () => {
-		desiredPositions = [...positions]
-	}
+	const getJointMin = (index: number): number => jointLimitsDegrees[index]?.minDegrees ?? -180
+	const getJointMax = (index: number): number => jointLimitsDegrees[index]?.maxDegrees ?? 180
+
+	const toDisplayAngle = (degrees: number) => (useRadians ? degreesToRadians(degrees) : degrees)
 
-	const handleJointInputChange = (index: number, inputValue: number) => {
-		// default is degrees, so if user has toggle to radians, convert back to degrees before setting
-		// (we only convert to radians when displaying)
-		desiredPositions[index] = useRadians ? radiansToDegrees(inputValue) : inputValue
+	const displayPositions = $derived(desiredPositions.map((degrees) => toDisplayAngle(degrees)))
+	const copyData = $derived(`[${displayPositions.map((v) => formatNumeric(v)).join(', ')}]`)
+
+	const toggleMode = () => {
+		controlMode = isQuickMoveMode ? 'jointPositions' : 'quickMove'
 	}
 
 	const handlePaste = (data: string): boolean => {
 		try {
-			desiredPositions = JSON.parse(data) as number[]
+			const parsed = JSON.parse(data) as number[]
+			desiredPositions = parsed.map((pos, i) => {
+				const degrees = useRadians ? radiansToDegrees(pos) : pos
+				return Math.min(Math.max(degrees, getJointMin(i)), getJointMax(i))
+			})
 		} catch {
 			return false
 		}
 		return true
 	}
-	const degreesToDisplayAngle = (degrees: number) => {
-		return useRadians ? degreesToRadians(degrees) : degrees
-	}
-
-	const outOfBoundsMessage = (displayValue: number, limit: JointLimit) => {
-		const min = degreesToDisplayAngle(limit.minDegrees)
-		const max = degreesToDisplayAngle(limit.maxDegrees)
-		const unit = useRadians ? 'rad' : 'deg'
-		const side = getOutOfBoundsSide(displayValue, min, max)
-
-		if (side === 'below-min') {
-			return `Min value is ${formatNumeric(min)} ${unit}`
-		}
-
-		if (side === 'above-max') {
-			return `Max value is ${formatNumeric(max)} ${unit}`
-		}
-	}
-
-	const displayPositions = $derived(desiredPositions.map((pos) => degreesToDisplayAngle(pos)))
-
-	const copyData = $derived(`[${displayPositions.join(', ')}]`)
-
-	const outOfBoundsByIndex = $derived(
-		displayPositions.map((displayValue, index) => {
-			const limit = jointLimitsDegrees[index]
-			if (!limit) {
-				return false
-			}
-			return isOutsideJointLimit(
-				displayValue,
-				degreesToDisplayAngle(limit.minDegrees),
-				degreesToDisplayAngle(limit.maxDegrees)
-			)
-		})
-	)
-
-	const hasOutOfBoundsPositions = $derived(outOfBoundsByIndex.some(Boolean))
 </script>
 
 <div class="flex min-w-0 flex-col gap-4">
-	<!-- Controls Header -->
 	<div class="flex items-center justify-between">
 		<span class="flex flex-row items-center gap-1 text-sm">
 			Joint Positions
@@ -96,88 +71,59 @@
 					name="information-outline"
 					cx="text-gray-6"
 				/>
-
 				<span slot="description">
 					Joint position limits are based solely on the arm kinematics and do not take into account
 					motion service limit overrides.
 				</span>
 			</Tooltip>
 		</span>
-		<div class="flex gap-1">
-			<AngleUnitToggle
-				{useRadians}
-				onToggle={() => {
-					useRadians = !useRadians
-				}}
-			/>
-			<CopyButton data={copyData} />
-			<PasteButton onPaste={handlePaste} />
-		</div>
-	</div>
-
-	<Table>
-		<thead>
-			<tr>
-				<th> Joint </th>
-				<th>Move ({useRadians ? 'radians' : 'degrees'})</th>
-			</tr>
-		</thead>
-		<tbody>
-			{#each { length: positions.length }, index}
-				{@const limit = jointLimitsDegrees[index]}
-				{@const value = Number.parseFloat(formatNumeric(displayPositions[index]))}
-				{@const outOfBounds = outOfBoundsByIndex[index]}
-				<tr>
-					<th>{index}</th>
-					<th>
-						<div class="flex flex-col items-center gap-0.5 py-0.5">
-							<NumericInput
-								cx="max-w-[76px]"
-								{value}
-								on:change={(event) => {
-									const inputValue = numberValueFromEvent(event) ?? 0
-									handleJointInputChange(index, inputValue)
-								}}
-							/>
-							{#if limit && outOfBounds}
-								<p class="text-danger-dark text-center text-[10px] leading-snug whitespace-normal">
-									{outOfBoundsMessage(displayPositions[index], limit)}
-								</p>
-							{/if}
-						</div>
-					</th>
-				</tr>
-			{/each}
-		</tbody>
-	</Table>
-
-	<div class="mb-2 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"
+		<div class="flex items-center gap-1">
+			<div class="flex gap-1">
+				{#if !isQuickMoveMode}
+					<CopyButton data={copyData} />
+					<PasteButton onPaste={handlePaste} />
+				{/if}
+				<AngleUnitToggle
+					{useRadians}
+					onToggle={() => {
+						useRadians = !useRadians
+					}}
 				/>
-
+			</div>
+			<Tooltip>
+				<button
+					onclick={toggleMode}
+					aria-label={isQuickMoveMode ? 'Exit quick move mode' : 'Enter quick move mode'}
+					class={[
+						'hover:border-medium hover:bg-medium active:bg-gray-2 rounded p-0.5',
+						isQuickMoveMode ? 'text-amber-600' : 'text-gray-6',
+					]}
+				>
+					<Icon name="lightning-bolt-outline" />
+				</button>
 				<span slot="description">
-					Will update the "Move to" input values but will not execute
+					{isQuickMoveMode ? 'Exit quick move mode' : 'Enter quick move mode'}
 				</span>
 			</Tooltip>
-		</span>
-		<div class="flex flex-col gap-2 sm:flex-row">
-			<Button onclick={resetToZero}>Zero</Button>
-			<Button onclick={resetToCurrent}>Current position</Button>
 		</div>
 	</div>
-	<Button
-		class="mt-auto w-fit"
-		disabled={hasOutOfBoundsPositions}
-		icon="play-circle-outline"
-		variant="dark"
-		onclick={() => moveToJointPositions(desiredPositions)}
-	>
-		Execute
-	</Button>
+
+	{#if isQuickMoveMode}
+		<JointPositionQuickMove
+			{positions}
+			{moveToJointPositions}
+			{useRadians}
+			{isMoving}
+		/>
+	{:else}
+		<JointPositionEditor
+			bind:desiredPositions
+			{positions}
+			{moveToJointPositions}
+			{useRadians}
+			{jointLimitsDegrees}
+		/>
+	{/if}
+
 	<ErrorDisplay {lastError} />
 </div>

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

@@ -4,6 +4,7 @@ interface Props {
     moveToJointPositions: (jointPositions: number[]) => void;
     lastError: Error | null;
     jointLimitsDegrees: JointLimit[];
+    isMoving?: boolean;
 }
 declare const MoveToJointPositions: import("svelte").Component<Props, {}, "">;
 type MoveToJointPositions = ReturnType<typeof MoveToJointPositions>;

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

@@ -76,13 +76,36 @@
 		oZ: 'OZ',
 		theta: 'θ',
 	} as const
+	const positionUnits = $derived({
+		x: 'mm',
+		y: 'mm',
+		z: 'mm',
+		oX: '',
+		oY: '',
+		oZ: '',
+		theta: useRadians ? 'rad' : 'deg',
+	} as const satisfies Record<keyof Pose, string>)
+
 	const positionLabelsList = Object.entries(positionLabels) as [keyof Pose, string][]
 </script>
 
 <div class="flex min-w-0 flex-col gap-4">
 	<!-- Controls Header -->
 	<div class="flex items-center justify-between">
-		<span class="text-sm">Pose Values</span>
+		<span class="flex flex-row items-center gap-1 text-sm">
+			Pose Values
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<span slot="description">
+					Pose is with respect to the arm origin and does not take into account the motion service
+					or frame system.
+				</span>
+			</Tooltip>
+		</span>
 		<div class="flex gap-1">
 			<AngleUnitToggle
 				{useRadians}
@@ -99,7 +122,7 @@
 		<thead>
 			<tr>
 				<th>Pose</th>
-				<th>Value ({useRadians ? 'radians' : 'degrees'})</th>
+				<th>Value</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -107,7 +130,12 @@
 				{@const [key, label] = labelList}
 				{@const value = Number.parseFloat(formatNumeric(displayPosition[key]))}
 				<tr>
-					<th>{label}</th>
+					<th>
+						<span class="relative inline-flex justify-center">
+							{label}
+							<abbr class="text-subtle-2 absolute left-full ml-1">{positionUnits[key]}</abbr>
+						</span>
+					</th>
 					<th>
 						<NumericInput
 							cx="max-w-[76px]"

package/dist/components/widgets/audio-input/audio-input.svelte

@@ -62,6 +62,7 @@
 			<div class="flex w-full flex-col divide-y">
 				<MutationSection
 					title="GetAudio"
+					api="rdk:component:audio_input"
 					description="Capture audio from the device"
 					lastError={capture.error}
 				>
@@ -131,6 +132,7 @@
 			<div class="ml-auto flex w-full max-w-1/2 flex-col divide-y sm:max-w-1/3">
 				<ApiSection
 					title="GetProperties"
+					api="rdk:component:audio_input"
 					description="Audio input properties"
 					class="relative"
 				>

package/dist/components/widgets/audio-input/get-properties-widget.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { AudioInClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Properties from './properties.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		AudioInClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getProperties', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetProperties"
+	description="Audio input properties"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Properties
+				supportedCodecs={query.data.supportedCodecs}
+				sampleRateHz={query.data.sampleRateHz}
+				numChannels={query.data.numChannels}
+			/>
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/audio-input/get-properties-widget.svelte.d.ts

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

package/dist/components/widgets/audio-output/audio-output.svelte

@@ -107,6 +107,7 @@
 			<div class="flex w-full flex-col divide-y">
 				<MutationSection
 					title="Play"
+					api="rdk:component:audio_output"
 					description="Send audio data to the device"
 					lastError={playContext.error}
 				>
@@ -178,6 +179,7 @@
 			<div class="ml-auto flex w-full max-w-1/2 flex-col divide-y sm:max-w-1/3">
 				<ApiSection
 					title="GetProperties"
+					api="rdk:component:audio_output"
 					description="Audio output properties"
 					class="relative"
 				>

package/dist/components/widgets/audio-output/get-properties-widget.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { AudioOutClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Properties from './properties.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		AudioOutClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getProperties', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetProperties"
+	description="Audio output properties"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Properties
+				supportedCodecs={query.data.supportedCodecs}
+				sampleRateHz={query.data.sampleRateHz}
+				numChannels={query.data.numChannels}
+			/>
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/audio-output/get-properties-widget.svelte.d.ts

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

package/dist/components/widgets/base/base.svelte

@@ -83,7 +83,10 @@
 				/>
 			</MutationSection>
 			<div class="ml-auto flex w-full max-w-40 grow flex-col divide-y">
-				<ApiSection title="Stop">
+				<ApiSection
+					title="Stop"
+					api="rdk:component:base"
+				>
 					<StopButton
 						error={stopMutation.error}
 						onStop={() => {
@@ -93,6 +96,7 @@
 				</ApiSection>
 				<IsMoving
 					client={BaseClient}
+					api="rdk:component:base"
 					{partID}
 					{resourceName}
 				/>
@@ -100,6 +104,7 @@
 		</div>
 		<MutationSection
 			title="MoveStraight"
+			api="rdk:component:base"
 			description="Move across a given distance at a given velocity"
 			lastError={moveStraightMutation.error}
 		>
@@ -107,6 +112,7 @@
 		</MutationSection>
 		<MutationSection
 			title="Spin"
+			api="rdk:component:base"
 			description="Turn to a given angle at a given velocity"
 			lastError={spinMutation.error}
 		>
@@ -114,6 +120,7 @@
 		</MutationSection>
 		<MutationSection
 			title="SetPower"
+			api="rdk:component:base"
 			description="Move continuously at a given amount of power"
 			lastError={setPowerMutation.error}
 		>
@@ -121,6 +128,7 @@
 		</MutationSection>
 		<MutationSection
 			title="SetVelocity"
+			api="rdk:component:base"
 			description="Move continually at a given velocity"
 			lastError={setVelocityMutation.error}
 		>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { BaseClient } 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={BaseClient}
+	api={ResourceTriplets.Base}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/base/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/base/quick-move.svelte

@@ -90,8 +90,11 @@
 		}
 	}
 
+	// stopImmediatePropagation (not stopPropagation) in the capture phase so movement
+	// keys never reach sibling window keydown listeners on the same target — e.g. the
+	// config builder's "A" add-resource hotkey. stopPropagation leaves siblings running.
 	const onKeydown = (event: KeyboardEvent) => {
-		if (!isKeyboardEnabled || event.repeat) {
+		if (!isKeyboardEnabled) {
 			return
 		}
 
@@ -100,9 +103,13 @@
 			return
 		}
 
-		event.stopPropagation()
+		event.stopImmediatePropagation()
 		event.preventDefault()
 
+		if (event.repeat) {
+			return
+		}
+
 		pressedKeys[key] = true
 		onKeyChange()
 	}
@@ -117,7 +124,7 @@
 			return
 		}
 
-		event.stopPropagation()
+		event.stopImmediatePropagation()
 		event.preventDefault()
 
 		pressedKeys[key] = false
@@ -132,8 +139,8 @@
 </script>
 
 <svelte:window
-	onkeydown={onKeydown}
-	onkeyup={onKeyup}
+	onkeydowncapture={onKeydown}
+	onkeyupcapture={onKeyup}
 />
 
 <div class="flex grow flex-col gap-6">