@viamrobotics/test-widgets 0.0.1

package/dist/components/widgets/motor/go-to.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 {
+		goTo: (rpm: number, pos: number) => void
+	}
+
+	const { goTo }: Props = $props()
+
+	let targetPosition = $state(0.5)
+	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. Absolute value.
+				</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 whitespace-nowrap">
+			Target position
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<p
+					slot="description"
+					class="text-xs whitespace-normal"
+				>
+					Target position the motor will turn to in revolutions from home/zero.
+				</p>
+			</Tooltip>
+		</p>
+
+		<NumericInput
+			slot="input"
+			value={targetPosition}
+			on:change={(event) => {
+				targetPosition = numberValueFromEvent(event) ?? 0
+			}}
+		/>
+	</Label>
+</div>
+
+<div class="mt-auto">
+	<Button
+		icon="play-circle-outline"
+		onclick={() => goTo(rpm, targetPosition)}
+	>
+		Execute
+	</Button>
+</div>

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

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

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

@@ -0,0 +1,179 @@
+<script lang="ts">
+	import { MotorClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} 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 Query from '../../query.svelte'
+	import StopButton from '../../stop-button.svelte'
+	import { formatNumeric } from '../../../format'
+
+	import GoFor from './go-for.svelte'
+	import GoTo from './go-to.svelte'
+	import QuickMove from './quick-move.svelte'
+	import SetPower from './set-power.svelte'
+	import SetRPM from './set-rpm.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MotorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const propertiesQuery = createResourceQuery(client, 'getProperties', {
+		refetchInterval: false,
+	})
+
+	const isPoweredQuery = createResourceQuery(client, 'isPowered', {
+		refetchInterval: 500,
+	})
+
+	const positionQuery = createResourceQuery(client, 'getPosition', () => ({
+		enabled: propertiesQuery.data?.positionReporting === true,
+		refetchInterval: 500,
+	}))
+
+	const setPowerMutation = createResourceMutation(client, 'setPower')
+	const quickSetPowerMutation = createResourceMutation(client, 'setPower')
+	const setRPMMutation = createResourceMutation(client, 'setRPM')
+	const goForMutation = createResourceMutation(client, 'goFor')
+	const goToMutation = createResourceMutation(client, 'goTo')
+	const stopMutation = createResourceMutation(client, 'stop')
+
+	const setPower = (val: number) => {
+		setPowerMutation.mutate([val], {})
+	}
+
+	const quickSetPower = (val: number) => {
+		quickSetPowerMutation.mutate([val], {})
+	}
+
+	const setRPM = (val: number) => {
+		setRPMMutation.mutate([val], {})
+	}
+
+	const goFor = (rpm: number, revolutions: number) => {
+		goForMutation.mutate([rpm, revolutions], {})
+	}
+
+	const goTo = (rpm: number, pos: number) => {
+		goToMutation.mutate([rpm, pos], {})
+	}
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex flex-row divide-x">
+			<div class="flex w-full flex-col divide-y">
+				<MutationSection
+					title="Quick move"
+					lastError={quickSetPowerMutation.error}
+				>
+					<QuickMove setPower={quickSetPower} />
+				</MutationSection>
+				<MutationSection
+					title="SetPower"
+					description="Move continuously"
+					lastError={setPowerMutation.error}
+				>
+					<SetPower {setPower} />
+				</MutationSection>
+				{#if propertiesQuery.data?.positionReporting}
+					<MutationSection
+						title="SetRPM"
+						description="Move indefinitely at a specified speed."
+						lastError={setRPMMutation.error}
+					>
+						<SetRPM {setRPM} />
+					</MutationSection>
+					<MutationSection
+						title="GoFor"
+						description="Move a specified number of revolutions"
+						lastError={goForMutation.error}
+					>
+						<GoFor {goFor} />
+					</MutationSection>
+					<MutationSection
+						title="GoTo"
+						description="Turn to a specified position"
+						lastError={goToMutation.error}
+					>
+						<GoTo {goTo} />
+					</MutationSection>
+				{/if}
+			</div>
+
+			<div class="ml-auto flex w-full max-w-1/2 flex-col divide-y sm:max-w-1/3">
+				<ApiSection title="Stop">
+					<StopButton
+						error={stopMutation.error}
+						onStop={() => {
+							stopMutation.mutate([])
+						}}
+					/>
+				</ApiSection>
+				<IsMoving
+					client={MotorClient}
+					{partID}
+					{resourceName}
+				>
+					<div class="flex flex-col gap-6 pt-2">
+						<ApiSection
+							title="IsPowered"
+							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}
+							>
+								{#if isPoweredQuery.data !== undefined}
+									{@const [isPowered, powerPct] = isPoweredQuery.data}
+									<span class="font-roboto-mono flex flex-row gap-1 text-xs">
+										<p class="text-default">{isPowered}</p>
+										<p class="text-disabled">/</p>
+										<p class="text-subtle-1">
+											{formatNumeric(powerPct * 100, 1)}%
+										</p>
+									</span>
+								{/if}
+							</Query>
+						</ApiSection>
+						{#if propertiesQuery.data?.positionReporting === true}
+							<ApiSection
+								title="GetPosition"
+								class="gap-3 p-0"
+								tooltip="Reports the position of an encoded motor in revolutions from zero/home."
+							>
+								<Query
+									contentCx=""
+									query={positionQuery}
+								>
+									<p class="font-roboto-mono text-default text-xs">
+										{formatNumeric(positionQuery.data, 4)}
+									</p>
+								</Query>
+							</ApiSection>
+						{/if}
+					</div>
+				</IsMoving>
+			</div>
+		</div>
+	{/snippet}
+</ConnectionStatus>

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

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

package/dist/components/widgets/motor/quick-move-widget.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 QuickMove from './quick-move.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MotorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const quickSetPowerMutation = createResourceMutation(client, 'setPower')
+</script>
+
+<MutationView lastError={quickSetPowerMutation.error}>
+	<QuickMove
+		setPower={(val) => {
+			quickSetPowerMutation.mutate([val], {})
+		}}
+	/>
+</MutationView>

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Icon, Label, RangeInput } from '@viamrobotics/prime-core'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	interface Props {
+		setPower: (_: number) => void
+	}
+
+	const { setPower }: Props = $props()
+
+	let powerPct = $state(0.5)
+
+	let isPressed = false
+	const move = (forward: boolean) => {
+		isPressed = true
+		setPower((forward ? 1 : -1) * powerPct)
+	}
+	const stop = () => {
+		if (isPressed) {
+			setPower(0)
+		}
+		isPressed = false
+	}
+</script>
+
+<Label cx="max-w-[282px]">
+	<span class="text-subtle-1 text-xs">Power</span>
+
+	<RangeInput
+		slot="input"
+		value={powerPct}
+		max={1}
+		step={0.05}
+		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 class="flex flex-col gap-4">
+	<div class="flex flex-row gap-4">
+		<!-- NOTE(zp,2024-06-04) these are not prime buttons because prime does not provide on:mousedown or on:mouseup -->
+		<button
+			onmousedown={() => {
+				move(true)
+			}}
+			onmouseup={stop}
+			onmouseleave={stop}
+			class="border-light bg-light hover:border-medium hover:bg-medium active:bg-gray-2 w-20 border p-3 py-3"
+		>
+			<div class="flex flex-col gap-2">
+				<Icon
+					name="arrow-up"
+					cx="text-gray-6 self-center"
+				/>
+				<p class="font-roboto-mono text-xs uppercase">forward</p>
+			</div>
+		</button>
+		<button
+			onmousedown={() => {
+				move(false)
+			}}
+			onmouseup={stop}
+			onmouseleave={stop}
+			class="border-light bg-light hover:border-medium hover:bg-medium active:bg-gray-2 w-20 border p-3 py-3"
+		>
+			<div class="flex flex-col gap-2">
+				<Icon
+					name="arrow-up"
+					cx="text-gray-6 rotate-180 self-center"
+				/>
+				<p class="font-roboto-mono text-xs uppercase">backward</p>
+			</div>
+		</button>
+	</div>
+
+	<p class="text-subtle-2 mt-auto ml-auto text-xs">Press and hold</p>
+</div>

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

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

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { MotorClient } 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(
+		MotorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const setPowerMutation = createResourceMutation(client, 'setPower')
+
+	const setPower = (val: number) => setPowerMutation.mutate([val], {})
+</script>
+
+<MutationView lastError={setPowerMutation.error}>
+	<SetPower {setPower} />
+</MutationView>

package/dist/components/widgets/motor/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/motor/set-power.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Button, Icon, Label, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	interface Props {
+		setPower: (_: number) => void
+	}
+
+	const { setPower }: Props = $props()
+
+	let power = $state(0.5)
+</script>
+
+<div>
+	<Label cx="w-full max-w-[96px] gap-1 text-xs">
+		<div class="flex flex-row gap-1">
+			Power
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<p
+					slot="description"
+					class="text-xs"
+				>
+					The percentage of max power to send to the motor, in the range of –1.0 to 1.0.
+					<br /><br />
+					1 is 100% power forward; –1 is 100% power backward.
+				</p>
+			</Tooltip>
+		</div>
+
+		<NumericInput
+			slot="input"
+			value={power}
+			on:change={(event) => {
+				power = numberValueFromEvent(event) ?? 0
+			}}
+		/>
+	</Label>
+</div>
+<div class="mt-auto">
+	<Button
+		icon="play-circle-outline"
+		onclick={() => {
+			setPower(power)
+		}}
+	>
+		Execute
+	</Button>
+</div>

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

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

package/dist/components/widgets/motor/set-rpm-widget.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { MotorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import MutationView from '../../mutation-view.svelte'
+
+	import SetRPM from './set-rpm.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MotorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const setRPMMutation = createResourceMutation(client, 'setRPM')
+
+	const setRPM = (val: number) => setRPMMutation.mutate([val], {})
+</script>
+
+<MutationView lastError={setRPMMutation.error}>
+	<SetRPM {setRPM} />
+</MutationView>

package/dist/components/widgets/motor/set-rpm-widget.svelte.d.ts

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

package/dist/components/widgets/motor/set-rpm.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Button, Icon, Label, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	interface Props {
+		setRPM: (_: number) => void
+	}
+
+	const { setRPM }: Props = $props()
+
+	let rpm = $state(20)
+</script>
+
+<div>
+	<Label cx="w-full max-w-[96px] gap-1 text-xs">
+		<div class="flex flex-row gap-1">
+			RPM
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<p
+					slot="description"
+					class="text-xs"
+				>
+					Speed in revolutions per minute.
+				</p>
+			</Tooltip>
+		</div>
+
+		<NumericInput
+			slot="input"
+			value={rpm}
+			on:change={(event) => {
+				rpm = numberValueFromEvent(event) ?? 0
+			}}
+		/>
+	</Label>
+</div>
+<div class="mt-auto">
+	<Button
+		icon="play-circle-outline"
+		onclick={() => {
+			setRPM(rpm)
+		}}
+	>
+		Execute
+	</Button>
+</div>

package/dist/components/widgets/motor/set-rpm.svelte.d.ts

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

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { MovementSensorAccuracy } from '@viamrobotics/sdk'
+
+	import { Icon, Tooltip } from '@viamrobotics/prime-core'
+
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		data: MovementSensorAccuracy
+	}
+
+	const { data }: Props = $props()
+
+	const PositionNmeaGgaFixes = {
+		INVALID: 0,
+		GPS: 1,
+		DG: 2,
+		RTK: 4,
+		FRTK: 5,
+	}
+
+	const nmeaFix = $derived(data.positionNmeaGgaFix)
+</script>
+
+<dl class="flex flex-col gap-2">
+	<div class="flex w-3/4 justify-between gap-2 font-mono">
+		<dt class="text-subtle-1 flex flex-row gap-2">
+			<span class="uppercase">fix quality</span>
+			{#if nmeaFix === PositionNmeaGgaFixes.GPS || nmeaFix === PositionNmeaGgaFixes.DG}
+				<Tooltip location="bottom">
+					<p slot="description">Expect 1-5m accuracy.</p>
+
+					<Icon
+						name="information-outline"
+						cx="text-subtle-2"
+					/>
+				</Tooltip>
+			{:else if nmeaFix === PositionNmeaGgaFixes.RTK || nmeaFix === PositionNmeaGgaFixes.FRTK}
+				<Tooltip location="bottom">
+					<p>Expect 2-50cm accuracy.</p>
+
+					<Icon
+						name="information-outline"
+						cx="text-subtle-2"
+					/>
+				</Tooltip>
+			{/if}
+		</dt>
+		<dd>
+			{#if nmeaFix === PositionNmeaGgaFixes.INVALID}
+				Invalid
+			{:else if nmeaFix === PositionNmeaGgaFixes.GPS}
+				GPS
+			{:else if nmeaFix === PositionNmeaGgaFixes.DG}
+				DGPS/DGNSS
+			{:else if nmeaFix === PositionNmeaGgaFixes.RTK}
+				RTK
+			{:else if nmeaFix === PositionNmeaGgaFixes.FRTK}
+				FRTK
+			{/if}
+		</dd>
+	</div>
+	<div class="flex w-3/4 justify-between gap-2 font-mono">
+		<dt class="text-subtle-1 uppercase">HDOP</dt>
+		<dd>{formatNumeric(data.positionHdop)}</dd>
+	</div>
+	<div class="flex w-3/4 justify-between gap-2 font-mono">
+		<dt class="text-subtle-1 uppercase">VDOP</dt>
+		<dd>{formatNumeric(data.positionVdop)}</dd>
+	</div>
+</dl>

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

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