@viamrobotics/motion-tools 0.4.0 → 0.5.1

package/README.md

@@ -11,18 +11,28 @@ Open the machine config page (bottom right) and enter in connection details to v
 
 ## 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
-- end effector pose visualized
-- poses of all frames
-- bounding boxes should include just the thing and not children
-- configure frames from here
+----- hard -----
+
+- animated sequence of motion plan
+- Give better fetching / connection state info
+- configure frames in app
+- embed in teleop
+
+----- medium -----
+
+- remote IP access when custom drawing, to draw on remote computers
+- geometries need to be parented to parent
 - color pallet for resource to color
+- measurement tool
+
+----- easy ------
+
+- double click to set trackball center in object view
+- Set default pointcloud color in settings
+- points are not sized right in ortho cam view
+- bounding boxes should include just the thing and not children
+
+--- action items ----
 
 ## Env files
 

package/dist/WorldObject.d.ts

@@ -1,8 +1,8 @@
 import type { Geometry, Pose } from '@viamrobotics/sdk';
-import { Box3, Object3D, Vector3 } from 'three';
+import { BatchedMesh, Box3, Object3D, Vector3 } from 'three';
 export type PointsGeometry = {
     case: 'points';
-    value: Float32Array;
+    value: Float32Array<ArrayBuffer>;
 };
 export type LinesGeometry = {
     case: 'line';
@@ -18,7 +18,7 @@ export type Metadata = {
     points?: Vector3[];
     batched?: {
         id: number;
-        name: string;
+        object: BatchedMesh;
     };
     getBoundingBoxAt?: (box: Box3) => void;
 };

package/dist/WorldObject.js

@@ -1,4 +1,4 @@
-import { Box3, MathUtils, Object3D, Vector3 } from 'three';
+import { BatchedMesh, Box3, MathUtils, Object3D, Vector3 } from 'three';
 import { createPose } from './transform';
 export class WorldObject {
     uuid;

package/dist/color.d.ts

@@ -6,4 +6,19 @@ import { Color, type ColorRepresentation } from 'three';
  * @returns A new THREE.Color instance with the darkened color.
  */
 export declare const darkenColor: (value: ColorRepresentation, percent: number) => Color;
-export declare const mapStringToColor: () => void;
+export declare const colors: {
+    readonly selected: string;
+    readonly default: string;
+    readonly arm: {
+        readonly selected: string;
+        readonly default: string;
+    };
+    readonly camera: {
+        readonly selected: string;
+        readonly default: string;
+    };
+    readonly gripper: {
+        readonly selected: string;
+        readonly default: string;
+    };
+};

package/dist/color.js

@@ -1,4 +1,44 @@
 import { Color } from 'three';
+import twColors from 'tailwindcss/colors';
+// Step 3: linear sRGB → sRGB
+const linearToSrgb = (x) => {
+    return x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
+};
+// Step 4: sRGB → hex
+const toHex = (x) => {
+    const hex = Math.round(x * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return hex;
+};
+const oklchToHex = (raw) => {
+    const match = raw.match(/oklch\(\s*([\d.]+)%\s+([\d.]+)\s+([\d.]+)\s*\)/);
+    if (!match) {
+        return '#000000';
+    }
+    const l = parseFloat(match[1]) / 100;
+    const c = parseFloat(match[2]);
+    const h = parseFloat(match[3]);
+    // Convert h from degrees to radians
+    const hRad = (h * Math.PI) / 180;
+    // Step 1: OKLCH → OKLab
+    const aa = c * Math.cos(hRad);
+    const bb = c * Math.sin(hRad);
+    // Step 2: OKLab → linear sRGB
+    const l_ = l + 0.3963377774 * aa + 0.2158037573 * bb;
+    const m_ = l - 0.1055613458 * aa - 0.0638541728 * bb;
+    const s_ = l - 0.0894841775 * aa - 1.291485548 * bb;
+    const l_cubed = l_ ** 3;
+    const m_cubed = m_ ** 3;
+    const s_cubed = s_ ** 3;
+    const r_linear = +4.0767416621 * l_cubed - 3.3077115913 * m_cubed + 0.2309699292 * s_cubed;
+    const g_linear = -1.2684380046 * l_cubed + 2.6097574011 * m_cubed - 0.3413193965 * s_cubed;
+    const b_linear = -0.0041960863 * l_cubed - 0.7034186147 * m_cubed + 1.707614701 * s_cubed;
+    const r = Math.max(0, Math.min(1, linearToSrgb(r_linear)));
+    const g = Math.max(0, Math.min(1, linearToSrgb(g_linear)));
+    const b = Math.max(0, Math.min(1, linearToSrgb(b_linear)));
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
 /**
  * Darkens a THREE.Color by a given percentage while preserving hue.
  * @param color The original THREE.Color instance.
@@ -12,4 +52,19 @@ export const darkenColor = (value, percent) => {
     hsl.l = Math.max(0, hsl.l * (1 - percent / 100));
     return color.setHSL(hsl.h, hsl.s, hsl.l);
 };
-export const mapStringToColor = () => { };
+export const colors = {
+    selected: oklchToHex(twColors.red['900']),
+    default: oklchToHex(twColors.red['500']),
+    arm: {
+        selected: oklchToHex(twColors.amber['900']),
+        default: oklchToHex(twColors.amber['500']),
+    },
+    camera: {
+        selected: oklchToHex(twColors.blue['900']),
+        default: oklchToHex(twColors.blue['500']),
+    },
+    gripper: {
+        selected: oklchToHex(twColors.cyan['900']),
+        default: oklchToHex(twColors.cyan['500']),
+    },
+};

package/dist/components/App.svelte

@@ -1,16 +1,15 @@
 <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/XR.svelte'
 	import { World } from '@threlte/rapier'
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
+	import Dashboard from './dashboard/Dashboard.svelte'
 
 	interface Props {
 		partID?: string
@@ -21,19 +20,9 @@
 
 	createPartIDContext(() => partID)
 
-	const enableXR = new PersistedState('enable-xr', false)
-
-	let root: HTMLElement
+	let root = $state<HTMLElement>()
 </script>
 
-<svelte:window
-	onkeydown={(event) => {
-		if (event.ctrlKey && event.key.toLowerCase() === 'a') {
-			enableXR.current = !enableXR.current
-		}
-	}}
-/>
-
 <div
 	class="relative h-full w-full"
 	bind:this={root}
@@ -45,12 +34,11 @@
 					<Scene>
 						{@render appChildren?.()}
 
-						{#if enableXR.current}
-							<XR />
-						{/if}
+						<XR />
 					</Scene>
 
 					<DomPortal element={root}>
+						<Dashboard />
 						<Details />
 					</DomPortal>
 
@@ -64,7 +52,3 @@
 		</World>
 	</Canvas>
 </div>
-
-{#if enableXR.current}
-	<XRButton mode="immersive-ar" />
-{/if}

package/dist/components/AxesHelper.svelte

@@ -1,17 +1,77 @@
 <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
+	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 extends ThrelteProps<Line2> {
+		length?: number
+		width?: number
+		axesColors?: [x: string, y: string, z: string]
+		depthTest?: boolean
 	}
 
-	let { size, thickness, ...rest }: Props = $props()
+	const {
+		length = 1,
+		width = 0.1,
+		axesColors = ['red', 'green', 'blue'],
+		depthTest = true,
+		...rest
+	}: Props = $props()
+
+	const TOTAL_VERTICES = 9
+	const VERTEX_COMPONENTS = 3
+
+	const line = new Line2()
+	const material = new LineMaterial()
+	const geometry = new LineGeometry()
+	const color = new Color()
+	const colors = new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS)
+	const positions = new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS)
+
+	// Assign colors per vertex
+	$effect.pre(() => {
+		for (let i = 0, l = axesColors.length; i < l; i += 1) {
+			const axis = axesColors[i]
+
+			color.set(axis)
+
+			const axisBufferStart = i * 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={new AxesHelper(size, thickness)}
-	raycast={meshBounds}
+	is={line}
 	{...rest}
-/>
+	raycast={() => null}
+>
+	<T is={geometry} />
+	<T
+		is={material}
+		vertexColors
+		linewidth={width}
+		{depthTest}
+	/>
+</T>

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

@@ -1,4 +1,11 @@
-import { AxesHelper } from '../three/AxesHelper';
-declare const AxesHelper: any;
+import { type Props as ThrelteProps } from '@threlte/core';
+import { Line2 } from 'three/examples/jsm/lines/Line2.js';
+interface Props extends ThrelteProps<Line2> {
+    length?: number;
+    width?: number;
+    axesColors?: [x: string, y: string, z: string];
+    depthTest?: boolean;
+}
+declare const AxesHelper: import("svelte").Component<Props, {}, "">;
 type AxesHelper = ReturnType<typeof AxesHelper>;
 export default AxesHelper;

package/dist/components/Camera.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { PersistedState } from 'runed'
 	import { T } from '@threlte/core'
 	import { PerspectiveCamera, OrthographicCamera } from 'three'
+	import { useSettings } from '../hooks/useSettings.svelte'
 
 	let { children, ...rest } = $props()
 
-	const mode = new PersistedState<'perspective' | 'orthographic'>('camera-type', 'perspective')
+	const settings = useSettings()
+	const mode = $derived(settings.current.cameraMode)
 
 	const perspective = new PerspectiveCamera()
 	perspective.near = 0.01
@@ -18,15 +19,7 @@
 	orthographic.zoom = 200
 </script>
 
-<svelte:window
-	onkeydown={({ key }) => {
-		if (key.toLowerCase() === 'c') {
-			mode.current = mode.current === 'perspective' ? 'orthographic' : 'perspective'
-		}
-	}}
-/>
-
-{#if mode.current === 'perspective'}
+{#if mode === 'perspective'}
 	<T
 		is={perspective}
 		makeDefault
@@ -34,7 +27,7 @@
 	>
 		{@render children?.()}
 	</T>
-{:else if mode.current === 'orthographic'}
+{:else if mode === 'orthographic'}
 	<T
 		is={orthographic}
 		makeDefault

package/dist/components/Details.svelte

@@ -1,22 +1,50 @@
 <script lang="ts">
-	import { useSelectedObject, useFocusedObject, useFocused } from '../hooks/useSelection.svelte'
+	import { Quaternion, Vector3 } from 'three'
 	import { Check, Copy } from 'lucide-svelte'
 	import { Button, Icon } from '@viamrobotics/prime-core'
+	import {
+		useSelectedObject,
+		useFocusedObject,
+		useFocused,
+		useFocusedObject3d,
+		useSelectedObject3d,
+	} from '../hooks/useSelection.svelte'
+	import { useDraggable } from '../hooks/useDraggable.svelte'
+	import { OrientationVector } from '../three/OrientationVector'
 
 	const focused = useFocused()
-	const selectedObject = useSelectedObject()
 	const focusedObject = useFocusedObject()
+	const focusedObject3d = useFocusedObject3d()
+
+	const selectedObject = useSelectedObject()
+	const selectedObject3d = useSelectedObject3d()
+
 	const object = $derived(focusedObject.current ?? selectedObject.current)
+	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
+
+	const worldPosition = $derived(object3d?.getWorldPosition(new Vector3()))
+	const worldQuaternion = $derived(object3d?.getWorldQuaternion(new Quaternion()))
+	const worldOrientation = $derived(
+		worldQuaternion ? new OrientationVector().setFromQuaternion(worldQuaternion) : undefined
+	)
 
 	let copied = $state(false)
+
+	const draggable = useDraggable('details')
 </script>
 
 {#if object}
-	{@const { geometry, pose } = object}
-	<div class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 w-60 border p-2 text-xs">
+	{@const { geometry } = object}
+	<div
+		class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 w-60 border p-2 text-xs"
+		style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
+	>
 		<div class="flex items-center justify-between gap-2 pb-2">
 			<div class="flex items-center gap-1">
-				<button>
+				<button
+					onmousedown={draggable.onDragStart}
+					onmouseup={draggable.onDragEnd}
+				>
 					<Icon name="drag" />
 				</button>
 				{object.name}
@@ -44,43 +72,46 @@
 		</h3>
 
 		<div class="flex flex-col gap-2.5">
-			{#if pose}
+			{#if worldPosition}
 				<div>
-					<strong class="font-semibold">position</strong>
+					<strong class="font-semibold">world position</strong>
+
 					<div class="flex gap-3">
 						<div>
 							<span class="text-subtle-2">x</span>
-							{pose.x !== undefined ? pose.x.toFixed(2) : '-'}
+							{(worldPosition.x * 1000).toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">y</span>
-							{pose.y !== undefined ? pose.y.toFixed(2) : '-'}
+							{(worldPosition.y * 1000).toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">z</span>
-							{pose.z !== undefined ? pose.z.toFixed(2) : '-'}
+							{(worldPosition.z * 1000).toFixed(2)}
 						</div>
 					</div>
 				</div>
+			{/if}
 
+			{#if worldOrientation}
 				<div>
-					<strong class="font-semibold">orientation</strong>
+					<strong class="font-semibold">world orientation</strong>
 					<div class="flex gap-3">
 						<div>
 							<span class="text-subtle-2">x</span>
-							{pose.oX !== undefined ? pose.oX.toFixed(2) : '-'}
+							{worldOrientation.x.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">y</span>
-							{pose.oY !== undefined ? pose.oY.toFixed(2) : '-'}
+							{worldOrientation.y.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">z</span>
-							{pose.oZ !== undefined ? pose.oZ.toFixed(2) : '-'}
+							{worldOrientation.z.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">th</span>
-							{pose.theta !== undefined ? pose.theta.toFixed(2) : '-'}
+							{worldOrientation.th.toFixed(2)}
 						</div>
 					</div>
 				</div>

package/dist/components/Focus.svelte

@@ -14,13 +14,11 @@
 	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()
 		}
 	})
 

package/dist/components/Frame.svelte

@@ -4,6 +4,8 @@
 	import type { WorldObject } from '../WorldObject'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import Geometry from './Geometry.svelte'
+	import { useSelected } from '../hooks/useSelection.svelte'
+	import { colors } from '../color'
 
 	interface Props {
 		uuid: string
@@ -16,11 +18,13 @@
 
 	let { uuid, ...rest }: Props = $props()
 
+	const selected = useSelected()
 	const events = useObjectEvents(() => uuid)
 </script>
 
 <Geometry
 	{uuid}
+	color={selected.current === uuid ? colors.selected : undefined}
 	{...events}
 	{...rest}
 />

package/dist/components/Geometry.svelte

@@ -1,28 +1,37 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
+	import { T, type Props as ThrelteProps } 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 { colors, darkenColor } from '../color'
 	import AxesHelper from './AxesHelper.svelte'
 	import type { WorldObject } from '../WorldObject'
 	import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'
 
 	const plyLoader = new PLYLoader()
 
-	interface Props {
+	interface Props extends ThrelteProps<Object3D> {
 		uuid: string
 		name: string
 		geometry?: WorldObject['geometry']
 		pose: WorldObject['pose']
 		metadata: WorldObject['metadata']
 		children?: Snippet<[{ ref: Object3D }]>
-		[prop: string]: unknown
+		color?: string
 	}
 
-	let { uuid, name, geometry, metadata, pose, children, ...rest }: Props = $props()
+	let {
+		uuid,
+		name,
+		geometry,
+		metadata,
+		pose,
+		color: overrideColor,
+		children,
+		...rest
+	}: Props = $props()
 
 	const type = $derived(geometry?.case)
 	const mesh = $derived.by(() => {
@@ -40,6 +49,12 @@
 	})
 
 	let geo = $state<BufferGeometry>()
+
+	const oncreate = (ref: BufferGeometry) => {
+		geo = ref
+	}
+
+	const color = $derived(overrideColor ?? metadata.color ?? colors.default)
 </script>
 
 <T
@@ -50,49 +65,46 @@
 >
 	{#if geometry?.case === 'mesh'}
 		{@const meshGeometry = plyLoader.parse(atob(geometry.value.mesh as unknown as string))}
-		<T is={meshGeometry} />
+		<T
+			is={meshGeometry}
+			{oncreate}
+		/>
 	{: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
-			}}
+			{oncreate}
 		/>
 	{:else if geometry?.case === 'sphere'}
 		{@const radiusMm = geometry.value.radiusMm ?? 0}
 		<T.SphereGeometry
 			args={[radiusMm * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
+			{oncreate}
 		/>
 	{:else if geometry?.case === 'capsule'}
 		{@const { lengthMm, radiusMm } = geometry.value}
 		<T
 			is={CapsuleGeometry}
 			args={[radiusMm * 0.001, lengthMm * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
+			{oncreate}
 		/>
 	{:else}
 		<AxesHelper
-			width={5}
+			width={3}
 			length={0.1}
 		/>
 	{/if}
 
 	{#if geometry?.case === 'line'}
 		<MeshLineMaterial
-			color={metadata.color ?? 'red'}
+			{color}
 			width={0.005}
 		/>
 	{:else if geometry}
 		<T.MeshToonMaterial
-			color={metadata.color ?? 'red'}
+			{color}
 			side={geometry.case === 'mesh' ? DoubleSide : FrontSide}
 			transparent
 			opacity={0.7}
@@ -100,8 +112,8 @@
 
 		{#if geo}
 			<T.LineSegments raycast={() => null}>
-				<T.EdgesGeometry args={[geo, 1]} />
-				<T.LineBasicMaterial color={darkenColor(metadata.color ?? 'red', 10)} />
+				<T.EdgesGeometry args={[geo, 0]} />
+				<T.LineBasicMaterial color={darkenColor(color, 10)} />
 			</T.LineSegments>
 		{/if}
 	{/if}

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

@@ -1,7 +1,8 @@
+import { type Props as ThrelteProps } from '@threlte/core';
 import { type Snippet } from 'svelte';
 import { Object3D } from 'three';
 import type { WorldObject } from '../WorldObject';
-interface Props {
+interface Props extends ThrelteProps<Object3D> {
     uuid: string;
     name: string;
     geometry?: WorldObject['geometry'];
@@ -10,7 +11,7 @@ interface Props {
     children?: Snippet<[{
         ref: Object3D;
     }]>;
-    [prop: string]: unknown;
+    color?: string;
 }
 declare const Geometry: import("svelte").Component<Props, {}, "">;
 type Geometry = ReturnType<typeof Geometry>;