Merge pull request #25 from kiyu-git/develop

kiyu-git · web-flow · commit 8499f7923989 · 2024-01-05T09:49:24.000+09:00
Develop
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,25 @@
+# 0.2.0
+
+- BaudRate の変更に対応
+
+  - 前バージョンまでは 9600 のみ対応でしたが、本バージョンで幅広い範囲の BaudRate に対応しました。
+  - この対応に伴って、UI が一部変更になっています。
+  - 対応 BaudRate - `300, 600, 750, 1200, 2400, 4800, 9600, 19200, 31250, 38400, 57600, 74880,
+115200, 230400, 250000, 460800, 500000, 921600, 1000000, 2000000`
+
+- 記録中の SerialPort の変更を不可に
+
+  - 記録が停止するまでは SerialPort を変更できないようにしました。
+  - 意図しない記録の中断を防ぐための対応です。
+
+- Arduino Example の追加
+
+  - Arduino スケッチの例を追加しました。
+
+- 正規表現の改善
+  - `測定値A0: 1023`のような値ラベルに数字が入っている場合でも、正しくプロットできるように文字パース機能を改善しました。
+
 # 0.1.1
 
 - ミリ秒単位の更新に対応
-  - 全バージョンまでは秒単位のリアルタイム入力のみプロット可能でしたが、本バージョンでミリ秒単位の更新にも対応しました。
+  - 前バージョンまでは秒単位のリアルタイム入力のみプロット可能でしたが、本バージョンでミリ秒単位の更新にも対応しました。
diff --git a/README.md b/README.md
@@ -5,6 +5,12 @@ Arduino などからのシリアル通信の値をリアルタイムにプロッ
 ![](./_img/SerialPlotTool.png)
 ![](./_img/RealtimeDataLogger.png)
 
+## How to use
+
+Install の項に従ってインストールすると簡単に使用できます。
+
+Arduino のスケッチファイルについては、`arduino_example`を参考にしてください。
+
 ## Change log
 
 [Change Log](https://github.com/kiyu-git/Serial-Plot-Tools/blob/main/CHANGELOG.md)
diff --git a/_img/RealtimeDataLogger.png b/_img/RealtimeDataLogger.png
diff --git a/arduino_example/arduino_example.ino b/arduino_example/arduino_example.ino
@@ -0,0 +1,15 @@
+void setup() {
+  Serial.begin(9600);
+}
+
+void loop() {
+  int analogA0 = analogRead(A0);
+  int analogA1 = analogRead(A1);
+  Serial.print("測定値A0:");
+  Serial.print(analogA0);
+  Serial.print(",");
+  Serial.print("測定値A1:");
+  Serial.print(analogA1);
+  Serial.println();
+  delay(100);
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "serial-plot-tools",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A foundation for scalable desktop apps",
   "keywords": [
     "electron",
@@ -23,9 +23,9 @@
   },
   "license": "MIT",
   "author": {
-    "name": "Electron React Boilerplate Maintainers",
-    "email": "electronreactboilerplate@gmail.com",
-    "url": "https://electron-react-boilerplate.js.org"
+    "name": "kiyu-git",
+    "email": "",
+    "url": "https://github.com/kiyu-git/Serial-Plot-Tools"
   },
   "contributors": [
     {
diff --git a/release/app/package-lock.json b/release/app/package-lock.json
diff --git a/release/app/package.json b/release/app/package.json
@@ -1,12 +1,12 @@
 {
-	"name": "electron-react-boilerplate",
-	"version": "4.6.0",
+	"name": "serial-plot-tools",
+	"version": "0.2.0",
 	"description": "A foundation for scalable desktop apps",
 	"license": "MIT",
 	"author": {
-		"name": "Electron React Boilerplate Maintainers",
-		"email": "electronreactboilerplate@gmail.com",
-		"url": "https://github.com/electron-react-boilerplate"
+		"name": "kiyu-git",
+		"email": "",
+		"url": "https://github.com/kiyu-git/Serial-Plot-Tools"
 	},
 	"main": "./dist/main/main.js",
 	"scripts": {
diff --git a/src/main/electron-src/lib/serialManager.js b/src/main/electron-src/lib/serialManager.js
@@ -19,14 +19,17 @@ const getSerialPorts = async () => {
 
 
 let port;
+let portPath;
+let baudRate = 9600;
 let webContents;
 
 const setSerialPort = (_portPath, _webContents) => {
   return new Promise(function (resolve, reject) {
     closeSerialPort();
+    portPath = _portPath
     port = new SerialPort({
-      path: _portPath,
-      baudRate: 9600
+      path: portPath,
+      baudRate: baudRate
     }, function (err) {
       if (err) {
         reject(err.message);
@@ -63,6 +66,12 @@ const closeSerialPort = () => {
   }
 }
 
+// handle baudRate //
+const setBaudRate = async (_baudRate, _webContents) => {
+  baudRate = Number(_baudRate);
+  await setSerialPort(portPath, _webContents);
+}
+
 // handle save  //
 let dataRecorder;
 class DataRecorder {
@@ -166,6 +175,7 @@ module.exports = {
   getSerialPorts,
   setSerialPort,
   closeSerialPort,
+  setBaudRate,
   recordStart,
   recordStop
 };
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -25,6 +25,7 @@ const {
   closeSerialPort,
   getSerialPorts,
   setSerialPort,
+  setBaudRate,
   recordStart,
   recordStop,
 } = require('./electron-src/lib/serialManager');
@@ -185,6 +186,10 @@ const createWindow = async () => {
     return await setSerialPort(_arg, subWindowRealtimeDataLogger.webContents);
   });
 
+  ipcMain.handle('setBaudRate', async (_e, _arg) => {
+    return await setBaudRate(_arg, subWindowRealtimeDataLogger.webContents);
+  });
+
   ipcMain.handle('recordStart', async (_e, _arg) => {
     return await recordStart(_arg, subWindowRealtimeDataLogger.webContents);
   });
diff --git a/src/main/preload.ts b/src/main/preload.ts
@@ -12,6 +12,8 @@ const electronHandler = {
   setSerialPort: (selectedPort: string) =>
     ipcRenderer.invoke('setSerialPort', selectedPort),
   closeSerialPort: () => ipcRenderer.invoke('closeSerialPort'),
+  setBaudRate: (baudRate: string) =>
+    ipcRenderer.invoke('setBaudRate', baudRate),
   recordStart: () => ipcRenderer.invoke('recordStart'),
   recordStop: () => ipcRenderer.invoke('recordStop'),
   openSaveFolder: (path: string) => ipcRenderer.invoke('openSaveFolder', path),
diff --git a/src/renderer/pages/DataLogger/index.tsx b/src/renderer/pages/DataLogger/index.tsx
@@ -25,7 +25,7 @@ import Plot from 'react-plotly.js';
 import styles from './index.module.scss';
 
 type data = {
-  timestamp: string;
+  timestamp: Date;
   rawData: string[];
 };
 
@@ -89,7 +89,7 @@ class Line {
       this.shortY.shift();
     }
 
-    this.layout.datarevision += 1;
+    this.layout.datarevision = Number(this.layout.datarevision) + 1;
     this.revision += 1;
   }
 
@@ -114,20 +114,27 @@ class Line {
 const status = {
   idle: 0,
   portSelected: 1,
-  Streaming: 2,
-  recordStarted: 3,
-  recordStopped: 4,
+  chgBaudRate: 2,
+  streaming: 3,
+  recordStarted: 4,
+  recordStopped: 5,
 };
 
 const displayModes = {
   short: 0,
   long: 1,
 };
 
+const availableBaudRates = [
+  300, 600, 750, 1200, 2400, 4800, 9600, 19200, 31250, 38400, 57600, 74880,
+  115200, 230400, 250000, 460800, 500000, 921600, 1000000, 2000000,
+];
+
 export function DataLogger() {
   const buttonGetAvailableSerialPorts = useRef<HTMLButtonElement>(null);
   const selectAvailablePorts = useRef<HTMLSelectElement>(null);
   const [availablePorts, SetAvailablePorts] = useState<Array<PortInfo>>([]);
+  const [baudRate, setBaudRate] = useState<string>('9600');
   const [newData, setNewData] = useState<data>();
   const [info, setInfo] = useState<info>();
   const [lines, setLines] = useState<Array<Line>>([]);
@@ -137,6 +144,7 @@ export function DataLogger() {
 
   // set serial port
   const getAvailableSerialPorts = async () => {
+    setCurrentStatus(status.idle);
     SetAvailablePorts([]);
     const availableSerialPorts = await window.api.getSerialPorts();
     SetAvailablePorts(availableSerialPorts);
@@ -161,12 +169,23 @@ export function DataLogger() {
     }
   };
 
+  const ChangeBaudRate = async (value: string) => {
+    try {
+      await window.api.setBaudRate(value);
+      setBaudRate(value);
+      setCurrentStatus(status.portSelected);
+      // 読み込み中
+    } catch (e) {
+      console.warn(e);
+    }
+  };
+
   // plot functions
   useEffect(() => {
     if (newData === undefined) return;
     if (
       !(
-        currentStatus === status.Streaming ||
+        currentStatus === status.streaming ||
         currentStatus === status.recordStarted
       )
     ) {
@@ -178,12 +197,14 @@ export function DataLogger() {
         lines.push(line);
       }
       setLines(lines);
-      setCurrentStatus(status.Streaming);
+      setCurrentStatus(status.streaming);
     } else {
       const updateLines = Array.from(lines);
       for (let i = 0; i < lines.length; i++) {
         const pointY =
-          newData.rawData[i].match(/[+-]?(?:\d+\.?\d*|\.\d+)/)![0] || '0';
+          newData.rawData[i]
+            .split(':')[1]
+            .match(/[+-]?(?:\d+\.?\d*|\.\d+)/)![0] || '0';
         updateLines[i].appendData(newData.timestamp, parseFloat(pointY));
       }
       setLines(updateLines);
@@ -244,6 +265,7 @@ export function DataLogger() {
         // 何も出さない
         return;
       case status.portSelected:
+      case status.chgBaudRate:
         // loading
         return (
           <Center h={'100%'}>
@@ -302,6 +324,7 @@ export function DataLogger() {
                 color={'teal.600'}
                 borderColor={'teal.600'}
                 ref={selectAvailablePorts}
+                isDisabled={currentStatus === status.recordStarted}
                 onChange={(e) => setSerialPort(e.target.value)}
               >
                 <option value="">選択してください</option>
@@ -318,6 +341,7 @@ export function DataLogger() {
                   colorScheme="teal"
                   variant="outline"
                   size="sm"
+                  isDisabled={currentStatus === status.recordStarted}
                   onClick={getAvailableSerialPorts}
                   ref={buttonGetAvailableSerialPorts}
                 >
@@ -326,6 +350,36 @@ export function DataLogger() {
               </Tooltip>
             </Stack>
           </Box>
+          <Box bgColor={'white'}>
+            <Heading fontSize={'xl'} mb={1}>
+              Select Baud Rate
+            </Heading>
+            <Stack direction="row" spacing={1}>
+              <Select
+                size="sm"
+                borderWidth="1px"
+                borderRadius="md"
+                color={'teal.600'}
+                borderColor={'teal.600'}
+                ref={selectAvailablePorts}
+                value={baudRate}
+                isDisabled={
+                  currentStatus == status.idle ||
+                  currentStatus == status.recordStarted
+                }
+                onChange={(e) => ChangeBaudRate(e.target.value)}
+              >
+                {availableBaudRates.map((availableBaudRate) => (
+                  <option
+                    value={`${availableBaudRate}`}
+                    key={availableBaudRate}
+                  >
+                    {`${availableBaudRate} baud`}
+                  </option>
+                ))}
+              </Select>
+            </Stack>
+          </Box>
           <Box bgColor={'white'}>
             <Heading fontSize={'xl'} mb={1}>
               Record
@@ -336,7 +390,7 @@ export function DataLogger() {
                 variant="outline"
                 size="sm"
                 onClick={recordStart}
-                isDisabled={currentStatus != status.Streaming}
+                isDisabled={currentStatus != status.streaming}
                 w={'48%'}
               >
                 Start
