@viamrobotics/motion-tools 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Viam, INC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+## Getting started
+
+1. [Install pnpm](https://pnpm.io/installation)
+2. [Install bun](https://bun.sh/docs/installation)
+3. Install dependencies: `pnpm i`
+4. Run local app server: `pnpm dev`
+
+To visit the visualizer, go to `http://localhost:5173/`
+
+Open the machine config page (bottom right) and enter in connection details to visualize a specific machine.
+
+## Todo
+
+- animated sequence
+- double click to set trackball center
+- Give error logs
+- default pointcloud color
+- remote IP access
+- ortho points are messed up size-wise
+- geometries parented to parent

package/dist/WorldObject.d.ts

@@ -0,0 +1,33 @@
+import type { Geometry, Pose } from '@viamrobotics/sdk';
+import { Box3, Object3D, Vector3 } from 'three';
+export type PointsGeometry = {
+    case: 'points';
+    value: Float32Array;
+};
+export type LinesGeometry = {
+    case: 'line';
+    value: Float32Array;
+};
+export type Geometries = Geometry['geometryType'] | PointsGeometry | LinesGeometry;
+export type Metadata = {
+    colors?: Float32Array;
+    color?: string;
+    gltf?: {
+        scene: Object3D;
+    };
+    points?: Vector3[];
+    batched?: {
+        id: number;
+        name: string;
+    };
+    getBoundingBoxAt?: (box: Box3) => void;
+};
+export declare class WorldObject<T extends Geometries = Geometries> {
+    uuid: string;
+    name: string;
+    referenceFrame: string;
+    pose: Pose;
+    geometry?: T;
+    metadata: Metadata;
+    constructor(name: string, pose?: Pose, parent?: string, geometry?: T, metadata?: Metadata);
+}

package/dist/WorldObject.js

@@ -0,0 +1,18 @@
+import { Box3, MathUtils, Object3D, Vector3 } from 'three';
+import { createPose } from './transform';
+export class WorldObject {
+    uuid;
+    name;
+    referenceFrame;
+    pose;
+    geometry;
+    metadata;
+    constructor(name, pose, parent = 'world', geometry, metadata) {
+        this.uuid = MathUtils.generateUUID();
+        this.name = name;
+        this.referenceFrame = parent;
+        this.pose = pose ?? createPose();
+        this.geometry = geometry;
+        this.metadata = metadata ?? {};
+    }
+}

package/dist/assert.d.ts

@@ -0,0 +1,14 @@
+/** Assertion functions for runtime and type safety. */
+export declare class AssertionError extends Error {
+    constructor(message: string);
+}
+/**
+ * Assert that a value is defined.
+ *
+ * @example
+ * const stringify = (value: number | undefined): number => {
+ *  assertExists(value)
+ *  return `${value}` // TS now knows that value is of type `number`
+ * }
+ */
+export declare const assertExists: <T>(value: T, message: string) => asserts value is NonNullable<T>;

package/dist/assert.js

@@ -0,0 +1,21 @@
+/** Assertion functions for runtime and type safety. */
+export class AssertionError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'AssertionError';
+    }
+}
+/**
+ * Assert that a value is defined.
+ *
+ * @example
+ * const stringify = (value: number | undefined): number => {
+ *  assertExists(value)
+ *  return `${value}` // TS now knows that value is of type `number`
+ * }
+ */
+export const assertExists = (value, message) => {
+    if (value === null || value === undefined) {
+        throw new AssertionError(message);
+    }
+};

package/dist/color.d.ts

@@ -0,0 +1,8 @@
+import { Color, type ColorRepresentation } from 'three';
+/**
+ * Darkens a THREE.Color by a given percentage while preserving hue.
+ * @param color The original THREE.Color instance.
+ * @param percent The percentage to darken (0-100).
+ * @returns A new THREE.Color instance with the darkened color.
+ */
+export declare const darkenColor: (value: ColorRepresentation, percent: number) => Color;

package/dist/color.js

@@ -0,0 +1,14 @@
+import { Color } from 'three';
+/**
+ * Darkens a THREE.Color by a given percentage while preserving hue.
+ * @param color The original THREE.Color instance.
+ * @param percent The percentage to darken (0-100).
+ * @returns A new THREE.Color instance with the darkened color.
+ */
+export const darkenColor = (value, percent) => {
+    const color = new Color(value);
+    const hsl = { h: 0, s: 0, l: 0 };
+    color.getHSL(hsl);
+    hsl.l = Math.max(0, hsl.l * (1 - percent / 100));
+    return color.setHSL(hsl.h, hsl.s, hsl.l);
+};

package/dist/components/App.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { Canvas } from '@threlte/core'
+	import { XRButton } from '@threlte/xr'
+	import Scene from './Scene.svelte'
+	import TreeContainer from './Tree/TreeContainer.svelte'
+	import Details from './Details.svelte'
+	import SceneProviders from './SceneProviders.svelte'
+	import DomPortal from './DomPortal.svelte'
+	import { PersistedState } from 'runed'
+	import XR from './XR.svelte'
+	import { World } from '@threlte/rapier'
+	import { createPartIDContext } from '../hooks/usePartID.svelte'
+
+	interface Props {
+		partID?: string
+		children?: Snippet
+	}
+
+	let { partID = '', children: appChildren }: Props = $props()
+
+	createPartIDContext(() => partID)
+
+	const enableXR = new PersistedState('enable-xr', false)
+</script>
+
+<svelte:window
+	onkeydown={(event) => {
+		if (event.ctrlKey && event.key.toLowerCase() === 'a') {
+			enableXR.current = !enableXR.current
+		}
+	}}
+/>
+
+<Canvas renderMode="always">
+	<World>
+		<SceneProviders>
+			{#snippet children({ focus })}
+				<Scene>
+					{@render appChildren?.()}
+
+					{#if enableXR.current}
+						<XR />
+					{/if}
+				</Scene>
+
+				<DomPortal>
+					<Details />
+				</DomPortal>
+
+				{#if !focus}
+					<DomPortal>
+						<TreeContainer />
+					</DomPortal>
+				{/if}
+			{/snippet}
+		</SceneProviders>
+	</World>
+</Canvas>
+
+{#if enableXR.current}
+	<XRButton mode="immersive-ar" />
+{/if}

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

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

package/dist/components/AxesHelper.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { T, type Props as ThrelteProps } from '@threlte/core'
+	import { AxesHelper } from '../three/AxesHelper'
+	import { meshBounds } from '@threlte/extras'
+	interface Props extends ThrelteProps<AxesHelper> {
+		size?: number
+		thickness?: number
+	}
+
+	let { size, thickness, ...rest }: Props = $props()
+</script>
+
+<T
+	is={new AxesHelper(size, thickness)}
+	raycast={meshBounds}
+	{...rest}
+/>

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

@@ -0,0 +1,4 @@
+import { AxesHelper } from '../three/AxesHelper';
+declare const AxesHelper: any;
+type AxesHelper = ReturnType<typeof AxesHelper>;
+export default AxesHelper;

package/dist/components/BentPlaneGeometry.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Vector2, PlaneGeometry } from 'three'
+	import { T } from '@threlte/core'
+	import type { BufferAttribute } from 'three'
+
+	export let args: [
+		radius: number,
+		width?: number | undefined,
+		height?: number | undefined,
+		widthSegments?: number | undefined,
+		heightSegments?: number | undefined,
+	]
+
+	class BentPlaneGeometry extends PlaneGeometry {
+		constructor(radius: number, ...args: ConstructorParameters<typeof PlaneGeometry>) {
+			super(...args)
+
+			const p = this.parameters
+			const hw = p.width * 0.5
+			const a = new Vector2(-hw, 0)
+			const b = new Vector2(0, radius)
+			const c = new Vector2(hw, 0)
+			const ab = new Vector2().subVectors(a, b)
+			const bc = new Vector2().subVectors(b, c)
+			const ac = new Vector2().subVectors(a, c)
+			const r = (ab.length() * bc.length() * ac.length()) / (2 * Math.abs(ab.cross(ac)))
+			const center = new Vector2(0, radius - r)
+			const baseV = new Vector2().subVectors(a, center)
+			const baseAngle = baseV.angle() - Math.PI * 0.5
+			const arc = baseAngle * 2
+			const uv = this.attributes.uv as BufferAttribute
+			const pos = this.attributes.position as BufferAttribute
+			const mainV = new Vector2()
+
+			for (let i = 0; i < uv.count; i += 1) {
+				const uvRatio = 1 - uv.getX(i)
+				const y = pos.getY(i)
+				mainV.copy(c).rotateAround(center, arc * uvRatio)
+				pos.setXYZ(i, mainV.x, y, -mainV.y)
+			}
+
+			pos.needsUpdate = true
+		}
+	}
+</script>
+
+<T
+	is={BentPlaneGeometry}
+	{args}
+>
+	<slot />
+</T>

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

@@ -0,0 +1,29 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const BentPlaneGeometry: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    args: [radius: number, width?: number | undefined, height?: number | undefined, widthSegments?: number | undefined, heightSegments?: number | undefined];
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type BentPlaneGeometry = InstanceType<typeof BentPlaneGeometry>;
+export default BentPlaneGeometry;

package/dist/components/Camera.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { PersistedState } from 'runed'
+	import { T } from '@threlte/core'
+	import { PerspectiveCamera, OrthographicCamera } from 'three'
+
+	let { children, ...rest } = $props()
+
+	const mode = new PersistedState<'perspective' | 'orthographic'>('camera-type', 'perspective')
+
+	const perspective = new PerspectiveCamera()
+	perspective.near = 0.01
+	perspective.up.set(0, 0, 1)
+
+	const orthographic = new OrthographicCamera()
+	orthographic.near = -100
+	orthographic.far = 100
+	orthographic.up.set(0, 0, 1)
+	orthographic.zoom = 200
+</script>
+
+<svelte:window
+	onkeydown={({ key }) => {
+		if (key.toLowerCase() === 'c') {
+			mode.current = mode.current === 'perspective' ? 'orthographic' : 'perspective'
+		}
+	}}
+/>
+
+{#if mode.current === 'perspective'}
+	<T
+		is={perspective}
+		makeDefault
+		{...rest}
+	>
+		{@render children?.()}
+	</T>
+{:else if mode.current === 'orthographic'}
+	<T
+		is={orthographic}
+		makeDefault
+		{...rest}
+	>
+		{@render children?.()}
+	</T>
+{/if}

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

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

package/dist/components/CameraControls.svelte

@@ -0,0 +1,82 @@
+<script
+	module
+	lang="ts"
+>
+	import {
+		Box3,
+		Matrix4,
+		PerspectiveCamera,
+		Quaternion,
+		Raycaster,
+		Sphere,
+		Spherical,
+		Vector2,
+		Vector3,
+		Vector4,
+	} from 'three'
+	import CameraControls from 'camera-controls'
+	import { T, useTask, useThrelte } from '@threlte/core'
+	import type { Snippet } from 'svelte'
+	import { useTransformControls } from '../hooks/useControls.svelte'
+
+	let installed = false
+
+	const install = () => {
+		CameraControls.install({
+			THREE: {
+				Box3,
+				Matrix4,
+				Quaternion,
+				Raycaster,
+				Sphere,
+				Spherical,
+				Vector2,
+				Vector3,
+				Vector4,
+			},
+		})
+		installed = true
+	}
+</script>
+
+<script lang="ts">
+	interface Props {
+		ref?: CameraControls
+		children?: Snippet
+	}
+
+	let { ref = $bindable(), children }: Props = $props()
+
+	if (!installed) {
+		install()
+	}
+
+	const { camera, dom, invalidate } = useThrelte()
+	const transformControls = useTransformControls()
+
+	const controls = new CameraControls(camera.current as PerspectiveCamera, dom)
+
+	$effect.pre(() => {
+		controls.camera = $camera as PerspectiveCamera
+	})
+
+	$effect.pre(() => {
+		controls.enabled = !transformControls.active
+	})
+
+	useTask(
+		(delta) => {
+			if (controls.update(delta)) {
+				invalidate()
+			}
+		},
+		{ autoInvalidate: false }
+	)
+</script>
+
+<T
+	is={controls}
+	bind:ref
+>
+	{@render children?.()}
+</T>

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

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

package/dist/components/Details.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { useSelectedObject, useFocusedObject, useFocused } from '../hooks/useSelection.svelte'
+	import { Check, Copy } from 'lucide-svelte'
+	import { Button, Icon } from '@viamrobotics/prime-core'
+
+	const focused = useFocused()
+	const selectedObject = useSelectedObject()
+	const focusedObject = useFocusedObject()
+	const object = $derived(focusedObject.current ?? selectedObject.current)
+
+	let copied = $state(false)
+</script>
+
+{#if object}
+	{@const { geometry, pose } = object}
+	<div class="border-medium bg-extralight fixed top-0 right-0 z-10 m-2 w-60 border p-2 text-xs">
+		<div class="flex items-center justify-between gap-2 pb-2">
+			<div class="flex items-center gap-1">
+				<button>
+					<Icon name="drag" />
+				</button>
+				{object.name}
+			</div>
+		</div>
+
+		<div class="border-medium -mx-2 w-[100%+0.5rem] border-b"></div>
+
+		<h3 class="text-subtle-2 flex justify-between py-2">
+			Details
+
+			<button
+				onclick={async () => {
+					navigator.clipboard.writeText(JSON.stringify($state.snapshot(object)))
+					copied = true
+					setTimeout(() => (copied = false), 1000)
+				}}
+			>
+				{#if copied}
+					<Check size={14} />
+				{:else}
+					<Copy size={14} />
+				{/if}
+			</button>
+		</h3>
+
+		<div class="flex flex-col gap-2.5">
+			{#if pose}
+				<div>
+					<strong class="font-semibold">position</strong>
+					<div class="flex gap-3">
+						<div>
+							<span class="text-subtle-2">x</span>
+							{pose.x !== undefined ? pose.x.toFixed(2) : '-'}
+						</div>
+						<div>
+							<span class="text-subtle-2">y</span>
+							{pose.y !== undefined ? pose.y.toFixed(2) : '-'}
+						</div>
+						<div>
+							<span class="text-subtle-2">z</span>
+							{pose.z !== undefined ? pose.z.toFixed(2) : '-'}
+						</div>
+					</div>
+				</div>
+
+				<div>
+					<strong class="font-semibold">orientation</strong>
+					<div class="flex gap-3">
+						<div>
+							<span class="text-subtle-2">x</span>
+							{pose.oX !== undefined ? pose.oX.toFixed(2) : '-'}
+						</div>
+						<div>
+							<span class="text-subtle-2">y</span>
+							{pose.oY !== undefined ? pose.oY.toFixed(2) : '-'}
+						</div>
+						<div>
+							<span class="text-subtle-2">z</span>
+							{pose.oZ !== undefined ? pose.oZ.toFixed(2) : '-'}
+						</div>
+						<div>
+							<span class="text-subtle-2">th</span>
+							{pose.theta !== undefined ? pose.theta.toFixed(2) : '-'}
+						</div>
+					</div>
+				</div>
+			{/if}
+
+			{#if geometry}
+				{#if geometry.case === 'box'}
+					{@const { dimsMm } = geometry.value}
+					<div>
+						<strong class="font-semibold">dimensions</strong>
+						<div class="flex gap-3">
+							<div>
+								<span class="text-subtle-2">x</span>
+								{dimsMm?.x ? dimsMm.x.toFixed(2) : '-'}
+							</div>
+							<div>
+								<span class="text-subtle-2">y</span>
+								{dimsMm?.y ? dimsMm.y.toFixed(2) : '-'}
+							</div>
+							<div>
+								<span class="text-subtle-2">z</span>
+								{dimsMm?.z ? dimsMm.z.toFixed(2) : '-'}
+							</div>
+						</div>
+					</div>
+				{:else if geometry.case === 'capsule'}
+					{@const { value } = geometry}
+					<div>
+						<strong class="font-semibold">dimensions</strong>
+						<div class="flex gap-3">
+							<div>
+								<span class="text-subtle-2">r</span>
+								{value.radiusMm ? value.radiusMm.toFixed(2) : '-'}
+							</div>
+							<div>
+								<span class="text-subtle-2">l</span>
+								{value.lengthMm ? value.lengthMm.toFixed(2) : '-'}
+							</div>
+						</div>
+					</div>
+				{:else if geometry.case === 'sphere'}
+					<div class="flex justify-between">
+						<div>
+							<strong class="font-semibold">dimensions</strong>
+							<div class="flex gap-3">
+								<div>
+									<span class="text-subtle-2">r</span>
+									{geometry.value.radiusMm.toFixed(2)}
+								</div>
+							</div>
+						</div>
+					</div>
+				{/if}
+			{/if}
+		</div>
+
+		<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>
+
+		{#if focused.current}
+			<Button
+				class="w-full"
+				icon="arrow-left"
+				variant="dark"
+				onclick={() => focused.set()}
+			>
+				Exit object view
+			</Button>
+		{:else}
+			<Button
+				class="w-full"
+				icon="image-filter-center-focus"
+				onclick={() => focused.set(object.uuid)}
+			>
+				Enter object view
+			</Button>
+		{/if}
+	</div>
+{/if}

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

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