@viamrobotics/test-widgets 0.0.1

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { GantryClient } 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(
+		GantryClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const positionQuery = createResourceQuery(client, 'getPosition', {
+		refetchInterval: 500,
+	})
+	const moveMutation = createResourceMutation(client, 'moveToPosition')
+</script>
+
+<Query query={positionQuery}>
+	{@const positions = positionQuery.data}
+	{#if positions !== undefined}
+		<MoveToPosition
+			{positions}
+			lastError={moveMutation.error}
+			moveTo={(newPos: number[], speeds: number[]) => {
+				moveMutation.mutate([newPos, speeds], {})
+			}}
+		/>
+	{/if}
+</Query>

package/dist/components/widgets/gantry/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/gantry/move-to-position.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { Button, Icon, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+	import { isEqual, zip } from 'lodash-es'
+
+	import ErrorDisplay from '../../error.svelte'
+	import Table from '../../table.svelte'
+
+	import { matchArrayLength } from './match-array-length'
+
+	interface Props {
+		positions: number[]
+		moveTo: (newPos: number[], speeds: number[]) => void
+		lastError: Error | null
+	}
+
+	const { positions, moveTo, lastError }: Props = $props()
+
+	let desiredSpeeds: number[] = $state([])
+
+	$effect(() => {
+		const nextDesiredSpeeds = matchArrayLength(desiredSpeeds, positions, 50)
+
+		if (!isEqual(nextDesiredSpeeds, desiredSpeeds)) {
+			desiredSpeeds = nextDesiredSpeeds
+		}
+	})
+
+	let desiredPositions: number[] = $state([])
+
+	$effect(() => {
+		const nextDesiredPositions = matchArrayLength(desiredPositions, positions, 0)
+
+		if (!isEqual(nextDesiredPositions, desiredPositions)) {
+			desiredPositions = nextDesiredPositions
+		}
+	})
+
+	const onChangePos = (index: number, event: Event) => {
+		const target = event.target as HTMLInputElement
+		desiredPositions[index] = target.valueAsNumber
+	}
+	const onChangeSpeed = (index: number, event: Event) => {
+		const target = event.target as HTMLInputElement
+		desiredSpeeds[index] = target.valueAsNumber
+	}
+	const resetToZero = () => {
+		desiredSpeeds = matchArrayLength([], positions, 50)
+		desiredPositions = matchArrayLength([], positions, 0)
+	}
+	const resetToCurrent = () => {
+		desiredPositions = positions
+	}
+
+	const id = $props.id()
+	const moveToHeadingID = `${id}-move-to-heading`
+	const speedHeadingID = `${id}-speed-heading`
+</script>
+
+<div class="flex flex-col gap-4">
+	<Table>
+		<thead>
+			<tr>
+				<th> Axis </th>
+				<th id={moveToHeadingID}> Move to <abbr>(mm)</abbr> </th>
+				<th id={speedHeadingID}> Speed <abbr>(mm/s)</abbr> </th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each zip(desiredPositions, desiredSpeeds) as [position, speed], index (index)}
+				<tr>
+					<th> {index} </th>
+					<th>
+						<NumericInput
+							cx="max-w-[80px]"
+							step={0.01}
+							aria-labelledby={moveToHeadingID}
+							value={position}
+							on:change={(event) => onChangePos(index, event)}
+						/>
+					</th>
+					<th>
+						<NumericInput
+							cx="max-w-[80px]"
+							aria-labelledby={speedHeadingID}
+							step={0.1}
+							value={speed}
+							on:change={(event) => onChangeSpeed(index, event)}
+						/>
+					</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-row gap-2">
+			<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={() => moveTo(desiredPositions, desiredSpeeds)}
+	>
+		Execute
+	</Button>
+	<ErrorDisplay {lastError} />
+</div>

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

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

package/dist/components/widgets/gantry/position-and-lengths.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Table from '../../table.svelte'
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		positions: number[]
+		lengths: number[]
+	}
+
+	const { positions, lengths }: Props = $props()
+
+	const maxLength = $derived(Math.max(positions.length, lengths.length))
+</script>
+
+<Table>
+	<thead>
+		<tr>
+			<th> Axis </th>
+			<th> Position <abbr>(mm)</abbr> </th>
+			<th> Length <abbr>(mm)</abbr> </th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each { length: maxLength }, index (index)}
+			<tr>
+				<th> {index} </th>
+				<th> {formatNumeric(positions[index])} </th>
+				<th> {formatNumeric(lengths[index])} </th>
+			</tr>
+		{/each}
+	</tbody>
+</Table>

package/dist/components/widgets/gantry/position-and-lengths.svelte.d.ts

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

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { GantryClient } 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(
+		GantryClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const positionQuery = createResourceQuery(client, 'getPosition', {
+		refetchInterval: 500,
+	})
+
+	const quickMoveMutation = createResourceMutation(client, 'moveToPosition')
+</script>
+
+<Query
+	query={positionQuery}
+	contentCx="h-6"
+>
+	{@const positions = positionQuery.data}
+	{#if positions !== undefined}
+		<QuickMove
+			{positions}
+			lastError={quickMoveMutation.error}
+			moveTo={(newPos: number[], speeds: number[]) => {
+				quickMoveMutation.mutate([newPos, speeds], {})
+			}}
+		/>
+	{/if}
+</Query>

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

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

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

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

package/dist/components/widgets/generic/generic.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ResourceName } from '@viamrobotics/sdk'
+
+	import DoCommand from '../do-command/do-command.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+		isComponent: boolean
+	}
+
+	const { partID, resourceName, isComponent }: Props = $props()
+
+	const genericResourceName = $derived<ResourceName>({
+		namespace: 'rdk',
+		type: isComponent ? 'component' : 'service',
+		subtype: 'generic',
+		name: resourceName,
+	})
+</script>
+
+<div class="flex flex-col py-2 pl-4">
+	<h3 class="font-semibold">DoCommand</h3>
+</div>
+
+{#key genericResourceName}
+	<DoCommand
+		{partID}
+		resource={genericResourceName}
+	/>
+{/key}

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

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

package/dist/components/widgets/gripper/closed-gripper-svg.svelte

@@ -0,0 +1,13 @@
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	class="self-center"
+>
+	<path
+		d="M7.3841 2.66604L4.28414 7.31597L7.41156 10.4434H8.58314L11.7106 7.31597L8.6106 2.66604L10.2747 1.55664L13.7385 6.75227C14.0557 7.22822 13.993 7.86196 13.5885 8.26644L9.99735 11.8576V13.9434C9.99735 14.2195 9.77349 14.4434 9.49735 14.4434H6.49735C6.22121 14.4434 5.99735 14.2195 5.99735 13.9434V11.8576L2.40618 8.26644C2.0017 7.86196 1.93895 7.22822 2.25625 6.75227L5.72 1.55664L7.3841 2.66604Z"
+		fill="#9C9CA4"
+	/>
+</svg>

package/dist/components/widgets/gripper/closed-gripper-svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ClosedGripperSvg;
+type ClosedGripperSvg = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ClosedGripperSvg: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/widgets/gripper/grab.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Button } from '@viamrobotics/prime-core'
+	import { GripperClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import ErrorDisplay from '../../error.svelte'
+
+	import ClosedGripperSvg from './closed-gripper-svg.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		GripperClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const grabMutation = createResourceMutation(client, 'grab')
+</script>
+
+<Button
+	onclick={() => {
+		grabMutation.mutate([], {})
+	}}
+	class="w-20 p-3 py-3"
+>
+	<div class="flex flex-col gap-2">
+		<ClosedGripperSvg />
+		<p class="font-roboto-mono text-xs uppercase">grab</p>
+	</div>
+</Button>
+<ErrorDisplay lastError={grabMutation.error} />

package/dist/components/widgets/gripper/grab.svelte.d.ts

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

package/dist/components/widgets/gripper/gripper.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { GripperClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import IsMoving from '../../is-moving.svelte'
+	import StopButton from '../../stop-button.svelte'
+
+	import Grab from './grab.svelte'
+	import Open from './open.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		GripperClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const stopMutation = createResourceMutation(client, 'stop')
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex flex-row divide-x">
+			<span class="flex flex-row gap-4">
+				<ApiSection
+					title="Open"
+					class="gap-3 pr-0"
+				>
+					<Open
+						{partID}
+						{resourceName}
+					/>
+				</ApiSection>
+				<ApiSection
+					title="Grab"
+					class="gap-3 pl-0"
+				>
+					<Grab
+						{partID}
+						{resourceName}
+					/>
+				</ApiSection>
+			</span>
+			<div class="ml-auto flex w-full max-w-40 flex-col divide-y">
+				<ApiSection title="Stop">
+					<StopButton
+						error={stopMutation.error}
+						onStop={() => {
+							stopMutation.mutate([])
+						}}
+					/>
+				</ApiSection>
+				<IsMoving
+					client={GripperClient}
+					{partID}
+					{resourceName}
+				/>
+			</div>
+		</div>
+	{/snippet}
+</ConnectionStatus>

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

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

package/dist/components/widgets/gripper/open-gripper-svg.svelte

@@ -0,0 +1,13 @@
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	class="self-center"
+>
+	<path
+		d="M4 1.5V7.08579L7.41421 10.5H8.58579L12 7.08579V1.5H14V7.41716C14 7.73542 13.8736 8.04064 13.6485 8.26569L10 11.9142V14C10 14.2761 9.77614 14.5 9.5 14.5H6.5C6.22386 14.5 6 14.2761 6 14V11.9142L2.35147 8.26569C2.12643 8.04064 2 7.73542 2 7.41716V1.5H4Z"
+		fill="#9C9CA4"
+	/>
+</svg>

package/dist/components/widgets/gripper/open-gripper-svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export default OpenGripperSvg;
+type OpenGripperSvg = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const OpenGripperSvg: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/widgets/gripper/open.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Button } from '@viamrobotics/prime-core'
+	import { GripperClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import ErrorDisplay from '../../error.svelte'
+
+	import OpenGripperSvg from './open-gripper-svg.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		GripperClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const openMutation = createResourceMutation(client, 'open')
+</script>
+
+<Button
+	onclick={() => {
+		openMutation.mutate([], {})
+	}}
+	class="w-20 p-3 py-3"
+>
+	<div class="flex flex-col gap-2">
+		<OpenGripperSvg />
+		<p class="font-roboto-mono text-xs uppercase">open</p>
+	</div>
+</Button>
+<ErrorDisplay lastError={openMutation.error} />

package/dist/components/widgets/gripper/open.svelte.d.ts

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