@viamrobotics/test-widgets 0.6.1 → 0.8.0

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/generic/generic.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { ResourceName } from '@viamrobotics/sdk'
 
+	import SectionTitle from '../../section-title.svelte'
+
 	import DoCommand from '../do-command/do-command.svelte'
 
 	interface Props {
@@ -11,6 +13,8 @@
 
 	const { partID, resourceName, isComponent }: Props = $props()
 
+	const api = $derived(`rdk:${isComponent ? 'component' : 'service'}:generic`)
+
 	const genericResourceName = $derived<ResourceName>({
 		namespace: 'rdk',
 		type: isComponent ? 'component' : 'service',
@@ -20,7 +24,10 @@
 </script>
 
 <div class="flex flex-col py-2 pl-4">
-	<h3 class="font-semibold">DoCommand</h3>
+	<SectionTitle
+		title="DoCommand"
+		{api}
+	/>
 </div>
 
 {#key genericResourceName}

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

@@ -30,10 +30,11 @@
 <ConnectionStatus {partID}>
 	{#snippet connected()}
 		<div class="flex flex-row divide-x">
-			<span class="flex flex-row gap-4">
+			<span class="flex grow flex-row gap-4">
 				<ApiSection
 					title="Open"
-					class="gap-3 pr-0"
+					api="rdk:component:gripper"
+					class="grow-0 gap-3 pr-0"
 				>
 					<Open
 						{partID}
@@ -42,7 +43,8 @@
 				</ApiSection>
 				<ApiSection
 					title="Grab"
-					class="gap-3 pl-0"
+					api="rdk:component:gripper"
+					class="grow-0 gap-3 pl-0"
 				>
 					<Grab
 						{partID}
@@ -50,8 +52,11 @@
 					/>
 				</ApiSection>
 			</span>
-			<div class="ml-auto flex w-full max-w-40 flex-col divide-y">
-				<ApiSection title="Stop">
+			<div class="flex flex-col divide-y">
+				<ApiSection
+					title="Stop"
+					api="rdk:component:gripper"
+				>
 					<StopButton
 						error={stopMutation.error}
 						onStop={() => {
@@ -61,6 +66,7 @@
 				</ApiSection>
 				<IsMoving
 					client={GripperClient}
+					api="rdk:component:gripper"
 					{partID}
 					{resourceName}
 				/>

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

@@ -30,13 +30,11 @@
 
 <ApiSection
 	title="IsHoldingSomething"
+	api="rdk:component:gripper"
 	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/input-controller/input-controller.svelte

@@ -54,7 +54,8 @@
 		</div>
 
 		<ApiSection
-			title="GetReadings"
+			title="GetEvents"
+			api="rdk:component:input_controller"
 			class="relative"
 		>
 			<Query

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

@@ -86,6 +86,7 @@
 				</MutationSection>
 				<MutationSection
 					title="SetPower"
+					api="rdk:component:motor"
 					description="Move continuously"
 					lastError={setPowerMutation.error}
 				>
@@ -94,6 +95,7 @@
 				{#if propertiesQuery.data?.positionReporting}
 					<MutationSection
 						title="SetRPM"
+						api="rdk:component:motor"
 						description="Move indefinitely at a specified speed."
 						lastError={setRPMMutation.error}
 					>
@@ -101,6 +103,7 @@
 					</MutationSection>
 					<MutationSection
 						title="GoFor"
+						api="rdk:component:motor"
 						description="Move a specified number of revolutions"
 						lastError={goForMutation.error}
 					>
@@ -108,6 +111,7 @@
 					</MutationSection>
 					<MutationSection
 						title="GoTo"
+						api="rdk:component:motor"
 						description="Turn to a specified position"
 						lastError={goToMutation.error}
 					>
@@ -117,7 +121,10 @@
 			</div>
 
 			<div class="ml-auto flex w-full max-w-1/2 flex-col divide-y sm:max-w-1/3">
-				<ApiSection title="Stop">
+				<ApiSection
+					title="Stop"
+					api="rdk:component:motor"
+				>
 					<StopButton
 						error={stopMutation.error}
 						onStop={() => {
@@ -127,22 +134,21 @@
 				</ApiSection>
 				<IsMoving
 					client={MotorClient}
+					api="rdk:component:motor"
 					{partID}
 					{resourceName}
 				>
 					<div class="flex flex-col gap-6 pt-2">
 						<ApiSection
 							title="IsPowered"
+							api="rdk:component:motor"
 							class="gap-3 p-0"
 							tooltip="Returns whether or not the motor is running and the current portion of max power.
 
   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">
@@ -158,13 +164,11 @@
 						{#if propertiesQuery.data?.positionReporting === true}
 							<ApiSection
 								title="GetPosition"
+								api="rdk:component:motor"
 								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/movement-sensor/movement-sensor.svelte

@@ -9,6 +9,9 @@
 	import ReadingsList from '../../readings-list.svelte'
 	import RefetchController from '../../refetch-controller.svelte'
 	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+	import SectionTitle from '../../section-title.svelte'
+
+	const MS_API = 'rdk:component:movement_sensor'
 
 	import Accuracy from './accuracy.svelte'
 	import CompassHeading from './compass-heading.svelte'
@@ -104,7 +107,10 @@
 				<div class="flex w-full flex-col gap-5 py-4 pr-6 pl-4 lg:w-1/4">
 					{#if propertiesQuery.data?.positionSupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">GetPosition</h3>
+							<SectionTitle
+								title="GetPosition"
+								api={MS_API}
+							/>
 							<Query
 								query={positionQuery}
 								contentCx="h-6"
@@ -118,9 +124,13 @@
 
 					{#if propertiesQuery.data?.orientationSupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetOrientation <span class="text-subtle-2 font-normal">(º)</span>
-							</h3>
+							<SectionTitle
+								title="GetOrientation"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={orientationQuery}
 								contentCx="h-6"
@@ -134,9 +144,13 @@
 
 					{#if propertiesQuery.data?.compassHeadingSupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetCompassHeading <span class="text-subtle-2 font-normal">(º)</span>
-							</h3>
+							<SectionTitle
+								title="GetCompassHeading"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={compassHeadingQuery}
 								contentCx="h-6"
@@ -152,9 +166,13 @@
 				<div class="flex w-full flex-col gap-5 p-4 lg:w-1/4">
 					{#if propertiesQuery.data?.angularVelocitySupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetAngularVelocity <span class="text-subtle-2 font-normal">(º/s)</span>
-							</h3>
+							<SectionTitle
+								title="GetAngularVelocity"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º/s)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={angularVelocityQuery}
 								contentCx="h-6"
@@ -168,9 +186,13 @@
 
 					{#if propertiesQuery.data?.linearVelocitySupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetLinearVelocity <span class="text-subtle-2 font-normal">(m/s)</span>
-							</h3>
+							<SectionTitle
+								title="GetLinearVelocity"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(m/s)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={linearVelocityQuery}
 								contentCx="h-6"
@@ -184,11 +206,14 @@
 
 					{#if propertiesQuery.data?.linearAccelerationSupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetLinearAcceleration <span class="text-subtle-2 font-normal"
-									>(m/s<sup>2</sup>)</span
-								>
-							</h3>
+							<SectionTitle
+								title="GetLinearAcceleration"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal"
+										>(m/s<sup>2</sup>)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={linearAccelerationQuery}
 								contentCx="h-6"
@@ -201,7 +226,10 @@
 					{/if}
 
 					<div class="flex flex-col gap-2">
-						<h3 class="font-semibold">GetAccuracy</h3>
+						<SectionTitle
+							title="GetAccuracy"
+							api={MS_API}
+						/>
 						<Query
 							query={accuracyQuery}
 							contentCx="h-6"
@@ -226,13 +254,12 @@
 			class="flex flex-col gap-4 p-4"
 			aria-labelledby={headingID}
 		>
-			<div>
-				<h3
-					id={headingID}
-					class="pb-1.5 font-semibold"
-				>
-					GetReadings
-				</h3>
+			<div class="flex flex-col gap-0.5">
+				<SectionTitle
+					title="GetReadings"
+					api={MS_API}
+					headingId={headingID}
+				/>
 				<p class="text-subtle-2 text-xs">Get all the measurements and data from the sensor</p>
 			</div>
 

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;