Add motor control switch

src/components/Motors.tsx

@@ -21,6 +21,7 @@ import { FocBoolean } from "./Parameters/FocBoolean";
 import { FocScalar } from "./Parameters/FocScalar";
 import { MotorMonitorGraph } from "./MotorMonitorGraph";
 import { useSerialPortOpenStatus } from "../lib/serialContext";
+import { MotorControlTypeSwitch } from "./Parameters/MotorControlTypeSwitch";
 
 const MOTOR_OUTPUT_REGEX = /^\?(\w):(.*)\r?$/;
 
@@ -89,6 +90,8 @@ export const Motors = () => {
                 <Typography>Control</Typography>
               </AccordionSummary>
               <AccordionDetails>
+                <MotorControlTypeSwitch motorKey={key} />
+
                 <FocScalar
                   motorKey={key}
                   command=""

src/components/Parameters/FocBoolean.tsx

@@ -1,6 +1,7 @@
 import { Stack, Switch, Typography } from "@mui/material";
 import { useState } from "react";
 import { useSerialPort } from "../../lib/serialContext";
+import { useSerialIntervalSender } from "../../lib/useSerialIntervalSender";
 import { useSerialLineEvent } from "../../lib/useSerialLineEvent";
 import { SimpleFocSerialPort } from "../../simpleFoc/serial";
 
@@ -13,23 +14,35 @@ export const FocBoolean = (props: {
   onValue: string;
   offValue: string;
 }) => {
+  const fullCommandString = `${props.motorKey}${props.command}`;
+
   const [value, setValue] = useState(false);
   const serialPort = useSerialPort();
   useSerialLineEvent((line) => {
-    if (line.content.startsWith(`${props.motorKey}${props.command}`)) {
-      console.log("Got matching line:", line);
+    if (line.content.startsWith(fullCommandString)) {
+      const receivedValue = line.content.slice(fullCommandString.length);
+      if (receivedValue !== props.onValue && receivedValue !== props.offValue) {
+        console.warn(
+          `Received value for motor ${props.motorKey} and command ${props.command} which doesn't match on or off value: ${line.content}`,
+          { onValue: props.onValue, offValue: props.offValue }
+        );
+        return;
+      }
+      setValue(receivedValue === props.onValue ? true : false);
     }
   });
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     serialPort?.send(
-      `${props.motorKey}${props.command}${
+      `${fullCommandString}${
         event.target.checked ? props.onValue : props.offValue
       }`
     );
     setValue(event.target.checked);
   };
 
+  useSerialIntervalSender(fullCommandString, 5000);
+
   return (
     <Stack direction="row" spacing={1} alignItems="center">
       <Typography>{props.offLabel}</Typography>

src/components/Parameters/MotorControlTypeSwitch.tsx

@@ -0,0 +1,59 @@
+import {
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from "@mui/material";
+import { useState } from "react";
+import { useSerialPortRef } from "../../lib/serialContext";
+import { useSerialIntervalSender } from "../../lib/useSerialIntervalSender";
+import { useSerialLineEvent } from "../../lib/useSerialLineEvent";
+
+const CONTROL_VALUES = ["torque", "vel", "angle", "vel open", "angle open"];
+
+const CONTROL_VALUE_TO_INDEX = {
+  torque: 0,
+  vel: 1,
+  angle: 2,
+  "vel open": 3,
+  "angle open": 4,
+} as any;
+
+export const MotorControlTypeSwitch = ({ motorKey }: { motorKey: string }) => {
+  const fullCommandString = `${motorKey}C`;
+  const [value, setValue] = useState<string | null>(null);
+  const serialRef = useSerialPortRef();
+
+  const handleChange = (e: any, val: string) => {
+    serialRef.current?.send(
+      `${fullCommandString}${CONTROL_VALUE_TO_INDEX[val]}`
+    );
+  };
+
+  useSerialLineEvent((line) => {
+    if (
+      line.content.startsWith(fullCommandString) &&
+      // need to filter out the downsample command too which is "{motorKey}CD"
+      CONTROL_VALUES.map((val) => fullCommandString + val).some(
+        (val) => line.content === val
+      )
+    ) {
+      const receivedValue = line.content.slice(fullCommandString.length);
+      setValue(receivedValue);
+      console.log(receivedValue);
+    }
+  });
+  useSerialIntervalSender(fullCommandString, 5000);
+
+  return (
+    <Stack alignItems="center" sx={{ marginBottom: 2 }}>
+      <ToggleButtonGroup value={value} exclusive onChange={handleChange}>
+        <ToggleButton value="torque">Torque</ToggleButton>
+        <ToggleButton value="vel">Velocity</ToggleButton>
+        <ToggleButton value="angle">Angle</ToggleButton>
+        <ToggleButton value="vel open">Velocity open</ToggleButton>
+        <ToggleButton value="angle open">Angle open</ToggleButton>
+      </ToggleButtonGroup>
+    </Stack>
+  );
+};