@viamrobotics/motion-tools 0.1.0

package/dist/components/Detections.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { VisionClient } from '@viamrobotics/sdk'
+	import DetectionsPlane from './DetectionsPlane.svelte'
+	import {
+		createResourceClient,
+		createResourceQuery,
+		useResourceNames,
+	} from '@viamrobotics/svelte-sdk'
+	import { usePartID } from '../hooks/usePartID.svelte'
+
+	const partID = usePartID()
+	const cameras = useResourceNames(() => partID.current, 'camera')
+	const services = useResourceNames(() => partID.current, 'vision')
+	const visionClients = $derived(
+		services.current.map((service) =>
+			createResourceClient(
+				VisionClient,
+				() => partID.current,
+				() => service.name
+			)
+		)
+	)
+
+	const queries = $derived(() =>
+		visionClients.map((client) =>
+			createResourceQuery(client, 'captureAllFromCamera', [
+				cameras.current[0].name,
+				{
+					returnImage: true,
+					returnClassifications: false,
+					returnDetections: true,
+					returnObjectPointClouds: false,
+				},
+			])
+		)
+	)
+
+	$inspect(queries)
+</script>
+
+<DetectionsPlane detections={[]} />

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

@@ -0,0 +1,3 @@
+declare const Detections: import("svelte").Component<Record<string, never>, {}, "">;
+type Detections = ReturnType<typeof Detections>;
+export default Detections;

package/dist/components/DetectionsPlane.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Detection } from '@viamrobotics/sdk'
+
+	export let detections: Detection[]
+</script>
+
+<T.Group scale={0.001}>
+	{#each detections as { xMin, xMax, yMin, yMax }, index (index)}
+		{#if xMin !== undefined && xMax !== undefined && yMin !== undefined && yMax !== undefined}
+			<T.Mesh
+				scale={[Number(xMax - xMin), Number(yMax - yMin), 1]}
+				position={[Number(xMin), Number(yMin), 0]}
+			>
+				<T.PlaneGeometry />
+				<T.MeshStandardMaterial
+					transparent
+					opacity={0.5}
+				/>
+			</T.Mesh>
+		{/if}
+	{/each}
+</T.Group>

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

@@ -0,0 +1,21 @@
+import { Detection } from '@viamrobotics/sdk';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DetectionsPlane: $$__sveltets_2_IsomorphicComponent<{
+    detections: Detection[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DetectionsPlane = InstanceType<typeof DetectionsPlane>;
+export default DetectionsPlane;

package/dist/components/DomPortal.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	let { children } = $props()
+
+	let div: HTMLDivElement
+
+	$effect(() => {
+		document.body.append(div)
+		return () => {
+			// eslint-disable-next-line svelte/no-dom-manipulating
+			div.remove()
+		}
+	})
+</script>
+
+<div
+	style="display: contents"
+	bind:this={div}
+>
+	{@render children()}
+</div>

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

@@ -0,0 +1,5 @@
+declare const DomPortal: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type DomPortal = ReturnType<typeof DomPortal>;
+export default DomPortal;

package/dist/components/Focus.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { isInstanceOf, T } from '@threlte/core'
+	import { TrackballControls, Gizmo } from '@threlte/extras'
+	import { useFocused, useFocusedObject3d } from '../hooks/useSelection.svelte'
+	import { Keybindings } from '../keybindings'
+	import { Box3, Vector3 } from 'three'
+	import Camera from './Camera.svelte'
+
+	const focus = useFocused()
+	const focusedObject = useFocusedObject3d()
+	const object3d = $derived(focusedObject.current)
+
+	const box = new Box3()
+	const vec = new Vector3()
+
+	let center = $state.raw<[number, number, number]>([0, 0, 0])
+	// let size = $state.raw<[number, number, number]>([0, 0, 0])
+
+	$effect(() => {
+		if (object3d) {
+			box.setFromObject(object3d)
+			center = box.getCenter(vec).toArray()
+			// size = box.getSize(vec).toArray()
+		}
+	})
+
+	const onkeydown = ({ key }: KeyboardEvent) => {
+		if (key === Keybindings.ESCAPE) {
+			focus.set(undefined)
+		} else if (key === Keybindings.UP || key === Keybindings.DOWN) {
+			if (object3d && 'material' in object3d && isInstanceOf(object3d.material, 'PointsMaterial')) {
+				object3d.material.size += key === Keybindings.UP ? 0.001 : -0.001
+			}
+		}
+	}
+</script>
+
+<svelte:window {onkeydown} />
+
+<Camera position={[2, 0, 0]}>
+	<TrackballControls target={center}>
+		<Gizmo />
+	</TrackballControls>
+</Camera>
+
+{#if object3d}
+	<T is={object3d} />
+	<T.BoxHelper args={[object3d, 'red']} />
+{/if}

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

@@ -0,0 +1,3 @@
+declare const Focus: import("svelte").Component<Record<string, never>, {}, "">;
+type Focus = ReturnType<typeof Focus>;
+export default Focus;

package/dist/components/Frame.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { type Snippet } from 'svelte'
+	import { meshBounds, MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
+	import { BufferGeometry, DoubleSide, FrontSide, Mesh, Object3D } from 'three'
+	import { CapsuleGeometry } from '../three/CapsuleGeometry'
+	import { poseToObject3d } from '../transform'
+	import { darkenColor } from '../color'
+	import AxesHelper from './AxesHelper.svelte'
+	import type { WorldObject } from '../WorldObject'
+	import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'
+	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
+
+	const plyLoader = new PLYLoader()
+
+	interface Props {
+		uuid: string
+		name: string
+		geometry?: WorldObject['geometry']
+		pose: WorldObject['pose']
+		metadata: WorldObject['metadata']
+		children?: Snippet<[{ ref: Object3D }]>
+	}
+
+	let { uuid, name, geometry, metadata, pose, children }: Props = $props()
+
+	const type = $derived(geometry?.case)
+	const mesh = $derived.by(() => {
+		const object3d = type === undefined ? new Object3D() : new Mesh()
+
+		if (type === 'mesh' || type === 'points' || type === 'line') {
+			object3d.raycast = meshBounds
+		}
+
+		return object3d
+	})
+
+	$effect.pre(() => {
+		poseToObject3d(pose, mesh)
+	})
+
+	const events = useObjectEvents(() => uuid)
+
+	let geo = $state<BufferGeometry>()
+</script>
+
+<T
+	is={mesh}
+	{name}
+	{uuid}
+	{...events}
+>
+	{#if geometry?.case === 'mesh'}
+		{@const meshGeometry = plyLoader.parse(atob(geometry.value.mesh as unknown as string))}
+		<T is={meshGeometry} />
+	{:else if geometry?.case === 'line' && metadata.points}
+		<MeshLineGeometry points={metadata.points} />
+	{:else if geometry?.case === 'box'}
+		{@const dimsMm = geometry.value.dimsMm ?? { x: 0, y: 0, z: 0 }}
+		<T.BoxGeometry
+			args={[dimsMm.x * 0.001, dimsMm.y * 0.001, dimsMm.z * 0.001]}
+			oncreate={(ref) => {
+				geo = ref
+			}}
+		/>
+	{:else if geometry?.case === 'sphere'}
+		{@const radiusMm = geometry.value.radiusMm ?? 0}
+		<T.SphereGeometry
+			args={[radiusMm * 0.001]}
+			oncreate={(ref) => {
+				geo = ref
+			}}
+		/>
+	{:else if geometry?.case === 'capsule'}
+		{@const { lengthMm, radiusMm } = geometry.value}
+		<T
+			is={CapsuleGeometry}
+			args={[radiusMm * 0.001, lengthMm * 0.001]}
+			oncreate={(ref) => {
+				geo = ref
+			}}
+		/>
+	{:else}
+		<AxesHelper
+			width={5}
+			length={0.1}
+		/>
+	{/if}
+
+	{#if geometry?.case === 'line'}
+		<MeshLineMaterial
+			color={metadata.color ?? 'red'}
+			width={0.005}
+		/>
+	{:else if geometry}
+		<T.MeshToonMaterial
+			color={metadata.color ?? 'red'}
+			side={geometry.case === 'mesh' ? DoubleSide : FrontSide}
+			transparent
+			opacity={0.7}
+		/>
+
+		{#if geo}
+			<T.LineSegments raycast={() => null}>
+				<T.EdgesGeometry args={[geo, 1]} />
+				<T.LineBasicMaterial color={darkenColor(metadata.color ?? 'red', 10)} />
+			</T.LineSegments>
+		{/if}
+	{/if}
+
+	{@render children?.({ ref: mesh })}
+</T>

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

@@ -0,0 +1,16 @@
+import { type Snippet } from 'svelte';
+import { Object3D } from 'three';
+import type { WorldObject } from '../WorldObject';
+interface Props {
+    uuid: string;
+    name: string;
+    geometry?: WorldObject['geometry'];
+    pose: WorldObject['pose'];
+    metadata: WorldObject['metadata'];
+    children?: Snippet<[{
+        ref: Object3D;
+    }]>;
+}
+declare const Frame: import("svelte").Component<Props, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/components/Frames.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Portal, PortalTarget } from './portal'
+	import Frame from './Frame.svelte'
+	import { useFrames } from '../hooks/useFrames.svelte'
+	import { useGeometries } from '../hooks/useGeometries.svelte'
+	import Pose from './Pose.svelte'
+
+	const frames = useFrames()
+	const geometries = useGeometries()
+</script>
+
+{#each frames.current as object (object.uuid)}
+	<Pose name={object.name}>
+		{#snippet children({ pose })}
+			{#if pose}
+				<Frame
+					uuid={object.uuid}
+					name={object.name}
+					{pose}
+					geometry={object.geometry}
+					metadata={object.metadata}
+				>
+					<PortalTarget id={object.name} />
+				</Frame>
+			{:else}
+				<Portal id={object.referenceFrame}>
+					<Frame
+						uuid={object.uuid}
+						name={object.name}
+						pose={pose ?? object.pose}
+						geometry={object.geometry}
+						metadata={object.metadata}
+					>
+						<PortalTarget id={object.name} />
+					</Frame>
+				</Portal>
+			{/if}
+		{/snippet}
+	</Pose>
+{/each}
+
+{#each geometries.current as object (object.uuid)}
+	<Portal id={object.referenceFrame}>
+		<Frame
+			uuid={object.uuid}
+			name={object.name}
+			pose={object.pose}
+			geometry={object.geometry}
+			metadata={object.metadata}
+		>
+			<PortalTarget id={object.name} />
+		</Frame>
+	</Portal>
+{/each}

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Frames: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Frames = InstanceType<typeof Frames>;
+export default Frames;

package/dist/components/Pointcloud.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Points, BufferAttribute, BufferGeometry, Color, PointsMaterial } from 'three'
+	import type { WorldObject } from '../WorldObject'
+	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
+	import { meshBounds } from '@threlte/extras'
+	import { poseToObject3d } from '../transform'
+
+	interface Props {
+		object: WorldObject<{ case: 'points'; value: Float32Array }>
+	}
+
+	let { object }: Props = $props()
+
+	const points = new Points()
+	const geometry = new BufferGeometry()
+	const material = new PointsMaterial({
+		size: 0.01,
+		color: new Color('#888888'),
+	})
+
+	const colors = $derived(object.metadata.colors)
+	const positions = $derived(object.geometry?.value ?? [])
+
+	$effect(() => {
+		material.vertexColors = colors !== undefined
+	})
+
+	$effect.pre(() => {
+		geometry.setAttribute('position', new BufferAttribute(new Float32Array(positions), 3))
+	})
+
+	$effect.pre(() => {
+		if (colors) {
+			geometry.setAttribute('color', new BufferAttribute(new Float32Array(colors), 3))
+		}
+	})
+
+	$effect.pre(() => {
+		poseToObject3d(object.pose, points)
+	})
+
+	const events = useObjectEvents(() => object.uuid)
+</script>
+
+<T
+	is={points}
+	name={object.name}
+	uuid={object.uuid}
+	raycast={meshBounds}
+	{...events}
+>
+	<T is={geometry} />
+	<T is={material} />
+</T>

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

@@ -0,0 +1,10 @@
+import type { WorldObject } from '../WorldObject';
+interface Props {
+    object: WorldObject<{
+        case: 'points';
+        value: Float32Array;
+    }>;
+}
+declare const Pointcloud: import("svelte").Component<Props, {}, "">;
+type Pointcloud = ReturnType<typeof Pointcloud>;
+export default Pointcloud;

package/dist/components/Pointclouds.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Portal } from './portal'
+	import { usePointClouds } from '../hooks/usePointclouds.svelte'
+	import { useShapes } from '../hooks/useShapes.svelte'
+	import Pointcloud from './Pointcloud.svelte'
+
+	const points = usePointClouds()
+	const shapes = useShapes()
+</script>
+
+{#each points.current as object (object.uuid)}
+	<Portal id={object.referenceFrame}>
+		<Pointcloud {object} />
+	</Portal>
+{/each}
+
+{#each shapes.points as object (object.uuid)}
+	<Portal id={object.referenceFrame}>
+		<Pointcloud {object} />
+	</Portal>
+{/each}

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Pointclouds: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Pointclouds = InstanceType<typeof Pointclouds>;
+export default Pointclouds;

package/dist/components/Pose.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { usePose } from '../hooks/usePose.svelte'
+	import type { Pose } from '@viamrobotics/sdk'
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		name: string
+		parent?: string
+		children: Snippet<[{ pose: Pose | undefined }]>
+	}
+	let { name, parent, children }: Props = $props()
+
+	const pose = usePose(
+		() => name,
+		() => parent ?? 'world'
+	)
+</script>
+
+{@render children({ pose: pose.current })}

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

@@ -0,0 +1,12 @@
+import type { Pose } from '@viamrobotics/sdk';
+import type { Snippet } from 'svelte';
+interface Props {
+    name: string;
+    parent?: string;
+    children: Snippet<[{
+        pose: Pose | undefined;
+    }]>;
+}
+declare const Pose: import("svelte").Component<Props, {}, "">;
+type Pose = ReturnType<typeof Pose>;
+export default Pose;

package/dist/components/RefreshRate.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Select } from '@viamrobotics/prime-core'
+	import { useRefreshRates } from '../hooks/useRefreshRates.svelte'
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		name: string
+		children?: Snippet
+	}
+
+	let { name, children }: Props = $props()
+
+	const pollingRates = useRefreshRates()
+	const rate = $derived(pollingRates.get(name))
+</script>
+
+<label class="flex flex-col gap-1">
+	{name}
+	<Select
+		onchange={(event: InputEvent) => {
+			if (event.target instanceof HTMLSelectElement) {
+				const { value } = event.target
+				pollingRates.set(name, Number.parseInt(value, 10))
+			}
+		}}
+		value={String(rate ?? '')}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			<option value="-1">Do not fetch</option>
+			<option value="0">Do not refresh</option>
+			<option value="500">Refresh every 0.5 second</option>
+			<option value="1000">Refresh every second</option>
+			<option value="2000">Refresh every 2 seconds</option>
+			<option value="5000">Refresh every 5 seconds</option>
+			<option value="10000">Refresh every 10 seconds</option>
+			<option value="30000">Refresh every 30 seconds</option>
+		{/if}
+	</Select>
+</label>
+
+<style>
+	label :global svg {
+		display: none;
+	}
+</style>

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

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

package/dist/components/Scene.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Color, Vector3 } from 'three'
+	import { T } from '@threlte/core'
+	import { Gizmo, Grid, interactivity } from '@threlte/extras'
+	import { PortalTarget } from './portal'
+	import Frames from './Frames.svelte'
+	import Pointclouds from './Pointclouds.svelte'
+	import CameraControls from './CameraControls.svelte'
+	import Selected from './Selected.svelte'
+	import Focus from './Focus.svelte'
+	import StaticGeometries from './StaticGeometries.svelte'
+	import Shapes from './Shapes.svelte'
+	import Camera from './Camera.svelte'
+	import { useFocused } from '../hooks/useSelection.svelte'
+	import type { Snippet } from 'svelte'
+	import { useXR } from '@threlte/xr'
+
+	interface Props {
+		children?: Snippet
+	}
+
+	let { children }: Props = $props()
+
+	interactivity({
+		filter: (items) => {
+			const item = items.find((item) => {
+				return item.object.visible === undefined || item.object.visible === true
+			})
+
+			return item ? [item] : []
+		},
+	})
+
+	const focused = useFocused()
+
+	const { isPresenting } = useXR()
+</script>
+
+<T.Color
+	attach="background"
+	args={[new Color('white')]}
+/>
+
+<T.Group rotation.x={$isPresenting ? -Math.PI / 2 : 0}>
+	{#if focused.current === undefined}
+		{#if !$isPresenting}
+			<Camera position={[3, 3, 3]}>
+				<CameraControls>
+					<Gizmo />
+				</CameraControls>
+			</Camera>
+		{/if}
+
+		<PortalTarget id="world" />
+
+		<StaticGeometries />
+		<Frames />
+		<Pointclouds />
+		<Shapes />
+
+		<Selected />
+
+		{#if !$isPresenting}
+			<Grid
+				plane="xy"
+				sectionColor="lightgrey"
+				infiniteGrid
+				fadeOrigin={new Vector3()}
+				fadeDistance={25}
+			/>
+		{/if}
+	{:else}
+		<Focus />
+	{/if}
+
+	{@render children?.()}
+
+	<T.DirectionalLight position={[3, 3, 3]} />
+	<T.DirectionalLight position={[-3, -3, -3]} />
+	<T.AmbientLight />
+</T.Group>

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

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