@viamrobotics/test-widgets 0.0.1

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { ServoClient } 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(
+		ServoClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const positionQuery = createResourceQuery(client, 'getPosition', {
+		refetchInterval: 500,
+	})
+	const quickMoveMutation = createResourceMutation(client, 'move')
+
+	const quickMoveTo = (angle: number) => {
+		quickMoveMutation.mutate([angle], {})
+	}
+</script>
+
+<Query query={positionQuery}>
+	{#if positionQuery.data !== undefined}
+		<QuickMove
+			currentPosition={positionQuery.data}
+			moveTo={quickMoveTo}
+			lastError={quickMoveMutation.error}
+		/>
+	{/if}
+</Query>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Button } from '@viamrobotics/prime-core'
+
+	import ErrorDisplay from '../../error.svelte'
+
+	interface Props {
+		currentPosition: number
+		moveTo: (angle: number) => void
+		lastError: Error | null
+	}
+
+	const { currentPosition, moveTo, lastError }: Props = $props()
+</script>
+
+<div class="flex flex-row gap-4 text-xs">
+	<Button
+		onclick={() => moveTo(currentPosition - 5)}
+		aria-label="minus-five-degrees"
+		icon="minus"
+		disabled={currentPosition - 5 < 0}
+	>
+		5
+		<abbr class="text-subtle-2">º</abbr>
+	</Button>
+	<Button
+		onclick={() => moveTo(currentPosition + 5)}
+		aria-label="plus-five-degrees"
+		icon="plus"
+	>
+		5
+		<abbr class="text-subtle-2">º</abbr>
+	</Button>
+</div>
+<ErrorDisplay {lastError} />

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

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

package/dist/components/widgets/servo/servo.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { ServoClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import IsMoving from '../../is-moving.svelte'
+	import Query from '../../query.svelte'
+	import StopButton from '../../stop-button.svelte'
+	import { formatNumeric } from '../../../format'
+
+	import Move from './move.svelte'
+	import QuickMove from './quick-move.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		ServoClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const positionQuery = createResourceQuery(client, 'getPosition', {
+		refetchInterval: 500,
+	})
+
+	const moveMutation = createResourceMutation(client, 'move')
+	const quickMoveMutation = createResourceMutation(client, 'move')
+	const stopMutation = createResourceMutation(client, 'stop')
+
+	const moveTo = (angle: number) => {
+		moveMutation.mutate([angle], {})
+	}
+
+	const quickMoveTo = (angle: number) => {
+		quickMoveMutation.mutate([angle], {})
+	}
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex flex-row divide-x">
+			<div class="grid grow grid-cols-3 divide-x">
+				<ApiSection
+					title="GetPosition"
+					bottomText="Updates automatically"
+				>
+					<Query query={positionQuery}>
+						{#if positionQuery.data !== undefined}
+							<!-- span required to get unit closer to position reading -->
+							<span class="flex flex-row gap-1">
+								<span class="font-roboto-mono font-normal">{formatNumeric(positionQuery.data)}</span
+								>
+								<abbr class="text-subtle-2">º</abbr>
+							</span>
+						{/if}
+					</Query>
+				</ApiSection>
+				<ApiSection title="Move">
+					<Query query={positionQuery}>
+						{#if positionQuery.data !== undefined}
+							<Move
+								currentPosition={positionQuery.data}
+								{moveTo}
+								lastError={moveMutation.error}
+							/>
+						{/if}
+					</Query>
+				</ApiSection>
+				<ApiSection
+					title="Quick move"
+					bottomText="Press a button to execute"
+				>
+					<Query query={positionQuery}>
+						{#if positionQuery.data !== undefined}
+							<QuickMove
+								currentPosition={positionQuery.data}
+								moveTo={quickMoveTo}
+								lastError={quickMoveMutation.error}
+							/>
+						{/if}
+					</Query>
+				</ApiSection>
+			</div>
+			<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={ServoClient}
+					{partID}
+					{resourceName}
+				/>
+			</div>
+		</div>
+	{/snippet}
+</ConnectionStatus>

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

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

package/dist/components/widgets/slam/__fixtures__/position.d.ts

@@ -0,0 +1,3 @@
+import { SlamPosition } from '@viamrobotics/sdk';
+export declare const emptyPosition: SlamPosition;
+export declare const position: SlamPosition;

package/dist/components/widgets/slam/__fixtures__/position.js

@@ -0,0 +1,13 @@
+import { SlamPosition } from '@viamrobotics/sdk';
+export const emptyPosition = new SlamPosition();
+export const position = new SlamPosition({
+    pose: {
+        x: 1234,
+        y: 2345,
+        z: 3456,
+        oX: 4,
+        oY: 5,
+        oZ: 6,
+        theta: 7,
+    },
+});

package/dist/components/widgets/slam/move-on-map.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { Button, Label, NumericInput } from '@viamrobotics/prime-core'
+
+	import ApiSection from '../../api-section.svelte'
+	import ErrorDisplay from '../../error.svelte'
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	import type { PosePosition } from './pose'
+
+	interface Props {
+		destination: PosePosition | undefined
+		updateDestination: (_: Partial<PosePosition>) => void
+		moveOnMap: (planDeviationM: number | undefined) => void
+		stopPlan: () => void
+		lastError: Error | null
+	}
+
+	const { destination, updateDestination, moveOnMap, stopPlan, lastError }: Props = $props()
+
+	const destinationID = $props.id()
+
+	let planDeviationM = $state<number>()
+</script>
+
+<ApiSection title="MoveOnMap">
+	<Label>
+		Plan deviation <abbr>(m)</abbr>
+
+		<NumericInput
+			slot="input"
+			placeholder="1"
+			value={planDeviationM}
+			on:change={(event) => {
+				planDeviationM = numberValueFromEvent(event)
+			}}
+		/>
+	</Label>
+	<section
+		class="border-light text-subtle-1 w-fit divide-y border text-xs"
+		aria-labelledby={destinationID}
+	>
+		<h4
+			class="bg-light flex flex-row place-content-center gap-1 px-2 py-1.5"
+			id={destinationID}
+		>
+			End position
+			<abbr class="text-disabled">(m)</abbr>
+		</h4>
+		<div class="flex flex-row gap-2 px-3 py-2.5">
+			<Label>
+				X
+
+				<NumericInput
+					slot="input"
+					cx="text-default"
+					value={destination?.x}
+					on:change={(event) => {
+						updateDestination({
+							x: numberValueFromEvent(event) ?? 0,
+						})
+					}}
+				/>
+			</Label>
+			<Label>
+				Y
+
+				<NumericInput
+					slot="input"
+					cx="text-default"
+					value={destination?.y}
+					on:change={(event) => {
+						updateDestination({
+							y: numberValueFromEvent(event) ?? 0,
+						})
+					}}
+				/>
+			</Label>
+		</div>
+	</section>
+
+	<div>
+		<Button
+			class="mt-auto w-fit"
+			icon="play-circle-outline"
+			variant="dark"
+			disabled={!destination}
+			onclick={() => moveOnMap(planDeviationM)}
+		>
+			Execute
+		</Button>
+		<Button
+			class="mt-auto w-fit"
+			icon="stop-circle-outline"
+			variant="danger"
+			onclick={() => stopPlan()}
+		>
+			Stop
+		</Button>
+	</div>
+	<ErrorDisplay {lastError} />
+</ApiSection>

package/dist/components/widgets/slam/move-on-map.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { PosePosition } from './pose';
+interface Props {
+    destination: PosePosition | undefined;
+    updateDestination: (_: Partial<PosePosition>) => void;
+    moveOnMap: (planDeviationM: number | undefined) => void;
+    stopPlan: () => void;
+    lastError: Error | null;
+}
+declare const MoveOnMap: import("svelte").Component<Props, {}, "">;
+type MoveOnMap = ReturnType<typeof MoveOnMap>;
+export default MoveOnMap;

package/dist/components/widgets/slam/pose.d.ts

@@ -0,0 +1,2 @@
+import type { Pose } from '@viamrobotics/sdk';
+export type PosePosition = Pick<Pose, 'x' | 'y' | 'z'>;

package/dist/components/widgets/slam/pose.js

@@ -0,0 +1 @@
+export {};

package/dist/components/widgets/slam/position.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { SlamPosition } from '@viamrobotics/sdk'
+
+	import { Button, Label } from '@viamrobotics/prime-core'
+
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		position: SlamPosition
+	}
+
+	const { position }: Props = $props()
+
+	// Position is returned in millimeters, but we display meters
+	const pose = $derived(
+		position.pose
+			? {
+					oX: position.pose.oX,
+					oY: position.pose.oY,
+					oZ: position.pose.oZ,
+					theta: position.pose.theta,
+					x: position.pose.x / 1000,
+					y: position.pose.y / 1000,
+					z: position.pose.z / 1000,
+				}
+			: undefined
+	)
+
+	const copyToClipboard = async () => {
+		await globalThis.navigator.clipboard.writeText(JSON.stringify(pose))
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	<Label>
+		Current position <abbr>(m)</abbr>
+
+		<dl
+			slot="input"
+			class="flex flex-row items-center gap-2"
+		>
+			<dt class="text-xs text-gray-500">x</dt>
+			<dd>{formatNumeric(pose?.x, 1)}</dd>
+			<dt class="text-xs text-gray-500">y</dt>
+			<dd>{formatNumeric(pose?.y, 1)}</dd>
+			<dt class="text-xs text-gray-500">z</dt>
+			<dd>{formatNumeric(pose?.z, 1)}</dd>
+		</dl>
+	</Label>
+
+	<Label>
+		Current orientation
+
+		<dl
+			slot="input"
+			class="flex flex-row items-center gap-2"
+		>
+			<dt class="text-xs text-gray-500">x</dt>
+			<dd>{formatNumeric(pose?.oX, 1)}</dd>
+			<dt class="text-xs text-gray-500">y</dt>
+			<dd>{formatNumeric(pose?.oY, 1)}</dd>
+			<dt class="text-xs text-gray-500">z</dt>
+			<dd>{formatNumeric(pose?.oZ, 1)}</dd>
+			<dt class="text-xs text-gray-500">&theta;</dt>
+			<dd>{formatNumeric(pose?.theta, 1)}</dd>
+		</dl>
+	</Label>
+
+	<div>
+		<Button
+			icon="content-copy"
+			onclick={copyToClipboard}
+		>
+			Copy pose to clipboard
+		</Button>
+	</div>
+</div>

package/dist/components/widgets/slam/position.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SlamPosition } from '@viamrobotics/sdk';
+interface Props {
+    position: SlamPosition;
+}
+declare const Position: import("svelte").Component<Props, {}, "">;
+type Position = ReturnType<typeof Position>;
+export default Position;