diff --git a/control-station/package-lock.json b/control-station/package-lock.json index 969251ec..de2cb234 100644 --- a/control-station/package-lock.json +++ b/control-station/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.23.1", "socket.io-client": "^4.7.2" }, "devDependencies": { @@ -164,6 +165,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", + "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@socket.io/component-emitter": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", @@ -2483,6 +2492,36 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-router": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz", + "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==", + "dependencies": { + "@remix-run/router": "1.16.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz", + "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==", + "dependencies": { + "@remix-run/router": "1.16.1", + "react-router": "6.23.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", diff --git a/control-station/package.json b/control-station/package.json index cc02ea57..7eb36f82 100644 --- a/control-station/package.json +++ b/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": { diff --git a/control-station/src/App.tsx b/control-station/src/App.tsx index a7ad4368..9d399855 100644 --- a/control-station/src/App.tsx +++ b/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() {
- + + + } /> + } /> + +
diff --git a/control-station/src/data/images/FrontPod.png b/control-station/src/data/images/FrontPod.png new file mode 100644 index 00000000..5d976249 Binary files /dev/null and b/control-station/src/data/images/FrontPod.png differ diff --git a/control-station/src/data/images/SidePod.png b/control-station/src/data/images/SidePod.png new file mode 100644 index 00000000..fcd9a43b Binary files /dev/null and b/control-station/src/data/images/SidePod.png differ diff --git a/control-station/src/views/Dynamics/Dynamics.css b/control-station/src/views/Dynamics/Dynamics.css new file mode 100644 index 00000000..53dc7299 --- /dev/null +++ b/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; +} diff --git a/control-station/src/views/Dynamics/Dynamics.tsx b/control-station/src/views/Dynamics/Dynamics.tsx new file mode 100644 index 00000000..831868c2 --- /dev/null +++ b/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 ( +
+
+ + +
+
+
+ front view of the pod +
+
+ side view of the pod +
+
+
+ ); +} + +export default Dynamics; diff --git a/control-station/src/views/index.ts b/control-station/src/views/index.ts index b721fa59..06f58bca 100644 --- a/control-station/src/views/index.ts +++ b/control-station/src/views/index.ts @@ -1 +1,2 @@ export { default as Dashboard } from "./Dashboard/Dashboard"; +export { default as Dynamics } from "./Dynamics/Dynamics"; diff --git a/pod-operation/src/components/gyro.rs b/pod-operation/src/components/gyro.rs index f825b929..5d68953e 100644 --- a/pod-operation/src/components/gyro.rs +++ b/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), } }