(() => {
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/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/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/components/MotorMonitorGraph.tsx:
--------------------------------------------------------------------------------
1 | import { Axis } from "plotly.js";
2 | import { useRef, useState } from "react";
3 | import Plot, { Figure } from "react-plotly.js";
4 | import { useSerialLineEvent } from "../lib/useSerialLineEvent";
5 |
6 | const MAX_POINTS = 100;
7 | const X_SCALE = new Array(MAX_POINTS).fill(0).map((x, i) => i);
8 |
9 | const COLORS = ["red", "green", "blue", "orange", "pink"];
10 |
11 | export const MotorMonitorGraph = ({ motorKey }: { motorKey: string }) => {
12 | const metrics = useRef([] as { name: string; data: number[] }[]);
13 | const [revision, setRevision] = useState(0);
14 | const [axisZooms, setAxisZooms] = useState({
15 | xaxis: undefined as undefined | number[],
16 | yaxis: [] as (undefined | number[])[],
17 | });
18 |
19 | useSerialLineEvent((line) => {
20 | if (line.content.startsWith(`${motorKey}M`)) {
21 | const points = line.content.slice(2).split("\t").map(Number);
22 | points.forEach((point, i) => {
23 | if (!metrics.current[i]) {
24 | metrics.current[i] = {
25 | name: i.toString(),
26 | data: [],
27 | };
28 | }
29 | metrics.current[i].data.push(point);
30 | if (metrics.current[i].data.length > MAX_POINTS) {
31 | metrics.current[i].data.splice(
32 | 0,
33 | metrics.current[i].data.length - MAX_POINTS
34 | );
35 | }
36 | });
37 | setRevision((r) => r + 1);
38 | }
39 | });
40 |
41 | const handleGraphUpdate = (update: Readonly) => {
42 | let newZoom: typeof axisZooms = {
43 | xaxis: update.layout.xaxis?.autorange
44 | ? undefined
45 | : update.layout.xaxis?.range,
46 | yaxis: [],
47 | };
48 |
49 | let hasChanged = axisZooms.xaxis !== newZoom.xaxis;
50 |
51 | metrics.current.map((m, i) => {
52 | const yAxis = (update.layout as any)[
53 | `yaxis${i === 0 ? "" : i + 1}`
54 | ] as Partial;
55 |
56 | const zoom = yAxis?.autorange ? undefined : yAxis?.range;
57 | newZoom.yaxis.push(zoom);
58 | if (zoom !== axisZooms.yaxis[i]) {
59 | hasChanged = true;
60 | }
61 | });
62 |
63 | if (hasChanged) {
64 | setAxisZooms(newZoom);
65 | }
66 | };
67 |
68 | const axisData = {
69 | xaxis: {
70 | autoRange: axisZooms.xaxis,
71 | },
72 | } as any;
73 | metrics.current.forEach((m, i) => {
74 | const range = axisZooms.yaxis[i];
75 | axisData[`yaxis${i === 0 ? "" : i + 1}`] = {
76 | autoRange: !range,
77 | range: range,
78 | tickfront: {
79 | color: COLORS[i],
80 | },
81 | titlefont: {
82 | color: COLORS[i],
83 | },
84 | // position: i * 0.1,
85 | side: i % 2 ? "left" : "right",
86 | // anchor: "free",
87 | // overlaying: "y",
88 | title: `Trace ${i}`,
89 | };
90 | });
91 |
92 | return (
93 |
94 |
({
97 | x: X_SCALE,
98 | y: metric.data,
99 | type: "scattergl",
100 | mode: "lines",
101 | yaxis: `y${i === 0 ? "" : i + 1}`,
102 | line: {
103 | color: COLORS[i],
104 | },
105 | }))}
106 | layout={{
107 | autosize: true,
108 | height: 400,
109 | datarevision: revision,
110 | ...axisData,
111 | }}
112 | onUpdate={handleGraphUpdate}
113 | useResizeHandler
114 | style={{
115 | width: "100%",
116 | }}
117 | />
118 |
75 |
84 |
85 | }
86 | />
87 |
88 |
89 | }>
90 | Control
91 |
92 |
93 |
94 |
95 |
103 |
111 |
112 |
113 |
114 | }>
115 | Velocity PID
116 |
117 |
118 |
126 |
134 |
142 |
150 |
158 |
166 |
167 |
168 |
169 | }>
170 | Angle PID
171 |
172 |
173 |
181 |
189 |
190 |
191 |
192 |
193 |
194 | ))}
195 |
196 | );
197 | };
198 |
--------------------------------------------------------------------------------