add serial port name and connection status

fstasi · fstasi · commit d0a2a9dfbe93 · 2021-11-11T11:38:48.000+01:00
diff --git a/README.md b/README.md
@@ -20,14 +20,18 @@ The application is designed to be as agnostic as possible regarding how and wher
 
 ### Config Parameters
 
-The Serial Plotter Web App is initialized by passing a number of parameters in the URL, in the form of a QueryString (eg: http://localhost:3000?currentBaudrate=100&baudrates=300,1200,2400,4800,9600,19200,38400,57600,74880,115200,230400,250000,500000,1000000,2000000&darkTheme=true&wsPort=5000&interpolate=true&generate=true).
+The Serial Plotter Web App is initialized by passing a number of parameters in the URL, in the form of a QueryString (eg: http://localhost:3000?currentBaudrate=2400&baudrates=300,1200,2400,4800,9600,19200,38400,57600,74880,115200,230400,250000,500000,1000000,2000000&darkTheme=true&wsPort=5000&connected=true&interpolate=true&generate=true).
 
 | Name | Description | Type (default) |
 |-|-|-|
 | `currentBaudrate` | currently selected baudrate | Number(9600)|
+| `currentLineEnding` | currently selected line ending | String("\r\n")|
 | `baudrates` | populate the baudrates menu | String[]/Comma separated strings ([])|
 | `darkTheme` | whether to use the dark version of the plotter | Boolean(false) |
 | `wsPort` | websocket port used for communication | Number(3030) |
+| `interpolate` | whether to smooth the graph or not | Boolean(false) |
+| `serialPort` | name of the serial port the data is coming from | String("") |
+| `connected` | whether if the serial port is connected or not| Boolean(false) |
 | `generate` | generate fake datapoints to print random charts (dev purposes only)| Boolean(false) |
 
 It is possible to update the state of the serial plotter by sending the above parameters via WebSocket in the form of a JSON-stringified object, using the `MIDDLEWARE_CONFIG_CHANGED` [Command](#websocket-communication-protocol).
diff --git a/public/index.html b/public/index.html
@@ -23,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Arduino Serial Plotter Web App</title>
+    <title>Connecting...</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.tsx b/src/App.tsx
@@ -27,7 +27,11 @@ export default function App() {
         SerialPlotter.Protocol.Command.MIDDLEWARE_CONFIG_CHANGED
       ) {
         // set document dark theme
-        const { darkTheme } = message.data as SerialPlotter.Config;
+        const { darkTheme, serialPort, connected } =
+          message.data as SerialPlotter.Config;
+
+        document.title = serialPort + ((!connected && " (disconnected)") || "");
+
         if (typeof darkTheme !== "undefined") {
           darkTheme
             ? document.body.classList.add("dark")
@@ -70,6 +74,8 @@ export default function App() {
       darkTheme: urlParams.get("darkTheme") === "true",
       wsPort: parseInt(urlParams.get("wsPort") || "3030"),
       interpolate: urlParams.get("interpolate") === "true",
+      serialPort: urlParams.get("serialPort") || "/serial/port/address",
+      connected: urlParams.get("connected") === "true",
       generate: urlParams.get("generate") === "true",
     };
 
diff --git a/src/ChartPlotter.tsx b/src/ChartPlotter.tsx
@@ -171,6 +171,7 @@ function _Chart(
             chartRef={chartRef.current}
             setPause={togglePause}
             pause={pause}
+            config={config}
           />
         )}
         <div className="canvas-container">
diff --git a/src/Legend.tsx b/src/Legend.tsx
@@ -1,15 +1,18 @@
 import React from "react";
 import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
 import { LegendItem } from "./LegendItem";
+import { SerialPlotter } from "./utils";
 
 export function Legend({
   chartRef,
   pause,
   setPause,
+  config,
 }: {
   chartRef: ChartJSOrUndefined<"line">;
   pause: boolean;
   setPause: (pause: boolean) => void;
+  config: SerialPlotter.Config;
 }): React.ReactElement {
   return (
     <div className="legend">
@@ -20,12 +23,15 @@ export function Legend({
       </div>
       <div className="actions">
         <button
+          disabled={!config.connected}
           className="pause-button"
+          title={config.connected ? undefined : "Serial disconnected"}
           onClick={() => {
+            if (!config.connected) return;
             setPause(!pause);
           }}
         >
-          {(pause && "RUN") || "STOP"}
+          {((pause || !config.connected) && "RUN") || "STOP"}
         </button>
         <button
           className="clear-button"
diff --git a/src/index.scss b/src/index.scss
@@ -248,6 +248,10 @@ button {
   color: $white;
   padding: 6px 5px;
 
+  &[disabled] {
+    opacity: 0.5;
+  }
+
   &.disabled {
     opacity: 0.3;
   }
diff --git a/src/utils.ts b/src/utils.ts
@@ -9,6 +9,8 @@ export namespace SerialPlotter {
     darkTheme: boolean;
     wsPort: number;
     interpolate: boolean;
+    serialPort: string;
+    connected: boolean;
     generate?: boolean;
   };
   export namespace Protocol {
