@viamrobotics/test-widgets 0.0.1

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
+	import CopyButton from '../../copy-button.svelte'
+	import Table from '../../table.svelte'
+	import { degreesToRadians, formatNumeric } from '../../../format'
+
+	interface Props {
+		positions: number[]
+	}
+
+	const { positions }: Props = $props()
+
+	let useRadians = $state(false)
+
+	const displayPositions = $derived(
+		positions.map((pos) => (useRadians ? degreesToRadians(pos) : pos))
+	)
+
+	const copyData = $derived(`[${displayPositions.join(', ')}]`)
+</script>
+
+<div class="flex min-w-0 flex-col gap-4">
+	<!-- Controls Header -->
+	<div class="flex items-center justify-between">
+		<span class="text-sm">Current Positions</span>
+		<div class="flex gap-1">
+			<AngleUnitToggle
+				{useRadians}
+				onToggle={() => {
+					useRadians = !useRadians
+				}}
+			/>
+			<CopyButton data={copyData} />
+		</div>
+	</div>
+
+	<Table>
+		<thead>
+			<tr>
+				<th> Joint </th>
+				<th>Position ({useRadians ? 'radians' : 'degrees'})</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each displayPositions as pos, index (pos)}
+				<tr>
+					<th> {index} </th>
+					<th> {formatNumeric(pos)} </th>
+				</tr>
+			{/each}
+		</tbody>
+	</Table>
+</div>

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

@@ -0,0 +1,6 @@
+interface Props {
+    positions: number[];
+}
+declare const GetJointPositions: import("svelte").Component<Props, {}, "">;
+type GetJointPositions = ReturnType<typeof GetJointPositions>;
+export default GetJointPositions;

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { ArmClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+
+	import Query from '../../query.svelte'
+
+	import MoveToJointPositions from './move-to-joint-positions.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		ArmClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const jointPositionsQuery = createResourceQuery(client, 'getJointPositions', {
+		refetchInterval: 500,
+	})
+
+	const moveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
+
+	const moveToJointPositions = (jointPositionsList: number[]) => {
+		moveToJointPosMutation.mutate([jointPositionsList], {})
+	}
+</script>
+
+<Query query={jointPositionsQuery}>
+	{#if jointPositionsQuery.data}
+		<MoveToJointPositions
+			positions={jointPositionsQuery.data.values}
+			{moveToJointPositions}
+			lastError={moveToJointPosMutation.error}
+		/>
+	{/if}
+</Query>

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

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

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

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { Button, Icon, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
+	import CopyButton from '../../copy-button.svelte'
+	import ErrorDisplay from '../../error.svelte'
+	import Table from '../../table.svelte'
+	import { numberValueFromEvent } from '../../../event-handlers'
+	import { degreesToRadians, formatNumeric, radiansToDegrees } from '../../../format'
+
+	interface Props {
+		positions: number[]
+		moveToJointPositions: (jointPositions: number[]) => void
+		lastError: Error | null
+	}
+
+	const { positions, moveToJointPositions, lastError }: Props = $props()
+
+	let desiredPositions = $state([...positions])
+	let useRadians = $state(false)
+
+	const resetToZero = () => {
+		desiredPositions = [...desiredPositions].fill(0)
+	}
+
+	const resetToCurrent = () => {
+		desiredPositions = [...positions]
+	}
+
+	const displayPositions = $derived(
+		desiredPositions.map((pos) => (useRadians ? degreesToRadians(pos) : pos))
+	)
+
+	const copyData = $derived(`[${displayPositions.join(', ')}]`)
+
+	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
+	}
+</script>
+
+<div class="flex min-w-0 flex-col gap-4">
+	<!-- Controls Header -->
+	<div class="flex items-center justify-between">
+		<span class="text-sm">Joint Positions</span>
+		<div class="flex gap-1">
+			<AngleUnitToggle
+				{useRadians}
+				onToggle={() => {
+					useRadians = !useRadians
+				}}
+			/>
+			<CopyButton data={copyData} />
+		</div>
+	</div>
+
+	<Table>
+		<thead>
+			<tr>
+				<th> Joint </th>
+				<th>Move ({useRadians ? 'radians' : 'degrees'})</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each { length: positions.length }, index}
+				{@const value = Number.parseFloat(formatNumeric(displayPositions[index]))}
+				<tr>
+					<th> {index} </th>
+					<th>
+						<NumericInput
+							cx="max-w-[76px]"
+							{value}
+							on:change={(event) => {
+								const inputValue = numberValueFromEvent(event) ?? 0
+								handleJointInputChange(index, inputValue)
+							}}
+						/>
+					</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 "Move to" input 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={() => moveToJointPositions(desiredPositions)}
+	>
+		Execute
+	</Button>
+	<ErrorDisplay {lastError} />
+</div>

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

@@ -0,0 +1,8 @@
+interface Props {
+    positions: number[];
+    moveToJointPositions: (jointPositions: number[]) => void;
+    lastError: Error | null;
+}
+declare const MoveToJointPositions: import("svelte").Component<Props, {}, "">;
+type MoveToJointPositions = ReturnType<typeof MoveToJointPositions>;
+export default MoveToJointPositions;

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

@@ -0,0 +1,43 @@
+<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'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	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>

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

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

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

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { Pose } from '@viamrobotics/sdk'
+
+	import { Button, Icon, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
+	import CopyButton from '../../copy-button.svelte'
+	import ErrorDisplay from '../../error.svelte'
+	import Table from '../../table.svelte'
+	import { numberValueFromEvent } from '../../../event-handlers'
+	import { degreesToRadians, formatNumeric, radiansToDegrees } from '../../../format'
+
+	interface Props {
+		endPosition: Pose
+		moveToPosition: (position: Pose) => void
+		lastError: Error | null
+	}
+
+	const { endPosition, moveToPosition, lastError }: Props = $props()
+
+	let desiredPosition = $state({ ...endPosition })
+	let useRadians = $state(false)
+
+	const resetToZero = () => {
+		desiredPosition = {
+			x: 0,
+			y: 0,
+			z: 0,
+			oX: 0,
+			oY: 0,
+			oZ: 0,
+			theta: 0,
+		}
+	}
+
+	const resetToCurrent = () => {
+		desiredPosition = { ...endPosition }
+	}
+
+	const displayPosition = $derived({
+		x: desiredPosition.x,
+		y: desiredPosition.y,
+		z: desiredPosition.z,
+		oX: desiredPosition.oX,
+		oY: desiredPosition.oY,
+		oZ: desiredPosition.oZ,
+		theta: useRadians ? degreesToRadians(desiredPosition.theta) : desiredPosition.theta,
+	})
+
+	const copyData = $derived(
+		`{x: ${displayPosition.x}, y: ${displayPosition.y}, z: ${displayPosition.z}, o_x: ${displayPosition.oX}, o_y: ${displayPosition.oY}, o_z: ${displayPosition.oZ}, theta: ${displayPosition.theta}}`
+	)
+
+	const handleAngleInputChange = (key: keyof Pose, inputValue: number) => {
+		if (key === 'theta') {
+			desiredPosition[key] = useRadians ? radiansToDegrees(inputValue) : inputValue
+		} else {
+			desiredPosition[key] = inputValue
+		}
+	}
+
+	const positionLabels: Record<keyof Pose, string> = {
+		x: 'X',
+		y: 'Y',
+		z: 'Z',
+		oX: 'OX',
+		oY: 'OY',
+		oZ: 'OZ',
+		theta: 'θ',
+	} as const
+	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>
+		<div class="flex gap-1">
+			<AngleUnitToggle
+				{useRadians}
+				onToggle={() => {
+					useRadians = !useRadians
+				}}
+			/>
+			<CopyButton data={copyData} />
+		</div>
+	</div>
+
+	<Table>
+		<thead>
+			<tr>
+				<th>Pose</th>
+				<th>Value ({useRadians ? 'radians' : 'degrees'})</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each positionLabelsList as labelList (labelList)}
+				{@const [key, label] = labelList}
+				{@const value = Number.parseFloat(formatNumeric(displayPosition[key]))}
+				<tr>
+					<th>{label}</th>
+					<th>
+						<NumericInput
+							cx="max-w-[76px]"
+							{value}
+							on:change={(event) => {
+								const inputValue = numberValueFromEvent(event) ?? 0
+								handleAngleInputChange(key, inputValue)
+							}}
+						/>
+					</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 pose 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={() => moveToPosition(desiredPosition)}
+	>
+		Execute
+	</Button>
+	<ErrorDisplay {lastError} />
+</div>

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

@@ -0,0 +1,9 @@
+import type { Pose } from '@viamrobotics/sdk';
+interface Props {
+    endPosition: Pose;
+    moveToPosition: (position: Pose) => void;
+    lastError: Error | null;
+}
+declare const MoveToPosition: import("svelte").Component<Props, {}, "">;
+type MoveToPosition = ReturnType<typeof MoveToPosition>;
+export default MoveToPosition;

package/dist/components/widgets/arm/quick-move-widget.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { ArmClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+
+	import Query from '../../query.svelte'
+
+	import QuickMove from './quick-move.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		ArmClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const jointPositionsQuery = createResourceQuery(client, 'getJointPositions', {
+		refetchInterval: 500,
+	})
+
+	const quickMoveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
+
+	const quickMoveToJointPositions = (jointPositionsList: number[]) => {
+		quickMoveToJointPosMutation.mutate([jointPositionsList], {})
+	}
+</script>
+
+<Query query={jointPositionsQuery}>
+	{#if jointPositionsQuery.data}
+		<QuickMove
+			positions={jointPositionsQuery.data.values}
+			moveToJointPositions={quickMoveToJointPositions}
+			lastError={quickMoveToJointPosMutation.error}
+		/>
+	{/if}
+</Query>

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

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

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Button } from '@viamrobotics/prime-core'
+
+	import ErrorDisplay from '../../error.svelte'
+	import Table from '../../table.svelte'
+
+	interface Props {
+		positions: number[]
+		moveToJointPositions: (jointPositions: number[]) => void
+		lastError: Error | null
+	}
+
+	const { positions, moveToJointPositions, lastError }: Props = $props()
+
+	const quickMove = (index: number, increment: number) => {
+		const clonedPositions = positions.map((position, positionIndex) =>
+			positionIndex === index ? position + increment : position
+		)
+		moveToJointPositions(clonedPositions)
+	}
+</script>
+
+<Table>
+	<thead>
+		<tr>
+			<th> Joint </th>
+			<th> Move (degrees) </th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each positions, index}
+			<tr>
+				<th> {index} </th>
+				<th>
+					<div class="flex h-full max-h-6.5 gap-1.5">
+						<Button
+							aria-label="minus-five-degrees"
+							class="px-2.5!"
+							onclick={() => quickMove(index, -5)}
+						>
+							<span class="flex gap-1 text-xs">
+								<span class="text-subtle-2">-</span>
+								<span>5</span>
+							</span>
+						</Button>
+						<Button
+							aria-label="plus-five-degrees"
+							class="px-2.5!"
+							onclick={() => quickMove(index, 5)}
+						>
+							<span class="flex gap-1 text-xs">
+								<span class="text-subtle-2">+</span>
+								<span>5</span>
+							</span>
+						</Button>
+					</div>
+				</th>
+			</tr>
+		{/each}
+	</tbody>
+</Table>
+<ErrorDisplay {lastError} />

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

@@ -0,0 +1,8 @@
+interface Props {
+    positions: number[];
+    moveToJointPositions: (jointPositions: number[]) => void;
+    lastError: Error | null;
+}
+declare const QuickMove: import("svelte").Component<Props, {}, "">;
+type QuickMove = ReturnType<typeof QuickMove>;
+export default QuickMove;