@viamrobotics/motion-tools 0.7.0 → 0.8.0

package/dist/WorldObject.d.ts

@@ -17,6 +17,8 @@ export type Metadata = {
     };
     points?: Vector3[];
     pointSize?: number;
+    lineWidth?: number;
+    lineDotColor?: ColorRepresentation;
     batched?: {
         id: number;
         object: BatchedMesh;

package/dist/components/CameraControls.svelte

@@ -4,10 +4,20 @@
 	import KeyboardControls from './KeyboardControls.svelte'
 	import Portal from './portal/Portal.svelte'
 	import Button from './dashboard/Button.svelte'
+	import { useShapes } from '../hooks/useShapes.svelte'
 
+	const shapes = useShapes()
 	const transformControls = useTransformControls()
 
 	let ref = $state.raw<CameraControlsRef>()
+
+	$effect(() => {
+		if (shapes.camera) {
+			const { position, lookAt, animate } = shapes.camera
+			ref?.setPosition(position.x, position.y, position.z, animate)
+			ref?.setLookAt(position.x, position.y, position.z, lookAt.x, lookAt.y, lookAt.z, animate)
+		}
+	})
 </script>
 
 <Portal id="dashboard">

package/dist/components/Geometry.svelte

@@ -101,7 +101,7 @@
 	{#if geometry?.case === 'line'}
 		<MeshLineMaterial
 			{color}
-			width={0.005}
+			width={metadata.lineWidth ?? 0.005}
 		/>
 	{:else if geometry}
 		<T.MeshToonMaterial

package/dist/components/Line.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Instance, InstancedMesh } from '@threlte/extras'
+	import Frame from './Frame.svelte'
+	import type { WorldObject } from '../WorldObject'
+	import { useSettings } from '../hooks/useSettings.svelte'
+
+	interface Props {
+		object: WorldObject
+	}
+
+	let { object }: Props = $props()
+
+	const settings = useSettings()
+	$inspect(object.metadata.points)
+</script>
+
+<Frame
+	{...object}
+	metadata={{
+		...object.metadata,
+		lineWidth: settings.current.lineWidth,
+	}}
+/>
+
+{#if object.metadata.lineDotColor && object.metadata.points}
+	<InstancedMesh frustumCulled={false}>
+		<T.SphereGeometry />
+		<T.MeshBasicMaterial color={object.metadata.lineDotColor} />
+
+		{#each object.metadata.points as { x, y, z }, i (i)}
+			<Instance
+				position.x={x}
+				position.y={y}
+				position.z={z}
+				scale={Number(settings.current.lineDotSize)}
+			/>
+		{/each}
+	</InstancedMesh>
+{/if}

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

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

package/dist/components/Shapes.svelte

@@ -4,6 +4,7 @@
 	import { useShapes } from '../hooks/useShapes.svelte'
 	import WorldObject from './WorldObject.svelte'
 	import Frame from './Frame.svelte'
+	import Line from './Line.svelte'
 
 	const shapes = useShapes()
 </script>
@@ -47,3 +48,7 @@
 		<PortalTarget id={object.name} />
 	</WorldObject>
 {/each}
+
+{#each shapes.lines as object (object.uuid)}
+	<Line {object} />
+{/each}

package/dist/components/Tree/Settings.svelte

@@ -108,6 +108,31 @@
 			</label>
 		</div>
 
+		<h3 class="text-base"><strong>Lines</strong></h3>
+		<div class="flex flex-col gap-2.5">
+			<label class="flex items-center justify-between gap-2">
+				Thickness
+
+				<div class="w-20">
+					<Input
+						bind:value={settings.current.lineWidth}
+						on:keydown={(event) => event.stopImmediatePropagation()}
+					/>
+				</div>
+			</label>
+
+			<label class="flex items-center justify-between gap-2">
+				Dot size
+
+				<div class="w-20">
+					<Input
+						bind:value={settings.current.lineDotSize}
+						on:keydown={(event) => event.stopImmediatePropagation()}
+					/>
+				</div>
+			</label>
+		</div>
+
 		<h3 class="text-base"><strong>Misc</strong></h3>
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between gap-2">

package/dist/hooks/useObjects.svelte.js

@@ -19,6 +19,7 @@ export const provideObjects = () => {
         ...shapes.models,
         ...shapes.nurbs,
         ...shapes.points,
+        ...shapes.lines,
         ...statics.current,
         ...shapes.poses,
     ]);

package/dist/hooks/useSettings.svelte.d.ts

@@ -9,6 +9,8 @@ interface Settings {
     gridFadeDistance: number;
     pointSize: number;
     pointColor: string;
+    lineWidth: number;
+    lineDotSize: number;
     enableXR: boolean;
     enableMeasure: boolean;
     renderStats: boolean;

package/dist/hooks/useSettings.svelte.js

@@ -11,7 +11,9 @@ const defaults = () => ({
     gridSectionSize: 10,
     gridFadeDistance: 25,
     pointSize: 0.01,
-    pointColor: '#333',
+    pointColor: '#333333',
+    lineWidth: 0.005,
+    lineDotSize: 0.01,
     enableMeasure: false,
     enableXR: false,
     renderStats: false,

package/dist/hooks/useShapes.svelte.d.ts

@@ -1,8 +1,10 @@
+import { Vector3 } from 'three';
 import { BatchedArrow } from '../three/BatchedArrow';
 import { WorldObject, type PointsGeometry } from '../WorldObject';
 type ConnectionStatus = 'connecting' | 'open' | 'closed';
 interface Context {
     points: WorldObject<PointsGeometry>[];
+    lines: WorldObject[];
     meshes: WorldObject[];
     poses: WorldObject[];
     nurbs: WorldObject[];
@@ -11,6 +13,11 @@ interface Context {
     object3ds: {
         batchedArrow: BatchedArrow;
     };
+    camera: {
+        position: Vector3;
+        lookAt: Vector3;
+        animate: boolean;
+    } | undefined;
 }
 export declare const provideShapes: () => void;
 export declare const useShapes: () => Context;

package/dist/hooks/useShapes.svelte.js

@@ -39,10 +39,12 @@ export const provideShapes = () => {
     const maxReconnectDelay = 5_000;
     let ws;
     const points = $state([]);
+    const lines = $state([]);
     const meshes = $state([]);
     const poses = $state([]);
     const nurbs = $state([]);
     const models = $state([]);
+    let camera = $state();
     let connectionStatus = $state('connecting');
     const color = new Color();
     const direction = new Vector3();
@@ -177,6 +179,40 @@ export const provideShapes = () => {
             value: positions,
         }, metadata));
     };
+    const addLine = async (reader) => {
+        // Read label length
+        const labelLen = reader.read();
+        let label = '';
+        for (let i = 0; i < labelLen; i++) {
+            label += String.fromCharCode(reader.read());
+        }
+        // Read counts
+        const nPoints = reader.read();
+        // Read default color
+        const lineR = reader.read();
+        const lineG = reader.read();
+        const lineB = reader.read();
+        const dotR = reader.read();
+        const dotG = reader.read();
+        const dotB = reader.read();
+        // Read positions
+        const positions = new Float32Array(nPoints * 3);
+        for (let i = 0; i < nPoints * 3; i++) {
+            positions[i] = reader.read();
+        }
+        const points = [];
+        for (let i = 0; i < positions.length; i += 3) {
+            points.push(new Vector3(positions[i], positions[i + 1], positions[i + 2]));
+        }
+        lines.push(new WorldObject(label, undefined, undefined, {
+            case: 'line',
+            value: positions,
+        }, {
+            points,
+            color: lineR === -1 ? undefined : new Color().setRGB(lineR, lineG, lineB),
+            lineDotColor: dotR === -1 ? undefined : new Color().setRGB(dotR, dotG, dotB),
+        }));
+    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const addGeometries = (geometries, colors, parent) => {
         let i = 0;
@@ -224,10 +260,16 @@ export const provideShapes = () => {
                 models.splice(index, 1);
                 continue;
             }
+            index = lines.findIndex((m) => m.name === name);
+            if (index !== -1) {
+                lines.splice(index, 1);
+                continue;
+            }
         }
     };
     const removeAll = () => {
         points.splice(0, points.length);
+        lines.splice(0, lines.length);
         meshes.splice(0, meshes.length);
         nurbs.splice(0, nurbs.length);
         models.splice(0, models.length);
@@ -270,6 +312,9 @@ export const provideShapes = () => {
                 return addPoses(reader);
             }
             else if (type === 2) {
+                return addLine(reader);
+            }
+            else if (type === 3) {
                 return addPCD(reader.buffer);
             }
             else {
@@ -279,6 +324,13 @@ export const provideShapes = () => {
         const data = tryParse(event.data);
         if (!data)
             return;
+        if ('setCameraPose' in data) {
+            camera = {
+                position: new Vector3(data.Position.X, data.Position.Y, data.Position.Z),
+                lookAt: new Vector3(data.LookAt.X, data.LookAt.Y, data.LookAt.Z),
+                animate: data.Animate,
+            };
+        }
         if ('geometries' in data) {
             return addGeometries(data.geometries, data.colors, data.parent);
         }
@@ -310,6 +362,9 @@ export const provideShapes = () => {
         get points() {
             return points;
         },
+        get lines() {
+            return lines;
+        },
         get meshes() {
             return meshes;
         },
@@ -328,6 +383,9 @@ export const provideShapes = () => {
         object3ds: {
             batchedArrow,
         },
+        get camera() {
+            return camera;
+        },
     });
 };
 export const useShapes = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",