RSDK-1979 use new motion service wrapper

web/frontend/.eslintrc.cjs

@@ -41,7 +41,25 @@ module.exports = {
     'dot-location': ['error', 'property'],
     'function-call-argument-newline': ['error', 'consistent'],
     'function-paren-newline': ['error', 'consistent'],
-    'id-length': ['error', { exceptions: ['_', 'x', 'y', 'z', 'w', 'i', 'j', 'k'] }],
+    'id-length': [
+      'error',
+      {
+        exceptions: [
+          '_',
+          'x',
+          'X',
+          'y',
+          'Y',
+          'z',
+          'Z',
+          'w',
+          'W',
+          'i',
+          'j',
+          'k',
+        ],
+      },
+    ],
     'init-declarations': 'off',
     'implicit-arrow-linebreak': 'off',
     'lines-around-commen': 'off',

web/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/remote-control",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -18,7 +18,7 @@
     "@improbable-eng/grpc-web": "^0.13.0",
     "@viamrobotics/prime": "^0.1.7",
     "@viamrobotics/rpc": "^0.1.34",
-    "@viamrobotics/sdk": "^0.0.34",
+    "@viamrobotics/sdk": "^0.0.42",
     "@vueuse/core": "^9.13.0",
     "google-protobuf": "^3.21.2",
     "three": "^0.150.1",

web/frontend/src/components/arm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-
-import { ArmClient, Client, type ServiceError } from '@viamrobotics/sdk';
+import { ArmClient, Client } from '@viamrobotics/sdk';
+import type { Pose, ServiceError } from '@viamrobotics/sdk';
 import { copyToClipboardWithToast } from '../lib/copy-to-clipboard';
 import { displayError } from '../lib/error';
 import { roundTo2Decimals } from '../lib/math';
@@ -25,7 +25,7 @@ export interface RawArmStatus extends ArmStatus {
   end_position: Record<string, number>
 }
 
-type Field = 'x' | 'y' | 'z' | 'ox' | 'oy' | 'oz' | 'theta'
+type Field = 'x' | 'y' | 'z' | 'oX' | 'oY' | 'oZ' | 'theta'
 
 const props = defineProps<{
   name: string
@@ -39,11 +39,21 @@ const fieldMap = [
   ['y', 'y'],
   ['z', 'z'],
   ['theta', 'theta'],
-  ['o_x', 'ox'],
-  ['o_y', 'oy'],
-  ['o_z', 'oz'],
+  ['o_x', 'oX'],
+  ['o_y', 'oY'],
+  ['o_z', 'oZ'],
 ] as const;
 
+const updateFieldMap: Record<string, Field> = {
+  X: 'x',
+  Y: 'y',
+  Z: 'z',
+  Theta: 'theta',
+  OX: 'oX',
+  OY: 'oY',
+  OZ: 'oZ',
+} as const;
+
 const toggle = $ref<Record<string, ArmStatus>>({});
 
 const armClient = new ArmClient(props.client, props.name, { requestLogger: rcLogConditionally });
@@ -59,21 +69,22 @@ const stop = async () => {
 const armModifyAllDoEndPosition = async () => {
   const newPieces = toggle[props.name]!.pos_pieces;
 
-  const newPose = {
+  const newPose: Pose = {
     x: 0,
     y: 0,
     z: 0,
-    ox: 0,
-    oy: 0,
-    oz: 0,
+    oX: 0,
+    oY: 0,
+    oZ: 0,
     theta: 0,
   };
 
   for (const newPiece of newPieces) {
     const [, poseField] = newPiece.endPosition;
-    const field = poseField!.toLowerCase() as Field;
-    newPose[field] = newPiece.endPositionValue;
+    const field: Field = updateFieldMap[poseField!]!;
+    newPose[field] = Number(newPiece.endPositionValue);
   }
+
   try {
     await armClient.moveToPosition(newPose);
   } catch (error) {
@@ -108,23 +119,23 @@ const armEndPositionInc = async (updateField: string, amount: number) => {
   const arm = props.rawStatus!;
   const old = arm.end_position;
 
-  const newPose = {
+  const newPose: Pose = {
     x: 0,
     y: 0,
     z: 0,
-    ox: 0,
-    oy: 0,
-    oz: 0,
+    oX: 0,
+    oY: 0,
+    oZ: 0,
     theta: 0,
   };
 
   for (const [endPositionField, poseField] of fieldMap) {
     const endPositionValue = old[endPositionField] || 0;
-    const field : Field = poseField.toLowerCase() as Field;
-    newPose[field] = endPositionValue;
+    const field: Field = poseField;
+    newPose[field] = Number(endPositionValue);
   }
 
-  const field : Field = updateField.toLowerCase() as Field;
+  const field: Field = updateFieldMap[updateField]!;
   newPose[field] += adjustedAmount;
 
   try {

web/frontend/src/components/do-command.vue

@@ -31,7 +31,7 @@ const doCommand = (name: string, command: string) => {
   rcLogConditionally(request);
   props.client.genericService.doCommand(
     request,
-    (error: ServiceError, response: commonApi.DoCommandResponse) => {
+    (error: ServiceError | null, response: commonApi.DoCommandResponse | null) => {
       if (error) {
         toast.error(`Error executing command on ${name}: ${error}`);
         executing.value = false;

web/frontend/src/components/movement-sensor.vue

@@ -32,7 +32,7 @@ const refresh = async () => {
     props.client.movementSensorService.getProperties(
       req,
       new grpc.Metadata(),
-      (err: ServiceError, resp: movementsensorApi.GetPropertiesResponse) => {
+      (err: ServiceError | null, resp: movementsensorApi.GetPropertiesResponse | null) => {
         if (err) {
           if (err.message === 'Response closed without headers') {
             refreshId = window.setTimeout(refresh, 500);
@@ -54,7 +54,7 @@ const refresh = async () => {
     props.client.movementSensorService.getOrientation(
       req,
       new grpc.Metadata(),
-      (err: ServiceError, resp: movementsensorApi.GetOrientationResponse) => {
+      (err: ServiceError | null, resp: movementsensorApi.GetOrientationResponse | null) => {
         if (err) {
           return displayError(err);
         }
@@ -72,7 +72,7 @@ const refresh = async () => {
     props.client.movementSensorService.getAngularVelocity(
       req,
       new grpc.Metadata(),
-      (err: ServiceError, resp: movementsensorApi.GetAngularVelocityResponse) => {
+      (err: ServiceError | null, resp: movementsensorApi.GetAngularVelocityResponse | null) => {
         if (err) {
           return displayError(err);
         }
@@ -90,7 +90,7 @@ const refresh = async () => {
     props.client.movementSensorService.getLinearAcceleration(
       req,
       new grpc.Metadata(),
-      (err: ServiceError, resp: movementsensorApi.GetLinearAccelerationResponse) => {
+      (err: ServiceError | null, resp: movementsensorApi.GetLinearAccelerationResponse | null) => {
         if (err) {
           return displayError(err);
         }
@@ -108,7 +108,7 @@ const refresh = async () => {
     props.client.movementSensorService.getLinearVelocity(
       req,
       new grpc.Metadata(),
-      (err: ServiceError, resp: movementsensorApi.GetLinearVelocityResponse) => {
+      (err: ServiceError | null, resp: movementsensorApi.GetLinearVelocityResponse | null) => {
         if (err) {
           return displayError(err);
         }
@@ -126,7 +126,7 @@ const refresh = async () => {
     props.client.movementSensorService.getCompassHeading(
       req,
       new grpc.Metadata(),
-      (err: ServiceError, resp: movementsensorApi.GetCompassHeadingResponse) => {
+      (err: ServiceError | null, resp: movementsensorApi.GetCompassHeadingResponse | null) => {
         if (err) {
           return displayError(err);
         }
@@ -144,7 +144,7 @@ const refresh = async () => {
     props.client.movementSensorService.getPosition(
       req,
       new grpc.Metadata(),
-      (err: ServiceError, resp: movementsensorApi.GetPositionResponse) => {
+      (err: ServiceError | null, resp: movementsensorApi.GetPositionResponse | null) => {
         if (err) {
           return displayError(err);
         }

web/frontend/src/components/navigation.vue

@@ -141,7 +141,7 @@ const initNavigation = async () => {
     props.client.navigationService.getWaypoints(
       req,
       new grpc.Metadata(),
-      (err: ServiceError, resp: navigationApi.GetWaypointsResponse) => {
+      (err: ServiceError | null, resp: navigationApi.GetWaypointsResponse | null) => {
         grpcCallback(err, resp, false);
 
         if (err) {
@@ -226,7 +226,7 @@ const initNavigation = async () => {
     props.client.navigationService.getLocation(
       req,
       new grpc.Metadata(),
-      (err: ServiceError, resp: navigationApi.GetLocationResponse) => {
+      (err: ServiceError | null, resp: navigationApi.GetLocationResponse | null) => {
         grpcCallback(err, resp, false);
 
         if (err) {

web/frontend/src/components/pcd/pcd-view.vue

@@ -6,15 +6,15 @@
  * This is causing memory leaks.
  */
 
-import { grpc } from '@improbable-eng/grpc-web';
 import { onMounted, onUnmounted, watch } from 'vue';
 import * as THREE from 'three';
 import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
 import { filterResources } from '../../lib/resource';
 import { toast } from '../../lib/toast';
-import { Client, commonApi, motionApi, ServiceError } from '@viamrobotics/sdk';
+import { Client, commonApi, MotionClient } from '@viamrobotics/sdk';
+import type { PoseInFrame } from '@viamrobotics/sdk';
 import InfoButton from '../info-button.vue';
 
 const props = defineProps<{
@@ -24,6 +24,14 @@ const props = defineProps<{
   client: Client
 }>();
 
+const motion = $computed(() => filterResources(props.resources, 'rdk', 'service', 'motion')[0]);
+const motionClient = $computed(() => {
+  if (motion === undefined) {
+    return;
+  }
+  return new MotionClient(props.client, motion.name);
+});
+
 const container = $ref<HTMLDivElement>();
 
 let cube: THREE.LineSegments;
@@ -412,7 +420,7 @@ const handleCanvasMouseUp = (event: MouseEvent) => {
   setPoint(vec3);
 };
 
-const handleMove = () => {
+const handleMove = async () => {
   const [gripper] = filterResources(props.resources, 'rdk', 'component', 'gripper');
 
   if (gripper === undefined) {
@@ -424,42 +432,30 @@ const handleMove = () => {
    * We are deliberately just getting the first motion service to ensure this will not break.
    * May want to allow for more services in the future
    */
-  const [motion] = filterResources(props.resources, 'rdk', 'service', 'motion');
-
-  if (motion === undefined) {
+  if (motionClient === undefined) {
     toast.error('No motion service detected.');
     return;
   }
 
-  const req = new motionApi.MoveRequest();
-  const cameraPoint = new commonApi.Pose();
-
-  cameraPoint.setX(click.x);
-  cameraPoint.setY(click.y);
-  cameraPoint.setZ(click.z);
-
-  const pose = new commonApi.PoseInFrame();
-  pose.setReferenceFrame(props.cameraName!);
-  pose.setPose(cameraPoint);
-  req.setDestination(pose);
-  req.setName(motion.name);
-  const componentName = new commonApi.ResourceName();
-  componentName.setNamespace(gripper.namespace);
-  componentName.setType(gripper.type);
-  componentName.setSubtype(gripper.subtype);
-  componentName.setName(gripper.name);
-  req.setComponentName(componentName);
-
-  props.client.motionService.move(
-    req, new grpc.Metadata(), (error: ServiceError, response: motionApi.MoveResponse) => {
-      if (error) {
-        toast.error(`Error moving: ${error}`);
-        return;
-      }
-
-      toast.success(`Move success: ${response!.getSuccess()}`);
-    }
-  );
+  const pose: PoseInFrame = {
+    referenceFrame: props.cameraName!,
+    pose: {
+      x: click.x,
+      y: click.y,
+      z: click.z,
+      theta: 0,
+      oX: 0,
+      oY: 0,
+      oZ: 0,
+    },
+  };
+
+  try {
+    const success = await motionClient.move(pose, gripper);
+    toast.success(`Move success: ${success}`);
+  } catch (error) {
+    toast.error(`Error moving: ${error}`);
+  }
 };
 
 const handleCenter = () => {