Add preliminary control panel design (#16)

- Include preliminary GUI design with placeholder data - Add Navbar, SensorData, and ControlPanel components - Use Roboto from Google Fonts --------- Co-authored-by: Sam Der <[email protected]>
UCI-HyperXite · Mar 4, 2024 · ad043cf · ad043cf
1 parent 04177bd
commit ad043cf
Show file tree

Hide file tree

Showing 17 changed files with 233 additions and 24 deletions.
diff --git a/control-station/index.html b/control-station/index.html
@@ -1,9 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+			rel="stylesheet"
+		/>
 		<title>HyperXite 9 Control Station</title>
 	</head>
 	<body>

diff --git a/control-station/src/App.css b/control-station/src/App.css
diff --git 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 (
 		<main>
-			<Dashboard />
+			<Navbar />
+			<SensorData />
+			<ControlPanel />
 		</main>
 	);
 }

diff --git a/control-station/src/components/ControlPanel/ControlPanel.css 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
@@ -0,0 +1,14 @@
+import "./ControlPanel.css";
+
+function ControlPanel() {
+	return (
+		<div className="controlpanel">
+			<button className="button start">Start</button>
+			<button className="button stop">Stop</button>
+			<button className="button force">Force Stop</button>
+			<button className="button load">Load</button>
+		</div>
+	);
+}
+
+export default ControlPanel;
diff --git a/control-station/src/components/Navbar/Navbar.css 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
@@ -0,0 +1,14 @@
+import HX from "@/data/images/HX Logo.svg";
+
+import "./Navbar.css";
+
+function Navbar() {
+	return (
+		<header className="navbar">
+			<img alt="HX logo" src={HX} style={{ height: "60px" }} />
+			HyperXite
+		</header>
+	);
+}
+
+export default Navbar;
diff --git a/control-station/src/components/SensorBoxes/Camera.tsx b/control-station/src/components/SensorBoxes/Camera.tsx
@@ -0,0 +1,7 @@
+import "./SensorData.css";
+
+function Camera() {
+	return <div className="camera"></div>;
+}
+
+export default Camera;
diff --git a/control-station/src/components/SensorBoxes/Console.tsx b/control-station/src/components/SensorBoxes/Console.tsx
@@ -0,0 +1,17 @@
+import "./SensorData.css";
+
+function Console() {
+	return (
+		<div className="console">
+			<h2>Console</h2>
+			<ul className="console-list">
+				<li className="console-list-item">Start Sent</li>
+				<li className="console-list-item">Stop Sent</li>
+				<li className="console-list-item">Load Sent</li>
+				<li className="console-list-item">Force Stop Sent</li>
+			</ul>
+		</div>
+	);
+}
+
+export default Console;
diff --git a/control-station/src/components/SensorBoxes/SensorData.css 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
@@ -0,0 +1,19 @@
+import Camera from "./Camera";
+import Console from "./Console";
+import SensorContainer from "./Sensors/SensorsContainer";
+
+import "./SensorData.css";
+
+function SensorData() {
+	return (
+		<div className="sensordata">
+			<SensorContainer />
+			<div style={{ width: "50%" }}>
+				<Camera />
+				<Console />
+			</div>
+		</div>
+	);
+}
+
+export default SensorData;
diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorBox.css 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
@@ -0,0 +1,12 @@
+import "./SensorBox.css";
+
+function SensorBox() {
+	return (
+		<div className="sensorbox">
+			<h3 style={{ textAlign: "center", height: "10%" }}>Title</h3>
+			<p className="sensor-value">0</p>
+		</div>
+	);
+}
+
+export default SensorBox;
diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx b/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx
@@ -0,0 +1,16 @@
+import SensorBox from "./SensorBox";
+
+function SensorContainer() {
+	return (
+		<div className="SensorContainer">
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+		</div>
+	);
+}
+
+export default SensorContainer;
diff --git 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
diff --git 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;
 }