@viamrobotics/test-widgets 0.0.1

package/dist/components/slam/map2d/motion-path.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    path: Float32Array | undefined;
+}
+/**
+ * Renders a motion plan using thick lines.
+ *
+ * Assumes the motion plan is coming in as a Float32Array in the following format:
+ * Float32Array([x1, y1, x2, y2, x3, y3, ...])
+ *
+ * Units are assumed to be in Meters.
+ * Must not contain NaN.
+ */
+declare const MotionPath: import("svelte").Component<Props, {}, "">;
+type MotionPath = ReturnType<typeof MotionPath>;
+export default MotionPath;

package/dist/components/slam/map2d/points.svelte

@@ -0,0 +1,60 @@
+<!--
+  @component
+  Renders Points from a .pcd file.
+  Creates an invisible plane mesh with dimensions matching the diameter of
+  the points' bounding sphere.
+  Emits click events that intersect this plane.
+-->
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { BufferAttribute } from 'three'
+	import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js'
+
+	import { mapColorAttributeGrayscale } from './color-map'
+	import { renderOrder } from './render-order'
+
+	interface Props {
+		/** A buffer representing a .pcd file */
+		pointcloud: Uint8Array
+		/** The size of each individual point */
+		size: number
+		/** Dispatched whenever a new .pcd file is parsed. Emits the radius and center of the cloud's bounding sphere. */
+		onUpdate: (payload: { radius: number; center: { x: number; y: number } }) => void
+	}
+
+	const { pointcloud, size, onUpdate }: Props = $props()
+
+	const loader = new PCDLoader()
+
+	const points = $derived(loader.parse(pointcloud.buffer as ArrayBuffer))
+</script>
+
+{#if points}
+	<T
+		is={points}
+		renderOrder={renderOrder.points}
+		frustumCulled={false}
+		oncreate={(ref) => {
+			const { color } = ref.geometry.attributes
+
+			if (color instanceof BufferAttribute) {
+				mapColorAttributeGrayscale(color)
+			}
+
+			ref.geometry.computeBoundingSphere()
+			const { boundingSphere } = ref.geometry
+
+			if (boundingSphere !== null) {
+				const radius = boundingSphere.radius
+				const center = boundingSphere.center
+				onUpdate({ center, radius })
+			}
+		}}
+	>
+		<T
+			is={points.material}
+			{size}
+			sizeAttenuation={false}
+		/>
+	</T>
+{/if}

package/dist/components/slam/map2d/points.svelte.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    /** A buffer representing a .pcd file */
+    pointcloud: Uint8Array;
+    /** The size of each individual point */
+    size: number;
+    /** Dispatched whenever a new .pcd file is parsed. Emits the radius and center of the cloud's bounding sphere. */
+    onUpdate: (payload: {
+        radius: number;
+        center: {
+            x: number;
+            y: number;
+        };
+    }) => void;
+}
+/**
+ * Renders Points from a .pcd file.
+ * Creates an invisible plane mesh with dimensions matching the diameter of
+ * the points' bounding sphere.
+ * Emits click events that intersect this plane.
+ */
+declare const Points: import("svelte").Component<Props, {}, "">;
+type Points = ReturnType<typeof Points>;
+export default Points;

package/dist/components/slam/map2d/render-order.d.ts

@@ -0,0 +1,7 @@
+export declare const renderOrder: {
+    readonly grid: 0;
+    readonly axes: 1;
+    readonly points: 2;
+    readonly motionPath: 3;
+    readonly markers: 4;
+};

package/dist/components/slam/map2d/render-order.js

@@ -0,0 +1,7 @@
+export const renderOrder = {
+    grid: 0,
+    axes: 1,
+    points: 2,
+    motionPath: 3,
+    markers: 4,
+};

package/dist/components/slam/map2d/scene.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { T, useThrelte } from '@threlte/core'
+	import { MathUtils, OrthographicCamera, type Vector2, Vector3 } from 'three'
+	import { MapControls } from 'three/examples/jsm/controls/MapControls.js'
+
+	import BaseMarker from './base-marker.txt?raw'
+	import DestMarker from './destination-marker.txt?raw'
+	import Helpers from './helpers.svelte'
+	import { useRaycastClick } from './hooks/use-raycast-click'
+	import Marker from './marker.svelte'
+	import MotionPath from './motion-path.svelte'
+	import Points from './points.svelte'
+
+	interface Props {
+		helpers: boolean
+		pointcloud: Uint8Array | undefined
+		basePose?: { x: number; y: number; theta: number } | undefined
+		destination: Vector2 | undefined
+		motionPath?: Float32Array | undefined
+		onClick: (value: Vector3) => void
+	}
+
+	const {
+		helpers,
+		pointcloud,
+		basePose = undefined,
+		destination,
+		motionPath = undefined,
+		onClick,
+	}: Props = $props()
+
+	useRaycastClick((vec3) => onClick(vec3))
+
+	const { renderer, invalidate, dom } = useThrelte()
+
+	const baseSpriteSize = 15.5
+	const defaultPointSize = 0.03
+
+	const camera = new OrthographicCamera()
+	camera.zoom = 10
+
+	const controls = new MapControls(camera, dom)
+
+	let userControlling = $state(false)
+	let zoom = $state(camera.zoom)
+
+	const handleControlsChange = () => {
+		invalidate()
+		zoom = camera.zoom
+	}
+
+	interface UpdateEvent {
+		radius: number
+		center: { x: number; y: number }
+	}
+
+	const handlePointsUpdate = ({ center, radius }: UpdateEvent) => {
+		if (!userControlling) {
+			camera.position.set(center.x, center.y, 1)
+			camera.lookAt(center.x, center.y, 0)
+			controls.target.set(center.x, center.y, 0)
+
+			const viewHeight = 1
+			const viewWidth = viewHeight * 2
+			const aspect = renderer.domElement.clientHeight / renderer.domElement.clientWidth
+			const aspectInverse = 0.008
+
+			camera.zoom =
+				aspect > 1 ? viewHeight / (radius * aspectInverse) : viewWidth / (radius * aspectInverse)
+			camera.updateProjectionMatrix()
+
+			zoom = camera.zoom
+		}
+	}
+
+	const markerScale = $derived(baseSpriteSize / zoom)
+</script>
+
+<T
+	is={camera}
+	makeDefault
+	near={0.1}
+	far={2}
+	zoom={10}
+>
+	<T
+		is={controls}
+		enableRotate={false}
+		screenSpacePanning={true}
+		onchange={handleControlsChange}
+		onstart={() => (userControlling = true)}
+	/>
+</T>
+
+{#if helpers}
+	<Helpers />
+{/if}
+
+{#if pointcloud}
+	<Points
+		{pointcloud}
+		size={zoom * defaultPointSize * window.devicePixelRatio}
+		onUpdate={handlePointsUpdate}
+	/>
+{/if}
+
+<Marker
+	name="Base marker"
+	url={BaseMarker}
+	visible={basePose !== undefined}
+	position.x={basePose?.x}
+	position.y={basePose?.y}
+	scale.x={markerScale}
+	scale.y={markerScale}
+	rotation={MathUtils.degToRad((basePose?.theta ?? 0) - 90)}
+/>
+
+<Marker
+	name="Destination marker"
+	visible={destination !== undefined}
+	url={DestMarker}
+	position.x={destination?.x}
+	position.y={destination?.y}
+	scale.x={markerScale}
+	scale.y={markerScale}
+	center.x={0.5}
+	center.y={0.05}
+/>
+
+<MotionPath path={motionPath} />

package/dist/components/slam/map2d/scene.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Vector2, Vector3 } from 'three';
+interface Props {
+    helpers: boolean;
+    pointcloud: Uint8Array | undefined;
+    basePose?: {
+        x: number;
+        y: number;
+        theta: number;
+    } | undefined;
+    destination: Vector2 | undefined;
+    motionPath?: Float32Array | undefined;
+    onClick: (value: Vector3) => void;
+}
+declare const Scene: import("svelte").Component<Props, {}, "">;
+type Scene = ReturnType<typeof Scene>;
+export default Scene;

package/dist/components/status-pill.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Pill } from '@viamrobotics/prime-core'
+
+	interface Props {
+		isActive: boolean
+		activeText?: string
+		inactiveText?: string
+	}
+
+	const { isActive, activeText = 'Moving...', inactiveText = 'Idle' }: Props = $props()
+</script>
+
+{#if isActive}
+	<Pill
+		cx="h-[20px] rounded-full border border-[#B9DCBC] bg-[#E0FAE3]! px-2.5 text-[#3D7D3F]"
+		removable={false}
+		value={activeText}
+	/>
+{:else}
+	<Pill
+		cx="border-medium h-[20px] rounded-full border px-2.5"
+		removable={false}
+		value={inactiveText}
+	/>
+{/if}

package/dist/components/status-pill.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    isActive: boolean;
+    activeText?: string;
+    inactiveText?: string;
+}
+declare const StatusPill: import("svelte").Component<Props, {}, "">;
+type StatusPill = ReturnType<typeof StatusPill>;
+export default StatusPill;

package/dist/components/stop-button.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Button } from '@viamrobotics/prime-core'
+
+	import ErrorDisplay from './error.svelte'
+
+	interface Props {
+		onStop: () => void
+		error: Error | null
+	}
+
+	const { error, onStop }: Props = $props()
+</script>
+
+<Button
+	variant="outline-danger"
+	class="font-roboto-mono w-fit uppercase"
+	onclick={onStop}
+>
+	Stop
+</Button>
+<ErrorDisplay lastError={error} />

package/dist/components/stop-button.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    onStop: () => void;
+    error: Error | null;
+}
+declare const StopButton: import("svelte").Component<Props, {}, "">;
+type StopButton = ReturnType<typeof StopButton>;
+export default StopButton;

package/dist/components/stop.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type {
+		Arm,
+		ArmClient,
+		Base,
+		BaseClient,
+		Gantry,
+		GantryClient,
+		Gripper,
+		GripperClient,
+		Motor,
+		MotorClient,
+		Servo,
+		ServoClient,
+	} from '@viamrobotics/sdk'
+
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import StopButton from './stop-button.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+		client:
+			| typeof ArmClient
+			| typeof BaseClient
+			| typeof GantryClient
+			| typeof GripperClient
+			| typeof MotorClient
+			| typeof ServoClient
+	}
+
+	const { partID, resourceName, client: clientClass }: Props = $props()
+
+	const client = $derived(
+		createResourceClient<Arm | Base | Gantry | Gripper | Motor | Servo>(
+			clientClass,
+			() => partID,
+			() => resourceName
+		)
+	)
+
+	const stopMutation = $derived(createResourceMutation(client, 'stop'))
+</script>
+
+<StopButton
+	error={stopMutation.error}
+	onStop={() => {
+		stopMutation.mutate([])
+	}}
+/>

package/dist/components/stop.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ArmClient, BaseClient, GantryClient, GripperClient, MotorClient, ServoClient } from '@viamrobotics/sdk';
+interface Props {
+    partID: string;
+    resourceName: string;
+    client: typeof ArmClient | typeof BaseClient | typeof GantryClient | typeof GripperClient | typeof MotorClient | typeof ServoClient;
+}
+declare const Stop: import("svelte").Component<Props, {}, "">;
+type Stop = ReturnType<typeof Stop>;
+export default Stop;

package/dist/components/table.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		children?: Snippet
+	}
+
+	const { children }: Props = $props()
+</script>
+
+<table class="customTable">
+	{@render children?.()}
+</table>
+
+<style lang="postcss">
+	/* 
+    NOTE(zp, 2024-06-10) Admittedly, this is a bit dangerous; 
+    However, it does let us use standard html <table> tags like tr, th and tbody which has ergonomic advantages
+
+    If this is giving us trouble, please feel no hesitation about deleting this
+  */
+
+	/* (:global is a svelte directive specifically for this purpose with slots.)*/
+
+	@reference "../../app.css";
+
+	.customTable {
+		@apply w-full table-auto;
+	}
+	.customTable :global(thead) {
+		@apply border-light bg-light border;
+	}
+	.customTable :global(thead th) {
+		@apply border-light text-subtle-1 border px-2.5 py-1 text-xs font-normal whitespace-nowrap;
+	}
+	.customTable :global(thead th abbr) {
+		@apply text-disabled;
+	}
+
+	.customTable :global(tbody) {
+		@apply border-light border;
+	}
+	.customTable :global(tbody th) {
+		@apply border-light font-roboto-mono text-default h-10 gap-2 border px-1.5 text-center text-xs font-normal;
+	}
+</style>

package/dist/components/table.svelte.d.ts

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

package/dist/components/three/axes-helper.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Color } from 'three'
+	import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+	import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+	import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+
+	interface Props_1 {
+		length?: number
+		width?: number
+		axesColors?: [x: string, y: string, z: string]
+		depthTest?: boolean
+		[key: string]: unknown
+	}
+
+	const {
+		length = 1,
+		width = 1,
+		axesColors = ['red', 'green', 'blue'],
+		depthTest = true,
+		...rest
+	}: Props_1 = $props()
+
+	const TOTAL_VERTICES = 9
+	const VERTEX_COMPONENTS = 3
+
+	const line = new Line2()
+	const material = $state(new LineMaterial())
+	const geometry = new LineGeometry()
+	const color = new Color()
+	const colors = $state(new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS))
+	const positions = $state(new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS))
+
+	$effect.pre(() => {
+		material.linewidth = width
+	})
+
+	// Assign colors per vertex
+	$effect.pre(() => {
+		for (const [index, axis] of axesColors.entries()) {
+			color.set(axis)
+
+			const axisBufferStart = index * TOTAL_VERTICES
+			const axisBufferEnd = axisBufferStart + TOTAL_VERTICES
+
+			for (let j = axisBufferStart; j < axisBufferEnd; j += VERTEX_COMPONENTS) {
+				colors[j + 0] = color.r
+				colors[j + 1] = color.g
+				colors[j + 2] = color.b
+			}
+		}
+
+		geometry.setColors(colors)
+	})
+
+	const X_AXIS_X_COMPONENT_INDEX = 3
+	const Y_AXIS_Y_COMPONENT_INDEX = 13
+	const Z_AXIS_Z_COMPONENT_INDEX = 23
+
+	$effect.pre(() => {
+		positions[X_AXIS_X_COMPONENT_INDEX] = length
+		positions[Y_AXIS_Y_COMPONENT_INDEX] = length
+		positions[Z_AXIS_Z_COMPONENT_INDEX] = length
+		geometry.setPositions(positions)
+	})
+</script>
+
+<T
+	is={line}
+	{...rest}
+	raycast={() => null}
+>
+	<T is={geometry} />
+	<T
+		is={material}
+		vertexColors
+		{depthTest}
+	/>
+</T>

package/dist/components/three/axes-helper.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props_1 {
+    length?: number;
+    width?: number;
+    axesColors?: [x: string, y: string, z: string];
+    depthTest?: boolean;
+    [key: string]: unknown;
+}
+declare const AxesHelper: import("svelte").Component<Props_1, {}, "">;
+type AxesHelper = ReturnType<typeof AxesHelper>;
+export default AxesHelper;

package/dist/components/three/index.d.ts

@@ -0,0 +1 @@
+export { default as AxesHelper } from './axes-helper.svelte';

package/dist/components/three/index.js

@@ -0,0 +1 @@
+export { default as AxesHelper } from './axes-helper.svelte';

package/dist/components/widgets/arm/arm.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { Pose } from '@viamrobotics/sdk'
+
+	import { ArmClient } 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 Query from '../../query.svelte'
+	import StopButton from '../../stop-button.svelte'
+
+	import GetJointPositions from './get-joint-positions.svelte'
+	import MoveToJointPositions from './move-to-joint-positions.svelte'
+	import MoveToPosition from './move-to-position.svelte'
+	import QuickMove from './quick-move.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		ArmClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const options = { refetchInterval: 500 }
+	const jointPositionsQuery = createResourceQuery(client, 'getJointPositions', options)
+	const endPositionQuery = createResourceQuery(client, 'getEndPosition', options)
+
+	const moveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
+	const quickMoveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
+	const stopMutation = createResourceMutation(client, 'stop')
+	const moveToPosMutation = createResourceMutation(client, 'moveToPosition')
+
+	const moveToJointPositions = (jointPositionsList: number[]) => {
+		moveToJointPosMutation.mutate([jointPositionsList], {})
+	}
+
+	const quickMoveToJointPositions = (jointPositionsList: number[]) => {
+		quickMoveToJointPosMutation.mutate([jointPositionsList], {})
+	}
+
+	const moveToPosition = (position: Pose) => {
+		moveToPosMutation.mutate([position], {})
+	}
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex flex-col gap-4 lg:flex-row lg:gap-0 lg:divide-x">
+			<!-- Main control sections -->
+			<div
+				class="flex flex-col gap-4 lg:grid lg:grow lg:grid-cols-2 lg:gap-0 lg:divide-x xl:grid-cols-4"
+			>
+				<ApiSection
+					title="GetJointPositions"
+					bottomText="Updates automatically"
+				>
+					<Query query={jointPositionsQuery}>
+						{#if jointPositionsQuery.data}
+							<GetJointPositions positions={jointPositionsQuery.data.values} />
+						{/if}
+					</Query>
+				</ApiSection>
+				<ApiSection title="MoveToJointPositions">
+					<Query query={jointPositionsQuery}>
+						{#if jointPositionsQuery.data}
+							<MoveToJointPositions
+								positions={jointPositionsQuery.data.values}
+								{moveToJointPositions}
+								lastError={moveToJointPosMutation.error}
+							/>
+						{/if}
+					</Query>
+				</ApiSection>
+				<ApiSection title="MoveToPosition">
+					<Query query={endPositionQuery}>
+						{#if endPositionQuery.data}
+							<MoveToPosition
+								endPosition={endPositionQuery.data}
+								{moveToPosition}
+								lastError={moveToPosMutation.error}
+							/>
+						{/if}
+					</Query>
+				</ApiSection>
+				<ApiSection
+					title="Quick move"
+					bottomText="Press a button to execute"
+				>
+					<Query query={jointPositionsQuery}>
+						{#if jointPositionsQuery.data}
+							<QuickMove
+								positions={jointPositionsQuery.data.values}
+								moveToJointPositions={quickMoveToJointPositions}
+								lastError={quickMoveToJointPosMutation.error}
+							/>
+						{/if}
+					</Query>
+				</ApiSection>
+			</div>
+
+			<!-- Control actions sidebar -->
+			<div
+				class="flex flex-row gap-4 lg:ml-auto lg:w-full lg:max-w-40 lg:flex-col lg:gap-0 lg:divide-y"
+			>
+				<ApiSection title="Stop">
+					<StopButton
+						error={stopMutation.error}
+						onStop={() => {
+							stopMutation.mutate([], {})
+						}}
+					/>
+				</ApiSection>
+				<IsMoving
+					client={ArmClient}
+					{partID}
+					{resourceName}
+				/>
+			</div>
+		</div>
+	{/snippet}
+</ConnectionStatus>

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

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