@viamrobotics/test-widgets 0.6.1 → 0.8.0

package/dist/components/widgets/camera/camera.svelte

@@ -12,6 +12,7 @@
 		createRefetchIntervalStore,
 		RefetchIntervals,
 	} from '../../refetch-interval-store.svelte'
+	import SectionTitle from '../../section-title.svelte'
 
 	import PCDWidget from '../pcd/pcd-widget.svelte'
 	import ExportScreenshot from './export-screenshot.svelte'
@@ -150,166 +151,179 @@
 	}
 
 	const headingID = $props.id()
+	const getImagesHeadingID = `${headingID}-images`
+	const getPointCloudHeadingID = `${headingID}-point-cloud`
 </script>
 
 <ConnectionStatus {partID}>
 	{#snippet connected()}
-		{#if isPlaying}
-			<div class="flex gap-4 p-4 pb-3">
-				<RefetchController
-					{refetchInterval}
-					allowLive
-					queries={[imageQuery, pointcloudQuery]}
+		<section
+			class="flex flex-col"
+			aria-labelledby={getImagesHeadingID}
+		>
+			<div class="flex flex-col gap-0.5 p-4 pb-0">
+				<SectionTitle
+					title="GetImages"
+					api="rdk:component:camera"
+					headingId={getImagesHeadingID}
 				/>
-				{#if sourceNames.length > 0 && refetchInterval.current !== RefetchIntervals.LIVE}
-					<Label position="left">
-						Source
-						<Select
-							value={selectedSource}
-							on:change={onSourceSelect}
-							slot="input"
-						>
-							{#each sourceNames as name (name)}
-								<option value={name}>{name}</option>
-							{/each}
-						</Select>
-					</Label>
-				{/if}
-				{#if panoCoverage}
-					<Label>
-						{panoToggleLabel}
-						<ToggleButtons
-							slot="input"
-							options={['On', 'Off']}
-							selected={displayAs360 ? 'On' : 'Off'}
-							on:input={(event) => {
-								displayAs360 = event.detail === 'On'
-							}}
-						/>
-					</Label>
-				{/if}
 			</div>
-		{/if}
-		<div class="flex h-full w-full gap-4 p-4">
-			<div class="grow">
-				{#if isPlaying}
-					{#if displayAs360}
-						{#if isLive}
-							<!-- renderMode="always" keeps the live VideoTexture advancing each frame -->
-							<Canvas renderMode="always">
-								<LiveThreeSixtyCameraView
-									{partID}
-									{resourceName}
-									coverage={panoCoverage}
-								/>
-							</Canvas>
+			{#if isPlaying}
+				<div class="flex gap-4 p-4 pb-3">
+					<RefetchController
+						{refetchInterval}
+						allowLive
+						queries={[imageQuery, pointcloudQuery]}
+					/>
+					{#if sourceNames.length > 0 && refetchInterval.current !== RefetchIntervals.LIVE}
+						<Label position="left">
+							Source
+							<Select
+								value={selectedSource}
+								on:change={onSourceSelect}
+								slot="input"
+							>
+								{#each sourceNames as name (name)}
+									<option value={name}>{name}</option>
+								{/each}
+							</Select>
+						</Label>
+					{/if}
+					{#if panoCoverage}
+						<Label>
+							{panoToggleLabel}
+							<ToggleButtons
+								slot="input"
+								options={['On', 'Off']}
+								selected={displayAs360 ? 'On' : 'Off'}
+								on:input={(event) => {
+									displayAs360 = event.detail === 'On'
+								}}
+							/>
+						</Label>
+					{/if}
+				</div>
+			{/if}
+			<div class="flex h-full w-full gap-4 p-4">
+				<div class="grow">
+					{#if isPlaying}
+						{#if displayAs360}
+							{#if isLive}
+								<!-- renderMode="always" keeps the live VideoTexture advancing each frame -->
+								<Canvas renderMode="always">
+									<LiveThreeSixtyCameraView
+										{partID}
+										{resourceName}
+										coverage={panoCoverage}
+									/>
+								</Canvas>
+							{:else}
+								<Canvas>
+									<ThreeSixtyCameraView
+										data={imageQuery.data}
+										coverage={panoCoverage}
+									/>
+								</Canvas>
+							{/if}
 						{:else}
-							<Canvas>
-								<ThreeSixtyCameraView
-									data={imageQuery.data}
-									coverage={panoCoverage}
-								/>
-							</Canvas>
+							<LiveOrPollingVideo
+								{partID}
+								{resourceName}
+								showResolutionOptions
+								{isLive}
+								data={imageQuery.data}
+								error={imageQuery.error}
+								isLoading={imageQuery.isLoading}
+								refetch={imageQuery.refetch}
+								showMousePositionTooltip={mousePostionTooltip === 'On'}
+								sourceName={selectedSource}
+							/>
 						{/if}
 					{:else}
-						<LiveOrPollingVideo
-							{partID}
-							{resourceName}
-							showResolutionOptions
-							{isLive}
-							data={imageQuery.data}
-							error={imageQuery.error}
-							isLoading={imageQuery.isLoading}
-							refetch={imageQuery.refetch}
-							showMousePositionTooltip={mousePostionTooltip === 'On'}
+						<div class="bg-medium flex h-64 w-80 items-center justify-center">
+							<Button
+								icon="play-circle-outline"
+								variant="dark"
+								onclick={() => {
+									isPlaying = true
+								}}
+							>
+								Start feed
+							</Button>
+						</div>
+					{/if}
+				</div>
+				{#if isPlaying}
+					<div class="flex flex-col items-start gap-2">
+						<ExportScreenshot
+							name={client.current?.name ?? ''}
 							sourceName={selectedSource}
+							getImage={exportScreenshotQuery.refetch}
 						/>
-					{/if}
-				{:else}
-					<div class="bg-medium flex h-64 w-80 items-center justify-center">
-						<Button
-							icon="play-circle-outline"
-							variant="dark"
-							onclick={() => {
-								isPlaying = true
-							}}
-						>
-							Start feed
-						</Button>
-					</div>
-				{/if}
-			</div>
-			{#if isPlaying}
-				<div class="flex flex-col items-start gap-2">
-					<ExportScreenshot
-						name={client.current?.name ?? ''}
-						sourceName={selectedSource}
-						getImage={exportScreenshotQuery.refetch}
-					/>
-					{#if addImageToDataset}
-						<Button
-							icon="layers-triple-outline"
-							onclick={async () => {
-								let imgData
-								if (refetchInterval.current === RefetchIntervals.LIVE) {
-									const { isSuccess, data } = await imageQuery.refetch()
-									if (!isSuccess) return
-									imgData = data
-								} else {
-									imgData = imageQuery.data
-								}
+						{#if addImageToDataset}
+							<Button
+								icon="layers-triple-outline"
+								onclick={async () => {
+									let imgData
+									if (refetchInterval.current === RefetchIntervals.LIVE) {
+										const { isSuccess, data } = await imageQuery.refetch()
+										if (!isSuccess) return
+										imgData = data
+									} else {
+										imgData = imageQuery.data
+									}
 
-								const matchingImage = pickImageForSource(imgData?.images, selectedSource)
-								const image = matchingImage?.image
-								const mimeType = matchingImage?.mimeType
+									const matchingImage = pickImageForSource(imgData?.images, selectedSource)
+									const image = matchingImage?.image
+									const mimeType = matchingImage?.mimeType
 
-								if (image) {
-									addImageToDataset({
-										binaryData: new Uint8Array(image),
-										partID,
-										componentType: 'camera',
-										componentName: resourceName,
-										methodName: 'captureAllFromCamera',
-										mimeType: mimeType ?? 'image/png',
-										dataRequestTimes: [new Date(), new Date()],
-									})
-								}
-							}}
-						>
-							Add current image to dataset
-						</Button>
-					{/if}
-					{#if !isFirefox}
-						<PictureInPictureButton
-							{resourceName}
-							rate={refetchInterval.current}
-						/>
-					{/if}
-					<Label>
-						Mouse Position Tooltip
+									if (image) {
+										addImageToDataset({
+											binaryData: new Uint8Array(image),
+											partID,
+											componentType: 'camera',
+											componentName: resourceName,
+											methodName: 'captureAllFromCamera',
+											mimeType: mimeType ?? 'image/png',
+											dataRequestTimes: [new Date(), new Date()],
+										})
+									}
+								}}
+							>
+								Add current image to dataset
+							</Button>
+						{/if}
+						{#if !isFirefox}
+							<PictureInPictureButton
+								{resourceName}
+								rate={refetchInterval.current}
+							/>
+						{/if}
+						<Label>
+							Mouse Position Tooltip
 
-						<ToggleButtons
-							slot="input"
-							options={['On', 'Off']}
-							selected={mousePostionTooltip}
-							on:input={setMousePostionTooltip}
-						/>
-					</Label>
-				</div>
-			{/if}
-		</div>
+							<ToggleButtons
+								slot="input"
+								options={['On', 'Off']}
+								selected={mousePostionTooltip}
+								on:input={setMousePostionTooltip}
+							/>
+						</Label>
+					</div>
+				{/if}
+			</div>
+		</section>
 
 		<section
 			class="flex flex-col gap-4 p-4"
-			aria-labelledby={headingID}
+			aria-labelledby={getPointCloudHeadingID}
 		>
-			<div>
-				<h3
-					id={headingID}
-					class="pb-1.5 font-semibold"
-				>
-					GetPointCloud
-				</h3>
+			<div class="flex flex-col gap-0.5">
+				<SectionTitle
+					title="GetPointCloud"
+					api="rdk:component:camera"
+					headingId={getPointCloudHeadingID}
+				/>
 				<p class="text-subtle-2 text-xs">
 					Get depth measurement data from cameras with depth sensing support
 				</p>

package/dist/components/widgets/camera/live-or-polling-video.svelte

@@ -14,6 +14,7 @@
 	import Progress from '../../progress.svelte'
 	import { formatNumeric } from '../../../format'
 	import { useMeasureFps } from '../../../fps.svelte'
+	import { usePip } from '../../../pip/context.svelte'
 
 	import { getBlobForViamDepth, VIAM_DEPTH_MIME_TYPE } from './decode-viam-depth'
 	import { pickImageForSource } from './pick-image-for-source'
@@ -52,7 +53,13 @@
 	let vfcID = 0
 	let liveStreamStart: DOMHighResTimeStamp | undefined
 
+	const pip = usePip()
+
 	const setMediaStream = (mediaStream: MediaStream | null) => {
+		if (mediaStream) {
+			pip.setStream(resourceName, mediaStream)
+		}
+
 		if (videoElement) {
 			// TODO(2025-01-31): Remove these function guards.
 			// Sentry has some error traces where "cancelVideoFrameCallback is not a function".
@@ -190,6 +197,7 @@
 		return () =>
 			untrack(() => {
 				disableStream().then(() => {
+					pip.setStream(resourceName, null)
 					setMediaStream(null)
 				})
 			})
@@ -301,7 +309,6 @@
 	}
 
 	const fps = useMeasureFps()
-
 	$effect(() => {
 		let id: number | undefined
 
@@ -393,6 +400,7 @@
 {#if showResolutionOptions && isLive}
 	<MutationSection
 		title="SetStreamOptions"
+		api="rdk:component:camera"
 		description="Change the resolution of the live stream video feed"
 		lastError={resolutionMutation.error}
 		class="-m-4 mt-4"

package/dist/components/widgets/discovery/discovery.svelte

@@ -135,6 +135,7 @@
 
 		<ApiSection
 			title="DiscoverResources"
+			api="rdk:service:discovery"
 			class="relative"
 		>
 			<Query

package/dist/components/widgets/encoder/encoder-position-type.d.ts

@@ -0,0 +1,8 @@
+import { EncoderPositionType, type EncoderProperties } from '@viamrobotics/sdk';
+/**
+ * Picks the position type to request from an encoder based on its properties.
+ * @param properties - The encoder's reported properties, if loaded.
+ * @returns A single-element argument tuple for `getPosition`.
+ * @example getEncoderPositionArgs({ angleDegreesSupported: true }) // [EncoderPositionType.ANGLE_DEGREES]
+ */
+export declare const getEncoderPositionArgs: (properties: EncoderProperties | undefined) => [EncoderPositionType];

package/dist/components/widgets/encoder/encoder-position-type.js

@@ -0,0 +1,20 @@
+import { EncoderPositionType } from '@viamrobotics/sdk';
+/**
+ * Picks the position type to request from an encoder based on its properties.
+ * @param properties - The encoder's reported properties, if loaded.
+ * @returns A single-element argument tuple for `getPosition`.
+ * @example getEncoderPositionArgs({ angleDegreesSupported: true }) // [EncoderPositionType.ANGLE_DEGREES]
+ */
+export const getEncoderPositionArgs = (properties) => {
+    if (!properties) {
+        return [EncoderPositionType.UNSPECIFIED];
+    }
+    const { angleDegreesSupported, ticksCountSupported } = properties;
+    if (angleDegreesSupported) {
+        return [EncoderPositionType.ANGLE_DEGREES];
+    }
+    if (ticksCountSupported) {
+        return [EncoderPositionType.TICKS_COUNT];
+    }
+    return [EncoderPositionType.UNSPECIFIED];
+};

package/dist/components/widgets/encoder/encoder.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button } from '@viamrobotics/prime-core'
-	import { EncoderClient, EncoderPositionType, type EncoderProperties } from '@viamrobotics/sdk'
+	import { EncoderClient } from '@viamrobotics/sdk'
 	import {
 		createResourceClient,
 		createResourceMutation,
@@ -14,6 +14,7 @@
 	import RefetchController from '../../refetch-controller.svelte'
 	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
 
+	import { getEncoderPositionArgs } from './encoder-position-type'
 	import Position from './position.svelte'
 
 	interface Props {
@@ -35,24 +36,6 @@
 		'encoder-view'
 	)
 
-	const getPositionArgs = (properties: EncoderProperties | undefined): [EncoderPositionType] => {
-		if (!properties) {
-			return [EncoderPositionType.UNSPECIFIED]
-		}
-
-		const { angleDegreesSupported, ticksCountSupported } = properties
-
-		if (angleDegreesSupported) {
-			return [EncoderPositionType.ANGLE_DEGREES]
-		}
-
-		if (ticksCountSupported) {
-			return [EncoderPositionType.TICKS_COUNT]
-		}
-
-		return [EncoderPositionType.UNSPECIFIED]
-	}
-
 	const propertiesQuery = createResourceQuery(client, 'getProperties', () => ({
 		refetchInterval: refetchInterval.current,
 	}))
@@ -60,7 +43,7 @@
 	const positionQuery = createResourceQuery(
 		client,
 		'getPosition',
-		() => getPositionArgs(propertiesQuery.data),
+		() => getEncoderPositionArgs(propertiesQuery.data),
 		() => ({
 			enabled: propertiesQuery.data !== undefined,
 			refetchInterval: refetchInterval.current,
@@ -81,6 +64,7 @@
 		<div class="grid w-full grid-cols-2 divide-x">
 			<ApiSection
 				title="GetPosition"
+				api="rdk:component:encoder"
 				tooltip="Relative encoders return ticks since last zeroing. Absolute encoders return degrees."
 				class="gap-3"
 			>
@@ -99,6 +83,7 @@
 
 			<ApiSection
 				title="ResetPosition"
+				api="rdk:component:encoder"
 				description="Set the current position as the new zero position"
 			>
 				<Button

package/dist/components/widgets/encoder/get-position-widget.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { EncoderClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Queries from '../../queries.svelte'
+
+	import { getEncoderPositionArgs } from './encoder-position-type'
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		EncoderClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const propertiesQuery = createResourceQuery(client, 'getProperties', { refetchInterval: 500 })
+
+	const positionQuery = createResourceQuery(
+		client,
+		'getPosition',
+		() => getEncoderPositionArgs(propertiesQuery.data),
+		() => ({
+			enabled: propertiesQuery.data !== undefined,
+			refetchInterval: 500,
+		})
+	)
+</script>
+
+<ApiSection
+	title="GetPosition"
+	tooltip="Relative encoders return ticks since last zeroing. Absolute encoders return degrees."
+	bottomText="Updates automatically"
+	class="grow"
+>
+	<Queries queries={[propertiesQuery, positionQuery]}>
+		{#if positionQuery.data !== undefined}
+			{@const [position, encoderPositionType] = positionQuery.data}
+			<div class="font-roboto-mono flex flex-col gap-2 text-sm">
+				<Position
+					{position}
+					{encoderPositionType}
+				/>
+			</div>
+		{/if}
+	</Queries>
+</ApiSection>

package/dist/components/widgets/encoder/get-position-widget.svelte.d.ts

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

package/dist/components/widgets/gantry/gantry.svelte

@@ -6,6 +6,7 @@
 		createResourceQuery,
 	} from '@viamrobotics/svelte-sdk'
 
+	import { apiDocsHref } from '../../../api-docs-href'
 	import ApiSection from '../../api-section.svelte'
 	import ConnectionStatus from '../../connection-status.svelte'
 	import IsMoving from '../../is-moving.svelte'
@@ -51,12 +52,26 @@
 					aria-labelledby={positionHeadingID}
 				>
 					<h3
-						class="flex flex-row items-center gap-1 text-sm"
+						class="text-subtle-2 flex flex-row items-center gap-1 text-sm"
 						id={positionHeadingID}
 					>
-						<span class="font-semibold"> GetPosition </span>
+						<a
+							href={apiDocsHref('rdk:component:gantry', 'getPosition')}
+							target="_blank"
+							rel="noopener noreferrer external"
+							class="decoration-gray-5 hover:decoration-default text-default font-mono font-semibold underline underline-offset-3"
+						>
+							GetPosition
+						</a>
 						and
-						<span class="font-semibold"> GetLengths </span>
+						<a
+							href={apiDocsHref('rdk:component:gantry', 'getLengths')}
+							target="_blank"
+							rel="noopener noreferrer external"
+							class="decoration-gray-5 hover:decoration-default text-default font-mono font-semibold underline underline-offset-3"
+						>
+							GetLengths
+						</a>
 					</h3>
 					<Queries queries={[positionQuery, lengthsQuery]}>
 						{@const positions = positionQuery.data}
@@ -69,7 +84,10 @@
 						{/if}
 					</Queries>
 				</ApiSection>
-				<ApiSection title="MoveToPosition">
+				<ApiSection
+					title="MoveToPosition"
+					api="rdk:component:gantry"
+				>
 					<Query query={positionQuery}>
 						{@const positions = positionQuery.data}
 						{#if positions !== undefined}
@@ -106,6 +124,7 @@
 					</ApiSection>
 					<ApiSection
 						title="Home"
+						api="rdk:component:gantry"
 						description="Run the homing sequence"
 					>
 						<Home
@@ -116,7 +135,10 @@
 				</div>
 			</div>
 			<div class="ml-auto flex w-full max-w-40 flex-col divide-y">
-				<ApiSection title="Stop">
+				<ApiSection
+					title="Stop"
+					api="rdk:component:gantry"
+				>
 					<StopButton
 						error={stopMutation.error}
 						onStop={() => {
@@ -126,6 +148,7 @@
 				</ApiSection>
 				<IsMoving
 					client={GantryClient}
+					api="rdk:component:gantry"
 					{partID}
 					{resourceName}
 				/>

package/dist/components/widgets/gantry/get-position-widget.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { GantryClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Queries from '../../queries.svelte'
+
+	import PositionAndLengths from './position-and-lengths.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		GantryClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const options = { refetchInterval: 500 }
+	const positionQuery = createResourceQuery(client, 'getPosition', options)
+	const lengthsQuery = createResourceQuery(client, 'getLengths', options)
+</script>
+
+<ApiSection
+	title="GetPosition"
+	bottomText="Updates automatically"
+	class="grow"
+>
+	<Queries queries={[positionQuery, lengthsQuery]}>
+		{@const positions = positionQuery.data}
+		{@const lengths = lengthsQuery.data ?? []}
+		{#if positions !== undefined}
+			<PositionAndLengths
+				{positions}
+				{lengths}
+			/>
+		{/if}
+	</Queries>
+</ApiSection>

package/dist/components/widgets/gantry/get-position-widget.svelte.d.ts

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