@viamrobotics/test-widgets 0.0.1

package/dist/components/widgets/board/gpio-read-wrapper.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { BoardClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import GpioRead from './gpio-read.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+		pin: string
+		setLastError: (err: Error | null) => void
+	}
+
+	const { pin, partID, resourceName, setLastError }: Props = $props()
+
+	let gpioState = $state<boolean>()
+	let pwmDutyCycle = $state<number>()
+	let pwmFreq = $state<number>()
+
+	const client = createResourceClient(
+		BoardClient,
+		() => partID,
+		() => resourceName
+	)
+
+	// Even though these seem like getters, they are actually mutations because they change pin states from write to read.
+	// So we have to let the user decide when to call them.
+	const getStateMutation = createResourceMutation(client, 'getGPIO')
+	const getDutyCycleMutation = createResourceMutation(client, 'getPWM')
+	const getFrequencyMutation = createResourceMutation(client, 'getPWMFrequency')
+
+	const getState = async () => {
+		try {
+			const data = await getStateMutation.mutateAsync([pin])
+			gpioState = data
+			setLastError(null)
+		} catch (error) {
+			setLastError(error as Error)
+		}
+	}
+	const getDutyCycle = async () => {
+		try {
+			const data = await getDutyCycleMutation.mutateAsync([pin])
+			pwmDutyCycle = data
+			setLastError(null)
+		} catch (error) {
+			setLastError(error as Error)
+		}
+	}
+	const getFrequency = async () => {
+		try {
+			const data = await getFrequencyMutation.mutateAsync([pin])
+			pwmFreq = data
+			setLastError(null)
+		} catch (error) {
+			setLastError(error as Error)
+		}
+	}
+</script>
+
+<GpioRead
+	{gpioState}
+	{pwmDutyCycle}
+	{pwmFreq}
+	{getState}
+	{getDutyCycle}
+	{getFrequency}
+/>

package/dist/components/widgets/board/gpio-read-wrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+    pin: string;
+    setLastError: (err: Error | null) => void;
+}
+declare const GpioReadWrapper: import("svelte").Component<Props, {}, "">;
+type GpioReadWrapper = ReturnType<typeof GpioReadWrapper>;
+export default GpioReadWrapper;

package/dist/components/widgets/board/gpio-read.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { formatNumeric } from '../../../format'
+
+	import ConfirmingButton from './confirming-button.svelte'
+	import PinSection from './pin-section.svelte'
+
+	interface Props {
+		gpioState: boolean | undefined
+		pwmDutyCycle: number | undefined
+		pwmFreq: number | undefined
+		getState: () => void
+		getDutyCycle: () => void
+		getFrequency: () => void
+	}
+
+	const { gpioState, pwmDutyCycle, pwmFreq, getState, getDutyCycle, getFrequency }: Props = $props()
+
+	const id = $props.id()
+	const stateSectionId = `${id}-state-section`
+	const dutySectionId = `${id}-duty-section`
+	const freqSectionId = `${id}-freq-section`
+
+	const stateButtonId = `${id}-state-pin-get`
+	const dutyButtonId = `${id}-duty-pin-get`
+	const freqButtonId = `${id}-freq-pin-get`
+
+	const formatState = (stateVal: boolean | undefined) => {
+		if (stateVal === undefined) {
+			return '––'
+		}
+		return stateVal ? 'High' : 'Low'
+	}
+</script>
+
+<PinSection title="Read pin">
+	<section
+		class="flex h-full max-h-18.5 w-full flex-col gap-1 p-3 text-xs"
+		aria-labelledby={stateSectionId}
+	>
+		<h5
+			id={stateSectionId}
+			class="text-subtle-1"
+		>
+			State
+		</h5>
+		<span class="flex w-full place-content-between content-stretch">
+			<output
+				class={[
+					'my-auto',
+					{
+						'text-disabled': gpioState === undefined,
+					},
+				]}
+				for={stateButtonId}
+			>
+				{formatState(gpioState)}
+			</output>
+
+			<ConfirmingButton
+				onclick={getState}
+				id={stateButtonId}
+				class="w-full max-w-11"
+			>
+				Get
+			</ConfirmingButton>
+		</span>
+	</section>
+	<div class="flex flex-col gap-4 p-3">
+		<section
+			class="flex h-full max-h-12.5 w-full flex-col gap-1 text-xs"
+			aria-labelledby={dutySectionId}
+		>
+			<h5
+				id={dutySectionId}
+				class="text-subtle-1"
+			>
+				PWM duty cycle <abbr class="text-disabled">(0-100%)</abbr>
+			</h5>
+
+			<span class="flex w-full place-content-between content-stretch">
+				<output
+					class={[
+						'my-auto',
+						{
+							'text-disabled': pwmDutyCycle === undefined,
+						},
+					]}
+					for={dutyButtonId}
+				>
+					{formatNumeric(pwmDutyCycle, 4)}
+				</output>
+				<ConfirmingButton
+					onclick={getDutyCycle}
+					id={dutyButtonId}
+					class="w-full max-w-11"
+				>
+					Get
+				</ConfirmingButton>
+			</span>
+		</section>
+		<section
+			class="flex h-full max-h-12.5 w-full flex-col gap-1 text-xs"
+			aria-labelledby={freqSectionId}
+		>
+			<h5
+				id={freqSectionId}
+				class="text-subtle-1"
+			>
+				PWM frequency <abbr class="text-disabled">(Hz)</abbr>
+			</h5>
+
+			<span class="flex w-full place-content-between content-stretch">
+				<output
+					class={[
+						'my-auto',
+						{
+							'text-disabled': pwmFreq === undefined,
+						},
+					]}
+					for={freqButtonId}
+				>
+					{formatNumeric(pwmFreq, 2)}
+				</output>
+				<ConfirmingButton
+					onclick={getFrequency}
+					id={freqButtonId}
+					class="w-full max-w-11"
+				>
+					Get
+				</ConfirmingButton>
+			</span>
+		</section>
+	</div>
+</PinSection>

package/dist/components/widgets/board/gpio-read.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    gpioState: boolean | undefined;
+    pwmDutyCycle: number | undefined;
+    pwmFreq: number | undefined;
+    getState: () => void;
+    getDutyCycle: () => void;
+    getFrequency: () => void;
+}
+declare const GpioRead: import("svelte").Component<Props, {}, "">;
+type GpioRead = ReturnType<typeof GpioRead>;
+export default GpioRead;

package/dist/components/widgets/board/gpio-write-wrapper.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { BoardClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import GpioWrite from './gpio-write.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+		pin: string
+		setLastError: (err: Error | null) => void
+	}
+
+	const { pin, partID, resourceName, setLastError }: Props = $props()
+
+	const client = createResourceClient(
+		BoardClient,
+		() => partID,
+		() => resourceName
+	)
+	const setStateMutation = createResourceMutation(client, 'setGPIO')
+	const setDutyCycleMutation = createResourceMutation(client, 'setPWM')
+	const setFrequencyMutation = createResourceMutation(client, 'setPWMFrequency')
+
+	const setState = async (high: boolean) => {
+		try {
+			await setStateMutation.mutateAsync([pin, high])
+			setLastError(null)
+		} catch (error) {
+			setLastError(error as Error)
+		}
+	}
+	const setDutyCycle = async (dutyCyclePct: number) => {
+		try {
+			await setDutyCycleMutation.mutateAsync([pin, dutyCyclePct])
+			setLastError(null)
+		} catch (error) {
+			setLastError(error as Error)
+		}
+	}
+	const setFrequency = async (frequencyHz: number) => {
+		try {
+			await setFrequencyMutation.mutateAsync([pin, frequencyHz])
+			setLastError(null)
+		} catch (error) {
+			setLastError(error as Error)
+		}
+	}
+</script>
+
+<GpioWrite
+	{setState}
+	{setDutyCycle}
+	{setFrequency}
+/>

package/dist/components/widgets/board/gpio-write-wrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+    pin: string;
+    setLastError: (err: Error | null) => void;
+}
+declare const GpioWriteWrapper: import("svelte").Component<Props, {}, "">;
+type GpioWriteWrapper = ReturnType<typeof GpioWriteWrapper>;
+export default GpioWriteWrapper;

package/dist/components/widgets/board/gpio-write.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { Label, NumericInput, ToggleButtons } from '@viamrobotics/prime-core'
+
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	import ConfirmingButton from './confirming-button.svelte'
+	import PinSection from './pin-section.svelte'
+
+	interface Props {
+		setState: (high: boolean) => void
+		setDutyCycle: (dutyCyclePct: number) => void
+		setFrequency: (frequencyHz: number) => void
+	}
+
+	const { setState, setDutyCycle, setFrequency }: Props = $props()
+
+	let desiredPinState: 'High' | 'Low' = $state('High')
+	let desiredDutyCycle = $state(0)
+	let desiredFrequency = $state(0)
+
+	const changePinState = (event: CustomEvent<string>) => {
+		desiredPinState = event.detail as 'High' | 'Low'
+	}
+</script>
+
+<PinSection title="Write pin">
+	<div class="flex w-full p-3 text-xs">
+		<ToggleButtons
+			cx="w-fit!"
+			options={['High', 'Low']}
+			selected={desiredPinState}
+			on:input={changePinState}
+		>
+			{#snippet legend()}
+				State
+			{/snippet}
+		</ToggleButtons>
+		<ConfirmingButton
+			class="mt-auto ml-auto w-full max-w-11"
+			onclick={() => {
+				setState(desiredPinState === 'High')
+			}}
+		>
+			Set
+		</ConfirmingButton>
+	</div>
+	<div class="flex h-full max-h-35 flex-col gap-4 p-3">
+		<div class="relative flex w-full">
+			<Label cx="w-fit!">
+				<h5>
+					PWM duty cycle
+					<abbr class="text-disabled">(0-100%)</abbr>
+				</h5>
+
+				<NumericInput
+					slot="input"
+					cx="max-w-[124px]"
+					value={desiredDutyCycle}
+					placeholder="0"
+					step={1}
+					on:change={(event) => {
+						desiredDutyCycle = numberValueFromEvent(event) ?? 0
+					}}
+				/>
+			</Label>
+			<!-- NOTE(zp,2024-06-27) This is absolute because the label text overflows the input
+          and would push the button out of the parent container-->
+			<ConfirmingButton
+				class="absolute right-0 bottom-0 w-full max-w-11"
+				onclick={() => {
+					// Duty cycle is displayed as [0, 100] but [0, 1] values are expected
+					setDutyCycle(desiredDutyCycle / 100)
+				}}
+			>
+				Set
+			</ConfirmingButton>
+		</div>
+		<div class="flex w-full">
+			<Label>
+				<h5>
+					PWM frequency
+					<abbr class="text-disabled">(Hz)</abbr>
+				</h5>
+
+				<NumericInput
+					slot="input"
+					value={desiredFrequency}
+					cx="max-w-[124px]"
+					placeholder="0"
+					step={0.01}
+					on:change={(event) => {
+						desiredFrequency = numberValueFromEvent(event) ?? 0
+					}}
+				/>
+			</Label>
+			<ConfirmingButton
+				class="mt-auto ml-auto w-full max-w-11"
+				onclick={() => {
+					setFrequency(desiredFrequency)
+				}}
+			>
+				Set
+			</ConfirmingButton>
+		</div>
+	</div>
+</PinSection>

package/dist/components/widgets/board/gpio-write.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    setState: (high: boolean) => void;
+    setDutyCycle: (dutyCyclePct: number) => void;
+    setFrequency: (frequencyHz: number) => void;
+}
+declare const GpioWrite: import("svelte").Component<Props, {}, "">;
+type GpioWrite = ReturnType<typeof GpioWrite>;
+export default GpioWrite;

package/dist/components/widgets/board/pin-section.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	import { twMerge } from 'tailwind-merge'
+
+	interface Props {
+		title: string
+		class?: string
+		children?: Snippet
+	}
+
+	const { title, class: className, children }: Props = $props()
+
+	const headingID = $props.id()
+</script>
+
+<section
+	class={twMerge('border-light w-full max-w-50 gap-6 divide-y border', className)}
+	aria-labelledby={headingID}
+>
+	<h4
+		id={headingID}
+		class="bg-light font-roboto-mono text-subtle-1 px-3 py-1.25 text-center text-sm uppercase"
+	>
+		{title}
+	</h4>
+	{@render children?.()}
+</section>

package/dist/components/widgets/board/pin-section.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const PinSection: import("svelte").Component<Props, {}, "">;
+type PinSection = ReturnType<typeof PinSection>;
+export default PinSection;

package/dist/components/widgets/board/pin-selector.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { Input, Label, ToggleButtons } from '@viamrobotics/prime-core'
+
+	import { PinModes, type PinSelection, PinTypes } from './board.js'
+
+	interface Props {
+		// NOTE(zp,2024-06-25) This was done instead of a bind:value to simplify unit-testing
+		value: PinSelection
+		onChange: (newVal: PinSelection) => void
+	}
+
+	const { value, onChange }: Props = $props()
+
+	const changePin = (event: Event) => {
+		const { value: newPinValue } = event.target as HTMLInputElement
+		onChange({ ...value, pin: newPinValue })
+	}
+
+	const changeType = (event: CustomEvent<string>) => {
+		onChange({
+			...value,
+			type: event.detail === PinTypes.GPIO ? PinTypes.GPIO : PinTypes.ANALOG,
+		})
+	}
+
+	const changeMode = (event: CustomEvent<string>) => {
+		onChange({
+			...value,
+			mode: event.detail === PinModes.READ ? PinModes.READ : PinModes.WRITE,
+		})
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	<Label>
+		Pin
+
+		<Input
+			slot="input"
+			cx="max-w-[120px]"
+			placeholder="0"
+			value={value.pin}
+			on:change={changePin}
+		/>
+	</Label>
+
+	<ToggleButtons
+		cx="w-fit!"
+		options={[PinTypes.GPIO, PinTypes.ANALOG]}
+		selected={value.type}
+		on:input={changeType}
+	>
+		{#snippet legend()}
+			Pin type
+		{/snippet}
+	</ToggleButtons>
+
+	<ToggleButtons
+		aria-label="Mode"
+		cx="w-fit!"
+		options={[PinModes.READ, PinModes.WRITE]}
+		selected={value.mode}
+		on:input={changeMode}
+	>
+		{#snippet legend()}
+			Mode
+		{/snippet}
+	</ToggleButtons>
+</div>

package/dist/components/widgets/board/pin-selector.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type PinSelection } from './board.ts';
+interface Props {
+    value: PinSelection;
+    onChange: (newVal: PinSelection) => void;
+}
+declare const PinSelector: import("svelte").Component<Props, {}, "">;
+type PinSelector = ReturnType<typeof PinSelector>;
+export default PinSelector;

package/dist/components/widgets/board/read-write-pins-widget.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import ReadWritePins from './read-write-pins.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<ReadWritePins
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/board/read-write-pins-widget.svelte.d.ts

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

package/dist/components/widgets/board/read-write-pins.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import ErrorDisplay from '../../error.svelte'
+
+	import AnalogReadWrapper from './analog-read-wrapper.svelte'
+	import AnalogWriteWrapper from './analog-write-wrapper.svelte'
+	import { PinModes, type PinSelection, PinTypes } from './board.js'
+	import GpioReadWrapper from './gpio-read-wrapper.svelte'
+	import GpioWriteWrapper from './gpio-write-wrapper.svelte'
+	import PinSelector from './pin-selector.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	let pinSelection: PinSelection = $state({
+		pin: '',
+		type: PinTypes.GPIO,
+		mode: PinModes.WRITE,
+	})
+
+	let currentError: Error | null = $state(null)
+
+	const setLastError = (err: Error | null) => {
+		currentError = err
+	}
+
+	const handleChangedPinSelection = (newVal: PinSelection) => {
+		pinSelection = newVal
+	}
+</script>
+
+<div class="flex w-full flex-col gap-6">
+	<div class="flex w-full gap-16">
+		<PinSelector
+			value={pinSelection}
+			onChange={handleChangedPinSelection}
+		/>
+		{#if pinSelection.type === PinTypes.GPIO && pinSelection.mode === PinModes.READ}
+			<GpioReadWrapper
+				pin={pinSelection.pin}
+				{partID}
+				{resourceName}
+				{setLastError}
+			/>
+		{:else if pinSelection.type === PinTypes.GPIO && pinSelection.mode === PinModes.WRITE}
+			<GpioWriteWrapper
+				pin={pinSelection.pin}
+				{partID}
+				{resourceName}
+				{setLastError}
+			/>
+		{:else if pinSelection.type === PinTypes.ANALOG && pinSelection.mode === PinModes.READ}
+			<AnalogReadWrapper
+				pin={pinSelection.pin}
+				{partID}
+				{resourceName}
+				{setLastError}
+			/>
+		{:else if pinSelection.type === PinTypes.ANALOG && pinSelection.mode === PinModes.WRITE}
+			<AnalogWriteWrapper
+				pin={pinSelection.pin}
+				{partID}
+				{resourceName}
+				{setLastError}
+			/>
+		{/if}
+	</div>
+	<ErrorDisplay lastError={currentError} />
+</div>

package/dist/components/widgets/board/read-write-pins.svelte.d.ts

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

package/dist/components/widgets/button/button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import ConnectionStatus from '../../connection-status.svelte'
+
+	import Push from './push.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="p-4">
+			<Push
+				{partID}
+				{resourceName}
+			/>
+		</div>
+	{/snippet}
+</ConnectionStatus>

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

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