Skip to content

B
Backpack-gui
Commit 53d758f7 authored by Sarvin Taba's avatar Sarvin Taba
Browse files
Options

initial status done

parent b0abf46d
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 85 deletions
.env
View file @ 53d758f7
REACT_APP_BACKEND_URL=http://localhost:3000 REACT_APP_BACKEND_URL=http://localhost:4000/api
REACT_APP_SOCKET_URL="http://192.168.0.98:5500" REACT_APP_SOCKET_URL=http://localhost:4500
\ No newline at end of file \ No newline at end of file
package.json
View file @ 53d758f7
...@@ -58,5 +58,5 @@ ...@@ -58,5 +58,5 @@
"last 1 safari version" "last 1 safari version"
] ]
}, },
"proxy": "http://192.168.0.98:5000" "proxy": "http://192.168.0.98:5000"
} }
src/App.js
View file @ 53d758f7
import React , {useState} from "react"; import React , {useState , useContext} from "react";
import "./App.css"; import "./App.css";
import Cameras from "./components/Cameras"; import Cameras from "./components/Cameras";
import ImuGps from "./components/ImuGps"; import ImuGps from "./components/ImuGps";
...@@ -11,24 +11,31 @@ import {AutoSizer} from 'react-virtualized'; ...@@ -11,24 +11,31 @@ import {AutoSizer} from 'react-virtualized';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faPause, faPlay} from "@fortawesome/free-solid-svg-icons"; import {faPause, faPlay} from "@fortawesome/free-solid-svg-icons";
import Axios from "axios"; import Axios from "axios";
import {StatusContext} from './shared/status-context';
const socket = socketClient(process.env.REACT_APP_SOCKET_URL,{transports:['websocket']}); const socket = socketClient(process.env.REACT_APP_SOCKET_URL,{transports:['websocket']});
// const socket = socketClient(process.env.REACT_APP_SOCKET_URL); // const socket = socketClient(process.env.REACT_APP_SOCKET_URL);
function App() { function App() {
const [status , setStatus] = useState({datasetName : "0000-00-00_000000" , captureStatus : "off" , deviceStatus : "off"});
const [pauseMessages, setPauseMessages] = useState(false); const [pauseMessages, setPauseMessages] = useState(false);
useEffect(() => { useEffect(() => {
socket.on("connection_start", (res) => { socket.on("connection_start", (res) => {
console.log("&&&&&&&&&&&&&***********************");
Axios({ Axios({
method: "GET", method: "GET",
withCredentials: true, withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/Device/status", url: process.env.REACT_APP_BACKEND_URL + "/Device/status",
}).then(async (res) => { }).then(async (res) => {
console.log(res); console.log("&&&&&&&&&&&&&&1");
console.log(res.data);
setStatus({ datasetName : res.data.datasetName , captureStatus : res.data.captureStatus , deviceStatus : res.data.deviceStatus })
// update dataset name // update dataset name
}); }).catch((er)=> console.log(er));
console.log(res); console.log("&&&&&&&&&&&&&&2");
// console.log(res);
}) })
socket.on("connect_error", (err) => { socket.on("connect_error", (err) => {
...@@ -40,15 +47,16 @@ const onPauseMessages =() =>{ ...@@ -40,15 +47,16 @@ const onPauseMessages =() =>{
setPauseMessages(!pauseMessages) setPauseMessages(!pauseMessages)
} }
return ( return (
<div className="App pt-3"> <div className="App pt-3">
<h4>Backpack GUI</h4> <h4>Backpack GUI</h4>
<div className=" m-2 py-1 border border-dark rounded"> <div className=" m-2 py-1 border border-dark rounded">
<Cameras socket={socket} /> <Cameras socket={socket} />
<ImuGps socket={socket} /> <ImuGps socket={socket} />
<DeviceStart/> <DeviceStart status={status}/>
</div> </div>
<div className=" m-2 py-1 border border-dark rounded"> <div className=" m-2 py-1 border border-dark rounded">
<GeneralStatus socket={socket} /> <GeneralStatus socket={socket} status={status} />
</div> </div>
<div className=" m-2 px-2 border border-dark rounded fill-height text-left relative "> <div className=" m-2 px-2 border border-dark rounded fill-height text-left relative ">
<button className="btn btn-light btn-sm fixed-tr" onClick={onPauseMessages} > <button className="btn btn-light btn-sm fixed-tr" onClick={onPauseMessages} >
...@@ -61,6 +69,7 @@ const onPauseMessages =() =>{ ...@@ -61,6 +69,7 @@ const onPauseMessages =() =>{
</AutoSizer> </AutoSizer>
</div> </div>
</div> </div>
); );
} }
......
src/components/Cameras.js
View file @ 53d758f7
...@@ -11,7 +11,7 @@ const Cameras = ({socket}) => { ...@@ -11,7 +11,7 @@ const Cameras = ({socket}) => {
const [newCameraData, setNewCameraData] = useState([]); const [newCameraData, setNewCameraData] = useState([]);
socket.on("cameraData", (res) => { socket.on("cameraData", (res) => {
console.log(res) // console.log(res)
switch ( res.cam_id ) switch ( res.cam_id )
{ {
case 0 : setCameraData0(res); case 0 : setCameraData0(res);
......
src/components/DeviceStart.js
View file @ 53d758f7
import React, { useState } from "react"; import React, { useState } from "react";
import Axios from "axios"; import Axios from "axios";
const DevStatus = () => { const DevStatus = (props) => {
const [startDevBtn, setStart_dev_Bt] = useState(true); const [startDevBtn, setStartDevBt] = useState(props.status.deviceStatus === "off" ? true : false);
const onStartDev = () => { const onStartDev = () => {
...@@ -16,7 +16,7 @@ const DevStatus = () => { ...@@ -16,7 +16,7 @@ const DevStatus = () => {
}); });
setStart_dev_Bt(false); setStartDevBt(false);
}; };
......
src/components/GeneralStatus.js
View file @ 53d758f7
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import Axios from "axios"; import Axios from "axios";
import { StatusContext } from "../shared/status-context";
const GeneralStatus = () => { const GeneralStatus = (props) => {
const [newDatasetBtn, setNewDatasetBtn] = useState(true); const [newDatasetBtn, setNewDatasetBtn] = useState(true);
const [captueBtn, setCaptureBtn] = useState("Start Capture"); const [captueBtn, setCaptureBtn] = useState(props.status.captureStatus);
const [gpsBtn, setGpsBtn] = useState("Start Gps"); // const [gpsBtn, setGpsBtn] = useState("Start Gps");
const [imuBtn, setImuBtn] = useState("Start Imu"); // const [imuBtn, setImuBtn] = useState("Start Imu");
const [datasetName, setDatasetName] = useState("dataset 1"); const [datasetName, setDatasetName] = useState(props.status.datasetName);
console.log("general status");
console.log(props.status);
useEffect(() => {
console.log("CHANGEED");
setDatasetName(props.status.datasetName);
}, [props.status]);
const onNewDataSet = () => { const onNewDataSet = () => {
Axios({ Axios({
...@@ -16,17 +24,14 @@ const GeneralStatus = () => { ...@@ -16,17 +24,14 @@ const GeneralStatus = () => {
}).then(async (res) => { }).then(async (res) => {
console.log("********************"); console.log("********************");
// update dataset name // update dataset name
setDatasetName(res.data.dataset_name) setDatasetName(res.data.dataset_name);
}); });
setNewDatasetBtn(false); setNewDatasetBtn(false);
}; };
const onCaptureBtnClick = () => { const onCaptureBtnClick = () => {
if (captueBtn === "off") {
if (captueBtn === "Start Capture") {
Axios({ Axios({
method: "GET", method: "GET",
withCredentials: true, withCredentials: true,
...@@ -34,9 +39,8 @@ const GeneralStatus = () => { ...@@ -34,9 +39,8 @@ const GeneralStatus = () => {
}).then(async (res) => { }).then(async (res) => {
console.log("********************"); console.log("********************");
}); });
setCaptureBtn("End Capture"); setCaptureBtn("on");
} } else {
else {
Axios({ Axios({
method: "GET", method: "GET",
withCredentials: true, withCredentials: true,
...@@ -46,61 +50,57 @@ const GeneralStatus = () => { ...@@ -46,61 +50,57 @@ const GeneralStatus = () => {
}); });
setNewDatasetBtn(true); setNewDatasetBtn(true);
setCaptureBtn("Start Capture"); setCaptureBtn("Start Capture");
}
};
const onGpsBtnClick = () => {
if (gpsBtn === "Start Gps"){
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/gps/on",
}).then(async (res) => {
console.log("********************");
});
setGpsBtn("End Gps");
}
else {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/gps/off",
}).then(async (res) => {
console.log("********************");
});
setGpsBtn("Start Gps");
}
};
const onImuBtnClick = () => {
if (imuBtn === "Start Imu")
{
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/imu/on",
}).then(async (res) => {
console.log("imu on ********************");
});
setImuBtn("End Imu");
}
else {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/imu/off",
}).then(async (res) => {
console.log(" imu off ********************");
});
setImuBtn("Start Imu");
} }
}; };
// const onGpsBtnClick = () => {
// if (gpsBtn === "Start Gps"){
// Axios({
// method: "GET",
// withCredentials: true,
// url: process.env.REACT_APP_BACKEND_URL + "/gps/on",
// }).then(async (res) => {
// console.log("********************");
// });
// setGpsBtn("End Gps");
// }
// else {
// Axios({
// method: "GET",
// withCredentials: true,
// url: process.env.REACT_APP_BACKEND_URL + "/gps/off",
// }).then(async (res) => {
// console.log("********************");
// });
// setGpsBtn("Start Gps");
// }
// };
// const onImuBtnClick = () => {
// if (imuBtn === "Start Imu")
// {
// Axios({
// method: "GET",
// withCredentials: true,
// url: process.env.REACT_APP_BACKEND_URL + "/imu/on",
// }).then(async (res) => {
// console.log("imu on ********************");
// });
// setImuBtn("End Imu");
// }
// else {
// Axios({
// method: "GET",
// withCredentials: true,
// url: process.env.REACT_APP_BACKEND_URL + "/imu/off",
// }).then(async (res) => {
// console.log(" imu off ********************");
// });
// setImuBtn("Start Imu");
// }
// };
return ( return (
<React.Fragment> <React.Fragment>
...@@ -111,11 +111,11 @@ const GeneralStatus = () => { ...@@ -111,11 +111,11 @@ const GeneralStatus = () => {
className="btn btn-primary btn-block" className="btn btn-primary btn-block"
onClick={onNewDataSet} onClick={onNewDataSet}
> >
New Dataset New Dataset
</button> </button>
</div> </div>
<div className="col-6 px-1 my-1">{datasetName}</div> <div className="col-6 px-1 my-1">{datasetName}</div>
<div className="col-6 px-1 my-1"> {/* <div className="col-6 px-1 my-1">
<button <button
className="btn btn-primary btn-block" className="btn btn-primary btn-block"
disabled={newDatasetBtn} disabled={newDatasetBtn}
...@@ -132,15 +132,15 @@ const GeneralStatus = () => { ...@@ -132,15 +132,15 @@ const GeneralStatus = () => {
> >
{imuBtn} {imuBtn}
</button> </button>
</div> </div> */}
<div className="col-12 px-1 my-1"> <div className="col-12 px-1 my-1">
<button <button
className="btn btn-primary btn-block" className="btn btn-primary btn-block"
disabled={newDatasetBtn} disabled={parseInt(datasetName.replace(/[-_]/g , "")) === 0 ?true : false }
onClick={onCaptureBtnClick} onClick={onCaptureBtnClick}
> >
{captueBtn} {captueBtn ==="off" ? "Start Capture" : " End Capture"}
</button> </button>
</div> </div>
</div> </div>
......
src/shared/status-context.js 0 → 100644
View file @ 53d758f7
import { createContext } from 'react';
export const StatusContext = createContext({
status: "0000-00-00_000000",
updateStatus : () => {}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment