Skip to content

B
Backpack-gui
Commit b0abf46d authored by hesam's avatar hesam
Browse files
Options

sio connection

parent c4048772
Hide whitespace changes
Inline Side-by-side
Showing with 286 additions and 82 deletions
.env
View file @ b0abf46d
REACT_APP_BACKEND_URL=http://localhost:4500/api REACT_APP_BACKEND_URL=http://localhost:3000
REACT_APP_SOCKET_URL=http://localhost:4500 REACT_APP_SOCKET_URL="http://192.168.0.98:5500"
\ No newline at end of file \ No newline at end of file
.env.production 0 → 100644
View file @ b0abf46d
REACT_APP_BACKEND_URL=""
REACT_APP_SOCKET_URL=":5500/"
\ No newline at end of file
package-lock.json
View file @ b0abf46d
...@@ -14949,8 +14949,7 @@ ...@@ -14949,8 +14949,7 @@
"uuid": { "uuid": {
"version": "8.3.2", "version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
"optional": true
}, },
"v8-compile-cache": { "v8-compile-cache": {
"version": "2.3.0", "version": "2.3.0",
......
package.json
View file @ b0abf46d
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-virtualized": "^9.22.3", "react-virtualized": "^9.22.3",
"socket.io-client": "^4.3.2", "socket.io-client": "^4.3.2",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4", "web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4", "workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4", "workbox-broadcast-update": "^5.1.4",
...@@ -56,5 +57,6 @@ ...@@ -56,5 +57,6 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
} },
"proxy": "http://192.168.0.98:5000"
} }
src/App.js
View file @ b0abf46d
...@@ -5,17 +5,29 @@ import ImuGps from "./components/ImuGps"; ...@@ -5,17 +5,29 @@ import ImuGps from "./components/ImuGps";
import { useEffect } from "react"; import { useEffect } from "react";
import DebugList from"./components/DebugList"; import DebugList from"./components/DebugList";
import GeneralStatus from "./components/GeneralStatus"; import GeneralStatus from "./components/GeneralStatus";
import DeviceStart from "./components/DeviceStart";
import socketClient from "socket.io-client" import socketClient from "socket.io-client"
import {AutoSizer} from 'react-virtualized'; 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";
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);
function App() { function App() {
const [pauseMessages, setPauseMessages] = useState(false); const [pauseMessages, setPauseMessages] = useState(false);
useEffect(() => { useEffect(() => {
socket.on("connectionStart", (res) => { socket.on("connection_start", (res) => {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/Device/status",
}).then(async (res) => {
console.log(res);
// update dataset name
});
console.log(res); console.log(res);
}) })
...@@ -33,6 +45,7 @@ const onPauseMessages =() =>{ ...@@ -33,6 +45,7 @@ const onPauseMessages =() =>{
<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/>
</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} />
......
src/components/DebugList.js
View file @ b0abf46d
...@@ -2,7 +2,7 @@ import React from "react"; ...@@ -2,7 +2,7 @@ import React from "react";
import { List } from "react-virtualized"; import { List } from "react-virtualized";
class DebugList extends React.Component { class DebugList extends React.Component {
state = { state = {
data: [], data: []
}; };
constructor(props) { constructor(props) {
...@@ -11,10 +11,7 @@ class DebugList extends React.Component { ...@@ -11,10 +11,7 @@ class DebugList extends React.Component {
componentDidMount() { componentDidMount() {
this.props.socket.on("debugMessages", (res) => { this.props.socket.on("debugMessages", (res) => {
// // console.log('2',res)
// let db=[]
// let db=[res,...debugMessages]
// let dbl=db.map((msg)=>{return msg['id']})
if (!this.props.pause) { if (!this.props.pause) {
let mydata = [res, ...this.state.data]; let mydata = [res, ...this.state.data];
this.setState({ data: mydata }); this.setState({ data: mydata });
...@@ -43,7 +40,7 @@ class DebugList extends React.Component { ...@@ -43,7 +40,7 @@ class DebugList extends React.Component {
rowCount={this.state.data.length} rowCount={this.state.data.length}
width={width} width={width}
height={height - 10} height={height - 10}
rowHeight={20} rowHeight={rowHeight}
rowRenderer={this.rowRenderer} rowRenderer={this.rowRenderer}
overscanRowCount={3} overscanRowCount={3}
/> />
......
src/components/DeviceStart.js 0 → 100644
View file @ b0abf46d
import React, { useState } from "react";
import Axios from "axios";
const DevStatus = () => {
const [startDevBtn, setStart_dev_Bt] = useState(true);
const onStartDev = () => {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/Device/start",
}).then(async (res) => {
console.log("********************");
// update dataset name
});
setStart_dev_Bt(false);
};
return (
<React.Fragment>
<div className=" row m-1 ">
<div className="col-12 px-1 my-1">
<button
disabled={!startDevBtn}
className="btn btn-primary btn-block"
onClick={onStartDev}
>
Start Dev
</button>
</div>
</div>
</React.Fragment>
);
};
export default DevStatus;
src/components/GeneralStatus.js
View file @ b0abf46d
...@@ -16,62 +16,87 @@ const GeneralStatus = () => { ...@@ -16,62 +16,87 @@ const GeneralStatus = () => {
}).then(async (res) => { }).then(async (res) => {
console.log("********************"); console.log("********************");
// update dataset name // update dataset name
setDatasetName(res) setDatasetName(res.data.dataset_name)
}); });
setNewDatasetBtn(false); setNewDatasetBtn(false);
}; };
const onCaptureBtnClick = () => { const onCaptureBtnClick = () => {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/camera/start",
}).then(async (res) => {
console.log("********************");
});
if (captueBtn === "Start Capture") { if (captueBtn === "Start Capture") {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/camera/rec",
}).then(async (res) => {
console.log("********************");
});
setCaptureBtn("End Capture"); setCaptureBtn("End Capture");
} }
else { else {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/camera/stop",
}).then(async (res) => {
console.log("********************");
});
setNewDatasetBtn(true); setNewDatasetBtn(true);
setCaptureBtn("Start Capture"); setCaptureBtn("Start Capture");
} }
}; };
const onGpsBtnClick = () => { const onGpsBtnClick = () => {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/gps/start",
}).then(async (res) => {
console.log("********************");
});
if (gpsBtn === "Start Gps"){ 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"); setGpsBtn("End Gps");
} }
else { else {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/gps/off",
}).then(async (res) => {
console.log("********************");
});
setGpsBtn("Start Gps"); setGpsBtn("Start Gps");
} }
}; };
const onImuBtnClick = () => { const onImuBtnClick = () => {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/imu/start",
}).then(async (res) => {
console.log("********************");
});
if (imuBtn === "Start Imu") 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"); setImuBtn("End Imu");
} }
else { 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"); setImuBtn("Start Imu");
} }
}; };
......
src/components/ImuGps.js
View file @ b0abf46d
import Axios from "axios"; import Axios from "axios";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { AutoSizer } from "react-virtualized";
import Gps from "./UIElements/Gps"; import Gps from "./UIElements/Gps";
import Imu from "./UIElements/Imu"; import Imu from "./UIElements/Imu";
const ImuGps = ({socket}) => { const ImuGps = ({ socket }) => {
return ( return (
<div className=" row m-1 "> <div className=" row m-1 ">
<div className="col-6 px-1"> <div className="col-6 px-1 ">
<Imu socket={socket}/>
<Imu socket={socket} />
</div> </div>
<div className="col-6 px-1"> <div className="col-6 px-1">
<Gps socket={socket}/> <Gps socket={socket} />
</div> </div>
</div> </div>
); );
......
src/components/UIElements/Imu copy.js 0 → 100644
View file @ b0abf46d
import React from "react";
import { List } from "react-virtualized";
import { v4 as uuidv4 } from "uuid";
import { AutoSizer } from "react-virtualized";
class Imu extends React.Component {
state = {
data: [],
};
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
this.props.socket.on("ImuData", (res) => {
let mydata = [res, ...this.state.data];
this.setState({ data: mydata });
// this.state.data=[]
});
}
rowRenderer = ({ index, isScrolling, key, style }) => {
if (index > 0) {
return "";
}
return (
<div key={`liMessages_${uuidv4()}`}>
<div>
<div className="col-4 float-left text-right bold">X :</div>
<span>{this.state.data[index].x}</span>
</div>
<div>
<div className="col-4 float-left text-right bold">Y :</div>
<span>{this.state.data[index].y}</span>
</div>
<div>
<div className="col-4 float-left text-right bold">Z :</div>
<span>{this.state.data[index].z}</span>
</div>
</div>
);
};
render() {
const height = this.props.height;
const rowHeight = this.props.height;
const width = this.props.width;
return (
<div
className={
"border p-1 rounded pb-3 border-2 " +
(true ? "border-success " : "border-danger")
}
>
<h6>IMU</h6>
<List
rowCount={this.state.data.length}
width={width}
height={height }
rowHeight={height }
rowRenderer={this.rowRenderer}
overscanRowCount={3}
/>
</div>
);
}
}
export default Imu;
src/components/UIElements/Imu.js
View file @ b0abf46d
import Axios from "axios"; import React from "react";
import { useEffect, useState } from "react"; import { List } from "react-virtualized";
import { v4 as uuidv4 } from "uuid";
const Imu = ({socket}) => { import { AutoSizer } from "react-virtualized";
class Imu extends React.Component {
const [imuData, setImuData] = useState({}); state = {
const [newImuData, setNewImuData] = useState({}); data: [],
socket.on("ImuData", (res) => { };
console.log(res);
setImuData(res); constructor(props) {
super(props);
}) this.state = {
// useEffect(() => { data: [{x:0,y:0,z:0}],
// Axios({ };
// method: "GET", }
// withCredentials: true,
// url: process.env.REACT_APP_BACKEND_URL + "/imuInfo", componentDidMount() {
// }).then(async (res) => { this.props.socket.on("ImuData", (res) => {
// console.log("********************"); let mydata = [res];
// setImuData(res.data); this.setState({ data: mydata });
// console.log(res.data); // this.state.data=[]
// }); });
// }, [newImuData]); }
return (
<div className={"border p-1 rounded pb-3 border-2 " + (imuData.connection ? "border-success " : "border-danger") }>
<h6>IMU</h6> render() {
<div> const height = this.props.height;
<div className="col-4 float-left text-right bold">X :</div> const rowHeight = this.props.height;
<span>{imuData.x}</span> const width = this.props.width;
</div> return (
<div> <div
<div className="col-4 float-left text-right bold">Y :</div> className={
<span>{imuData.y}</span> "border p-1 rounded pb-3 border-2 " +
</div> (true ? "border-success " : "border-danger")
<div> }
<div className="col-4 float-left text-right bold">Z :</div> >
<span>{imuData.z}</span> <h6>IMU</h6>
</div>
</div> <div>
); <div className="col-4 float-left text-right bold">X :</div>
}; <span>{this.state.data[0].x.toFixed(2)}</span>
</div>
<div>
<div className="col-4 float-left text-right bold">Y :</div>
<span>{this.state.data[0].y.toFixed(2)}</span>
</div>
<div>
<div className="col-4 float-left text-right bold">Z :</div>
<span>{this.state.data[0].z.toFixed(2)}</span>
</div>
</div>
);
}
}
export default Imu; export default Imu;
src/components/UIElements/Imup.js 0 → 100644
View file @ b0abf46d
import Axios from "axios";
import { useEffect, useState } from "react";
const Imup = ({socket}) => {
const [imuData, setImuData] = useState({});
const [newImuData, setNewImuData] = useState({});
socket.on("ImuData", (res) => {
console.log(res);
setImuData(res);
})
return (
<div className={"border p-1 rounded pb-3 border-2 " + (imuData.connection ? "border-success " : "border-danger") }>
<h6>IMU</h6>
<div>
<div className="col-4 float-left text-right bold">X :</div>
<span>{imuData.x}</span>
</div>
<div>
<div className="col-4 float-left text-right bold">Y :</div>
<span>{imuData.y}</span>
</div>
<div>
<div className="col-4 float-left text-right bold">Z :</div>
<span>{imuData.z}</span>
</div>
</div>
);
};
export default Imu;
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