v2.1.3

backend/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "hyperloop-backend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "description": ""
+}

common-front/lib/store/measurementsStore.ts

@@ -261,7 +261,6 @@ function createMeasurementsFromPodDataAdapter(
             }
         }
     }
-
     return measurements;
 }
 

control-station/package.json

@@ -23,7 +23,7 @@
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.6.2",
         "react-use-websocket": "^4.3.1",
-        "three": "^0.152.2"
+        "three": "^0.159.0"
     },
     "devDependencies": {
         "@types/react": "^18.0.26",

control-station/src/App.tsx

@@ -4,6 +4,7 @@ import 'styles/scrollbars.scss';
 import styles from './App.module.scss';
 import { Sidebar } from 'components/Sidebar/Sidebar';
 import { ReactComponent as Wheel } from 'assets/svg/wheel.svg';
+import { ReactComponent as Gui } from  'assets/svg/gui.svg';
 import { ReactComponent as Cameras } from 'assets/svg/cameras.svg';
 import { ReactComponent as TeamLogo } from 'assets/svg/team_logo.svg';
 import { SplashScreen, WsHandlerProvider, useLoadBackend } from 'common';

control-station/src/components/GuiModules/Module.module.scss

@@ -0,0 +1,119 @@
+.boxContainer1 {
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px; 
+    margin-bottom: 20px;
+}
+
+.boxContainer2 {
+    border: 2.5px solid #FFE7CF;
+    width: 80%;
+    height: 150px;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    position: relative;
+    background-color: white;
+}
+
+.boxContainer3 {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content:center;
+}
+
+.voltajeContainer {
+    border-right: #FFE7CF solid 2.5px;
+    width: 50%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.intensityContainer {
+    width: 50%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+}
+
+.h2Module {
+    color: #EF7E30;
+    font-family: 'IBM Plex Mono', monospace;
+    width: 100%;
+    background-color: #FFE7CF;
+    text-align: center;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    font-weight: bold;
+    position: absolute;
+    transform: translateY(-100%);
+}
+
+.titleDecorationModule {
+    text-align: center;
+    width: 100%;
+    border-top-left-radius: 20px;
+    border-top-right-radius:20px ;
+    height: 20px;
+}
+
+.h3 {
+    color: #EF7E30;
+    font-family: 'IBM Plex Mono', monospace;
+    margin: 0;
+}
+
+.p {
+    color: #EF7E30;
+    font-family: 'IBM Plex Mono', monospace;
+    background-color: #FFE7CF;
+    border-radius: 10px;
+    margin-top: 2.5px;
+    margin-bottom: 2.5px;
+    padding: 0px 0px 5px 6px;
+    width: 85%;
+}
+
+.flexCells {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 5px;
+    width: 90%;
+    border-radius: 20px;
+    border: 2.5px solid #FFE7CF;
+    padding: 10px;
+    margin-top: 10px;
+    background-color: white;
+}
+
+.cell {
+    width: 65px;
+    height: 30px;
+    border: 1px solid orange;
+    border-radius: 5px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .red {
+    background-color: red;
+  }
+
+  .yellow {
+    background-color: rgb(255, 255, 0);
+  }
+
+  .green {
+    background-color: rgb(33, 240, 33);
+  }
+

control-station/src/components/GuiModules/Module.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+import styles from "./Module.module.scss";
+import { useMeasurementsStore } from "common";
+
+interface CellProps {
+    value: number;
+}
+
+const Module: React.FC<{ id: string | number }> = ({ id }) => {
+    const numericInfo = useMeasurementsStore(
+        (state) => state.getNumericMeasurementInfo(`module/${id}`)
+    );
+
+    const [cellValues, setCellValues] = useState(Array(48).fill(0));
+
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            const newValue = numericInfo.getUpdate();
+            setCellValues((prev) => prev.map(() => newValue));
+        }, 1);
+
+        return () => clearInterval(intervalId);
+    }, [numericInfo]);
+
+    const getColorFromValue = (value: number, min: number | null, max: number | null) => {
+        if (min !== null && max !== null) {
+            if (value < min) return styles.red;
+            if (value > max) return styles.red;
+            if (value >= min && value <= max) return styles.green;
+        }
+        return styles.yellow;
+    };
+
+    const Cell: React.FC<CellProps> = ({ value }) => {
+        const colorClass = getColorFromValue(value, numericInfo.range[0], numericInfo.range[1]);
+        return <div className={`${styles.cell} ${colorClass}`}></div>;
+    };
+
+    return (
+        <div className={styles.boxContainer1}>
+            <div className={styles.boxContainer2}>
+                <article className={styles.titleDecorationModule}>
+                    <h2 className={styles.h2Module}>Module {id}</h2>
+                </article>
+                <div className={styles.boxContainer3}>
+                    <div className={styles.voltajeContainer}>
+                        <h3 className={styles.h3}>Voltage</h3>
+                        <p className={styles.p}>max: {numericInfo.range[1]} V</p>
+                        <p className={styles.p}>min: {numericInfo.range[0]} V</p>
+                        <p className={styles.p}>mean: {cellValues.reduce((a, b) => a + b, 0) / cellValues.length}</p>
+                    </div>
+                    <div className={styles.intensityContainer}>
+                        <h3 className={styles.h3}>Intensity</h3>
+                        <p className={styles.p}>max: {numericInfo.range[1]} A</p> 
+                        <p className={styles.p}>min: {numericInfo.range[0]} A</p>
+                    </div>
+                </div>
+            </div>
+            <div className={styles.flexCells}>
+                {cellValues.map((value, index) => (
+                    <Cell key={index} value={value} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Module;