From 103bfc58908d40486ad511b137f7d11f85cba819 Mon Sep 17 00:00:00 2001 From: Kuift Kotar Date: Sun, 27 Aug 2023 18:45:47 -0400 Subject: [PATCH 1/2] added new ui element to trigger the actuator for gpio --- .../pages/GpioPinsConfig/GpioBPMPin.tsx | 76 +++++++++++++++++++ .../pages/GpioPinsConfig/GpioPinsConfig.tsx | 3 +- src/renderer/store/modules/gpioPins.ts | 19 ++++- 3 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioBPMPin.tsx diff --git a/src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioBPMPin.tsx b/src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioBPMPin.tsx new file mode 100644 index 00000000..374ef31b --- /dev/null +++ b/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) => { + rosClient.publish(topic, { data: parseInt(event.target.value) }); + dispatch( + gpioPinsSlice.actions.updateBPM({ + id: gpioPin.id, + bpm: parseInt(event.target.value, 10), + }) + ); + }; + + return ( + +

{gpioPin.name}

+ + } + title={gpioPin.isOn ? 'Actuateur désactivé' : 'Actuateur activé'} + onClick={togglePin} + style={ + gpioPin.isOn + ? { backgroundColor: 'red' } + : { backgroundColor: 'green' } + } + /> + + ); +}; diff --git a/src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioPinsConfig.tsx b/src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioPinsConfig.tsx index ec09e118..dbf9ec8c 100644 --- a/src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioPinsConfig.tsx +++ b/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` @@ -18,7 +19,7 @@ export const GpioPinsConfig = () => { GPIO Control {gpioPins.map((gpioPin) => ( - + gpioPin.bpm ? : ))} diff --git a/src/renderer/store/modules/gpioPins.ts b/src/renderer/store/modules/gpioPins.ts index e7b98d43..dbcdf88e 100644 --- a/src/renderer/store/modules/gpioPins.ts +++ b/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,12 @@ export const gpioPinsSlice = createSlice({ removePin: (state, { payload }: PayloadAction) => { 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; + } + }, }, }); From a7a29b3d7cd199369632883e3d95016499fe4209 Mon Sep 17 00:00:00 2001 From: Kuift Kotar Date: Sun, 27 Aug 2023 18:50:14 -0400 Subject: [PATCH 2/2] fixed formatting --- .../Config/pages/GpioPinsConfig/GpioPinsConfig.tsx | 10 +++++++--- src/renderer/store/modules/gpioPins.ts | 5 ++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioPinsConfig.tsx b/src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioPinsConfig.tsx index dbf9ec8c..9a3393b6 100644 --- a/src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioPinsConfig.tsx +++ b/src/renderer/components/pages/Config/pages/GpioPinsConfig/GpioPinsConfig.tsx @@ -18,9 +18,13 @@ export const GpioPinsConfig = () => { <> GPIO Control - {gpioPins.map((gpioPin) => ( - gpioPin.bpm ? : - ))} + {gpioPins.map((gpioPin) => + gpioPin.bpm ? ( + + ) : ( + + ) + )} ); diff --git a/src/renderer/store/modules/gpioPins.ts b/src/renderer/store/modules/gpioPins.ts index dbcdf88e..0b7c589e 100644 --- a/src/renderer/store/modules/gpioPins.ts +++ b/src/renderer/store/modules/gpioPins.ts @@ -73,7 +73,10 @@ export const gpioPinsSlice = createSlice({ removePin: (state, { payload }: PayloadAction) => { state = state.filter((pin) => pin.id !== payload.id); }, - updateBPM: (state, { payload }: PayloadAction<{ id: string; bpm: number }>) => { + updateBPM: ( + state, + { payload }: PayloadAction<{ id: string; bpm: number }> + ) => { const element = state.find((element) => element.id === payload.id); if (element) { element.bpm = payload.bpm;