Display sensor values in control station GUI

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 {

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;
 }

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>
 	);
 }

control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx

@@ -1,12 +1,17 @@
+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);
 	return (
 		<div className="SensorContainer">
-			<SensorBox />
-			<SensorBox />
-			<SensorBox />
-			<SensorBox />
+			<SensorBox title="Speed" value={podData.gyroscope} />
+			<SensorBox title="Distance" value={podData.wheel_encoder} />
+			<SensorBox title="PT1" value={podData.downstream_pressure_transducer} />
+			<SensorBox title="PT2" value={podData.upstream_pressure_transducer} />
+			<SensorBox title="Lim Current" value={podData.upstream_pressure_transducer} />
+			<StatusIndicator />
 		</div>
 	);
 }

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 {

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>
 				);

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: PodData) => void;
 }
 
 interface ClientToServerEvents {
@@ -28,6 +28,12 @@ interface ClientToServerEvents {
 export interface PodData {
 	connected: boolean;
 	state: State;
+	gyroscope: number;
+	wheel_encoder: number;
+	downstream_pressure_transducer: number;
+	upstream_pressure_transducer: number;
+	lim_temperature_port: number;
+	lim_temperature_starboard: number;
 }
 
 type SetPodData = Dispatch<SetStateAction<PodData>>;
@@ -111,8 +117,9 @@ class PodSocketClient {
 		this.setPodData((d) => ({ ...d, connected: false, state: State.Disconnected }));
 	}
 
-	private onData(data: string): void {
+	private onData(data: PodData): void {
 		console.log("server says", data);
+		this.setPodData((d) => ({ ...d, ...data }));
 	}
 }
 

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: 0,
+		wheel_encoder: 0,
+		downstream_pressure_transducer: 0,
+		upstream_pressure_transducer: 0,
+		lim_temperature_port: 0,
+		lim_temperature_starboard: 0,
 	});
 
 	const podSocketClient = useMemo(() => new PodSocketClient(setPodData), []);

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>
 	);
 }

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,

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,28 @@ 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_data = self.wheel_encoder.measure().expect("wheel encoder faulted");
+		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": wheel_encoder_data,
+			"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 +217,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();