npm - @viamrobotics/test-widgets - Versions diffs - 0.0.1 - Mend

@viamrobotics/test-widgets 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (479) hide show

package/dist/components/widgets/pcd/point-label.svelte ADDED Viewed

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { useThrelte } from '@threlte/core'
+	import { HTML } from '@threlte/extras'
+	import { onMount } from 'svelte'
+	import { type Intersection, type Points, Raycaster, Vector2, Vector3 } from 'three'
+	interface Props {
+		points: Points
+	}
+	const { points }: Props = $props()
+	const { renderer, size, camera, invalidate } = useThrelte()
+	const raycaster = new Raycaster()
+	raycaster.firstHitOnly = true
+	raycaster.params.Points.threshold = 0.01
+	const origin = new Vector3()
+	const pointer = new Vector2()
+	let intersection = $state<Intersection>()
+	const raycast = (event: PointerEvent | WheelEvent) => {
+		const { width, height } = $size
+		// Standard screen space to NDC space conversion
+		pointer.set((event.offsetX / width) * 2 - 1, -(event.offsetY / height) * 2 + 1)
+		raycaster.setFromCamera(pointer, camera.current)
+		intersection = raycaster.intersectObject(points)[0]
+		invalidate()
+	}
+	const onPointerLeave = () => {
+		intersection = undefined
+	}
+	onMount(() => {
+		const canvas = renderer.domElement
+		canvas.addEventListener('pointermove', raycast, { passive: true })
+		canvas.addEventListener('wheel', raycast, { passive: true })
+		canvas.addEventListener('pointerleave', onPointerLeave, { passive: true })
+		return () => {
+			canvas.removeEventListener('pointermove', raycast)
+			canvas.removeEventListener('wheel', raycast)
+			canvas.removeEventListener('pointerleave', onPointerLeave)
+		}
+	})
+</script>
+{#if intersection}
+	{@const { x, y, z } = intersection.point}
+	<HTML
+		center
+		position.x={x}
+		position.y={y}
+		position.z={z}
+	>
+		<div class="pointer-events-none -mt-16 bg-black p-2 text-xs whitespace-nowrap text-white">
+			x: {x.toFixed(3)}m, y: {y.toFixed(3)}m, z: {z.toFixed(3)}m
+			<br />
+			distance to origin: {intersection.point.distanceTo(origin).toFixed(3)}m
+		</div>
+		<!-- Triangle -->
+		<div
+			class="pointer-events-none absolute left-1/2 -mt-px -ml-1.5 h-0 w-0 border-t-[6px] border-r-[6px] border-l-[6px] border-transparent border-t-black"
+		></div>
+		<!-- Dot -->
+		<div
+			class="pointer-events-none absolute left-1/2 z-10 mt-2 -ml-1 h-2 w-2 rounded-full bg-red-500"
+		></div>
+	</HTML>
+{/if}

package/dist/components/widgets/pcd/point-label.svelte.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { type Points } from 'three';
+interface Props {
+    points: Points;
+}
+declare const PointLabel: import("svelte").Component<Props, {}, "">;
+type PointLabel = ReturnType<typeof PointLabel>;
+export default PointLabel;

package/dist/components/widgets/pcd/points.svelte ADDED Viewed

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { T, useThrelte } from '@threlte/core'
+	import { bvh } from '@threlte/extras'
+	import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js'
+	import PointLabel from './point-label.svelte'
+	interface Props {
+		data: Uint8Array
+		pointSize: number
+	}
+	const { data, pointSize }: Props = $props()
+	const { invalidate } = useThrelte()
+	bvh()
+	const loader = new PCDLoader()
+	const points = $derived(loader.parse(new Uint8Array(data).buffer))
+	$effect.pre(() => {
+		const { material } = points
+		material.size = pointSize
+		invalidate()
+	})
+</script>
+<T
+	is={points}
+	matrixAutoUpdate={false}
+	matrixWorldAutoUpdate={false}
+/>
+<PointLabel {points} />

package/dist/components/widgets/pcd/points.svelte.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+interface Props {
+    data: Uint8Array;
+    pointSize: number;
+}
+declare const Points: import("svelte").Component<Props, {}, "">;
+type Points = ReturnType<typeof Points>;
+export default Points;

package/dist/components/widgets/pcd/scene.svelte ADDED Viewed

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { CameraControls, Gizmo, Grid } from '@threlte/extras'
+	import { Vector3, type Vector3Tuple } from 'three'
+	import Points from './points.svelte'
+	interface Props {
+		data: Uint8Array
+		up: Vector3Tuple
+		pointSize: number
+	}
+	const { data, up, pointSize }: Props = $props()
+	const upToPlane = ([x, y, z]: Vector3Tuple) => {
+		if (x !== 0) {
+			return 'zy'
+		} else if (y !== 0) {
+			return 'xz'
+		} else if (z !== 0) {
+			return 'xy'
+		}
+		throw new Error('Invalid camera direction')
+	}
+	const upToPosition = ([x, y, z]: Vector3Tuple): Vector3Tuple => {
+		if (x !== 0) {
+			return [0, 0, x * 5]
+		} else if (y !== 0) {
+			return [0, 0, y * 5]
+		} else if (z !== 0) {
+			return [0, z * 5, 0]
+		}
+		throw new Error('Invalid camera direction')
+	}
+</script>
+<Points
+	{data}
+	{pointSize}
+/>
+{#key up}
+	<T.PerspectiveCamera
+		makeDefault
+		position={upToPosition(up)}
+		{up}
+	>
+		<CameraControls>
+			<Gizmo />
+		</CameraControls>
+	</T.PerspectiveCamera>
+{/key}
+<Grid
+	sectionColor="#333"
+	plane={upToPlane(up)}
+	infiniteGrid
+	fadeOrigin={new Vector3()}
+	fadeDistance={10}
+/>

package/dist/components/widgets/pcd/scene.svelte.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { type Vector3Tuple } from 'three';
+interface Props {
+    data: Uint8Array;
+    up: Vector3Tuple;
+    pointSize: number;
+}
+declare const Scene: import("svelte").Component<Props, {}, "">;
+type Scene = ReturnType<typeof Scene>;
+export default Scene;

package/dist/components/widgets/power-sensor/current-reading.svelte ADDED Viewed

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { formatNumeric } from '../../../format'
+	interface Props {
+		data: readonly [number, boolean]
+	}
+	const { data }: Props = $props()
+	const current = $derived(data[0])
+	const isAC = $derived(data[1])
+</script>
+<span class="font-roboto-mono flex flex-row gap-2">
+	{formatNumeric(current, 4)}
+	<abbr class="text-subtle-2">A</abbr>
+	<abbr class="text-subtle-2">({isAC ? 'AC' : 'DC'})</abbr>
+</span>

package/dist/components/widgets/power-sensor/current-reading.svelte.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+interface Props {
+    data: readonly [number, boolean];
+}
+declare const CurrentReading: import("svelte").Component<Props, {}, "">;
+type CurrentReading = ReturnType<typeof CurrentReading>;
+export default CurrentReading;

package/dist/components/widgets/power-sensor/power-reading.svelte ADDED Viewed

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { formatNumeric } from '../../../format'
+	interface Props {
+		data: number
+	}
+	const { data }: Props = $props()
+</script>
+<span class="font-roboto-mono flex flex-row gap-2">
+	{formatNumeric(data, 4)}
+	<abbr class="text-subtle-2">W</abbr>
+</span>

package/dist/components/widgets/power-sensor/power-reading.svelte.d.ts ADDED Viewed

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

package/dist/components/widgets/power-sensor/power-sensor.svelte ADDED Viewed

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { PowerSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+	import { slide } from 'svelte/transition'
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import Query from '../../query.svelte'
+	import ReadingsList from '../../readings-list.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+	import CurrentReading from './current-reading.svelte'
+	import PowerReading from './power-reading.svelte'
+	import VoltageReading from './voltage-reading.svelte'
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+	const { partID, resourceName }: Props = $props()
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'power-sensor'
+	)
+	let isGetReadingsEnabled = $state(false)
+	const client = createResourceClient(
+		PowerSensorClient,
+		() => partID,
+		() => resourceName
+	)
+	const currentQuery = createResourceQuery(client, 'getCurrent', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+	const voltageQuery = createResourceQuery(client, 'getVoltage', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+	const powerQuery = createResourceQuery(client, 'getPower', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+	const readingsQuery = createResourceQuery(client, 'getReadings', () => ({
+		enabled: isGetReadingsEnabled,
+		refetchInterval: refetchInterval.current,
+	}))
+</script>
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="p-4 pb-3">
+			<RefetchController
+				{refetchInterval}
+				queries={[currentQuery, voltageQuery, powerQuery, readingsQuery]}
+			/>
+		</div>
+		<div class="grid w-full grid-cols-3 divide-x">
+			<ApiSection
+				title="GetCurrent"
+				class="pb-5"
+			>
+				<Query
+					query={currentQuery}
+					contentCx="h-6"
+				>
+					{#if currentQuery.data !== undefined}
+						<CurrentReading data={currentQuery.data} />
+					{/if}
+				</Query>
+			</ApiSection>
+			<ApiSection
+				title="GetVoltage"
+				class="pb-5"
+			>
+				<Query
+					query={voltageQuery}
+					contentCx="h-6"
+				>
+					{#if voltageQuery.data !== undefined}
+						<VoltageReading data={voltageQuery.data} />
+					{/if}
+				</Query>
+			</ApiSection>
+			<ApiSection
+				title="GetPower"
+				class="pb-5"
+			>
+				<Query
+					query={powerQuery}
+					contentCx="h-6"
+				>
+					{#if powerQuery.data !== undefined}
+						<PowerReading data={powerQuery.data} />
+					{/if}
+				</Query>
+			</ApiSection>
+		</div>
+		<ApiSection
+			title="GetReadings"
+			description="Get all the measurements and data that this power sensor provides"
+		>
+			<Switch
+				bind:on={isGetReadingsEnabled}
+				cx="text-subtle-2"
+				annotated
+			/>
+			{#if isGetReadingsEnabled}
+				<div
+					transition:slide={{ duration: 150 }}
+					class="pt-2"
+				>
+					<Query
+						query={readingsQuery}
+						contentCx="h-6"
+					>
+						{#if readingsQuery.data !== undefined}
+							<ReadingsList data={readingsQuery.data} />
+						{/if}
+					</Query>
+				</div>
+			{/if}
+		</ApiSection>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/power-sensor/power-sensor.svelte.d.ts ADDED Viewed

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

package/dist/components/widgets/power-sensor/voltage-reading.svelte ADDED Viewed

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { formatNumeric } from '../../../format'
+	interface Props {
+		data: readonly [number, boolean]
+	}
+	const { data }: Props = $props()
+	const voltage = $derived(data[0])
+	const isAC = $derived(data[1])
+</script>
+<span class="font-roboto-mono flex flex-row gap-2">
+	{formatNumeric(voltage, 4)}
+	<abbr class="text-subtle-2">V</abbr>
+	<abbr class="text-subtle-2">({isAC ? 'AC' : 'DC'})</abbr>
+</span>

package/dist/components/widgets/power-sensor/voltage-reading.svelte.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+interface Props {
+    data: readonly [number, boolean];
+}
+declare const VoltageReading: import("svelte").Component<Props, {}, "">;
+type VoltageReading = ReturnType<typeof VoltageReading>;
+export default VoltageReading;

package/dist/components/widgets/sensor/sensor.svelte ADDED Viewed

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { SensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import Query from '../../query.svelte'
+	import ReadingsList from '../../readings-list.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+	const { partID, resourceName }: Props = $props()
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'sensor'
+	)
+	const client = createResourceClient(
+		SensorClient,
+		() => partID,
+		() => resourceName
+	)
+	const readingsQuery = createResourceQuery(client, 'getReadings', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+</script>
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="p-4 pb-3">
+			<RefetchController
+				{refetchInterval}
+				queries={[readingsQuery]}
+			/>
+		</div>
+		<ApiSection
+			title="GetReadings"
+			class="relative"
+		>
+			<Query
+				query={readingsQuery}
+				contentCx="h-6"
+			>
+				{#if readingsQuery.data !== undefined}
+					<ReadingsList data={readingsQuery.data} />
+				{/if}
+			</Query>
+		</ApiSection>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/sensor/sensor.svelte.d.ts ADDED Viewed

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

package/dist/components/widgets/servo/move-widget.svelte ADDED Viewed

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { ServoClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+	import Query from '../../query.svelte'
+	import Move from './move.svelte'
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+	const { partID, resourceName }: Props = $props()
+	const client = createResourceClient(
+		ServoClient,
+		() => partID,
+		() => resourceName
+	)
+	const positionQuery = createResourceQuery(client, 'getPosition', {
+		refetchInterval: 500,
+	})
+	const moveMutation = createResourceMutation(client, 'move')
+	const moveTo = (angle: number) => {
+		moveMutation.mutate([angle], {})
+	}
+</script>
+<Query query={positionQuery}>
+	{#if positionQuery.data !== undefined}
+		<Move
+			currentPosition={positionQuery.data}
+			{moveTo}
+			lastError={moveMutation.error}
+		/>
+	{/if}
+</Query>

package/dist/components/widgets/servo/move-widget.svelte.d.ts ADDED Viewed

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

package/dist/components/widgets/servo/move.svelte ADDED Viewed

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { Button, Icon, Label, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+	import ErrorDisplay from '../../error.svelte'
+	import { numberValueFromEvent } from '../../../event-handlers'
+	interface Props {
+		currentPosition: number
+		moveTo: (angle: number) => void
+		lastError: Error | null
+	}
+	const { currentPosition, moveTo, lastError }: Props = $props()
+	let desiredAngle = $state(0)
+	const desiredAngleErrorID = $props.id()
+</script>
+<div class="flex flex-col gap-5">
+	<Label cx="max-w-[100px]">
+		<div class="flex flex-col gap-1">
+			<p class="relative">
+				Desired angle
+				<abbr class="text-subtle-2">(º)</abbr>
+				<!-- absolute so that the tooltip can extend past the label width -->
+				<span class="absolute ml-1">
+					<Tooltip>
+						<Icon
+							name="information-outline"
+							cx="text-gray-6"
+						/>
+						<p
+							slot="description"
+							class="text-xs"
+						>
+							Accepts angles between 0-180 degrees
+						</p>
+					</Tooltip>
+				</span>
+			</p>
+			<NumericInput
+				type="integer"
+				value={desiredAngle}
+				on:change={(event) => {
+					desiredAngle = numberValueFromEvent(event) ?? 0
+				}}
+				step={1}
+				aria-errormessage={desiredAngleErrorID}
+			/>
+		</div>
+	</Label>
+	{#if desiredAngle < 0}
+		<p
+			id={desiredAngleErrorID}
+			class="text-danger-dark text-xs"
+		>
+			Desired angle must be non-negative
+		</p>
+	{/if}
+	<div class="mb-2 flex flex-col gap-2">
+		<span class="flex flex-row gap-2">
+			<h4 class="text-xs font-semibold">Quick set</h4>
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+				<span slot="description">
+					Will update the "Desired angle" input value but will not execute
+				</span>
+			</Tooltip>
+		</span>
+		<div class="flex flex-row gap-2">
+			<Button
+				onclick={() => {
+					desiredAngle = 0
+				}}
+			>
+				Zero
+			</Button>
+			<Button
+				onclick={() => {
+					desiredAngle = currentPosition
+				}}
+			>
+				Current position
+			</Button>
+		</div>
+	</div>
+	<Button
+		class="w-fit"
+		icon="play-circle-outline"
+		variant="dark"
+		onclick={() => moveTo(desiredAngle)}
+	>
+		Execute
+	</Button>
+</div>
+<ErrorDisplay {lastError} />

package/dist/components/widgets/servo/move.svelte.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+interface Props {
+    currentPosition: number;
+    moveTo: (angle: number) => void;
+    lastError: Error | null;
+}
+declare const Move: import("svelte").Component<Props, {}, "">;
+type Move = ReturnType<typeof Move>;
+export default Move;