added new ui element to trigger the actuator for gpio

src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioBPMPin.tsx

@@ -0,0 +1,76 @@
+import IconButton from '@/renderer/components/common/IconButton';
+import { styled } from '@/renderer/globalStyles/styled';
+import { GpioPinState, gpioPinsSlice } from '@/renderer/store/modules/gpioPins';
+import { rosClient } from '@/renderer/utils/ros/rosClient';
+import { TopicOptions } from '@/renderer/utils/ros/roslib-ts-client/@types';
+import React, { useMemo } from 'react';
+import { FaPowerOff } from 'react-icons/fa';
+import { useDispatch } from 'react-redux';
+
+interface GpioPinProps {
+  gpioPin: GpioPinState;
+}
+
+const Card = styled.div`
+  background-color: ${({ theme }) => theme.colors.darkerBackground};
+  border-radius: 4px;
+  padding: 16px;
+  margin: 8px;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+`;
+
+export const GpioBPMPin = ({ gpioPin }: GpioPinProps) => {
+  const dispatch = useDispatch();
+
+  const topic: TopicOptions = useMemo(
+    () => ({
+      name: gpioPin.topicName,
+      messageType: 'std_msgs/UInt16',
+    }),
+    [gpioPin.topicName]
+  );
+
+  const togglePin = () => {
+    rosClient.publish(topic, { data: gpioPin.isOn ? 0 : 1 });
+
+    dispatch(gpioPinsSlice.actions.togglePin(gpioPin.id));
+  };
+
+  const setVal = (event: React.ChangeEvent<HTMLInputElement>) => {
+    rosClient.publish(topic, { data: parseInt(event.target.value) });
+    dispatch(
+      gpioPinsSlice.actions.updateBPM({
+        id: gpioPin.id,
+        bpm: parseInt(event.target.value, 10),
+      })
+    );
+  };
+
+  return (
+    <Card>
+      <h3 style={{ paddingBottom: '4px' }}>{gpioPin.name}</h3>
+      <input
+        type="number"
+        min="1"
+        max="300"
+        value={gpioPin.bpm}
+        onInput={setVal}
+      />
+      <IconButton
+        icon={<FaPowerOff />}
+        title={gpioPin.isOn ? 'Actuateur désactivé' : 'Actuateur activé'}
+        onClick={togglePin}
+        style={
+          gpioPin.isOn
+            ? { backgroundColor: 'red' }
+            : { backgroundColor: 'green' }
+        }
+      />
+    </Card>
+  );
+};

src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioPinsConfig.tsx

@@ -3,6 +3,7 @@ import { SectionTitle } from '../../styles';
 import { useSelector } from 'react-redux';
 import { selectAllGpioPins } from '@/renderer/store/modules/gpioPins';
 import { GpioPin } from './GpioPin';
+import { GpioBPMPin } from './GpioBPMPin';
 import { styled } from '@/renderer/globalStyles/styled';
 
 const Container = styled.div`
@@ -17,9 +18,13 @@ export const GpioPinsConfig = () => {
     <>
       <SectionTitle>GPIO Control</SectionTitle>
       <Container>
-        {gpioPins.map((gpioPin) => (
-          <GpioPin key={gpioPin.id} gpioPin={gpioPin} />
-        ))}
+        {gpioPins.map((gpioPin) =>
+          gpioPin.bpm ? (
+            <GpioBPMPin key={gpioPin.id} gpioPin={gpioPin} />
+          ) : (
+            <GpioPin key={gpioPin.id} gpioPin={gpioPin} />
+          )
+        )}
       </Container>
     </>
   );

src/renderer/store/modules/gpioPins.ts

@@ -7,6 +7,7 @@ export interface GpioPinState {
   name: string;
   topicName: string;
   isOn: boolean;
+  bpm: number;
 }
 
 export const initialState: GpioPinState[] = [
@@ -15,18 +16,28 @@ export const initialState: GpioPinState[] = [
     name: 'FRONT LED',
     topicName: '/DOP1',
     isOn: false,
+    bpm: 0,
   },
   {
     id: nanoid(),
     name: 'BACK LED',
     topicName: '/DOP2',
     isOn: false,
+    bpm: 0,
   },
   {
     id: nanoid(),
-    name: 'ARM LED',
+    name: 'ARMED LED',
     topicName: '/DOP3',
     isOn: false,
+    bpm: 0,
+  },
+  {
+    id: nanoid(),
+    name: 'START ACTUATOR',
+    topicName: '/DOP4',
+    isOn: false,
+    bpm: 136,
   },
 ];
 
@@ -62,6 +73,15 @@ export const gpioPinsSlice = createSlice({
     removePin: (state, { payload }: PayloadAction<GpioPinState>) => {
       state = state.filter((pin) => pin.id !== payload.id);
     },
+    updateBPM: (
+      state,
+      { payload }: PayloadAction<{ id: string; bpm: number }>
+    ) => {
+      const element = state.find((element) => element.id === payload.id);
+      if (element) {
+        element.bpm = payload.bpm;
+      }
+    },
   },
 });