@viamrobotics/motion-tools 0.11.7 → 0.12.0

package/dist/WorldObject.svelte.d.ts

@@ -1,14 +1,20 @@
 import type { Geometry, Pose, TransformWithUUID } from '@viamrobotics/sdk';
 import { BatchedMesh, Box3, Object3D, Vector3, type ColorRepresentation } from 'three';
 export type PointsGeometry = {
-    case: 'points';
-    value: Float32Array<ArrayBuffer>;
+    center: undefined;
+    geometryType: {
+        case: 'points';
+        value: Float32Array<ArrayBuffer>;
+    };
 };
 export type LinesGeometry = {
-    case: 'line';
-    value: Float32Array;
+    center: undefined;
+    geometryType: {
+        case: 'line';
+        value: Float32Array;
+    };
 };
-export type Geometries = Geometry['geometryType'] | PointsGeometry | LinesGeometry;
+export type Geometries = Geometry | PointsGeometry | LinesGeometry;
 export type Metadata = {
     colors?: Float32Array;
     color?: ColorRepresentation;
@@ -35,22 +41,4 @@ export declare class WorldObject<T extends Geometries = Geometries> {
     metadata: Metadata;
     constructor(name: string, pose?: Pose, parent?: string, geometry?: T, metadata?: Metadata);
 }
-export declare const fromTransform: (transform: TransformWithUUID) => WorldObject<{
-    case: undefined;
-    value?: undefined;
-} | {
-    case: "sphere";
-    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Sphere>;
-} | {
-    case: "box";
-    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").RectangularPrism>;
-} | {
-    case: "capsule";
-    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Capsule>;
-} | {
-    case: "mesh";
-    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Mesh>;
-} | {
-    case: "pointcloud";
-    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").PointCloud>;
-}>;
+export declare const fromTransform: (transform: TransformWithUUID) => WorldObject<import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Geometry>>;

package/dist/WorldObject.svelte.js

@@ -61,7 +61,7 @@ export const fromTransform = (transform) => {
     const metadata = transform.metadata
         ? parseMetadata(transform.metadata.fields)
         : {};
-    const worldObject = new WorldObject(transform.referenceFrame, transform.poseInObserverFrame?.pose, transform.poseInObserverFrame?.referenceFrame, transform.physicalObject?.geometryType, metadata);
+    const worldObject = new WorldObject(transform.referenceFrame, transform.poseInObserverFrame?.pose, transform.poseInObserverFrame?.referenceFrame, transform.physicalObject, metadata);
     worldObject.uuid = transform.uuidString;
     return worldObject;
 };

package/dist/components/App.svelte

@@ -15,7 +15,8 @@
 	import { domPortal } from '../portal'
 	import { provideSettings } from '../hooks/useSettings.svelte'
 	import FileDrop from './FileDrop.svelte'
-
+	import WeblabProvider from './weblab/WeblabProvider.svelte'
+	import ArmPositions from './widgets/ArmPositions.svelte'
 	interface Props {
 		partID?: string
 		enableKeybindings?: boolean
@@ -41,32 +42,38 @@
 	<SvelteQueryDevtools initialIsOpen />
 {/if}
 
-<div
-	class="relative h-full w-full overflow-hidden"
-	bind:this={root}
->
-	<Canvas renderMode="always">
-		<World>
-			<SceneProviders>
-				{#snippet children({ focus })}
-					<Scene>
-						{@render appChildren?.()}
-					</Scene>
+<WeblabProvider>
+	<div
+		class="relative h-full w-full overflow-hidden"
+		bind:this={root}
+	>
+		<Canvas renderMode="always">
+			<World>
+				<SceneProviders>
+					{#snippet children({ focus })}
+						<Scene>
+							{@render appChildren?.()}
+						</Scene>
+
+						<XR {@attach domPortal(root)} />
 
-					<XR {@attach domPortal(root)} />
+						<Dashboard {@attach domPortal(root)} />
+						<Details {@attach domPortal(root)} />
 
-					<Dashboard {@attach domPortal(root)} />
-					<Details {@attach domPortal(root)} />
+						{#if !focus}
+							<TreeContainer {@attach domPortal(root)} />
+						{/if}
 
-					{#if !focus}
-						<TreeContainer {@attach domPortal(root)} />
-					{/if}
+						{#if !focus && settings.current.enableArmPositionsWidget}
+							<ArmPositions {@attach domPortal(root)} />
+						{/if}
 
-					<FileDrop {@attach domPortal(root)} />
-				{/snippet}
-			</SceneProviders>
-		</World>
-	</Canvas>
+						<FileDrop {@attach domPortal(root)} />
+					{/snippet}
+				</SceneProviders>
+			</World>
+		</Canvas>
 
-	<ToastContainer />
-</div>
+		<ToastContainer />
+	</div>
+</WeblabProvider>

package/dist/components/Details.svelte

@@ -22,7 +22,7 @@
 		useSelectedObject3d,
 	} from '../hooks/useSelection.svelte'
 	import { useDraggable } from '../hooks/useDraggable.svelte'
-
+	import WeblabActive from './weblab/WeblabActive.svelte'
 	const { ...rest } = $props()
 
 	const focused = useFocused()
@@ -37,6 +37,9 @@
 	const worldPosition = $state({ x: 0, y: 0, z: 0 })
 	const worldOrientation = $state({ x: 0, y: 0, z: 1, th: 0 })
 
+	const localPose = $derived(object?.pose)
+	const referenceFrame = $derived(object?.referenceFrame ?? 'world')
+
 	let copied = $state(false)
 
 	const draggable = useDraggable('details')
@@ -157,11 +160,77 @@
 				</div>
 			{/if}
 
+			<WeblabActive experiment="MOTION_TOOLS_EDIT_FRAME">
+				{#if localPose}
+					<div>
+						<strong class="font-semibold">local position</strong>
+
+						<div class="flex gap-3">
+							<div>
+								<span
+									class="text-subtle-2"
+									aria-label="local position x coordinate">x</span
+								>
+								{localPose.x.toFixed(2)}
+							</div>
+							<div>
+								<span
+									class="text-subtle-2"
+									aria-label="local position y coordinate">y</span
+								>
+								{localPose.y.toFixed(2)}
+							</div>
+							<div>
+								<span
+									class="text-subtle-2"
+									aria-label="local position z coordinate">z</span
+								>
+								{localPose.z.toFixed(2)}
+							</div>
+						</div>
+					</div>
+
+					<div>
+						<strong class="font-semibold">local orientation</strong>
+						<div class="flex gap-3">
+							<div>
+								<span
+									class="text-subtle-2"
+									aria-label="local orientation x coordinate">x</span
+								>
+								{localPose.oX.toFixed(2)}
+							</div>
+							<div>
+								<span
+									class="text-subtle-2"
+									aria-label="local orientation y coordinate">y</span
+								>
+								{localPose.oY.toFixed(2)}
+							</div>
+							<div>
+								<span
+									class="text-subtle-2"
+									aria-label="local orientation z coordinate">z</span
+								>
+								{localPose.oZ.toFixed(2)}
+							</div>
+							<div>
+								<span
+									class="text-subtle-2"
+									aria-label="local orientation theta degrees">th</span
+								>
+								{localPose.theta.toFixed(2)}
+							</div>
+						</div>
+					</div>
+				{/if}
+			</WeblabActive>
+
 			{#if geometry}
-				{#if geometry.case === 'box'}
-					{@const { dimsMm } = geometry.value}
+				{#if geometry.geometryType.case === 'box'}
+					{@const { dimsMm } = geometry.geometryType.value}
 					<div>
-						<strong class="font-semibold">dimensions</strong>
+						<strong class="font-semibold">dimensions (box)</strong>
 						<div class="flex gap-3">
 							<div>
 								<span class="text-subtle-2">x</span>
@@ -177,10 +246,10 @@
 							</div>
 						</div>
 					</div>
-				{:else if geometry.case === 'capsule'}
-					{@const { value } = geometry}
+				{:else if geometry.geometryType.case === 'capsule'}
+					{@const { value } = geometry.geometryType}
 					<div>
-						<strong class="font-semibold">dimensions</strong>
+						<strong class="font-semibold">dimensions (capsule)</strong>
 						<div class="flex gap-3">
 							<div>
 								<span class="text-subtle-2">r</span>
@@ -192,20 +261,35 @@
 							</div>
 						</div>
 					</div>
-				{:else if geometry.case === 'sphere'}
+				{:else if geometry.geometryType.case === 'sphere'}
 					<div class="flex justify-between">
 						<div>
-							<strong class="font-semibold">dimensions</strong>
+							<strong class="font-semibold">dimensions (sphere)</strong>
 							<div class="flex gap-3">
 								<div>
 									<span class="text-subtle-2">r</span>
-									{geometry.value.radiusMm.toFixed(2)}
+									{geometry.geometryType.value.radiusMm.toFixed(2)}
 								</div>
 							</div>
 						</div>
 					</div>
 				{/if}
 			{/if}
+
+			<WeblabActive experiment="MOTION_TOOLS_EDIT_FRAME">
+				<div>
+					<strong class="font-semibold">parent frame</strong>
+					<div class="flex gap-3">
+						<div>
+							<span
+								class="text-subtle-2"
+								aria-label="parent frame name">name</span
+							>
+							{referenceFrame}
+						</div>
+					</div>
+				</div>
+			</WeblabActive>
 		</div>
 
 		<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>

package/dist/components/FileDrop.svelte

@@ -83,8 +83,11 @@
 						undefined,
 						undefined,
 						{
-							case: 'points',
-							value: result.positions,
+							center: undefined,
+							geometryType: {
+								case: 'points',
+								value: result.positions,
+							},
 						},
 						result.colors ? { colors: result.colors } : undefined
 					)

package/dist/components/Geometry.svelte

@@ -2,7 +2,7 @@
 	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 { BufferGeometry, DoubleSide, FrontSide, Group, Mesh } from 'three'
 	import { CapsuleGeometry } from '../three/CapsuleGeometry'
 	import { poseToObject3d } from '../transform'
 	import { colors, darkenColor } from '../color'
@@ -12,13 +12,13 @@
 
 	const plyLoader = new PLYLoader()
 
-	interface Props extends ThrelteProps<Object3D> {
+	interface Props extends ThrelteProps<Group> {
 		uuid: string
 		name: string
 		geometry?: WorldObject['geometry']
 		pose: WorldObject['pose']
 		metadata: WorldObject['metadata']
-		children?: Snippet<[{ ref: Object3D }]>
+		children?: Snippet<[{ ref: Group }]>
 		color?: string
 	}
 
@@ -33,19 +33,31 @@
 		...rest
 	}: Props = $props()
 
-	const type = $derived(geometry?.case)
+	const type = $derived(geometry?.geometryType?.case)
+	const color = $derived(overrideColor ?? metadata.color ?? colors.default)
+
+	const group = new Group()
 	const mesh = $derived.by(() => {
-		const object3d = type === undefined ? new Object3D() : new Mesh()
+		if (type === undefined) {
+			return
+		}
+		const result = new Mesh()
 
 		if (type === 'mesh' || type === 'points' || type === 'line') {
-			object3d.raycast = meshBounds
+			result.raycast = meshBounds
 		}
 
-		return object3d
+		return result
+	})
+
+	$effect.pre(() => {
+		if (geometry?.center && mesh) {
+			poseToObject3d(geometry.center, mesh)
+		}
 	})
 
 	$effect.pre(() => {
-		poseToObject3d(pose, mesh)
+		poseToObject3d(pose, group)
 	})
 
 	let geo = $state.raw<BufferGeometry>()
@@ -53,75 +65,79 @@
 	const oncreate = (ref: BufferGeometry) => {
 		geo = ref
 	}
-
-	const color = $derived(overrideColor ?? metadata.color ?? colors.default)
 </script>
 
 <T
-	is={mesh}
-	{name}
-	{uuid}
+	is={group}
 	{...rest}
-	bvh={{ enabled: false }}
 >
-	{#if geometry?.case === 'mesh'}
-		{@const mesh = geometry.value.mesh as Uint8Array<ArrayBuffer>}
-		{@const meshGeometry = plyLoader.parse(typeof mesh === 'string' ? atob(mesh) : mesh.buffer)}
-		<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}
-		/>
-	{:else if geometry?.case === 'sphere'}
-		{@const radiusMm = geometry.value.radiusMm ?? 0}
-		<T.SphereGeometry
-			args={[radiusMm * 0.001]}
-			{oncreate}
-		/>
-	{:else if geometry?.case === 'capsule'}
-		{@const { lengthMm, radiusMm } = geometry.value}
+	<AxesHelper
+		width={3}
+		length={0.1}
+	/>
+
+	{#if geometry?.geometryType}
 		<T
-			is={CapsuleGeometry}
-			args={[radiusMm * 0.001, lengthMm * 0.001]}
-			{oncreate}
-		/>
-	{:else}
-		<AxesHelper
-			width={3}
-			length={0.1}
-		/>
-	{/if}
+			is={mesh}
+			{name}
+			{uuid}
+			bvh={{ enabled: false }}
+		>
+			{#if geometry.geometryType.case === 'mesh'}
+				{@const mesh = geometry.geometryType.value.mesh as Uint8Array<ArrayBuffer>}
+				{@const meshGeometry = plyLoader.parse(typeof mesh === 'string' ? atob(mesh) : mesh.buffer)}
+				<T
+					is={meshGeometry}
+					{oncreate}
+				/>
+			{:else if geometry.geometryType.case === 'line' && metadata.points}
+				<MeshLineGeometry points={metadata.points} />
+			{:else if geometry.geometryType.case === 'box'}
+				{@const dimsMm = geometry.geometryType.value.dimsMm ?? { x: 0, y: 0, z: 0 }}
+				<T.BoxGeometry
+					args={[dimsMm.x * 0.001, dimsMm.y * 0.001, dimsMm.z * 0.001]}
+					{oncreate}
+				/>
+			{:else if geometry.geometryType.case === 'sphere'}
+				{@const radiusMm = geometry.geometryType.value.radiusMm ?? 0}
+				<T.SphereGeometry
+					args={[radiusMm * 0.001]}
+					{oncreate}
+				/>
+			{:else if geometry.geometryType.case === 'capsule'}
+				{@const { lengthMm, radiusMm } = geometry.geometryType.value}
+				<T
+					is={CapsuleGeometry}
+					args={[radiusMm * 0.001, lengthMm * 0.001]}
+					{oncreate}
+				/>
+			{:else}{/if}
+
+			{#if geometry.geometryType.case === 'line'}
+				<MeshLineMaterial
+					{color}
+					width={metadata.lineWidth ?? 0.005}
+				/>
+			{:else}
+				<T.MeshToonMaterial
+					{color}
+					side={geometry.geometryType.case === 'mesh' ? DoubleSide : FrontSide}
+					transparent
+					opacity={metadata.opacity ?? 0.7}
+				/>
 
-	{#if geometry?.case === 'line'}
-		<MeshLineMaterial
-			{color}
-			width={metadata.lineWidth ?? 0.005}
-		/>
-	{:else if geometry}
-		<T.MeshToonMaterial
-			{color}
-			side={geometry.case === 'mesh' ? DoubleSide : FrontSide}
-			transparent
-			opacity={metadata.opacity ?? 0.7}
-		/>
-
-		{#if geo}
-			<T.LineSegments
-				raycast={() => null}
-				bvh={{ enabled: false }}
-			>
-				<T.EdgesGeometry args={[geo, 0]} />
-				<T.LineBasicMaterial color={darkenColor(color, 10)} />
-			</T.LineSegments>
-		{/if}
+				{#if geo}
+					<T.LineSegments
+						raycast={() => null}
+						bvh={{ enabled: false }}
+					>
+						<T.EdgesGeometry args={[geo, 0]} />
+						<T.LineBasicMaterial color={darkenColor(color, 10)} />
+					</T.LineSegments>
+				{/if}
+			{/if}
+		</T>
 	{/if}
 
-	{@render children?.({ ref: mesh })}
+	{@render children?.({ ref: group })}
 </T>

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

@@ -1,15 +1,15 @@
 import { type Props as ThrelteProps } from '@threlte/core';
 import { type Snippet } from 'svelte';
-import { Object3D } from 'three';
+import { Group } from 'three';
 import type { WorldObject } from '../WorldObject.svelte';
-interface Props extends ThrelteProps<Object3D> {
+interface Props extends ThrelteProps<Group> {
     uuid: string;
     name: string;
     geometry?: WorldObject['geometry'];
     pose: WorldObject['pose'];
     metadata: WorldObject['metadata'];
     children?: Snippet<[{
-        ref: Object3D;
+        ref: Group;
     }]>;
     color?: string;
 }

package/dist/components/Pointcloud.svelte

@@ -7,14 +7,14 @@
 		OrthographicCamera,
 	} from 'three'
 	import { T, useTask, useThrelte } from '@threlte/core'
-	import type { WorldObject } from '../WorldObject.svelte'
+	import type { PointsGeometry, WorldObject } from '../WorldObject.svelte'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import { poseToObject3d } from '../transform'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import type { Snippet } from 'svelte'
 
 	interface Props {
-		object: WorldObject<{ case: 'points'; value: Float32Array<ArrayBuffer> }>
+		object: WorldObject<PointsGeometry>
 		children?: Snippet
 	}
 
@@ -25,7 +25,7 @@
 
 	const colors = $derived(object.metadata.colors)
 	const pointSize = $derived(object.metadata.pointSize ?? settings.current.pointSize)
-	const positions = $derived(object.geometry?.value ?? new Float32Array())
+	const positions = $derived(object.geometry?.geometryType?.value ?? new Float32Array())
 	const orthographic = $derived(settings.current.cameraMode === 'orthographic')
 
 	const points = new Points()

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

@@ -1,10 +1,7 @@
-import type { WorldObject } from '../WorldObject.svelte';
+import type { PointsGeometry, WorldObject } from '../WorldObject.svelte';
 import type { Snippet } from 'svelte';
 interface Props {
-    object: WorldObject<{
-        case: 'points';
-        value: Float32Array<ArrayBuffer>;
-    }>;
+    object: WorldObject<PointsGeometry>;
     children?: Snippet;
 }
 declare const Pointcloud: import("svelte").Component<Props, {}, "">;

package/dist/components/RefreshRate.svelte

@@ -4,23 +4,25 @@
 	import type { Snippet } from 'svelte'
 
 	interface Props {
-		name: string
+		id: string
+		label: string
+		allowLive?: boolean
 		children?: Snippet
 	}
 
-	let { name, children }: Props = $props()
+	let { id, label, allowLive = false, children }: Props = $props()
 
 	const { refreshRates } = useMachineSettings()
-	const rate = $derived(refreshRates.get(name))
+	const rate = $derived(refreshRates.get(id))
 </script>
 
 <label class="flex flex-col gap-1">
-	{name}
+	{label}
 	<Select
 		onchange={(event: InputEvent) => {
 			if (event.target instanceof HTMLSelectElement) {
 				const { value } = event.target
-				refreshRates.set(name, Number.parseInt(value, 10))
+				refreshRates.set(id, Number.parseInt(value, 10))
 			}
 		}}
 		value={String(rate ?? '')}
@@ -30,12 +32,15 @@
 		{:else}
 			<option value="-1">Do not fetch</option>
 			<option value="0">Do not refresh</option>
+			{#if allowLive}
+				<option value="17">60fps</option>
+				<option value="33">30fps</option>
+			{/if}
 			<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>

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    name: string;
+    id: string;
+    label: string;
+    allowLive?: boolean;
     children?: Snippet;
 }
 declare const RefreshRate: import("svelte").Component<Props, {}, "">;

package/dist/components/SceneProviders.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte'
 	import { provideFrames } from '../hooks/useFrames.svelte'
 	import { provideGeometries } from '../hooks/useGeometries.svelte'
 	import { providePointclouds } from '../hooks/usePointclouds.svelte'
@@ -9,12 +10,13 @@
 	import { provideDrawAPI } from '../hooks/useDrawAPI.svelte'
 	import { provideMachineSettings } from '../hooks/useMachineSettings.svelte'
 	import { provideTransformControls } from '../hooks/useControls.svelte'
-	import type { Snippet } from 'svelte'
 	import { provideObjects } from '../hooks/useObjects.svelte'
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
 	import { provideOrigin } from './xr/useOrigin.svelte'
 	import { provideWorldStates } from '../hooks/useWorldState.svelte'
+	import { provideArmClient } from '../hooks/useArmClient.svelte'
+	import { provideArrows } from '../hooks/useArrows.svelte'
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
 	}
@@ -28,6 +30,7 @@
 	provideMachineSettings()
 	provideLogs()
 
+	provideArrows()
 	provideOrigin()
 	provideStaticGeometries()
 	provideDrawAPI()
@@ -38,6 +41,7 @@
 	provideMotionClient(() => partID.current)
 	provideObjects()
 	provideWorldStates()
+	provideArmClient(() => partID.current)
 
 	const { focus } = provideSelection()
 </script>

package/dist/components/StaticGeometries.svelte

@@ -59,8 +59,8 @@
 							} else if (mode === 'rotate') {
 								quaternionToPose(ref.getWorldQuaternion(quaternion), object.pose)
 								ref.quaternion.copy(quaternion)
-							} else if (mode === 'scale' && object.geometry?.case === 'box') {
-								scaleToDimensions(ref.scale, object.geometry)
+							} else if (mode === 'scale' && object.geometry?.geometryType.case === 'box') {
+								scaleToDimensions(ref.scale, object.geometry.geometryType)
 								ref.scale.setScalar(1)
 							}
 						}}