Added dynamics page and react router (#115)

* Added dynamics page and react router

* Added sensorboxes and pictures

* Rotate image according to gyroscope

* Made animation smoother

* Fixed the import for dynamics and added inbuilt PI value

* Removed unused import

* Removed unused import

* Removed unused import

control-station/package.json

@@ -14,6 +14,7 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-router-dom": "^6.23.1",
 		"socket.io-client": "^4.7.2"
 	},
 	"devDependencies": {

control-station/src/App.tsx

@@ -1,7 +1,8 @@
 import { ControlPanel, Navbar } from "@/components";
 import usePodData from "./services/usePodData";
 import PodContext from "./services/PodContext";
-import { Dashboard } from "@/views";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Dashboard, Dynamics } from "@/views";
 
 function App() {
 	const { podData, podSocketClient } = usePodData();
@@ -10,7 +11,12 @@ function App() {
 		<main>
 			<PodContext.Provider value={{ podData, podSocketClient }}>
 				<Navbar />
-				<Dashboard />
+				<BrowserRouter>
+					<Routes>
+						<Route path="/" element={<Dashboard />} />
+						<Route path="/dynamics" element={<Dynamics />} />
+					</Routes>
+				</BrowserRouter>
 				<ControlPanel />
 			</PodContext.Provider>
 		</main>

control-station/src/views/Dynamics/Dynamics.css

@@ -0,0 +1,30 @@
+.dynamics {
+	display: flex;
+}
+
+.dynamics-sensorbox {
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-evenly;
+	align-items: center;
+}
+
+.dynamics-pictures {
+	width: 60%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.pod-picture-container {
+	background-color: rgb(209, 209, 209);
+	width: 60%;
+	height: 40%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 40px;
+	overflow: hidden;
+}

control-station/src/views/Dynamics/Dynamics.tsx

@@ -0,0 +1,41 @@
+import SensorBox from "@/components/SensorBoxes/Sensors/SensorBox";
+import PodContext from "@/services/PodContext";
+import FrontPod from "@/data/images/FrontPod.png";
+import SidePod from "@/data/images/SidePod.png";
+import "./Dynamics.css";
+import { useContext } from "react";
+
+function Dynamics() {
+	const { podData } = useContext(PodContext);
+	const { gyroscope } = podData;
+	return (
+		<div className="dynamics">
+			<div className="dynamics-sensorbox">
+				<SensorBox title="Roll" value={Math.round(gyroscope.roll * 100) / 100} />
+				<SensorBox title="Pitch" value={Math.round(gyroscope.pitch * 100) / 100} />
+			</div>
+			<div className="dynamics-pictures">
+				<div className="pod-picture-container">
+					<img
+						src={FrontPod}
+						alt="front view of the pod"
+						style={{
+							transform: `rotate(${Math.round(gyroscope.roll * 100) / 100}deg)`,
+						}}
+					/>
+				</div>
+				<div className="pod-picture-container">
+					<img
+						src={SidePod}
+						alt="side view of the pod"
+						style={{
+							transform: `rotate(${Math.round(gyroscope.pitch * 100) / 100}deg)`,
+						}}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default Dynamics;

control-station/src/views/index.ts

@@ -1 +1,2 @@
 export { default as Dashboard } from "./Dashboard/Dashboard";
+export { default as Dynamics } from "./Dynamics/Dynamics";

pod-operation/src/components/gyro.rs

@@ -2,6 +2,7 @@
 use {
 	mpu6050::Mpu6050,
 	rppal::{hal::Delay, i2c::I2c},
+	std::f32::consts::PI,
 };
 
 use serde::Serialize;
@@ -16,7 +17,6 @@ pub struct Orientation {
 	pub pitch: f32,
 	pub roll: f32,
 }
-
 impl Gyroscope {
 	#[cfg(feature = "mpu6050")]
 	pub fn new() -> Self {
@@ -27,11 +27,12 @@ impl Gyroscope {
 	}
 
 	#[cfg(feature = "mpu6050")]
+
 	pub fn read_orientation(&mut self) -> Orientation {
 		let angles = self.mpu6050.get_acc_angles().unwrap();
 		Orientation {
-			pitch: angles[1],
-			roll: angles[0],
+			pitch: (angles[1] * 180.0 / PI),
+			roll: (angles[0] * 180.0 / PI),
 		}
 	}