sio connection

.env

-REACT_APP_BACKEND_URL=http://localhost:4500/api
-REACT_APP_SOCKET_URL=http://localhost:4500
+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

+REACT_APP_BACKEND_URL=""
+REACT_APP_SOCKET_URL=":5500/"
\ No newline at end of file

package-lock.json

@@ -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

@@ -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

@@ -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

@@ -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

+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

@@ -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 = () => {
+
+
+    if (captueBtn === "Start Capture") {
       Axios({
         method: "GET",
         withCredentials: true,
-      url: process.env.REACT_APP_BACKEND_URL + "/camera/start",
+        url: process.env.REACT_APP_BACKEND_URL + "/camera/rec",
       }).then(async (res) => {
         console.log("********************");
       });
-
-    if (captueBtn === "Start Capture") {
       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 = () => {
+
+
+    if (gpsBtn === "Start Gps"){
       Axios({
         method: "GET",
         withCredentials: true,
-      url: process.env.REACT_APP_BACKEND_URL + "/gps/start",
+        url: process.env.REACT_APP_BACKEND_URL + "/gps/on",
       }).then(async (res) => {
         console.log("********************");
       });
-
-    if (gpsBtn === "Start Gps"){
     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/start",
+        url: process.env.REACT_APP_BACKEND_URL + "/imu/on",
       }).then(async (res) => {
-      console.log("********************");
+        console.log("imu on ********************");
       });
-
-    if (imuBtn === "Start Imu") 
-    {
       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

 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

+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

-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]);
+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 " + (imuData.connection ? "border-success " : "border-danger")  }>
+      <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>{imuData.x}</span>
+          <span>{this.state.data[0].x.toFixed(2)}</span>
         </div>
         <div>
           <div className="col-4 float-left text-right bold">Y :</div>
-      <span>{imuData.y}</span>
+          <span>{this.state.data[0].y.toFixed(2)}</span>
         </div>
         <div>
           <div className="col-4 float-left text-right bold">Z :</div>
-      <span>{imuData.z}</span>
+          <span>{this.state.data[0].z.toFixed(2)}</span>
         </div>
+
+
       </div>
     );
-};
+  }
+}
 export default Imu;

src/components/UIElements/Imup.js

+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;