= (e) => {
12 | if (e.code === "Enter" && serial) {
13 | serial.send(promptValue);
14 | setPromptValue("");
15 | }
16 | };
17 |
18 | const handleStoredCommandClick = (command: string) => () => {
19 | serial?.send(command);
20 | };
21 |
22 | const handleRestart = () => {
23 | serial?.restartTarget();
24 | };
25 |
26 | return (
27 |
28 |
29 | setPromptValue(e.target.value)}
35 | onKeyDown={handleKeyDown}
36 | sx={{ flex: 1 }}
37 | />
38 |
39 |
40 |
41 |
46 |
51 |
52 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/src/components/SerialManager.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Backdrop,
3 | Button,
4 | ButtonGroup,
5 | Card,
6 | CardContent,
7 | Chip,
8 | CircularProgress,
9 | MenuItem,
10 | Stack,
11 | TextField,
12 | Typography,
13 | } from "@mui/material";
14 | import { Box } from "@mui/system";
15 | import { useState } from "react";
16 | import { useAvailablePorts } from "../lib/useAvailablePorts";
17 | import { SimpleFocSerialPort } from "../simpleFoc/serial";
18 | import { SerialCommandPrompt } from "./SerialCommandPrompt";
19 | import { SerialOutputViewer } from "./SerialOutputViewer";
20 |
21 | const BAUD_RATES =
22 | [
23 | 300,
24 | 1200,
25 | 2400,
26 | 4800,
27 | 9600,
28 | 11200,
29 | 19200,
30 | 38400,
31 | 57600,
32 | 74880,
33 | 115200,
34 | 230400,
35 | 250000,
36 | 921600
37 | ];
38 |
39 | export const SerialManager = ({
40 | onSetSerial,
41 | serial,
42 | ...other
43 | }: {
44 | serial: SimpleFocSerialPort | null;
45 | onSetSerial: (serial: SimpleFocSerialPort | null) => any;
46 | }) => {
47 | const [baudRate, setBaudRate] = useState(BAUD_RATES[1]);
48 | const [loading, setLoading] = useState(false);
49 | const ports = useAvailablePorts();
50 |
51 | const handleConnect = async (port?: SerialPort) => {
52 | const serial = new SimpleFocSerialPort(baudRate);
53 | setLoading(true);
54 | try {
55 | await serial.open(port);
56 | onSetSerial(serial);
57 | } finally {
58 | setLoading(false);
59 | }
60 | };
61 |
62 | const handleDisconnect = async () => {
63 | setLoading(true);
64 | try {
65 | await serial?.close();
66 | } finally {
67 | setLoading(false);
68 | }
69 | };
70 |
71 | return (
72 |
73 | theme.zIndex.drawer + 1 }}
75 | open={loading}
76 | >
77 |
78 |
79 |
80 |
81 |
82 |
83 | Serial
84 |
85 | setBaudRate(Number(e.target.value))}
90 | >
91 | {BAUD_RATES.map((option) => (
92 |
95 | ))}
96 |
97 |
98 |
105 |
112 |
113 | {!!ports.length && (
114 |
115 |
116 | Previously connected:
117 |
118 | {ports.map((port, i) => (
119 | handleConnect(port)}
127 | />
128 | ))}
129 |
130 | )}
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 | );
140 | };
141 |
--------------------------------------------------------------------------------
/src/components/SerialOutputViewer.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@mui/system";
2 | import { FixedSizeList } from "react-window";
3 | import { useEffect, useLayoutEffect, useRef, useState } from "react";
4 | import { useSerialPort, useSerialPortLines } from "../lib/serialContext";
5 | import { SerialLine } from "../simpleFoc/serial";
6 |
7 | const SerialLineDisplay = ({
8 | index,
9 | style,
10 | data,
11 | }: {
12 | index: number;
13 | style: any;
14 | data: SerialLine[];
15 | }) => (
16 |
25 | {data[index].type === "received" ? "➡️" : "⬅️"}
26 |
27 | {data[index].content}
28 |
29 | );
30 |
31 | const serialLinesToKey = (index: number, data: SerialLine[]) => {
32 | return data[index].index;
33 | };
34 |
35 | const SerialLinesList = FixedSizeList;
36 |
37 | export const SerialOutputViewer = () => {
38 | const listRef = useRef();
39 | const listOuterRef = useRef();
40 | const lines = useSerialPortLines();
41 |
42 | useEffect(() => {
43 | if (!listRef.current) {
44 | return;
45 | }
46 | if (
47 | listOuterRef.current &&
48 | listOuterRef.current?.scrollHeight -
49 | (listOuterRef.current?.scrollTop + listOuterRef.current?.clientHeight) <
50 | 300
51 | ) {
52 | listRef.current.scrollToItem(lines.length ? lines.length - 1 : 0);
53 | }
54 | }, [lines]);
55 |
56 | return (
57 |
63 |
73 |
83 | {SerialLineDisplay}
84 |
85 |
86 |
87 | );
88 | };
89 |
--------------------------------------------------------------------------------
/src/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/lib/LineBreakTransformer.ts:
--------------------------------------------------------------------------------
1 | export class LineBreakTransformer implements Transformer {
2 | chunks = "";
3 |
4 | transform: TransformerTransformCallback = (
5 | chunk,
6 | controller
7 | ) => {
8 | // Append new chunks to existing chunks.
9 | this.chunks += chunk;
10 | // For each line breaks in chunks, send the parsed lines out.
11 | const lines = this.chunks.split("\r\n");
12 | this.chunks = lines.pop() || "";
13 | lines.forEach((line) => controller.enqueue(line));
14 | };
15 |
16 | flush: TransformerFlushCallback = (controller) => {
17 | // When the stream is closed, flush any remaining chunks out.
18 | controller.enqueue(this.chunks);
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/src/lib/serialContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext, useEffect, useRef } from "react";
2 | import { SimpleFocSerialPort } from "../simpleFoc/serial";
3 | import { useLastValue } from "./useLastValue";
4 | import { useRerender, useThrotthledRerender } from "./utils";
5 |
6 | export const serialPortContext = createContext(
7 | null
8 | );
9 |
10 | export const useSerialPort = () => {
11 | return useContext(serialPortContext);
12 | };
13 |
14 | export const useSerialPortLines = () => {
15 | const serial = useContext(serialPortContext);
16 | const rerender = useThrotthledRerender(100);
17 |
18 | useEffect(() => {
19 | if (!serial) {
20 | return;
21 | }
22 | const lineHandler = () => {
23 | rerender();
24 | };
25 | serial.on("line", lineHandler);
26 |
27 | return () => {
28 | serial.off("line", lineHandler);
29 | };
30 | }, [serial]);
31 | return serial?.lines || [];
32 | };
33 |
34 | export const useSerialPortRef = () => {
35 | return useLastValue(useContext(serialPortContext));
36 | };
37 |
38 | export const useSerialPortOpenStatus = () => {
39 | const serialPort = useSerialPort();
40 | const rerender = useRerender();
41 | useEffect(() => {
42 | serialPort?.addListener("stateChange", rerender);
43 | return () => {
44 | serialPort?.removeListener("stateChange", rerender);
45 | };
46 | }, []);
47 |
48 | return !!serialPort?.port;
49 | };
50 |
--------------------------------------------------------------------------------
/src/lib/useAvailablePorts.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from "react";
2 |
3 | export const useAvailablePorts = () => {
4 | const [ports, setPorts] = useState([] as SerialPort[]);
5 |
6 | const refreshPorts = useCallback(() => {
7 | navigator.serial
8 | .getPorts()
9 | .then((ports) => {
10 | setPorts(ports);
11 | })
12 | .catch((e) => {
13 | console.error("Error while listing ports", e);
14 | });
15 | }, []);
16 |
17 | useEffect(() => {
18 | navigator.serial.addEventListener("connect", refreshPorts);
19 | navigator.serial.addEventListener("disconnect", refreshPorts);
20 | refreshPorts();
21 | return () => {
22 | navigator.serial.removeEventListener("connect", refreshPorts);
23 | navigator.serial.removeEventListener("disconnect", refreshPorts);
24 | };
25 | }, []);
26 |
27 | return ports;
28 | };
29 |
--------------------------------------------------------------------------------
/src/lib/useInterval.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useLastValue } from "./useLastValue";
3 |
4 | export const useInterval = (callback: () => any, interval: number) => {
5 | const callbackRef = useLastValue(callback);
6 | useEffect(() => {
7 | const intervalRef = setInterval(() => {
8 | callbackRef.current();
9 | }, interval);
10 | return () => {
11 | clearInterval(intervalRef);
12 | };
13 | }, [interval]);
14 | };
15 |
--------------------------------------------------------------------------------
/src/lib/useLastValue.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 |
3 | export function useLastValue(value: T): { current: T } {
4 | const ref = useRef(value);
5 | ref.current = value;
6 | return ref;
7 | }
8 |
--------------------------------------------------------------------------------
/src/lib/useParameterSettings.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export const useParameterSettings = (
4 | fullCommandString: string,
5 | defaultMin: number,
6 | defaultMax: number
7 | ) => {
8 | const [expanded, setExpanded] = useLocalStorage(
9 | `simpleFocSetting:${fullCommandString}`,
10 | false
11 | );
12 | const [min, setMin] = useLocalStorage(
13 | `simpleFocSetting:${fullCommandString}:min`,
14 | defaultMin
15 | );
16 | const [max, setMax] = useLocalStorage(
17 | `simpleFocSetting:${fullCommandString}:max`,
18 | defaultMax
19 | );
20 |
21 | return {
22 | expanded,
23 | setExpanded,
24 | min,
25 | setMin,
26 | max,
27 | setMax,
28 | };
29 | };
30 |
31 | // Hook
32 | function useLocalStorage(key: string, initialValue: T) {
33 | // State to store our value
34 | // Pass initial state function to useState so logic is only executed once
35 | const [storedValue, setStoredValue] = useState(() => {
36 | if (typeof window === "undefined") {
37 | return initialValue;
38 | }
39 |
40 | try {
41 | // Get from local storage by key
42 | const item = window.localStorage.getItem(key);
43 | // Parse stored json or if none return initialValue
44 | return item ? JSON.parse(item) : initialValue;
45 | } catch (error) {
46 | // If error also return initialValue
47 | console.log(error);
48 | return initialValue;
49 | }
50 | });
51 |
52 | // Return a wrapped version of useState's setter function that ...
53 | // ... persists the new value to localStorage.
54 | const setValue = (value: T) => {
55 | try {
56 | // Allow value to be a function so we have same API as useState
57 | const valueToStore =
58 | value instanceof Function ? value(storedValue) : value;
59 | // Save state
60 | setStoredValue(valueToStore);
61 | // Save to local storage
62 | if (typeof window !== "undefined") {
63 | window.localStorage.setItem(key, JSON.stringify(valueToStore));
64 | }
65 | } catch (error) {
66 | // A more advanced implementation would handle the error case
67 | console.log(error);
68 | }
69 | };
70 |
71 | return [storedValue, setValue] as [typeof storedValue, typeof setValue];
72 | }
73 |
--------------------------------------------------------------------------------
/src/lib/useSerialIntervalSender.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useSerialPort, useSerialPortOpenStatus } from "./serialContext";
3 |
4 | // send the command every X miliseconds and directly after the serial is connected
5 | export const useSerialIntervalSender = (command: string, interval: number) => {
6 | const serial = useSerialPort();
7 | const status = useSerialPortOpenStatus();
8 |
9 | useEffect(() => {
10 | if (!status) {
11 | return;
12 | }
13 |
14 | serial?.send(command);
15 | const intervalRef = setInterval(() => {
16 | serial?.send(command);
17 | }, interval);
18 | return () => {
19 | clearInterval(intervalRef);
20 | };
21 | }, [serial, command, interval, status]);
22 | };
23 |
--------------------------------------------------------------------------------
/src/lib/useSerialLineEvent.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 | import { SerialLine } from "../simpleFoc/serial";
3 | import { useSerialPort } from "./serialContext";
4 |
5 | export const useSerialLineEvent = (callback: (line: SerialLine) => any) => {
6 | const serial = useSerialPort();
7 | const callbackRef = useRef(callback);
8 | callbackRef.current = callback;
9 |
10 | useEffect(() => {
11 | if (!serial) {
12 | return;
13 | }
14 |
15 | const lineHandler = (line: SerialLine) => {
16 | if (line.type === "received") {
17 | callbackRef.current(line);
18 | }
19 | };
20 | serial.on("line", lineHandler);
21 | return () => {
22 | serial.off("line", lineHandler);
23 | };
24 | }, [serial]);
25 | };
26 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { throttle } from "lodash-es";
2 | import { useCallback, useMemo, useState } from "react";
3 |
4 | export function assertExist(a: T | undefined): asserts a is T {
5 | if (!a) {
6 | throw new Error("Undefined");
7 | }
8 | }
9 |
10 | export function assert(a: any, msg: string = "assert failed"): void {
11 | if (!a) {
12 | throw new Error(msg);
13 | }
14 | }
15 |
16 | export const useRerender = () => {
17 | const [, setNotUsed] = useState(0);
18 | return useCallback(() => {
19 | setNotUsed((n) => n + 1);
20 | }, []);
21 | };
22 |
23 | export const useThrotthledRerender = (delay: number) => {
24 | const [, setNotUsed] = useState(0);
25 | return useMemo(() => {
26 | return throttle(() => {
27 | setNotUsed((n) => n + 1);
28 | }, delay);
29 | }, [delay]);
30 | };
31 |
32 | export const delay = (ms: number) => {
33 | return new Promise((resolve) => setTimeout(resolve, ms));
34 | };
35 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App";
4 | import "./index.css";
5 |
6 | import "@fontsource/roboto/300.css";
7 | import "@fontsource/roboto/400.css";
8 | import "@fontsource/roboto/500.css";
9 | import "@fontsource/roboto/700.css";
10 |
11 | import CssBaseline from "@mui/material/CssBaseline";
12 |
13 | import { ThemeProvider, createTheme } from "@mui/material/styles";
14 |
15 | const darkTheme = createTheme({
16 | palette: {
17 | mode: "light",
18 | },
19 | });
20 |
21 | ReactDOM.createRoot(document.getElementById("root")!).render(
22 |
23 |
24 |
25 |
26 |
27 |
28 | );
29 |
--------------------------------------------------------------------------------
/src/simpleFoc/serial.ts:
--------------------------------------------------------------------------------
1 | import EventEmitter from "eventemitter3";
2 | import { LineBreakTransformer } from "../lib/LineBreakTransformer";
3 | import { assert, assertExist, delay } from "../lib/utils";
4 |
5 | const MAX_LINES_IN_BUFFER = 10000000;
6 |
7 | export type SerialLine = {
8 | index: number;
9 | content: string;
10 | type: "received" | "sent";
11 | };
12 |
13 | export class SimpleFocSerialPort extends EventEmitter<"line" | "stateChange"> {
14 | port: SerialPort | undefined;
15 | writer: WritableStreamDefaultWriter | undefined;
16 |
17 | _closeReader: undefined | (() => any);
18 | _closeWriter: undefined | (() => any);
19 |
20 | lastLineIndex = 0;
21 | lines = [] as SerialLine[];
22 |
23 | constructor(public baudRate: number) {
24 | super();
25 | }
26 |
27 | async open(existingPort?: SerialPort) {
28 | assert(!this.port, "Port is already open");
29 | const port =
30 | existingPort ||
31 | (await navigator.serial.requestPort({
32 | filters: [],
33 | }));
34 | await port.open({
35 | baudRate: this.baudRate,
36 | bufferSize: 1024,
37 | });
38 |
39 | assert(!this.port, "Port is already open");
40 | this.port = port;
41 |
42 | if (port.writable) {
43 | const textEncoder = new TextEncoderStream();
44 | const writableStreamClosed = textEncoder.readable.pipeTo(port.writable);
45 | this.writer = textEncoder.writable.getWriter();
46 |
47 | this._closeWriter = async () => {
48 | this.writer?.close();
49 | await writableStreamClosed;
50 | this._closeWriter = undefined;
51 | };
52 | }
53 | this._readLoop();
54 | this.emit("stateChange");
55 | }
56 |
57 | private async _readLoop() {
58 | assertExist(this.port);
59 | while (this.port?.readable) {
60 | // will restart a loop if a non-fatal error was triggered
61 | const textDecoder = new TextDecoderStream();
62 | const readableStreamClosed = this.port.readable.pipeTo(
63 | textDecoder.writable
64 | );
65 |
66 | const reader = textDecoder.readable
67 | .pipeThrough(new TransformStream(new LineBreakTransformer()))
68 | .getReader();
69 |
70 | this._closeReader = async () => {
71 | await reader.cancel();
72 | await readableStreamClosed.catch(() => {});
73 | this._closeReader = undefined;
74 | };
75 |
76 | try {
77 | while (true) {
78 | const { value, done } = await reader.read();
79 | if (done) {
80 | break;
81 | }
82 | this.handleLine(value, "received");
83 | }
84 | } catch (error) {
85 | console.error(error);
86 | // Handle |error|...
87 | } finally {
88 | reader.releaseLock();
89 | }
90 | }
91 | }
92 |
93 | async close() {
94 | if (!this.port) {
95 | throw new Error("Already closed");
96 | }
97 | const port = this.port;
98 | this.port = undefined;
99 |
100 | await this._closeReader?.();
101 | await this._closeWriter?.();
102 |
103 | await port.close();
104 | this.emit("stateChange");
105 | }
106 |
107 | private handleLine(line: string, type: SerialLine["type"]) {
108 | const serialLine: SerialLine = {
109 | index: this.lastLineIndex,
110 | content: line,
111 | type,
112 | };
113 | this.lastLineIndex += 1;
114 | this.lines.push(serialLine);
115 | this.lines = this.lines.slice(-MAX_LINES_IN_BUFFER);
116 | this.emit("line", serialLine);
117 | }
118 |
119 | async send(line: string) {
120 | this.writer?.write(`${line}\n`);
121 | this.handleLine(line, "sent");
122 | }
123 |
124 | async restartTarget() {
125 | assertExist(this.port);
126 | await this.port.setSignals({ dataTerminalReady: false });
127 | await delay(200);
128 | await this.port.setSignals({ dataTerminalReady: true });
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"],
20 | "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "module": "esnext",
5 | "moduleResolution": "node"
6 | },
7 | "include": ["vite.config.ts"]
8 | }
9 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()]
7 | })
8 |
--------------------------------------------------------------------------------