Add preliminary control panel design

control-station/src/App.tsx

@@ -1,13 +1,27 @@
-import { Dashboard } from "@/views";
+import React, { createContext, useState } from "react";
+import Navbar from "@/Components/Navbar/Navbar";
+import SensorBoxContainer from "@/Components/SensorBoxes/SensorBoxContainer";
+import ControlPanel from "@/Components/ControlPanel/ControlPanel";
+interface ConsoleContextProps {
+	console: number[];
+	setconsole: React.Dispatch<React.SetStateAction<number[]>>;
+}
 
-import "./App.css";
+export const consoleContext = createContext<ConsoleContextProps | undefined>(
+	undefined
+);
 
-function App() {
+const App: React.FC = () => {
+	const [console, setconsole] = useState<number[]>([]);
 	return (
-		<main>
-			<Dashboard />
-		</main>
+		<consoleContext.Provider value={{ console, setconsole }}>
+			<main>
+				<Navbar />
+				<SensorBoxContainer />
+				<ControlPanel />
+			</main>
+		</consoleContext.Provider>
 	);
-}
+};
 
 export default App;

control-station/src/Components/ControlPanel/ControlPanel.tsx

@@ -0,0 +1,47 @@
+import { useContext } from "react";
+import { consoleContext } from "../../App";
+import "./controlpanel.css";
+
+export default function ControlPanel() {
+	const context = useContext(consoleContext);
+
+	if (!context) {
+		// Handle the case when context is undefined
+		return <div>Error: Context not available</div>;
+	}
+
+	const { setconsole } = context;
+
+	const handleStart = () => {
+		setconsole((prev: number[]) => [...prev, 1]);
+	};
+
+	const handleStop = () => {
+		setconsole((prev: number[]) => [...prev, 0]);
+	};
+
+	const handleForceStop = () => {
+		setconsole((prev: number[]) => [...prev, 2]);
+	};
+
+	const handleLoad = () => {
+		setconsole((prev: number[]) => [...prev, 3]);
+	};
+
+	return (
+		<div className="controlpanel">
+			<button id="start" className="button" onClick={handleStart}>
+				Start
+			</button>
+			<button id="stop" className="button" onClick={handleStop}>
+				Stop
+			</button>
+			<button id="force" className="button" onClick={handleForceStop}>
+				Force Stop
+			</button>
+			<button id="load" className="button" onClick={handleLoad}>
+				Load
+			</button>
+		</div>
+	);
+}

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

control-station/src/Components/Navbar/Navbar.tsx

@@ -0,0 +1,10 @@
+import "./navbar.css";
+import HX from "@/data/images/HX Logo.svg";
+export default function Navbar() {
+	return (
+		<header className="navbar">
+			<img alt="HX logo" src={HX} style={{ height: "60px" }} />
+			HyperXite
+		</header>
+	);
+}

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

control-station/src/Components/SensorBoxes/Camera.tsx

@@ -0,0 +1,4 @@
+import "./sensorboxct.css";
+export default function Camera() {
+	return <div className="camera"></div>;
+}

control-station/src/Components/SensorBoxes/Console.tsx

@@ -0,0 +1,34 @@
+import { useContext } from "react";
+import { consoleContext } from "@/App";
+import "./sensorboxct.css";
+
+export default function Console() {
+	const context = useContext(consoleContext);
+
+	if (!context) {
+		return <div>Error: Console context not available</div>;
+	}
+
+	const { console } = context;
+
+	return (
+		<div className="console">
+			<h1>Console</h1>
+			<ul className="console-list">
+				{console.map((item: number, index: number) => (
+					<li key={index} className="console-list-item">
+						{item === 1
+							? "Start Sent"
+							: item === 0
+							? "Stop Sent"
+							: item === 2
+							? "Force Stop Sent"
+							: item === 3
+							? "Load Sent"
+							: ""}
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}

control-station/src/Components/SensorBoxes/SensorBoxContainer.tsx

@@ -0,0 +1,15 @@
+import SensorContainer from "./Sensors/SensorsContainer";
+import "./sensorboxct.css";
+import Camera from "./Camera";
+import Console from "./Console";
+export default function SensorBoxContainer() {
+	return (
+		<div className="sensorboxcontainer">
+			<SensorContainer />
+			<div style={{ width: "50%" }}>
+				<Camera />
+				<Console />
+			</div>
+		</div>
+	);
+}

control-station/src/Components/SensorBoxes/Sensors/SensorBox.tsx

@@ -0,0 +1,9 @@
+import "./sensorbox.css";
+export default function SensorBox() {
+	return (
+		<div className="sensorbox">
+			<h1 style={{ textAlign: "center", height: "10%" }}>Title</h1>
+			<h1 className="sensor-value">0</h1>
+		</div>
+	);
+}

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

@@ -0,0 +1,14 @@
+import SensorBox from "./SensorBox";
+
+export default function SensorContainer() {
+	return (
+		<div className="SensorContainer">
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+		</div>
+	);
+}

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

control-station/src/Components/SensorBoxes/sensorboxct.css

@@ -0,0 +1,45 @@
+.sensorboxcontainer{
+    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;
+}

control-station/src/Components/index.ts

@@ -0,0 +1 @@
+export { default as Status } from "./status/Status";

control-station/src/index.css

@@ -1,15 +1,7 @@
-: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%;
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+:root{
+	font-family: 'Roboto', sans-serif;
 }
+body{
+	margin: 0 0 0 0
+}

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

@@ -1,4 +1,4 @@
-import { Status } from "@/components";
+import { Status } from "@/Components";
 
 function Dashboard() {
 	return (

control-station/tsconfig.json

@@ -3,7 +3,8 @@
 		"target": "ES2020",
 		"baseUrl": ".",
 		"paths": {
-			"@/*": ["src/*"]
+			"@/*": ["src/*"],
+			"$/*":["public/*"],
 		},
 		"useDefineForClassFields": true,
 		"lib": ["ES2020", "DOM", "DOM.Iterable"],

control-station/vite.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
 	resolve: {
 		alias: {
 			"@/": "/src/",
+			"$/":"/public/"
 		},
 	},
 });