Merge branch 'develop'

README.md

@@ -1,6 +1,8 @@
 # Web Serial Monitor
 
-- [Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API)
+[Demo video](https://youtu.be/vUV3pzynWA4)
+
+- Serial Port: [Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API)
 - UI components: [shadcn/ui](https://ui.shadcn.com/)
 - Icons: [tabler](https://tabler.io/icons)
 

cspell.config.yaml

@@ -13,4 +13,6 @@ ignorePaths:
   - .gitignore
   - "*.svg"
 words:
+  - rgba
+  - Roboto
   - tabler

package.json

@@ -13,10 +13,12 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/App.tsx

@@ -1,22 +1,54 @@
-import { useEffect } from "react";
 import { useRouter } from "./context/router";
 import { SerialPortManager } from "./lib/serialport";
 import ScriptsPage from "./pages/scripts";
 import TerminalPage from "./pages/terminal";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./components/ui/dialog";
 
 export default function App() {
   const { currentRoute } = useRouter();
 
-  useEffect(() => {
-    if (!SerialPortManager.isSupported) {
-      alert("This browser does not support Web Serial API");
-    }
-  }, []);
-
   return (
     <>
       {currentRoute === "/" && <TerminalPage />}
       {currentRoute === "/page2" && <ScriptsPage />}
+
+      {/* Check if Web Serial API is supported */}
+      <Dialog open={!SerialPortManager.isSupported}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>🚫 Error</DialogTitle>
+            <DialogDescription>
+              <p className="my-4">
+                This browser does not support the{" "}
+                <strong>Web Serial API</strong>
+              </p>
+              <p>
+                For more information on browser compatibility, please visit the
+                following link:
+              </p>
+              <a
+                href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  color: "#1a73e8",
+                  textDecoration: "underline",
+                  marginTop: "0.5rem",
+                  display: "inline-block",
+                }}
+              >
+                Web Serial API Browser Compatibility
+              </a>
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }

src/components/app-sidebar.tsx

@@ -3,20 +3,38 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
+  SidebarGroupLabel,
   SidebarHeader,
 } from "@/components/ui/sidebar";
+import { Badge } from "@/components/ui/badge";
 import ConnectionConfig from "@/components/connection-config";
+import TxConfig from "./tx-config";
+import RxConfig from "./rx-config";
 
 export function AppSidebar() {
   return (
     <Sidebar>
       <SidebarHeader>
-        {__APP_NAME__} {__APP_VERSION__}
+        <span className="m-2">
+          {__APP_NAME__}
+          <Badge variant="secondary" className="ml-2 px-1 terminal">
+            v{__APP_VERSION__} 🚧
+          </Badge>
+        </span>
       </SidebarHeader>
       <SidebarContent>
-        <SidebarGroup />
-        <ConnectionConfig />
-        <SidebarGroup />
+        <SidebarGroup>
+          {/* <SidebarGroupLabel>Connection</SidebarGroupLabel> */}
+          <ConnectionConfig />
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Rx Config</SidebarGroupLabel>
+          <RxConfig />
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Tx Config</SidebarGroupLabel>
+          <TxConfig />
+        </SidebarGroup>
       </SidebarContent>
       <SidebarFooter />
     </Sidebar>

src/components/connection-config/config-select.tsx

@@ -19,7 +19,7 @@ interface Props {
 export default function ConfigSelect(props: Props) {
   return (
     <Select value={props.value} onValueChange={props.onValueChange}>
-      <SelectTrigger className="w-[180px]">
+      <SelectTrigger>
         <SelectValue />
       </SelectTrigger>
       <SelectContent>

src/components/connection-config/index.tsx

@@ -1,16 +1,22 @@
 import { useState } from "react";
-import { useRouter } from "@/context/router";
 import { SerialPortManager } from "@/lib/serialport";
 import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
 import ConfigSelect from "./config-select";
 
 const baudRateItems = [
   { value: "9600" },
+  { value: "14400" },
   { value: "19200" },
   { value: "38400" },
   { value: "57600" },
   { value: "115200" },
+  { value: "128000" },
+  { value: "230400" },
+  { value: "256000" },
+  { value: "460800" },
   { value: "921600" },
+  { value: "1500000" },
 ];
 
 const dataBitsItems = [{ value: "7" }, { value: "8" }];
@@ -28,46 +34,60 @@ export default function ConnectionConfig() {
   const [dataBits, setDataBits] = useState("8");
   const [parity, setParity] = useState("none");
   const [stopBits, setStopBits] = useState("1");
+  const [connection, setConnection] = useState<"Open" | "Close">("Open");
 
-  const { navigate } = useRouter();
-
-  const handleOpenPort = async () => {
-    const port = SerialPortManager.getInstance();
-    port.open(Number(baudRate), Number(dataBits), parity, Number(stopBits));
-  };
-
-  const handleClosePort = async () => {
+  const handleConnection = () => {
     const port = SerialPortManager.getInstance();
-    port.close();
+    if (port.isConnected) {
+      setConnection("Open");
+      port.close();
+    } else {
+      setConnection("Close");
+      port.open(Number(baudRate), Number(dataBits), parity, Number(stopBits));
+    }
   };
 
   return (
     <>
-      <Button onClick={handleOpenPort}>Open</Button>
-      <Button onClick={handleClosePort}>Close</Button>
-      <Button onClick={() => navigate("/")}>Go to Page 1</Button>
-      <Button onClick={() => navigate("/page2")}>Go to Page 2</Button>
+      <div className="flex flex-col gap-4 m-4">
+        <Button onClick={handleConnection}>{connection}</Button>
+
+        <div className="flex flex-col gap-2">
+          <Label>Baud Rate</Label>
+          <ConfigSelect
+            value={baudRate}
+            onValueChange={setBaudRate}
+            items={baudRateItems}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Label>Data Bits</Label>
+          <ConfigSelect
+            value={dataBits}
+            onValueChange={setDataBits}
+            items={dataBitsItems}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Label>Parity</Label>
+          <ConfigSelect
+            value={parity}
+            onValueChange={setParity}
+            items={parityItems}
+          />
+        </div>
 
-      <ConfigSelect
-        value={baudRate}
-        onValueChange={setBaudRate}
-        items={baudRateItems}
-      />
-      <ConfigSelect
-        value={dataBits}
-        onValueChange={setDataBits}
-        items={dataBitsItems}
-      />
-      <ConfigSelect
-        value={parity}
-        onValueChange={setParity}
-        items={parityItems}
-      />
-      <ConfigSelect
-        value={stopBits}
-        onValueChange={setStopBits}
-        items={stopBitsItems}
-      />
+        <div className="flex flex-col gap-2">
+          <Label>Stop Bits</Label>
+          <ConfigSelect
+            value={stopBits}
+            onValueChange={setStopBits}
+            items={stopBitsItems}
+          />
+        </div>
+      </div>
     </>
   );
 }