@viamrobotics/test-widgets 0.0.1

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

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { Label, Switch } from '@viamrobotics/prime-core'
+	import { BaseClient, type Vector3 } 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 MutationSection from '../../mutation-section.svelte'
+	import StopButton from '../../stop-button.svelte'
+
+	import MoveStraight from './move-straight.svelte'
+	import QuickMove from './quick-move.svelte'
+	import SetPower from './set-power.svelte'
+	import SetVelocity from './set-velocity.svelte'
+	import Spin from './spin.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		BaseClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const setPowerMutation = createResourceMutation(client, 'setPower')
+	const quickSetPowerMutation = createResourceMutation(client, 'setPower')
+	const setVelocityMutation = createResourceMutation(client, 'setVelocity')
+	const spinMutation = createResourceMutation(client, 'spin')
+	const moveStraightMutation = createResourceMutation(client, 'moveStraight')
+	const stopMutation = createResourceMutation(client, 'stop')
+
+	const setPower = (linear: Vector3, angular: Vector3) => {
+		setPowerMutation.mutate([linear, angular], {})
+	}
+
+	const quickSetPower = (linear: Vector3, angular: Vector3) => {
+		quickSetPowerMutation.mutate([linear, angular], {})
+	}
+
+	const setVelocity = (linear: Vector3, angular: Vector3) => {
+		setVelocityMutation.mutate([linear, angular], {})
+	}
+
+	const spin = (angleDeg: number, degsPerSec: number) => {
+		spinMutation.mutate([angleDeg, degsPerSec], {})
+	}
+
+	const moveStraight = (distanceMm: number, mmPerSec: number) => {
+		moveStraightMutation.mutate([distanceMm, mmPerSec], {})
+	}
+
+	let quickMoveKeyboardControl = $state(false)
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex flex-row divide-x">
+			<MutationSection
+				title="Quick move"
+				lastError={quickSetPowerMutation.error}
+			>
+				{#snippet titleInput()}
+					<Label>
+						Keyboard control
+
+						<Switch
+							slot="input"
+							on={quickMoveKeyboardControl}
+							on:change={() => (quickMoveKeyboardControl = !quickMoveKeyboardControl)}
+						/>
+					</Label>
+				{/snippet}
+
+				<QuickMove
+					isKeyboardEnabled={quickMoveKeyboardControl}
+					setPower={quickSetPower}
+				/>
+			</MutationSection>
+			<div class="ml-auto flex w-full max-w-40 grow flex-col divide-y">
+				<ApiSection title="Stop">
+					<StopButton
+						error={stopMutation.error}
+						onStop={() => {
+							stopMutation.mutate([])
+						}}
+					/>
+				</ApiSection>
+				<IsMoving
+					client={BaseClient}
+					{partID}
+					{resourceName}
+				/>
+			</div>
+		</div>
+		<MutationSection
+			title="MoveStraight"
+			description="Move across a given distance at a given velocity"
+			lastError={moveStraightMutation.error}
+		>
+			<MoveStraight {moveStraight} />
+		</MutationSection>
+		<MutationSection
+			title="Spin"
+			description="Turn to a given angle at a given velocity"
+			lastError={spinMutation.error}
+		>
+			<Spin {spin} />
+		</MutationSection>
+		<MutationSection
+			title="SetPower"
+			description="Move continuously at a given amount of power"
+			lastError={setPowerMutation.error}
+		>
+			<SetPower {setPower} />
+		</MutationSection>
+		<MutationSection
+			title="SetVelocity"
+			description="Move continually at a given velocity"
+			lastError={setVelocityMutation.error}
+		>
+			<SetVelocity {setVelocity} />
+		</MutationSection>
+	{/snippet}
+</ConnectionStatus>

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

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

package/dist/components/widgets/base/move-straight-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 MoveStraight from './move-straight.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		BaseClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const moveStraightMutation = createResourceMutation(client, 'moveStraight')
+
+	const moveStraight = (distanceMm: number, mmPerSec: number) => {
+		moveStraightMutation.mutate([distanceMm, mmPerSec])
+	}
+</script>
+
+<MutationView lastError={moveStraightMutation.error}>
+	<MoveStraight {moveStraight} />
+</MutationView>

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

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

package/dist/components/widgets/base/move-straight.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { Button, Icon, Label, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	interface Props {
+		moveStraight: (distanceMm: number, mmPerSec: number) => void
+	}
+
+	const { moveStraight }: Props = $props()
+
+	let distanceMm = $state(200)
+	let mmPerSec = $state(100)
+</script>
+
+<div class="flex flex-row gap-4">
+	<Label cx="max-w-[96px] gap-1 text-xs whitespace-nowrap">
+		<span class="flex gap-1">
+			Distance
+			<abbr class="text-disabled">(mm)</abbr>
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+				<p
+					slot="description"
+					class="whitespace-normal"
+				>
+					Positive is forward, negative is backward
+				</p>
+			</Tooltip>
+		</span>
+		<NumericInput
+			value={distanceMm}
+			on:change={(event) => {
+				distanceMm = numberValueFromEvent(event) ?? 0
+			}}
+			slot="input"
+		/>
+	</Label>
+	<Label cx="max-w-[96px] gap-1 text-xs whitespace-nowrap">
+		<span class="flex gap-1">
+			Speed
+			<abbr class="text-disabled">(mm/s)</abbr>
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+				<p
+					slot="description"
+					class="whitespace-normal"
+				>
+					Positive is forward, negative is backward
+				</p>
+			</Tooltip>
+		</span>
+		<NumericInput
+			value={mmPerSec}
+			on:change={(event) => {
+				mmPerSec = numberValueFromEvent(event) ?? 0
+			}}
+			slot="input"
+		/>
+	</Label>
+</div>
+
+<Button
+	slot="action"
+	class="mt-auto"
+	icon="play-circle-outline"
+	onclick={() => {
+		moveStraight(distanceMm, mmPerSec)
+	}}
+>
+	Execute
+</Button>

package/dist/components/widgets/base/move-straight.svelte.d.ts

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

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Label, Switch } from '@viamrobotics/prime-core'
+	import { BaseClient, type Vector3 } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import MutationView from '../../mutation-view.svelte'
+
+	import QuickMove from './quick-move.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		BaseClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const quickSetPowerMutation = createResourceMutation(client, 'setPower')
+
+	const quickSetPower = (linear: Vector3, angular: Vector3) => {
+		quickSetPowerMutation.mutate([linear, angular], {})
+	}
+
+	let isKeyboardEnabled = $state(false)
+</script>
+
+<MutationView lastError={quickSetPowerMutation.error}>
+	{#snippet titleInput()}
+		<Label cx="w-fit!">
+			Keyboard control
+
+			<Switch
+				slot="input"
+				on={isKeyboardEnabled}
+				on:change={() => (isKeyboardEnabled = !isKeyboardEnabled)}
+			/>
+		</Label>
+	{/snippet}
+
+	<QuickMove
+		setPower={quickSetPower}
+		{isKeyboardEnabled}
+	/>
+</MutationView>

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

@@ -0,0 +1,230 @@
+<script lang="ts">
+	import type { Vector3 } from '@viamrobotics/sdk'
+
+	import { Icon, Label, RangeInput } from '@viamrobotics/prime-core'
+	import { onMount } from 'svelte'
+	import { twMerge } from 'tailwind-merge'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	interface Props {
+		setPower: (linear: Vector3, angular: Vector3) => void
+		isKeyboardEnabled: boolean
+	}
+
+	const { setPower, isKeyboardEnabled }: Props = $props()
+
+	let powerPct = $state(0.5)
+
+	// When setPower commands are sent in quick succession, sometimes
+	// the RDK base model handles the responses out of order. To make
+	// sure the base truly stops, send an extra stop command 50ms
+	// later.
+	let stopTimeoutID = 0
+
+	const setPowerScalar = (linearPct: number, angularPct: number) => {
+		globalThis.clearTimeout(stopTimeoutID)
+		setPower({ x: 0, y: linearPct, z: 0 }, { x: 0, y: 0, z: angularPct })
+		if (linearPct === 0 && angularPct === 0) {
+			stopTimeoutID = window.setTimeout(() => {
+				setPower({ x: 0, y: linearPct, z: 0 }, { x: 0, y: 0, z: angularPct })
+			}, 50)
+		}
+	}
+
+	onMount(() => {
+		return () => {
+			globalThis.clearTimeout(stopTimeoutID)
+		}
+	})
+
+	let isPressed = false
+	const makeMouseDown = (linearPct: number, angularPct: number) => () => {
+		isPressed = true
+		setPowerScalar(linearPct, angularPct)
+	}
+	const mouseEnd = () => {
+		if (isPressed) {
+			setPowerScalar(0, 0)
+		}
+		isPressed = false
+	}
+
+	const buttonCx =
+		'flex gap-2 justify-center items-center w-[60px] border border-light bg-light px-2.5 py-3 hover:border-medium hover:bg-medium active:bg-gray-2 h-fit'
+
+	const keys = {
+		W_KEY: 'w',
+		A_KEY: 'a',
+		S_KEY: 's',
+		D_KEY: 'd',
+	} as const
+	const pressedKeys: Record<(typeof keys)[keyof typeof keys], boolean> = $state({
+		[keys.W_KEY]: false,
+		[keys.A_KEY]: false,
+		[keys.S_KEY]: false,
+		[keys.D_KEY]: false,
+	})
+
+	const normalizeKey = (key: string) => {
+		switch (key.toLowerCase()) {
+			case 'w':
+			case 'arrowup': {
+				return keys.W_KEY
+			}
+			case 'a':
+			case 'arrowleft': {
+				return keys.A_KEY
+			}
+			case 's':
+			case 'arrowdown': {
+				return keys.S_KEY
+			}
+			case 'd':
+			case 'arrowright': {
+				return keys.D_KEY
+			}
+			default: {
+				return undefined
+			}
+		}
+	}
+
+	const onKeydown = (event: KeyboardEvent) => {
+		if (!isKeyboardEnabled || event.repeat) {
+			return
+		}
+
+		const key = normalizeKey(event.key)
+		if (!key) {
+			return
+		}
+
+		event.stopPropagation()
+		event.preventDefault()
+
+		pressedKeys[key] = true
+		onKeyChange()
+	}
+
+	const onKeyup = (event: KeyboardEvent) => {
+		if (!isKeyboardEnabled) {
+			return
+		}
+
+		const key = normalizeKey(event.key)
+		if (!key) {
+			return
+		}
+
+		event.stopPropagation()
+		event.preventDefault()
+
+		pressedKeys[key] = false
+		onKeyChange()
+	}
+
+	const onKeyChange = () => {
+		const linearPct = ((pressedKeys.w ? 1 : 0) - (pressedKeys.s ? 1 : 0)) * powerPct
+		const angularPct = ((pressedKeys.a ? 1 : 0) - (pressedKeys.d ? 1 : 0)) * powerPct
+		setPowerScalar(linearPct, angularPct)
+	}
+</script>
+
+<svelte:window
+	onkeydown={onKeydown}
+	onkeyup={onKeyup}
+/>
+
+<div class="flex grow flex-col gap-6">
+	<div class="flex w-fit flex-col gap-4">
+		<!-- NOTE(zp,2024-06-04) these are not prime buttons because prime does not provide on:mousedown or on:mouseup -->
+		<!-- TODO(APP-4936) add the correct icons to prime instead of rotating & scaling-->
+		<div class="flex items-center gap-2">
+			<!-- turn left -->
+			<button
+				onmousedown={makeMouseDown(0, powerPct)}
+				aria-label="left"
+				onmouseup={mouseEnd}
+				onmouseleave={mouseEnd}
+				class={twMerge(buttonCx, pressedKeys.a && 'bg-gray-2')}
+			>
+				<Icon
+					name="undo"
+					cx="text-gray-6"
+				/>
+				{#if isKeyboardEnabled}
+					<div class="text-gray-6 text-sm font-semibold">A</div>
+				{/if}
+			</button>
+			<div class="flex flex-col gap-2">
+				<!-- forwards -->
+				<button
+					onmousedown={makeMouseDown(powerPct, 0)}
+					aria-label="forwards"
+					onmouseup={mouseEnd}
+					onmouseleave={mouseEnd}
+					class={twMerge(buttonCx, 'flex-col', pressedKeys.w && 'bg-gray-2')}
+				>
+					<Icon
+						name="arrow-up"
+						cx="text-gray-6"
+					/>
+					{#if isKeyboardEnabled}
+						<div class="text-gray-6 text-sm font-semibold">W</div>
+					{/if}
+				</button>
+				<!-- backwards -->
+				<button
+					onmousedown={makeMouseDown(-1 * powerPct, 0)}
+					aria-label="backwards"
+					onmouseup={mouseEnd}
+					onmouseleave={mouseEnd}
+					class={twMerge(buttonCx, 'flex-col', pressedKeys.s && 'bg-gray-2')}
+				>
+					{#if isKeyboardEnabled}
+						<div class="text-gray-6 text-sm font-semibold">S</div>
+					{/if}
+					<Icon
+						name="arrow-up"
+						cx="text-gray-6 rotate-180"
+					/>
+				</button>
+			</div>
+
+			<!-- turn right -->
+			<button
+				onmousedown={makeMouseDown(0, -1 * powerPct)}
+				aria-label="right"
+				onmouseup={mouseEnd}
+				onmouseleave={mouseEnd}
+				class={twMerge(buttonCx, pressedKeys.d && 'bg-gray-2')}
+			>
+				{#if isKeyboardEnabled}
+					<div class="text-gray-6 text-sm font-semibold">D</div>
+				{/if}
+				<Icon
+					name="undo"
+					cx="text-gray-6 scale-x-[-1]"
+				/>
+			</button>
+		</div>
+		<p class="text-subtle-2 mx-auto text-xs">Press and hold</p>
+	</div>
+
+	<Label cx="max-w-[282px] grow">
+		<span class="text-subtle-1 text-xs">Power</span>
+
+		<RangeInput
+			slot="input"
+			max={1}
+			step={0.05}
+			value={powerPct}
+			on:input={(event) => {
+				// on:input is used instead of on:change because of the on:mousedown handlers and blur order
+				// on:change does not run in time.
+				powerPct = numberValueFromEvent(event) ?? 0
+			}}
+		/>
+	</Label>
+</div>

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

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

package/dist/components/widgets/base/set-power-widget.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { BaseClient, type Vector3 } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import MutationView from '../../mutation-view.svelte'
+
+	import SetPower from './set-power.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		BaseClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const setPowerMutation = createResourceMutation(client, 'setPower')
+</script>
+
+<MutationView lastError={setPowerMutation.error}>
+	<SetPower
+		setPower={(linear: Vector3, angular: Vector3) => {
+			setPowerMutation.mutate([linear, angular], {})
+		}}
+	/>
+</MutationView>

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

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

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Vector3 } from '@viamrobotics/sdk'
+
+	import { Button } from '@viamrobotics/prime-core'
+
+	import Vec3Builder from './vec3-builder.svelte'
+
+	interface Props {
+		setPower: (linear: Vector3, angular: Vector3) => void
+	}
+
+	const { setPower }: Props = $props()
+
+	let linearPower = $state<Vector3>({ x: 0.5, y: 0, z: 0 })
+	let angularPower = $state<Vector3>({ x: 0, y: 0, z: 0.75 })
+</script>
+
+<div class="flex flex-row gap-4">
+	<Vec3Builder
+		title="Linear power"
+		titleTooltip="The percentage of max power of the base’s linear propulsion. In the range of –1.0 to 1.0, with 1.0 meaning 100% power."
+		xTooltip="+X is right, –X is left"
+		yTooltip="+Y is forward, –Y is backward"
+		zTooltip="+Z is up, –Z is down"
+		bind:vector={linearPower}
+	/>
+	<Vec3Builder
+		title="Angular power"
+		titleTooltip="The percentage of max power of the base’s angular propulsion. In the range of -1.0 to 1.0, with 1.0 meaning 100% power."
+		zTooltip="+Z is left, –Z is right"
+		bind:vector={angularPower}
+	/>
+</div>
+
+<Button
+	class="mt-auto"
+	icon="play-circle-outline"
+	onclick={() => {
+		setPower(linearPower, angularPower)
+	}}
+>
+	Execute
+</Button>

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

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

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { BaseClient, type Vector3 } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import MutationView from '../../mutation-view.svelte'
+
+	import SetVelocity from './set-velocity.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		BaseClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const setVelocityMutation = createResourceMutation(client, 'setVelocity')
+</script>
+
+<MutationView lastError={setVelocityMutation.error}>
+	<SetVelocity
+		setVelocity={(linear: Vector3, angular: Vector3) => {
+			setVelocityMutation.mutate([linear, angular], {})
+		}}
+	/>
+</MutationView>

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

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