Skip to content

Commit 3af27f3

Browse files
msanllimsanlli
authored
Merge pull request #219 from HyperloopUPV-H8/develop
v2.1.3
2 parents 3123a40 + a7351bc commit 3af27f3

20 files changed

Lines changed: 708 additions & 275 deletions

File tree

‎backend/package-lock.json‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "hyperloop-backend",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"scripts": {
6+
"start": "node index.js"
7+
},
8+
"author": "",
9+
"license": "ISC",
10+
"keywords": [],
11+
"description": ""
12+
}

‎common-front/lib/store/measurementsStore.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,6 @@ function createMeasurementsFromPodDataAdapter(
261261
}
262262
}
263263
}
264-
265264
return measurements;
266265
}
267266

‎control-station/package-lock.json‎

Lines changed: 36 additions & 31 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎control-station/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"react-redux": "^8.0.5",
2424
"react-router-dom": "^6.6.2",
2525
"react-use-websocket": "^4.3.1",
26-
"three": "^0.152.2"
26+
"three": "^0.159.0"
2727
},
2828
"devDependencies": {
2929
"@types/react": "^18.0.26",

‎control-station/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import 'styles/scrollbars.scss';
44
import styles from './App.module.scss';
55
import { Sidebar } from 'components/Sidebar/Sidebar';
66
import { ReactComponent as Wheel } from 'assets/svg/wheel.svg';
7+
import { ReactComponent as Gui } from 'assets/svg/gui.svg';
78
import { ReactComponent as Cameras } from 'assets/svg/cameras.svg';
89
import { ReactComponent as TeamLogo } from 'assets/svg/team_logo.svg';
910
import { SplashScreen, WsHandlerProvider, useLoadBackend } from 'common';

‎control-station/src/assets/svg/gui.svg‎

Lines changed: 4 additions & 0 deletions
Loading

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
.boxContainer1 {
2+
width: 90%;
3+
display: flex;
4+
flex-direction: column;
5+
justify-content: center;
6+
align-items: center;
7+
border-radius: 20px;
8+
margin-bottom: 20px;
9+
}
10+
11+
.boxContainer2 {
12+
border: 2.5px solid #FFE7CF;
13+
width: 80%;
14+
height: 150px;
15+
border-radius: 20px;
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
position: relative;
20+
background-color: white;
21+
}
22+
23+
.boxContainer3 {
24+
display: flex;
25+
flex-direction: row;
26+
width: 100%;
27+
justify-content:center;
28+
}
29+
30+
.voltajeContainer {
31+
border-right: #FFE7CF solid 2.5px;
32+
width: 50%;
33+
padding: 10px;
34+
display: flex;
35+
flex-direction: column;
36+
justify-content: center;
37+
}
38+
39+
.intensityContainer {
40+
width: 50%;
41+
padding: 10px;
42+
display: flex;
43+
flex-direction: column;
44+
justify-content: left;
45+
}
46+
47+
.h2Module {
48+
color: #EF7E30;
49+
font-family: 'IBM Plex Mono', monospace;
50+
width: 100%;
51+
background-color: #FFE7CF;
52+
text-align: center;
53+
border-top-left-radius: 20px;
54+
border-top-right-radius: 20px;
55+
font-weight: bold;
56+
position: absolute;
57+
transform: translateY(-100%);
58+
}
59+
60+
.titleDecorationModule {
61+
text-align: center;
62+
width: 100%;
63+
border-top-left-radius: 20px;
64+
border-top-right-radius:20px ;
65+
height: 20px;
66+
}
67+
68+
.h3 {
69+
color: #EF7E30;
70+
font-family: 'IBM Plex Mono', monospace;
71+
margin: 0;
72+
}
73+
74+
.p {
75+
color: #EF7E30;
76+
font-family: 'IBM Plex Mono', monospace;
77+
background-color: #FFE7CF;
78+
border-radius: 10px;
79+
margin-top: 2.5px;
80+
margin-bottom: 2.5px;
81+
padding: 0px 0px 5px 6px;
82+
width: 85%;
83+
}
84+
85+
.flexCells {
86+
display: grid;
87+
grid-template-columns: repeat(4, 1fr);
88+
gap: 5px;
89+
width: 90%;
90+
border-radius: 20px;
91+
border: 2.5px solid #FFE7CF;
92+
padding: 10px;
93+
margin-top: 10px;
94+
background-color: white;
95+
}
96+
97+
.cell {
98+
width: 65px;
99+
height: 30px;
100+
border: 1px solid orange;
101+
border-radius: 5px;
102+
text-align: center;
103+
display: flex;
104+
align-items: center;
105+
justify-content: center;
106+
}
107+
108+
.red {
109+
background-color: red;
110+
}
111+
112+
.yellow {
113+
background-color: rgb(255, 255, 0);
114+
}
115+
116+
.green {
117+
background-color: rgb(33, 240, 33);
118+
}
119+

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, { useEffect, useState } from "react";
2+
import styles from "./Module.module.scss";
3+
import { useMeasurementsStore } from "common";
4+
5+
interface CellProps {
6+
value: number;
7+
}
8+
9+
const Module: React.FC<{ id: string | number }> = ({ id }) => {
10+
const numericInfo = useMeasurementsStore(
11+
(state) => state.getNumericMeasurementInfo(`module/${id}`)
12+
);
13+
14+
const [cellValues, setCellValues] = useState(Array(48).fill(0));
15+
16+
useEffect(() => {
17+
const intervalId = setInterval(() => {
18+
const newValue = numericInfo.getUpdate();
19+
setCellValues((prev) => prev.map(() => newValue));
20+
}, 1);
21+
22+
return () => clearInterval(intervalId);
23+
}, [numericInfo]);
24+
25+
const getColorFromValue = (value: number, min: number | null, max: number | null) => {
26+
if (min !== null && max !== null) {
27+
if (value < min) return styles.red;
28+
if (value > max) return styles.red;
29+
if (value >= min && value <= max) return styles.green;
30+
}
31+
return styles.yellow;
32+
};
33+
34+
const Cell: React.FC<CellProps> = ({ value }) => {
35+
const colorClass = getColorFromValue(value, numericInfo.range[0], numericInfo.range[1]);
36+
return <div className={`${styles.cell} ${colorClass}`}></div>;
37+
};
38+
39+
return (
40+
<div className={styles.boxContainer1}>
41+
<div className={styles.boxContainer2}>
42+
<article className={styles.titleDecorationModule}>
43+
<h2 className={styles.h2Module}>Module {id}</h2>
44+
</article>
45+
<div className={styles.boxContainer3}>
46+
<div className={styles.voltajeContainer}>
47+
<h3 className={styles.h3}>Voltage</h3>
48+
<p className={styles.p}>max: {numericInfo.range[1]} V</p>
49+
<p className={styles.p}>min: {numericInfo.range[0]} V</p>
50+
<p className={styles.p}>mean: {cellValues.reduce((a, b) => a + b, 0) / cellValues.length}</p>
51+
</div>
52+
<div className={styles.intensityContainer}>
53+
<h3 className={styles.h3}>Intensity</h3>
54+
<p className={styles.p}>max: {numericInfo.range[1]} A</p>
55+
<p className={styles.p}>min: {numericInfo.range[0]} A</p>
56+
</div>
57+
</div>
58+
</div>
59+
<div className={styles.flexCells}>
60+
{cellValues.map((value, index) => (
61+
<Cell key={index} value={value} />
62+
))}
63+
</div>
64+
</div>
65+
);
66+
};
67+
68+
export default Module;

0 commit comments

Comments
 (0)