@viamrobotics/test-widgets 0.0.1

package/dist/components/widgets/input-controller/input-controller.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { InputControllerClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import Query from '../../query.svelte'
+	import ReadingsList from '../../readings-list.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+
+	import Webgamepad from './webgamepad.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'input-controller'
+	)
+
+	const isWebgamepad = $derived(resourceName.toLowerCase() === 'webgamepad')
+
+	const client = createResourceClient(
+		InputControllerClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const eventsQuery = createResourceQuery(client, 'getEvents', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex flex-row items-center justify-between p-4 pb-3">
+			<RefetchController
+				{refetchInterval}
+				queries={[eventsQuery]}
+			/>
+			{#if isWebgamepad}
+				<Webgamepad
+					{partID}
+					{resourceName}
+					refetch={eventsQuery.refetch}
+				/>
+			{/if}
+		</div>
+
+		<ApiSection
+			title="GetReadings"
+			class="relative"
+		>
+			<Query
+				query={eventsQuery}
+				contentCx="h-4"
+			>
+				{#if eventsQuery.data !== undefined}
+					<ReadingsList
+						data={Object.fromEntries(
+							eventsQuery.data.map(({ control, value }) => [control, value])
+						)}
+					/>
+				{/if}
+			</Query>
+		</ApiSection>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/input-controller/input-controller.svelte.d.ts

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

package/dist/components/widgets/input-controller/standard-gamepad-event.d.ts

@@ -0,0 +1,8 @@
+export interface StandardGamepadEvent {
+    type: string;
+    target: string;
+    value: number | {
+        x: number;
+        y: number;
+    };
+}

package/dist/components/widgets/input-controller/standard-gamepad-event.js

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

package/dist/components/widgets/input-controller/webgamepad-scene.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { useGamepad } from '@threlte/extras'
+
+	import type { StandardGamepadEvent } from './standard-gamepad-event'
+
+	interface Props {
+		onChange: (event: StandardGamepadEvent) => void
+		onConnectionChange: (connected: boolean) => void
+	}
+
+	const { onChange, onConnectionChange }: Props = $props()
+
+	const { on, connected } = useGamepad()
+
+	$effect.pre(() => {
+		on('change', onChange)
+	})
+
+	$effect.pre(() => {
+		onConnectionChange($connected)
+	})
+</script>

package/dist/components/widgets/input-controller/webgamepad-scene.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { StandardGamepadEvent } from './standard-gamepad-event';
+interface Props {
+    onChange: (event: StandardGamepadEvent) => void;
+    onConnectionChange: (connected: boolean) => void;
+}
+declare const WebgamepadScene: import("svelte").Component<Props, {}, "">;
+type WebgamepadScene = ReturnType<typeof WebgamepadScene>;
+export default WebgamepadScene;

package/dist/components/widgets/input-controller/webgamepad.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { Canvas } from '@threlte/core'
+	import { InputControllerClient, type InputControllerEvent } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import ErrorDisplay from '../../error.svelte'
+	import StatusPill from '../../status-pill.svelte'
+
+	import type { StandardGamepadEvent } from './standard-gamepad-event'
+
+	import WebgamepadScene from './webgamepad-scene.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+		refetch: () => void
+	}
+
+	const { partID, resourceName, refetch }: Props = $props()
+
+	const client = createResourceClient(
+		InputControllerClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const triggerEventMutation = createResourceMutation(client, 'triggerEvent')
+
+	// Threlte useGamepad button names → RDK input control names
+	const CONTROL_MAP: Record<string, string> = {
+		clusterBottom: 'ButtonSouth',
+		clusterRight: 'ButtonEast',
+		clusterLeft: 'ButtonWest',
+		clusterTop: 'ButtonNorth',
+		leftBumper: 'ButtonLT',
+		rightBumper: 'ButtonRT',
+		leftTrigger: 'AbsoluteZ',
+		rightTrigger: 'AbsoluteRZ',
+		select: 'ButtonSelect',
+		start: 'ButtonStart',
+		center: 'ButtonMenu',
+		leftStickButton: 'ButtonLThumb',
+		rightStickButton: 'ButtonRThumb',
+	}
+
+	// Threlte event types → RDK event types
+	const EVENT_TYPE_MAP: Record<string, string> = {
+		down: 'ButtonPress',
+		press: 'ButtonPress',
+		up: 'ButtonRelease',
+		change: 'PositionChangeAbs',
+	}
+
+	// D-pad buttons map to Hat axes with signed values
+	const DPAD_MAP: Record<string, { control: string; downValue: number }> = {
+		directionalTop: { control: 'AbsoluteHat0Y', downValue: -1 },
+		directionalBottom: { control: 'AbsoluteHat0Y', downValue: 1 },
+		directionalLeft: { control: 'AbsoluteHat0X', downValue: -1 },
+		directionalRight: { control: 'AbsoluteHat0X', downValue: 1 },
+	}
+
+	// Analog sticks emit {x, y} and map to separate X/Y controls
+	const STICK_MAP: Record<string, { x: string; y: string }> = {
+		leftStick: { x: 'AbsoluteX', y: 'AbsoluteY' },
+		rightStick: { x: 'AbsoluteRX', y: 'AbsoluteRY' },
+	}
+
+	const triggerEvent = async (event: StandardGamepadEvent) => {
+		// NOTE(ethanlook): Share this helper
+		const now = Date.now()
+		const time = {
+			seconds: BigInt(Math.floor(now / 1000)),
+			nanos: (now % 1000) * 1_000_000,
+		}
+
+		const events: InputControllerEvent[] = []
+
+		const dpad = DPAD_MAP[event.target]
+		const stick = STICK_MAP[event.target]
+
+		if (dpad) {
+			// D-pad: translate to Hat axis with -1/0/1 value
+			events.push({
+				event: 'PositionChangeAbs',
+				control: dpad.control,
+				value: event.type === 'down' ? dpad.downValue : 0,
+				time,
+			})
+		} else if (stick && typeof event.value === 'object') {
+			// Analog sticks: emit separate X and Y events
+			const eventType = EVENT_TYPE_MAP[event.type] ?? event.type
+			events.push(
+				{ event: eventType, control: stick.x, value: event.value.x, time },
+				{ event: eventType, control: stick.y, value: event.value.y, time }
+			)
+		} else {
+			// Buttons and analog triggers
+			const control = CONTROL_MAP[event.target] ?? event.target
+			const value = typeof event.value === 'number' ? event.value : 0
+			// Digital buttons need ButtonPress/ButtonRelease derived from value (1=press, 0=release).
+			// Analog controls (AbsoluteZ, AbsoluteRZ) use PositionChangeAbs from EVENT_TYPE_MAP.
+			let eventType: string
+			if (control.startsWith('Button')) {
+				eventType = value > 0 ? 'ButtonPress' : 'ButtonRelease'
+			} else {
+				eventType = EVENT_TYPE_MAP[event.type] ?? event.type
+			}
+			events.push({ event: eventType, control, value, time })
+		}
+
+		await Promise.allSettled(
+			events.map(async (icEvent) => triggerEventMutation.mutateAsync([icEvent]))
+		)
+
+		refetch()
+	}
+
+	// The Threlte useGamepad hook exposes a store for this,
+	// but to display it here we need to use another store
+	// and pass down the setter.
+	let isConnected = $state(false)
+</script>
+
+<!-- Hidden because a Threlte Canvas isn't actually shown,
+     but the context must be provided. -->
+<div hidden>
+	<Canvas>
+		<WebgamepadScene
+			onChange={triggerEvent}
+			onConnectionChange={(connected) => {
+				isConnected = connected
+			}}
+		/>
+	</Canvas>
+</div>
+
+<StatusPill
+	isActive={isConnected}
+	activeText="Connected"
+	inactiveText="Disconnected"
+/>
+<ErrorDisplay lastError={triggerEventMutation.error} />

package/dist/components/widgets/input-controller/webgamepad.svelte.d.ts

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

package/dist/components/widgets/ml-model-service/ml-model-service.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { type Metadata, MLModelClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ConnectionStatus from '../../connection-status.svelte'
+	import Queries from '../../queries.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+
+	import ResultsTable from './results-table.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'ml-model-service'
+	)
+
+	const client = createResourceClient(
+		// @ts-expect-error No resource type overlap
+		MLModelClient,
+		() => partID,
+		() => resourceName
+	)
+
+	// @ts-expect-error No resource overlap
+	const metadataQuery = createResourceQuery(client, 'metadata', () => ({
+		// Lower bound of 1Hz for getProperties, higher frequencies are wasteful.
+		refetchInterval:
+			refetchInterval.current === false
+				? false
+				: (Math.max(refetchInterval.current, 1000) as number | false),
+	}))
+
+	const metadata = $derived((metadataQuery.data as unknown as { metadata: Metadata })?.metadata)
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex gap-4 p-4 pb-3">
+			<RefetchController
+				allowLive
+				{refetchInterval}
+				queries={[metadataQuery]}
+			/>
+		</div>
+
+		<Queries
+			queries={[metadataQuery]}
+			contentCx="p-4 h-14"
+		>
+			{#if metadata !== undefined}
+				<div class="p-4">
+					<ResultsTable {metadata} />
+				</div>
+			{/if}
+		</Queries>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/ml-model-service/ml-model-service.svelte.d.ts

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

package/dist/components/widgets/ml-model-service/results-table.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Metadata } from '@viamrobotics/sdk'
+
+	import TensorRow from './tensor-row.svelte'
+
+	interface Props {
+		metadata: Metadata
+	}
+
+	const { metadata }: Props = $props()
+
+	const name = $derived(metadata.name)
+	const description = $derived(metadata.description)
+	const type = $derived(metadata.type)
+	const inputInfo = $derived(metadata.inputInfo)
+	const outputInfo = $derived(metadata.outputInfo)
+</script>
+
+<dl class="table-container grid min-w-0! grid-cols-2 text-xs">
+	<dt class="table-header table-header-cell h-auto min-h-6">model name</dt>
+	<dd class="border-l-light flex! table-cell min-h-6! border-l py-0!">
+		{name || '-'}
+	</dd>
+	<dt class="table-header table-header-cell h-auto min-h-6">model description</dt>
+	<dd class="border-l-light flex! table-cell min-h-6! border-l py-0!">
+		{description || '-'}
+	</dd>
+	<dt class="table-header table-header-cell h-auto min-h-6 border-b-0">model type</dt>
+	<dd class="border-l-light flex! table-cell min-h-6! border-b-0 border-l py-0!">
+		{type || '-'}
+	</dd>
+</dl>
+
+<dl class="table-container min-w-0! text-xs">
+	{#each inputInfo as tensor, index (index)}
+		<TensorRow
+			type="input"
+			{tensor}
+			{index}
+		/>
+	{/each}
+	{#each outputInfo as tensor, index (index)}
+		<TensorRow
+			type="output"
+			{tensor}
+			{index}
+		/>
+	{/each}
+</dl>

package/dist/components/widgets/ml-model-service/results-table.svelte.d.ts

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

package/dist/components/widgets/ml-model-service/tensor-row.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { TensorInfo } from '@viamrobotics/sdk'
+
+	interface Props {
+		type: 'input' | 'output'
+		tensor: TensorInfo
+		index: number
+	}
+
+	const { type, tensor, index }: Props = $props()
+</script>
+
+<div class="border-b-light grid grid-cols-2 border-b">
+	<dt class="table-header table-header-cell">
+		{type} tensor {index}
+	</dt>
+	<dd>
+		<dl class="grid grid-cols-2">
+			<dt class="border-l-light flex! table-cell min-h-6! border-l py-0!">name</dt>
+			<dd class="border-l-light flex! table-cell min-h-6! border-l py-0!">
+				{tensor.name || '-'}
+			</dd>
+			<dt class="border-l-light flex! table-cell min-h-6! border-l py-0!">shape</dt>
+			<dd class="border-l-light flex! table-cell min-h-6! border-l py-0!">
+				{tensor.shape || '-'}
+			</dd>
+			<dt class="border-l-light flex! table-cell min-h-6! border-b-0 border-l py-0!">type</dt>
+			<dd class="border-l-light flex! table-cell min-h-6! border-b-0 border-l py-0!">
+				{tensor.dataType || '-'}
+			</dd>
+		</dl>
+	</dd>
+</div>

package/dist/components/widgets/ml-model-service/tensor-row.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TensorInfo } from '@viamrobotics/sdk';
+interface Props {
+    type: 'input' | 'output';
+    tensor: TensorInfo;
+    index: number;
+}
+declare const TensorRow: import("svelte").Component<Props, {}, "">;
+type TensorRow = ReturnType<typeof TensorRow>;
+export default TensorRow;

package/dist/components/widgets/motor/go-for-view.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { MotorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import MutationView from '../../mutation-view.svelte'
+
+	import GoFor from './go-for.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MotorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const goForMutation = createResourceMutation(client, 'goFor')
+</script>
+
+<MutationView lastError={goForMutation.error}>
+	<GoFor
+		goFor={(rpm: number, revolutions: number) => {
+			goForMutation.mutate([rpm, revolutions], {})
+		}}
+	/>
+</MutationView>

package/dist/components/widgets/motor/go-for-view.svelte.d.ts

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

package/dist/components/widgets/motor/go-for.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { Button, Icon, Label, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	interface Props {
+		goFor: (rpm: number, revolutions: number) => void
+	}
+
+	const { goFor }: Props = $props()
+
+	let revolutions = $state(1)
+	let rpm = $state(10)
+</script>
+
+<div class="flex flex-row gap-4">
+	<Label cx="max-w-[96px] grow gap-1 text-xs">
+		<p class="flex flex-row gap-1">
+			RPM
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<p
+					slot="description"
+					class="text-xs"
+				>
+					Speed at which the motor will move in revolutions per minute. Positive is forward,
+					negative is backward.
+					<br /><br />
+					Note: If both “Revolutions” and “RPM” are negative, the motor will spin forward.
+				</p>
+			</Tooltip>
+		</p>
+
+		<NumericInput
+			slot="input"
+			value={rpm}
+			on:change={(event) => {
+				rpm = numberValueFromEvent(event) ?? 0
+			}}
+		/>
+	</Label>
+	<Label cx="max-w-[96px] grow gap-1 text-xs">
+		<p class="flex flex-row gap-1">
+			Revolutions
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<p
+					slot="description"
+					class="text-xs"
+				>
+					Number of revolutions the motor will run for. Positive is forward, negative is backward.
+				</p>
+			</Tooltip>
+		</p>
+
+		<NumericInput
+			slot="input"
+			value={revolutions}
+			on:change={(event) => {
+				revolutions = numberValueFromEvent(event) ?? 0
+			}}
+		/>
+	</Label>
+</div>
+
+<div class="mt-auto">
+	<Button
+		icon="play-circle-outline"
+		onclick={() => goFor(rpm, revolutions)}>Execute</Button
+	>
+</div>

package/dist/components/widgets/motor/go-for.svelte.d.ts

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

package/dist/components/widgets/motor/go-to-view.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { MotorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import MutationView from '../../mutation-view.svelte'
+
+	import GoTo from './go-to.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MotorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const goToMutation = createResourceMutation(client, 'goTo')
+
+	const goTo = (rpm: number, pos: number) => {
+		goToMutation.mutate([rpm, pos], {})
+	}
+</script>
+
+<MutationView lastError={goToMutation.error}>
+	<GoTo {goTo} />
+</MutationView>

package/dist/components/widgets/motor/go-to-view.svelte.d.ts

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