diff --git a/backend/package-lock.json b/backend/package-lock.json new file mode 100644 index 000000000..8f9553dbe --- /dev/null +++ b/backend/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "hyperloop-backend", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "hyperloop-backend", + "version": "1.0.0", + "license": "ISC" + } + } +} diff --git a/backend/package.json b/backend/package.json new file mode 100644 index 000000000..1d9f29dba --- /dev/null +++ b/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": "" +} diff --git a/common-front/lib/store/measurementsStore.ts b/common-front/lib/store/measurementsStore.ts index 841fc94da..315179d40 100644 --- a/common-front/lib/store/measurementsStore.ts +++ b/common-front/lib/store/measurementsStore.ts @@ -261,7 +261,6 @@ function createMeasurementsFromPodDataAdapter( } } } - return measurements; } diff --git a/control-station/package-lock.json b/control-station/package-lock.json index 7bd5eae11..4ba538e0b 100644 --- a/control-station/package-lock.json +++ b/control-station/package-lock.json @@ -20,7 +20,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", @@ -1795,9 +1795,10 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -2253,9 +2254,9 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", - "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true, "funding": [ { @@ -2263,6 +2264,7 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -2639,10 +2641,11 @@ } }, "node_modules/rollup": { - "version": "3.29.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", - "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "version": "3.29.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", + "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", "dev": true, + "license": "MIT", "bin": { "rollup": "dist/bin/rollup" }, @@ -2778,9 +2781,10 @@ "dev": true }, "node_modules/three": { - "version": "0.152.2", - "resolved": "https://registry.npmjs.org/three/-/three-0.152.2.tgz", - "integrity": "sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw==" + "version": "0.159.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.159.0.tgz", + "integrity": "sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA==", + "license": "MIT" }, "node_modules/three-mesh-bvh": { "version": "0.7.5", @@ -2981,10 +2985,11 @@ } }, "node_modules/vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.9", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.9.tgz", + "integrity": "sha512-qK9W4xjgD3gXbC0NmdNFFnVFLMWSNiR3swj957yutwzzN16xF/E7nmtAyp1rT9hviDroQANjE4HK3H4WqWdFtw==", "dev": true, + "license": "MIT", "dependencies": { "esbuild": "^0.18.10", "postcss": "^8.4.27", @@ -4245,9 +4250,9 @@ } }, "cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "requires": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -4611,9 +4616,9 @@ "dev": true }, "nanoid": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", - "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true }, "node-releases": { @@ -4869,9 +4874,9 @@ "dev": true }, "rollup": { - "version": "3.29.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", - "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "version": "3.29.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", + "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -4980,9 +4985,9 @@ "dev": true }, "three": { - "version": "0.152.2", - "resolved": "https://registry.npmjs.org/three/-/three-0.152.2.tgz", - "integrity": "sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw==" + "version": "0.159.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.159.0.tgz", + "integrity": "sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA==" }, "three-mesh-bvh": { "version": "0.7.5", @@ -5098,9 +5103,9 @@ "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==" }, "vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.9", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.9.tgz", + "integrity": "sha512-qK9W4xjgD3gXbC0NmdNFFnVFLMWSNiR3swj957yutwzzN16xF/E7nmtAyp1rT9hviDroQANjE4HK3H4WqWdFtw==", "dev": true, "requires": { "esbuild": "^0.18.10", diff --git a/control-station/package.json b/control-station/package.json index 4ea7130f4..94a8c1686 100644 --- a/control-station/package.json +++ b/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", diff --git a/control-station/src/App.tsx b/control-station/src/App.tsx index c54eaa759..b5c6182e3 100644 --- a/control-station/src/App.tsx +++ b/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'; diff --git a/control-station/src/assets/svg/gui.svg b/control-station/src/assets/svg/gui.svg new file mode 100644 index 000000000..e192de3f3 --- /dev/null +++ b/control-station/src/assets/svg/gui.svg @@ -0,0 +1,4 @@ + + + + diff --git a/control-station/src/components/GuiModules/Module.module.scss b/control-station/src/components/GuiModules/Module.module.scss new file mode 100644 index 000000000..86cd7a6b2 --- /dev/null +++ b/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); + } + \ No newline at end of file diff --git a/control-station/src/components/GuiModules/Module.tsx b/control-station/src/components/GuiModules/Module.tsx new file mode 100644 index 000000000..73152f0c5 --- /dev/null +++ b/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 = ({ value }) => { + const colorClass = getColorFromValue(value, numericInfo.range[0], numericInfo.range[1]); + return
; + }; + + return ( +
+
+
+

Module {id}

+
+
+
+

Voltage

+

max: {numericInfo.range[1]} V

+

min: {numericInfo.range[0]} V

+

mean: {cellValues.reduce((a, b) => a + b, 0) / cellValues.length}

+
+
+

Intensity

+

max: {numericInfo.range[1]} A

+

min: {numericInfo.range[0]} A

+
+
+
+
+ {cellValues.map((value, index) => ( + + ))} +
+
+ ); +}; + +export default Module; diff --git a/control-station/src/main.tsx b/control-station/src/main.tsx index eeaab8634..be3d31fc0 100644 --- a/control-station/src/main.tsx +++ b/control-station/src/main.tsx @@ -12,6 +12,7 @@ import './index.css'; import { vehicleRoute } from 'pages/VehiclePage/vehicleRoute'; import { camerasRoute } from 'pages/CamerasPage/camerasRoute'; import { tubeRoute } from 'pages/TubePage/tubeRoute'; +import { guiRoute } from 'pages/VehiclePage/GuiBoosterPage/guiRoute'; import { ConfigProvider, GlobalTicker } from 'common'; const router = createBrowserRouter([ @@ -23,6 +24,8 @@ const router = createBrowserRouter([ vehicleRoute, camerasRoute, tubeRoute, + guiRoute, + ], }, ]); diff --git a/control-station/src/pages/VehiclePage/Boards/OBCCU/OBCCUGeneralInfo.tsx b/control-station/src/pages/VehiclePage/Boards/OBCCU/OBCCUGeneralInfo.tsx index 3f0307ef2..63802a482 100644 --- a/control-station/src/pages/VehiclePage/Boards/OBCCU/OBCCUGeneralInfo.tsx +++ b/control-station/src/pages/VehiclePage/Boards/OBCCU/OBCCUGeneralInfo.tsx @@ -1,123 +1,123 @@ -import { - LcuMeasurements, - ObccuMeasurements, - useMeasurementsStore, -} from 'common'; -import { IndicatorStack } from 'components/IndicatorStack/IndicatorStack'; -import { StateIndicator } from 'components/StateIndicator/StateIndicator'; -import { Window } from 'components/Window/Window'; -import batteryIcon from 'assets/svg/battery-filled.svg'; -import thunderIcon from 'assets/svg/thunder-filled.svg'; -import { GaugeTag } from 'components/GaugeTag/GaugeTag'; -import pluggedIcon from 'assets/svg/plugged-icon.svg'; +// import { +// LcuMeasurements, +// ObccuMeasurements, +// useMeasurementsStore, +// } from 'common'; +// import { IndicatorStack } from 'components/IndicatorStack/IndicatorStack'; +// import { StateIndicator } from 'components/StateIndicator/StateIndicator'; +// import { Window } from 'components/Window/Window'; +// import batteryIcon from 'assets/svg/battery-filled.svg'; +// import thunderIcon from 'assets/svg/thunder-filled.svg'; +// import { GaugeTag } from 'components/GaugeTag/GaugeTag'; +// import pluggedIcon from 'assets/svg/plugged-icon.svg'; export const OBCCUGeneralInfo = () => { - const getNumericMeasurementInfo = useMeasurementsStore( - (state) => state.getNumericMeasurementInfo - ); +// const getNumericMeasurementInfo = useMeasurementsStore( +// (state) => state.getNumericMeasurementInfo +// ); - const totalVoltageHigh = getNumericMeasurementInfo( - ObccuMeasurements.totalVoltageHigh - ); - const dischargeCurrent = getNumericMeasurementInfo( - ObccuMeasurements.dischargeCurrent - ); +// const totalVoltageHigh = getNumericMeasurementInfo( +// ObccuMeasurements.totalVoltageHigh +// ); +// const dischargeCurrent = getNumericMeasurementInfo( +// ObccuMeasurements.dischargeCurrent +// ); - const mainOutputVoltage = getNumericMeasurementInfo( - ObccuMeasurements.outputVoltage - ); - const individualOutputVoltages = [ - getNumericMeasurementInfo(LcuMeasurements.busVoltage1), - getNumericMeasurementInfo(LcuMeasurements.busVoltage2), - getNumericMeasurementInfo(LcuMeasurements.busVoltage3), - getNumericMeasurementInfo(LcuMeasurements.busVoltage4), - getNumericMeasurementInfo(LcuMeasurements.busVoltage5), - getNumericMeasurementInfo(LcuMeasurements.busVoltage6), - getNumericMeasurementInfo(LcuMeasurements.busVoltage7), - getNumericMeasurementInfo(LcuMeasurements.busVoltage8), - getNumericMeasurementInfo(LcuMeasurements.busVoltage9), - getNumericMeasurementInfo(LcuMeasurements.busVoltage10), - ]; +// const mainOutputVoltage = getNumericMeasurementInfo( +// ObccuMeasurements.outputVoltage +// ); +// const individualOutputVoltages = [ +// getNumericMeasurementInfo(LcuMeasurements.busVoltage1), +// getNumericMeasurementInfo(LcuMeasurements.busVoltage2), +// getNumericMeasurementInfo(LcuMeasurements.busVoltage3), +// getNumericMeasurementInfo(LcuMeasurements.busVoltage4), +// getNumericMeasurementInfo(LcuMeasurements.busVoltage5), +// getNumericMeasurementInfo(LcuMeasurements.busVoltage6), +// getNumericMeasurementInfo(LcuMeasurements.busVoltage7), +// getNumericMeasurementInfo(LcuMeasurements.busVoltage8), +// getNumericMeasurementInfo(LcuMeasurements.busVoltage9), +// getNumericMeasurementInfo(LcuMeasurements.busVoltage10), +// ]; - return ( - -
-
-
- - -
+// return ( +// +//
+//
+//
+// +// +//
- - - - +// +// +// +// -
- - individualOutputVoltages.reduce( - (prev, curr) => prev + curr.getUpdate(), - 0 - ) / individualOutputVoltages.length - } - strokeWidth={120} - min={mainOutputVoltage.warningRange[0] ?? 225} - max={mainOutputVoltage.warningRange[1] ?? 252} - /> -
-
-
- - ); +//
+// +// individualOutputVoltages.reduce( +// (prev, curr) => prev + curr.getUpdate(), +// 0 +// ) / individualOutputVoltages.length +// } +// strokeWidth={120} +// min={mainOutputVoltage.warningRange[0] ?? 225} +// max={mainOutputVoltage.warningRange[1] ?? 252} +// /> +//
+//
+//
+// +// ); }; diff --git a/control-station/src/pages/VehiclePage/Boards/VCU/VCUBrakesInfo.tsx b/control-station/src/pages/VehiclePage/Boards/VCU/VCUBrakesInfo.tsx index b690e53af..872893efe 100644 --- a/control-station/src/pages/VehiclePage/Boards/VCU/VCUBrakesInfo.tsx +++ b/control-station/src/pages/VehiclePage/Boards/VCU/VCUBrakesInfo.tsx @@ -1,128 +1,110 @@ -import styles from './VCU.module.scss'; -import { Window } from 'components/Window/Window'; -import { useMeasurementsStore, VcuMeasurements } from 'common'; -import { IndicatorStack } from 'components/IndicatorStack/IndicatorStack'; -import { BarIndicator } from 'components/BarIndicator/BarIndicator'; -import pressureIcon from 'assets/svg/pressure-filled.svg'; -import { BrakeVisualizer } from 'components/BrakeVisualizer/BrakeVisualizer'; -import { StateIndicator } from 'components/StateIndicator/StateIndicator'; +// import styles from './VCU.module.scss'; +// import { Window } from 'components/Window/Window'; +// import { useMeasurementsStore, VcuMeasurements } from 'common'; +// import { IndicatorStack } from 'components/IndicatorStack/IndicatorStack'; +// import { BarIndicator } from 'components/BarIndicator/BarIndicator'; +// import pressureIcon from 'assets/svg/pressure-filled.svg'; +// import { BrakeVisualizer } from 'components/BrakeVisualizer/BrakeVisualizer'; +// import { StateIndicator } from 'components/StateIndicator/StateIndicator'; export const VCUBrakesInfo = () => { - const getNumericMeasurementInfo = useMeasurementsStore( - (state) => state.getNumericMeasurementInfo - ); - const getEnumMeasurementInfo = useMeasurementsStore( - (state) => state.getEnumMeasurementInfo - ); - const reed1 = getEnumMeasurementInfo(VcuMeasurements.reed1); - const reed2 = getEnumMeasurementInfo(VcuMeasurements.reed2); - const reed3 = getEnumMeasurementInfo(VcuMeasurements.reed3); - const reed4 = getEnumMeasurementInfo(VcuMeasurements.reed4); - const highPressure = getNumericMeasurementInfo( - VcuMeasurements.highPressure - ); - const lowPressure1 = getNumericMeasurementInfo( - VcuMeasurements.lowPressure1 - ); - const lowPressure2 = getNumericMeasurementInfo( - VcuMeasurements.lowPressure2 - ); - const referencePressure = getNumericMeasurementInfo( - VcuMeasurements.referencePressure - ); +// const getNumericMeasurementInfo = useMeasurementsStore( +// (state) => state.getNumericMeasurementInfo +// ); +// const getEnumMeasurementInfo = useMeasurementsStore( +// (state) => state.getEnumMeasurementInfo +// ); +// const reed1 = getEnumMeasurementInfo(VcuMeasurements.reed1); +// const reed2 = getEnumMeasurementInfo(VcuMeasurements.reed2); +// const reed3 = getEnumMeasurementInfo(VcuMeasurements.reed3); +// const reed4 = getEnumMeasurementInfo(VcuMeasurements.reed4); +// const highPressure = getNumericMeasurementInfo(VcuMeasurements.highPressure); +// const lowPressure1 = getNumericMeasurementInfo(VcuMeasurements.lowPressure1); +// const lowPressure2 = getNumericMeasurementInfo(VcuMeasurements.lowPressure2); +// const referencePressure = getNumericMeasurementInfo( +// VcuMeasurements.referencePressure +// ); - return ( - -
-
-
- - -
-
- - -
-
+// return ( +// +//
+//
+//
+// +// +//
+//
+// +// +//
+//
- {/* - - - */} +// +// +// +// - - - - - - - -
- - ); +// +// +// +// +// +// +// +//
+// +// ); }; diff --git a/control-station/src/pages/VehiclePage/Data1Page/Data1Page.tsx b/control-station/src/pages/VehiclePage/Data1Page/Data1Page.tsx index 814dd170f..7327cc032 100644 --- a/control-station/src/pages/VehiclePage/Data1Page/Data1Page.tsx +++ b/control-station/src/pages/VehiclePage/Data1Page/Data1Page.tsx @@ -15,7 +15,7 @@ export const Data1Page = () => { return (
-
+ {/*
@@ -35,7 +35,7 @@ export const Data1Page = () => {
-
+
*/}
); }; diff --git a/control-station/src/pages/VehiclePage/GuiBoosterPage/GuiPage.module.scss b/control-station/src/pages/VehiclePage/GuiBoosterPage/GuiPage.module.scss new file mode 100644 index 000000000..4a8d211d5 --- /dev/null +++ b/control-station/src/pages/VehiclePage/GuiBoosterPage/GuiPage.module.scss @@ -0,0 +1,120 @@ +.header{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.boosterMainContainer{ + display: flex; + justify-content: start; + align-items: start; + width: 100%; +} + +.boosterContainer { + width: 150vh; + background-color: white; + border-radius: 20px; + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + box-sizing: border-box; + margin: 20px; +} + +.statusContainer { + width: 100%; + display: flex; + justify-content: center; + margin: 20px; +} + +.status { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + border: 2.5px solid #FFE7CF; + border-radius: 20px; + width: 95%; + text-align: center; + background-color: #FFF7EC; + color: #EF7E30; + font-family: 'IBM Plex Mono', monospace; +} + +.value { + border: 1.5px solid #EF7E30; + border-radius: 1.2rem; + width: 12%; + height: 50px; + font-size: 25px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.modulesContainer { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + width: 100%; +} + +h1 { + padding-left: 20px; + padding-top: 20px; +} + +.boosterDecorationLine { + flex: 2; + border-bottom: 2.5px solid #C6DCE9; + margin-top: 20px; + margin-left: 40px; +} + +h2 { + font-size: 25px; +} + +h3 { + font-size: 20px; +} + +p { + font-size: 15px; +} + +.main { + display: flex; + flex-direction: row; +} + +.messagesAndOrders { + margin-top: 20px; +} + +.orders { + text-align: center; + border-radius: 20px; + padding-top: 20px; + margin-top: 20px; + width: 100%; + height: 80px; +} + +.voltageValueContainer { + display: inline-block; + padding: 5px 10px; + border: 1px solid #EF7E30; + border-radius: 15px; +} + +.voltageValue { + font-size: 1.2rem; + font-weight: bold; +} diff --git a/control-station/src/pages/VehiclePage/GuiBoosterPage/GuiPage.tsx b/control-station/src/pages/VehiclePage/GuiBoosterPage/GuiPage.tsx new file mode 100644 index 000000000..5f8b263fa --- /dev/null +++ b/control-station/src/pages/VehiclePage/GuiBoosterPage/GuiPage.tsx @@ -0,0 +1,93 @@ +import { useEffect, useState } from "react"; +import styles from "./GuiPage.module.scss"; +import Module from "../../../components/GuiModules/Module"; +import { Messages } from "../Messages/Messages"; +import { Orders, useMeasurementsStore } from "common"; + +interface ModuleData { + id: number | string; + name: string; +}; + +const modules: ModuleData[] = [ + { id: 1, name: "Module 1" }, + { id: 2, name: "Module 2" }, + { id: 3, name: "Module 3" }, +]; + +export function GuiPage() { + + const voltageTotalMeasurement = useMeasurementsStore((state) => + state.getNumericMeasurementInfo("total_voltage_high") + ); + + const bcuVoltageMeasurement = useMeasurementsStore((state) => + state.getNumericMeasurementInfo("vdc") + ); + + const constStatusMeasurement = useMeasurementsStore((state) => + state.getBooleanMeasurementInfo("const_status") + ); + + const [voltageTotal, setVoltageTotal] = useState(null); + const [bcuVoltage, setBcuVoltage] = useState(null); + const [constStatus, setConstStatus] = useState(false); + + useEffect(() => { + // (VER) + setVoltageTotal(voltageTotalMeasurement?.getUpdate() || null); + setConstStatus(constStatusMeasurement.getUpdate()); + }, [voltageTotalMeasurement, constStatusMeasurement]); + + useEffect(() => { + if (bcuVoltageMeasurement?.getUpdate) { + const newValue = bcuVoltageMeasurement.getUpdate(); + console.log("Nuevo valor BCU Voltage:", newValue); + setBcuVoltage(newValue); + } + }, [bcuVoltageMeasurement]); + + return ( +
+
+

Booster GUI

+
+
+
+
+
+
+

V total:

+
+ {voltageTotal} V +
+ +

BCU status:

+
+ {bcuVoltage} V +
+ +

CONST status:

+
+ {constStatus ? "On" : "Off"} {/* Muestra On/Off para el estado de los contactores */} +
+
+
+
+ {modules.map((module) => ( + + ))} +
+
+
+
+ +
+ +
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/control-station/src/pages/VehiclePage/GuiBoosterPage/guiRoute.tsx b/control-station/src/pages/VehiclePage/GuiBoosterPage/guiRoute.tsx new file mode 100644 index 000000000..5efff228c --- /dev/null +++ b/control-station/src/pages/VehiclePage/GuiBoosterPage/guiRoute.tsx @@ -0,0 +1,5 @@ +import { GuiPage } from "./GuiPage"; +export const guiRoute = { + path: "/guiBooster", + element: , +}; diff --git a/control-station/src/pages/VehiclePage/VehiclePage.tsx b/control-station/src/pages/VehiclePage/VehiclePage.tsx index af0d825fb..27cea023a 100644 --- a/control-station/src/pages/VehiclePage/VehiclePage.tsx +++ b/control-station/src/pages/VehiclePage/VehiclePage.tsx @@ -21,7 +21,7 @@ export const VehiclePage = () => {
- +
diff --git a/control-station/src/pages/VehiclePage/vehicleRoute.tsx b/control-station/src/pages/VehiclePage/vehicleRoute.tsx index 8fa85d7ff..cd7851c97 100644 --- a/control-station/src/pages/VehiclePage/vehicleRoute.tsx +++ b/control-station/src/pages/VehiclePage/vehicleRoute.tsx @@ -2,13 +2,14 @@ import { Data1Page } from './Data1Page/Data1Page'; import { Data2Page } from './Data2Page/Data2Page'; import { VehiclePage } from './VehiclePage'; import { Navigate } from 'react-router-dom'; - +import { GuiPage } from './GuiBoosterPage/GuiPage'; export const vehicleRoute = { path: '/vehicle', element: , children: [ - { path: '', element: }, + { path: '', element: }, { path: 'data-1', element: }, { path: 'data-2', element: }, + { path: 'guiBooster', element: }, ], }; diff --git a/ethernet-view/src/components/MessagesContainer/Messages/Messages.module.scss b/ethernet-view/src/components/MessagesContainer/Messages/Messages.module.scss index 9fe5b4f88..5ac818e20 100644 --- a/ethernet-view/src/components/MessagesContainer/Messages/Messages.module.scss +++ b/ethernet-view/src/components/MessagesContainer/Messages/Messages.module.scss @@ -10,10 +10,12 @@ flex: 1 1 0; display: flex; flex-direction: column; + align-items: start; gap: 0.6rem; min-height: 0; overflow-y: auto; height: 100%; + } .buttons { diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..d2884ea89 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "software", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}