@viamrobotics/motion-tools 0.5.2 → 0.5.4

package/README.md

@@ -9,31 +9,6 @@ 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
-
------ 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
 
 To add a list of connection configs in an `.env.local` file, use the following format:

package/dist/WorldObject.d.ts

@@ -1,5 +1,5 @@
 import type { Geometry, Pose } from '@viamrobotics/sdk';
-import { BatchedMesh, Box3, Object3D, Vector3 } from 'three';
+import { BatchedMesh, Box3, Object3D, Vector3, type ColorRepresentation } from 'three';
 export type PointsGeometry = {
     case: 'points';
     value: Float32Array<ArrayBuffer>;
@@ -11,11 +11,12 @@ export type LinesGeometry = {
 export type Geometries = Geometry['geometryType'] | PointsGeometry | LinesGeometry;
 export type Metadata = {
     colors?: Float32Array;
-    color?: string;
+    color?: ColorRepresentation;
     gltf?: {
         scene: Object3D;
     };
     points?: Vector3[];
+    pointSize?: number;
     batched?: {
         id: number;
         object: BatchedMesh;

package/dist/color.js

@@ -14,7 +14,7 @@ const toHex = (x) => {
 const oklchToHex = (raw) => {
     const match = raw.match(/oklch\(\s*([\d.]+)%\s+([\d.]+)\s+([\d.]+)\s*\)/);
     if (!match) {
-        return '#000000';
+        return raw;
     }
     const l = parseFloat(match[1]) / 100;
     const c = parseFloat(match[2]);

package/dist/components/App.svelte

@@ -20,7 +20,7 @@
 
 	createPartIDContext(() => partID)
 
-	let root = $state<HTMLElement>()
+	let root = $state.raw<HTMLElement>()
 </script>
 
 <div
@@ -33,10 +33,10 @@
 				{#snippet children({ focus })}
 					<Scene>
 						{@render appChildren?.()}
-
-						<XR />
 					</Scene>
 
+					<XR />
+
 					<DomPortal element={root}>
 						<Dashboard />
 						<Details />

package/dist/components/Details.svelte

@@ -21,7 +21,6 @@
 
 	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(

package/dist/components/Focus.svelte

@@ -12,16 +12,18 @@
 	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)
+			size = box.getSize(vec).toArray()
 			center = box.getCenter(vec).toArray()
 		}
 	})
 </script>
 
-<Camera position={[2, 0, 0]}>
+<Camera position={[size[0], 0, 0]}>
 	<TrackballControls target={center}>
 		<Gizmo />
 	</TrackballControls>

package/dist/components/Geometry.svelte

@@ -64,7 +64,8 @@
 	{...rest}
 >
 	{#if geometry?.case === 'mesh'}
-		{@const meshGeometry = plyLoader.parse(atob(geometry.value.mesh as unknown as string))}
+		{@const mesh = geometry.value.mesh as Uint8Array<ArrayBuffer>}
+		{@const meshGeometry = plyLoader.parse(typeof mesh === 'string' ? atob(mesh) : mesh.buffer)}
 		<T
 			is={meshGeometry}
 			{oncreate}

package/dist/components/KeyboardControls.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { MathUtils } from 'three'
 	import { useTask } from '@threlte/core'
-	import type CameraController from 'camera-controls'
+	import type { CameraControlsRef } from '@threlte/extras'
 	import { PressedKeys } from 'runed'
 	import { useFocused } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
 	interface Props {
-		cameraControls: CameraController
+		cameraControls: CameraControlsRef
 	}
 
 	let { cameraControls }: Props = $props()
@@ -20,11 +20,13 @@
 	const s = $derived(keys.has('s'))
 	const a = $derived(keys.has('a'))
 	const d = $derived(keys.has('d'))
+	const r = $derived(keys.has('r'))
+	const f = $derived(keys.has('f'))
 	const up = $derived(keys.has('arrowup'))
 	const left = $derived(keys.has('arrowleft'))
 	const down = $derived(keys.has('arrowdown'))
 	const right = $derived(keys.has('arrowright'))
-	const any = $derived(w || s || a || d || up || left || down || right)
+	const any = $derived(w || s || a || d || r || f || up || left || down || right)
 
 	const { start, stop } = useTask(
 		(delta) => {
@@ -46,6 +48,14 @@
 				cameraControls.forward(-0.01 * dt, true)
 			}
 
+			if (r) {
+				cameraControls.dolly(0.01 * dt, true)
+			}
+
+			if (f) {
+				cameraControls.dolly(-0.01 * dt, true)
+			}
+
 			if (left) {
 				cameraControls.rotate(-0.1 * MathUtils.DEG2RAD * dt, 0, true)
 			}

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

@@ -1,6 +1,6 @@
-import type CameraController from 'camera-controls';
+import type { CameraControlsRef } from '@threlte/extras';
 interface Props {
-    cameraControls: CameraController;
+    cameraControls: CameraControlsRef;
 }
 declare const KeyboardControls: import("svelte").Component<Props, {}, "">;
 type KeyboardControls = ReturnType<typeof KeyboardControls>;

package/dist/components/Pointcloud.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { Points, BufferAttribute, BufferGeometry, PointsMaterial } from 'three'
+
 	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'
@@ -12,18 +13,15 @@
 
 	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 ?? new Float32Array())
 
-	$effect(() => {
-		material.vertexColors = colors !== undefined
+	const points = new Points()
+	const geometry = new BufferGeometry()
+	const material = new PointsMaterial()
+
+	$effect.pre(() => {
+		material.size = object.metadata.pointSize ?? 0.01
 	})
 
 	$effect.pre(() => {
@@ -31,8 +29,13 @@
 	})
 
 	$effect.pre(() => {
+		material.vertexColors = colors !== undefined
+		material.color.set(colors ? 0xffffff : (object.metadata.color ?? '#888888'))
+
+		material.toneMapped = false
 		if (colors) {
 			geometry.setAttribute('color', new BufferAttribute(colors, 3))
+			geometry.attributes.color.needsUpdate = true
 		}
 	})
 

package/dist/components/Scene.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
 	import { Color, Vector3 } from 'three'
 	import { T } from '@threlte/core'
-	import { Gizmo, Grid, interactivity } from '@threlte/extras'
+	import {
+		CameraControls,
+		type CameraControlsRef,
+		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'
@@ -16,6 +21,7 @@
 	import { useXR } from '@threlte/xr'
 	import { useTransformControls } from '../hooks/useControls.svelte'
 	import KeyboardControls from './KeyboardControls.svelte'
+	import { useOrigin } from './xr/useOrigin.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -35,6 +41,7 @@
 
 	const focused = useFocused()
 	const transformControls = useTransformControls()
+	const origin = useOrigin()
 
 	const { isPresenting } = useXR()
 </script>
@@ -44,12 +51,16 @@
 	args={[new Color('white')]}
 />
 
-<T.Group rotation.x={$isPresenting ? -Math.PI / 2 : 0}>
+<T.Group
+	position={origin.position}
+	rotation.x={$isPresenting ? -Math.PI / 2 : 0}
+	rotation.z={origin.rotation}
+>
 	{#if focused.current === undefined}
 		{#if !$isPresenting}
 			<Camera position={[3, 3, 3]}>
 				<CameraControls enabled={!transformControls.active}>
-					{#snippet children({ ref })}
+					{#snippet children({ ref }: { ref: CameraControlsRef })}
 						<KeyboardControls cameraControls={ref} />
 						<Gizmo />
 					{/snippet}
@@ -71,6 +82,8 @@
 				plane="xy"
 				sectionColor="#333"
 				infiniteGrid
+				cellSize={0.5}
+				sectionSize={10}
 				fadeOrigin={new Vector3()}
 				fadeDistance={25}
 			/>

package/dist/components/SceneProviders.svelte

@@ -14,6 +14,7 @@
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
 	import { provideSettings } from '../hooks/useSettings.svelte'
+	import { provideOrigin } from './xr/useOrigin.svelte'
 
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
@@ -29,6 +30,7 @@
 	provideRefreshRates()
 	provideLogs()
 
+	provideOrigin()
 	provideStaticGeometries()
 	provideShapes()
 
@@ -37,7 +39,6 @@
 	providePointclouds(() => partID.current)
 	provideMotionClient(() => partID.current)
 	provideObjects()
-
 	const { focus } = provideSelection()
 </script>
 

package/dist/components/dashboard/Button.svelte

@@ -18,9 +18,6 @@
 		class: className = '',
 		onclick,
 	}: Props = $props()
-
-	const activeClasses = 'z-10 border-gray-5 bg-white text-gray-8'
-	const inactiveClasses = 'bg-light border-medium text-disabled'
 </script>
 
 <Tooltip
@@ -28,7 +25,11 @@
 	location="bottom"
 >
 	<label
-		class={[className, 'relative block border', active ? activeClasses : inactiveClasses]}
+		class={[
+			className,
+			'relative block border',
+			active ? 'border-gray-5 text-gray-8 z-10 bg-white' : 'bg-light border-medium text-disabled',
+		]}
 		aria-describedby={tooltipID}
 	>
 		<button

package/dist/components/portal/PortalTarget.svelte

@@ -8,11 +8,11 @@
 	let { id = 'default' }: Props = $props()
 
 	const portals = usePortalContext()
-	const childArray = $derived(portals.get(id))
+	const childrenArray = $derived(portals.get(id))
 </script>
 
-{#if childArray}
-	{#each childArray as children (children)}
-		{@render children?.()}
+{#if childrenArray !== undefined}
+	{#each childrenArray as children (children)}
+		{@render children()}
 	{/each}
 {/if}

package/dist/components/xr/Controllers.svelte

@@ -1,56 +1,48 @@
 <script lang="ts">
 	import { Controller } from '@threlte/xr'
-	import { useGamepad } from '@threlte/extras'
+	// import { useGamepad } from '@threlte/extras'
 
-	import { BaseClient } from '@viamrobotics/sdk'
+	// import { BaseClient } from '@viamrobotics/sdk'
 
 	import { RigidBody } from '@threlte/rapier'
 	import HandCollider from './HandCollider.svelte'
-	import { usePartID } from '../../hooks/usePartID.svelte'
-	import { useResourceNames, useRobotClient } from '@viamrobotics/svelte-sdk'
-
-	const gamepadLeft = useGamepad({ xr: true, hand: 'left' })
-
-	const partID = usePartID()
-	const resources = useResourceNames(() => partID.current)
-	const robotClient = useRobotClient(() => partID.current)
-	const resource = $derived(resources.current.find((r) => r.subtype === 'base'))
-	const baseClient = $derived(
-		robotClient.current && resource ? new BaseClient(robotClient.current, resource.name) : undefined
-	)
-
-	const linear = { x: 0, y: 0, z: 0 }
-	const angular = { x: 0, y: 0, z: 0 }
-
-	gamepadLeft.squeeze.on('change', (event) => {
-		linear.y = -event.value
-		baseClient?.setPower(linear, angular)
-	})
-
-	gamepadLeft.trigger.on('change', (event) => {
-		if (typeof event.value === 'number') {
-			linear.y = event.value
-			baseClient?.setPower(linear, angular)
-		}
-	})
-
-	gamepadLeft.thumbstick.on('change', (event) => {
-		if (typeof event.value === 'object') {
-			angular.z = event.value.x
-			baseClient?.setPower(linear, angular)
-		}
-	})
-
-	const onselectstart = () => {}
-
-	const onselectend = () => {}
+	// import { usePartID } from '../../hooks/usePartID.svelte'
+	// import { useResourceNames, useRobotClient } from '@viamrobotics/svelte-sdk'
+
+	// const gamepadLeft = useGamepad({ xr: true, hand: 'left' })
+
+	// const partID = usePartID()
+	// const resources = useResourceNames(() => partID.current)
+	// const robotClient = useRobotClient(() => partID.current)
+	// const resource = $derived(resources.current.find((r) => r.subtype === 'base'))
+	// const baseClient = $derived(
+	// 	robotClient.current && resource ? new BaseClient(robotClient.current, resource.name) : undefined
+	// )
+
+	// const linear = { x: 0, y: 0, z: 0 }
+	// const angular = { x: 0, y: 0, z: 0 }
+
+	// gamepadLeft.squeeze.on('change', (event) => {
+	// 	linear.y = -event.value
+	// 	baseClient?.setPower(linear, angular)
+	// })
+
+	// gamepadLeft.trigger.on('change', (event) => {
+	// 	if (typeof event.value === 'number') {
+	// 		linear.y = event.value
+	// 		baseClient?.setPower(linear, angular)
+	// 	}
+	// })
+
+	// gamepadLeft.thumbstick.on('change', (event) => {
+	// 	if (typeof event.value === 'object') {
+	// 		angular.z = event.value.x
+	// 		baseClient?.setPower(linear, angular)
+	// 	}
+	// })
 </script>
 
-<Controller
-	left
-	{onselectstart}
-	{onselectend}
->
+<Controller left>
 	{#snippet grip()}
 		<RigidBody type="kinematicPosition">
 			<HandCollider />
@@ -58,11 +50,7 @@
 	{/snippet}
 </Controller>
 
-<Controller
-	right
-	{onselectstart}
-	{onselectend}
->
+<Controller right>
 	{#snippet grip()}
 		<RigidBody type="kinematicPosition">
 			<HandCollider />

package/dist/components/xr/Controllers.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const Controllers: import("svelte").Component<Record<string, never>, {}, "">;
-type Controllers = ReturnType<typeof Controllers>;
+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 Controllers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Controllers = InstanceType<typeof Controllers>;
 export default Controllers;

package/dist/components/xr/Hands.svelte

@@ -2,6 +2,7 @@
 	import { Hand } from '@threlte/xr'
 
 	console.log('hands')
+
 	const onpinchstart = () => {
 		console.log('start')
 	}

package/dist/components/xr/OriginMarker.svelte

@@ -4,62 +4,112 @@
 	import { Collider, RigidBody } from '@threlte/rapier'
 	import { RigidBody as RigidBodyType } from '@dimforge/rapier3d-compat'
 	import { useController } from '@threlte/xr'
-	import { Group, Mesh, Quaternion, Vector3 } from 'three'
+	import { Euler, Group, Quaternion, Vector3 } from 'three'
+	import { useOrigin } from './useOrigin.svelte'
+
+	const origin = useOrigin()
 
 	const height = 0.1
 	const radius = 0.05
 
 	const group = new Group()
-	const mesh = new Mesh()
+	const innerGroup = new Group()
 
 	const vec3 = new Vector3()
+
 	const quaternion = new Quaternion()
+	const euler = new Euler()
 
 	const offset = new Vector3()
+
 	const position = new Vector3()
 
-	let hovering = $state(false)
 	let dragging = $state(false)
 	let rotating = $state(false)
 
-	let rigidBody: RigidBodyType | undefined = $state()
+	let currentDistance = 0
+	const rotateDown = new Vector3()
+
+	let rigidBody = $state<RigidBodyType>()
 
 	const left = useController('left')
+	const right = useController('right')
+
 	const leftPad = useGamepad({ xr: true, hand: 'left' })
+	const rightPad = useGamepad({ xr: true, hand: 'right' })
 
 	leftPad.trigger.on('down', () => {
+		const grip = $left?.grip
+
+		if (!grip) {
+			return
+		}
+
 		dragging = true
-		mesh.getWorldPosition(vec3)
+		innerGroup.getWorldPosition(vec3)
 		offset.copy($left!.grip.position).sub(vec3)
 	})
 	leftPad.trigger.on('up', () => (dragging = false))
 
-	leftPad.squeeze.on('down', () => {
+	rightPad.trigger.on('down', () => {
+		const grip = $right?.grip
+
+		if (!grip) {
+			return
+		}
+
 		rotating = true
-		mesh.getWorldQuaternion(quaternion)
+		rotateDown.copy($right?.grip.position)
+		currentDistance = euler.z
 	})
-	leftPad.squeeze.on('up', () => (rotating = false))
-
-	const onsensorenter = () => (hovering = true)
-	const onsensorexit = () => (hovering = false)
+	rightPad.trigger.on('up', () => (rotating = false))
 
-	const { start, stop } = useTask(
+	const dragTask = useTask(
 		() => {
 			if (!$left || !rigidBody) return
 
 			position.copy($left.grip.position).sub(offset)
 
+			origin.set(position)
+
 			rigidBody.setNextKinematicTranslation({ x: position.x, y: position.y, z: position.z })
 		},
 		{ autoStart: false }
 	)
 
-	$effect(() => (hovering && dragging ? start() : stop()))
-</script>
+	const rotateTask = useTask(
+		() => {
+			if (!$right || !rigidBody) return
 
-{#if rotating}
-	<!-- TODO -->
-{/if}
+			const distance = rotateDown.distanceToSquared($right.grip.position)
+
+			const rotation = rigidBody.rotation()
+			quaternion.copy(rotation)
+			euler.setFromQuaternion(quaternion)
+			euler.z = distance + currentDistance
+			origin.set(undefined, euler.z)
+
+			rigidBody.setNextKinematicRotation(quaternion.setFromEuler(euler))
+		},
+		{ autoStart: false }
+	)
+
+	$effect.pre(() => {
+		if (dragging) {
+			dragTask.start()
+		} else {
+			dragTask.stop()
+		}
+	})
+
+	$effect.pre(() => {
+		if (rotating) {
+			rotateTask.start()
+		} else {
+			rotateTask.stop()
+		}
+	})
+</script>
 
 <T
 	is={group}
@@ -73,23 +123,13 @@
 			sensor
 			shape="cone"
 			args={[height / 2, radius]}
-			{onsensorenter}
-			{onsensorexit}
 		>
-			<T is={mesh}>
-				<T.ConeGeometry
-					args={[radius, height]}
-					oncreate={(ref) => {
-						ref.rotateX(-Math.PI / 2)
-						ref.translate(0, 0, height / 2)
-					}}
-				/>
-				<T.MeshStandardMaterial color={hovering ? 'hotpink' : 'red'} />
-
+			<T is={innerGroup}>
 				<Grid
 					plane="xy"
 					position.y={0.05}
-					fadeDistance={1}
+					fadeDistance={5}
+					fadeOrigin={new Vector3()}
 					cellSize={0.1}
 					cellColor="#fff"
 					sectionColor="#fff"

package/dist/components/xr/XR.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
-	import { XR, XRButton } from '@threlte/xr'
+	import { T } from '@threlte/core'
+	import { useXR, XR, XRButton } from '@threlte/xr'
 	import OriginMarker from './OriginMarker.svelte'
 	import DomPortal from '../DomPortal.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
+	import Controllers from './Controllers.svelte'
 
+	const { isPresenting } = useXR()
 	const settings = useSettings()
 	const enableXR = $derived(settings.current.enableXR)
 </script>
 
 {#if enableXR}
 	<XR>
-		<OriginMarker />
+		<T.Group rotation.x={$isPresenting ? -Math.PI / 2 : 0}>
+			<OriginMarker />
+		</T.Group>
+
+		<Controllers />
 	</XR>
 
 	<DomPortal>