Display sensor values in control station GUI (#81)

* sensor values in control station * chk * chk * chk * Display current FSM state in control panel (#61) * Add new Faulted state for pod failures (#78) Add faulted to podop * Added sensor values to gui * Added sensor values to GUI * Added sensor values to GUI while solving issues for frontend * fix serde error * uncomment * remove checks * Final commit * Final commit * Made some UI changes * Made some changes tothe UI * Update control-station/src/services/PodSocketClient.ts Co-authored-by: Taesung Hwang <[email protected]> * Changed datatypes * Sending distance and speed * Changed interface name * Made serverResponse Partial * Made serverResponse Partial --------- Showing sensor values to the sensor boxes in GUI. Changed the size of statusIndicator to fit more sensorBoxes. Co-authored-by: Sam Der <[email protected]> Co-authored-by: vrushang1234 <[email protected]> Co-authored-by: Vrushang Anand <[email protected]> Co-authored-by: Taesung Hwang <[email protected]>
UCI-HyperXite · Jun 1, 2024 · dd20036 · dd20036
1 parent c22567b
commit dd20036
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 26 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/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="PT1" value={downstream_pressure_transducer} />
+			<SensorBox title="PT2" value={upstream_pressure_transducer} />
+			<SensorBox title="Lim Current" 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: string) => 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[];
 }
 
@@ -117,8 +133,9 @@ class PodSocketClient {
 		this.setPodData((d) => ({ ...d, connected: false, state: State.Disconnected }));
 	}
 
-	private onData(data: string): void {
+	private onData(data: Partial<PodData>): void {
 		console.log("server says", data);
+		this.setPodData((d) => ({ ...d, ...data }));
 	}
 
 	private addMessage(response: string, newState: State): void {

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: [],
 	});
 

diff --git a/control-station/src/views/Dashboard/Dashboard.tsx b/control-station/src/views/Dashboard/Dashboard.tsx
@@ -1,10 +1,9 @@
-import { SensorData, StatusIndicator } from "@/components";
+import { SensorData } from "@/components";
 
 function Dashboard() {
 	return (
 		<div>
 			<SensorData />
-			<StatusIndicator />
 		</div>
 	);
 }

diff --git a/pod-operation/src/components/gyro.rs b/pod-operation/src/components/gyro.rs
@@ -1,11 +1,13 @@
 use mpu6050::Mpu6050;
 use rppal::hal::Delay;
 use rppal::i2c::I2c;
+use serde::Serialize;
 
 pub struct Gyroscope {
 	mpu6050: Mpu6050<I2c>,
 }
 
+#[derive(Serialize)]
 pub struct Orientation {
 	pub pitch: f32,
 	pub roll: f32,

diff --git a/pod-operation/src/state_machine.rs b/pod-operation/src/state_machine.rs
@@ -2,12 +2,14 @@ use std::time::Duration;
 
 use enum_map::{enum_map, EnumMap};
 use once_cell::sync::Lazy;
+use serde_json::json;
 use socketioxide::extract::AckSender;
 use socketioxide::{extract::SocketRef, SocketIo};
 use tokio::sync::Mutex;
 use tracing::info;
 
 use crate::components::brakes::Brakes;
+use crate::components::gyro::Gyroscope;
 use crate::components::high_voltage_system::HighVoltageSystem;
 use crate::components::lidar::Lidar;
 use crate::components::lim_temperature::LimTemperature;
@@ -42,12 +44,13 @@ pub struct StateMachine {
 	brakes: Brakes,
 	signal_light: SignalLight,
 	wheel_encoder: WheelEncoder,
-	//upstream_pressure_transducer: PressureTransducer,
+	upstream_pressure_transducer: PressureTransducer,
 	downstream_pressure_transducer: PressureTransducer,
 	lim_temperature_port: LimTemperature,
 	lim_temperature_starboard: LimTemperature,
 	high_voltage_system: HighVoltageSystem,
 	lidar: Lidar,
+	gyro: Gyroscope,
 }
 
 impl StateMachine {
@@ -97,14 +100,15 @@ impl StateMachine {
 			brakes: Brakes::new(),
 			signal_light: SignalLight::new(),
 			wheel_encoder: WheelEncoder::new(),
-			//upstream_pressure_transducer: PressureTransducer::upstream(),
+			upstream_pressure_transducer: PressureTransducer::upstream(),
 			downstream_pressure_transducer: PressureTransducer::downstream(),
 			lim_temperature_port: LimTemperature::new(ads1x1x::SlaveAddr::Default),
 			lim_temperature_starboard: LimTemperature::new(ads1x1x::SlaveAddr::Alternative(
 				false, true,
 			)),
 			high_voltage_system: HighVoltageSystem::new(),
 			lidar: Lidar::new(),
+			gyro: Gyroscope::new(),
 		}
 	}
 
@@ -140,10 +144,29 @@ impl StateMachine {
 
 	/// Perform operations on every FSM tick
 	fn pod_periodic(&mut self) {
+		// Reading each value individually
+		let gyro_data = self.gyro.read_orientation();
+		let wheel_encoder_distance = self.wheel_encoder.measure().expect("wheel encoder faulted");
+		let wheel_encoder_velocity = self.wheel_encoder.get_velocity();
+		let downstream_pressure_data = self.downstream_pressure_transducer.read_pressure();
+		let upstream_pressure_data = self.upstream_pressure_transducer.read_pressure();
+		let lim_temp_port_data = self.lim_temperature_port.read_lim_temps();
+		let lim_temp_starboard_data = self.lim_temperature_starboard.read_lim_temps();
+
+		// Full JSON object
+		let full_json = json!({
+			"gyroscope": gyro_data,
+			"wheel_encoder": { "distance": wheel_encoder_distance, "velocity": wheel_encoder_velocity },
+			"downstream_pressure_transducer": downstream_pressure_data,
+			"upstream_pressure_transducer": upstream_pressure_data,
+			"lim_temperature_port": lim_temp_port_data,
+			"lim_temperature_starboard": lim_temp_starboard_data,
+		});
+
 		self.io
 			.of("/control-station")
 			.unwrap()
-			.emit("pong", "123")
+			.emit("serverResponse", full_json)
 			.ok();
 	}
 
@@ -195,11 +218,6 @@ impl StateMachine {
 
 	fn _enter_faulted(&mut self) {
 		info!("Entering Faulted state");
-		self.io
-			.of("/control-station")
-			.unwrap()
-			.emit("fault", "123")
-			.ok();
 		self.signal_light.disable();
 		self.brakes.engage();
 		self.high_voltage_system.disable();