Syncing with pi

UCI-HyperXite · Jun 1, 2024 · aa3341a · aa3341a
2 parents e90c347 + dd20036
commit aa3341a
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 155 deletions.
diff --git a/control-station/src/components/ControlPanel/ControlPanel.css b/control-station/src/components/ControlPanel/ControlPanel.css
@@ -5,6 +5,8 @@
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
+	position: fixed;
+	bottom: 0;
 }
 
 .button {

diff --git a/control-station/src/components/SensorBoxes/Camera.tsx b/control-station/src/components/SensorBoxes/Camera.tsx
@@ -3,29 +3,27 @@ import { LineChart } from "@mui/x-charts";
 import PodContext from "@/services/PodContext";
 import { useContext, useEffect, useState } from "react";
 
-
-
 function Camera() {
-    const { podData } = useContext(PodContext);
-    const [lidarList, setLidarList] = useState<number[]>([]);
+	const { podData } = useContext(PodContext);
+	const [lidarList, setLidarList] = useState<number[]>([]);
 
-    useEffect(() => {
-        console.log(lidarList);
-        setLidarList((prevLidarList) => [...prevLidarList, podData.lidar]);
-    }, [podData]);
+	useEffect(() => {
+		console.log(lidarList);
+		setLidarList((prevLidarList) => [...prevLidarList, podData.lidar]);
+	}, [podData, lidarList]); // Added lidarList to the dependency array
 
-    return (
-        <div className="camera">
-            <LineChart
-                series={[
-                    {
-                        data: lidarList,
-                    },
-                ]}
-                className="lidar-chart"
-            />
-        </div>
-    );
+	return (
+		<div className="camera">
+			<LineChart
+				series={[
+					{
+						data: lidarList,
+					},
+				]}
+				className="lidar-chart"
+			/>
+		</div>
+	);
 }
 
 export default Camera;
diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorBox.css b/control-station/src/components/SensorBoxes/Sensors/SensorBox.css
@@ -5,6 +5,7 @@
 	margin-top: 1%;
 	margin-bottom: 1%;
 	background: #e0e0e0;
+	position: relative;
 }
 .SensorContainer {
 	width: 65vw;
@@ -20,6 +21,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	height: 90%;
+	height: auto;
 	font-size: 3rem;
+	position: relative;
 }
diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx b/control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx
@@ -1,10 +1,15 @@
 import "./SensorBox.css";
 
-function SensorBox() {
+interface SensorBoxProps {
+	title: string;
+	value: number;
+}
+
+function SensorBox({ title, value }: SensorBoxProps) {
 	return (
 		<div className="sensorbox">
-			<h3 style={{ textAlign: "center", height: "10%" }}>Title</h3>
-			<p className="sensor-value">0</p>
+			<h3 style={{ textAlign: "center", height: "10%" }}>{title}</h3>
+			<p className="sensor-value">{value}</p>
 		</div>
 	);
 }

diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx b/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx
@@ -1,12 +1,23 @@
+import { useContext } from "react";
 import SensorBox from "./SensorBox";
-
+import PodContext from "@/services/PodContext";
+import StatusIndicator from "@/components/StatusIndicator/StatusIndicator";
 function SensorContainer() {
+	const { podData } = useContext(PodContext);
+	const {
+		wheel_encoder,
+		downstream_pressure_transducer,
+		upstream_pressure_transducer,
+		lim_temperature_port,
+	} = podData;
 	return (
 		<div className="SensorContainer">
-			<SensorBox />
-			<SensorBox />
-			<SensorBox />
-			<SensorBox />
+			<SensorBox title="Speed" value={wheel_encoder.velocity} />
+			<SensorBox title="Distance" value={wheel_encoder.distance} />
+			<SensorBox title="Downstream PT" value={downstream_pressure_transducer} />
+			<SensorBox title="Upstream PT" value={upstream_pressure_transducer} />
+			<SensorBox title="Breaking Distance" value={lim_temperature_port} />
+			<StatusIndicator />
 		</div>
 	);
 }

diff --git a/control-station/src/components/StatusIndicator/StatusIndicator.css b/control-station/src/components/StatusIndicator/StatusIndicator.css
@@ -1,12 +1,15 @@
 .status-indicator {
 	background-color: lightgray;
 	border-radius: 10px;
-	padding: 1rem;
-	margin: 2rem;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
 }
 
 .group {
-	margin-bottom: 1rem;
+	margin-bottom: 0.1rem;
+	margin-left: 1rem;
+	width: 40%;
 }
 
 .state-text {

diff --git a/control-station/src/components/StatusIndicator/StatusIndicator.tsx b/control-station/src/components/StatusIndicator/StatusIndicator.tsx
@@ -10,11 +10,12 @@ function StatusIndicator() {
 	const { state } = podData;
 
 	return (
-		<div className="status-indicator">
+		<div className="sensorbox status-indicator" style={{ fontSize: "1rem" }}>
 			{Object.values(State).map((s) => {
 				return (
 					<div key={s} className={`group ${s.toLowerCase()}-state`}>
 						<span className={`circle` + (s === state ? " active" : "")}></span>
+						<br />
 						<div className="state-text">{s}</div>
 					</div>
 				);

diff --git a/control-station/src/services/PodSocketClient.ts b/control-station/src/services/PodSocketClient.ts
@@ -15,7 +15,7 @@ export enum State {
 interface ServerToClientEvents {
 	connect: () => void;
 	disconnect: (reason: Socket.DisconnectReason) => void;
-	serverResponse: (data: {lidar:number}) => void;
+	serverResponse: (data: Partial<PodData>) => void;
 }
 
 interface Message {
@@ -30,9 +30,25 @@ interface ClientToServerEvents {
 	halt: (ack: (data: string) => void) => void;
 }
 
+interface WheelEncoder {
+	distance: number;
+	velocity: number;
+}
+
+interface Gyroscope {
+	pitch: number;
+	roll: number;
+}
+
 export interface PodData {
 	connected: boolean;
 	state: State;
+	gyroscope: Gyroscope;
+	wheel_encoder: WheelEncoder;
+	downstream_pressure_transducer: number;
+	upstream_pressure_transducer: number;
+	lim_temperature_port: number;
+	lim_temperature_starboard: number;
 	messages: Message[];
 	lidar: number;
 }
@@ -46,95 +62,94 @@ type Entries<T> = {
 }[keyof T][];
 
 class PodSocketClient {
-    socket: Socket<ServerToClientEvents, ClientToServerEvents>;
-    serverEvents: ServerToClientEvents;
-    setPodData: SetPodData;
-
-    constructor(setPodData: SetPodData) {
-        this.socket = ioNamespace("control-station");
-        this.serverEvents = {
-            connect: this.onConnect.bind(this),
-            disconnect: this.onDisconnect.bind(this),
+	socket: Socket<ServerToClientEvents, ClientToServerEvents>;
+	serverEvents: ServerToClientEvents;
+	setPodData: SetPodData;
+
+	constructor(setPodData: SetPodData) {
+		this.socket = ioNamespace("control-station");
+		this.serverEvents = {
+			connect: this.onConnect.bind(this),
+			disconnect: this.onDisconnect.bind(this),
 			serverResponse: this.onData.bind(this),
-        } as const;
-        this.setPodData = setPodData;
-    }
-
-    enable(): void {
-        this.socket.connect();
-        console.debug("Enabling socket event handlers");
-        (Object.entries(this.serverEvents) as Entries<ServerToClientEvents>).forEach(
-            ([event, handler]) => {
-                this.socket.on(event, handler);
-            },
-        );
-    }
-
-    disable(): void {
-        console.debug("Disabling socket event handlers");
-        Object.keys(this.serverEvents).forEach((event) => {
-            this.socket.off(event as keyof ServerToClientEvents);
-        });
-        this.socket.disconnect();
-    }
-
-    sendLoad(): void {
-        this.socket.emit("load", (response: string) => {
-            console.log("Server acknowledged:", response);
-            this.addMessage(response, State.Load);
-        });
-    }
-
-    sendRun(): void {
-        this.socket.emit("run", (response: string) => {
-            console.log("Server acknowledged:", response);
-            this.addMessage(response, State.Running);
-        });
-    }
-
-    sendStop(): void {
-        this.socket.emit("stop", (response: string) => {
-            console.log("Server acknowledged:", response);
-            this.addMessage(response, State.Stopped);
-        });
-    }
-
-    sendHalt(): void {
-        this.socket.emit("halt", (response: string) => {
-            console.log("Server acknowledged:", response);
-            this.addMessage(response, State.Halted);
-        });
-    }
-
-    private onConnect(): void {
-        console.log("Connected to server as", this.socket.id);
-        this.setPodData((d) => ({ ...d, connected: true, state: State.Init }));
-    }
-
-    private onDisconnect(reason: Socket.DisconnectReason): void {
-        console.log(`Disconnected from server: ${reason}`);
-        this.setPodData((d) => ({ ...d, connected: false, state: State.Disconnected }));
-    }
-
-    private onData(data: { lidar: number }): void { // Updated this line
-        console.log("Server says lidar data:", data.lidar);
-        this.setPodData((d) => ({ ...d, lidar: data.lidar }));
-    }
-
-    private addMessage(response: string, newState: State): void {
-        const timestamp = new Date();
-        const newMessage = {
-            timestamp,
-            message: response,
-        };
-
-        this.setPodData((d) => ({
-            ...d,
-            state: newState,
-            messages: [...d.messages, newMessage],
-        }));
-    }
+		} as const;
+		this.setPodData = setPodData;
+	}
+
+	enable(): void {
+		this.socket.connect();
+		console.debug("Enabling socket event handlers");
+		(Object.entries(this.serverEvents) as Entries<ServerToClientEvents>).forEach(
+			([event, handler]) => {
+				this.socket.on(event, handler);
+			},
+		);
+	}
+
+	disable(): void {
+		console.debug("Disabling socket event handlers");
+		Object.keys(this.serverEvents).forEach((event) => {
+			this.socket.off(event as keyof ServerToClientEvents);
+		});
+		this.socket.disconnect();
+	}
+
+	sendLoad(): void {
+		this.socket.emit("load", (response: string) => {
+			console.log("Server acknowledged:", response);
+			this.addMessage(response, State.Load);
+		});
+	}
+
+	sendRun(): void {
+		this.socket.emit("run", (response: string) => {
+			console.log("Server acknowledged:", response);
+			this.addMessage(response, State.Running);
+		});
+	}
+
+	sendStop(): void {
+		this.socket.emit("stop", (response: string) => {
+			console.log("Server acknowledged:", response);
+			this.addMessage(response, State.Stopped);
+		});
+	}
+
+	sendHalt(): void {
+		this.socket.emit("halt", (response: string) => {
+			console.log("Server acknowledged:", response);
+			this.addMessage(response, State.Halted);
+		});
+	}
+
+	private onConnect(): void {
+		console.log("Connected to server as", this.socket.id);
+		this.setPodData((d) => ({ ...d, connected: true, state: State.Init }));
+	}
+
+	private onDisconnect(reason: Socket.DisconnectReason): void {
+		console.log(`Disconnected from server: ${reason}`);
+		this.setPodData((d) => ({ ...d, connected: false, state: State.Disconnected }));
+	}
+
+	private onData(data: Partial<PodData>): void {
+		console.log("server says", data);
+		this.setPodData((d) => ({ ...d, ...data }));
+	}
+
+	private addMessage(response: string, newState: State): void {
+		const timestamp = new Date();
+		const newMessage = {
+			timestamp,
+			message: response,
+		};
+
+		this.setPodData((d) => ({
+			...d,
+			state: newState,
+			messages: [...d.messages, newMessage],
+		}));
+	}
 }
 
-
 export default PodSocketClient;
diff --git a/control-station/src/services/usePodData.tsx b/control-station/src/services/usePodData.tsx
@@ -3,8 +3,14 @@ import PodSocketClient, { PodData, State } from "./PodSocketClient";
 
 function usePodData() {
 	const [podData, setPodData] = useState<PodData>({
-		state: State.Disconnected,
 		connected: false,
+		state: State.Disconnected,
+		gyroscope: { roll: 0, pitch: 0 },
+		wheel_encoder: { distance: 0, velocity: 0 },
+		downstream_pressure_transducer: 0,
+		upstream_pressure_transducer: 0,
+		lim_temperature_port: 0,
+		lim_temperature_starboard: 0,
 		messages: [],
 		lidar: 0,
 	});