@viamrobotics/test-widgets 0.7.0 → 0.8.0

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

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

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

@@ -90,8 +90,11 @@
 		}
 	}
 
+	// stopImmediatePropagation (not stopPropagation) in the capture phase so movement
+	// keys never reach sibling window keydown listeners on the same target — e.g. the
+	// config builder's "A" add-resource hotkey. stopPropagation leaves siblings running.
 	const onKeydown = (event: KeyboardEvent) => {
-		if (!isKeyboardEnabled || event.repeat) {
+		if (!isKeyboardEnabled) {
 			return
 		}
 
@@ -100,9 +103,13 @@
 			return
 		}
 
-		event.stopPropagation()
+		event.stopImmediatePropagation()
 		event.preventDefault()
 
+		if (event.repeat) {
+			return
+		}
+
 		pressedKeys[key] = true
 		onKeyChange()
 	}
@@ -117,7 +124,7 @@
 			return
 		}
 
-		event.stopPropagation()
+		event.stopImmediatePropagation()
 		event.preventDefault()
 
 		pressedKeys[key] = false
@@ -132,8 +139,8 @@
 </script>
 
 <svelte:window
-	onkeydown={onKeydown}
-	onkeyup={onKeyup}
+	onkeydowncapture={onKeydown}
+	onkeyupcapture={onKeyup}
 />
 
 <div class="flex grow flex-col gap-6">

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
 

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,

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/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;

package/dist/components/widgets/gantry/is-moving-widget.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { GantryClient } from '@viamrobotics/sdk'
+
+	import IsMoving from '../../is-moving.svelte'
+	import { ResourceTriplets } from '../../../resource-triplet'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<IsMoving
+	client={GantryClient}
+	api={ResourceTriplets.Gantry}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/gantry/is-moving-widget.svelte.d.ts

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

package/dist/components/widgets/gripper/gripper.svelte

@@ -52,7 +52,7 @@
 					/>
 				</ApiSection>
 			</span>
-			<div class="flex shrink-0 flex-col divide-y">
+			<div class="flex flex-col divide-y">
 				<ApiSection
 					title="Stop"
 					api="rdk:component:gripper"

package/dist/components/widgets/gripper/is-holding-something.svelte

@@ -34,10 +34,7 @@
 	bottomText="Updates automatically"
 	class="grow"
 >
-	<Query
-		{query}
-		contentCx="h-5"
-	>
+	<Query {query}>
 		<div class="flex items-center gap-2">
 			{#if query.data !== undefined}
 				{#if query.data}

package/dist/components/widgets/gripper/is-moving-widget.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { GripperClient } from '@viamrobotics/sdk'
+
+	import IsMoving from '../../is-moving.svelte'
+	import { ResourceTriplets } from '../../../resource-triplet'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<IsMoving
+	client={GripperClient}
+	api={ResourceTriplets.Gripper}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/gripper/is-moving-widget.svelte.d.ts

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

package/dist/components/widgets/motor/is-moving-widget.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MotorClient } from '@viamrobotics/sdk'
+
+	import IsMoving from '../../is-moving.svelte'
+	import { ResourceTriplets } from '../../../resource-triplet'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<IsMoving
+	client={MotorClient}
+	api={ResourceTriplets.Motor}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/motor/is-moving-widget.svelte.d.ts

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

package/dist/components/widgets/motor/motor.svelte

@@ -148,10 +148,7 @@
   Stepper motors will report ”true” if they are being powered while holding
   a position and while they are turning."
 						>
-							<Query
-								contentCx="h-4"
-								query={isPoweredQuery}
-							>
+							<Query query={isPoweredQuery}>
 								{#if isPoweredQuery.data !== undefined}
 									{@const [isPowered, powerPct] = isPoweredQuery.data}
 									<span class="font-roboto-mono flex flex-row gap-1 text-xs">
@@ -171,10 +168,7 @@
 								class="gap-3 p-0"
 								tooltip="Reports the position of an encoded motor in revolutions from zero/home."
 							>
-								<Query
-									contentCx=""
-									query={positionQuery}
-								>
+								<Query query={positionQuery}>
 									<p class="font-roboto-mono text-default text-xs">
 										{formatNumeric(positionQuery.data, 4)}
 									</p>

package/dist/components/widgets/movement-sensor/get-accuracy-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { MovementSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Accuracy from './accuracy.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MovementSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getAccuracy', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetAccuracy"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Accuracy data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/movement-sensor/get-accuracy-widget.svelte.d.ts

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

package/dist/components/widgets/movement-sensor/get-compass-heading-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { MovementSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import CompassHeading from './compass-heading.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MovementSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getCompassHeading', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetCompassHeading"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<CompassHeading data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/movement-sensor/get-compass-heading-widget.svelte.d.ts

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

package/dist/components/widgets/movement-sensor/get-orientation-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { MovementSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Orientation from './orientation.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MovementSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getOrientation', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetOrientation"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Orientation data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/movement-sensor/get-orientation-widget.svelte.d.ts

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

package/dist/components/widgets/movement-sensor/get-position-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { MovementSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MovementSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getPosition', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetPosition"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Position data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/movement-sensor/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/power-sensor/get-current-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { PowerSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import CurrentReading from './current-reading.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		PowerSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getCurrent', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetCurrent"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<CurrentReading data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/power-sensor/get-current-widget.svelte.d.ts

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