블루투스 통신부 수정

HanyangCapstoneProject · Jun 1, 2024 · 36d1b65 · 36d1b65
1 parent 5645fbf
commit 36d1b65
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "apexcharts-clevision": "3.28.5",
     "axios": "^1.7.2",
     "babel-eslint": "^10.1.0",
+    "chart.js": "^4.4.3",
     "clsx": "^1.1.1",
     "eslint-plugin-react": "^7.29.4",
     "mdi-material-ui": "^7.1.0",
@@ -57,6 +58,7 @@
     "react": "17.0.2",
     "react-apexcharts": "^1.3.9",
     "react-big-calendar": "^1.8.7",
+    "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^4.5.0",
     "react-dom": "17.0.2",
     "react-perfect-scrollbar": "^1.5.8",

diff --git a/src/components/BleScanner.js b/src/components/BleScanner.js
@@ -1,9 +1,24 @@
-// components/BleScanner.js
-import { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import CardContent from '@mui/material/CardContent';
+
+// 테이블 MUI
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 
 const BleScanner = () => {
-  const [devices, setDevices] = useState([]);
+  const [devices, setDevices] = useState([]); // 연결된 기기 목록
+  const [batteryLevel, setBatteryLevel] = useState(null); // 현재 배터리 상태
+  const [currentDateTime, setCurrentDateTime] = useState(''); // 현재 날짜와 시간
+  const [batteryLevels, setBatteryLevels] = useState([]); // 배터리 상태 이력
+  const [timeStamps, setTimeStamps] = useState([]); // 시간 이력
+  const [page, setPage] = useState(1); // 현재 페이지
+  const [rowsPerPage] = useState(30); // 페이지 당 행 수
 
   const scanForDevices = async () => {
     try {
@@ -15,32 +30,135 @@ const BleScanner = () => {
       if (device) {
         setDevices((prevDevices) => [...prevDevices, device]);
         console.log('Device found:', device);
+        await connectToDevice(device);
       }
     } catch (error) {
       console.error('Error scanning for Bluetooth devices:', error);
     }
   };
 
+  const connectToDevice = async (device) => {
+    try {
+      const server = await device.gatt.connect();
+      const service = await server.getPrimaryService('battery_service');
+      const characteristic = await service.getCharacteristic('battery_level');
+      readBatteryLevel(characteristic);
+
+      const id = setInterval(() => readBatteryLevel(characteristic), 1000);
+      setIntervalId(id);
+    } catch (error) {
+      console.error('Error connecting to device:', error);
+    }
+  };
+
+  const readBatteryLevel = async (characteristic) => {
+    try {
+      const value = await characteristic.readValue();
+      const batteryLevel = value.getUint8(0);
+      setBatteryLevel(batteryLevel);
+
+      const today = new Date();
+      const formattedDateTime = today.toLocaleString();
+      setCurrentDateTime(formattedDateTime);
+
+      // 이전 배터리 상태와 시간을 배열에 추가
+      setBatteryLevels((prevLevels) => [...prevLevels, batteryLevel]);
+      setTimeStamps((prevTimes) => [...prevTimes, formattedDateTime]);
+
+      // 최근 10개 이력만 유지
+      if (batteryLevels.length >= 10) {
+        setBatteryLevels((prevLevels) => prevLevels.slice(1));
+        setTimeStamps((prevTimes) => prevTimes.slice(1));
+      }
+    } catch (error) {
+      console.error('Error reading battery level:', error);
+    }
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const today = new Date();
+      const formattedDateTime = today.toLocaleString();
+      setCurrentDateTime(formattedDateTime);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div>
-      <Button size='large' 
-        type='submit' 
-        sx={{ mr: 2 }} 
-        fullWidth 
-        variant='contained'
+      <Button
+        size="large"
+        type="submit"
+        sx={{ mr: 2 }}
+        fullWidth
+        variant="contained"
         onClick={scanForDevices}
       >
         주변 센서 찾기
-      </Button >
+      </Button>
       {devices.length > 0 && (
         <ul>
           {devices.map((device, index) => (
             <li key={index}>
-              {device.name || 'Unnamed Device'} ({device.id})
+              {device.name || 'Unnamed Device'} (식별자: {device.id})
             </li>
           ))}
         </ul>
       )}
+      {batteryLevel !== null && (
+        <div>
+          <p>현재 배터리 수준: {batteryLevel}%</p>
+          <p>현재 날짜와 시간: {currentDateTime}</p>
+          <h2>배터리 이력</h2>
+          <Divider sx={{ margin: 0 }} />
+          <TableContainer>
+            <Table sx={{ minWidth: 800 }} aria-label='table in dashboard'>
+              <TableHead>
+                <TableRow>
+                  <TableCell align="center">센서 ID</TableCell>
+                  <TableCell align="center">온도 (TEMP)</TableCell>
+                  <TableCell align="center">습도 (HMID)</TableCell>
+                  <TableCell align="center">타임스탬프</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {(rowsPerPage > 0
+                  ? batteryLevels.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+                  : batteryLevels
+                ).map((level, index) => (
+                  <TableRow key={index}>
+                    <TableCell sx={{ fontSize: '1rem', color: 'black' }} align="center">
+                    3Q/7yaAOKpw/wwSOZx0Qog==
+                    </TableCell>
+                    <TableCell sx={{ fontSize: '1rem', color: 'black' }} align="center">
+                      {level}%
+                    </TableCell>
+                    <TableCell sx={{ fontSize: '1rem', color: 'black' }} align="center">
+                      습도 
+                    </TableCell>
+                    <TableCell sx={{ fontSize: '1rem', color: 'black' }} align="center">
+                      {timeStamps[(page - 1) * rowsPerPage + index]}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <Divider sx={{ margin: 0 }} />
+        </div>
+      )}
+
+      <Button
+        size="large"
+        type="submit"
+        sx={{ mr: 2, my: 2 }}
+        fullWidth
+        variant="contained"
+        onClick={scanForDevices}
+      >
+        평균 값 전송하기
+      </Button>
     </div>
   );
 };

diff --git a/src/pages/mornitoring/index.js b/src/pages/mornitoring/index.js
@@ -1,5 +1,9 @@
 import { useState, useEffect } from 'react';
 import axios from 'axios';
+
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import CardContent from '@mui/material/CardContent';
@@ -30,8 +34,8 @@ const initialData = [
 ];
 
 const initialMeanData = [
-  { id: '1', temp: '25.3', humi: '100' },
-  { id: '2', temp: '25.2', humi: '99' },
+  { number: '1', id: '1', temp: '25.3', humi: '100', timestamp: '2024-05-22 10:00:00' },
+  { number: '2', id: '1', temp: '25.2', humi: '99', timestamp: '2024-05-22 10:00:00' },
 ];
 
 const SensorMonitor = () => {
@@ -141,7 +145,7 @@ const SensorMonitor = () => {
         </Card>
       </Grid>
 
-      <Grid item xs={12}>
+      {/* <Grid item xs={12}>
         <Card>
           <CardHeader
             title='2단계 - 실시간 모니터링'
@@ -209,7 +213,7 @@ const SensorMonitor = () => {
             </Button>
           </CardContent>
         </Paper>
-      </Grid>
+      </Grid> */}
     </Grid>
   );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -478,6 +478,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@mui/base@5.0.0-alpha.72":
   version "5.0.0-alpha.72"
   resolved "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.72.tgz"
@@ -1489,6 +1494,13 @@ chalk@4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chart.js@^4.1.1, chart.js@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz"
+  integrity sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@3.5.1:
   version "3.5.1"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz"
@@ -3890,6 +3902,11 @@ react-big-calendar@^1.8.7:
     react-overlays "^5.2.1"
     uncontrollable "^7.2.1"
 
+react-chartjs-2@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz"
+  integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
+
 react-datepicker@^4.5.0:
   version "4.7.0"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz"