@viamrobotics/motion-tools 0.19.1 → 1.0.2

package/README.md

@@ -1,10 +1,13 @@
-## motion-tools
+# motion-tools
 
 `motion-tools` aims to provide a visualization interface for any spatial information using Viam's APIs. This typically means motion-related monitoring, testing, and debugging.
 
-### Getting started
+## Getting started
 
-#### Quick Setup (Recommended)
+To run the app, you will need to set your project up by installing the app dependencies and ensuring you can connect
+to your machines if required.
+
+### Project setup
 
 The easiest way to get started is using our automated setup script:
 
@@ -20,34 +23,15 @@ This single command will:
 4. Install **bun** runtime
 5. Install all project dependencies
 
-After setup completes, start the development server:
-
-```bash
-make up
-```
-
-#### Manual Setup
+#### Manual setup
 
-If you prefer to install dependencies manually:
+If the above does not work for you, or if you prefer to install dependencies manually:
 
 1. [Install nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
 2. Install Node.js LTS: `nvm install --lts && nvm use --lts`
 3. [Install pnpm](https://pnpm.io/installation)
 4. [Install bun](https://bun.sh/docs/installation)
 5. Install dependencies: `pnpm i`
-6. Run local app server: `pnpm dev`
-
-#### Available Make Commands
-
-- `make setup` - Complete development environment setup
-- `make up` - Start the development server
-- `make help` - Show available commands
-
-### Running the visualizer
-
-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. You can also add machine configs from an env file (see below).
 
 ### Env files for machine configs
 
@@ -67,13 +51,59 @@ VITE_CONFIGS='
 '
 ```
 
-### Executing drawing commands
+### Running the app locally
+
+After setup completes, you can start a local app server with:
+
+```bash
+make up
+```
+
+This starts the app as a static site. The build part of the process will only run if you have not built the app yet as a part of `make up`, or your build is out of date.
+
+#### Running multiple apps
+
+If you want to be able to run multiple versions of the app, you can configure how the servers run. The `make up` command can accept two options:
+
+1. `STATIC_PORT` is the port for the static file server, and defaults to `5173`
+2. `WS_PORT` is the port for the websocket server used to communicate with the draw client API
+
+> [!NOTE]
+> The `WS_PORT` is not fully configurable at the moment, so passing it will only affect where the frontend listens for the websocket server, but calls with the draw client API are currently hardcoded to point to `"http://localhost:3000/"`. If this is a feature you require, please submit a request to the viz team!
+
+To run two apps using the same web socket server, run:
+
+```
+# in one terminal
+make up
+
+# in another terminal
+make up STATIC_PORT=5174
+```
+
+The apps should be available on `http://localhost:5173/` and `http://localhost:5174/`, and calls to the draw client API should render in both.
+
+### Local development
+
+If you are contributing to `motion-tools`, you should just run the development web server with:
+
+```
+pnpm dev
+```
+
+## Running the visualizer
+
+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. You can also add machine configs from an env file (see below).
+
+## Executing drawing commands
 
 The visualizer includes a golang package that allows executing commands to the visualizer.
 
 The list of available commands [can be found here](https://pkg.go.dev/github.com/viam-labs/motion-tools@v0.9.0/client/client).
 
-### Programmatic camera control
+## Programmatic camera control
 
 It is possible to programmatically move the viewer camera and even modify the camera settings during runtime.
 

package/dist/FrameConfigUpdater.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Frame } from './frame';
-import type { WorldObject } from './lib';
-import type { Geometries } from './WorldObject.svelte';
+import type { Entity } from 'koota';
 import type { Pose } from '@viamrobotics/sdk';
+import type { Frame } from './frame';
+import type { Vector3Like } from 'three';
 type UpdateFrameCallback = {
     (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']): void;
 };
@@ -9,26 +9,20 @@ type RemoveFrameCallback = {
     (componentName: string): void;
 };
 export declare class FrameConfigUpdater {
-    private object;
-    private referenceFrame;
     private updateFrame;
     private removeFrame;
-    constructor(object: () => WorldObject<Geometries> | undefined, updateFrame: UpdateFrameCallback, removeFrame: RemoveFrameCallback, referenceFrame: () => string);
-    updateLocalPosition: ({ x, y, z }: {
-        x?: number;
-        y?: number;
-        z?: number;
-    }) => void;
-    updateLocalOrientation: ({ oX, oY, oZ, theta, }: {
+    constructor(updateFrame: UpdateFrameCallback, removeFrame: RemoveFrameCallback);
+    updateLocalPosition: (entity: Entity, position: Partial<Vector3Like>) => void;
+    updateLocalOrientation: (entity: Entity, orientation: {
         oX?: number;
         oY?: number;
         oZ?: number;
         theta?: number;
     }) => void;
-    updateGeometry: (geometry: Partial<Frame["geometry"]>) => void;
-    setFrameParent: (parentName: string) => void;
-    deleteFrame: () => void;
-    setGeometryType: (type: "none" | "box" | "sphere" | "capsule") => void;
-    private sanatizeFloatValue;
+    updateGeometry: (entity: Entity, geometry: Partial<Frame["geometry"]>) => void;
+    setFrameParent: (entity: Entity, parentName: string) => void;
+    deleteFrame: (entity: Entity) => void;
+    setGeometryType: (entity: Entity, type: "none" | "box" | "sphere" | "capsule") => void;
+    private sanitizeFloatValue;
 }
 export {};

package/dist/FrameConfigUpdater.svelte.js

@@ -1,147 +1,147 @@
-import { createPose } from './transform';
+import { traits } from './ecs';
 export class FrameConfigUpdater {
-    object;
-    referenceFrame;
     updateFrame;
     removeFrame;
-    constructor(object, updateFrame, removeFrame, referenceFrame) {
-        this.referenceFrame = referenceFrame;
-        this.object = object;
+    constructor(updateFrame, removeFrame) {
         this.updateFrame = updateFrame;
         this.removeFrame = removeFrame;
     }
-    updateLocalPosition = ({ x, y, z }) => {
-        const object = this.object();
-        if (!object)
-            return;
-        x = this.sanatizeFloatValue(x);
-        y = this.sanatizeFloatValue(y);
-        z = this.sanatizeFloatValue(z);
+    updateLocalPosition = (entity, position) => {
+        const x = this.sanitizeFloatValue(position.x);
+        const y = this.sanitizeFloatValue(position.y);
+        const z = this.sanitizeFloatValue(position.z);
         if (x === undefined && y === undefined && z === undefined)
             return;
-        object.localEditedPose.x = x ?? object.localEditedPose.x;
-        object.localEditedPose.y = y ?? object.localEditedPose.y;
-        object.localEditedPose.z = z ?? object.localEditedPose.z;
-        this.updateFrame(object.name ?? '', this.referenceFrame(), {
-            x: x ?? object.localEditedPose.x,
-            y: y ?? object.localEditedPose.y,
-            z: z ?? object.localEditedPose.z,
-            oX: object.localEditedPose.oX,
-            oY: object.localEditedPose.oY,
-            oZ: object.localEditedPose.oZ,
-            theta: object.localEditedPose.theta,
-        });
+        const change = {};
+        if (x !== undefined)
+            change.x = x;
+        if (y !== undefined)
+            change.y = y;
+        if (z !== undefined)
+            change.z = z;
+        entity.set(traits.EditedPose, change);
+        const name = entity.get(traits.Name);
+        const parent = entity.get(traits.Parent) ?? 'world';
+        const updatedPose = entity.get(traits.EditedPose);
+        if (name && updatedPose) {
+            this.updateFrame(name, parent, updatedPose);
+        }
     };
-    updateLocalOrientation = ({ oX, oY, oZ, theta, }) => {
-        const object = this.object();
-        if (!object)
-            return;
-        oX = this.sanatizeFloatValue(oX);
-        oY = this.sanatizeFloatValue(oY);
-        oZ = this.sanatizeFloatValue(oZ);
-        theta = this.sanatizeFloatValue(theta);
-        if (oX === undefined && oY === undefined && oZ === undefined && theta === undefined)
+    updateLocalOrientation = (entity, orientation) => {
+        const oX = this.sanitizeFloatValue(orientation.oX);
+        const oY = this.sanitizeFloatValue(orientation.oY);
+        const oZ = this.sanitizeFloatValue(orientation.oZ);
+        const theta = this.sanitizeFloatValue(orientation.theta);
+        if (oX === undefined && oY === undefined && oZ === undefined && theta === undefined) {
             return;
-        object.localEditedPose.oX = oX ?? object.localEditedPose.oX;
-        object.localEditedPose.oY = oY ?? object.localEditedPose.oY;
-        object.localEditedPose.oZ = oZ ?? object.localEditedPose.oZ;
-        object.localEditedPose.theta = theta ?? object.localEditedPose.theta;
-        this.updateFrame(object.name ?? '', this.referenceFrame(), {
-            oX: oX ?? object.localEditedPose.oX,
-            oY: oY ?? object.localEditedPose.oY,
-            oZ: oZ ?? object.localEditedPose.oZ,
-            theta: theta ?? object.localEditedPose.theta,
-            x: object.localEditedPose.x,
-            y: object.localEditedPose.y,
-            z: object.localEditedPose.z,
-        });
+        }
+        const change = {};
+        if (oX !== undefined)
+            change.oX = oX;
+        if (oY !== undefined)
+            change.oY = oY;
+        if (oZ !== undefined)
+            change.oZ = oZ;
+        if (theta !== undefined)
+            change.theta = theta;
+        entity.set(traits.EditedPose, change);
+        const name = entity.get(traits.Name);
+        const parent = entity.get(traits.Parent) ?? 'world';
+        const updatedPose = entity.get(traits.EditedPose);
+        if (name && updatedPose) {
+            this.updateFrame(name, parent, updatedPose);
+        }
     };
-    updateGeometry = (geometry) => {
-        const object = this.object();
-        if (!object)
-            return;
-        let geometryObject;
+    updateGeometry = (entity, geometry) => {
+        const name = entity.get(traits.Name);
+        const parent = entity.get(traits.Parent) ?? 'world';
+        const pose = entity.get(traits.EditedPose);
         if (geometry?.type === 'box') {
-            const currentGeometry = object.geometry?.geometryType.value;
-            geometry.x = this.sanatizeFloatValue(geometry.x);
-            geometry.y = this.sanatizeFloatValue(geometry.y);
-            geometry.z = this.sanatizeFloatValue(geometry.z);
-            if (geometry.x === undefined && geometry.y === undefined && geometry.z === undefined)
+            const x = this.sanitizeFloatValue(geometry.x);
+            const y = this.sanitizeFloatValue(geometry.y);
+            const z = this.sanitizeFloatValue(geometry.z);
+            if (x === undefined && y === undefined && z === undefined)
                 return;
-            geometryObject = {
-                type: 'box',
-                x: geometry.x ?? currentGeometry?.dimsMm?.x,
-                y: geometry.y ?? currentGeometry?.dimsMm?.y,
-                z: geometry.z ?? currentGeometry?.dimsMm?.z,
-            };
+            const change = {};
+            if (x !== undefined)
+                change.x = x;
+            if (y !== undefined)
+                change.y = y;
+            if (z !== undefined)
+                change.z = z;
+            entity.set(traits.Box, change);
+            const box = entity.get(traits.Box);
+            if (name && box && pose) {
+                this.updateFrame(name, parent, pose, { type: 'box', ...box });
+            }
         }
         else if (geometry?.type === 'sphere') {
-            const currentGeometry = object.geometry?.geometryType.value;
-            geometry.r = this.sanatizeFloatValue(geometry.r);
-            if (geometry.r === undefined)
+            const r = this.sanitizeFloatValue(geometry.r);
+            if (r === undefined)
                 return;
-            geometryObject = {
-                type: 'sphere',
-                r: geometry.r ?? currentGeometry?.radiusMm,
-            };
+            entity.set(traits.Sphere, { r });
+            const sphere = entity.get(traits.Sphere);
+            if (name && sphere && pose) {
+                this.updateFrame(name, parent, pose, { type: 'sphere', ...sphere });
+            }
         }
         else if (geometry?.type === 'capsule') {
-            const currentGeometry = object.geometry?.geometryType.value;
-            geometry.r = this.sanatizeFloatValue(geometry.r);
-            geometry.l = this.sanatizeFloatValue(geometry.l);
-            if (geometry.r === undefined && geometry.l === undefined)
+            const r = this.sanitizeFloatValue(geometry.r);
+            const l = this.sanitizeFloatValue(geometry.l);
+            if (r === undefined && l === undefined)
                 return;
-            geometryObject = {
-                type: 'capsule',
-                r: geometry.r ?? currentGeometry?.radiusMm,
-                l: geometry.l ?? currentGeometry?.lengthMm,
-            };
+            const change = {};
+            if (r !== undefined)
+                change.r = r;
+            if (l !== undefined)
+                change.l = l;
+            entity.set(traits.Capsule, { r, l });
+            const capsule = entity.get(traits.Capsule);
+            if (name && capsule && pose) {
+                this.updateFrame(name, parent, pose, { type: 'capsule', ...capsule });
+            }
         }
-        this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), geometryObject);
     };
-    setFrameParent = (parentName) => {
-        const object = this.object();
-        if (!object)
-            return;
-        this.updateFrame(object.name ?? '', parentName, createPose(object.localEditedPose));
+    setFrameParent = (entity, parentName) => {
+        const name = entity.get(traits.Name);
+        const pose = entity.get(traits.EditedPose);
+        if (name && pose) {
+            this.updateFrame(name, parentName, pose);
+        }
     };
-    deleteFrame = () => {
-        const object = this.object();
-        if (!object)
-            return;
-        this.removeFrame(object.name ?? '');
+    deleteFrame = (entity) => {
+        const name = entity.get(traits.Name);
+        if (name) {
+            this.removeFrame(name);
+        }
     };
-    setGeometryType = (type) => {
-        const object = this.object();
-        if (!object)
+    setGeometryType = (entity, type) => {
+        const name = entity.get(traits.Name);
+        const parent = entity.get(traits.Parent) ?? 'world';
+        const pose = entity.get(traits.EditedPose);
+        if (!name || !pose)
             return;
         if (type === 'none') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), { type: 'none' });
+            this.updateFrame(name, parent, pose, { type: 'none' });
         }
         else if (type === 'box') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), { type: 'box', x: 100, y: 100, z: 100 });
+            this.updateFrame(name, parent, pose, { type: 'box', x: 100, y: 100, z: 100 });
         }
         else if (type === 'sphere') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), { type: 'sphere', r: 100 });
+            this.updateFrame(name, parent, pose, { type: 'sphere', r: 100 });
         }
         else if (type === 'capsule') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), {
-                x: object.localEditedPose.x,
-                y: object.localEditedPose.y,
-                z: object.localEditedPose.z,
-                oX: object.localEditedPose.oX,
-                oY: object.localEditedPose.oY,
-                oZ: object.localEditedPose.oZ,
-                theta: object.localEditedPose.theta,
-            }, { type: 'capsule', r: 20, l: 100 });
+            this.updateFrame(name, parent, pose, { type: 'capsule', r: 20, l: 100 });
         }
     };
-    sanatizeFloatValue = (value) => {
-        if (value === undefined)
+    sanitizeFloatValue = (value) => {
+        if (value === undefined) {
             return undefined;
+        }
         const num = parseFloat(value.toFixed(2));
-        if (isNaN(num))
+        if (Number.isNaN(num)) {
             return undefined;
-        return num;
+        }
+        return value;
     };
 }

package/dist/WorldObject.svelte.js

@@ -1,5 +1,5 @@
-import { BatchedMesh, Color, MathUtils, Object3D, Vector3 } from 'three';
-import { createPose, matrixToPose, poseToMatrix } from './transform';
+import { BatchedMesh, Color, MathUtils, Vector3 } from 'three';
+import { createPose } from './transform';
 import { isColorRepresentation, isRGB, parseColor, parseOpacity, parseRGB } from './color';
 export const SupportedShapes = {
     points: 'points',
@@ -136,16 +136,3 @@ export const fromTransform = (transform) => {
     worldObject.uuid = transform.uuidString;
     return worldObject;
 };
-export const determinePose = (object, pose) => {
-    if (pose === undefined) {
-        return object.localEditedPose;
-    }
-    else {
-        const poseNetwork = poseToMatrix(object.pose);
-        const poseUsePose = poseToMatrix(pose);
-        const poseLocalEditedPose = poseToMatrix(object.localEditedPose);
-        const poseNetworkInverse = poseNetwork.invert();
-        const resultMatrix = poseUsePose.multiply(poseNetworkInverse).multiply(poseLocalEditedPose);
-        return matrixToPose(resultMatrix);
-    }
-};