Merge pull request #156 from clubcapra/robot_name_flexibility

Robot name flexibility
clubcapra · Jan 9, 2023 · f0791e2 · f0791e2
2 parents 4231e94 + c0b7353
commit f0791e2
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "capra_web_ui",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "author": {
     "name": "Club Capra",
     "email": "[email protected]",

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -1,14 +1,13 @@
 import React, { FC, StrictMode, useEffect } from 'react';
 import { HashRouter } from 'react-router-dom';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { Provider } from 'react-redux';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { defaultTheme } from '@/renderer/globalStyles/themes/defaultTheme';
 import { Layout } from '@/renderer/components/Layout';
 import { store } from '@/renderer/store/store';
 import inputSystem from '@/renderer/inputSystem';
-import { createGlobalStyle } from 'styled-components';
 import { Theme } from '@/renderer/globalStyles/styled';
 
 export const App: FC = () => {

diff --git a/src/renderer/components/EStopButton.tsx b/src/renderer/components/EStopButton.tsx
@@ -6,11 +6,8 @@ import { useOpenClose } from '@/renderer/hooks/useOpenClose';
 import { styled } from '@/renderer/globalStyles/styled';
 import { darken } from 'polished';
 import { log } from '@/renderer/logger';
-
-// const topic: TopicOptions<boolean> = {
-//   name: 'markhor/estop_status',
-//   messageType: 'std_msgs/Bool',
-// }
+import { selectRobotName } from '@/renderer/store/modules/ros';
+import { useSelector } from '@/renderer/hooks/typedUseSelector';
 
 interface StopButtonProps {
   onClick: () => void;
@@ -19,36 +16,42 @@ interface StopButtonProps {
 const StopButton: FC<StopButtonProps> = ({ onClick }) => {
   const [text] = useState('EMERGENCY STOP');
 
-  // useRosSubscribe(topic, (message) => {
-  //   if (message.data) {
-  //     setText('EMERGENCY STOP')
-  //   } else {
-  //     setText('REARM')
-  //   }
-  // })
-
   return (
     <StyledStopButton onClick={onClick}>
       <span>{text}</span>
     </StyledStopButton>
   );
 };
 
+//TODO change robotName for 'capra' or an organisation field equivalent. Both UI side and in the estop code.
 export const EStopButton: FC = () => {
   const [isModalOpen, openModal, closeModal] = useOpenClose();
+  const robotName = useSelector(selectRobotName);
 
   const stopRobot = () => {
     log.info('ESTOP: stopping robot');
     rosClient
-      .callService({ name: 'markhor/estop_disable', serviceType: '' }, '')
+      .callService(
+        {
+          name: `${robotName}/estop_disable`,
+          serviceType: '',
+        },
+        ''
+      )
       .catch(log.error);
     openModal();
   };
 
   const restartRobot = () => {
     log.info('ESTOP: restarting robot');
     rosClient
-      .callService({ name: 'markhor/estop_enable', serviceType: '' }, '')
+      .callService(
+        {
+          name: `${robotName}/estop_enable`,
+          serviceType: '',
+        },
+        ''
+      )
       .catch(log.error);
     closeModal();
   };

diff --git a/src/renderer/components/FlippersView.tsx b/src/renderer/components/FlippersView.tsx
@@ -5,10 +5,15 @@ import {
   useRosSubscribeNoData,
 } from '@/renderer/hooks/useRosSubscribe';
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { selectReverse } from '@/renderer/store/modules/input';
+import {
+  selectReverse,
+  selectRobotNameState,
+} from '@/renderer/store/modules/input';
 import { useSelector } from '@/renderer/hooks/typedUseSelector';
 import ROSLIB from 'roslib';
 import { rosClient } from '../utils/ros/rosClient';
+import { selectRobotName } from '@/renderer/store/modules/ros';
+import { store } from '@/renderer/store/store';
 
 interface Props {
   flipper: IFlipperData;
@@ -24,24 +29,16 @@ interface PositionsMsg {
   positions: number[];
 }
 
-const flipperUpperLimitParam = new ROSLIB.Param({
-  name: 'markhor/flippers/markhor_flippers_node/front_left_drive_upper_limit',
-  ros: rosClient.ros,
-});
-
-const flipperLowerLimitParam = new ROSLIB.Param({
-  name: 'markhor/flippers/markhor_flippers_node/front_left_drive_lower_limit',
-  ros: rosClient.ros,
-});
-
-const flipperPositionTopic: TopicOptions = {
-  name: '/markhor/flippers/flipper_positions',
-  messageType: '/markhor_flippers/FlipperPositions',
-};
-
 export const FlippersView: FC = () => {
   const isReverse = useSelector(selectReverse);
   const [flipperPositions, setFlipperPositions] = useState<number[]>([]);
+  const robotName = useSelector(selectRobotName);
+
+  const flipperPositionTopic: TopicOptions = {
+    name: `${robotName}/flippers/flipper_positions`,
+    messageType: `/${robotName}_flippers/FlipperPositions`,
+  };
+
   useRosSubscribeNoData<PositionsMsg>(
     flipperPositionTopic,
     useCallback((message) => {
@@ -62,25 +59,26 @@ export const FlippersView: FC = () => {
 };
 
 const FlippersForwardView: FC<ViewProps> = ({ flipperPositions }) => {
+  const flipperInfo: IFlippers = flippers();
   return (
     <>
       <StyledTRArea
-        flipper={flippers.flipperFL}
+        flipper={flipperInfo.flipperFL}
         name="Front left"
         flipperPosition={flipperPositions[0]}
       />
       <StyledTLArea
-        flipper={flippers.flipperFR}
+        flipper={flipperInfo.flipperFR}
         name="Front right"
         flipperPosition={flipperPositions[1]}
       />
       <StyledBLArea
-        flipper={flippers.flipperRL}
+        flipper={flipperInfo.flipperRL}
         name="Rear left"
         flipperPosition={flipperPositions[2]}
       />
       <StyledBRArea
-        flipper={flippers.flipperRR}
+        flipper={flipperInfo.flipperRR}
         name="Rear right"
         flipperPosition={flipperPositions[3]}
       />
@@ -89,25 +87,26 @@ const FlippersForwardView: FC<ViewProps> = ({ flipperPositions }) => {
 };
 
 const FlippersReverseView: FC<ViewProps> = ({ flipperPositions }) => {
+  const flipperInfo: IFlippers = flippers();
   return (
     <>
       <StyledTRArea
-        flipper={flippers.flipperRL}
+        flipper={flipperInfo.flipperRL}
         name="Front left"
         flipperPosition={flipperPositions[0]}
       />
       <StyledTLArea
-        flipper={flippers.flipperRR}
+        flipper={flipperInfo.flipperRR}
         name="Front right"
         flipperPosition={flipperPositions[1]}
       />
       <StyledBLArea
-        flipper={flippers.flipperFL}
+        flipper={flipperInfo.flipperFL}
         name="Rear left"
         flipperPosition={flipperPositions[2]}
       />
       <StyledBRArea
-        flipper={flippers.flipperFR}
+        flipper={flipperInfo.flipperFR}
         name="Rear right"
         flipperPosition={flipperPositions[3]}
       />
@@ -121,6 +120,17 @@ const FlipperArea: FC<Props> = ({ flipper, name, flipperPosition }) => {
   const [motorCurrentValue, setMotorCurrentValue] = useState<string>('0');
   const [flipperUpperLimit, setFlipperUpperLimit] = useState<number>(0);
   const [flipperLowerLimit, setFlipperLowerLimit] = useState<number>(0);
+  const robotName = useSelector(selectRobotNameState);
+
+  const flipperUpperLimitParam = new ROSLIB.Param({
+    name: `${robotName}/flippers/${robotName}_flippers_node/front_left_drive_upper_limit`,
+    ros: rosClient.ros,
+  });
+
+  const flipperLowerLimitParam = new ROSLIB.Param({
+    name: `${robotName}/flippers/${robotName}_flippers_node/front_left_drive_lower_limit`,
+    ros: rosClient.ros,
+  });
 
   useEffect(() => {
     if (!flipperPosition) {
@@ -259,30 +269,33 @@ export interface IFlipperData {
   topicMotorCurrent: TopicOptions<string>;
 }
 
-const flippers: IFlippers = {
-  id: 'flippers',
-  flipperFL: {
-    topicMotorCurrent: {
-      name: '/markhor/flippers/flipper_fl_motor_current',
-      messageType: 'std_msgs/Float64',
+const flippers = (): IFlippers => {
+  const robotName = selectRobotNameState(store.getState());
+  return {
+    id: 'flippers',
+    flipperFL: {
+      topicMotorCurrent: {
+        name: `${robotName}/flippers/flipper_fl_motor_current`,
+        messageType: 'std_msgs/Float64',
+      },
     },
-  },
-  flipperFR: {
-    topicMotorCurrent: {
-      name: '/markhor/flippers/flipper_fr_motor_current',
-      messageType: 'std_msgs/Float64',
+    flipperFR: {
+      topicMotorCurrent: {
+        name: `${robotName}/flippers/flipper_fr_motor_current`,
+        messageType: 'std_msgs/Float64',
+      },
     },
-  },
-  flipperRL: {
-    topicMotorCurrent: {
-      name: '/markhor/flippers/flipper_rl_motor_current',
-      messageType: 'std_msgs/Float64',
+    flipperRL: {
+      topicMotorCurrent: {
+        name: `${robotName}/flippers/flipper_rl_motor_current`,
+        messageType: 'std_msgs/Float64',
+      },
     },
-  },
-  flipperRR: {
-    topicMotorCurrent: {
-      name: '/markhor/flippers/flipper_rr_motor_current',
-      messageType: 'std_msgs/Float64',
+    flipperRR: {
+      topicMotorCurrent: {
+        name: `${robotName}/flippers/flipper_rr_motor_current`,
+        messageType: 'std_msgs/Float64',
+      },
     },
-  },
+  };
 };
diff --git a/src/renderer/components/pages/Config/pages/GeneralConfig.tsx b/src/renderer/components/pages/Config/pages/GeneralConfig.tsx
@@ -17,12 +17,14 @@ import {
   selectIP,
   selectNamespace,
   selectPort,
+  selectRobotName,
 } from '@/renderer/store/modules/ros';
 import { useSelector } from '@/renderer/hooks/typedUseSelector';
 
 const ConnectionSection = () => {
   const IP = useSelector(selectIP);
   const port = useSelector(selectPort);
+  const robotName = useSelector(selectRobotName);
   const dispatch = useDispatch();
   const [state, send] = useActor(rosService);
 
@@ -34,6 +36,10 @@ const ConnectionSection = () => {
     dispatch(rosSlice.actions.updatePort(e.target.value));
   };
 
+  const updateRobotName = (e: ChangeEvent<HTMLInputElement>) => {
+    dispatch(rosSlice.actions.updateRobotName(e.target.value));
+  };
+
   const connect = () => send('CONNECT');
   const disconnect = () => send('DISCONNECT');
 
@@ -47,6 +53,11 @@ const ConnectionSection = () => {
           value={port}
           onChange={updatePort}
         />
+        <LabeledInput
+          label="Robot name"
+          value={robotName}
+          onChange={updateRobotName}
+        />
       </div>
 
       <div style={{ display: 'flex' }}>

diff --git a/src/renderer/inputSystem/flipperModeActions.ts b/src/renderer/inputSystem/flipperModeActions.ts
@@ -5,7 +5,6 @@ import { TopicOptions } from '@/renderer/utils/ros/roslib-ts-client/@types';
 import { IJoyMsg } from '@/renderer/utils/ros/rosMsgs.types';
 import { store } from '@/renderer/store/store';
 import { flipperService } from '@/renderer/state/flipper';
-import { log } from '@/renderer/logger';
 import { inputSlice, selectReverse } from '@/renderer/store/modules/input';
 import { handleTpvControl } from './tpvControl';
 

diff --git a/src/renderer/inputSystem/index.ts b/src/renderer/inputSystem/index.ts
@@ -7,6 +7,8 @@ import { log } from '@/renderer/logger';
 import { armModeActions } from './armModeActions';
 import { flipperModeActions } from './flipperModeActions';
 import { TopicOptions } from '../utils/ros/roslib-ts-client/@types';
+import { store } from '@/renderer/store/store';
+import { selectRobotNameState } from '@/renderer/store/modules/input';
 
 const gripperTopic: TopicOptions = {
   name: 'ovis/gripper/position_goal',
@@ -26,7 +28,10 @@ const defaultActions: Action[] = [
       if (controlService.state.matches('nothing') && ctx.type === 'keyboard') {
         return;
       }
-      rosClient.callService({ name: 'markhor/estop_disable' }).catch(log.error);
+      const robotName = selectRobotNameState(store.getState());
+      rosClient
+        .callService({ name: `${robotName}/estop_disable` })
+        .catch(log.error);
     },
   },
   {

diff --git a/src/renderer/state/flipper.ts b/src/renderer/state/flipper.ts
@@ -1,6 +1,8 @@
 import { log } from '@/renderer/logger';
 import { rosClient } from '@/renderer/utils/ros/rosClient';
 import { Machine, interpret } from 'xstate';
+import { store } from '@/renderer/store/store';
+import { selectRobotNameState } from '@/renderer/store/modules/input';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface FlipperContext {}
@@ -120,9 +122,10 @@ type FlipperMode =
   | 'rl_disable';
 
 async function sendFlipperMode(mode: FlipperMode) {
+  const robotName = selectRobotNameState(store.getState());
   try {
     await rosClient.callService({
-      name: `/markhor/flippers/flipper_mode_${mode}`,
+      name: `${robotName}/flippers/flipper_mode_${mode}`,
     });
   } catch (e) {
     log.error(e);

diff --git a/src/renderer/store/modules/input.ts b/src/renderer/store/modules/input.ts
@@ -21,3 +21,7 @@ export const inputSlice = createSlice({
 
 export const selectReverse = (state: GlobalState): boolean =>
   state.input.reverse;
+
+export const selectRobotNameState = (state: GlobalState): string => {
+  return state.ros.robotName;
+};