@viamrobotics/test-widgets 0.0.1

package/dist/components/widgets/base/set-velocity.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Vector3 } from '@viamrobotics/sdk'
+
+	import { Button } from '@viamrobotics/prime-core'
+
+	import Vec3Builder from './vec3-builder.svelte'
+
+	interface Props {
+		setVelocity: (linear: Vector3, angular: Vector3) => void
+	}
+
+	const { setVelocity }: Props = $props()
+
+	let linearVelocity = $state<Vector3>({ x: 0, y: 50, z: 0 })
+	let angularVelocity = $state<Vector3>({ x: 0, y: 0, z: 15 })
+</script>
+
+<div class="flex flex-row gap-4">
+	<Vec3Builder
+		title="Linear velocity"
+		titleUnits="(mm/s)"
+		yTooltip="Only Y is used for a wheeled base, since Viam’s coordinate system considers +Y to be the forward axis."
+		bind:vector={linearVelocity}
+	/>
+	<Vec3Builder
+		title="Angular velocity"
+		titleUnits="(º/s)"
+		zTooltip="Only Z is used for a wheeled base, since Viam’s coordinate system considers +Z to point up and the angular velocity to rotate around the Z axis."
+		bind:vector={angularVelocity}
+	/>
+</div>
+
+<Button
+	class="mt-auto"
+	icon="play-circle-outline"
+	onclick={() => {
+		setVelocity(linearVelocity, angularVelocity)
+	}}
+>
+	Execute
+</Button>

package/dist/components/widgets/base/set-velocity.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Vector3 } from '@viamrobotics/sdk';
+interface Props {
+    setVelocity: (linear: Vector3, angular: Vector3) => void;
+}
+declare const SetVelocity: import("svelte").Component<Props, {}, "">;
+type SetVelocity = ReturnType<typeof SetVelocity>;
+export default SetVelocity;

package/dist/components/widgets/base/spin-widget.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { BaseClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import MutationView from '../../mutation-view.svelte'
+
+	import Spin from './spin.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		BaseClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const spinMutation = createResourceMutation(client, 'spin')
+</script>
+
+<MutationView lastError={spinMutation.error}>
+	<Spin
+		spin={(angleDeg: number, degsPerSec: number) => {
+			spinMutation.mutate([angleDeg, degsPerSec], {})
+		}}
+	/>
+</MutationView>

package/dist/components/widgets/base/spin-widget.svelte.d.ts

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

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Button, Icon, Label, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	interface Props {
+		spin: (angleDeg: number, degsPerSec: number) => void
+	}
+
+	const { spin }: Props = $props()
+
+	let angle = $state(90)
+	let degsPerSec = $state(45)
+</script>
+
+<div class="flex flex-row gap-4">
+	<Label cx="max-w-[96px] gap-1 text-xs">
+		<span class="flex gap-1">
+			Angle
+			<abbr class="text-disabled">(º)</abbr>
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<p slot="description">The angle to spin in degrees. Positive is left, negative is right.</p>
+			</Tooltip>
+		</span>
+
+		<NumericInput
+			slot="input"
+			value={angle}
+			on:change={(event) => {
+				angle = numberValueFromEvent(event) ?? 0
+			}}
+		/>
+	</Label>
+	<Label cx="max-w-[96px] gap-1 text-xs">
+		<span class="flex gap-1 whitespace-nowrap">
+			Angular velocity
+			<abbr class="text-disabled">(º/s)</abbr>
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6 "
+				/>
+
+				<p
+					slot="description"
+					class="whitespace-normal"
+				>
+					The angular velocity at which to spin in degrees per second. Given a positive angle and a
+					positive velocity, the base turns to the left (for built-in base models).
+				</p>
+			</Tooltip>
+		</span>
+
+		<NumericInput
+			slot="input"
+			value={degsPerSec}
+			on:change={(event) => {
+				degsPerSec = numberValueFromEvent(event) ?? 0
+			}}
+		/>
+	</Label>
+</div>
+
+<Button
+	class="mt-auto"
+	icon="play-circle-outline"
+	onclick={() => {
+		spin(angle, degsPerSec)
+	}}
+>
+	Execute
+</Button>

package/dist/components/widgets/base/spin.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    spin: (angleDeg: number, degsPerSec: number) => void;
+}
+declare const Spin: import("svelte").Component<Props, {}, "">;
+type Spin = ReturnType<typeof Spin>;
+export default Spin;

package/dist/components/widgets/base/vec3-builder.svelte

@@ -0,0 +1,144 @@
+<!-- 
+NOTE(zp,2024-06-11) This is specifically designed for Base
+
+I'd be wary of using this elsewhere unless the use case & styling is identitcal
+-->
+<script lang="ts">
+	import type { Vector3 } from '@viamrobotics/sdk'
+
+	import { Icon, Label, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	interface Props {
+		title: string
+		titleUnits?: string | undefined
+		titleTooltip?: string | undefined
+		vector: Vector3
+		xTooltip?: string | undefined
+		yTooltip?: string | undefined
+		zTooltip?: string | undefined
+	}
+
+	let {
+		title,
+		titleUnits,
+		titleTooltip,
+		vector = $bindable(),
+		xTooltip,
+		yTooltip,
+		zTooltip,
+	}: Props = $props()
+
+	const builderID = $props.id()
+</script>
+
+<section
+	class="border-light text-subtle-1 divide-y border text-xs"
+	aria-labelledby={builderID}
+>
+	<h4
+		class="bg-light flex flex-row place-content-center gap-1 px-2 py-1.5"
+		id={builderID}
+	>
+		{title}
+		{#if titleUnits}
+			<abbr class="text-disabled">{titleUnits}</abbr>
+		{/if}
+		{#if titleTooltip}
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<p
+					slot="description"
+					class="text-xs whitespace-pre-line"
+				>
+					{titleTooltip}
+				</p>
+			</Tooltip>
+		{/if}
+	</h4>
+	<div class="grid max-w-46 grid-cols-3 gap-2 px-3 py-2.5">
+		<Label cx="flex flex-col gap-1">
+			<span class="flex gap-1">
+				X
+				{#if xTooltip}
+					<Tooltip>
+						<Icon
+							name="information-outline"
+							cx="text-gray-6"
+						/>
+
+						<p slot="description">
+							{xTooltip}
+						</p>
+					</Tooltip>
+				{/if}
+			</span>
+
+			<NumericInput
+				slot="input"
+				cx="text-default"
+				value={vector.x}
+				on:change={(event) => {
+					vector.x = numberValueFromEvent(event) ?? 0
+				}}
+			/>
+		</Label>
+		<Label cx="flex flex-col gap-1">
+			<span class="flex gap-1">
+				Y
+				{#if yTooltip}
+					<Tooltip>
+						<Icon
+							name="information-outline"
+							cx="text-gray-6"
+						/>
+
+						<p slot="description">
+							{yTooltip}
+						</p>
+					</Tooltip>
+				{/if}
+			</span>
+
+			<NumericInput
+				slot="input"
+				cx="text-default"
+				value={vector.y}
+				on:change={(event) => {
+					vector.y = numberValueFromEvent(event) ?? 0
+				}}
+			/>
+		</Label>
+		<Label cx="flex flex-col gap-1">
+			<span class="flex gap-1">
+				Z
+				{#if zTooltip}
+					<Tooltip>
+						<Icon
+							name="information-outline"
+							cx="text-gray-6"
+						/>
+
+						<p slot="description">
+							{zTooltip}
+						</p>
+					</Tooltip>
+				{/if}
+			</span>
+
+			<NumericInput
+				slot="input"
+				cx="text-default"
+				value={vector.z}
+				on:change={(event) => {
+					vector.z = numberValueFromEvent(event) ?? 0
+				}}
+			/>
+		</Label>
+	</div>
+</section>

package/dist/components/widgets/base/vec3-builder.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Vector3 } from '@viamrobotics/sdk';
+interface Props {
+    title: string;
+    titleUnits?: string | undefined;
+    titleTooltip?: string | undefined;
+    vector: Vector3;
+    xTooltip?: string | undefined;
+    yTooltip?: string | undefined;
+    zTooltip?: string | undefined;
+}
+declare const Vec3Builder: import("svelte").Component<Props, {}, "vector">;
+type Vec3Builder = ReturnType<typeof Vec3Builder>;
+export default Vec3Builder;

package/dist/components/widgets/board/analog-read-wrapper.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { BoardClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import AnalogRead from './analog-read.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+		pin: string
+		setLastError: (err: Error | null) => void
+	}
+
+	const { pin, partID, resourceName, setLastError }: Props = $props()
+
+	let value = $state<number>()
+
+	const client = createResourceClient(
+		BoardClient,
+		() => partID,
+		() => resourceName
+	)
+
+	// Even though this seems like a getter, we treat it as a mutation to give the user
+	// more control over when this is called.
+	const getValueMutation = createResourceMutation(client, 'readAnalogReader')
+
+	const getValue = async () => {
+		try {
+			const data = await getValueMutation.mutateAsync([pin])
+			value = data?.value
+			setLastError(null)
+		} catch (error) {
+			setLastError(error as Error)
+		}
+	}
+</script>
+
+<AnalogRead
+	{value}
+	{getValue}
+/>

package/dist/components/widgets/board/analog-read-wrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+    pin: string;
+    setLastError: (err: Error | null) => void;
+}
+declare const AnalogReadWrapper: import("svelte").Component<Props, {}, "">;
+type AnalogReadWrapper = ReturnType<typeof AnalogReadWrapper>;
+export default AnalogReadWrapper;

package/dist/components/widgets/board/analog-read.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { formatNumeric } from '../../../format'
+
+	import ConfirmingButton from './confirming-button.svelte'
+	import PinSection from './pin-section.svelte'
+
+	interface Props {
+		value: number | undefined
+		getValue: () => void
+	}
+
+	const { value, getValue }: Props = $props()
+
+	const id = $props.id()
+	const sectionId = `${id}-section`
+	const getButtonId = `${id}-get`
+</script>
+
+<PinSection
+	title="Read pin"
+	class="h-fit"
+>
+	<section
+		class="flex h-full max-h-18.5 w-full flex-col gap-1 p-3 text-xs"
+		aria-labelledby={sectionId}
+	>
+		<h5
+			id={sectionId}
+			class="text-subtle-1"
+		>
+			Value
+		</h5>
+		<span class="flex w-full place-content-between content-stretch">
+			<output
+				class={[
+					'my-auto',
+					{
+						'text-disabled': value === undefined,
+					},
+				]}
+				for={getButtonId}
+			>
+				{formatNumeric(value, 0)}
+			</output>
+
+			<ConfirmingButton
+				onclick={getValue}
+				id={getButtonId}
+				class="w-full max-w-11"
+			>
+				Get
+			</ConfirmingButton>
+		</span>
+	</section>
+</PinSection>

package/dist/components/widgets/board/analog-read.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: number | undefined;
+    getValue: () => void;
+}
+declare const AnalogRead: import("svelte").Component<Props, {}, "">;
+type AnalogRead = ReturnType<typeof AnalogRead>;
+export default AnalogRead;

package/dist/components/widgets/board/analog-write-wrapper.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { BoardClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import AnalogWrite from './analog-write.svelte'
+
+	interface Props {
+		pin: string
+		partID: string
+		resourceName: string
+		setLastError: (err: Error | null) => void
+	}
+
+	const { pin, partID, resourceName, setLastError }: Props = $props()
+
+	const client = createResourceClient(
+		BoardClient,
+		() => partID,
+		() => resourceName
+	)
+	const setValueMutation = createResourceMutation(client, 'writeAnalog')
+
+	const setValue = async (value: number) => {
+		try {
+			await setValueMutation.mutateAsync([pin, value])
+			setLastError(null)
+		} catch (error) {
+			setLastError(error as Error)
+		}
+	}
+</script>
+
+<AnalogWrite {setValue} />

package/dist/components/widgets/board/analog-write-wrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    pin: string;
+    partID: string;
+    resourceName: string;
+    setLastError: (err: Error | null) => void;
+}
+declare const AnalogWriteWrapper: import("svelte").Component<Props, {}, "">;
+type AnalogWriteWrapper = ReturnType<typeof AnalogWriteWrapper>;
+export default AnalogWriteWrapper;

package/dist/components/widgets/board/analog-write.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Label, NumericInput } from '@viamrobotics/prime-core'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	import ConfirmingButton from './confirming-button.svelte'
+	import PinSection from './pin-section.svelte'
+
+	let value = $state(0)
+
+	interface Props {
+		setValue: (value: number) => void
+	}
+
+	const { setValue }: Props = $props()
+</script>
+
+<PinSection
+	title="Write pin"
+	class="h-fit"
+>
+	<div class="flex h-full max-h-18.5 w-full p-3">
+		<Label cx="w-fit!">
+			<h5>Value</h5>
+
+			<NumericInput
+				slot="input"
+				placeholder="0"
+				step={0.01}
+				cx="max-w-[124px]"
+				{value}
+				on:input={(event) => {
+					value = numberValueFromEvent(event) ?? 0
+				}}
+			/>
+		</Label>
+		<ConfirmingButton
+			class="mt-auto ml-auto w-full max-w-11"
+			onclick={() => setValue(value)}
+		>
+			Set
+		</ConfirmingButton>
+	</div>
+</PinSection>

package/dist/components/widgets/board/analog-write.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    setValue: (value: number) => void;
+}
+declare const AnalogWrite: import("svelte").Component<Props, {}, "">;
+type AnalogWrite = ReturnType<typeof AnalogWrite>;
+export default AnalogWrite;

package/dist/components/widgets/board/board.d.ts

@@ -0,0 +1,16 @@
+import type { ValueOf } from 'type-fest';
+export declare const PinModes: {
+    readonly READ: "Read";
+    readonly WRITE: "Write";
+};
+export declare const PinTypes: {
+    readonly GPIO: "GPIO";
+    readonly ANALOG: "Analog";
+};
+export type PinMode = ValueOf<typeof PinModes>;
+export type PinType = ValueOf<typeof PinTypes>;
+export interface PinSelection {
+    pin: string;
+    mode: PinMode;
+    type: PinType;
+}

package/dist/components/widgets/board/board.js

@@ -0,0 +1,8 @@
+export const PinModes = {
+    READ: 'Read',
+    WRITE: 'Write',
+};
+export const PinTypes = {
+    GPIO: 'GPIO',
+    ANALOG: 'Analog',
+};

package/dist/components/widgets/board/board.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import ConnectionStatus from '../../connection-status.svelte'
+
+	import ReadWritePins from './read-write-pins.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="p-4">
+			<ReadWritePins
+				{partID}
+				{resourceName}
+			/>
+		</div>
+	{/snippet}
+</ConnectionStatus>

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

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

package/dist/components/widgets/board/confirming-button.svelte

@@ -0,0 +1,42 @@
+<!--
+This is a simple wrapper over <Button> to provide a simple confirmation state
+Right now, it is board-only
+-->
+<script lang="ts">
+	import { Button, Icon } from '@viamrobotics/prime-core'
+
+	interface Props {
+		onclick: (event: MouseEvent) => void
+		children?: import('svelte').Snippet
+		[key: string]: unknown
+	}
+
+	const { onclick, children, ...rest }: Props = $props()
+
+	let readyState: 'ready' | 'clicked' = $state('ready')
+
+	let stateTimeout: number
+
+	const handleClick = (event: MouseEvent) => {
+		onclick(event)
+		clearTimeout(stateTimeout)
+		readyState = 'clicked'
+		stateTimeout = window.setTimeout(() => {
+			readyState = 'ready'
+		}, 1000)
+	}
+</script>
+
+<Button
+	{...rest}
+	onclick={handleClick}
+>
+	{#if readyState === 'ready'}
+		{@render children?.()}
+	{:else}
+		<Icon
+			name="check"
+			cx="text-gray-6"
+		/>
+	{/if}
+</Button>

package/dist/components/widgets/board/confirming-button.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    onclick: (event: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+}
+declare const ConfirmingButton: import("svelte").Component<Props, {}, "">;
+type ConfirmingButton = ReturnType<typeof ConfirmingButton>;
+export default ConfirmingButton;