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_SOCKET_URL="http://192.168.0.98:5500"
\ No newline at end of file
REACT_APP_BACKEND_URL=http://localhost:4000/api
REACT_APP_SOCKET_URL=http://localhost:4500
\ No newline at end of file
package.json
View file @ 53d758f7
......@@ -58,5 +58,5 @@
"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 Cameras from "./components/Cameras";
import ImuGps from "./components/ImuGps";
......@@ -11,24 +11,31 @@ import {AutoSizer} from 'react-virtualized';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faPause, faPlay} from "@fortawesome/free-solid-svg-icons";
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);
function App() {
const [status , setStatus] = useState({datasetName : "0000-00-00_000000" , captureStatus : "off" , deviceStatus : "off"});
const [pauseMessages, setPauseMessages] = useState(false);
useEffect(() => {
socket.on("connection_start", (res) => {
console.log("&&&&&&&&&&&&&***********************");
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/Device/status",
}).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
});
console.log(res);
}).catch((er)=> console.log(er));
console.log("&&&&&&&&&&&&&&2");
// console.log(res);
})
socket.on("connect_error", (err) => {
......@@ -40,15 +47,16 @@ const onPauseMessages =() =>{
setPauseMessages(!pauseMessages)
}
return (
<div className="App pt-3">
<h4>Backpack GUI</h4>
<div className=" m-2 py-1 border border-dark rounded">
<Cameras socket={socket} />
<ImuGps socket={socket} />
<DeviceStart/>
<DeviceStart status={status}/>
</div>
<div className=" m-2 py-1 border border-dark rounded">
<GeneralStatus socket={socket} />
<GeneralStatus socket={socket} status={status} />
</div>
<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} >
......@@ -61,6 +69,7 @@ const onPauseMessages =() =>{
</AutoSizer>
</div>
</div>
);
}
......
src/components/Cameras.js
View file @ 53d758f7
......@@ -11,7 +11,7 @@ const Cameras = ({socket}) => {
const [newCameraData, setNewCameraData] = useState([]);
socket.on("cameraData", (res) => {
console.log(res)
// console.log(res)
switch ( res.cam_id )
{
case 0 : setCameraData0(res);
......
src/components/DeviceStart.js
View file @ 53d758f7
import React, { useState } from "react";
import Axios from "axios";
const DevStatus = () => {
const [startDevBtn, setStart_dev_Bt] = useState(true);
const DevStatus = (props) => {
const [startDevBtn, setStartDevBt] = useState(props.status.deviceStatus === "off" ? true : false);
const onStartDev = () => {
......@@ -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 { StatusContext } from "../shared/status-context";
const GeneralStatus = () => {
const GeneralStatus = (props) => {
const [newDatasetBtn, setNewDatasetBtn] = useState(true);
const [captueBtn, setCaptureBtn] = useState("Start Capture");
const [gpsBtn, setGpsBtn] = useState("Start Gps");
const [imuBtn, setImuBtn] = useState("Start Imu");
const [datasetName, setDatasetName] = useState("dataset 1");
const [captueBtn, setCaptureBtn] = useState(props.status.captureStatus);
// const [gpsBtn, setGpsBtn] = useState("Start Gps");
// const [imuBtn, setImuBtn] = useState("Start Imu");
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 = () => {
Axios({
......@@ -16,17 +24,14 @@ const GeneralStatus = () => {
}).then(async (res) => {
console.log("********************");
// update dataset name
setDatasetName(res.data.dataset_name)
setDatasetName(res.data.dataset_name);
});
setNewDatasetBtn(false);
};
const onCaptureBtnClick = () => {
if (captueBtn === "Start Capture") {
if (captueBtn === "off") {
Axios({
method: "GET",
withCredentials: true,
......@@ -34,9 +39,8 @@ const GeneralStatus = () => {
}).then(async (res) => {
console.log("********************");
});
setCaptureBtn("End Capture");
}
else {
setCaptureBtn("on");
} else {
Axios({
method: "GET",
withCredentials: true,
......@@ -46,61 +50,57 @@ const GeneralStatus = () => {
});
setNewDatasetBtn(true);
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 (
<React.Fragment>
......@@ -111,11 +111,11 @@ const GeneralStatus = () => {
className="btn btn-primary btn-block"
onClick={onNewDataSet}
>
New Dataset
New Dataset
</button>
</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
className="btn btn-primary btn-block"
disabled={newDatasetBtn}
......@@ -132,15 +132,15 @@ const GeneralStatus = () => {
>
{imuBtn}
</button>
</div>
</div> */}
<div className="col-12 px-1 my-1">
<button
className="btn btn-primary btn-block"
disabled={newDatasetBtn}
disabled={parseInt(datasetName.replace(/[-_]/g , "")) === 0 ?true : false }
onClick={onCaptureBtnClick}
>
{captueBtn}
{captueBtn ==="off" ? "Start Capture" : " End Capture"}
</button>
</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