Skip to content

Commit 948ae7c

Browse files
ariadnatpariadnatp
authored
Merge pull request #246 from HyperloopUPV-H8/control-station/gui-booster
[control station] gui booster v1
2 parents 53a8e6d + 10c2829 commit 948ae7c

10 files changed

Lines changed: 366 additions & 201 deletions

File tree

‎backend/cmd/adj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit fd87ad3fac5aa62e7b274b5ae00412caa544c0a0

‎control-station/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const App = () => {
2121
items={[
2222
{ path: '/vehicle', icon: <Wheel /> },
2323
{ path: '/cameras', icon: <Cameras /> },
24+
{ path: '/guiBooster', icon: <Gui /> }
2425
]}
2526
/>
2627
<Outlet />

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

Lines changed: 107 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,106 @@
11
.boxContainer1 {
2-
width: 90%;
2+
width: 40%;
33
display: flex;
44
flex-direction: column;
55
justify-content: center;
66
align-items: center;
7-
border-radius: 20px;
8-
margin-bottom: 20px;
9-
}
10-
11-
.boxContainer2 {
7+
border-radius: 20px;
8+
}
9+
10+
.boxContainer2 {
1211
border: 2.5px solid #FFE7CF;
13-
width: 80%;
14-
height: 150px;
12+
width: 65%;
13+
height: 130px;
1514
border-radius: 20px;
1615
display: flex;
1716
flex-direction: column;
18-
align-items: center;
17+
align-items: stretch;
1918
position: relative;
2019
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-
}
20+
box-sizing: border-box;
21+
padding-top: 20px;
4622

47-
.h2Module {
23+
}
24+
25+
.h2Module {
4826
color: #EF7E30;
4927
font-family: 'IBM Plex Mono', monospace;
5028
width: 100%;
29+
height: 30px;
5130
background-color: #FFE7CF;
5231
text-align: center;
5332
border-top-left-radius: 20px;
5433
border-top-right-radius: 20px;
5534
font-weight: bold;
5635
position: absolute;
57-
transform: translateY(-100%);
58-
}
36+
transform: translateY(-165%);
37+
padding-top: 1px;
38+
padding-bottom: 10px;
39+
box-sizing: border-box;
40+
}
5941

60-
.titleDecorationModule {
61-
text-align: center;
42+
.voltajeContainer {
6243
width: 100%;
44+
padding: 0 10px;
45+
display: flex;
46+
flex-direction: column;
47+
justify-content: center;
48+
height: 190px;
49+
box-sizing: border-box;
50+
}
51+
52+
.titleDecorationModule {
53+
text-align: center;
6354
border-top-left-radius: 20px;
6455
border-top-right-radius:20px ;
65-
height: 20px;
66-
}
67-
68-
.h3 {
56+
}
57+
58+
.h3 {
6959
color: #EF7E30;
7060
font-family: 'IBM Plex Mono', monospace;
71-
margin: 0;
72-
}
73-
74-
.p {
61+
margin: 2px 0; /* Reducido el margen vertical */
62+
}
63+
64+
.dataStyle {
7565
color: #EF7E30;
7666
font-family: 'IBM Plex Mono', monospace;
67+
font-size: 0.9rem;
68+
display: flex;
69+
flex-direction: row;
70+
align-items: center;
71+
}
72+
.p{
73+
color: #EF7E30;
74+
font-family: 'IBM Plex Mono', monospace;
75+
font-size: 1rem;
76+
margin-top: 1px;
77+
margin-bottom: 1px;
78+
padding: 5px 10px;
7779
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 {
80+
border-radius: 20px;
81+
width: fit-content;
82+
align-items: center;
83+
box-sizing: border-box;
84+
margin-left: auto;
85+
}
86+
87+
.flexCells {
8688
display: grid;
8789
grid-template-columns: repeat(4, 1fr);
88-
gap: 5px;
89-
width: 90%;
90+
gap: 9px;
91+
justify-content: center;
92+
align-items: center;
93+
width: fit-content;
94+
margin: 5 auto;
9095
border-radius: 20px;
9196
border: 2.5px solid #FFE7CF;
9297
padding: 10px;
9398
margin-top: 10px;
9499
background-color: white;
95-
}
96-
97-
.cell {
100+
}
101+
102+
103+
.cell {
98104
width: 65px;
99105
height: 30px;
100106
border: 1px solid orange;
@@ -109,11 +115,47 @@
109115
background-color: red;
110116
}
111117

112-
.yellow {
113-
background-color: rgb(255, 255, 0);
114-
}
115-
116118
.green {
117119
background-color: rgb(33, 240, 33);
118120
}
119-
121+
122+
.lightOrange1 {
123+
background-color: #FFA500;
124+
}
125+
126+
.lightOrange2 {
127+
background-color: #FFCC80;
128+
}
129+
130+
.voltageTotal {
131+
display: inline-block;
132+
width: 100%;
133+
display: flex;
134+
flex-direction: row;
135+
align-items: center;
136+
text-align: center;
137+
border-radius: 15px;
138+
background-color: #FFE7CF;
139+
font-size: 0.8rem;
140+
color: #EF7E30;
141+
font-family: 'IBM Plex Mono', monospace;
142+
box-sizing: border-box;
143+
}
144+
145+
.value {
146+
height: 50px;
147+
font-size: 25px;
148+
display: flex;
149+
justify-content: center;
150+
align-items: center;
151+
text-align: center;
152+
}
153+
154+
.moduleInfoLabel {
155+
color: #EF7E30;
156+
font-family: 'IBM Plex Mono', monospace;
157+
font-size: 0.9rem;
158+
width: 50%;
159+
text-align: left;
160+
margin: 0px;
161+
}

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

Lines changed: 70 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,89 @@
11
import React, { useEffect, useState } from "react";
22
import styles from "./Module.module.scss";
3+
34
import { useMeasurementsStore } from "common";
45

56
interface CellProps {
6-
value: number;
7+
value: number;
8+
min: number;
9+
max: number;
710
}
811

912
const Module: React.FC<{ id: string | number }> = ({ id }) => {
10-
const numericInfo = useMeasurementsStore(
11-
(state) => state.getNumericMeasurementInfo(`module/${id}`)
12-
);
13+
const moduleMinCell = useMeasurementsStore(
14+
(state) => (state.getNumericMeasurementInfo(`module_${id}_min_cell`)?.getUpdate() ?? 0)
15+
);
16+
const moduleMaxCell = useMeasurementsStore(
17+
(state) => (state.getNumericMeasurementInfo(`module_${id}_max_cell`)?.getUpdate() ?? 0)
18+
);
1319

14-
const [cellValues, setCellValues] = useState(Array(48).fill(0));
20+
const moduleTotalVoltage = useMeasurementsStore(
21+
(state) => (state.getNumericMeasurementInfo(`module_${id}_voltage`)?.getUpdate() ?? 0)
22+
);
1523

16-
useEffect(() => {
17-
const intervalId = setInterval(() => {
18-
const newValue = numericInfo.getUpdate();
19-
setCellValues((prev) => prev.map(() => newValue));
20-
}, 1);
24+
// Estado para las celdas
25+
const [cellValues, setCellValues] = useState<number[]>(Array(48).fill(0)); // Define el tipo correctamente
2126

22-
return () => clearInterval(intervalId);
23-
}, [numericInfo]);
27+
useEffect(() => {
28+
const intervalId = setInterval(() => {
29+
setCellValues(() =>
30+
Array.from({ length: 48 }, (_, i) => {
31+
const variableName = `module_${id}_cell_${i + 1}_voltage`;
32+
return useMeasurementsStore.getState().getNumericMeasurementInfo(variableName)?.getUpdate() ?? 0;
33+
})
34+
);
35+
}, 100);
2436

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-
};
37+
return () => clearInterval(intervalId);
38+
}, [id]);
3339

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-
};
40+
const getColorFromValue = (value: number, min: number, max: number) => {
41+
if (value < min) return styles.red;
42+
if (value > max) return styles.red;
43+
if (value >= min && value <= max) return styles.green;
44+
return styles.yellow;
45+
};
3846

47+
const Cell: React.FC<CellProps> = ({ value, min, max }) => {
48+
const colorClass = getColorFromValue(value, min, max);
3949
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>
50+
<div
51+
className={`${styles.cell} ${colorClass}`}
52+
title={`${value.toFixed(3)} V`}
53+
></div>
6554
);
55+
};
56+
57+
return (
58+
<div className={styles.boxContainer1}>
59+
<div className={styles.boxContainer2}>
60+
<article className={styles.titleDecorationModule}>
61+
<h2 className={styles.h2Module}>Module {id}</h2>
62+
</article>
63+
64+
<div className={styles.voltajeContainer}>
65+
<div className={styles.dataStyle}>
66+
<p className={styles.moduleInfoLabel}>max:</p>
67+
<p className={styles.p}>{`${moduleMaxCell} V`}</p>
68+
</div>
69+
<div className={styles.dataStyle}>
70+
<p className={styles.moduleInfoLabel}>min:</p>
71+
<p className={styles.p}>{`${moduleMinCell} V`}</p>
72+
</div>
73+
<div className={styles.dataStyle}>
74+
<p className={styles.moduleInfoLabel}>total:</p>
75+
<p className={styles.p}>{`${moduleTotalVoltage} V`}</p>
76+
</div>
77+
</div>
78+
</div>
79+
<div className={styles.flexCells}>
80+
{cellValues.map((value, index) => (
81+
<Cell key={index} value={value} min={moduleMinCell} max={moduleMaxCell} />
82+
))}
83+
</div>
84+
</div>
85+
);
6686
};
6787

6888
export default Module;
89+

‎control-station/src/components/Window/Window.module.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
border-radius: 0.8rem;
88
filter: var(--shadow);
99
overflow: hidden;
10+
width: 100%;
1011
}
1112

1213
.header {
@@ -24,4 +25,5 @@
2425
background-color: colors.getColor('primary', 99);
2526
overflow: scroll;
2627
height: 100%;
28+
width: 100%;
2729
}

‎control-station/src/main.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ const router = createBrowserRouter([
2525
camerasRoute,
2626
tubeRoute,
2727
guiRoute,
28-
2928
],
3029
},
3130
]);

0 commit comments

Comments
 (0)