@viamrobotics/test-widgets 0.6.1 → 0.8.0

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

@@ -11,7 +11,6 @@
 	import ApiSection from '../../api-section.svelte'
 	import ConnectionStatus from '../../connection-status.svelte'
 	import IsMoving from '../../is-moving.svelte'
-	import Queries from '../../queries.svelte'
 	import Query from '../../query.svelte'
 	import StopButton from '../../stop-button.svelte'
 
@@ -19,7 +18,6 @@
 	import { getJointPositionLimits, type KinematicsJSON } from './joint-position-limits'
 	import MoveToJointPositions from './move-to-joint-positions.svelte'
 	import MoveToPosition from './move-to-position.svelte'
-	import QuickMove from './quick-move.svelte'
 
 	interface Props {
 		partID: string
@@ -38,9 +36,9 @@
 	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 quickMoveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
 	const stopMutation = createResourceMutation(client, 'stop')
 	const moveToPosMutation = createResourceMutation(client, 'moveToPosition')
 
@@ -48,13 +46,13 @@
 		moveToJointPosMutation.mutate([jointPositionsList], {})
 	}
 
-	const quickMoveToJointPositions = (jointPositionsList: number[]) => {
-		quickMoveToJointPosMutation.mutate([jointPositionsList], {})
-	}
-
 	const moveToPosition = (position: Pose) => {
 		moveToPosMutation.mutate([position], {})
 	}
+
+	const jointLimitsDegrees = $derived(
+		kinematicsQuery.data ? getJointPositionLimits(kinematicsQuery.data as KinematicsJSON) : []
+	)
 </script>
 
 <ConnectionStatus {partID}>
@@ -62,10 +60,11 @@
 		<div class="flex flex-col gap-4 lg:flex-row lg:gap-0 lg:divide-x">
 			<!-- Main control sections -->
 			<div
-				class="flex flex-col gap-4 lg:grid lg:grow lg:grid-cols-2 lg:gap-0 lg:divide-x xl:grid-cols-4"
+				class="flex flex-col gap-4 lg:grid lg:grow lg:grid-cols-2 lg:gap-0 lg:divide-x xl:grid-cols-3"
 			>
 				<ApiSection
 					title="GetJointPositions"
+					api="rdk:component:arm"
 					bottomText="Updates automatically"
 				>
 					<Query query={jointPositionsQuery}>
@@ -74,19 +73,26 @@
 						{/if}
 					</Query>
 				</ApiSection>
-				<ApiSection title="MoveToJointPositions">
-					<Queries queries={[jointPositionsQuery, kinematicsQuery]}>
-						{#if jointPositionsQuery.data && kinematicsQuery.data}
+				<ApiSection
+					title="MoveToJointPositions"
+					api="rdk:component:arm"
+				>
+					<Query query={jointPositionsQuery}>
+						{#if jointPositionsQuery.data}
 							<MoveToJointPositions
 								positions={jointPositionsQuery.data.values}
 								{moveToJointPositions}
 								lastError={moveToJointPosMutation.error}
-								jointLimitsDegrees={getJointPositionLimits(kinematicsQuery.data as KinematicsJSON)}
+								{jointLimitsDegrees}
+								isMoving={isMovingQuery.data ?? false}
 							/>
 						{/if}
-					</Queries>
+					</Query>
 				</ApiSection>
-				<ApiSection title="MoveToPosition">
+				<ApiSection
+					title="MoveToPosition"
+					api="rdk:component:arm"
+				>
 					<Query query={endPositionQuery}>
 						{#if endPositionQuery.data}
 							<MoveToPosition
@@ -97,27 +103,16 @@
 						{/if}
 					</Query>
 				</ApiSection>
-				<ApiSection
-					title="Quick move"
-					bottomText="Press a button to execute"
-				>
-					<Query query={jointPositionsQuery}>
-						{#if jointPositionsQuery.data}
-							<QuickMove
-								positions={jointPositionsQuery.data.values}
-								moveToJointPositions={quickMoveToJointPositions}
-								lastError={quickMoveToJointPosMutation.error}
-							/>
-						{/if}
-					</Query>
-				</ApiSection>
 			</div>
 
 			<!-- Control actions sidebar -->
 			<div
 				class="flex flex-row gap-4 lg:ml-auto lg:w-full lg:max-w-40 lg:flex-col lg:gap-0 lg:divide-y"
 			>
-				<ApiSection title="Stop">
+				<ApiSection
+					title="Stop"
+					api="rdk:component:arm"
+				>
 					<StopButton
 						error={stopMutation.error}
 						onStop={() => {
@@ -127,6 +122,7 @@
 				</ApiSection>
 				<IsMoving
 					client={ArmClient}
+					api="rdk:component:arm"
 					{partID}
 					{resourceName}
 				/>

package/dist/components/widgets/arm/get-joint-positions-widget.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { ArmClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import GetJointPositions from './get-joint-positions.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		ArmClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getJointPositions', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetJointPositions"
+	bottomText="Updates automatically"
+	class="grow"
+>
+	<Query {query}>
+		{#if query.data}
+			<GetJointPositions positions={query.data.values} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/arm/get-joint-positions-widget.svelte.d.ts

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

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

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

package/dist/components/widgets/arm/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/arm/joint-position-editor.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { Button, Icon, Tooltip } from '@viamrobotics/prime-core'
+
+	import Table from '../../table.svelte'
+
+	import { type JointLimit } from './joint-position-limits'
+	import JointPositionSlider from './joint-position-slider.svelte'
+
+	interface Props {
+		desiredPositions: number[]
+		positions: number[]
+		jointLimitsDegrees: JointLimit[]
+		useRadians: boolean
+		moveToJointPositions: (jointPositions: number[]) => void
+	}
+
+	let {
+		desiredPositions = $bindable(),
+		positions,
+		jointLimitsDegrees,
+		useRadians,
+		moveToJointPositions,
+	}: Props = $props()
+
+	const getSliderMin = (index: number): number => jointLimitsDegrees[index]?.minDegrees ?? -180
+	const getSliderMax = (index: number): number => jointLimitsDegrees[index]?.maxDegrees ?? 180
+
+	const execute = () => {
+		moveToJointPositions([...desiredPositions])
+	}
+
+	const resetToZero = () => {
+		desiredPositions = positions.map(() => 0)
+	}
+
+	const resetToCurrent = () => {
+		desiredPositions = [...positions]
+	}
+</script>
+
+<Table>
+	<thead>
+		<tr>
+			<th>Joint</th>
+			<th>Position ({useRadians ? 'radians' : 'degrees'})</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each [...desiredPositions.keys()] as index (index)}
+			<tr>
+				<th scope="row">{index}</th>
+				<th>
+					<JointPositionSlider
+						bind:value={desiredPositions[index]}
+						minDegrees={getSliderMin(index)}
+						maxDegrees={getSliderMax(index)}
+						{useRadians}
+					/>
+				</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"
+			/>
+			<span slot="description">Will update the slider values but will not execute</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"
+	icon="play-circle-outline"
+	variant="dark"
+	onclick={execute}
+>
+	Execute
+</Button>

package/dist/components/widgets/arm/joint-position-editor.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type JointLimit } from './joint-position-limits';
+interface Props {
+    desiredPositions: number[];
+    positions: number[];
+    jointLimitsDegrees: JointLimit[];
+    useRadians: boolean;
+    moveToJointPositions: (jointPositions: number[]) => void;
+}
+declare const JointPositionEditor: import("svelte").Component<Props, {}, "desiredPositions">;
+type JointPositionEditor = ReturnType<typeof JointPositionEditor>;
+export default JointPositionEditor;

package/dist/components/widgets/arm/joint-position-quick-move.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { Button, Icon, Tooltip } from '@viamrobotics/prime-core'
+
+	import Table from '../../table.svelte'
+	import { degreesToRadians, formatNumeric } from '../../../format'
+
+	const INCREMENT_DEGREES = 5
+
+	interface Props {
+		positions: number[]
+		moveToJointPositions: (jointPositions: number[]) => void
+		useRadians: boolean
+		isMoving: boolean
+	}
+
+	const { positions, moveToJointPositions, useRadians, isMoving }: Props = $props()
+
+	const toDisplayAngle = (degrees: number) => (useRadians ? degreesToRadians(degrees) : degrees)
+
+	const currentDisplayPositions = $derived(positions.map((degrees) => toDisplayAngle(degrees)))
+
+	const quickMove = (index: number, increment: number) => {
+		if (isMoving) {
+			return
+		}
+		const clonedPositions = positions.map((position, positionIndex) =>
+			positionIndex === index ? position + increment : position
+		)
+		moveToJointPositions(clonedPositions)
+	}
+</script>
+
+<Tooltip>
+	<span class="flex items-center gap-1 text-xs text-amber-600">
+		<Icon
+			name="alert"
+			size="sm"
+			cx="text-amber-600"
+		/>
+		Quick move executes immediately
+	</span>
+	<span slot="description">
+		Each ±5° button sends a move command as soon as it is pressed. Buttons are disabled while the
+		arm is moving.
+	</span>
+</Tooltip>
+
+<Table>
+	<thead>
+		<tr>
+			<th>Joint</th>
+			<th>Move (degrees)</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each positions as position, index (index)}
+			{@const currentValue = currentDisplayPositions[index] ?? position}
+			{@const unit = useRadians ? ' rad' : '°'}
+			<tr>
+				<th scope="row">{index}</th>
+				<th>
+					<div class="flex h-full max-h-6.5 w-full items-center justify-center gap-1.5">
+						<Button
+							aria-label="Decrease joint {index} by 5 degrees"
+							disabled={isMoving}
+							onclick={() => quickMove(index, -INCREMENT_DEGREES)}
+						>
+							−5°
+						</Button>
+						<span class="min-w-16 grow text-center text-xs text-gray-700 tabular-nums">
+							{formatNumeric(currentValue)}{unit}
+						</span>
+						<Button
+							aria-label="Increase joint {index} by 5 degrees"
+							disabled={isMoving}
+							onclick={() => quickMove(index, INCREMENT_DEGREES)}
+						>
+							+5°
+						</Button>
+					</div>
+				</th>
+			</tr>
+		{/each}
+	</tbody>
+</Table>

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

@@ -0,0 +1,9 @@
+interface Props {
+    positions: number[];
+    moveToJointPositions: (jointPositions: number[]) => void;
+    useRadians: boolean;
+    isMoving: boolean;
+}
+declare const JointPositionQuickMove: import("svelte").Component<Props, {}, "">;
+type JointPositionQuickMove = ReturnType<typeof JointPositionQuickMove>;
+export default JointPositionQuickMove;

package/dist/components/widgets/arm/joint-position-slider.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Slider, ThemeUtils } from 'svelte-tweakpane-ui'
+
+	import { degreesToRadians, formatNumeric, radiansToDegrees } from '../../../format'
+
+	interface Props {
+		value: number
+		minDegrees: number
+		maxDegrees: number
+		useRadians: boolean
+	}
+
+	let { value = $bindable(), minDegrees, maxDegrees, useRadians }: Props = $props()
+
+	const min = $derived(useRadians ? degreesToRadians(minDegrees) : minDegrees)
+	const max = $derived(useRadians ? degreesToRadians(maxDegrees) : maxDegrees)
+	const step = $derived(useRadians ? 0.01 : 0.1)
+
+	const sliderFormat = (v: number) => formatNumeric(v, useRadians ? 3 : 1)
+	const toDisplay = (degrees: number) => (useRadians ? degreesToRadians(degrees) : degrees)
+	const toDegrees = (display: number) => (useRadians ? radiansToDegrees(display) : display)
+</script>
+
+<div class="joint-slider min-w-0">
+	<Slider
+		value={toDisplay(value)}
+		on:change={(event) => {
+			value = toDegrees(event.detail.value)
+		}}
+		{min}
+		{max}
+		{step}
+		format={sliderFormat}
+		theme={ThemeUtils.presets.light}
+	/>
+</div>

package/dist/components/widgets/arm/joint-position-slider.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    value: number;
+    minDegrees: number;
+    maxDegrees: number;
+    useRadians: boolean;
+}
+declare const JointPositionSlider: import("svelte").Component<Props, {}, "value">;
+type JointPositionSlider = ReturnType<typeof JointPositionSlider>;
+export default JointPositionSlider;

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

@@ -6,7 +6,7 @@
 		createResourceQuery,
 	} from '@viamrobotics/svelte-sdk'
 
-	import Queries from '../../queries.svelte'
+	import Query from '../../query.svelte'
 
 	import { getJointPositionLimits, type KinematicsJSON } from './joint-position-limits'
 	import MoveToJointPositions from './move-to-joint-positions.svelte'
@@ -36,15 +36,19 @@
 	const moveToJointPositions = (jointPositionsList: number[]) => {
 		moveToJointPosMutation.mutate([jointPositionsList], {})
 	}
+
+	const jointLimitsDegrees = $derived(
+		kinematicsQuery.data ? getJointPositionLimits(kinematicsQuery.data as KinematicsJSON) : []
+	)
 </script>
 
-<Queries queries={[jointPositionsQuery, kinematicsQuery]}>
-	{#if jointPositionsQuery.data && kinematicsQuery.data}
+<Query query={jointPositionsQuery}>
+	{#if jointPositionsQuery.data}
 		<MoveToJointPositions
 			positions={jointPositionsQuery.data.values}
 			{moveToJointPositions}
 			lastError={moveToJointPosMutation.error}
-			jointLimitsDegrees={getJointPositionLimits(kinematicsQuery.data as KinematicsJSON)}
+			{jointLimitsDegrees}
 		/>
 	{/if}
-</Queries>
+</Query>