diff --git a/control-station/index.html b/control-station/index.html index 89bebee3..39a81c4c 100644 --- a/control-station/index.html +++ b/control-station/index.html @@ -1,9 +1,15 @@ - + + + + HyperXite 9 Control Station diff --git a/control-station/src/App.css b/control-station/src/App.css deleted file mode 100644 index 345ed340..00000000 --- a/control-station/src/App.css +++ /dev/null @@ -1,6 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} diff --git a/control-station/src/App.tsx b/control-station/src/App.tsx index b84904fc..a6c6fcbb 100644 --- a/control-station/src/App.tsx +++ b/control-station/src/App.tsx @@ -1,11 +1,11 @@ -import { Dashboard } from "@/views"; - -import "./App.css"; +import { ControlPanel, Navbar, SensorData } from "@/components"; function App() { return (
- + + +
); } diff --git a/control-station/src/components/ControlPanel/ControlPanel.css b/control-station/src/components/ControlPanel/ControlPanel.css new file mode 100644 index 00000000..92189610 --- /dev/null +++ b/control-station/src/components/ControlPanel/ControlPanel.css @@ -0,0 +1,30 @@ +.controlpanel { + position: fixed; + bottom: 0; + width: 100%; + background-color: black; + height: 9%; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.button { + padding: 10px 10px 10px 10px; + min-width: 200px; + border-radius: 10px; + font-size: 1.5rem; + color: white; +} +.start { + background-color: rgb(35, 128, 30); +} +.stop { + background-color: rgb(235, 63, 51); +} +.force { + background-color: rgb(149, 46, 46); +} +.load { + background-color: rgb(0, 101, 188); +} diff --git a/control-station/src/components/ControlPanel/ControlPanel.tsx b/control-station/src/components/ControlPanel/ControlPanel.tsx new file mode 100644 index 00000000..d5aa8b70 --- /dev/null +++ b/control-station/src/components/ControlPanel/ControlPanel.tsx @@ -0,0 +1,14 @@ +import "./ControlPanel.css"; + +function ControlPanel() { + return ( +
+ + + + +
+ ); +} + +export default ControlPanel; diff --git a/control-station/src/components/Navbar/Navbar.css b/control-station/src/components/Navbar/Navbar.css new file mode 100644 index 00000000..60e17e9a --- /dev/null +++ b/control-station/src/components/Navbar/Navbar.css @@ -0,0 +1,10 @@ +.navbar { + font-size: 2rem; + background-color: black; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-weight: 700; + padding: 10px 10px 10px 10px; +} diff --git a/control-station/src/components/Navbar/Navbar.tsx b/control-station/src/components/Navbar/Navbar.tsx new file mode 100644 index 00000000..3df858f4 --- /dev/null +++ b/control-station/src/components/Navbar/Navbar.tsx @@ -0,0 +1,14 @@ +import HX from "@/data/images/HX Logo.svg"; + +import "./Navbar.css"; + +function Navbar() { + return ( +
+ HX logo + HyperXite +
+ ); +} + +export default Navbar; diff --git a/control-station/src/components/SensorBoxes/Camera.tsx b/control-station/src/components/SensorBoxes/Camera.tsx new file mode 100644 index 00000000..f4af14ee --- /dev/null +++ b/control-station/src/components/SensorBoxes/Camera.tsx @@ -0,0 +1,7 @@ +import "./SensorData.css"; + +function Camera() { + return
; +} + +export default Camera; diff --git a/control-station/src/components/SensorBoxes/Console.tsx b/control-station/src/components/SensorBoxes/Console.tsx new file mode 100644 index 00000000..9e995522 --- /dev/null +++ b/control-station/src/components/SensorBoxes/Console.tsx @@ -0,0 +1,17 @@ +import "./SensorData.css"; + +function Console() { + return ( +
+

Console

+ +
+ ); +} + +export default Console; diff --git a/control-station/src/components/SensorBoxes/SensorData.css b/control-station/src/components/SensorBoxes/SensorData.css new file mode 100644 index 00000000..d6db9a24 --- /dev/null +++ b/control-station/src/components/SensorBoxes/SensorData.css @@ -0,0 +1,44 @@ +.sensordata { + display: flex; + flex-grow: 1; +} +.camera { + height: 45%; + background-color: rgb(143, 143, 143); + border-radius: 20px; + margin: 1% 1% 2% 1%; + border: 1px solid black; +} +.CCcontainer { + width: 50vw; +} + +.console { + height: 50%; + background-color: rgb(255, 255, 255); + border-radius: 20px; + margin: 2% 1% 1% 1%; + border: 1px solid black; + overflow-y: auto; +} + +.console > h1 { + text-align: center; + font-size: 2.6rem; +} + +.console-list { + margin: 0; + padding: 0; +} + +.console-list-item { + border-bottom: 0.5px solid rgb(170, 170, 170); + text-decoration: none; + list-style-type: none; + font-size: 0.9rem; + padding-left: 4%; + margin-top: 1%; + font-family: "Ubuntu Mono", monospace; + position: relative; +} diff --git a/control-station/src/components/SensorBoxes/SensorData.tsx b/control-station/src/components/SensorBoxes/SensorData.tsx new file mode 100644 index 00000000..fd6eb7c0 --- /dev/null +++ b/control-station/src/components/SensorBoxes/SensorData.tsx @@ -0,0 +1,19 @@ +import Camera from "./Camera"; +import Console from "./Console"; +import SensorContainer from "./Sensors/SensorsContainer"; + +import "./SensorData.css"; + +function SensorData() { + return ( +
+ +
+ + +
+
+ ); +} + +export default SensorData; diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorBox.css b/control-station/src/components/SensorBoxes/Sensors/SensorBox.css new file mode 100644 index 00000000..a16423fc --- /dev/null +++ b/control-station/src/components/SensorBoxes/Sensors/SensorBox.css @@ -0,0 +1,25 @@ +.sensorbox { + height: 25vh; + width: 40%; + border-radius: 15px; + margin-top: 1%; + margin-bottom: 1%; + background: #e0e0e0; +} +.SensorContainer { + width: 65vw; + height: 80%; + height: auto; + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + flex-basis: 50%; +} + +.sensor-value { + display: flex; + justify-content: center; + align-items: center; + height: 90%; + font-size: 3rem; +} diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx b/control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx new file mode 100644 index 00000000..ba0a4617 --- /dev/null +++ b/control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx @@ -0,0 +1,12 @@ +import "./SensorBox.css"; + +function SensorBox() { + return ( +
+

Title

+

0

+
+ ); +} + +export default SensorBox; diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx b/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx new file mode 100644 index 00000000..426c716d --- /dev/null +++ b/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx @@ -0,0 +1,16 @@ +import SensorBox from "./SensorBox"; + +function SensorContainer() { + return ( +
+ + + + + + +
+ ); +} + +export default SensorContainer; diff --git a/control-station/src/components/index.ts b/control-station/src/components/index.ts index b11630ed..4221f196 100644 --- a/control-station/src/components/index.ts +++ b/control-station/src/components/index.ts @@ -1 +1,4 @@ +export { default as ControlPanel } from "./ControlPanel/ControlPanel"; +export { default as Navbar } from "./Navbar/Navbar"; +export { default as SensorData } from "./SensorBoxes/SensorData"; export { default as Status } from "./Status/Status"; diff --git a/control-station/src/data/images/HX Logo.svg b/control-station/src/data/images/HX Logo.svg new file mode 100644 index 00000000..f6bc5890 --- /dev/null +++ b/control-station/src/data/images/HX Logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/control-station/src/index.css b/control-station/src/index.css index 3cc15d31..9c9c6a50 100644 --- a/control-station/src/index.css +++ b/control-station/src/index.css @@ -1,15 +1,6 @@ :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; + font-family: "Roboto", sans-serif; +} +body { + margin: 0 0 0 0; }