Skip to content

Commit 974dd80

Browse files
fstasifstasi
committed
Update protocol to support pluggable devices
1 parent 6e1abbc commit 974dd80

File tree

7 files changed

+631
-255
lines changed

7 files changed

+631
-255
lines changed

‎package-lock.json‎

Lines changed: 393 additions & 117 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
{
22
"name": "arduino-serial-plotter-webapp",
3-
"version": "0.0.17",
4-
"dependencies": {
5-
},
3+
"version": "0.0.18",
4+
"dependencies": {},
65
"license": "AGPL",
76
"scripts": {
87
"start": "react-scripts start",

‎src/App.tsx‎

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,29 @@
11
import React, { useEffect, useState, useCallback, useRef } from "react";
22
import { ChartPlotter } from "./ChartPlotter";
33
import { namedVariablesMulti } from "./fakeMessagsGenerators";
4-
import { SerialPlotter } from "./utils";
4+
import { EOL, isEOL, MonitorSettings, PluggableMonitor } from "./utils";
55

66
export default function App() {
7-
const [config, setConfig] = useState<SerialPlotter.Config | null>(null);
7+
const [config, setConfig] = useState<Partial<MonitorSettings | null>>(null);
88

99
const websocket = useRef<WebSocket | null>(null);
1010

1111
const chartRef = useRef<any>();
1212

1313
const onMiddlewareMessage = useCallback(
14-
(
15-
message:
16-
| SerialPlotter.Protocol.StreamMessage
17-
| SerialPlotter.Protocol.CommandMessage
18-
) => {
14+
(message: PluggableMonitor.Protocol.Message) => {
1915
// if there is no command
20-
if (!SerialPlotter.Protocol.isCommandMessage(message)) {
16+
if (PluggableMonitor.Protocol.isDataMessage(message)) {
2117
chartRef && chartRef.current && chartRef.current.addNewData(message);
2218
return;
2319
}
2420

25-
if (
26-
message.command ===
27-
SerialPlotter.Protocol.Command.MIDDLEWARE_CONFIG_CHANGED
28-
) {
21+
if (PluggableMonitor.Protocol.isMiddlewareCommandMessage(message)) {
2922
const { darkTheme, serialPort, connected } =
30-
message.data as SerialPlotter.Config;
23+
message.data.monitorUISettings || {};
3124

3225
let updateTitle = false;
33-
let serialNameTitle = config?.serialPort;
26+
let serialNameTitle = config?.monitorUISettings?.serialPort;
3427
if (typeof serialPort !== "undefined") {
3528
serialNameTitle = serialPort;
3629
updateTitle = true;
@@ -54,19 +47,23 @@ export default function App() {
5447
setConfig((c) => ({ ...c, ...message.data }));
5548
}
5649
},
57-
[config?.serialPort]
50+
[config?.monitorUISettings?.serialPort]
5851
);
5952

6053
// as soon as the wsPort is set, create a websocket connection
6154
React.useEffect(() => {
62-
if (!config?.wsPort) {
55+
if (!config?.monitorUISettings?.wsPort) {
6356
return;
6457
}
6558

66-
console.log(`opening ws connection on localhost:${config?.wsPort}`);
67-
websocket.current = new WebSocket(`ws://localhost:${config?.wsPort}`);
59+
console.log(
60+
`opening ws connection on localhost:${config?.monitorUISettings?.wsPort}`
61+
);
62+
websocket.current = new WebSocket(
63+
`ws://localhost:${config?.monitorUISettings?.wsPort}`
64+
);
6865
websocket.current.onmessage = (res: any) => {
69-
const message: SerialPlotter.Protocol.Message = JSON.parse(res.data);
66+
const message: PluggableMonitor.Protocol.Message = JSON.parse(res.data);
7067
onMiddlewareMessage(message);
7168
};
7269
const wsCurrent = websocket.current;
@@ -76,40 +73,53 @@ export default function App() {
7673
wsCurrent.close();
7774
};
7875
// eslint-disable-next-line react-hooks/exhaustive-deps
79-
}, [config?.wsPort]);
76+
}, [config?.monitorUISettings?.wsPort]);
8077

8178
// at bootstrap read params from the URL
8279
useEffect(() => {
8380
const urlParams = new URLSearchParams(window.location.search);
8481

85-
const urlSettings: SerialPlotter.Config = {
86-
currentBaudrate: parseInt(urlParams.get("currentBaudrate") || "9600"),
87-
currentLineEnding: urlParams.get("lineEnding") || "\n",
88-
baudrates: (urlParams.get("baudrates") || "")
89-
.split(",")
90-
.map((baud: string) => parseInt(baud)),
91-
darkTheme: urlParams.get("darkTheme") === "true",
92-
wsPort: parseInt(urlParams.get("wsPort") || "3030"),
93-
interpolate: urlParams.get("interpolate") === "true",
94-
serialPort: urlParams.get("serialPort") || "/serial/port/address",
95-
connected: urlParams.get("connected") === "true",
96-
generate: urlParams.get("generate") === "true",
82+
const urlSettings: MonitorSettings = {
83+
pluggableMonitorSettings: {
84+
baudrate: {
85+
id: "baudrate",
86+
label: "Baudrate",
87+
type: "enum",
88+
values: (urlParams.get("baudrates") || "").split(","),
89+
selectedValue: urlParams.get("baudrate") || "9600",
90+
},
91+
},
92+
monitorUISettings: {
93+
lineEnding: isEOL(urlParams.get("lineEnding"))
94+
? (urlParams.get("lineEnding") as EOL)
95+
: "\r\n",
96+
darkTheme: urlParams.get("darkTheme") === "true",
97+
wsPort: parseInt(urlParams.get("wsPort") || "3030"),
98+
interpolate: urlParams.get("interpolate") === "true",
99+
serialPort: urlParams.get("serialPort") || "/serial/port/address",
100+
connected: urlParams.get("connected") === "true",
101+
generate: urlParams.get("generate") === "true",
102+
},
97103
};
98104

99105
if (config === null) {
100106
onMiddlewareMessage({
101-
command: SerialPlotter.Protocol.Command.MIDDLEWARE_CONFIG_CHANGED,
107+
command:
108+
PluggableMonitor.Protocol.MiddlewareCommand.ON_SETTINGS_DID_CHANGE,
102109
data: urlSettings,
103110
});
104111
}
105112
}, [config, onMiddlewareMessage]);
106113

107114
// If in "generate" mode, create fake data
108115
useEffect(() => {
109-
if (config?.generate) {
116+
if (config?.monitorUISettings?.generate) {
110117
const randomValuesInterval = setInterval(() => {
111118
const messages = namedVariablesMulti();
112-
onMiddlewareMessage(messages);
119+
onMiddlewareMessage({
120+
command: null,
121+
data: messages,
122+
});
113123
}, 32);
114124
return () => {
115125
clearInterval(randomValuesInterval);

‎src/ChartPlotter.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import React, {
88

99
import { Line } from "react-chartjs-2";
1010

11-
import { addDataPoints, SerialPlotter } from "./utils";
11+
import { addDataPoints, MonitorSettings, PluggableMonitor } from "./utils";
1212
import { Legend } from "./Legend";
1313
import { Chart, ChartData, ChartOptions } from "chart.js";
1414
import "chartjs-adapter-luxon";
@@ -29,7 +29,7 @@ function _Chart(
2929
config,
3030
websocket,
3131
}: {
32-
config: SerialPlotter.Config;
32+
config: Partial<MonitorSettings>;
3333
websocket: React.MutableRefObject<WebSocket | null>;
3434
},
3535
ref: React.ForwardedRef<any>
@@ -38,11 +38,13 @@ function _Chart(
3838

3939
const [, setForceUpdate] = useState(0);
4040
const [pause, setPause] = useState(false);
41-
const [connected, setConnected] = useState(config.connected);
41+
const [connected, setConnected] = useState(
42+
config?.monitorUISettings?.connected
43+
);
4244
const [dataPointThreshold] = useState(50);
4345
const [cubicInterpolationMode, setCubicInterpolationMode] = useState<
4446
"default" | "monotone"
45-
>(config.interpolate ? "monotone" : "default");
47+
>(config?.monitorUISettings?.interpolate ? "monotone" : "default");
4648
const [initialData] = useState<ChartData<"line">>({
4749
datasets: [],
4850
});
@@ -88,10 +90,10 @@ function _Chart(
8890
scales: {
8991
y: {
9092
grid: {
91-
color: config.darkTheme ? "#2C353A" : "#ECF1F1",
93+
color: config?.monitorUISettings?.darkTheme ? "#2C353A" : "#ECF1F1",
9294
},
9395
ticks: {
94-
color: config.darkTheme ? "#DAE3E3" : "#2C353A",
96+
color: config?.monitorUISettings?.darkTheme ? "#DAE3E3" : "#2C353A",
9597
font: {
9698
family: "Open Sans",
9799
},
@@ -100,14 +102,14 @@ function _Chart(
100102
},
101103
x: {
102104
grid: {
103-
color: config.darkTheme ? "#2C353A" : "#ECF1F1",
105+
color: config?.monitorUISettings?.darkTheme ? "#2C353A" : "#ECF1F1",
104106
},
105107
display: true,
106108
ticks: {
107109
font: {
108110
family: "Open Sans",
109111
},
110-
color: config.darkTheme ? "#DAE3E3" : "#2C353A",
112+
color: config?.monitorUISettings?.darkTheme ? "#DAE3E3" : "#2C353A",
111113
count: 5,
112114
callback: (value) => {
113115
return parseInt(value.toString(), 10);
@@ -142,23 +144,23 @@ function _Chart(
142144
);
143145

144146
useEffect(() => {
145-
if (!config.connected) {
147+
if (!config?.monitorUISettings?.connected) {
146148
setConnected(false);
147149
// when disconnected, force tooltips to be enabled
148150
enableTooltips(true);
149151
return;
150152
}
151153

152154
// when the connection becomes connected, need to cleanup the previous state
153-
if (!connected && config.connected) {
155+
if (!connected && config?.monitorUISettings?.connected) {
154156
// cleanup buffer state
155157
worker.postMessage({ command: "cleanup" });
156158
setConnected(true);
157159

158160
// restore the tooltips state (which match the pause state when connected)
159161
enableTooltips(pause);
160162
}
161-
}, [config.connected, connected, pause, enableTooltips]);
163+
}, [config?.monitorUISettings?.connected, connected, pause, enableTooltips]);
162164

163165
const togglePause = (newState: boolean) => {
164166
if (newState === pause) {
@@ -215,14 +217,11 @@ function _Chart(
215217
};
216218
}, [cubicInterpolationMode, opts, dataPointThreshold]);
217219

218-
const wsSend = (command: string, data: string | number | boolean) => {
220+
const wsSend = (
221+
clientCommand: PluggableMonitor.Protocol.ClientCommandMessage
222+
) => {
219223
if (websocket && websocket?.current?.readyState === WebSocket.OPEN) {
220-
websocket.current.send(
221-
JSON.stringify({
222-
command,
223-
data,
224-
})
225-
);
224+
websocket.current.send(JSON.stringify(clientCommand));
226225
}
227226
};
228227

@@ -254,7 +253,7 @@ function _Chart(
254253
closeable
255254
isOpen
256255
message="Board disconnected"
257-
theme={config.darkTheme ? "dark" : "light"}
256+
theme={config?.monitorUISettings?.darkTheme ? "dark" : "light"}
258257
turnOffAutoHide
259258
/>
260259
)}

‎src/Legend.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useRef, useState } from "react";
22
import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
33
import { LegendItem } from "./LegendItem";
4-
import { SerialPlotter } from "./utils";
4+
import { MonitorSettings, PluggableMonitor } from "./utils";
55
import { Scrollbars } from "react-custom-scrollbars";
66
import Switch from "react-switch";
77

@@ -16,9 +16,11 @@ export function Legend({
1616
}: {
1717
chartRef: ChartJSOrUndefined<"line">;
1818
pause: boolean;
19-
config: SerialPlotter.Config;
19+
config: Partial<MonitorSettings>;
2020
cubicInterpolationMode: "monotone" | "default";
21-
wsSend: (command: string, data: string | number | boolean) => void;
21+
wsSend: (
22+
clientCommand: PluggableMonitor.Protocol.ClientCommandMessage
23+
) => void;
2224
setPause: (pause: boolean) => void;
2325
setInterpolate: (interpolate: boolean) => void;
2426
}): React.ReactElement {
@@ -140,26 +142,35 @@ export function Legend({
140142
onColor="#008184"
141143
onChange={(val) => {
142144
setInterpolate(val);
143-
144145
// send new interpolation mode to middleware
145-
wsSend(
146-
SerialPlotter.Protocol.Command.PLOTTER_SET_INTERPOLATE,
147-
val
148-
);
146+
wsSend({
147+
command:
148+
PluggableMonitor.Protocol.ClientCommand.CHANGE_SETTINGS,
149+
data: {
150+
monitorUISettings: {
151+
interpolate: val,
152+
},
153+
},
154+
});
149155
}}
150156
checked={cubicInterpolationMode === "monotone"}
151157
/>
152158
</label>
153159
<button
154-
disabled={!config.connected}
160+
disabled={!config?.monitorUISettings?.connected}
155161
className="pause-button"
156-
title={config.connected ? undefined : "Serial disconnected"}
162+
title={
163+
config?.monitorUISettings?.connected
164+
? undefined
165+
: "Serial disconnected"
166+
}
157167
onClick={() => {
158-
if (!config.connected) return;
168+
if (!config?.monitorUISettings?.connected) return;
159169
setPause(!pause);
160170
}}
161171
>
162-
{((pause || !config.connected) && "RUN") || "STOP"}
172+
{((pause || !config?.monitorUISettings?.connected) && "RUN") ||
173+
"STOP"}
163174
</button>
164175
<button
165176
className="clear-button"

0 commit comments

Comments
 (0)