diff --git a/public/Icons/BusVoltageIndicator.svg b/public/Icons/BusVoltageIndicator.svg
new file mode 100644
index 0000000..43a7e9d
--- /dev/null
+++ b/public/Icons/BusVoltageIndicator.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/components/BusVoltageDisplay.tsx b/src/components/BusVoltageDisplay.tsx
new file mode 100644
index 0000000..1be72fe
--- /dev/null
+++ b/src/components/BusVoltageDisplay.tsx
@@ -0,0 +1,69 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import { useROS } from '@/ros/ROSContext';
+import ROSLIB from 'roslib';
+import BusVoltageIndicator from '@/components/BusVoltageIndicator';
+
+const getVoltageColor = (voltage: number | null) => {
+ if (voltage === null) return "#ffffff";
+ if (voltage < 21.5 ) return "red"; //low voltage
+ if (voltage < 22.5) return "#ffc42b"; //ok voltage
+ return "#22c55e"; //good voltage
+};
+
+const getOutlineColor = (voltage: number | null) => {
+ if (voltage === null) return "#ffffff";
+ if (voltage < 21.5) return "#ef4444"; // red outline when voltage low
+ return "#fff"; //outline stays white otherwise
+};
+
+const BusVoltageDisplay: React.FC = () => {
+ const { ros } = useROS();
+ const [busVoltage, setBusVoltage] = useState(null)
+
+ useEffect(() => {
+ if (!ros) return;
+ const voltageTopic = new ROSLIB.Topic({
+ ros,
+ name: '/Left_front_wheel_joint/status',
+ messageType: 'ros_phoenix/msg/MotorStatus',
+ });
+ const handleVoltageMessage = (message: any) => {
+ setBusVoltage(Number(message.bus_voltage));
+ };
+ voltageTopic.subscribe(handleVoltageMessage);
+ }, [ros]);
+
+const voltageColor = getVoltageColor(busVoltage);
+
+ return (
+
+
+
+ {busVoltage !== null
+ ? `${busVoltage.toFixed(1)} V`
+ : '- V'}
+
+
+
+
+ );
+};
+
+export default BusVoltageDisplay;
\ No newline at end of file
diff --git a/src/components/BusVoltageIndicator.tsx b/src/components/BusVoltageIndicator.tsx
new file mode 100644
index 0000000..08dd973
--- /dev/null
+++ b/src/components/BusVoltageIndicator.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface Props {
+ color?: string;
+ outlineColor?: string;
+ className?: string;
+}
+
+const BusVoltageIndicator : React.FC = ({
+ color = '#ffffff',
+ outlineColor = '#ffffff',
+ className,
+}) => (
+
+);
+
+export default BusVoltageIndicator;
\ No newline at end of file
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 50db8a7..03c10cb 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -2,7 +2,7 @@
import React, { ReactNode } from 'react';
import ConnectionStatusDisplay from '@/components/ConnectionStatusDisplay';
-import RoverModeDisplay from '@/components/RoverModeDisplay';
+import BusVoltageDisplay from '@/components/BusVoltageDisplay';
interface LayoutProps {
children: ReactNode;
@@ -17,7 +17,7 @@ const Layout: React.FC = ({ children }) => {
-
+
{children}
diff --git a/src/components/RoverModeDisplay.tsx b/src/components/RoverModeDisplay.tsx
deleted file mode 100644
index c8c3021..0000000
--- a/src/components/RoverModeDisplay.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client';
-import React, { useState, useEffect } from 'react';
-import { useROS } from '@/ros/ROSContext';
-import ROSLIB from 'roslib';
-
-
-const modeColors: { [key: string]: string } = {
- TeleOP: '#0070f3', // blue
- Autonomous: '#28a745', // green
- Manual: '#dc3545', // red
- IK: '#ffc107', // yellow
- Science: '#17a2b8', // cyan
- Idle: '#6c757d', // grey
-};
-
-const RoverModeDisplay: React.FC = () => {
- const { ros } = useROS();
- const [currentMode, setCurrentMode] = useState('Unknown');
- const [modeStartTime, setModeStartTime] = useState(Date.now());
- const [elapsed, setElapsed] = useState(0);
-
- useEffect(() => {
- if (!ros) return;
- const modeTopic = new ROSLIB.Topic({
- ros,
- name: '/rover_mode',
- messageType: 'std_msgs/String',
- });
- const handleModeMessage = (message: any) => {
- if (message.data !== currentMode) {
- setCurrentMode(message.data);
- setModeStartTime(Date.now());
- setElapsed(0);
- }
- };
- modeTopic.subscribe(handleModeMessage);
- return () => modeTopic.unsubscribe(handleModeMessage);
- }, [ros, currentMode]);
-
- // update every one second
- useEffect(() => {
- const interval = setInterval(() => {
- setElapsed(Math.floor((Date.now() - modeStartTime) / 1000));
- }, 1000);
- return () => clearInterval(interval);
- }, [modeStartTime]);
-
- const modeColor = modeColors[currentMode] || '#ffc107';
-
- return (
-
- {/*TY chat gpt for styling this*/}
-
- {currentMode}
- {elapsed}s
-
-
- );
-};
-
-export default RoverModeDisplay;
-