Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/enrich'
Browse files Browse the repository at this point in the history
  • Loading branch information
Leuchak committed Sep 16, 2023
2 parents 0f7a08d + ff3fc6b commit ae0b81a
Show file tree
Hide file tree
Showing 15 changed files with 531 additions and 92 deletions.
42 changes: 6 additions & 36 deletions src/renderer/components/BatteryStatus/BatteryStatus.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import BatteryGauge from 'react-battery-gauge';
import React, { memo } from 'react';
import { styled } from '@/renderer/globalStyles/styled';
import Popup from 'reactjs-popup';
import {
StyledPopup,
StyledPopupContainer,
} from '@/renderer/components/styles';
import BatteryDetailsPopup from './BatteryDetailsPopup';
import { defaultTheme } from '@/renderer/globalStyles/themes/defaultTheme';
import useBatteryInfo from '@/renderer/hooks/useBatteryInfo';
Expand Down Expand Up @@ -36,7 +39,7 @@ const BatteryStatus = ({ name, topicName }: BatteryStatusProps) => {
return (
<StyledPopup
trigger={
<Container>
<StyledPopupContainer>
<PercentageText>{name}</PercentageText>
<PercentageText>{batteryInfo.percentage.toFixed(0)}%</PercentageText>
<BatteryGauge
Expand All @@ -45,7 +48,7 @@ const BatteryStatus = ({ name, topicName }: BatteryStatusProps) => {
aspectRatio={0.42}
customization={customization}
/>
</Container>
</StyledPopupContainer>
}
on="click"
position="bottom center"
Expand All @@ -61,43 +64,10 @@ const BatteryStatus = ({ name, topicName }: BatteryStatusProps) => {
);
};

const Container = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
&:hover {
cursor: pointer;
}
`;

const PercentageText = styled.div`
font-size: 12px;
margin-right: 5px;
font-weight: bold;
`;

const StyledPopup = styled(Popup)`
@keyframes anvil {
0% {
transform: scale(1) translateY(0px);
opacity: 0;
box-shadow: 0 0 0 rgba(241, 241, 241, 0);
}
1% {
transform: scale(0.96) translateY(10px);
opacity: 0;
box-shadow: 0 0 0 rgba(241, 241, 241, 0);
}
100% {
transform: scale(1) translateY(0px);
opacity: 1;
box-shadow: 0 0 500px rgba(241, 241, 241, 0);
}
}
&-content {
-webkit-animation: anvil 0.2s cubic-bezier(0.38, 0.1, 0.36, 0.9) forwards;
}
`;

export default memo(BatteryStatus);
19 changes: 19 additions & 0 deletions src/renderer/components/CountdownStatus/CountdownStatus.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { styled } from '@/renderer/globalStyles/styled';
import { IoMdStopwatch } from 'react-icons/io';
import { Countdown } from '@/renderer/components/common/Countdown';
import React, { FC } from 'react';

export const CountdownStatus: FC = () => {
return (
<Countdown
icon={<StyledIoMdStopwatch />}
labelPopup={'scenario'}
durationDefault={35}
/>
);
};

const StyledIoMdStopwatch = styled(IoMdStopwatch)`
height: 1.25em;
width: 1.25em;
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { rosClient } from '@/renderer/utils/ros/rosClient';
import React, { FC } from 'react';
import { TopicOptions } from '@/renderer/utils/ros/roslib-ts-client/@types';
import { styled } from '@/renderer/globalStyles/styled';
import { FaStop } from 'react-icons/fa';
import { toast } from 'react-toastify';

const stopNavigationTopic: TopicOptions = {
name: '/move_base/cancel',
messageType: 'actionlib_msgs/GoalID',
};

interface CancelNavigation {
isCancelNavigationProps: () => void;
}

export const ExplorationCancelNavigation: FC<CancelNavigation> = ({
isCancelNavigationProps,
}) => {
const onClick = () => {
rosClient.publish(stopNavigationTopic, {});
isCancelNavigationProps();
toast.info('Navigation stop');
};

return <StyledFaStop onClick={onClick} />;
};

export const StyledFaStop = styled(FaStop)`
margin-top: 0.25em;
color: red;
&:hover {
cursor: pointer;
}
`;
62 changes: 62 additions & 0 deletions src/renderer/components/ExplorationStatus/ExplorationStatus.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { styled } from '@/renderer/globalStyles/styled';
import { ExplorationCancelNavigation } from './ExplorationCancelNavigation';
import { GoTelescope } from 'react-icons/go';
import { Countdown } from '@/renderer/components/common/Countdown';
import { rosClient } from '@/renderer/utils/ros/rosClient';
import React, { FC, useState } from 'react';
import { log } from '@/renderer/logger';

export const ExplorationStatus: FC = () => {
const [isNowStopCountdownTimer, setIsNowStopCountdownTimer] = useState(false);

const startTimer = (duration: number) => {
setIsNowStopCountdownTimer(false);
startRosExplorationTimer(duration);
};

const stopTimer = () => {
setIsNowStopCountdownTimer(true);
stopRosExplorationTimer();
};

const startRosExplorationTimer = (duration: number) => {
rosClient
.callService(
{
name: `/start_exploration`,
},
{ timeout: duration * 60 }
)
.catch(log.error);
};

const stopRosExplorationTimer = () => {
rosClient
.callService(
{
name: `/stop_exploration`,
},
{}
)
.catch(log.error);
};

return (
<Countdown
icon={<StyledGoTelescope />}
labelPopup={'exploration'}
durationDefault={2}
onStartClick={startTimer}
onStopClick={stopTimer}
sideElement={
<ExplorationCancelNavigation isCancelNavigationProps={stopTimer} />
}
isNowStopCountdownTimer={isNowStopCountdownTimer}
/>
);
};

const StyledGoTelescope = styled(GoTelescope)`
height: 1.25em;
width: 1.25em;
`;
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,6 @@ 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 GpioPin = ({ gpioPin }: GpioPinProps) => {
const dispatch = useDispatch();

Expand All @@ -43,7 +30,7 @@ export const GpioPin = ({ gpioPin }: GpioPinProps) => {

return (
<Card>
<h3 style={{ paddingBottom: '4px' }}>{gpioPin.name}</h3>
<SytledP>{gpioPin.name}</SytledP>
<IconButton
icon={<FaPowerOff />}
title={gpioPin.isOn ? 'Power Off' : 'Power On'}
Expand All @@ -57,3 +44,16 @@ export const GpioPin = ({ gpioPin }: GpioPinProps) => {
</Card>
);
};

const Card = styled.div`
padding: 8px;
margin: 4px;
min-width: 150px;
display: flex;
flex-direction: column;
justify-content: flex-start;
`;

const SytledP = styled.p`
margin-bottom: 0.25em;
`;
64 changes: 64 additions & 0 deletions src/renderer/components/GpioPinsStatus/GpioPinsStatus.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React, { memo } from 'react';
import { StyledPopup } from '@/renderer/components/styles';
import { useSelector } from 'react-redux';
import { selectAllGpioPins } from '@/renderer/store/modules/gpioPins';
import { GpioPin } from './GpioPin';
import { styled } from '@/renderer/globalStyles/styled';
import { BsLightbulb } from 'react-icons/bs';
import { BsLightbulbOff } from 'react-icons/bs';

const GpioPinsStatus = () => {
const gpioPins = useSelector(selectAllGpioPins);
const isAGpioPinOn = gpioPins.find((gpioPin) => gpioPin.isOn)?.isOn;
return (
<StyledPopup
trigger={
<Container>
{isAGpioPinOn ? <StyledBsLightbulb /> : <StyledBsLightbulbOff />}
</Container>
}
on="click"
position="bottom center"
arrow={false}
repositionOnResize={true}
>
<StyledDiv>
{gpioPins.map((gpioPin) => (
<GpioPin key={gpioPin.id} gpioPin={gpioPin} />
))}
</StyledDiv>
</StyledPopup>
);
};

const Container = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
&:hover {
cursor: pointer;
}
`;

const StyledDiv = styled.div`
display: flex;
flex-direction: row;
align-items: flex-start;
background-color: ${({ theme }) => theme.colors.darkerBackground};
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
border-radius: 4px;
min-width: 150px;
`;

const StyledBsLightbulb = styled(BsLightbulb)`
height: 1.25em;
width: 1.25em;
`;

const StyledBsLightbulbOff = styled(BsLightbulbOff)`
height: 1.25em;
width: 1.25em;
`;

export default memo(GpioPinsStatus);
8 changes: 7 additions & 1 deletion src/renderer/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import { NavLink } from 'react-router-dom';
import { selectDebugTabVisible } from '@/renderer/store/modules/debugTab';
import { useSelector } from 'react-redux';
import BatteryStatus from './BatteryStatus/BatteryStatus';
import GpioPinsStatus from './GpioPinsStatus/GpioPinsStatus';
import { ExplorationStatus } from './ExplorationStatus/ExplorationStatus';
import { CountdownStatus } from './CountdownStatus/CountdownStatus';

interface NavLinkDefinition {
to: string;
Expand Down Expand Up @@ -47,6 +50,9 @@ export const Header: FC = () => {
))}
</LeftHeader>
<RightHeader>
<CountdownStatus />
<ExplorationStatus />
<GpioPinsStatus />
<BatteryStatus name="Motor" topicName="/vbus1" />
<BatteryStatus name="Logic" topicName="/vbus2" />
<StyledLogo src="assets/images/logo.png" />
Expand All @@ -57,7 +63,7 @@ export const Header: FC = () => {

const HeaderGrid = styled.div`
display: grid;
grid-template-columns: 1fr 400px;
grid-template-columns: 1fr 500px;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.25);
`;

Expand Down
1 change: 1 addition & 0 deletions src/renderer/components/StatusBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ const ModeInfo = () => {
{flipper.matches('rl') && (isReverse ? 'FRONT RIGHT' : 'REAR LEFT')}
{flipper.matches('rr') && (isReverse ? 'FRONT LEFT' : 'REAR RIGHT')}
{flipper.matches('all') && 'ALL'}
{flipper.matches('none') && 'NONE'}
{flipper.matches('rear') && (isReverse ? 'FRONT' : 'REAR')}
</div>
);
Expand Down
Loading

0 comments on commit ae0b81a

Please sign in to comment.