@viamrobotics/test-widgets 0.0.1

package/dist/components/widgets/vision-service/object-point-clouds.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { PointCloudObject } from '@viamrobotics/sdk'
+
+	import { Canvas } from '@threlte/core'
+	import { View } from '@threlte/extras'
+
+	import GeometryDetails from './geometry-details.svelte'
+	import ObjectPointCloudScene from './object-point-cloud-scene.svelte'
+
+	interface Props {
+		objects: PointCloudObject[]
+	}
+
+	const { objects }: Props = $props()
+
+	const hashPointCloud = (data: Uint8Array): string => {
+		const len = data.length
+		if (len === 0) return '0'
+
+		// Sample bytes from start, middle, and end
+		const samples = [
+			data[0],
+			data[Math.floor(len / 4)],
+			data[Math.floor(len / 2)],
+			data[Math.floor((3 * len) / 4)],
+			data[len - 1],
+		]
+
+		return `${len}-${samples.join('-')}`
+	}
+
+	interface Item {
+		id: string
+		object: PointCloudObject
+		dom: HTMLElement | undefined
+	}
+
+	const items: Item[] = $state([])
+
+	$effect.pre(() => {
+		const itemsToRemove = new Set(items.map((item) => item.id))
+		for (const object of objects) {
+			const id = hashPointCloud(new Uint8Array(object.pointCloud))
+			const existingItem = items.find((item) => item.id === id)
+			if (existingItem) {
+				existingItem.object = object
+			} else {
+				items.push({ id, object, dom: undefined })
+			}
+
+			itemsToRemove.delete(id)
+		}
+
+		for (const id of itemsToRemove) {
+			const index = items.findIndex((item) => item.id === id)
+			if (index !== -1) {
+				items.splice(index, 1)
+			}
+		}
+	})
+</script>
+
+<div class="relative h-[600px] max-h-[80vh] bg-white">
+	<div class="relative z-10 h-full overflow-y-scroll p-4">
+		<div class="grid grid-cols-[repeat(auto-fit,320px)] justify-center gap-4">
+			{#each items as item (item.id)}
+				<div class="w-[320px] shadow-sm">
+					<div
+						bind:this={item.dom}
+						class="h-[320px] w-[320px]"
+					></div>
+					<div class="bg-white p-2">
+						{#if item.object.geometries}
+							<GeometryDetails geometries={item.object.geometries} />
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<div class="absolute inset-0">
+		<Canvas>
+			{#each items as item (item.id)}
+				<View dom={item.dom}>
+					<ObjectPointCloudScene object={item.object} />
+				</View>
+			{/each}
+		</Canvas>
+	</div>
+</div>

package/dist/components/widgets/vision-service/object-point-clouds.svelte.d.ts

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

package/dist/components/widgets/vision-service/scene.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { interactivity } from '@threlte/extras'
+	import { Fullscreen, Image } from 'threlte-uikit'
+
+	import { useDetections } from './context.svelte'
+	import Detection from './detection.svelte'
+
+	interface Props {
+		src: string
+		factor?: number
+	}
+
+	const { src, factor = 0 }: Props = $props()
+
+	const context = useDetections()
+
+	interactivity()
+</script>
+
+<T.OrthographicCamera
+	makeDefault
+	position={[0, 0, 1]}
+>
+	<Fullscreen
+		positionType="relative"
+		width="100%"
+		height="100%"
+	>
+		<Image
+			positionType="absolute"
+			width="100%"
+			height="100%"
+			{src}
+		/>
+	</Fullscreen>
+
+	<Fullscreen
+		positionType="relative"
+		width="100%"
+		height="100%"
+	>
+		{#each context.current as detection (detection.id)}
+			<Detection
+				{detection}
+				{factor}
+			/>
+		{/each}
+	</Fullscreen>
+</T.OrthographicCamera>

package/dist/components/widgets/vision-service/scene.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    src: string;
+    factor?: number;
+}
+declare const Scene: import("svelte").Component<Props, {}, "">;
+type Scene = ReturnType<typeof Scene>;
+export default Scene;

package/dist/components/widgets/vision-service/vision-service.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+	import { IconButton, Label, Select, Switch, Tooltip } from '@viamrobotics/prime-core'
+	import { VisionClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceQuery,
+		useResourceNames,
+	} from '@viamrobotics/svelte-sdk'
+
+	import { useAddImageToDataset } from '../../../add-image-to-dataset'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import Queries from '../../queries.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+
+	import Image from './image.svelte'
+	import ObjectPointClouds from './object-point-clouds.svelte'
+
+	const { addImageToDataset } = useAddImageToDataset()
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'vision-service'
+	)
+
+	// special casing this for performance reasons
+	const getObjectPointCloudsRefetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'vision-service-get-object-point-clouds',
+		// default of manual refresh
+		false
+	)
+
+	let initialFetchComplete = $state(false)
+	let cameraName = $state('')
+	let showObjectPointClouds = $state(false)
+	let isRemote = $state(false)
+
+	const cameras = useResourceNames(() => partID, 'camera')
+
+	$effect.pre(() => {
+		if (cameras.current.length > 0 && !initialFetchComplete) {
+			initialFetchComplete = true
+			cameraName = cameras.current[0]?.name ?? ''
+		}
+	})
+
+	$effect.pre(() => {
+		if (isRemote && cameraName.includes(':')) {
+			// ignore first segment of remote name
+			const [, ...remoteName] = cameraName.split(':')
+			cameraName = remoteName.join(':')
+		}
+	})
+
+	const client = createResourceClient(
+		VisionClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const propertiesQuery = createResourceQuery(client, 'getProperties', () => ({
+		// Lower bound of 1Hz for getProperties, higher frequencies are wasteful.
+		refetchInterval:
+			refetchInterval.current === false
+				? false
+				: (Math.max(refetchInterval.current, 1000) as number | false),
+	}))
+
+	const captureAllQuery = createResourceQuery(
+		client,
+		'captureAllFromCamera',
+		() =>
+			[
+				cameraName,
+				{
+					returnImage: true,
+					returnClassifications: Boolean(propertiesQuery.data?.classificationsSupported),
+					returnDetections: Boolean(propertiesQuery.data?.detectionsSupported),
+					returnObjectPointClouds: false,
+				},
+			] as const,
+		() => ({
+			// Lower bound of 20Hz
+			refetchInterval:
+				refetchInterval.current === false
+					? false
+					: (Math.max(refetchInterval.current, 1000 / 20) as number | false),
+		})
+	)
+
+	const getObjectPointCloudsQuery = createResourceQuery(client, 'getObjectPointClouds', () => ({
+		// Lower bound of 20Hz
+		refetchInterval:
+			getObjectPointCloudsRefetchInterval.current === false || !showObjectPointClouds
+				? false
+				: (Math.max(getObjectPointCloudsRefetchInterval.current, 1000 / 20) as number | false),
+	}))
+
+	const onCameraSelect = (event: Event) => {
+		const { value } = event.target as HTMLSelectElement
+		cameraName = value
+	}
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex flex-col gap-2 px-4 pt-4 pb-3">
+			<div class="flex flex-row gap-4">
+				<div class="w-50">
+					<Label position="top">
+						Camera
+						<Select
+							on:change={onCameraSelect}
+							slot="input"
+						>
+							{#each cameras.current as { name } (name)}
+								<option
+									selected={cameraName === name}
+									value={name}
+								>
+									{name}
+								</option>
+							{/each}
+						</Select>
+					</Label>
+				</div>
+				<Label position="top">
+					Is remote?
+					<Switch
+						slot="input"
+						bind:on={isRemote}
+					/>
+				</Label>
+			</div>
+
+			<h6 class="text-subtle-1 font-semibold">Detections/Classifications</h6>
+
+			<div class="flex gap-4">
+				<RefetchController
+					allowLive
+					{refetchInterval}
+					queries={[propertiesQuery, captureAllQuery]}
+				/>
+
+				{#if addImageToDataset}
+					<Tooltip let:tooltipID>
+						<IconButton
+							aria-describedby={tooltipID}
+							variant="secondary"
+							icon="camera-outline"
+							label="add image to dataset"
+							on:click={() => {
+								const imgData = captureAllQuery.data?.image?.image
+
+								if (imgData) {
+									addImageToDataset({
+										binaryData: imgData,
+										partID,
+										componentType: 'camera',
+										componentName: resourceName,
+										methodName: 'captureAllFromCamera',
+										mimeType: 'image/png',
+										dataRequestTimes: [new Date(), new Date()],
+									})
+								}
+							}}
+						/>
+						<p slot="description">Add image to dataset</p>
+					</Tooltip>
+				{/if}
+			</div>
+
+			<Queries
+				queries={[propertiesQuery, captureAllQuery]}
+				contentCx="p-4 h-14"
+			>
+				{#if captureAllQuery.data}
+					<Image
+						data={captureAllQuery.data}
+						detectionsSupported={Boolean(propertiesQuery.data?.detectionsSupported)}
+						classificationsSupported={Boolean(propertiesQuery.data?.classificationsSupported)}
+					/>
+				{/if}
+			</Queries>
+
+			<h6 class="text-subtle-1 mt-4 font-semibold">Object point clouds</h6>
+			<div class="flex items-center gap-4">
+				<div class="w-50">
+					<Label position="left">
+						Show object point clouds
+						<Switch
+							slot="input"
+							bind:on={showObjectPointClouds}
+						/>
+					</Label>
+				</div>
+				<RefetchController
+					refetchInterval={getObjectPointCloudsRefetchInterval}
+					queries={[getObjectPointCloudsQuery]}
+				/>
+			</div>
+
+			{#if showObjectPointClouds}
+				<Queries
+					queries={[getObjectPointCloudsQuery]}
+					contentCx="p-4 h-14"
+				>
+					{#if getObjectPointCloudsQuery.data !== undefined}
+						<ObjectPointClouds objects={getObjectPointCloudsQuery.data} />
+					{/if}
+				</Queries>
+			{/if}
+		</div>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/vision-service/vision-service.svelte.d.ts

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

package/dist/event-handlers.d.ts

@@ -0,0 +1 @@
+export declare const numberValueFromEvent: (event: Event) => number | undefined;

package/dist/event-handlers.js

@@ -0,0 +1,5 @@
+export const numberValueFromEvent = (event) => {
+    const target = event.target;
+    const val = target.valueAsNumber;
+    return Number.isFinite(val) ? val : undefined;
+};

package/dist/format.d.ts

@@ -0,0 +1,13 @@
+export declare const formatNumeric: (value?: number, decimals?: number) => string;
+/**
+ * Convert degrees to radians
+ * @param degrees Angle in degrees
+ * @returns Angle in radians
+ */
+export declare const degreesToRadians: (degrees: number) => number;
+/**
+ * Convert radians to degrees
+ * @param radians Angle in radians
+ * @returns Angle in degrees
+ */
+export declare const radiansToDegrees: (radians: number) => number;

package/dist/format.js

@@ -0,0 +1,31 @@
+export const formatNumeric = (value, decimals = 2) => {
+    if (value === undefined) {
+        return '––';
+    }
+    if (Number.isNaN(value)) {
+        return 'NaN';
+    }
+    if (value === Number.POSITIVE_INFINITY) {
+        return '+∞';
+    }
+    if (value === Number.NEGATIVE_INFINITY) {
+        return '-∞';
+    }
+    return value.toFixed(decimals);
+};
+/**
+ * Convert degrees to radians
+ * @param degrees Angle in degrees
+ * @returns Angle in radians
+ */
+export const degreesToRadians = (degrees) => {
+    return degrees * (Math.PI / 180);
+};
+/**
+ * Convert radians to degrees
+ * @param radians Angle in radians
+ * @returns Angle in degrees
+ */
+export const radiansToDegrees = (radians) => {
+    return radians * (180 / Math.PI);
+};

package/dist/fps.svelte.d.ts

@@ -0,0 +1,4 @@
+export declare const useMeasureFps: (alpha?: number) => {
+    readonly current: number;
+    measure: (now?: number) => void;
+};

package/dist/fps.svelte.js

@@ -0,0 +1,22 @@
+export const useMeasureFps = (alpha = 0.04) => {
+    let smoothedFps = $state(0);
+    let then;
+    const measure = (now = performance.now()) => {
+        if (then !== undefined) {
+            const delta = now - then;
+            if (delta > 0) {
+                const instantFps = 1000 / delta;
+                // Apply exponential moving average
+                smoothedFps =
+                    smoothedFps === 0 ? instantFps : smoothedFps * (1 - alpha) + instantFps * alpha;
+            }
+        }
+        then = now;
+    };
+    return {
+        get current() {
+            return smoothedFps;
+        },
+        measure,
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { createAddImageToDatasetContext, type ImageData, useAddImageToDataset, } from './add-image-to-dataset';
+export * from './components';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { createAddImageToDatasetContext, useAddImageToDataset, } from './add-image-to-dataset';
+export * from './components';

package/dist/resource.js

@@ -0,0 +1,26 @@
+import { robotApi } from '@viamrobotics/sdk';
+export const ResourceStatusText = {
+    [robotApi.ResourceStatus_State.UNSPECIFIED]: 'unspecified',
+    [robotApi.ResourceStatus_State.READY]: 'ready',
+    [robotApi.ResourceStatus_State.CONFIGURING]: 'configuring',
+    [robotApi.ResourceStatus_State.UNHEALTHY]: 'unhealthy',
+    [robotApi.ResourceStatus_State.UNCONFIGURED]: 'unconfigured',
+    [robotApi.ResourceStatus_State.REMOVING]: 'removing',
+};
+export const getResourceAPI = ({ namespace, type, subtype }) => `${namespace}:${type}:${subtype}`;
+export const getResourceKey = (name) => `${getResourceAPI(name)}/${name.name}`;
+// sorts resource names by local/remote -> type -> name (alphabetical) to produce a list like
+// component a
+// component z
+// service   b
+// component remote:c
+// service   remote:b
+export const sortResourceNames = (names) => names.toSorted(({ type, name }, { type: otherType, name: otherName }) => {
+    // sort all non-remote resources before remote resources
+    if (name.includes(':') !== otherName.includes(':')) {
+        return name.includes(':') ? 1 : -1;
+    }
+    // sort alphabetically within type
+    // sort components before services
+    return type === otherType ? name.localeCompare(otherName) : type.localeCompare(otherType);
+});

package/dist/scroll-into-view.d.ts

@@ -0,0 +1,2 @@
+import type { Action } from 'svelte/action';
+export declare const scrollIntoView: Action<HTMLElement, ScrollIntoViewOptions | undefined>;

package/dist/scroll-into-view.js

@@ -0,0 +1,17 @@
+export const scrollIntoView = (node, scrollIntoViewOptions) => {
+    let id;
+    if (globalThis.location.hash === `#${node.id}`) {
+        /**
+         * Set timeout enqueues the scroll action behind all other queued events.
+         * This allows us to wait for other animation transitions to complete before scrolling into view.
+         */
+        id = window.setTimeout(() => {
+            node.scrollIntoView(scrollIntoViewOptions);
+        }, 0);
+    }
+    return {
+        destroy() {
+            clearTimeout(id);
+        },
+    };
+};

package/dist/sort.d.ts

@@ -0,0 +1,21 @@
+export declare const compareAlphaNum: (a: string, b: string) => number;
+type SortObject = Record<string, unknown>;
+/**
+ * Sorts the keys of a given object in alphanumeric order.
+ *
+ * This function takes an object with unordered keys and returns a new object
+ * with the same keys sorted in alphanumeric order. If the object contains nested
+ * objects or arrays with objects, it recursively sorts their keys as well.
+ *
+ * Note: The sorting is case-sensitive and treats numbers as part of the strings.
+ *
+ * @param {T} unorderedObj - The object with unordered keys to be sorted.
+ * @param compareFn - A optional custom compare function for sorting, which will override the default alphanumeric sort function.
+ *
+ * @returns {T} A new object with keys sorted in alphanumeric order.
+ *
+ *
+ * (Originally from ui/src/lib/sort.ts)
+ */
+export declare const sortObjectKeys: <T extends SortObject>(unorderedObj: T, compareFn?: (a: string, b: string) => number) => T;
+export {};

package/dist/sort.js

@@ -0,0 +1,31 @@
+import isPlainObject from 'lodash-es/isPlainObject';
+export const compareAlphaNum = (a, b) => a.localeCompare(b, 'en', { numeric: true });
+/**
+ * Sorts the keys of a given object in alphanumeric order.
+ *
+ * This function takes an object with unordered keys and returns a new object
+ * with the same keys sorted in alphanumeric order. If the object contains nested
+ * objects or arrays with objects, it recursively sorts their keys as well.
+ *
+ * Note: The sorting is case-sensitive and treats numbers as part of the strings.
+ *
+ * @param {T} unorderedObj - The object with unordered keys to be sorted.
+ * @param compareFn - A optional custom compare function for sorting, which will override the default alphanumeric sort function.
+ *
+ * @returns {T} A new object with keys sorted in alphanumeric order.
+ *
+ *
+ * (Originally from ui/src/lib/sort.ts)
+ */
+export const sortObjectKeys = (unorderedObj, compareFn) => {
+    const sortedObj = {};
+    for (const key of Object.keys(unorderedObj).toSorted(compareFn ?? compareAlphaNum)) {
+        const value = unorderedObj[key];
+        if (Array.isArray(value)) {
+            sortedObj[key] = value.map((element) => isPlainObject(element) ? sortObjectKeys(element, compareFn) : element);
+            continue;
+        }
+        sortedObj[key] = isPlainObject(value) ? sortObjectKeys(value, compareFn) : value;
+    }
+    return sortedObj;
+};