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_SOCKET_URL=http://localhost:4500
\ No newline at end of file
REACT_APP_BACKEND_URL=http://localhost:3000
REACT_APP_SOCKET_URL="http://192.168.0.98:5500"
\ 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 @@
"uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"optional": true
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
},
"v8-compile-cache": {
"version": "2.3.0",
......
package.json
View file @ b0abf46d
......@@ -19,6 +19,7 @@
"react-scripts": "4.0.3",
"react-virtualized": "^9.22.3",
"socket.io-client": "^4.3.2",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
......@@ -56,5 +57,6 @@
"last 1 firefox 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";
import { useEffect } from "react";
import DebugList from"./components/DebugList";
import GeneralStatus from "./components/GeneralStatus";
import DeviceStart from "./components/DeviceStart";
import socketClient from "socket.io-client"
import {AutoSizer} from 'react-virtualized';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
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);
function App() {
const [pauseMessages, setPauseMessages] = useState(false);
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);
})
......@@ -33,6 +45,7 @@ const onPauseMessages =() =>{
<div className=" m-2 py-1 border border-dark rounded">
<Cameras socket={socket} />
<ImuGps socket={socket} />
<DeviceStart/>
</div>
<div className=" m-2 py-1 border border-dark rounded">
<GeneralStatus socket={socket} />
......
src/components/DebugList.js
View file @ b0abf46d
......@@ -2,7 +2,7 @@ import React from "react";
import { List } from "react-virtualized";
class DebugList extends React.Component {
state = {
data: [],
data: []
};
constructor(props) {
......@@ -11,10 +11,7 @@ class DebugList extends React.Component {
componentDidMount() {
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) {
let mydata = [res, ...this.state.data];
this.setState({ data: mydata });
......@@ -43,7 +40,7 @@ class DebugList extends React.Component {
rowCount={this.state.data.length}
width={width}
height={height - 10}
rowHeight={20}
rowHeight={rowHeight}
rowRenderer={this.rowRenderer}
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 = () => {
}).then(async (res) => {
console.log("********************");
// update dataset name
setDatasetName(res)
setDatasetName(res.data.dataset_name)
});
setNewDatasetBtn(false);
};
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") {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/camera/rec",
}).then(async (res) => {
console.log("********************");
});
setCaptureBtn("End Capture");
}
else {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/camera/stop",
}).then(async (res) => {
console.log("********************");
});
setNewDatasetBtn(true);
setCaptureBtn("Start Capture");
}
};
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"){
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 = () => {
Axios({
method: "GET",
withCredentials: true,
url: process.env.REACT_APP_BACKEND_URL + "/imu/start",
}).then(async (res) => {
console.log("********************");
});
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");
}
};
......
src/components/ImuGps.js
View file @ b0abf46d
import Axios from "axios";
import { useEffect, useState } from "react";
import { AutoSizer } from "react-virtualized";
import Gps from "./UIElements/Gps";
import Imu from "./UIElements/Imu";
const ImuGps = ({socket}) => {
const ImuGps = ({ socket }) => {
return (
<div className=" row m-1 ">
<div className="col-6 px-1">
<Imu socket={socket}/>
<div className="col-6 px-1 ">
<Imu socket={socket} />
</div>
<div className="col-6 px-1">
<Gps socket={socket}/>
<Gps socket={socket} />
</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 { useEffect, useState } from "react";
const Imu = ({socket}) => {
const [imuData, setImuData] = useState({});
const [newImuData, setNewImuData] = useState({});
socket.on("ImuData", (res) => {
console.log(res);
setImuData(res);
})
// useEffect(() => {
// Axios({
// method: "GET",
// withCredentials: true,
// url: process.env.REACT_APP_BACKEND_URL + "/imuInfo",
// }).then(async (res) => {
// console.log("********************");
// setImuData(res.data);
// console.log(res.data);
// });
// }, [newImuData]);
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>
);
};
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: [{x:0,y:0,z:0}],
};
}
componentDidMount() {
this.props.socket.on("ImuData", (res) => {
let mydata = [res];
this.setState({ data: mydata });
// this.state.data=[]
});
}
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>
<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;
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