Skip to content

Commit

Permalink
changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@adenjonah
adenjonah committed May 20, 2024
1 parent e9679f6 commit 89426f1
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 38 deletions.
10 changes: 7 additions & 3 deletions src/components/StreamComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; // Import Link from react-router-dom
import NoVid from "./../assets/Images/NoVid.png";
import './streamcomponent.css'; // Import the CSS file

const StreamComponent = () => {
const StreamComponent = ({ evNumber }) => {
const videoRef = useRef(null);
const [isConnected, setIsConnected] = useState(true);
const [HOLO_IP, setHOLO_IP] = useState(null); // Initialize HOLO_IP as null
Expand All @@ -13,13 +13,17 @@ const StreamComponent = () => {
fetch('http://localhost:8000/get_config')
.then(response => response.json())
.then(data => {
setHOLO_IP(data.HOLO_IP); // Set HOLO_IP from fetched data
if (evNumber === 1) {
setHOLO_IP(data.EV1_HOLO_IP); // Set EV1_HOLO_IP from fetched data
} else if (evNumber === 2) {
setHOLO_IP(data.EV2_HOLO_IP); // Set EV2_HOLO_IP from fetched data
}
})
.catch(error => {
console.error('Error fetching configuration:', error);
setIsConnected(false); // Set isConnected to false on error
});
}, []);
}, [evNumber]);

useEffect(() => {
if (videoRef.current && HOLO_IP) { // Check if HOLO_IP is available
Expand Down
56 changes: 46 additions & 10 deletions src/pages/constant/EVData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,58 @@ const EVData = ({ evNumber }) => {

const evaData = allData.telemetry.telemetry[`eva${evNumber}`];

// List of parameters and values in desired order
const parameterList = [
{ key: 'batt_time_left', label: 'Battery Time Left' },
{ key: 'oxy_pri_storage', label: 'Oxygen Primary Storage' },
{ key: 'oxy_sec_storage', label: 'Oxygen Secondary Storage' },
{ key: 'oxy_pri_pressure', label: 'Oxygen Primary Pressure' },
{ key: 'oxy_sec_pressure', label: 'Oxygen Secondary Pressure' },
{ key: 'oxy_time_left', label: 'Oxygen Time Left' },
{ key: 'heart_rate', label: 'Heart Rate' },
{ key: 'oxy_consumption', label: 'Oxygen Consumption' },
{ key: 'co2_production', label: 'CO2 Production' },
{ key: 'suit_pressure_oxy', label: 'Suit Pressure O2' },
{ key: 'suit_pressure_co2', label: 'Suit Pressure CO2' },
{ key: 'suit_pressure_other', label: 'Suit Pressure Other' },
{ key: 'suit_pressure_total', label: 'Suit Pressure Total' },
{ key: 'fan_pri_rpm', label: 'Fan Primary RPM' },
{ key: 'fan_sec_rpm', label: 'Fan Secondary RPM' },
{ key: 'helmet_pressure_co2', label: 'Helmet Pressure CO2' },
{ key: 'scrubber_a_co2_storage', label: 'Scrubber A CO2 Storage' },
{ key: 'scrubber_b_co2_storage', label: 'Scrubber B CO2 Storage' },
{ key: 'temperature', label: 'Temperature' },
{ key: 'coolant_ml', label: 'Coolant ml' },
{ key: 'coolant_gas_pressure', label: 'Coolant Gas Pressure' },
{ key: 'coolant_liquid_pressure', label: 'Coolant Liquid Pressure' },
];

// Split the parameter list into two columns
const midIndex = Math.ceil(parameterList.length / 2);
const firstColumn = parameterList.slice(0, midIndex);
const secondColumn = parameterList.slice(midIndex);

return (
<div className="ev-container">
<h2>EV{evNumber} Data</h2>
<div className="ev-table-container">
<table className="ev-table">
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{Object.entries(evaData).map(([key, value]) => (
<tr key={key}>
<td>{key}</td>
<td>{value}</td>
{firstColumn.map((param, index) => (
<tr key={param.key}>
<td>{param.label}</td>
<td>{evaData[param.key]}</td>
{secondColumn[index] ? (
<>
<td>{secondColumn[index].label}</td>
<td>{evaData[secondColumn[index].key]}</td>
</>
) : (
<>
<td></td>
<td></td>
</>
)}
</tr>
))}
</tbody>
Expand Down
17 changes: 14 additions & 3 deletions src/pages/constant/constant.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ function Constant() {
const [hasError, setHasError] = useState(false);
const [isAlertModalVisible, setAlertModalVisible] = useState(false);
const [isMapModalVisible, setMapModalVisible] = useState(false);
const [selectedEV, setSelectedEV] = useState(parseInt(localStorage.getItem('selectedEV')) || 1); // State variable for selected EV

useEffect(() => {
const fetchTelemetryData = () => {
Expand Down Expand Up @@ -86,6 +87,13 @@ function Constant() {
hideAlertModal();
};

const handleToggleEV = () => {
const newEV = selectedEV === 1 ? 2 : 1;
localStorage.setItem('selectedEV', newEV);
setSelectedEV(newEV);
window.location.reload(); // Refresh the page on switch
};

return (
<GlobalProvider>
<div className="pagecontainer" id="constantpage">
Expand All @@ -97,17 +105,20 @@ function Constant() {
/>
)}
<div className="top-half">
<div id="HMDStream"><StreamComponent /></div>
<div id="HMDStream"><StreamComponent evNumber={selectedEV} /></div>
<div id="centerbar">
<div className='centerButton' id='Alert' onClick={showAlertModal}>Alert</div>
<div className='centerButton' id='MapButton' onClick={showMapModal}>Map</div>
<div className='centerButton' id='ToggleEV' onClick={handleToggleEV}>
{selectedEV === 1 ? 'Switch to EV2' : 'Switch to EV1'}
</div>
</div>
<div id="RoverStream"><RoverCam /></div>
</div>
<div className="bottom-half">
<div id="EV1"><EVData evNumber={1} /></div>
<div id="EV"><EVData evNumber={selectedEV} /></div>
<div id="ConstantMap"><MapboxComponent /></div>
<div id="EV2"><EVData evNumber={2} /></div>
<div id="UIADCU">UIA DCU DATA</div>
</div>
<Modal
isVisible={isAlertModalVisible}
Expand Down
82 changes: 60 additions & 22 deletions src/pages/focus/setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,23 @@ import mapboxgl from "mapbox-gl/dist/mapbox-gl.js"; // Import mapboxgl here

function Setup() {
const [tssIP, setTssIP] = useState('');
const [holoIP, setHoloIP] = useState('');
const [ev1HoloIP, setEv1HoloIP] = useState('');
const [ev2HoloIP, setEv2HoloIP] = useState('');
const [mapBoxAPI, setMapBoxAPI] = useState('');
const [serverIP, setServerIP] = useState('');
const [ev1TeamID, setEv1TeamID] = useState('');
const [ev2TeamID, setEv2TeamID] = useState('');
const [roverIP, setRoverIP] = useState('');

const [tssIPStatus, setTssIPStatus] = useState('yellow');
const [holoIPStatus, setHoloIPStatus] = useState('yellow');
const [ev1HoloIPStatus, setEv1HoloIPStatus] = useState('yellow');
const [ev2HoloIPStatus, setEv2HoloIPStatus] = useState('yellow');
const [serverIPStatus, setServerIPStatus] = useState('yellow');
const [mapBoxAPIStatus, setMapBoxAPIStatus] = useState('yellow');

const [showTssIPModal, setShowTssIPModal] = useState(false);
const [showHoloIPModal, setShowHoloIPModal] = useState(false);
const [showEv1HoloIPModal, setShowEv1HoloIPModal] = useState(false);
const [showEv2HoloIPModal, setShowEv2HoloIPModal] = useState(false);
const [showServerIPModal, setShowServerIPModal] = useState(false);
const [showMapBoxAPIModal, setShowMapBoxAPIModal] = useState(false);

Expand All @@ -29,15 +32,17 @@ function Setup() {
const response = await fetch('http://localhost:8000/get_config');
const config = await response.json();
setTssIP(config.TSS_IP);
setHoloIP(config.HOLO_IP);
setEv1HoloIP(config.EV1_HOLO_IP);
setEv2HoloIP(config.EV2_HOLO_IP);
setMapBoxAPI(config.MAPBOX_KEY);
setServerIP(config.SERVER_IP);
setEv1TeamID(config.EV1_TEAM_ID);
setEv2TeamID(config.EV2_TEAM_ID);
setRoverIP(config.ROVER_IP);

checkConnection(config.TSS_IP, setTssIPStatus, 'tss_ip');
checkConnection(config.HOLO_IP, setHoloIPStatus, 'holo_ip');
checkConnection(config.EV1_HOLO_IP, setEv1HoloIPStatus, 'ev1_holo_ip');
checkConnection(config.EV2_HOLO_IP, setEv2HoloIPStatus, 'ev2_holo_ip');
checkConnection(config.SERVER_IP, setServerIPStatus, 'server_ip');
// Check Mapbox API Key
checkMapboxAPIKey(config.MAPBOX_KEY);
Expand Down Expand Up @@ -75,7 +80,8 @@ function Setup() {
console.log(result.message);

if (newConfig.TSS_IP) checkConnection(newConfig.TSS_IP, setTssIPStatus, 'tss_ip');
if (newConfig.HOLO_IP) checkConnection(newConfig.HOLO_IP, setHoloIPStatus, 'holo_ip');
if (newConfig.EV1_HOLO_IP) checkConnection(newConfig.EV1_HOLO_IP, setEv1HoloIPStatus, 'ev1_holo_ip');
if (newConfig.EV2_HOLO_IP) checkConnection(newConfig.EV2_HOLO_IP, setEv2HoloIPStatus, 'ev2_holo_ip');
if (newConfig.SERVER_IP) checkConnection(newConfig.SERVER_IP, setServerIPStatus, 'server_ip');
if (newConfig.MAPBOX_KEY) {
checkMapboxAPIKey(newConfig.MAPBOX_KEY);
Expand Down Expand Up @@ -118,7 +124,8 @@ function Setup() {
updateConfigOnServer({
TSS_IP: inputTSS_IP,
MAPBOX_KEY: mapBoxAPI,
HOLO_IP: holoIP,
EV1_HOLO_IP: ev1HoloIP,
EV2_HOLO_IP: ev2HoloIP,
SERVER_IP: serverIP,
EV1_TEAM_ID: ev1TeamID,
EV2_TEAM_ID: ev2TeamID,
Expand All @@ -132,21 +139,38 @@ function Setup() {
updateConfigOnServer({
TSS_IP: tssIP,
MAPBOX_KEY: mapBoxAPI,
HOLO_IP: holoIP,
EV1_HOLO_IP: ev1HoloIP,
EV2_HOLO_IP: ev2HoloIP,
SERVER_IP: inputSERVER_IP,
EV1_TEAM_ID: ev1TeamID,
EV2_TEAM_ID: ev2TeamID,
ROVER_IP: roverIP,
});
};

const handleSetHOLO_IP = () => {
const inputHOLO_IP = document.getElementById('holo_ip').value;
setHoloIP(inputHOLO_IP);
const handleSetEV1_HOLO_IP = () => {
const inputEV1_HOLO_IP = document.getElementById('ev1_holo_ip').value;
setEv1HoloIP(inputEV1_HOLO_IP);
updateConfigOnServer({
TSS_IP: tssIP,
MAPBOX_KEY: mapBoxAPI,
HOLO_IP: inputHOLO_IP,
EV1_HOLO_IP: inputEV1_HOLO_IP,
EV2_HOLO_IP: ev2HoloIP,
SERVER_IP: serverIP,
EV1_TEAM_ID: ev1TeamID,
EV2_TEAM_ID: ev2TeamID,
ROVER_IP: roverIP,
});
};

const handleSetEV2_HOLO_IP = () => {
const inputEV2_HOLO_IP = document.getElementById('ev2_holo_ip').value;
setEv2HoloIP(inputEV2_HOLO_IP);
updateConfigOnServer({
TSS_IP: tssIP,
MAPBOX_KEY: mapBoxAPI,
EV1_HOLO_IP: ev1HoloIP,
EV2_HOLO_IP: inputEV2_HOLO_IP,
SERVER_IP: serverIP,
EV1_TEAM_ID: ev1TeamID,
EV2_TEAM_ID: ev2TeamID,
Expand All @@ -160,7 +184,8 @@ function Setup() {
updateConfigOnServer({
TSS_IP: tssIP,
MAPBOX_KEY: inputMapBox_API,
HOLO_IP: holoIP,
EV1_HOLO_IP: ev1HoloIP,
EV2_HOLO_IP: ev2HoloIP,
SERVER_IP: serverIP,
EV1_TEAM_ID: ev1TeamID,
EV2_TEAM_ID: ev2TeamID,
Expand All @@ -174,7 +199,8 @@ function Setup() {
updateConfigOnServer({
TSS_IP: tssIP,
MAPBOX_KEY: mapBoxAPI,
HOLO_IP: holoIP,
EV1_HOLO_IP: ev1HoloIP,
EV2_HOLO_IP: ev2HoloIP,
SERVER_IP: serverIP,
EV1_TEAM_ID: inputEV1TeamID,
EV2_TEAM_ID: ev2TeamID,
Expand All @@ -188,7 +214,8 @@ function Setup() {
updateConfigOnServer({
TSS_IP: tssIP,
MAPBOX_KEY: mapBoxAPI,
HOLO_IP: holoIP,
EV1_HOLO_IP: ev1HoloIP,
EV2_HOLO_IP: ev2HoloIP,
SERVER_IP: serverIP,
EV1_TEAM_ID: ev1TeamID,
EV2_TEAM_ID: inputEV2TeamID,
Expand All @@ -202,7 +229,8 @@ function Setup() {
updateConfigOnServer({
TSS_IP: tssIP,
MAPBOX_KEY: mapBoxAPI,
HOLO_IP: holoIP,
EV1_HOLO_IP: ev1HoloIP,
EV2_HOLO_IP: ev2HoloIP,
SERVER_IP: serverIP,
EV1_TEAM_ID: ev1TeamID,
EV2_TEAM_ID: ev2TeamID,
Expand Down Expand Up @@ -246,11 +274,20 @@ function Setup() {
</div>
</div>
<div className='dataEntry'>
<label htmlFor='holo_ip'>HOLO Lens IP Address: </label>
<input type='text' id='holo_ip' name='holo_ip' defaultValue={holoIP} />
<button id="info-button" onClick={() => setShowHoloIPModal(true)}>?</button>
<button onClick={handleSetHOLO_IP}>Set HOLO IP</button>
<div className={`status ${holoIPStatus}`}>
<label htmlFor='ev1_holo_ip'>EV1 HoloLens IP Address: </label>
<input type='text' id='ev1_holo_ip' name='ev1_holo_ip' defaultValue={ev1HoloIP} />
<button id="info-button" onClick={() => setShowEv1HoloIPModal(true)}>?</button>
<button onClick={handleSetEV1_HOLO_IP}>Set EV1 HoloLens IP</button>
<div className={`status ${ev1HoloIPStatus}`}>
<span className="status-text"></span>
</div>
</div>
<div className='dataEntry'>
<label htmlFor='ev2_holo_ip'>EV2 HoloLens IP Address: </label>
<input type='text' id='ev2_holo_ip' name='ev2_holo_ip' defaultValue={ev2HoloIP} />
<button id="info-button" onClick={() => setShowEv2HoloIPModal(true)}>?</button>
<button onClick={handleSetEV2_HOLO_IP}>Set EV2 HoloLens IP</button>
<div className={`status ${ev2HoloIPStatus}`}>
<span className="status-text"></span>
</div>
</div>
Expand Down Expand Up @@ -285,7 +322,8 @@ function Setup() {

<InfoModal showModal={showTssIPModal} setShowModal={setShowTssIPModal} content="The TSS IP Address is needed so the server can receive information to update EVA data and positioning. If the TSS is running on the local machine, the IP is localhost:{port} (port is usually 14141). If the TSS is running on an external machine, find the exposed IP of that machine on the local network. Instructions for running the TSS can be found here: https://github.com/dignojrteogalbo/TSS_2024/tree/docker" />
<InfoModal showModal={showServerIPModal} setShowModal={setShowServerIPModal} content="The Server must be running via Uvicorn to receive data. If the Server is running on the local machine, the IP is localhost:{port} (port is usually 8000). If the Server is running on an external machine, find the exposed IP of that machine on the local network. Instructions to run the server can be found here: https://github.com/columbiaspace/SUITS-23-24-LMCC" />
<InfoModal showModal={showHoloIPModal} setShowModal={setShowHoloIPModal} content="The HOLO IP is found by asking the HoloLens 'What's my IP Address?' or by going into network settings. The IP is necessary for video streaming" />
<InfoModal showModal={showEv1HoloIPModal} setShowModal={setShowEv1HoloIPModal} content="The EV1 HoloLens IP is found by asking the HoloLens 'What's my IP Address?' or by going into network settings. The IP is necessary for video streaming" />
<InfoModal showModal={showEv2HoloIPModal} setShowModal={setShowEv2HoloIPModal} content="The EV2 HoloLens IP is found by asking the HoloLens 'What's my IP Address?' or by going into network settings. The IP is necessary for video streaming" />
<InfoModal showModal={showMapBoxAPIModal} setShowModal={setShowMapBoxAPIModal} content="The Mapbox API key was sent in the Slack channel, dm Jonah if necessary. You can also get your own key here: https://docs.mapbox.com/help/glossary/access-token/" />
</div>
);
Expand Down

0 comments on commit 89426f1

Please sign in to comment.